epic-designer/dist/ui-kit/panel-ui/src/components/ETabPaneEditor/index.vue2.js

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

import { defineComponent as b, computed as x, createElementBlock as n, openBlock as r, Fragment as d, createElementVNode as m, createVNode as i, unref as p, withCtx as y, renderList as k, createCommentVNode as U } from "vue";
import { VueDraggable as C } from "vue-draggable-plus";
/* empty css                                 */
import s from "../../../../base-ui/src/icon/icon.vue.js";
/* empty css                                             */
/* empty css                                                  */
import { pluginManager as A } from "../../../../../manager/src/pluginManager.js";
import { getUUID as D } from "../../../../../utils/src/common/string.js";
import "../../../../../git/epic/epic-designer/node_modules/.pnpm/jsep@1.4.0/node_modules/jsep/dist/jsep.js";
import "@vueuse/core";
import "../../../../../hooks/src/store/index.js";
/* empty css                                           */
const I = { class: "epic-propedit-item p-2" }, N = {
  key: 0,
  class: "epic-option-del-btn flex items-center"
}, J = /* @__PURE__ */ b({
  inheritAttrs: !1,
  __name: "index",
  props: {
    modelValue: {
      default: () => [],
      type: Array
    }
  },
  emits: ["update:modelValue"],
  setup(c, { emit: g }) {
    const v = c, f = g, V = A.component.get("input"), e = x({
      get() {
        return v.modelValue;
      },
      set(t) {
        f("update:modelValue", t);
      }
    });
    function h() {
      const t = e.value.length + 1, l = {
        id: D(),
        label: `标签${t}`,
        type: "tab-pane",
        children: []
      };
      e.value.push(l);
    }
    function _(t) {
      e.value.splice(t, 1);
    }
    return (t, l) => (r(), n(d, null, [
      m("div", I, [
        i(p(C), {
          modelValue: e.value,
          "onUpdate:modelValue": l[0] || (l[0] = (o) => e.value = o),
          "item-key": "id",
          "component-data": {
            type: "transition-group"
          },
          group: "option-list",
          handle: ".handle",
          animation: 200
        }, {
          default: y(() => [
            (r(!0), n(d, null, k(e.value, (o, u) => (r(), n("div", {
              key: u,
              class: "epic-tab-pane-editor-item my-2 grid grid-cols-[auto_auto_16px] items-center gap-2"
            }, [
              i(p(s), {
                class: "handle cursor-move text-lg",
                name: "icon--epic--drag"
              }),
              i(p(V), {
                value: o.label,
                "onUpdate:value": (a) => o.label = a,
                modelValue: o.label,
                "onUpdate:modelValue": (a) => o.label = a
              }, null, 8, ["value", "onUpdate:value", "modelValue", "onUpdate:modelValue"]),
              e.value.length > 1 ? (r(), n("div", N, [
                i(p(s), {
                  class: "hover:text-red cursor-pointer text-lg",
                  name: "icon--epic--delete-outline-rounded",
                  onClick: (a) => _(u)
                }, null, 8, ["onClick"])
              ])) : U("", !0)
            ]))), 128))
          ]),
          _: 1
        }, 8, ["modelValue"])
      ]),
      m("div", {
        class: "ep-button ghost primary",
        onClick: h
      }, "添加")
    ], 64));
  }
});
export {
  J as default
};