ele-admin-plus 1.2.2-beta.4 → 1.3.0-beta.2

package/lib/ele-pro-form-builder/index.cjs

@@ -0,0 +1,426 @@
+"use strict";
+const vue = require("vue");
+const core = require("../utils/core");
+const hook = require("../utils/hook");
+const util = require("../ele-pro-form/util");
+const EleSplitPanel = require("../ele-split-panel/index");
+const EleTabs = require("../ele-tabs/index");
+const ComponentList = require("./components/component-list");
+const TemplateList = require("./components/template-list");
+const OutlineTree = require("./components/outline-tree");
+const BodyHeader = require("./components/body-header");
+const BodyForm = require("./components/body-form");
+const PropsForm = require("./components/props-form");
+const ConfigForm = require("./components/config-form");
+const TableToolMenu = require("./components/table-tool-menu");
+const props = require("./props");
+const _hoisted_1 = { class: "ele-pro-form-builder-body-wrapper" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "EleProFormBuilder" },
+  __name: "index",
+  props: props.proFormBuilderProps,
+  emits: props.proFormBuilderEmits,
+  setup(__props, { emit: __emit }) {
+    const props2 = __props;
+    const emit = __emit;
+    const [mobile] = hook.useMobile((isMobile) => {
+      leftSideCollapse.value = isMobile;
+      rightSideCollapse.value = isMobile;
+    });
+    const [mobileDevice] = hook.useMobileDevice();
+    const formProps = vue.useModel(props2, "modelValue");
+    const leftSideCollapse = vue.ref(mobile.value);
+    const rightSideCollapse = vue.ref(mobile.value);
+    const leftTabActive = vue.ref("proFormBuilderComponents");
+    const rightTabActive = vue.ref("proFormBuilderFormProps");
+    const currentFormItemId = vue.ref();
+    const currentScreen = vue.ref("pc");
+    const historyDataList = vue.ref([]);
+    const redoDataList = vue.ref([]);
+    const tableToolMenuRef = vue.ref(null);
+    const setFormPropValue = (field, value) => {
+      if (!formProps.value) {
+        formProps.value = { items: [] };
+      }
+      if (!field) {
+        Object.assign(formProps.value, value);
+      } else {
+        util.setValue(formProps.value, field, value);
+      }
+    };
+    const getFormItems = (setEmptyIfNull) => {
+      var _a;
+      if (!setEmptyIfNull) {
+        return ((_a = formProps.value) == null ? void 0 : _a.items) || [];
+      }
+      if (!formProps.value) {
+        formProps.value = { items: [] };
+        return [];
+      }
+      if (!formProps.value.items) {
+        formProps.value.items = [];
+        return [];
+      }
+      return formProps.value.items;
+    };
+    const setFormItems = (items) => {
+      if (!formProps.value) {
+        formProps.value = { items: items || [] };
+      } else {
+        formProps.value.items = items || [];
+      }
+    };
+    const storeHistory = () => {
+      const undoData = JSON.parse(
+        JSON.stringify({
+          items: getFormItems()
+        })
+      );
+      historyDataList.value.push(undoData);
+      redoDataList.value = [];
+    };
+    const handleUndo = () => {
+      const data = historyDataList.value.pop();
+      if (!data) {
+        return;
+      }
+      const redoData = JSON.parse(
+        JSON.stringify({
+          items: getFormItems()
+        })
+      );
+      redoDataList.value.unshift(redoData);
+      setFormItems(data.items);
+      currentFormItemId.value = void 0;
+    };
+    const handleRedo = () => {
+      const data = redoDataList.value.shift();
+      if (!data) {
+        return;
+      }
+      const undoData = JSON.parse(
+        JSON.stringify({
+          items: getFormItems()
+        })
+      );
+      historyDataList.value.push(undoData);
+      setFormItems(data.items);
+      currentFormItemId.value = void 0;
+    };
+    const handleUpdateFormProp = (field, value) => {
+      setFormPropValue(field, value);
+    };
+    const updateFormItemProp = (formItemId, field, value) => {
+      const item = core.findTree(getFormItems(), (item2) => item2.key === formItemId);
+      if (item) {
+        if (!field) {
+          const temp = core.omit(value, ["key", "children"]);
+          Object.assign(item, temp);
+        } else {
+          util.setValue(item, field, value);
+        }
+      }
+    };
+    const deleteFormItem = (formItemId) => {
+      if (currentFormItemId.value != null && currentFormItemId.value === formItemId) {
+        currentFormItemId.value = void 0;
+      }
+      const formItemsData = getFormItems();
+      core.eachTree(formItemsData, (item, index, parent) => {
+        if (item.key === formItemId) {
+          if (parent) {
+            if (parent.children) {
+              parent.children.splice(index, 1);
+            }
+          } else {
+            formItemsData.splice(index, 1);
+          }
+          return false;
+        }
+      });
+    };
+    const handleUpdateItems = ({
+      addItems,
+      updateItems,
+      deleteItemIds
+    }) => {
+      if (addItems.length || deleteItemIds.length) {
+        storeHistory();
+      }
+      updateItems.forEach((effect) => {
+        updateFormItemProp(effect.itemId, effect.field, effect.value);
+      });
+      addItems.forEach(({ item, parentItemId, index }) => {
+        if (!item) {
+          return;
+        }
+        if (parentItemId == null) {
+          if (index != null) {
+            getFormItems(true).splice(index, 0, item);
+          } else {
+            getFormItems(true).push(item);
+          }
+          return;
+        }
+        const parent = core.findTree(
+          getFormItems(),
+          (item2) => item2.key === parentItemId
+        );
+        if (parent) {
+          if (parent.children) {
+            if (index != null) {
+              parent.children.splice(index, 0, item);
+            } else {
+              parent.children.push(item);
+            }
+          } else {
+            parent.children = [item];
+          }
+        }
+      });
+      deleteItemIds.forEach((formItemId) => {
+        deleteFormItem(formItemId);
+      });
+      if (addItems.length && mobile.value) {
+        leftSideCollapse.value = true;
+      }
+    };
+    const handleSortItemChildren = (childIds, formItemId) => {
+      const item = core.findTree(getFormItems(), (item2) => item2.key === formItemId);
+      if (item && item.children) {
+        storeHistory();
+        item.children.sort((a, b) => {
+          const aIndex = a.key == null ? -1 : childIds.indexOf(a.key);
+          const bIndex = b.key == null ? -1 : childIds.indexOf(b.key);
+          return aIndex - bIndex;
+        });
+      }
+    };
+    const handleUpdateItemChildren = (data, parent) => {
+      storeHistory();
+      if (!parent) {
+        setFormItems(data);
+        return;
+      }
+      parent.children = data;
+    };
+    const handleUpdateFormItems = (items) => {
+      handleUpdateItemChildren(items);
+    };
+    const handleClear = () => {
+      if (getFormItems().length) {
+        storeHistory();
+        setFormItems([]);
+        currentFormItemId.value = void 0;
+      }
+    };
+    const handleImport = (data) => {
+      storeHistory();
+      formProps.value = { ...data, items: data.items || [] };
+      currentFormItemId.value = void 0;
+      if (mobile.value) {
+        leftSideCollapse.value = true;
+        rightSideCollapse.value = true;
+      }
+    };
+    const handleOpenTableTool = (formItemId, el) => {
+      tableToolMenuRef.value && tableToolMenuRef.value.openMenu(formItemId, el);
+    };
+    const handlePreviewFormSubmit = (data) => {
+      emit("previewFormSubmit", data);
+    };
+    vue.watch(currentFormItemId, (formItemId) => {
+      if (formItemId != null) {
+        if (rightTabActive.value !== "proFormBuilderItemProps") {
+          rightTabActive.value = "proFormBuilderItemProps";
+        }
+      } else if (!getFormItems().length && rightTabActive.value !== "proFormBuilderFormProps") {
+        rightTabActive.value = "proFormBuilderFormProps";
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(EleSplitPanel, {
+        space: "0px",
+        size: "280px",
+        allowCollapse: true,
+        collapse: leftSideCollapse.value,
+        "onUpdate:collapse": _cache[7] || (_cache[7] = ($event) => leftSideCollapse.value = $event),
+        class: "ele-pro-form-builder-wrapper"
+      }, {
+        body: vue.withCtx(() => [
+          vue.createVNode(EleSplitPanel, {
+            space: "0px",
+            size: "220px",
+            reverse: true,
+            allowCollapse: true,
+            collapse: rightSideCollapse.value,
+            "onUpdate:collapse": _cache[6] || (_cache[6] = ($event) => rightSideCollapse.value = $event),
+            class: "ele-pro-form-builder-main-wrapper"
+          }, {
+            body: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_1, [
+                vue.createVNode(BodyHeader, {
+                  currentScreen: currentScreen.value,
+                  "onUpdate:currentScreen": _cache[2] || (_cache[2] = ($event) => currentScreen.value = $event),
+                  undoDisabled: !historyDataList.value.length,
+                  redoDisabled: !redoDataList.value.length,
+                  formProps: vue.unref(formProps),
+                  proFormComponent: _ctx.proFormComponent,
+                  itemTypeData: _ctx.itemTypeData,
+                  onUndo: handleUndo,
+                  onRedo: handleRedo,
+                  onClear: handleClear,
+                  onPreviewFormSubmit: handlePreviewFormSubmit
+                }, vue.createSlots({ _: 2 }, [
+                  vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                    return {
+                      name,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ])
+                    };
+                  })
+                ]), 1032, ["currentScreen", "undoDisabled", "redoDisabled", "formProps", "proFormComponent", "itemTypeData"]),
+                vue.createVNode(BodyForm, {
+                  formProps: vue.unref(formProps),
+                  componentData: _ctx.componentData,
+                  currentFormItemId: currentFormItemId.value,
+                  "onUpdate:currentFormItemId": _cache[3] || (_cache[3] = ($event) => currentFormItemId.value = $event),
+                  currentScreen: currentScreen.value,
+                  proFormComponent: _ctx.proFormComponent,
+                  itemTypeData: _ctx.itemTypeData,
+                  onUpdateItems: handleUpdateItems,
+                  onOpenTableTool: handleOpenTableTool,
+                  onUpdateFormItems: handleUpdateFormItems
+                }, vue.createSlots({ _: 2 }, [
+                  vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                    return {
+                      name,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                      ])
+                    };
+                  })
+                ]), 1032, ["formProps", "componentData", "currentFormItemId", "currentScreen", "proFormComponent", "itemTypeData"])
+              ])
+            ]),
+            default: vue.withCtx(() => [
+              vue.createVNode(EleTabs, {
+                flexTable: true,
+                modelValue: rightTabActive.value,
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => rightTabActive.value = $event),
+                items: [
+                  { name: "proFormBuilderItemProps", label: "属性设置" },
+                  { name: "proFormBuilderFormProps", label: "表单设置" }
+                ],
+                class: "ele-pro-form-builder-right-wrapper"
+              }, {
+                proFormBuilderItemProps: vue.withCtx(() => [
+                  vue.createVNode(PropsForm, {
+                    formProps: vue.unref(formProps),
+                    currentFormItemId: currentFormItemId.value,
+                    "onUpdate:currentFormItemId": _cache[4] || (_cache[4] = ($event) => currentFormItemId.value = $event),
+                    configFormPresetProps: _ctx.configFormPresetProps,
+                    componentData: _ctx.componentData,
+                    proFormComponent: _ctx.proFormComponent,
+                    itemTypeData: _ctx.itemTypeData,
+                    onUpdateItem: updateFormItemProp,
+                    onUpdateItems: handleUpdateItems,
+                    onSortItemChildren: handleSortItemChildren
+                  }, vue.createSlots({ _: 2 }, [
+                    vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                      return {
+                        name,
+                        fn: vue.withCtx((slotProps) => [
+                          vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                        ])
+                      };
+                    })
+                  ]), 1032, ["formProps", "currentFormItemId", "configFormPresetProps", "componentData", "proFormComponent", "itemTypeData"])
+                ]),
+                proFormBuilderFormProps: vue.withCtx(() => [
+                  vue.createVNode(ConfigForm, {
+                    formProps: vue.unref(formProps),
+                    configFormItems: _ctx.configFormItems,
+                    configFormPresetProps: _ctx.configFormPresetProps,
+                    proFormComponent: _ctx.proFormComponent,
+                    itemTypeData: _ctx.itemTypeData,
+                    onUpdateFormProp: handleUpdateFormProp
+                  }, vue.createSlots({ _: 2 }, [
+                    vue.renderList(Object.keys(_ctx.$slots), (name) => {
+                      return {
+                        name,
+                        fn: vue.withCtx((slotProps) => [
+                          vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                        ])
+                      };
+                    })
+                  ]), 1032, ["formProps", "configFormItems", "configFormPresetProps", "proFormComponent", "itemTypeData"])
+                ]),
+                _: 3
+              }, 8, ["modelValue"])
+            ]),
+            _: 3
+          }, 8, ["collapse"])
+        ]),
+        default: vue.withCtx(() => {
+          var _a;
+          return [
+            vue.createVNode(EleTabs, {
+              flexTable: true,
+              modelValue: leftTabActive.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => leftTabActive.value = $event),
+              items: [
+                { name: "proFormBuilderComponents", label: "组件库" },
+                { name: "proFormBuilderTemplates", label: "模板库" },
+                { name: "proFormBuilderOutlines", label: "大纲" }
+              ],
+              class: "ele-pro-form-builder-left-wrapper"
+            }, {
+              proFormBuilderComponents: vue.withCtx(() => {
+                var _a2;
+                return [
+                  vue.createVNode(ComponentList, {
+                    formItems: (_a2 = vue.unref(formProps)) == null ? void 0 : _a2.items,
+                    draggable: !vue.unref(mobileDevice) && !vue.unref(mobile),
+                    componentData: _ctx.componentData,
+                    onUpdateItems: handleUpdateItems
+                  }, null, 8, ["formItems", "draggable", "componentData"])
+                ];
+              }),
+              proFormBuilderTemplates: vue.withCtx(() => [
+                vue.createVNode(TemplateList, {
+                  templateData: _ctx.templateData,
+                  onImportData: handleImport
+                }, null, 8, ["templateData"])
+              ]),
+              proFormBuilderOutlines: vue.withCtx(() => {
+                var _a2;
+                return [
+                  vue.createVNode(OutlineTree, {
+                    formItems: (_a2 = vue.unref(formProps)) == null ? void 0 : _a2.items,
+                    currentFormItemId: currentFormItemId.value,
+                    "onUpdate:currentFormItemId": _cache[0] || (_cache[0] = ($event) => currentFormItemId.value = $event),
+                    componentData: _ctx.componentData,
+                    onUpdateItems: handleUpdateItems,
+                    onUpdateItemChildren: handleUpdateItemChildren,
+                    onOpenTableTool: handleOpenTableTool
+                  }, null, 8, ["formItems", "currentFormItemId", "componentData"])
+                ];
+              }),
+              _: 1
+            }, 8, ["modelValue"]),
+            vue.createVNode(TableToolMenu, {
+              ref_key: "tableToolMenuRef",
+              ref: tableToolMenuRef,
+              formItems: (_a = vue.unref(formProps)) == null ? void 0 : _a.items,
+              onUpdateItems: handleUpdateItems
+            }, null, 8, ["formItems"])
+          ];
+        }),
+        _: 3
+      }, 8, ["collapse"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/ele-pro-form-builder/index.d.ts

@@ -0,0 +1,34 @@
+import { ProFormItemProps } from '../ele-pro-form/types';
+import { TemplateFormConfig } from './types';
+
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>>;
+declare const __VLS_component: import('vue').DefineComponent<{
+    modelValue: import('vue').PropType<TemplateFormConfig>;
+    componentData: import('vue').PropType<import('./types').ComponentGroup[]>;
+    templateData: import('vue').PropType<import('./types').TemplateItem[]>;
+    configFormItems: import('vue').PropType<ProFormItemProps[]>;
+    configFormPresetProps: import('vue').PropType<Record<string, any>>;
+    proFormComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    itemTypeData: import('vue').PropType<import('../ele-pro-form/types').ProFormItemTypeData[]>;
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (_config: TemplateFormConfig) => void;
+    previewFormSubmit: (_data: Record<string, any>) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<TemplateFormConfig>;
+    componentData: import('vue').PropType<import('./types').ComponentGroup[]>;
+    templateData: import('vue').PropType<import('./types').TemplateItem[]>;
+    configFormItems: import('vue').PropType<ProFormItemProps[]>;
+    configFormPresetProps: import('vue').PropType<Record<string, any>>;
+    proFormComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    itemTypeData: import('vue').PropType<import('../ele-pro-form/types').ProFormItemTypeData[]>;
+}>> & {
+    "onUpdate:modelValue"?: ((_config: TemplateFormConfig) => any) | undefined;
+    onPreviewFormSubmit?: ((_data: Record<string, any>) => any) | undefined;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-pro-form-builder/props.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const proFormBuilderProps = {
+  /** 配置数据 */
+  modelValue: Object,
+  /** 组件库数据 */
+  componentData: Array,
+  /** 模板库数据 */
+  templateData: Array,
+  /** 表单属性设置的表单项配置 */
+  configFormItems: Array,
+  /** 表单属性设置的组件预设属性值 */
+  configFormPresetProps: Object,
+  /** 高级表单组件 */
+  proFormComponent: [String, Object, Function],
+  /** 高级表单组件类型数据 */
+  itemTypeData: Array
+};
+const proFormBuilderEmits = {
+  "update:modelValue": (_config) => true,
+  previewFormSubmit: (_data) => true
+};
+exports.proFormBuilderEmits = proFormBuilderEmits;
+exports.proFormBuilderProps = proFormBuilderProps;

package/lib/ele-pro-form-builder/props.d.ts

@@ -0,0 +1,32 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { UserComponent } from '../ele-app/types';
+import { ProFormItemProps, ProFormItemTypeData } from '../ele-pro-form/types';
+import { TemplateFormConfig, ComponentGroup, TemplateItem } from './types';
+
+/**
+ * 属性
+ */
+export declare const proFormBuilderProps: {
+    /** 配置数据 */
+    modelValue: PropType<TemplateFormConfig>;
+    /** 组件库数据 */
+    componentData: PropType<ComponentGroup[]>;
+    /** 模板库数据 */
+    templateData: PropType<TemplateItem[]>;
+    /** 表单属性设置的表单项配置 */
+    configFormItems: PropType<ProFormItemProps[]>;
+    /** 表单属性设置的组件预设属性值 */
+    configFormPresetProps: PropType<Record<string, any>>;
+    /** 高级表单组件 */
+    proFormComponent: PropType<UserComponent>;
+    /** 高级表单组件类型数据 */
+    itemTypeData: PropType<ProFormItemTypeData[]>;
+};
+export type ProFormBuilderProps = ExtractPropTypes<typeof proFormBuilderProps>;
+/**
+ * 事件
+ */
+export declare const proFormBuilderEmits: {
+    'update:modelValue': (_config: TemplateFormConfig) => boolean;
+    previewFormSubmit: (_data: Record<string, any>) => boolean;
+};

package/lib/ele-pro-form-builder/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 表单构建器主题变量 */
+@mixin set-pro-form-builder-var($var) {
+  .ele-pro-form-builder-wrapper {
+    @include set-ele-var('pro-form-builder', $var);
+  }
+}

package/lib/ele-pro-form-builder/style/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+require("element-plus/es/components/icon/style/index");
+require("../../ele-pro-form/style/index");
+require("./index.scss");

package/lib/ele-pro-form-builder/style/index.d.ts

@@ -0,0 +1 @@
+