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

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

@@ -0,0 +1,225 @@
+"use strict";
+const vue = require("vue");
+const VueDraggable = require("vuedraggable");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const itemTypeData = require("../../ele-pro-form/components/item-type-data");
+const ComponentName = require("./component-name");
+const _hoisted_1 = ["title", "onClick"];
+const _hoisted_2 = { class: "ele-pro-form-builder-outline-item-content" };
+const _hoisted_3 = { class: "ele-pro-form-builder-outline-item-prop" };
+const _hoisted_4 = {
+  key: 0,
+  class: "ele-pro-form-builder-outline-item-label"
+};
+const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "ele-pro-form-builder-outline-item-table-tool-trigger" }, null, -1);
+const _hoisted_6 = /* @__PURE__ */ vue.createElementVNode("div", { class: "ele-pro-form-builder-outline-item-border" }, null, -1);
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "OutlineList" },
+  __name: "outline-list",
+  props: {
+    items: {},
+    currentFormItemId: {},
+    collapseItemIds: {},
+    parent: {},
+    componentData: {},
+    itemTypeData: {}
+  },
+  emits: ["update:currentFormItemId", "toggleItemCollapse", "deleteItem", "copyItem", "addChildren", "openTableTool", "updateItemChildren"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const handleUpdateCurrentFormItemId = (itemId) => {
+      emit("update:currentFormItemId", itemId);
+    };
+    const handleToggleItemCollapse = (formItemId) => {
+      emit("toggleItemCollapse", formItemId);
+    };
+    const handleDeleteItem = (formItemId) => {
+      emit("deleteItem", formItemId);
+    };
+    const handleCopyItem = (formItemId) => {
+      emit("copyItem", formItemId);
+    };
+    const handleAddChildren = (triggerItem, action) => {
+      emit("addChildren", triggerItem, action);
+    };
+    const handleOpenTableTool = (item, e) => {
+      emit("openTableTool", item, e);
+    };
+    const handleUpdateModelValue = (data) => {
+      handleUpdateItemChildren(data, props.parent);
+    };
+    const handleUpdateItemChildren = (children, parent) => {
+      emit("updateItemChildren", children, parent);
+    };
+    const isContainerType = (item) => {
+      if (!(item == null ? void 0 : item.type)) {
+        return false;
+      }
+      const typeData = [
+        ...props.itemTypeData || [],
+        ...itemTypeData.defaultItemTypeData
+      ].find((d) => d.type === item.type);
+      if (typeData && typeData.isContainer) {
+        return true;
+      }
+      return item.itemType === "container" || item.itemType === "view";
+    };
+    const isTableChildType = (item) => {
+      if (!item.type) {
+        return false;
+      }
+      return ["tableRow", "tableCell"].includes(item.type);
+    };
+    return (_ctx, _cache) => {
+      const _component_OutlineList = vue.resolveComponent("OutlineList", true);
+      return vue.openBlock(), vue.createBlock(vue.unref(VueDraggable), {
+        itemKey: "key",
+        modelValue: _ctx.items,
+        forceFallback: true,
+        setData: () => void 0,
+        group: "ProFormBuilderOutlineSortGroup",
+        handle: ".ele-pro-form-builder-outline-item-handle",
+        class: "ele-pro-form-builder-outline",
+        "onUpdate:modelValue": handleUpdateModelValue
+      }, {
+        item: vue.withCtx(({ element }) => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass([
+              "ele-pro-form-builder-outline-item",
+              {
+                "is-active": element.key != null && _ctx.currentFormItemId != null && _ctx.currentFormItemId === element.key
+              },
+              {
+                "is-collapse": element.key != null && _ctx.collapseItemIds && _ctx.collapseItemIds.includes(element.key)
+              },
+              { "is-form-item": !isContainerType(element) }
+            ])
+          }, [
+            isContainerType(element) ? (vue.openBlock(), vue.createBlock(_component_OutlineList, {
+              key: 0,
+              items: element.children || [],
+              currentFormItemId: _ctx.currentFormItemId,
+              collapseItemIds: _ctx.collapseItemIds,
+              parent: element,
+              componentData: _ctx.componentData,
+              "onUpdate:currentFormItemId": handleUpdateCurrentFormItemId,
+              onToggleItemCollapse: handleToggleItemCollapse,
+              onDeleteItem: handleDeleteItem,
+              onCopyItem: handleCopyItem,
+              onAddChildren: handleAddChildren,
+              onOpenTableTool: handleOpenTableTool,
+              onUpdateItemChildren: handleUpdateItemChildren
+            }, null, 8, ["items", "currentFormItemId", "collapseItemIds", "parent", "componentData"])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", {
+              class: "ele-pro-form-builder-outline-item-body",
+              title: (element.prop ?? "") + " " + (element.label ?? ""),
+              onClick: ($event) => handleUpdateCurrentFormItemId(element.key)
+            }, [
+              element.children && element.children.length ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 0,
+                class: "ele-pro-form-builder-outline-item-arrow",
+                onClick: vue.withModifiers(($event) => handleToggleItemCollapse(element.key), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.ArrowDown))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.createVNode(ComponentName, {
+                  itemType: element.type,
+                  componentData: _ctx.componentData,
+                  class: "ele-pro-form-builder-outline-item-type-tag"
+                }, null, 8, ["itemType", "componentData"]),
+                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)
+              ]),
+              !isTableChildType(element) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 1,
+                class: "ele-pro-form-builder-outline-item-tool is-danger",
+                title: "删除",
+                onClick: vue.withModifiers(($event) => handleDeleteItem(element.key), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.DeleteOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+              !isTableChildType(element) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 2,
+                class: "ele-pro-form-builder-outline-item-tool",
+                title: "复制",
+                onClick: vue.withModifiers(($event) => handleCopyItem(element.key), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.CopyOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+              element.type === "table" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 3,
+                class: "ele-pro-form-builder-outline-item-tool",
+                title: "新增行",
+                onClick: vue.withModifiers(($event) => handleAddChildren(element, "addTableRow"), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.InsertRowOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+              element.type === "table" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 4,
+                class: "ele-pro-form-builder-outline-item-tool",
+                title: "新增列",
+                onClick: vue.withModifiers(($event) => handleAddChildren(element, "addTableCol"), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.InsertColumnOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+              element.type === "tableCell" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 5,
+                class: "ele-pro-form-builder-outline-item-tool",
+                title: "更多",
+                onClick: vue.withModifiers((e) => handleOpenTableTool(element, e), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.AppstoreAddOutlined), { style: { "transform": "scale(1.1)" } })
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+              isContainerType(element) && element.type !== "table" && element.type !== "tableRow" ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElIcon), {
+                key: 6,
+                class: "ele-pro-form-builder-outline-item-tool",
+                title: "添加子级",
+                onClick: vue.withModifiers(($event) => handleAddChildren(element), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.PlusSquareDashOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+              vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                class: "ele-pro-form-builder-outline-item-handle",
+                onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                }, ["stop"]))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.DragOutlined), { style: { "transform": "scale(1.1)" } })
+                ]),
+                _: 1
+              }),
+              _hoisted_5
+            ], 8, _hoisted_1),
+            _hoisted_6
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,56 @@
+import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
+import { AddChildrenItemAction, ComponentGroup } from '../types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 表单项 */
+    items: ProFormItemProps[];
+    /** 选中的表单项 */
+    currentFormItemId?: ProFormItemKey;
+    /** 折叠的表单项 */
+    collapseItemIds?: ProFormItemKey[];
+    /** 父级数据 */
+    parent?: ProFormItemProps;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentFormItemId": (formItemId?: string | number | symbol | undefined) => void;
+    toggleItemCollapse: (formItemId: string | number | symbol) => void;
+    deleteItem: (formItemId: string | number | symbol) => void;
+    copyItem: (formItemId: string | number | symbol) => void;
+    addChildren: (triggerItem: ProFormItemProps, action?: AddChildrenItemAction | undefined) => void;
+    openTableTool: (item: ProFormItemProps, event: MouseEvent) => void;
+    updateItemChildren: (children: ProFormItemProps[], parent?: ProFormItemProps | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 表单项 */
+    items: ProFormItemProps[];
+    /** 选中的表单项 */
+    currentFormItemId?: ProFormItemKey;
+    /** 折叠的表单项 */
+    collapseItemIds?: ProFormItemKey[];
+    /** 父级数据 */
+    parent?: ProFormItemProps;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>>> & {
+    "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
+    onToggleItemCollapse?: ((formItemId: string | number | symbol) => any) | undefined;
+    onDeleteItem?: ((formItemId: string | number | symbol) => any) | undefined;
+    onCopyItem?: ((formItemId: string | number | symbol) => any) | undefined;
+    onAddChildren?: ((triggerItem: ProFormItemProps, action?: AddChildrenItemAction | undefined) => any) | undefined;
+    onOpenTableTool?: ((item: ProFormItemProps, event: MouseEvent) => any) | undefined;
+    onUpdateItemChildren?: ((children: ProFormItemProps[], parent?: ProFormItemProps | undefined) => any) | undefined;
+}, {}, {}>;
+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-pro-form-builder/components/outline-tree.cjs

@@ -0,0 +1,142 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const core = require("../../utils/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: {}
+  },
+  emits: ["update:currentFormItemId", "updateItems", "updateItemChildren", "openTableTool"],
+  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);
+    };
+    const handleUpdateItems = (result) => {
+      emit("updateItems", result);
+    };
+    const handleDeleteItem = (formItemId) => {
+      handleUpdateItems({
+        deleteItemIds: [formItemId],
+        addItems: [],
+        updateItems: []
+      });
+    };
+    const handleCopyItem = (formItemId) => {
+      handleUpdateItems(buildUtil.generateCopyItemData(formItemId, props.formItems));
+    };
+    const handleAddChildren = (triggerItem, action) => {
+      if (triggerItem.type && ["tabs", "collapse", "row", "table", "carousel"].includes(
+        triggerItem.type
+      )) {
+        const result = buildUtil.generateAddChildData(
+          triggerItem,
+          void 0,
+          void 0,
+          action,
+          props.formItems
+        );
+        handleUpdateItems(result);
+        return;
+      }
+      addParentFormItemId.value = triggerItem.key;
+      isShowComponentList.value = true;
+    };
+    const handleOpenTableTool = (item, e) => {
+      var _a, _b;
+      const el = e.currentTarget;
+      const triggerEl = (_b = (_a = el == null ? void 0 : el.parentElement) == null ? void 0 : _a.querySelector) == null ? void 0 : _b.call(
+        _a,
+        ".ele-pro-form-builder-outline-item-table-tool-trigger"
+      );
+      emit("openTableTool", item.key, triggerEl);
+    };
+    const handleUpdateItemChildren = (children, parent) => {
+      emit("updateItemChildren", children, parent);
+    };
+    const handleToggleItemCollapse = (formItemId) => {
+      const index = collapseItemIds.value.indexOf(formItemId);
+      if (index !== -1) {
+        collapseItemIds.value.splice(index, 1);
+      } else {
+        collapseItemIds.value.push(formItemId);
+      }
+    };
+    vue.watch(
+      () => props.formItems,
+      (items) => {
+        for (let i = collapseItemIds.value.length - 1; i >= 0; i--) {
+          if (!core.findTree(items, (item) => collapseItemIds.value[i] === item.key)) {
+            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);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,38 @@
+import { ProFormItemKey, ProFormItemProps } from '../../ele-pro-form/types';
+import { ComponentGroup, UpdateItemsResult } from '../types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 全部表单项 */
+    formItems?: ProFormItemProps[];
+    /** 选中的表单项 */
+    currentFormItemId?: ProFormItemKey;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+}>, {}, unknown, {}, {}, 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;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 全部表单项 */
+    formItems?: ProFormItemProps[];
+    /** 选中的表单项 */
+    currentFormItemId?: ProFormItemKey;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+}>>> & {
+    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;
+}, {}, {}>;
+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-pro-form-builder/components/preview-modal.cjs

@@ -0,0 +1,133 @@
+"use strict";
+const vue = require("vue");
+const util$1 = require("../../ele-pro-form/util");
+const EleProForm = require("../../ele-pro-form/index");
+const util = require("../util");
+const _hoisted_1 = { class: "ele-pro-form-builder-screen-radio" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "preview-modal",
+  props: {
+    modelValue: { type: Boolean },
+    formProps: {},
+    proFormComponent: {},
+    itemTypeData: {}
+  },
+  emits: ["update:modelValue", "previewFormSubmit"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const previewFormRef = vue.ref(null);
+    const previewFormProps = vue.ref({ items: [] });
+    const formData = vue.reactive({});
+    const previewScreen = vue.ref("pc");
+    const handleUpdateModelValue = (visible) => {
+      emit("update:modelValue", visible);
+    };
+    const setPreviewFormDataFieldValue = (field, value) => {
+      util$1.setValue(formData, field, value);
+    };
+    const handlePreviewFormSubmit = () => {
+      emit("previewFormSubmit", formData);
+    };
+    const handlePreviewFormReset = () => {
+      var _a;
+      Object.keys(formData).forEach((k) => {
+        formData[k] = void 0;
+      });
+      util$1.mergeValue(
+        formData,
+        util.getFormInitValue((_a = previewFormProps.value) == null ? void 0 : _a.items, props.itemTypeData)
+      );
+    };
+    const handleUpdatePreviewScreen = (size) => {
+      previewScreen.value = size;
+    };
+    vue.watch(
+      () => props.modelValue,
+      (visible) => {
+        if (visible) {
+          previewFormProps.value = JSON.parse(
+            JSON.stringify(props.formProps || { items: [] })
+          );
+          handlePreviewFormReset();
+          vue.nextTick(() => {
+            vue.nextTick(() => {
+              var _a, _b;
+              (_b = (_a = previewFormRef.value) == null ? void 0 : _a.clearValidate) == null ? void 0 : _b.call(_a);
+            });
+          });
+        }
+      }
+    );
+    return (_ctx, _cache) => {
+      const _component_ElIcon = vue.resolveComponent("ElIcon");
+      const _component_EleModal = vue.resolveComponent("EleModal");
+      return vue.openBlock(), vue.createBlock(_component_EleModal, {
+        width: 800,
+        maxable: true,
+        draggable: false,
+        position: "center",
+        closeOnClickModal: false,
+        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, {
+                key: item.value,
+                class: vue.normalizeClass([
+                  "ele-pro-form-builder-header-tool",
+                  "ele-pro-form-builder-screen-icon",
+                  { "is-active": item.value === previewScreen.value }
+                ]),
+                onClick: ($event) => handleUpdatePreviewScreen(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))
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.proFormComponent || EleProForm), vue.mergeProps({
+            footer: true,
+            validateOnRuleChange: false
+          }, previewFormProps.value, {
+            ref_key: "previewFormRef",
+            ref: previewFormRef,
+            model: formData,
+            searchExpand: formData.searchExpand,
+            "onUpdate:searchExpand": _cache[0] || (_cache[0] = ($event) => formData.searchExpand = $event),
+            editable: false,
+            itemTypeData: _ctx.itemTypeData,
+            class: [
+              "ele-pro-form-builder-preview-form",
+              { "is-pc": previewScreen.value === "pc" },
+              { "is-pad": previewScreen.value === "pad" },
+              { "is-phone": previewScreen.value === "phone" }
+            ],
+            onUpdateValue: setPreviewFormDataFieldValue,
+            onSubmit: handlePreviewFormSubmit,
+            onReset: handlePreviewFormReset
+          }), 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 || {})))
+                ])
+              };
+            })
+          ]), 1040, ["model", "searchExpand", "itemTypeData", "class"]))
+        ]),
+        _: 3
+      }, 8, ["modelValue"]);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,46 @@
+import { ProFormItemTypeData } from '../../ele-pro-form/types';
+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<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>, {}, unknown, {}, {}, 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<{
+    /** 弹窗是否打开 */
+    modelValue?: boolean;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>>> & {
+    "onUpdate:modelValue"?: ((visible?: boolean | undefined) => 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_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;
+    };
+};