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

package/lib/ele-pro-form-builder/components/outline-tree.cjs

@@ -2,28 +2,23 @@
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const core = require("../../utils/core");
+const buildCore = require("./build-core");
 const buildUtil = require("./build-util");
 const OutlineList = require("./outline-list");
-const ComponentList = require("./component-list");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "outline-tree",
   props: {
     formItems: {},
     currentFormItemId: {},
-    componentData: {}
+    componentData: {},
+    itemTypeData: {}
   },
-  emits: ["update:currentFormItemId", "updateItems", "updateItemChildren", "openTableTool"],
+  emits: ["update:currentFormItemId", "updateItems", "updateItemChildren", "openTableTool", "openComponentPicker"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const outlineWrapperRef = vue.ref(null);
     const collapseItemIds = vue.ref([]);
-    const isShowComponentList = vue.ref(false);
-    const addParentFormItemId = vue.ref();
-    const hideComponentList = () => {
-      isShowComponentList.value = false;
-      addParentFormItemId.value = void 0;
-    };
     const handleUpdateCurrentFormItemId = (itemId) => {
       emit("update:currentFormItemId", itemId);
     };
@@ -41,21 +36,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       handleUpdateItems(buildUtil.generateCopyItemData(formItemId, props.formItems));
     };
     const handleAddChildren = (triggerItem, action) => {
-      if (triggerItem.type && ["tabs", "collapse", "row", "table", "carousel"].includes(
-        triggerItem.type
-      )) {
+      if (triggerItem.type && buildCore.fixedChildTypes.some((d) => d.type === triggerItem.type)) {
         const result = buildUtil.generateAddChildData(
           triggerItem,
           void 0,
           void 0,
           action,
-          props.formItems
+          props.formItems,
+          void 0,
+          props.componentData
         );
         handleUpdateItems(result);
-        return;
+      } else {
+        emit("openComponentPicker", triggerItem.key);
       }
-      addParentFormItemId.value = triggerItem.key;
-      isShowComponentList.value = true;
     };
     const handleOpenTableTool = (item, e) => {
       var _a, _b;
@@ -85,57 +79,36 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             collapseItemIds.value.splice(i, 1);
           }
         }
-        hideComponentList();
       },
       { deep: true }
     );
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createElementVNode("div", {
-          ref_key: "outlineWrapperRef",
-          ref: outlineWrapperRef,
-          class: "ele-pro-form-builder-outline-wrapper"
-        }, [
-          _ctx.formItems ? (vue.openBlock(), vue.createBlock(OutlineList, {
-            key: 0,
-            items: _ctx.formItems,
-            currentFormItemId: _ctx.currentFormItemId,
-            collapseItemIds: collapseItemIds.value,
-            componentData: _ctx.componentData,
-            "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId,
-            onToggleItemCollapse: handleToggleItemCollapse,
-            onDeleteItem: handleDeleteItem,
-            onCopyItem: handleCopyItem,
-            onAddChildren: handleAddChildren,
-            onOpenTableTool: handleOpenTableTool,
-            onUpdateItemChildren: handleUpdateItemChildren
-          }, null, 8, ["items", "currentFormItemId", "collapseItemIds", "componentData"])) : vue.createCommentVNode("", true),
-          !_ctx.formItems || !_ctx.formItems.length ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElEmpty), {
-            key: 1,
-            imageSize: 58,
-            class: "ele-pro-form-builder-form-empty"
-          })) : vue.createCommentVNode("", true)
-        ], 512),
-        vue.createVNode(vue.Transition, { name: "ele-pro-form-builder-outline-component-anim" }, {
-          default: vue.withCtx(() => [
-            isShowComponentList.value ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: "ele-pro-form-builder-outline-component-wrapper",
-              onClick: hideComponentList
-            }, [
-              vue.createVNode(ComponentList, {
-                formItems: _ctx.formItems,
-                parentFormItemId: addParentFormItemId.value,
-                componentData: _ctx.componentData,
-                onUpdateItems: handleUpdateItems,
-                onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-                }, ["stop"]))
-              }, null, 8, ["formItems", "parentFormItemId", "componentData"])
-            ])) : vue.createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 64);
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "outlineWrapperRef",
+        ref: outlineWrapperRef,
+        class: "ele-pro-form-builder-outline-wrapper"
+      }, [
+        _ctx.formItems ? (vue.openBlock(), vue.createBlock(OutlineList, {
+          key: 0,
+          items: _ctx.formItems,
+          currentFormItemId: _ctx.currentFormItemId,
+          collapseItemIds: collapseItemIds.value,
+          componentData: _ctx.componentData,
+          itemTypeData: _ctx.itemTypeData,
+          "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId,
+          onToggleItemCollapse: handleToggleItemCollapse,
+          onDeleteItem: handleDeleteItem,
+          onCopyItem: handleCopyItem,
+          onAddChildren: handleAddChildren,
+          onOpenTableTool: handleOpenTableTool,
+          onUpdateItemChildren: handleUpdateItemChildren
+        }, null, 8, ["items", "currentFormItemId", "collapseItemIds", "componentData", "itemTypeData"])) : vue.createCommentVNode("", true),
+        !_ctx.formItems || !_ctx.formItems.length ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElEmpty), {
+          key: 1,
+          imageSize: 58,
+          class: "ele-pro-form-builder-form-empty"
+        })) : vue.createCommentVNode("", true)
+      ], 512);
     };
   }
 });

