ele-admin-plus 1.2.2-beta.4 → 1.3.1-beta.1

package/es/ele-pro-form-builder/components/props-form.js

@@ -0,0 +1,177 @@
+import { defineComponent, ref, reactive, watch, openBlock, createElementBlock, Fragment, createBlock, resolveDynamicComponent, createSlots, withCtx, createVNode, mergeProps, renderList, renderSlot, normalizeProps, guardReactiveProps, unref, createCommentVNode } from "vue";
+import { ElEmpty } from "element-plus";
+import { findTree } from "../../utils/core";
+import EleProForm from "../../ele-pro-form/index";
+import { getFormDataAndItems } from "../util";
+import { generateAddChildData } from "./build-util";
+import OptionsEdit from "./options-edit";
+import ChildrenEdit from "./children-edit";
+import StyleEdit from "./style-edit";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "props-form",
+  props: {
+    currentFormItemId: {},
+    formProps: {},
+    configFormPresetProps: {},
+    componentData: {},
+    proFormComponent: {}
+  },
+  emits: ["update:currentFormItemId", "updateItem", "updateItems", "sortItemChildren"],
+  setup(__props, { emit: __emit }) {
+    const ownSlots = [
+      "proFormBuilderOptionsEdit",
+      "proFormBuilderChildrenEdit",
+      "proFormBuilderStyleEdit"
+    ];
+    const props = __props;
+    const emit = __emit;
+    const propsProFormRef = ref(null);
+    const currentFormItem = ref();
+    const propsFormData = reactive({});
+    const propsFormItems = ref([]);
+    const handleUpdateItem = (field, value) => {
+      if (props.currentFormItemId != null) {
+        emit("updateItem", props.currentFormItemId, field, value);
+      }
+    };
+    const handleUpdateChildLabel = (label, child) => {
+      emit("updateItem", child.key, "label", 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;
+      const result = generateAddChildData(
+        parent,
+        void 0,
+        void 0,
+        void 0,
+        (_a = props.formProps) == null ? void 0 : _a.items
+      );
+      emit("updateItems", result);
+    };
+    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);
+      }
+    };
+    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 = findTree(
+          (_a = props.formProps) == null ? void 0 : _a.items,
+          (item) => item.key === props.currentFormItemId
+        );
+        const { data, items } = 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 openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.proFormComponent || EleProForm), {
+          ref_key: "propsProFormRef",
+          ref: propsProFormRef,
+          size: "small",
+          labelPosition: "top",
+          model: propsFormData,
+          items: propsFormItems.value,
+          class: "ele-pro-form-builder-props-form",
+          onUpdateValue: handleUpdateItem
+        }, createSlots({
+          proFormBuilderOptionsEdit: withCtx(({ item, modelValue, updateValue }) => [
+            createVNode(OptionsEdit, mergeProps(item.props || {}, {
+              modelValue,
+              "onUpdate:modelValue": updateValue
+            }), null, 16, ["modelValue", "onUpdate:modelValue"])
+          ]),
+          proFormBuilderChildrenEdit: withCtx(({ item }) => [
+            (openBlock(), createBlock(ChildrenEdit, 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: withCtx(({ item, modelValue, updateValue }) => [
+            (openBlock(), createBlock(StyleEdit, mergeProps({ key: _ctx.currentFormItemId }, item.props || {}, {
+              modelValue,
+              "onUpdate:modelValue": updateValue
+            }), null, 16, ["modelValue", "onUpdate:modelValue"]))
+          ]),
+          _: 2
+        }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => !ownSlots.includes(k)), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1064, ["model", "items"])),
+        !currentFormItem.value ? (openBlock(), createBlock(unref(ElEmpty), {
+          key: 0,
+          imageSize: 58,
+          description: "选中组件配置属性",
+          class: "ele-pro-form-builder-form-empty"
+        })) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/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;
+    };
+};

package/es/ele-pro-form-builder/components/style-edit.js

