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

基于Epic-Designer-Pro版本的设计器,可视化开发页面表单

import { defineComponent as b, computed as _, createElementBlock as r, openBlock as p, Fragment as x, createElementVNode as d, createVNode as a, unref as i, withCtx as y, createCommentVNode as k } from "vue";
/* empty css                                 */
import u from "../../../../base-ui/src/components/icon/icon.vue.js";
import "radix-vue";
import "clsx";
import "tailwind-merge";
import "lucide-vue-next";
import "../../../../base-ui/src/shadch-ui/button/index.js";
import "@vueuse/core";
import "../../../../base-ui/src/shadch-ui/toast/index.js";
import { getUUID as C } from "../../../../../utils/src/common/string.js";
import "../../../../../hooks/src/store/index.js";
import "lodash";
import { pluginManager as U } from "../../../../../utils/src/manager/pluginManager.js";
import "monaco-editor";
import "../../../../../utils/src/request/index.js";
import A from "vuedraggable";
const I = { class: "epic-propedit-item p-2" }, N = {
  key: 0,
  class: "epic-option-del-btn flex items-center"
}, Q = /* @__PURE__ */ b({
  inheritAttrs: !1,
  __name: "index",
  props: {
    modelValue: {
      default: () => [],
      type: Array
    }
  },
  emits: ["update:modelValue"],
  setup(c, { emit: s }) {
    const g = c, v = s, f = U.getComponent("input"), e = _({
      get() {
        return g.modelValue;
      },
      set(t) {
        v("update:modelValue", t);
      }
    });
    function h() {
      const t = e.value.length + 1, l = {
        id: C(),
        label: `标签${t}`,
        type: "tab-pane",
        children: []
      };
      e.value.push(l);
    }
    function V(t) {
      e.value.splice(t, 1);
    }
    return (t, l) => (p(), r(x, null, [
      d("div", I, [
        a(i(A), {
          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
        }, {
          item: y(({ element: o, index: m }) => [
            (p(), r("div", {
              key: m,
              class: "epic-tab-pane-editor-item my-2 grid grid-cols-[auto_auto_16px] items-center gap-2"
            }, [
              a(i(u), {
                class: "handle cursor-move text-lg",
                name: "icon--epic--drag"
              }),
              a(i(f), {
                value: o.label,
                "onUpdate:value": (n) => o.label = n,
                modelValue: o.label,
                "onUpdate:modelValue": (n) => o.label = n
              }, null, 8, ["value", "onUpdate:value", "modelValue", "onUpdate:modelValue"]),
              e.value.length > 1 ? (p(), r("div", N, [
                a(i(u), {
                  class: "hover:text-red cursor-pointer text-lg",
                  name: "icon--epic--delete-outline-rounded",
                  onClick: (n) => V(m)
                }, null, 8, ["onClick"])
              ])) : k("", !0)
            ]))
          ]),
          _: 1
        }, 8, ["modelValue"])
      ]),
      d("div", {
        class: "epic-button ghost primary epic-option-add-btn",
        onClick: h
      }, " 添加 ")
    ], 64));
  }
});
export {
  Q as default
};