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

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

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