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

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

@@ -0,0 +1,120 @@
+"use strict";
+const vue = require("vue");
+const icons = require("../../icons");
+const ToolButton = require("./tool-button");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "builder-tools",
+  props: {
+    itemType: {}
+  },
+  emits: ["delete", "copy", "add", "addTableRow", "addTableCol", "openTableTool"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleDelete = (e) => {
+      emit("delete", e);
+    };
+    const handleCopy = (e) => {
+      emit("copy", e);
+    };
+    const handleAdd = (e) => {
+      emit("add", e);
+    };
+    const handleAddTableRow = (e) => {
+      emit("addTableRow", e);
+    };
+    const handleAddTableCol = (e) => {
+      emit("addTableCol", e);
+    };
+    const handleOpenTableTool = (e) => {
+      emit("openTableTool", e);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        _ctx.itemType && ["table", "tableCell"].includes(_ctx.itemType) ? (vue.openBlock(), vue.createBlock(ToolButton, {
+          key: 0,
+          buttonProps: {
+            size: "small",
+            type: "primary",
+            icon: vue.unref(icons.InsertRowOutlined)
+          },
+          tooltip: _ctx.itemType === "tableCell" ? "插入行" : "新增行",
+          onClick: handleAddTableRow
+        }, null, 8, ["buttonProps", "tooltip"])) : vue.createCommentVNode("", true),
+        _ctx.itemType && ["table", "tableCell"].includes(_ctx.itemType) ? (vue.openBlock(), vue.createBlock(ToolButton, {
+          key: 1,
+          buttonProps: {
+            size: "small",
+            type: "primary",
+            icon: vue.unref(icons.InsertColumnOutlined)
+          },
+          tooltip: _ctx.itemType === "tableCell" ? "插入列" : "新增列",
+          onClick: handleAddTableCol
+        }, null, 8, ["buttonProps", "tooltip"])) : vue.createCommentVNode("", true),
+        _ctx.itemType && [
+          "tabs",
+          "tabPane",
+          "collapse",
+          "collapseItem",
+          "row",
+          "col",
+          "carousel",
+          "carouselItem",
+          "descriptions",
+          "descriptionsItem"
+        ].includes(_ctx.itemType) ? (vue.openBlock(), vue.createBlock(ToolButton, {
+          key: 2,
+          buttonProps: {
+            size: "small",
+            type: "primary",
+            icon: vue.unref(icons.PlusSquareDashOutlined)
+          },
+          tooltip: {
+            tabs: "添加选项卡",
+            tabPane: "插入选项卡",
+            collapse: "添加折叠面板",
+            collapseItem: "插入折叠面板",
+            row: "添加栅格列",
+            col: "插入栅格列",
+            carousel: "添加走马灯",
+            carouselItem: "插入走马灯",
+            descriptions: "添加描述列表",
+            descriptionsItem: "插入描述列表"
+          }[_ctx.itemType] || "添加",
+          onClick: handleAdd
+        }, null, 8, ["buttonProps", "tooltip"])) : vue.createCommentVNode("", true),
+        _ctx.itemType !== "tableCell" ? (vue.openBlock(), vue.createBlock(ToolButton, {
+          key: 3,
+          buttonProps: {
+            size: "small",
+            type: "primary",
+            icon: vue.unref(icons.CopyOutlined)
+          },
+          tooltip: "复制",
+          onClick: handleCopy
+        }, null, 8, ["buttonProps"])) : vue.createCommentVNode("", true),
+        _ctx.itemType !== "tableCell" ? (vue.openBlock(), vue.createBlock(ToolButton, {
+          key: 4,
+          buttonProps: {
+            size: "small",
+            type: "danger",
+            icon: vue.unref(icons.DeleteOutlined)
+          },
+          tooltip: "删除",
+          onClick: handleDelete
+        }, null, 8, ["buttonProps"])) : vue.createCommentVNode("", true),
+        _ctx.itemType === "tableCell" ? (vue.openBlock(), vue.createBlock(ToolButton, {
+          key: 5,
+          buttonProps: {
+            size: "small",
+            type: "primary",
+            icon: vue.unref(icons.AppstoreAddOutlined),
+            style: { fontSize: "14px" }
+          },
+          tooltip: "更多",
+          onClick: handleOpenTableTool
+        }, null, 8, ["buttonProps"])) : vue.createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,31 @@
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 对应的表单项类型 */
+    itemType?: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    delete: (event: MouseEvent) => void;
+    copy: (event: MouseEvent) => void;
+    add: (event: MouseEvent) => void;
+    addTableRow: (event: MouseEvent) => void;
+    addTableCol: (event: MouseEvent) => void;
+    openTableTool: (event: MouseEvent) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 对应的表单项类型 */
+    itemType?: string;
+}>>> & {
+    onCopy?: ((event: MouseEvent) => any) | undefined;
+    onDelete?: ((event: MouseEvent) => any) | undefined;
+    onAdd?: ((event: MouseEvent) => any) | undefined;
+    onAddTableRow?: ((event: MouseEvent) => any) | undefined;
+    onAddTableCol?: ((event: MouseEvent) => any) | undefined;
+    onOpenTableTool?: ((event: MouseEvent) => 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/children-edit.cjs

@@ -0,0 +1,117 @@
+"use strict";
+const vue = require("vue");
+const VueDraggable = require("vuedraggable");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const ComponentName = require("./component-name");
+const _hoisted_1 = { class: "ele-pro-form-builder-children-edit-item" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-pro-form-builder-children-edit-item-body"
+};
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = { class: "ele-pro-form-builder-children-edit-item-text" };
+const _hoisted_5 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "children-edit",
+  props: {
+    addBtnText: {},
+    formItem: {},
+    componentData: {}
+  },
+  emits: ["update:currentFormItemId", "updateChildLabel", "sortChildren", "deleteChildren", "addChildren"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const handleUpdateLabel = (value, item) => {
+      emit("updateChildLabel", value, item);
+    };
+    const handleUpdateChildren = (children) => {
+      emit("sortChildren", children);
+    };
+    const handleDelete = (item) => {
+      emit("deleteChildren", item);
+    };
+    const handleClick = (item) => {
+      emit("update:currentFormItemId", item.key);
+    };
+    const handleAdd = () => {
+      emit("addChildren", props.formItem);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        _ctx.formItem.children ? (vue.openBlock(), vue.createBlock(vue.unref(VueDraggable), {
+          key: 0,
+          itemKey: "key",
+          animation: 150,
+          setData: () => void 0,
+          modelValue: _ctx.formItem.children,
+          handle: ".ele-pro-form-builder-children-edit-item-handle",
+          class: "ele-pro-form-builder-children-edit-list",
+          "onUpdate:modelValue": handleUpdateChildren
+        }, {
+          item: vue.withCtx(({ element }) => [
+            vue.createElementVNode("div", _hoisted_1, [
+              vue.createVNode(vue.unref(elementPlus.ElIcon), { class: "ele-pro-form-builder-children-edit-item-handle" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.DragOutlined))
+                ]),
+                _: 1
+              }),
+              _ctx.formItem.type && ["tabs", "collapse"].includes(_ctx.formItem.type) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                vue.createVNode(vue.unref(elementPlus.ElInput), {
+                  size: "small",
+                  modelValue: element.label,
+                  "onUpdate:modelValue": (value) => handleUpdateLabel(value, element)
+                }, null, 8, ["modelValue", "onUpdate:modelValue"])
+              ])) : _ctx.formItem.type && "div" === _ctx.formItem.type ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                class: "ele-pro-form-builder-children-edit-item-body is-clickable",
+                onClick: vue.withModifiers(($event) => handleClick(element), ["stop"])
+              }, [
+                vue.createVNode(ComponentName, {
+                  itemType: element.type,
+                  componentData: _ctx.componentData,
+                  class: "ele-pro-form-builder-outline-item-type-tag"
+                }, null, 8, ["itemType", "componentData"]),
+                vue.createElementVNode("div", _hoisted_4, vue.toDisplayString(element.label || element.prop), 1)
+              ], 8, _hoisted_3)) : (vue.openBlock(), vue.createElementBlock("div", {
+                key: 2,
+                class: "ele-pro-form-builder-children-edit-item-body is-clickable",
+                onClick: vue.withModifiers(($event) => handleClick(element), ["stop"])
+              }, [
+                vue.createElementVNode("div", null, vue.toDisplayString(element.label || element.prop), 1)
+              ], 8, _hoisted_5)),
+              vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                class: "ele-pro-form-builder-children-edit-item-del-btn",
+                title: "删除",
+                onClick: vue.withModifiers(($event) => handleDelete(element), ["stop"])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.DeleteOutlined))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])) : vue.createCommentVNode("", true),
+        vue.createVNode(vue.unref(elementPlus.ElButton), {
+          size: "small",
+          icon: vue.unref(icons.PlusOutlined),
+          style: { width: "100%" },
+          onClick: handleAdd
+        }, vue.createSlots({ _: 2 }, [
+          _ctx.addBtnText ? {
+            name: "default",
+            fn: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.addBtnText), 1)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["icon"])
+      ], 64);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,39 @@
+import { BuildFormItem, ComponentGroup } from '../types';
+
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 添加按钮文本 */
+    addBtnText?: string;
+    /** 表单项数据 */
+    formItem: BuildFormItem;
+    /** 组件库数据 */
+    componentData: ComponentGroup[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentFormItemId": (formItemId?: string | undefined) => void;
+    updateChildLabel: (label: string, child: BuildFormItem) => void;
+    sortChildren: (children: BuildFormItem[]) => void;
+    deleteChildren: (child: BuildFormItem) => void;
+    addChildren: (parent: BuildFormItem) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 添加按钮文本 */
+    addBtnText?: string;
+    /** 表单项数据 */
+    formItem: BuildFormItem;
+    /** 组件库数据 */
+    componentData: ComponentGroup[];
+}>>> & {
+    "onUpdate:currentFormItemId"?: ((formItemId?: string | undefined) => any) | undefined;
+    onUpdateChildLabel?: ((label: string, child: BuildFormItem) => any) | undefined;
+    onSortChildren?: ((children: BuildFormItem[]) => any) | undefined;
+    onDeleteChildren?: ((child: BuildFormItem) => any) | undefined;
+    onAddChildren?: ((parent: BuildFormItem) => 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/code-js-var.cjs

@@ -0,0 +1,147 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const ALL_ICONS = require("../../icons");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const ALL_ICONS__namespace = /* @__PURE__ */ _interopNamespaceDefault(ALL_ICONS);
+class JsVar {
+  constructor(props) {
+    /** 生成 ElForm 代码时显示的变量名称 */
+    __publicField(this, "name");
+    /** 生成 ProForm 代码时显示的变量名称 */
+    __publicField(this, "proName");
+    /** 生成 ElForm 代码时添加的声明代码 */
+    __publicField(this, "code");
+    /** 生成 ProForm 代码时添加的声明代码 */
+    __publicField(this, "proCode");
+    /** 生成 ElForm 代码时添加的导入代码 */
+    __publicField(this, "imports");
+    /** 生成 ProForm 代码时添加的导入代码 */
+    __publicField(this, "proImports");
+    /** ProForm 预览界面获取对应的 js 变量 */
+    __publicField(this, "jsCode");
+    /** 转 JSON 时标识是 JsVar 对象 */
+    __publicField(this, "__isJsVar", true);
+    this.name = props.name;
+    this.proName = props.proName;
+    this.code = props.code;
+    this.proCode = props.proCode;
+    this.imports = props.imports;
+    this.proImports = props.proImports;
+    this.jsCode = props.jsCode;
+  }
+}
+function removePrefixStr(content, prefix) {
+  if (typeof prefix === "string") {
+    if (content.startsWith(prefix)) {
+      return content.slice(prefix.length);
+    }
+    return content;
+  }
+  let result = content;
+  prefix.forEach((temp) => {
+    result = removePrefixStr(result, temp);
+  });
+  return result;
+}
+function transformJsVar(jv) {
+  if (jv == null) {
+    return;
+  }
+  if (typeof jv === "string") {
+    if (jv.startsWith("__PRO_FORM_ICON__") || jv.startsWith("/*__PRO_FORM_ICON__*/")) {
+      const icon = removePrefixStr(jv, [
+        "__PRO_FORM_ICON__",
+        "/*__PRO_FORM_ICON__*/"
+      ]);
+      return new JsVar({
+        name: icon,
+        proName: `markRaw(${icon})`,
+        imports: [`import { ${icon} } from '@/components/icons';`],
+        proImports: [
+          `import { markRaw } from 'vue';`,
+          `import { ${icon} } from '@/components/icons';`
+        ],
+        jsCode: () => vue.markRaw(ALL_ICONS__namespace[icon] ?? ALL_ICONS__namespace.UserOutlined)
+      });
+    }
+    if (jv.startsWith("__PRO_FORM__") || jv.startsWith("/*__PRO_FORM__*/")) {
+      const codeName = removePrefixStr(jv, [
+        "__PRO_FORM__",
+        "/*__PRO_FORM__*/"
+      ]);
+      if (codeName === "searchExpand") {
+        return new JsVar({
+          name: `form.${codeName}`,
+          proName: `'${codeName}'`,
+          jsCode: (form) => {
+            return () => form.searchExpand ?? false;
+          }
+        });
+      }
+      return new JsVar({
+        name: codeName.replace(/formItems\.length/g, "formItemsLength"),
+        proName: codeName,
+        code: "const formItemsLength = 0;",
+        jsCode: (form, config) => {
+          try {
+            return new Function(
+              "form",
+              "items",
+              "searchExpand",
+              "formItems",
+              "formData",
+              `return (${codeName})`
+            )(
+              form,
+              config.items,
+              form.searchExpand ?? false,
+              config.items,
+              form
+            );
+          } catch (_e) {
+            return codeName;
+          }
+        }
+      });
+    }
+  }
+  if (typeof jv !== "object") {
+    return;
+  }
+  if (jv instanceof JsVar) {
+    return jv;
+  }
+  if (jv.__isJsVar === true && (jv.name != null || jv.proName != null)) {
+    return new JsVar(jv);
+  }
+}
+function transformProJsVar(jv) {
+  const jsVar = transformJsVar(jv);
+  if (jsVar != null) {
+    return new JsVar({ ...jsVar, name: jsVar.proName });
+  }
+  return jsVar;
+}
+exports.JsVar = JsVar;
+exports.removePrefixStr = removePrefixStr;
+exports.transformJsVar = transformJsVar;
+exports.transformProJsVar = transformProJsVar;

package/lib/ele-pro-form-builder/components/code-js-var.d.ts

@@ -0,0 +1,44 @@
+import { TemplateFormConfig } from '../types';
+
+/**
+ * 预览界面获取对应的 js 变量
+ */
+export type JsCodeFunc = (form: Record<string, any>, config: TemplateFormConfig) => any;
+/**
+ * 标识 js 变量名
+ */
+export declare class JsVar {
+    /** 生成 ElForm 代码时显示的变量名称 */
+    name?: string;
+    /** 生成 ProForm 代码时显示的变量名称 */
+    proName?: string;
+    /** 生成 ElForm 代码时添加的声明代码 */
+    code?: string;
+    /** 生成 ProForm 代码时添加的声明代码 */
+    proCode?: string;
+    /** 生成 ElForm 代码时添加的导入代码 */
+    imports?: string[];
+    /** 生成 ProForm 代码时添加的导入代码 */
+    proImports?: string[];
+    /** ProForm 预览界面获取对应的 js 变量 */
+    jsCode?: JsCodeFunc;
+    /** 转 JSON 时标识是 JsVar 对象 */
+    __isJsVar: boolean;
+    constructor(props: Omit<JsVar, '__isJsVar'>);
+}
+/**
+ * 移除字符串前缀
+ * @param content 字符串
+ * @param prefix 一个或多个前缀
+ */
+export declare function removePrefixStr(content: string, prefix: string | string[]): string;
+/**
+ * JSON 数据转换 JsVar 对象
+ * @param jv JSON 解析后的值
+ */
+export declare function transformJsVar(jv: any): JsVar | undefined;
+/**
+ * 生成 ProForm 代码时的 JSON 数据转换 JsVar 对象
+ * @param jv JSON 解析后的值
+ */
+export declare function transformProJsVar(jv: any): JsVar | undefined;