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