package/lib/ele-pro-form-builder/components/outline-tree.d.ts

@@ -1,18 +1,21 @@
-import { ProFormItemKey, ProFormItemProps } from '../../ele-pro-form/types';
+import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
 import { ComponentGroup, UpdateItemsResult } from '../types';
 
-declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 全部表单项 */
     formItems?: ProFormItemProps[];
     /** 选中的表单项 */
     currentFormItemId?: ProFormItemKey;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:currentFormItemId": (formItemId?: string | number | symbol | undefined) => void;
     updateItems: (result: UpdateItemsResult) => void;
     updateItemChildren: (children: ProFormItemProps[], parent?: ProFormItemProps | undefined) => void;
     openTableTool: (formItemId: string, el: HTMLElement) => void;
+    openComponentPicker: (formItemId: string) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 全部表单项 */
     formItems?: ProFormItemProps[];
@@ -20,12 +23,15 @@ declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimePr
     currentFormItemId?: ProFormItemKey;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
-}>>> & {
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>>> & Readonly<{
     onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
     "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
     onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
     onUpdateItemChildren?: ((children: ProFormItemProps[], parent?: ProFormItemProps | undefined) => any) | undefined;
-}, {}, {}>;
+    onOpenComponentPicker?: ((formItemId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/lib/ele-pro-form-builder/components/preview-modal.cjs

@@ -1,5 +1,7 @@
 "use strict";
 const vue = require("vue");
+const elementPlus = require("element-plus");
+const EleModal = require("../../ele-modal/index");
 const util$1 = require("../../ele-pro-form/util");
 const EleProForm = require("../../ele-pro-form/index");
 const util = require("../util");
@@ -10,7 +12,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     modelValue: { type: Boolean },
     formProps: {},
     proFormComponent: {},
-    itemTypeData: {}
+    itemTypeData: {},
+    httpRequest: {}
   },
   emits: ["update:modelValue", "previewFormSubmit"],
   setup(__props, { emit: __emit }) {
@@ -36,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
       util$1.mergeValue(
         formData,
-        util.getFormInitValue((_a = previewFormProps.value) == null ? void 0 : _a.items, props.itemTypeData)
+        util$1.getFormInitValue((_a = previewFormProps.value) == null ? void 0 : _a.items, props.itemTypeData)
       );
     };
     const handleUpdatePreviewScreen = (size) => {
@@ -60,21 +63,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      const _component_ElIcon = vue.resolveComponent("ElIcon");
-      const _component_EleModal = vue.resolveComponent("EleModal");
-      return vue.openBlock(), vue.createBlock(_component_EleModal, {
-        width: 800,
+      return vue.openBlock(), vue.createBlock(EleModal, {
+        width: 960,
         maxable: true,
         draggable: false,
         position: "center",
         closeOnClickModal: false,
+        destroyOnClose: true,
         modelValue: _ctx.modelValue,
         "onUpdate:modelValue": handleUpdateModelValue
       }, {
         header: vue.withCtx(() => [
           vue.createElementVNode("div", _hoisted_1, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(util.screenItems), (item) => {
-              return vue.openBlock(), vue.createBlock(_component_ElIcon, {
+              return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
                 key: item.value,
                 class: vue.normalizeClass([
                   "ele-pro-form-builder-header-tool",
@@ -94,10 +96,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ])
         ]),
         default: vue.withCtx(() => [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.proFormComponent || EleProForm), vue.mergeProps({
-            footer: true,
-            validateOnRuleChange: false
-          }, previewFormProps.value, {
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.proFormComponent || EleProForm), vue.mergeProps({ validateOnRuleChange: false }, previewFormProps.value, {
             ref_key: "previewFormRef",
             ref: previewFormRef,
             model: formData,
@@ -105,6 +104,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             "onUpdate:searchExpand": _cache[0] || (_cache[0] = ($event) => formData.searchExpand = $event),
             editable: false,
             itemTypeData: _ctx.itemTypeData,
+            httpRequest: _ctx.httpRequest,
             class: [
               "ele-pro-form-builder-preview-form",
               { "is-pc": previewScreen.value === "pc" },
@@ -123,7 +123,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 ])
               };
             })
-          ]), 1040, ["model", "searchExpand", "itemTypeData", "class"]))
+          ]), 1040, ["model", "searchExpand", "itemTypeData", "httpRequest", "class"]))
         ]),
         _: 3
       }, 8, ["modelValue"]);