@@ -0,0 +1,188 @@
+import { defineComponent, ref, watch, openBlock, createElementBlock, Fragment, renderList, createVNode, unref, createCommentVNode, createElementVNode, withCtx, createTextVNode, toDisplayString } from "vue";
+import { ElInput, ElIcon, ElButton } from "element-plus";
+import { DeleteOutlined, PlusOutlined } from "../../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__ */ 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 = 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();
+    };
+    watch(
+      () => props.modelValue,
+      (value) => {
+        updateDataValue(getValueData(value, props.isClass));
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        data.value && data.value.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(data.value, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.id,
+              class: "ele-pro-form-builder-style-edit-item"
+            }, [
+              !_ctx.isClass ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                createVNode(unref(ElInput), {
+                  size: "small",
+                  modelValue: item.name,
+                  "onUpdate:modelValue": ($event) => item.name = $event,
+                  onChange: handleDataListChange
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ])) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_3, [
+                createVNode(unref(ElInput), {
+                  size: "small",
+                  modelValue: item.value,
+                  "onUpdate:modelValue": ($event) => item.value = $event,
+                  onChange: handleDataListChange
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ]),
+              createVNode(unref(ElIcon), {
+                class: "ele-pro-form-builder-style-edit-item-del-btn",
+                title: "删除",
+                onClick: ($event) => handleDelete(index)
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(DeleteOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])
+            ]);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        createVNode(unref(ElButton), {
+          size: "small",
+          icon: unref(PlusOutlined),
+          style: { width: "100%" },
+          onClick: handleAdd
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.isClass ? "添加类名" : "添加样式"), 1)
+          ]),
+          _: 1
+        }, 8, ["icon"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-pro-form-builder/components/table-tool-menu.d.ts

@@ -0,0 +1,25 @@
+import { BuildFormItem, UpdateItemsResult } from '../types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 全部表单项 */
+    formItems?: BuildFormItem[];
+}>, {
+    openMenu: (formItemId: string, triggerEl?: HTMLElement) => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    updateItems: (result: UpdateItemsResult) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 全部表单项 */
+    formItems?: BuildFormItem[];
+}>>> & {
+    onUpdateItems?: ((result: UpdateItemsResult) => 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/es/ele-pro-form-builder/components/table-tool-menu.js

@@ -0,0 +1,166 @@
+import { defineComponent, ref, openBlock, createBlock, nextTick } from "vue";
+import EleDropdown from "../../ele-dropdown/index";
+import { getTableFormItemByTd, generateAddTableColData, generateAddTableRowData, getTableSplitEffects, getTableDeleteRowEffects, getTableDeleteColEffects, getTableMergeBelowEffects, getTableMergeRightEffects } from "./table-util";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "table-tool-menu",
+  props: {
+    formItems: {}
+  },
+  emits: ["updateItems"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const dropdownRef = ref();
+    const dropdownVirtualRef = ref();
+    let tdFormItemId = null;
+    const handleUpdateItems = (result) => {
+      emit("updateItems", result);
+    };
+    const handleAddChildren = (formItemId, actionType, position) => {
+      const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+        formItemId,
+        props.formItems
+      );
+      if (!tableFormItem || !tdFormItem) {
+        return;
+      }
+      const result = (actionType === "addTableCol" ? generateAddTableColData : generateAddTableRowData)(tableFormItem, props.formItems, tdFormItem, position);
+      handleUpdateItems(result);
+    };
+    const handleSplitCell = (formItemId) => {
+      const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+        formItemId,
+        props.formItems
+      );
+      if (!tableFormItem || !tdFormItem) {
+        return;
+      }
+      const result = getTableSplitEffects(
+        tableFormItem,
+        props.formItems,
+        tdFormItem
+      );
+      handleUpdateItems(result);
+    };
+    const handleDeleteRow = (formItemId) => {
+      const { tableFormItem, trItemIndex } = getTableFormItemByTd(
+        formItemId,
+        props.formItems
+      );
+      if (!tableFormItem || trItemIndex == null) {
+        return;
+      }
+      const result = getTableDeleteRowEffects(
+        tableFormItem,
+        props.formItems,
+        trItemIndex
+      );
+      handleUpdateItems(result);
+    };
+    const handleDeleteCol = (formItemId) => {
+      const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+        formItemId,
+        props.formItems
+      );
+      if (!tableFormItem || !tdFormItem) {
+        return;
+      }
+      const result = getTableDeleteColEffects(
+        tableFormItem,
+        props.formItems,
+        tdFormItem
+      );
+      handleUpdateItems(result);
+    };
+    const handleMergeCell = (formItemId, actionType) => {
+      const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+        formItemId,
+        props.formItems
+      );
+      if (!tableFormItem || !tdFormItem) {
+        return;
+      }
+      const result = (actionType === "mergeBelowCell" ? getTableMergeBelowEffects : getTableMergeRightEffects)(tableFormItem, props.formItems, tdFormItem);
+      handleUpdateItems(result);
+    };
+    const hideTableToolDropdown = () => {
+      dropdownRef.value && dropdownRef.value.handleClose();
+    };
+    const handleTableToolDropdownCommand = (command) => {
+      if (tdFormItemId != null) {
+        if (command === "insertAboveRow") {
+          handleAddChildren(tdFormItemId, "addTableRow", -1);
+        } else if (command === "insertBelowRow") {
+          handleAddChildren(tdFormItemId, "addTableRow");
+        } else if (command === "insertLeftCol") {
+          handleAddChildren(tdFormItemId, "addTableCol", -1);
+        } else if (command === "insertRightCol") {
+          handleAddChildren(tdFormItemId, "addTableCol");
+        } else if (command === "mergeRightCell") {
+          handleMergeCell(tdFormItemId, "mergeRightCell");
+        } else if (command === "mergeBelowCell") {
+          handleMergeCell(tdFormItemId, "mergeBelowCell");
+        } else if (command === "splitCell") {
+          handleSplitCell(tdFormItemId);
+        } else if (command === "deleteRow") {
+          handleDeleteRow(tdFormItemId);
+        } else if (command === "deleteCol") {
+          handleDeleteCol(tdFormItemId);
+        }
+      }
+    };
+    const openMenu = (formItemId, triggerEl) => {
+      hideTableToolDropdown();
+      if (!triggerEl) {
+        return;
+      }
+      nextTick(() => {
+        tdFormItemId = formItemId;
+        dropdownVirtualRef.value = triggerEl;
+        nextTick(() => {
+          dropdownRef.value && dropdownRef.value.handleOpen();
+        });
+      });
+    };
+    __expose({ openMenu });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(EleDropdown, {
+        triggerKeys: [],
+        persistent: false,
+        validateEvent: false,
+        placement: "bottom-end",
+        popperOptions: {
+          strategy: "fixed",
+          modifiers: [{ name: "offset", options: { offset: [6, 8] } }]
+        },
+        popperClass: "ele-pro-form-builder-table-tool-dropdown",
+        ref_key: "dropdownRef",
+        ref: dropdownRef,
+        trigger: "click",
+        componentType: "pro",
+        virtualTriggering: true,
+        virtualRef: dropdownVirtualRef.value,
+        items: [
+          { title: "上方插入行", command: "insertAboveRow" },
+          { title: "下方插入行", command: "insertBelowRow" },
+          { title: "左侧插入列", command: "insertLeftCol" },
+          { title: "右侧插入列", command: "insertRightCol" },
+          { title: "合并右侧单元格", command: "mergeRightCell", divided: true },
+          { title: "合并下方单元格", command: "mergeBelowCell" },
+          { title: "拆分单元格合并", command: "splitCell" },
+          {
+            title: "删除整行",
+            command: "deleteRow",
+            divided: true,
+            danger: true
+          },
+          { title: "删除整列", command: "deleteCol", danger: true }
+        ],
+        onCommand: handleTableToolDropdownCommand
+      }, null, 8, ["virtualRef"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};