gepic/dist/core/extensions/EOptionsEditor/optionItem.vue.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as C, inject as U, resolveComponent as k, createBlock as p, openBlock as r, unref as a, isRef as b, withCtx as y, createElementVNode as s, createElementBlock as E, createCommentVNode as v, normalizeClass as I, createVNode as d } from "vue";
import O from "vuedraggable";
import { pluginManager as $ } from "../../../utils/manager/pluginManager.js";
import { useVModel as B } from "@vueuse/core";
import "../../../hooks/store/index.js";
import m from "../../components/icon/src/icon.vue.js";
const N = {
  key: 0,
  class: "pl-4"
}, D = /* @__PURE__ */ C({
  name: "EOptionItem",
  __name: "optionItem",
  props: {
    modelValue: {}
  },
  emits: ["update:modelValue"],
  setup(V, { emit: _ }) {
    const h = V, i = $.getComponent("input"), c = U("tree", !1), o = B(h, "modelValue", _);
    function f(t) {
      const n = {
        label: "",
        value: ""
      };
      t.children ? t.children.push(n) : t.children = [n];
    }
    function x(t) {
      o.value = o.value.filter((n, u) => u !== t);
    }
    return (t, n) => {
      const u = k("EOptionItem");
      return r(), p(a(O), {
        modelValue: a(o),
        "onUpdate:modelValue": n[0] || (n[0] = (e) => b(o) ? o.value = e : null),
        "item-key": "id",
        "component-data": {
          type: "transition-group"
        },
        group: "option-list",
        handle: ".handle",
        animation: 200
      }, {
        item: y(({ element: e, index: g }) => [
          s("div", null, [
            s("div", {
              class: I([a(c) ? "grid-cols-[16px_auto_auto_16px_16px]" : "grid-cols-[16px_auto_auto_16px]", "option-item text-16px grid text-$epic-text-secondary gap-2 items-center mb-2"])
            }, [
              d(a(m), {
                class: "mr-2 cursor-move handle",
                name: "icon--epic--drag"
              }),
              d(a(i), {
                modelValue: e.label,
                "onUpdate:modelValue": (l) => e.label = l,
                value: e.label,
                "onUpdate:value": (l) => e.label = l,
                placeholder: "label"
              }, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
              d(a(i), {
                modelValue: e.value,
                "onUpdate:modelValue": (l) => e.value = l,
                value: e.value,
                "onUpdate:value": (l) => e.value = l,
                placeholder: "value"
              }, null, 8, ["modelValue", "onUpdate:modelValue", "value", "onUpdate:value"]),
              a(c) ? (r(), p(a(m), {
                key: 0,
                class: "cursor-pointer text-lg!",
                name: "icon--epic--add-rounded",
                onClick: (l) => f(e)
              }, null, 8, ["onClick"])) : v("", !0),
              d(a(m), {
                class: "hover:text-red cursor-pointer",
                name: "icon--epic--delete-outline-rounded",
                onClick: (l) => x(g)
              }, null, 8, ["onClick"])
            ], 2),
            e.children ? (r(), E("div", N, [
              d(u, {
                modelValue: e.children,
                "onUpdate:modelValue": (l) => e.children = l
              }, null, 8, ["modelValue", "onUpdate:modelValue"])
            ])) : v("", !0)
          ])
        ]),
        _: 1
      }, 8, ["modelValue"]);
    };
  }
});
export {
  D as default
};