ele-admin-plus 1.3.0 → 1.4.0-beta.1

package/lib/ele-crud-builder/components/body-header.cjs

@@ -0,0 +1,200 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../../icons/index");
+const util$1 = require("../../ele-pro-form-builder/util");
+const util = require("../util");
+const ImportModal = require("./import-modal");
+const CodePreview = require("./code-preview");
+const _hoisted_1 = { class: "ele-crud-builder-header" };
+const _hoisted_2 = { class: "ele-crud-builder-screen-radio" };
+const _hoisted_3 = { class: "ele-crud-builder-header-left" };
+const _hoisted_4 = { class: "ele-crud-builder-header-tools" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "BodyHeader" },
+  __name: "body-header",
+  props: {
+    currentScreen: {},
+    undoDisabled: { type: Boolean },
+    redoDisabled: { type: Boolean },
+    config: {},
+    headerTools: { type: [Boolean, Array] },
+    proFormComponent: { type: [String, Object, Function] },
+    jsonEditerComponent: { type: [String, Object, Function] },
+    codeViewerComponent: { type: [String, Object, Function] },
+    itemTypeData: {},
+    httpRequest: {}
+  },
+  emits: ["update:currentScreen", "undo", "redo", "clear", "importData"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const importVisible = vue.ref(false);
+    const isImport = vue.ref(false);
+    const codeVisible = vue.ref(false);
+    const headerRightToolNames = vue.computed(() => {
+      if (typeof props.headerTools === "undefined" || props.headerTools === true) {
+        return util.defaultHeaderRightTools;
+      }
+      if (!props.headerTools) {
+        return [];
+      }
+      return props.headerTools;
+    });
+    const handleUpdateScreen = (size) => {
+      emit("update:currentScreen", size);
+    };
+    const handleUndo = () => {
+      if (!props.undoDisabled) {
+        emit("undo");
+      }
+    };
+    const handleRedo = () => {
+      if (!props.redoDisabled) {
+        emit("redo");
+      }
+    };
+    const handleClear = () => {
+      emit("clear");
+    };
+    const handleOpenImport = () => {
+      importVisible.value = true;
+      isImport.value = true;
+    };
+    const handleOpenExport = () => {
+      importVisible.value = true;
+      isImport.value = false;
+    };
+    const handleImportData = (data) => {
+      emit("importData", data);
+    };
+    const handleOpenCode = () => {
+      codeVisible.value = true;
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(util$1.screenItems), (item) => {
+            return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+              key: item.value,
+              class: vue.normalizeClass([
+                "ele-crud-builder-header-tool",
+                "ele-crud-builder-screen-icon",
+                { "is-active": item.value === _ctx.currentScreen }
+              ]),
+              onClick: ($event) => handleUpdateScreen(item.value)
+            }, {
+              default: vue.withCtx(() => [
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon), {
+                  style: vue.normalizeStyle(item.iconStyle)
+                }, null, 8, ["style"]))
+              ]),
+              _: 2
+            }, 1032, ["class", "onClick"]);
+          }), 128))
+        ]),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.createVNode(vue.unref(elementPlus.ElIcon), {
+            class: vue.normalizeClass([
+              "ele-crud-builder-header-tool",
+              "ele-crud-builder-header-tool-undo",
+              { "is-disabled": _ctx.undoDisabled }
+            ]),
+            title: "撤销",
+            onClick: handleUndo
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(index.RollbackOutlined))
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          vue.createVNode(vue.unref(elementPlus.ElIcon), {
+            class: vue.normalizeClass([
+              "ele-crud-builder-header-tool",
+              "ele-crud-builder-header-tool-redo",
+              { "is-disabled": _ctx.redoDisabled }
+            ]),
+            title: "恢复",
+            onClick: handleRedo
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(index.RecoverOutlined))
+            ]),
+            _: 1
+          }, 8, ["class"])
+        ]),
+        vue.createElementVNode("div", _hoisted_4, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(headerRightToolNames.value, (toolName) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: toolName }, [
+              toolName === "import" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
+                key: 0,
+                text: true,
+                icon: vue.unref(index.UploadOutlined),
+                onClick: handleOpenImport
+              }, {
+                default: vue.withCtx(() => _cache[2] || (_cache[2] = [
+                  vue.createTextVNode(" 导入 ")
+                ])),
+                _: 1,
+                __: [2]
+              }, 8, ["icon"])) : toolName === "export" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
+                key: 1,
+                text: true,
+                icon: vue.unref(index.DownloadOutlined),
+                onClick: handleOpenExport
+              }, {
+                default: vue.withCtx(() => _cache[3] || (_cache[3] = [
+                  vue.createTextVNode(" 导出 ")
+                ])),
+                _: 1,
+                __: [3]
+              }, 8, ["icon"])) : toolName === "clear" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
+                key: 2,
+                text: true,
+                type: "danger",
+                icon: vue.unref(index.DeleteOutlined),
+                onClick: handleClear
+              }, {
+                default: vue.withCtx(() => _cache[4] || (_cache[4] = [
+                  vue.createTextVNode(" 清空 ")
+                ])),
+                _: 1,
+                __: [4]
+              }, 8, ["icon"])) : toolName === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElButton), {
+                key: 3,
+                text: true,
+                type: "primary",
+                icon: vue.unref(index.CodeOutlined),
+                onClick: handleOpenCode
+              }, {
+                default: vue.withCtx(() => _cache[5] || (_cache[5] = [
+                  vue.createTextVNode(" 生成代码 ")
+                ])),
+                _: 1,
+                __: [5]
+              }, 8, ["icon"])) : vue.createCommentVNode("", true)
+            ], 64);
+          }), 128)),
+          vue.renderSlot(_ctx.$slots, "headerTools")
+        ]),
+        headerRightToolNames.value && (headerRightToolNames.value.includes("import") || headerRightToolNames.value.includes("export")) ? (vue.openBlock(), vue.createBlock(ImportModal, {
+          key: 0,
+          modelValue: importVisible.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => importVisible.value = $event),
+          config: _ctx.config,
+          isImport: isImport.value,
+          jsonEditerComponent: _ctx.jsonEditerComponent,
+          onImportData: handleImportData
+        }, null, 8, ["modelValue", "config", "isImport", "jsonEditerComponent"])) : vue.createCommentVNode("", true),
+        headerRightToolNames.value && headerRightToolNames.value.includes("code") ? (vue.openBlock(), vue.createBlock(CodePreview, {
+          key: 1,
+          modelValue: codeVisible.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => codeVisible.value = $event),
+          config: _ctx.config,
+          codeViewerComponent: _ctx.codeViewerComponent
+        }, null, 8, ["modelValue", "config", "codeViewerComponent"])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-crud-builder/components/body-header.d.ts

