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

package/es/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/es/ele-pro-form-builder/components/source-edit.js

@@ -0,0 +1,111 @@
+import { defineComponent, ref, openBlock, createElementBlock, Fragment, createVNode, unref, withCtx, createTextVNode, toDisplayString, createElementVNode, createBlock, resolveDynamicComponent } from "vue";
+import { ElButton } from "element-plus";
+import { omit } from "../../utils/core";
+import EleModal from "../../ele-modal/index";
+import CodeEditer from "./code-editer";
+const _hoisted_1 = { class: "ele-pro-form-builder-code-edit-wrapper" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "source-edit",
+  props: {
+    modelValue: {},
+    title: {},
+    jsonEditerComponent: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = ref(false);
+    const jsonContent = ref("");
+    const openModal = () => {
+      jsonContent.value = JSON.stringify(
+        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 openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(ElButton), {
+          size: "small",
+          style: { width: "100%" },
+          onClick: openModal
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.title), 1)
+          ]),
+          _: 1
+        }),
+        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: withCtx(() => [
+            createVNode(unref(ElButton), {
+              size: "default",
+              onClick: handleCancel
+            }, {
+              default: withCtx(() => [
+                createTextVNode("取消")
+              ]),
+              _: 1
+            }),
+            createVNode(unref(ElButton), {
+              type: "primary",
+              size: "default",
+              onClick: handleSave
+            }, {
+              default: withCtx(() => [
+                createTextVNode(" 保存 ")
+              ]),
+              _: 1
+            })
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              (openBlock(), createBlock(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);
+    };
+  }
+});
+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,31 @@
+import { ProFormItemProps } from '../../ele-pro-form/types';
+import { ComponentGroup, UpdateItemsResult } from '../types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 全部表单项 */
+    formItems?: ProFormItemProps[];
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+}>, {
+    openMenu: (formItemId: string, triggerEl?: HTMLElement) => void;
+    hideMenu: () => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    updateItems: (result: UpdateItemsResult) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 全部表单项 */
+    formItems?: ProFormItemProps[];
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+}>>> & {
+    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,182 @@
+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: {},
+    componentData: {}
+  },
+  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,
+        props.componentData
+      );
+      handleUpdateItems(result);
+    };
+    const handleSplitCell = (formItemId) => {
+      const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+        formItemId,
+        props.formItems
+      );
+      if (!tableFormItem || !tdFormItem) {
+        return;
+      }
+      const result = getTableSplitEffects(
+        tableFormItem,
+        props.formItems,
+        tdFormItem,
+        props.componentData
+      );
+      handleUpdateItems(result);
+    };
+    const handleDeleteRow = (formItemId) => {
+      const { tableFormItem, trItemIndex } = getTableFormItemByTd(
+        formItemId,
+        props.formItems
+      );
+      if (!tableFormItem || trItemIndex == null) {
+        return;
+      }
+      const result = getTableDeleteRowEffects(
+        tableFormItem,
+        props.formItems,
+        trItemIndex,
+        props.componentData
+      );
+      handleUpdateItems(result);
+    };
+    const handleDeleteCol = (formItemId) => {
+      const { tableFormItem, tdFormItem } = getTableFormItemByTd(
+        formItemId,
+        props.formItems
+      );
+      if (!tableFormItem || !tdFormItem) {
+        return;
+      }
+      const result = getTableDeleteColEffects(
+        tableFormItem,
+        props.formItems,
+        tdFormItem,
+        props.componentData
+      );
+      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, props.componentData);
+      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();
+        });
+      });
+    };
+    const hideMenu = () => {
+      hideTableToolDropdown();
+    };
+    __expose({
+      openMenu,
+      hideMenu
+    });
+    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
+};