ele-admin-plus 1.2.2-beta.5 → 1.3.0-beta.3

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

@@ -0,0 +1,261 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const core = require("../../utils/core");
+const EleProForm = require("../../ele-pro-form/index");
+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");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "props-form",
+  props: {
+    currentFormItemId: {},
+    formProps: {},
+    configFormPresetProps: {},
+    componentData: {},
+    proFormComponent: {},
+    codeEditerComponent: {},
+    jsonEditerComponent: {},
+    htmlEditerComponent: {},
+    itemTypeData: {},
+    httpRequest: {}
+  },
+  emits: ["update:currentFormItemId", "updateItem", "updateItems", "sortItemChildren", "openComponentPicker"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const propsProFormRef = vue.ref(null);
+    const currentFormItem = vue.ref();
+    const propsFormData = vue.reactive({});
+    const propsFormItems = vue.ref([]);
+    const handleUpdateItem = (field, value) => {
+      if (props.currentFormItemId != null) {
+        emit("updateItem", props.currentFormItemId, field, value);
+      }
+    };
+    const handleUpdateChildLabel = (label, child, field) => {
+      emit("updateItem", child.key, field, label);
+    };
+    const handleSortChildren = (children) => {
+      if (props.currentFormItemId != null) {
+        emit(
+          "sortItemChildren",
+          children.map((c) => c.key),
+          props.currentFormItemId
+        );
+      }
+    };
+    const handleDeleteChildren = (child) => {
+      emit("updateItems", {
+        addItems: [],
+        updateItems: [],
+        deleteItemIds: [child.key]
+      });
+    };
+    const handleAddChildren = (parent) => {
+      var _a;
+      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);
+    };
+    const resetPropsFormData = (data) => {
+      Object.keys(propsFormData).forEach((k) => {
+        propsFormData[k] = void 0;
+      });
+      if (data) {
+        Object.assign(propsFormData, data);
+      }
+    };
+    vue.watch(
+      [() => props.formProps, () => props.currentFormItemId],
+      () => {
+        var _a, _b, _c, _d, _e;
+        if (props.currentFormItemId == null) {
+          resetPropsFormData();
+          propsFormItems.value = [];
+          currentFormItem.value = void 0;
+          return;
+        }
+        const temp = core.findTree(
+          (_a = props.formProps) == null ? void 0 : _a.items,
+          (item) => item.key === props.currentFormItemId
+        );
+        const { data, items } = buildCore.getFormDataAndItems(temp, props.componentData);
+        resetPropsFormData(
+          Object.assign({}, data, {
+            itemProps: Object.assign(
+              {
+                labelWidth: ((_b = props.formProps) == null ? void 0 : _b.labelWidth) ?? ((_c = props.configFormPresetProps) == null ? void 0 : _c.labelWidth),
+                labelPosition: ((_d = props.formProps) == null ? void 0 : _d.labelPosition) ?? ((_e = props.configFormPresetProps) == null ? void 0 : _e.labelPosition)
+              },
+              data.itemProps
+            )
+          })
+        );
+        if (JSON.stringify(propsFormItems.value) !== JSON.stringify(items)) {
+          propsFormItems.value = items;
+        }
+        if (currentFormItem.value !== temp) {
+          currentFormItem.value = temp;
+          if (propsProFormRef.value) {
+            propsProFormRef.value.$el.scrollTop = 0;
+          }
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.proFormComponent || EleProForm), {
+          ref_key: "propsProFormRef",
+          ref: propsProFormRef,
+          size: "small",
+          labelPosition: "top",
+          model: propsFormData,
+          items: propsFormItems.value,
+          itemTypeData: _ctx.itemTypeData,
+          httpRequest: _ctx.httpRequest,
+          class: "ele-pro-form-builder-props-form",
+          onUpdateValue: handleUpdateItem
+        }, 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) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1064, ["model", "items", "itemTypeData", "httpRequest"])),
+        !currentFormItem.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElEmpty), {
+          key: 0,
+          imageSize: 58,
+          description: "选中组件配置属性",
+          class: "ele-pro-form-builder-form-empty"
+        })) : vue.createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,76 @@
+import { UserComponent } from '../../ele-app/types';
+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<{
+    /** 选中的表单项 id */
+    currentFormItemId?: ProFormItemKey;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 表单属性设置的组件预设属性值 */
+    configFormPresetProps?: Record<string, any>;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 富文本编辑器组件 */
+    htmlEditerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>, {}, unknown, {}, {}, 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;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 表单属性设置的组件预设属性值 */
+    configFormPresetProps?: Record<string, any>;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 代码编辑器组件 */
+    codeEditerComponent?: UserComponent;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+    /** 富文本编辑器组件 */
+    htmlEditerComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+    /** 远程数据源请求工具 */
+    httpRequest?: any;
+}>>> & {
+    "onUpdate:currentFormItemId"?: ((formItemId?: string | undefined) => any) | undefined;
+    onUpdateItems?: ((result: UpdateItemsResult) => 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;
+}, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-pro-form-builder/components/source-edit.cjs

@@ -0,0 +1,110 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const core = require("../../utils/core");
+const EleModal = require("../../ele-modal/index");
+const CodeEditer = require("./code-editer");
+const _hoisted_1 = { class: "ele-pro-form-builder-code-edit-wrapper" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "source-edit",
+  props: {
+    modelValue: {},
+    title: {},
+    jsonEditerComponent: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = vue.ref(false);
+    const jsonContent = vue.ref("");
+    const openModal = () => {
+      jsonContent.value = JSON.stringify(
+        core.omit(props.modelValue || {}, ["key", "children"]),
+        void 0,
+        2
+      );
+      visible.value = true;
+    };
+    const handleCancel = () => {
+      visible.value = false;
+      jsonContent.value = "";
+    };
+    const handleSave = () => {
+      if (jsonContent.value) {
+        let result;
+        try {
+          result = JSON.parse(jsonContent.value);
+        } catch (e) {
+          console.error(e);
+        }
+        if (result) {
+          handleCancel();
+          emit("update:modelValue", result);
+        }
+      }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createVNode(vue.unref(elementPlus.ElButton), {
+          size: "small",
+          style: { width: "100%" },
+          onClick: openModal
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
+          ]),
+          _: 1
+        }),
+        vue.createVNode(EleModal, {
+          width: 800,
+          maxable: true,
+          position: "center",
+          title: _ctx.title,
+          modelValue: visible.value,
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
+          closeOnClickModal: false,
+          destroyOnClose: true,
+          bodyStyle: {
+            height: "520px",
+            minHeight: "100%",
+            maxHeight: "100%",
+            padding: "8px 16px"
+          }
+        }, {
+          footer: vue.withCtx(() => [
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              size: "default",
+              onClick: handleCancel
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode("取消")
+              ]),
+              _: 1
+            }),
+            vue.createVNode(vue.unref(elementPlus.ElButton), {
+              type: "primary",
+              size: "default",
+              onClick: handleSave
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(" 保存 ")
+              ]),
+              _: 1
+            })
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_1, [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.jsonEditerComponent || CodeEditer), {
+                modelValue: jsonContent.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => jsonContent.value = $event)
+              }, null, 8, ["modelValue"]))
+            ])
+          ]),
+          _: 1
+        }, 8, ["title", "modelValue"])
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,31 @@
+import { UserComponent } from '../../ele-app/types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 数据 */
+    modelValue?: Record<string, any>;
+    /** 弹窗标题 */
+    title?: string;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (data?: Record<string, any> | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 数据 */
+    modelValue?: Record<string, any>;
+    /** 弹窗标题 */
+    title?: string;
+    /** JSON 编辑器组件 */
+    jsonEditerComponent?: UserComponent;
+}>>> & {
+    "onUpdate:modelValue"?: ((data?: Record<string, any> | 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/style-edit.cjs

@@ -0,0 +1,187 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-pro-form-builder-style-edit-list"
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-pro-form-builder-style-edit-item-body"
+};
+const _hoisted_3 = { class: "ele-pro-form-builder-style-edit-item-body" };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "style-edit",
+  props: {
+    modelValue: {},
+    isClass: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    let itemStartId = 0;
+    const props = __props;
+    const emit = __emit;
+    const data = vue.ref([]);
+    const updateModelValue = (value) => {
+      if (props.modelValue !== value) {
+        emit("update:modelValue", value);
+      }
+    };
+    const updateDataValue = (dataList) => {
+      let isChanged = false;
+      const temp = [...data.value];
+      if (props.isClass) {
+        dataList.forEach((d) => {
+          const index = temp.findIndex((t) => d.value === t.value);
+          if (index === -1) {
+            itemStartId++;
+            temp.push({ ...d, id: itemStartId });
+            isChanged = true;
+          }
+        });
+        temp.forEach((t, i) => {
+          if (t.value != null && t.value.trim().length) {
+            if (!dataList.some((d) => d.value === t.value)) {
+              temp.splice(i, 1);
+              isChanged = true;
+            }
+          }
+        });
+      } else {
+        dataList.forEach((d) => {
+          const index = temp.findIndex(
+            (t) => d.name === t.name && d.value === t.value
+          );
+          if (index === -1) {
+            itemStartId++;
+            temp.push({ ...d, id: itemStartId });
+            isChanged = true;
+          }
+        });
+        temp.forEach((t, i) => {
+          if (t.name != null && t.name.trim().length && t.value != null && t.value.trim().length) {
+            if (!dataList.some((d) => d.name === t.name && d.value === t.value)) {
+              temp.splice(i, 1);
+              isChanged = true;
+            }
+          }
+        });
+      }
+      if (isChanged) {
+        data.value = temp;
+      }
+    };
+    const getDataValue = (dataList, isClass) => {
+      if (isClass) {
+        const result2 = [];
+        dataList.forEach((d) => {
+          if (d.value != null && d.value.trim().length) {
+            result2.push(d.value);
+          }
+        });
+        return result2.join(" ");
+      }
+      const result = {};
+      dataList.forEach((d) => {
+        if (d.name != null && d.name.trim().length && d.value != null && d.value.trim().length) {
+          result[d.name] = d.value;
+        }
+      });
+      return result;
+    };
+    const getValueData = (value, isClass) => {
+      const result = [];
+      if (isClass) {
+        const classValue = value || "";
+        classValue.split(" ").forEach((d) => {
+          if (d != null && d.trim().length) {
+            result.push({ value: d });
+          }
+        });
+        return result;
+      }
+      const styleValue = value || {};
+      Object.keys(styleValue).forEach((k) => {
+        const v = styleValue[k];
+        if (v != null && !(typeof v === "string" && !v.trim().length)) {
+          result.push({ name: k, value: String(v) });
+        }
+      });
+      return result;
+    };
+    const handleDataListChange = () => {
+      updateModelValue(getDataValue(data.value, props.isClass));
+    };
+    const handleDelete = (index) => {
+      data.value.splice(index, 1);
+      handleDataListChange();
+    };
+    const handleAdd = () => {
+      itemStartId++;
+      data.value.push({ name: "", value: "", id: itemStartId });
+      handleDataListChange();
+    };
+    vue.watch(
+      () => props.modelValue,
+      (value) => {
+        updateDataValue(getValueData(value, props.isClass));
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        data.value && data.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(data.value, (item, index) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: item.id,
+              class: "ele-pro-form-builder-style-edit-item"
+            }, [
+              !_ctx.isClass ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                vue.createVNode(vue.unref(elementPlus.ElInput), {
+                  size: "small",
+                  modelValue: item.name,
+                  "onUpdate:modelValue": ($event) => item.name = $event,
+                  onChange: handleDataListChange
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ])) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createVNode(vue.unref(elementPlus.ElInput), {
+                  size: "small",
+                  modelValue: item.value,
+                  "onUpdate:modelValue": ($event) => item.value = $event,
+                  onChange: handleDataListChange
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ]),
+              vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                class: "ele-pro-form-builder-style-edit-item-del-btn",
+                title: "删除",
+                onClick: ($event) => handleDelete(index)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.DeleteOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])
+            ]);
+          }), 128))
+        ])) : vue.createCommentVNode("", true),
+        vue.createVNode(vue.unref(elementPlus.ElButton), {
+          size: "small",
+          icon: vue.unref(icons.PlusOutlined),
+          style: { width: "100%" },
+          onClick: handleAdd
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(_ctx.isClass ? "添加类名" : "添加样式"), 1)
+          ]),
+          _: 1
+        }, 8, ["icon"])
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,25 @@
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 样式数据或类名 */
+    modelValue?: Record<string, string> | string;
+    /** 是否是类名编辑 */
+    isClass?: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | Record<string, string>) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 样式数据或类名 */
+    modelValue?: Record<string, string> | string;
+    /** 是否是类名编辑 */
+    isClass?: boolean;
+}>>> & {
+    "onUpdate:modelValue"?: ((value: string | Record<string, string>) => 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;
+    };
+};