ele-admin-plus 1.3.0-beta.2 → 1.3.0-beta.3

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

@@ -4,7 +4,7 @@ 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 EleTabBar = require("../ele-tab-bar/index");
 const ComponentList = require("./components/component-list");
 const TemplateList = require("./components/template-list");
 const OutlineTree = require("./components/outline-tree");
@@ -13,14 +13,23 @@ 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 ComponentPicker = require("./components/component-picker");
 const props = require("./props");
-const _hoisted_1 = { class: "ele-pro-form-builder-body-wrapper" };
+const _hoisted_1 = { class: "ele-pro-form-builder-tab-body" };
+const _hoisted_2 = { class: "ele-pro-form-builder-body-wrapper" };
+const _hoisted_3 = { class: "ele-pro-form-builder-tab-body" };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ name: "EleProFormBuilder" },
   __name: "index",
   props: props.proFormBuilderProps,
   emits: props.proFormBuilderEmits,
   setup(__props, { emit: __emit }) {
+    const defaultHeaderRightTools = [
+      "import",
+      "export",
+      "clear",
+      "preview"
+    ];
     const props2 = __props;
     const emit = __emit;
     const [mobile] = hook.useMobile((isMobile) => {
@@ -31,13 +40,24 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     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 leftTabActive = vue.ref("components");
+    const rightTabActive = vue.ref("formProps");
     const currentFormItemId = vue.ref();
     const currentScreen = vue.ref("pc");
     const historyDataList = vue.ref([]);
     const redoDataList = vue.ref([]);
     const tableToolMenuRef = vue.ref(null);
+    const showAddChildPicker = vue.ref(false);
+    const addParentFormItemId = vue.ref();
+    const headerRightToolNames = vue.computed(() => {
+      if (typeof props2.headerTools === "undefined" || props2.headerTools === true) {
+        return defaultHeaderRightTools;
+      }
+      if (!props2.headerTools) {
+        return [];
+      }
+      return props2.headerTools;
+    });
     const setFormPropValue = (field, value) => {
       if (!formProps.value) {
         formProps.value = { items: [] };
@@ -48,27 +68,28 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         util.setValue(formProps.value, field, value);
       }
     };
-    const getFormItems = (setEmptyIfNull) => {
+    const getFormItems = () => {
       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;
+      return ((_a = formProps.value) == null ? void 0 : _a.items) || [];
     };
     const setFormItems = (items) => {
       if (!formProps.value) {
-        formProps.value = { items: items || [] };
-      } else {
-        formProps.value.items = items || [];
+        formProps.value = Object.assign({}, props2.proFormInitialProps || {}, {
+          items: items || []
+        });
+        return;
       }
+      const data = formProps.value;
+      if (!data.items && props2.proFormInitialProps) {
+        const keys = Object.keys(data).filter(
+          (k) => typeof data[k] !== "undefined"
+        );
+        Object.assign(formProps.value, core.omit(props2.proFormInitialProps, keys), {
+          items: items || []
+        });
+        return;
+      }
+      formProps.value.items = items || [];
     };
     const storeHistory = () => {
       const undoData = JSON.parse(
@@ -144,6 +165,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       updateItems,
       deleteItemIds
     }) => {
+      hideTableTool();
+      showAddChildPicker.value = false;
+      addParentFormItemId.value = void 0;
       if (addItems.length || deleteItemIds.length) {
         storeHistory();
       }
@@ -156,9 +180,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
         if (parentItemId == null) {
           if (index != null) {
-            getFormItems(true).splice(index, 0, item);
+            const items = getFormItems();
+            setFormItems([...items.slice(0, index), item, ...items.slice(index)]);
           } else {
-            getFormItems(true).push(item);
+            setFormItems([...getFormItems(), item]);
           }
           return;
         }
@@ -197,12 +222,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const handleUpdateItemChildren = (data, parent) => {
+      hideTableTool();
       storeHistory();
       if (!parent) {
         setFormItems(data);
         return;
       }
-      parent.children = data;
+      core.eachTree(getFormItems(), (item) => {
+        if (item.key === parent.key) {
+          parent.children = data;
+          return false;
+        }
+      });
     };
     const handleUpdateFormItems = (items) => {
       handleUpdateItemChildren(items);
@@ -226,16 +257,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const handleOpenTableTool = (formItemId, el) => {
       tableToolMenuRef.value && tableToolMenuRef.value.openMenu(formItemId, el);
     };
+    const hideTableTool = () => {
+      tableToolMenuRef.value && tableToolMenuRef.value.hideMenu();
+    };
+    const handleOpenComponentPicker = (formItemId) => {
+      showAddChildPicker.value = true;
+      addParentFormItemId.value = formItemId;
+    };
     const handlePreviewFormSubmit = (data) => {
       emit("previewFormSubmit", data);
     };
     vue.watch(currentFormItemId, (formItemId) => {
       if (formItemId != null) {
-        if (rightTabActive.value !== "proFormBuilderItemProps") {
-          rightTabActive.value = "proFormBuilderItemProps";
+        if (rightTabActive.value !== "itemProps") {
+          rightTabActive.value = "itemProps";
         }
-      } else if (!getFormItems().length && rightTabActive.value !== "proFormBuilderFormProps") {
-        rightTabActive.value = "proFormBuilderFormProps";
+      } else if (!getFormItems().length && rightTabActive.value !== "formProps") {
+        rightTabActive.value = "formProps";
       }
     });
     return (_ctx, _cache) => {
@@ -244,7 +282,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         size: "280px",
         allowCollapse: true,
         collapse: leftSideCollapse.value,
-        "onUpdate:collapse": _cache[7] || (_cache[7] = ($event) => leftSideCollapse.value = $event),
+        "onUpdate:collapse": _cache[8] || (_cache[8] = ($event) => leftSideCollapse.value = $event),
         class: "ele-pro-form-builder-wrapper"
       }, {
         body: vue.withCtx(() => [
@@ -258,19 +296,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             class: "ele-pro-form-builder-main-wrapper"
           }, {
             body: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1, [
+              vue.createElementVNode("div", _hoisted_2, [
                 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),
+                  headerTools: headerRightToolNames.value,
                   proFormComponent: _ctx.proFormComponent,
+                  jsonEditerComponent: _ctx.jsonEditerComponent,
                   itemTypeData: _ctx.itemTypeData,
+                  httpRequest: _ctx.httpRequest,
                   onUndo: handleUndo,
                   onRedo: handleRedo,
                   onClear: handleClear,
-                  onPreviewFormSubmit: handlePreviewFormSubmit
+                  onPreviewFormSubmit: handlePreviewFormSubmit,
+                  onImportData: handleImport
                 }, vue.createSlots({ _: 2 }, [
                   vue.renderList(Object.keys(_ctx.$slots), (name) => {
                     return {
@@ -280,7 +322,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ])
                     };
                   })
-                ]), 1032, ["currentScreen", "undoDisabled", "redoDisabled", "formProps", "proFormComponent", "itemTypeData"]),
+                ]), 1032, ["currentScreen", "undoDisabled", "redoDisabled", "formProps", "headerTools", "proFormComponent", "jsonEditerComponent", "itemTypeData", "httpRequest"]),
                 vue.createVNode(BodyForm, {
                   formProps: vue.unref(formProps),
                   componentData: _ctx.componentData,
@@ -289,6 +331,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   currentScreen: currentScreen.value,
                   proFormComponent: _ctx.proFormComponent,
                   itemTypeData: _ctx.itemTypeData,
+                  httpRequest: _ctx.httpRequest,
                   onUpdateItems: handleUpdateItems,
                   onOpenTableTool: handleOpenTableTool,
                   onUpdateFormItems: handleUpdateFormItems
@@ -301,121 +344,123 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       ])
                     };
                   })
-                ]), 1032, ["formProps", "componentData", "currentFormItemId", "currentScreen", "proFormComponent", "itemTypeData"])
+                ]), 1032, ["formProps", "componentData", "currentFormItemId", "currentScreen", "proFormComponent", "itemTypeData", "httpRequest"])
               ])
             ]),
             default: vue.withCtx(() => [
-              vue.createVNode(EleTabs, {
-                flexTable: true,
+              vue.createVNode(EleTabBar, {
                 modelValue: rightTabActive.value,
-                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => rightTabActive.value = $event),
+                "onUpdate:modelValue": _cache[4] || (_cache[4] = ($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"])
+                  { value: "itemProps", label: "属性设置" },
+                  { value: "formProps", label: "表单设置" }
+                ]
+              }, null, 8, ["modelValue"]),
+              vue.createElementVNode("div", _hoisted_3, [
+                rightTabActive.value === "itemProps" ? (vue.openBlock(), vue.createBlock(PropsForm, {
+                  key: 0,
+                  formProps: vue.unref(formProps),
+                  currentFormItemId: currentFormItemId.value,
+                  "onUpdate:currentFormItemId": _cache[5] || (_cache[5] = ($event) => currentFormItemId.value = $event),
+                  configFormPresetProps: _ctx.configFormPresetProps,
+                  componentData: _ctx.componentData,
+                  proFormComponent: _ctx.proFormComponent,
+                  codeEditerComponent: _ctx.codeEditerComponent,
+                  jsonEditerComponent: _ctx.jsonEditerComponent,
+                  htmlEditerComponent: _ctx.htmlEditerComponent,
+                  itemTypeData: _ctx.itemTypeData,
+                  httpRequest: _ctx.httpRequest,
+                  onUpdateItem: updateFormItemProp,
+                  onUpdateItems: handleUpdateItems,
+                  onSortItemChildren: handleSortItemChildren,
+                  onOpenComponentPicker: handleOpenComponentPicker
+                }, 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", "codeEditerComponent", "jsonEditerComponent", "htmlEditerComponent", "itemTypeData", "httpRequest"])) : (vue.openBlock(), vue.createBlock(ConfigForm, {
+                  key: 1,
+                  formProps: vue.unref(formProps),
+                  configFormItems: _ctx.configFormItems,
+                  configFormPresetProps: _ctx.configFormPresetProps,
+                  proFormComponent: _ctx.proFormComponent,
+                  jsonEditerComponent: _ctx.jsonEditerComponent,
+                  itemTypeData: _ctx.itemTypeData,
+                  httpRequest: _ctx.httpRequest,
+                  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", "jsonEditerComponent", "itemTypeData", "httpRequest"]))
+              ])
             ]),
             _: 3
           }, 8, ["collapse"])
         ]),
         default: vue.withCtx(() => {
-          var _a;
+          var _a, _b, _c, _d;
           return [
-            vue.createVNode(EleTabs, {
-              flexTable: true,
+            vue.createVNode(EleTabBar, {
               modelValue: leftTabActive.value,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => leftTabActive.value = $event),
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($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"]),
+                { value: "components", label: "组件库" },
+                { value: "templates", label: "模板库" },
+                { value: "outlines", label: "大纲" }
+              ]
+            }, null, 8, ["modelValue"]),
+            vue.createElementVNode("div", _hoisted_1, [
+              leftTabActive.value === "outlines" ? (vue.openBlock(), vue.createBlock(OutlineTree, {
+                key: 0,
+                formItems: (_a = vue.unref(formProps)) == null ? void 0 : _a.items,
+                currentFormItemId: currentFormItemId.value,
+                "onUpdate:currentFormItemId": _cache[1] || (_cache[1] = ($event) => currentFormItemId.value = $event),
+                componentData: _ctx.componentData,
+                itemTypeData: _ctx.itemTypeData,
+                onUpdateItems: handleUpdateItems,
+                onUpdateItemChildren: handleUpdateItemChildren,
+                onOpenTableTool: handleOpenTableTool,
+                onOpenComponentPicker: handleOpenComponentPicker
+              }, null, 8, ["formItems", "currentFormItemId", "componentData", "itemTypeData"])) : leftTabActive.value === "templates" ? (vue.openBlock(), vue.createBlock(TemplateList, {
+                key: 1,
+                templateData: _ctx.templateData,
+                onImportData: handleImport
+              }, null, 8, ["templateData"])) : (vue.openBlock(), vue.createBlock(ComponentList, {
+                key: 2,
+                formItems: (_b = vue.unref(formProps)) == null ? void 0 : _b.items,
+                draggable: !vue.unref(mobileDevice) && !vue.unref(mobile),
+                componentData: _ctx.componentData,
+                itemTypeData: _ctx.itemTypeData,
+                onUpdateItems: handleUpdateItems
+              }, null, 8, ["formItems", "draggable", "componentData", "itemTypeData"]))
+            ]),
             vue.createVNode(TableToolMenu, {
               ref_key: "tableToolMenuRef",
               ref: tableToolMenuRef,
-              formItems: (_a = vue.unref(formProps)) == null ? void 0 : _a.items,
+              formItems: (_c = vue.unref(formProps)) == null ? void 0 : _c.items,
+              componentData: _ctx.componentData,
+              onUpdateItems: handleUpdateItems
+            }, null, 8, ["formItems", "componentData"]),
+            vue.createVNode(ComponentPicker, {
+              modelValue: showAddChildPicker.value,
+              "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => showAddChildPicker.value = $event),
+              addParentFormItemId: addParentFormItemId.value,
+              formItems: (_d = vue.unref(formProps)) == null ? void 0 : _d.items,
+              componentData: _ctx.componentData,
+              itemTypeData: _ctx.itemTypeData,
               onUpdateItems: handleUpdateItems
-            }, null, 8, ["formItems"])
+            }, null, 8, ["modelValue", "addParentFormItemId", "formItems", "componentData", "itemTypeData"])
           ];
         }),
         _: 3

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