@@ -0,0 +1,79 @@
+import { UserComponent } from '../../ele-app/types';
+import { EleCrudProps } from '../../ele-app/plus';
+import { ProFormItemTypeData, ScreenSize } from '../../ele-pro-form/types';
+import { HeaderRightToolName } from '../types';
+
+declare function __VLS_template(): {
+    headerTools?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: ScreenSize;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 增删改查配置 */
+    config?: EleCrudProps;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools?: boolean | HeaderRightToolName[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentScreen": (size?: string | undefined) => void;
+    undo: () => void;
+    redo: () => void;
+    clear: () => void;
+    importData: (data: EleCrudProps) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: ScreenSize;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 增删改查配置 */
+    config?: EleCrudProps;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools?: boolean | HeaderRightToolName[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onImportData?: ((data: EleCrudProps) => any) | undefined;
+    "onUpdate:currentScreen"?: ((size?: string | undefined) => any) | undefined;
+    onUndo?: (() => any) | undefined;
+    onRedo?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-crud-builder/components/code-generator.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const codeUtil = require("../../ele-pro-form-builder/components/code-util");
+const codeTemplate = require("./code-template");
+function generateElCode(_data) {
+  return "";
+}
+function generateProCode(data) {
+  const config = JSON.parse(
+    JSON.stringify({ ...data || {}, fields: (data == null ? void 0 : data.fields) || [] })
+  );
+  const templateData = {
+    proCrudConfigCode: codeUtil.obj2Str(config, false, 2, () => void 0)
+  };
+  return codeUtil.templateEngine(codeTemplate.proTemplate, templateData);
+}
+exports.generateElCode = generateElCode;
+exports.generateProCode = generateProCode;

package/lib/ele-crud-builder/components/code-generator.d.ts

@@ -0,0 +1,12 @@
+import { EleCrudProps } from '../../ele-app/plus';
+
+/**
+ * 生成代码
+ * @param data 配置数据
+ */
+export declare function generateElCode(_data?: EleCrudProps): string;
+/**
+ * 生成 ProCrud 代码
+ * @param data 配置数据
+ */
+export declare function generateProCode(data?: EleCrudProps): string;

package/lib/ele-crud-builder/components/code-preview.cjs

@@ -0,0 +1,122 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const index = require("../../icons/index");
+const common = require("../../utils/common");
+const hook = require("../../utils/hook");
+const EleModal = require("../../ele-modal/index");
+const EleTabBar = require("../../ele-tab-bar/index");
+const CodeViewer = require("../../ele-pro-form-builder/components/code-viewer");
+const codeGenerator = require("./code-generator");
+const _hoisted_1 = { class: "ele-crud-builder-code-view" };
+const _hoisted_2 = { class: "ele-crud-builder-code-body" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "CodePreview" },
+  __name: "code-preview",
+  props: {
+    modelValue: { type: Boolean },
+    config: {},
+    codeViewerComponent: { type: [String, Object, Function] }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const [setCopied, resetCopied, copied] = hook.useTimer(1e3);
+    const tabItems = [
+      { value: "pro", label: "ProCrud" }
+      /* ,
+      { value: 'el', label: '' } */
+    ];
+    const tabActive = vue.ref("pro");
+    const codeContent = vue.ref("");
+    const generateData = ["", ""];
+    const handleUpdateModelValue = (visible) => {
+      emit("update:modelValue", visible);
+    };
+    const setCodeContent = () => {
+      codeContent.value = generateData[tabActive.value === "el" ? 1 : 0];
+    };
+    const handleCopy = () => {
+      common.copyText(codeContent.value).then(() => {
+        setCopied();
+      }).catch((error) => {
+        console.error(error);
+        resetCopied();
+      });
+    };
+    const handleDownload = () => {
+      common.download(codeContent.value, "index.vue", "text/plain;charset=utf-8");
+    };
+    vue.watch(
+      () => props.modelValue,
+      (visible) => {
+        if (visible) {
+          const proCode = codeGenerator.generateProCode(props.config);
+          const elCode = codeGenerator.generateElCode(props.config);
+          generateData[0] = proCode;
+          generateData[1] = elCode;
+          setCodeContent();
+        }
+      }
+    );
+    vue.watch(tabActive, () => {
+      setCodeContent();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(EleModal, {
+        width: 980,
+        maxable: true,
+        position: "center",
+        title: "生成代码",
+        modelValue: _ctx.modelValue,
+        closeOnClickModal: false,
+        destroyOnClose: true,
+        class: "ele-crud-builder-code-preview",
+        "onUpdate:modelValue": handleUpdateModelValue
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createVNode(EleTabBar, {
+              modelValue: tabActive.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tabActive.value = $event),
+              items: tabItems
+            }, {
+              extra: vue.withCtx(() => [
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  class: vue.normalizeClass([
+                    "ele-crud-builder-code-icon-tool",
+                    { "is-copied": vue.unref(copied) }
+                  ]),
+                  title: "复制",
+                  onClick: handleCopy
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.unref(copied) ? (vue.openBlock(), vue.createBlock(vue.unref(index.CheckOutlined), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(index.CopyOutlined), { key: 1 }))
+                  ]),
+                  _: 1
+                }, 8, ["class"]),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  class: "ele-crud-builder-code-icon-tool",
+                  title: "下载",
+                  onClick: handleDownload
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(index.DownloadOutlined))
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"]),
+            vue.createElementVNode("div", _hoisted_2, [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.codeViewerComponent || CodeViewer), { code: codeContent.value }, null, 8, ["code"]))
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-crud-builder/components/code-preview.d.ts

@@ -0,0 +1,32 @@
+import { UserComponent } from '../../ele-app/types';
+import { EleCrudProps } from '../../ele-app/plus';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单配置数据 */
+    config?: EleCrudProps;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (visible?: boolean | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单配置数据 */
+    config?: EleCrudProps;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((visible?: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/lib/ele-crud-builder/components/code-template.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const proTemplate = `<template>
+  <pro-crud v-bind="config" />
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import ProCrud from '@/components/ProCrud/index.vue';
+
+  /** crud 配置 */
+  const config = reactive(<% d.proCrudConfigCode %>);
+<\/script>
+`;
+exports.proTemplate = proTemplate;

package/lib/ele-crud-builder/components/code-template.d.ts

@@ -0,0 +1,4 @@
+/**
+ * ProCrud 代码生成模板
+ */
+export declare const proTemplate: string;

package/lib/ele-crud-builder/components/field-list.cjs

@@ -0,0 +1,161 @@
+"use strict";
+const vue = require("vue");
+const VueDraggable = require("vuedraggable");
+const elementPlus = require("element-plus");
+const index = require("../../icons/index");
+const _hoisted_1 = ["title"];
+const _hoisted_2 = { class: "ele-crud-builder-field-item-content" };
+const _hoisted_3 = { class: "ele-crud-builder-field-item-prop" };
+const _hoisted_4 = {
+  key: 0,
+  class: "ele-crud-builder-field-item-label"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "FieldList" },
+  __name: "field-list",
+  props: {
+    items: {},
+    collapseItemIds: {},
+    parent: {}
+  },
+  emits: ["toggleItemCollapse", "deleteItem", "copyItem", "editItem", "addChildren", "updateItemChildren"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const handleToggleItemCollapse = (key) => {
+      emit("toggleItemCollapse", key);
+    };
+    const handleDeleteItem = (key) => {
+      emit("deleteItem", key);
+    };
+    const handleCopyItem = (key) => {
+      emit("copyItem", key);
+    };
+    const handleEditItem = (item) => {
+      emit("editItem", item);
+    };
+    const handleAddChildren = (parentKey) => {
+      emit("addChildren", parentKey);
+    };
+    const handleUpdateItemChildren = (data, parentKey) => {
+      emit("updateItemChildren", data, parentKey);
+    };
+    const handleUpdateModelValue = (data) => {
+      var _a;
+      if (props.parent != null && props.parent.key == null) {
+        return;
+      }
+      handleUpdateItemChildren(data, (_a = props.parent) == null ? void 0 : _a.key);
+    };
+    return (_ctx, _cache) => {
+      const _component_FieldList = vue.resolveComponent("FieldList", true);
+      return vue.openBlock(), vue.createBlock(vue.unref(VueDraggable), {
+        itemKey: "key",
+        modelValue: _ctx.items,
+        forceFallback: true,
+        fallbackOnBody: true,
+        setData: () => void 0,
+        group: "CrudBuilderFieldSortGroup",
+        handle: ".ele-crud-builder-field-item-handle",
+        class: "ele-crud-builder-field",
+        "onUpdate:modelValue": handleUpdateModelValue
+      }, {
+        item: vue.withCtx(({ element }) => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass([
+              "ele-crud-builder-field-item",
+              {
+                "is-collapse": element.key != null && _ctx.collapseItemIds && _ctx.collapseItemIds.includes(element.key)
+              }
+            ])
+          }, [
+            vue.createVNode(_component_FieldList, {
+              items: element.children || [],
+              collapseItemIds: _ctx.collapseItemIds,
+              parent: element,
+              onToggleItemCollapse: handleToggleItemCollapse,
+              onDeleteItem: handleDeleteItem,
+              onCopyItem: handleCopyItem,
+              onEditItem: handleEditItem,
+              onAddChildren: handleAddChildren,
+              onUpdateItemChildren: handleUpdateItemChildren
+            }, null, 8, ["items", "collapseItemIds", "parent"]),
+            vue.createElementVNode("div", {
+              class: "ele-crud-builder-field-item-body",
+              title: (element.prop ?? "") + " " + (element.label ?? "")
+            }, [
+              element.children && element.children.length ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 0,
+                class: "ele-crud-builder-field-item-arrow",
+                onClick: vue.withModifiers(($event) => handleToggleItemCollapse(element.key), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(index.ArrowDown))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(element.prop), 1),
+                element.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString(element.label), 1)) : vue.createCommentVNode("", true)
+              ]),
+              vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                class: "ele-crud-builder-field-item-tool is-danger",
+                title: "删除",
+                onClick: vue.withModifiers(($event) => handleDeleteItem(element.key), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(index.DeleteOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"]),
+              vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                class: "ele-crud-builder-field-item-tool",
+                title: "复制",
+                onClick: vue.withModifiers(($event) => handleCopyItem(element.key), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(index.CopyOutlined), { style: { "transform": "scale(0.96)" } })
+                ]),
+                _: 2
+              }, 1032, ["onClick"]),
+              vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                class: "ele-crud-builder-field-item-tool",
+                title: "修改",
+                onClick: vue.withModifiers(($event) => handleEditItem(element), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(index.EditOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"]),
+              vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                class: "ele-crud-builder-field-item-tool",
+                title: "添加子级",
+                onClick: vue.withModifiers(($event) => handleAddChildren(element.key), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(index.PlusOutlined), { style: { "transform": "scale(1.1)" } })
+                ]),
+                _: 2
+              }, 1032, ["onClick"]),
+              vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                title: "",
+                class: "ele-crud-builder-field-item-handle",
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                }, ["stop"]))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(index.DragOutlined), { style: { "transform": "scale(1.1)" } })
+                ]),
+                _: 1
+              })
+            ], 8, _hoisted_1),
+            _cache[1] || (_cache[1] = vue.createElementVNode("div", { class: "ele-crud-builder-field-item-border" }, null, -1))
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+module.exports = _sfc_main;