package/lib/ele-pro-form-builder/components/preview-modal.d.ts

@@ -3,7 +3,7 @@ import { UserComponent } from '../../ele-app/types';
 import { TemplateFormConfig } from '../types';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 弹窗是否打开 */
     modelValue?: boolean;
     /** 表单属性 */
@@ -12,7 +12,9 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     proFormComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (visible?: boolean | undefined) => void;
     previewFormSubmit: (data: Record<string, any>) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -24,10 +26,12 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     proFormComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
-}>>> & {
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & Readonly<{
     "onUpdate:modelValue"?: ((visible?: boolean | undefined) => any) | undefined;
     onPreviewFormSubmit?: ((data: Record<string, any>) => 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;

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

@@ -3,9 +3,13 @@ const vue = require("vue");
 const elementPlus = require("element-plus");
 const core = require("../../utils/core");
 const EleProForm = require("../../ele-pro-form/index");
-const util = require("../util");
+const buildCore = require("./build-core");
 const buildUtil = require("./build-util");
 const OptionsEdit = require("./options-edit");
+const EventEdit = require("./event-edit");
+const HtmlEdit = require("./html-edit");
+const IfEdit = require("./if-edit");
+const SourceEdit = require("./source-edit");
 const ChildrenEdit = require("./children-edit");
 const StyleEdit = require("./style-edit");
 const JsonInput = require("./json-input");
@@ -17,16 +21,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     configFormPresetProps: {},
     componentData: {},
     proFormComponent: {},
-    itemTypeData: {}
+    codeEditerComponent: {},
+    jsonEditerComponent: {},
+    htmlEditerComponent: {},
+    itemTypeData: {},
+    httpRequest: {}
   },
-  emits: ["update:currentFormItemId", "updateItem", "updateItems", "sortItemChildren"],
+  emits: ["update:currentFormItemId", "updateItem", "updateItems", "sortItemChildren", "openComponentPicker"],
   setup(__props, { emit: __emit }) {
-    const ownSlots = [
-      "proFormBuilderOptionsEdit",
-      "proFormBuilderChildrenEdit",
-      "proFormBuilderStyleEdit",
-      "proFormBuilderJsonInput"
-    ];
     const props = __props;
     const emit = __emit;
     const propsProFormRef = vue.ref(null);
@@ -38,8 +40,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         emit("updateItem", props.currentFormItemId, field, value);
       }
     };
-    const handleUpdateChildLabel = (label, child) => {
-      emit("updateItem", child.key, "label", label);
+    const handleUpdateChildLabel = (label, child, field) => {
+      emit("updateItem", child.key, field, label);
     };
     const handleSortChildren = (children) => {
       if (props.currentFormItemId != null) {
@@ -59,14 +61,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     const handleAddChildren = (parent) => {
       var _a;
-      const result = buildUtil.generateAddChildData(
-        parent,
-        void 0,
-        void 0,
-        void 0,
-        (_a = props.formProps) == null ? void 0 : _a.items
-      );
-      emit("updateItems", result);
+      if (parent.type && buildCore.fixedChildTypes.some((d) => d.type === parent.type)) {
+        const result = buildUtil.generateAddChildData(
+          parent,
+          void 0,
+          void 0,
+          void 0,
+          (_a = props.formProps) == null ? void 0 : _a.items,
+          void 0,
+          props.componentData
+        );
+        emit("updateItems", result);
+      } else {
+        emit("openComponentPicker", parent.key);
+      }
     };
     const handleUpdateCurrentFormItemId = (formItemId) => {
       emit("update:currentFormItemId", formItemId);
@@ -93,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           (_a = props.formProps) == null ? void 0 : _a.items,
           (item) => item.key === props.currentFormItemId
         );
-        const { data, items } = util.getFormDataAndItems(temp, props.componentData);
+        const { data, items } = buildCore.getFormDataAndItems(temp, props.componentData);
         resetPropsFormData(
           Object.assign({}, data, {
             itemProps: Object.assign(
@@ -130,41 +138,108 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           model: propsFormData,
           items: propsFormItems.value,
           itemTypeData: _ctx.itemTypeData,
+          httpRequest: _ctx.httpRequest,
           class: "ele-pro-form-builder-props-form",
           onUpdateValue: handleUpdateItem
-        }, vue.createSlots({
-          proFormBuilderOptionsEdit: vue.withCtx(({ item, modelValue, updateValue }) => [
-            vue.createVNode(OptionsEdit, vue.mergeProps(item.props || {}, {
-              modelValue,
-              "onUpdate:modelValue": updateValue
-            }), null, 16, ["modelValue", "onUpdate:modelValue"])
-          ]),
-          proFormBuilderChildrenEdit: vue.withCtx(({ item }) => [
-            (vue.openBlock(), vue.createBlock(ChildrenEdit, vue.mergeProps({ key: _ctx.currentFormItemId }, item.props || {}, {
-              formItem: currentFormItem.value,
-              componentData: _ctx.componentData,
-              onUpdateChildLabel: handleUpdateChildLabel,
-              onSortChildren: handleSortChildren,
-              onDeleteChildren: handleDeleteChildren,
-              onAddChildren: handleAddChildren,
-              "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId
-            }), null, 16, ["formItem", "componentData"]))
-          ]),
-          proFormBuilderStyleEdit: vue.withCtx(({ item, modelValue, updateValue }) => [
-            (vue.openBlock(), vue.createBlock(StyleEdit, vue.mergeProps({ key: _ctx.currentFormItemId }, item.props || {}, {
-              modelValue,
-              "onUpdate:modelValue": updateValue
-            }), null, 16, ["modelValue", "onUpdate:modelValue"]))
-          ]),
-          proFormBuilderJsonInput: vue.withCtx(({ item, modelValue, updateValue }) => [
-            (vue.openBlock(), vue.createBlock(JsonInput, vue.mergeProps({ key: _ctx.currentFormItemId }, item.props || {}, {
-              modelValue,
-              "onUpdate:modelValue": updateValue
-            }), null, 16, ["modelValue", "onUpdate:modelValue"]))
-          ]),
-          _: 2
-        }, [
-          vue.renderList(Object.keys(_ctx.$slots).filter((k) => !ownSlots.includes(k)), (name) => {
+        }, vue.createSlots({ _: 2 }, [
+          !_ctx.$slots.proFormBuilderOptionsEdit ? {
+            name: "proFormBuilderOptionsEdit",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => [
+              vue.createVNode(OptionsEdit, vue.mergeProps({ codeEditerComponent: _ctx.codeEditerComponent }, item.props || {}, {
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }), null, 16, ["codeEditerComponent", "modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "0"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderEventEdit ? {
+            name: "proFormBuilderEventEdit",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => [
+              vue.createVNode(EventEdit, vue.mergeProps({ codeEditerComponent: _ctx.codeEditerComponent }, item.props || {}, {
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }), null, 16, ["codeEditerComponent", "modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "1"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderHtmlEdit ? {
+            name: "proFormBuilderHtmlEdit",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => [
+              vue.createVNode(HtmlEdit, vue.mergeProps({ htmlEditerComponent: _ctx.htmlEditerComponent }, item.props || {}, {
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }), null, 16, ["htmlEditerComponent", "modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "2"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderIfEdit ? {
+            name: "proFormBuilderIfEdit",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => [
+              vue.createVNode(IfEdit, vue.mergeProps({ codeEditerComponent: _ctx.codeEditerComponent }, item.props || {}, {
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }), null, 16, ["codeEditerComponent", "modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "3"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderSourceEdit ? {
+            name: "proFormBuilderSourceEdit",
+            fn: vue.withCtx(({ item, model, updatePropValue }) => [
+              vue.createVNode(SourceEdit, vue.mergeProps({ jsonEditerComponent: _ctx.jsonEditerComponent }, item.props || {}, {
+                modelValue: model,
+                "onUpdate:modelValue": (val) => updatePropValue("", val)
+              }), null, 16, ["jsonEditerComponent", "modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "4"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderChildrenEdit ? {
+            name: "proFormBuilderChildrenEdit",
+            fn: vue.withCtx(({ item }) => [
+              (vue.openBlock(), vue.createBlock(ChildrenEdit, vue.mergeProps({ key: _ctx.currentFormItemId }, item.props || {}, {
+                formItem: currentFormItem.value,
+                componentData: _ctx.componentData,
+                onUpdateChildLabel: handleUpdateChildLabel,
+                onSortChildren: handleSortChildren,
+                onDeleteChildren: handleDeleteChildren,
+                onAddChildren: handleAddChildren,
+                "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId
+              }), null, 16, ["formItem", "componentData"]))
+            ]),
+            key: "5"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderStyleEdit ? {
+            name: "proFormBuilderStyleEdit",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => [
+              (vue.openBlock(), vue.createBlock(StyleEdit, vue.mergeProps({ key: _ctx.currentFormItemId }, item.props || {}, {
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }), null, 16, ["modelValue", "onUpdate:modelValue"]))
+            ]),
+            key: "6"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderJsonInput ? {
+            name: "proFormBuilderJsonInput",
+            fn: vue.withCtx(({ item, modelValue, updateValue }) => [
+              (vue.openBlock(), vue.createBlock(JsonInput, vue.mergeProps({ key: _ctx.currentFormItemId }, item.props || {}, {
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }), null, 16, ["modelValue", "onUpdate:modelValue"]))
+            ]),
+            key: "7"
+          } : void 0,
+          !_ctx.$slots.proFormBuilderIconInput ? {
+            name: "proFormBuilderIconInput",
+            fn: vue.withCtx(({ modelValue, updateValue }) => [
+              vue.createVNode(vue.unref(elementPlus.ElInput), {
+                size: "small",
+                clearable: true,
+                modelValue,
+                "onUpdate:modelValue": updateValue
+              }, null, 8, ["modelValue", "onUpdate:modelValue"])
+            ]),
+            key: "8"
+          } : void 0,
+          vue.renderList(Object.keys(_ctx.$slots), (name) => {
             return {
               name,
               fn: vue.withCtx((slotProps) => [
@@ -172,7 +247,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               ])
             };
           })
-        ]), 1064, ["model", "items", "itemTypeData"])),
+        ]), 1064, ["model", "items", "itemTypeData", "httpRequest"])),
         !currentFormItem.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElEmpty), {
           key: 0,
           imageSize: 58,

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

@@ -3,7 +3,7 @@ import { ProFormItemKey, ProFormItemTypeData } from '../../ele-pro-form/types';
 import { TemplateFormConfig, ComponentGroup, UpdateItemsResult } from '../types';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 选中的表单项 id */
     currentFormItemId?: ProFormItemKey;
     /** 表单属性 */
@@ -14,13 +14,22 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     componentData?: ComponentGroup[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 富文本编辑器组件 */
+    htmlEditerComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:currentFormItemId": (formItemId?: string | undefined) => void;
     updateItem: (formItemId: string | number | symbol, field: string, value: any) => void;
     updateItems: (result: UpdateItemsResult) => void;
     sortItemChildren: (childIds: string[], formItemId: string | number | symbol) => void;
+    openComponentPicker: (formItemId: string) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 选中的表单项 id */
     currentFormItemId?: ProFormItemKey;
@@ -32,14 +41,23 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     componentData?: ComponentGroup[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 富文本编辑器组件 */
+    htmlEditerComponent?: UserComponent;
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
-}>>> & {
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & Readonly<{
     onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
     "onUpdate:currentFormItemId"?: ((formItemId?: string | undefined) => any) | undefined;
     onUpdateItem?: ((formItemId: string | number | symbol, field: string, value: any) => any) | undefined;
     onSortItemChildren?: ((childIds: string[], formItemId: string | number | symbol) => any) | undefined;
-}, {}, {}>;
+    onOpenComponentPicker?: ((formItemId: string) => 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;