@@ -1,30 +1,50 @@
 import { ProFormItemProps } from '../ele-pro-form/types';
-import { TemplateFormConfig } from './types';
+import { TemplateFormConfig, HeaderRightToolName } 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>;
+    headerTools: {
+        type: import('vue').PropType<boolean | HeaderRightToolName[]>;
+        default: () => boolean;
+    };
     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>>;
+    configFormPresetProps: import('vue').PropType<import('./types').TemplateFormProps>;
+    proFormInitialProps: import('vue').PropType<import('./types').TemplateFormProps>;
     proFormComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    codeEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    jsonEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    htmlEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     itemTypeData: import('vue').PropType<import('../ele-pro-form/types').ProFormItemTypeData[]>;
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
 }, {}, 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>;
+    headerTools: {
+        type: import('vue').PropType<boolean | HeaderRightToolName[]>;
+        default: () => boolean;
+    };
     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>>;
+    configFormPresetProps: import('vue').PropType<import('./types').TemplateFormProps>;
+    proFormInitialProps: import('vue').PropType<import('./types').TemplateFormProps>;
     proFormComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    codeEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    jsonEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
+    htmlEditerComponent: import('vue').PropType<import('../ele-app/types').UserComponent>;
     itemTypeData: import('vue').PropType<import('../ele-pro-form/types').ProFormItemTypeData[]>;
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
 }>> & {
     "onUpdate:modelValue"?: ((_config: TemplateFormConfig) => any) | undefined;
     onPreviewFormSubmit?: ((_data: Record<string, any>) => any) | undefined;
-}, {}, {}>;
+}, {
+    headerTools: boolean | HeaderRightToolName[];
+}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -3,6 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const proFormBuilderProps = {
   /** 配置数据 */
   modelValue: Object,
+  /** 顶栏右侧操作按钮顺序 */
+  headerTools: {
+    type: [Boolean, Array],
+    default: () => true
+  },
   /** 组件库数据 */
   componentData: Array,
   /** 模板库数据 */
@@ -11,10 +16,20 @@ const proFormBuilderProps = {
   configFormItems: Array,
   /** 表单属性设置的组件预设属性值 */
   configFormPresetProps: Object,
+  /** 初始添加时的表单属性 */
+  proFormInitialProps: Object,
   /** 高级表单组件 */
   proFormComponent: [String, Object, Function],
+  /** 代码编辑器组件 */
+  codeEditerComponent: [String, Object, Function],
+  /** JSON 编辑器组件 */
+  jsonEditerComponent: [String, Object, Function],
+  /** 富文本编辑器组件 */
+  htmlEditerComponent: [String, Object, Function],
   /** 高级表单组件类型数据 */
-  itemTypeData: Array
+  itemTypeData: Array,
+  /** 远程数据源请求工具 */
+  httpRequest: [Object, Function]
 };
 const proFormBuilderEmits = {
   "update:modelValue": (_config) => true,

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

@@ -1,7 +1,7 @@
 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';
+import { TemplateFormConfig, TemplateFormProps, ComponentGroup, TemplateItem, HeaderRightToolName } from './types';
 
 /**
  * 属性
@@ -9,6 +9,11 @@ import { TemplateFormConfig, ComponentGroup, TemplateItem } from './types';
 export declare const proFormBuilderProps: {
     /** 配置数据 */
     modelValue: PropType<TemplateFormConfig>;
+    /** 顶栏右侧操作按钮顺序 */
+    headerTools: {
+        type: PropType<boolean | HeaderRightToolName[]>;
+        default: () => boolean;
+    };
     /** 组件库数据 */
     componentData: PropType<ComponentGroup[]>;
     /** 模板库数据 */
@@ -16,11 +21,21 @@ export declare const proFormBuilderProps: {
     /** 表单属性设置的表单项配置 */
     configFormItems: PropType<ProFormItemProps[]>;
     /** 表单属性设置的组件预设属性值 */
-    configFormPresetProps: PropType<Record<string, any>>;
+    configFormPresetProps: PropType<TemplateFormProps>;
+    /** 初始添加时的表单属性 */
+    proFormInitialProps: PropType<TemplateFormProps>;
     /** 高级表单组件 */
     proFormComponent: PropType<UserComponent>;
+    /** 代码编辑器组件 */
+    codeEditerComponent: PropType<UserComponent>;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent: PropType<UserComponent>;
+    /** 富文本编辑器组件 */
+    htmlEditerComponent: PropType<UserComponent>;
     /** 高级表单组件类型数据 */
     itemTypeData: PropType<ProFormItemTypeData[]>;
+    /** 远程数据源请求工具 */
+    httpRequest: (ObjectConstructor | FunctionConstructor)[];
 };
 export type ProFormBuilderProps = ExtractPropTypes<typeof proFormBuilderProps>;
 /**

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

@@ -1,4 +1,14 @@
 "use strict";
+require("element-plus/es/components/empty/style/index");
 require("element-plus/es/components/icon/style/index");
+require("element-plus/es/components/button/style/index");
+require("element-plus/es/components/input/style/index");
+require("element-plus/es/components/switch/style/index");
+require("../../ele-split-panel/style/index");
+require("../../ele-tab-bar/style/index");
 require("../../ele-pro-form/style/index");
+require("../../ele-modal/style/index");
+require("../../ele-tree-table/style/index");
+require("../../ele-select/style/index");
+require("../../ele-dropdown/style/index");
 require("./index.scss");