import { defineComponent as q, ref as c, watch as B, onMounted as D, resolveComponent as d, openBlock as s, createElementBlock as u, createVNode as e, unref as f, withCtx as l, createElementVNode as p, toDisplayString as A, createTextVNode as M, createCommentVNode as g } from "vue";
import O from "vuedraggable";
import { f as S, c as T, _ as P } from "./index-16cc6938.mjs";
const W = { style: { width: "100%" } }, $ = { key: 0 }, j = { class: "list-group-item" }, F = { class: "list-group-item-inside" }, I = { class: "content" }, U = { key: 1 }, z = /* @__PURE__ */ q({
  __name: "editableList",
  props: {
    modelValue: {
      type: Array,
      required: !0,
      default() {
        return [];
      }
    },
    labelColumn: {
      type: String,
      required: !0
    },
    editConfig: {
      type: [Object, Function],
      required: !0,
      default() {
        return {};
      }
    }
  },
  emits: ["update:modelValue"],
  setup(m, { emit: v }) {
    const o = m, n = c("list");
    B(
      () => o.editConfig,
      () => {
        n.value = "list";
      }
    );
    let a = c({}), C = c(null);
    D(() => {
      document.body.ondrop = function(t) {
        t.preventDefault(), t.stopPropagation();
      };
    });
    function h(t) {
      return typeof o.labelColumn == "function" ? o.labelColumn(t) : t[o.labelColumn];
    }
    const y = S(o.editConfig, a);
    function k() {
      a.value = { key: T() }, n.value = "add";
    }
    function b(t) {
      o.modelValue.splice(t, 1);
    }
    function x(t) {
      a.value = o.modelValue[t], n.value = "edit";
    }
    function V() {
      n.value == "add" && o.modelValue.push(a.value), v("update:modelValue", o.modelValue), n.value = "list";
    }
    return (t, G) => {
      const i = d("lc-icon"), r = d("el-button"), w = d("MttkWrapComp"), E = d("el-page-header");
      return s(), u("div", W, [
        n.value == "list" ? (s(), u("div", $, [
          e(f(O), {
            tag: "ul",
            list: m.modelValue,
            class: "list-group",
            handle: ".handle",
            "item-key": "name"
          }, {
            item: l(({ element: L, index: _ }) => [
              p("li", j, [
                p("div", F, [
                  e(i, {
                    class: "handle",
                    icon: "mdiDialpad",
                    style: { height: "32px", "padding-top": "2px", "margin-right": "8px" }
                  }),
                  p("span", I, A(h(L)), 1),
                  e(r, {
                    onClick: (N) => x(_)
                  }, {
                    icon: l(() => [
                      e(i, {
                        class: "operation",
                        icon: "mdiNoteEditOutline"
                      })
                    ]),
                    _: 2
                  }, 1032, ["onClick"]),
                  e(r, {
                    text: "",
                    onClick: (N) => b(_)
                  }, {
                    icon: l(() => [
                      e(i, {
                        class: "operation",
                        icon: "mdiCloseCircleOutline"
                      })
                    ]),
                    _: 2
                  }, 1032, ["onClick"])
                ])
              ])
            ]),
            _: 1
          }, 8, ["list"]),
          e(r, {
            style: { "margin-left": "24px", "margin-top": "6px" },
            onClick: k
          }, {
            icon: l(() => [
              e(i, { icon: "mdiPlus" })
            ]),
            default: l(() => [
              M(" Add a new row")
            ]),
            _: 1
          })
        ])) : g("", !0),
        n.value != "list" ? (s(), u("div", U, [
          e(E, {
            title: "back",
            onBack: V,
            style: { padding: "10px", "background-color": "var(--el-fill-color-extra-light)" }
          }, {
            icon: l(() => [
              e(i, { icon: "mdiArrowLeft" })
            ]),
            default: l(() => [
              e(w, {
                config: f(y),
                style: { margin: "4px" },
                ref_key: "tableEditor",
                ref: C
              }, null, 8, ["config"])
            ]),
            _: 1
          })
        ])) : g("", !0)
      ]);
    };
  }
});
const Q = /* @__PURE__ */ P(z, [["__scopeId", "data-v-4216ed9a"]]);
export {
  Q as default
};
