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

package/es/ele-pro-form/style/index.scss

@@ -0,0 +1,183 @@
+@use 'sass:list';
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-pro-form-var($ele);
+
+/* 构建表单内对部分组件排除禁用 */
+$enable-selectors: (
+  '.el-tabs>.el-tabs__header',
+  '.el-tabs__nav>.el-tabs__item',
+  '.el-tabs__nav>.el-tabs__item>.ele-tab-title',
+  '.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-prev',
+  '.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-next',
+  '.el-collapse>.el-collapse-item>.el-collapse-item__header',
+  '.el-carousel>.el-carousel__arrow',
+  '.el-carousel>.el-carousel__indicators>.el-carousel__indicator>.el-carousel__button'
+) !default;
+/* 构建表单内排除禁用的元素 */
+$exclude-disabled-selectors: list.join(
+  (
+    '.ele-pro-form-builder-item-wrapper',
+    '.ele-pro-form-builder-container-wrapper',
+    '.ele-pro-form-builder-item-tools',
+    '.ele-pro-form-builder-item-handle',
+    '.ele-pro-form-builder-tool-button'
+  ),
+  $enable-selectors
+) !default;
+
+/* 构建移动手柄 */
+.ele-pro-form-builder-item-handle {
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  display: flex;
+  align-items: center;
+  color: eleVar('pro-form', 'handle-color');
+  font-size: eleVar('pro-form', 'handle-font-size');
+  height: eleVar('pro-form', 'handle-height');
+  line-height: eleVar('pro-form', 'handle-height');
+  padding: eleVar('pro-form', 'handle-padding');
+  background: eleVar('pro-form', 'handle-bg');
+  box-shadow: eleVar('pro-form', 'handle-shadow');
+  z-index: eleVar('pro-form', 'handle-index');
+  box-sizing: border-box;
+  pointer-events: auto;
+  cursor: move;
+
+  &.is-disabled {
+    pointer-events: none;
+  }
+}
+
+.ele-pro-form-builder-item-handle-icon {
+  margin-right: eleVar('pro-form', 'handle-space');
+}
+
+.ele-pro-form-builder-item-tools {
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+  position: absolute;
+  bottom: -2px;
+  right: -1px;
+}
+
+.ele-pro-form-builder-item-tool-wrapper {
+  position: static;
+  overflow: visible;
+  font-weight: normal;
+  pointer-events: none;
+}
+
+.ele-pro-form-builder-item-wrapper:not(.is-active),
+.ele-pro-form-builder-container-wrapper:not(.is-active) {
+  & > .ele-pro-form-builder-item-tool-wrapper {
+    display: none;
+  }
+}
+
+/* 构建容器 */
+.ele-pro-form-builder-item-wrapper,
+.ele-pro-form-builder-container-wrapper {
+  border: eleVar('pro-form', 'item-wrapper-padding') solid transparent;
+  outline: eleVar('pro-form', 'item-wrapper-border');
+  box-sizing: border-box;
+  pointer-events: auto;
+  position: relative;
+}
+
+.ele-pro-form-builder-item-wrapper,
+.ele-pro-form-builder-container-wrapper.is-selectable {
+  &:hover {
+    outline: eleVar('pro-form', 'item-wrapper-hover-border');
+  }
+
+  &.is-active {
+    outline: eleVar('pro-form', 'item-wrapper-active-border');
+    outline-offset: eleVar('pro-form', 'item-wrapper-active-border-offset');
+    z-index: eleVar('pro-form', 'item-wrapper-active-index');
+  }
+}
+
+.ele-pro-form-builder-container-wrapper {
+  min-height: eleVar('pro-form', 'container-wrapper-min-height');
+  outline-offset: eleVar('pro-form', 'container-wrapper-border-offset');
+}
+
+.ele-pro-form-builder-container-wrapper.is-selectable.is-active {
+  outline-offset: eleVar('pro-form', 'container-wrapper-active-border-offset');
+}
+
+.ele-pro-form-builder-item-wrapper.is-div-type {
+  min-height: eleVar('pro-form', 'container-div-min-height');
+}
+
+/* 构建表单组件特殊处理 */
+.ele-pro-form.is-editable {
+  & > .ele-pro-form-builder-container-wrapper {
+    border: none;
+    outline: none;
+  }
+
+  #{joinNotSelectors($exclude-disabled-selectors)} {
+    pointer-events: none !important;
+    transition: none !important;
+  }
+
+  #{$enable-selectors} {
+    pointer-events: auto !important;
+    transition: none !important;
+  }
+
+  .ele-pro-form-builder-item-wrapper > table.ele-table {
+    width: 100%;
+    height: 100%;
+    #{eleVarName('table', 'tr-hover-bg')}: eleVar('table', 'tr-bg');
+
+    &.is-stripe > tr:nth-child(even),
+    &.is-stripe > tbody > tr:nth-child(even) {
+      #{eleVarName('table', 'tr-hover-bg')}: eleVar('table', 'even-bg');
+    }
+
+    td > .ele-pro-form-builder-container-wrapper {
+      height: 100%;
+    }
+  }
+
+  .el-descriptions__cell > .ele-pro-form-builder-container-wrapper {
+    min-height: eleVar('pro-form', 'container-description-min-height');
+  }
+
+  .ele-pro-form-builder-item-wrapper > .el-descriptions {
+    & > .el-descriptions__body > table.el-descriptions__table {
+      width: 100%;
+      height: 100%;
+
+      td > .ele-pro-form-builder-container-wrapper {
+        height: 100%;
+      }
+    }
+  }
+
+  .el-carousel__item > .ele-pro-form-builder-container-wrapper {
+    height: 100%;
+  }
+}
+
+/* 表单必填星号辅助类 */
+.ele-pro-form-required-asterisk::before {
+  content: '*';
+  color: elVar('color-error');
+  margin-right: 4px;
+}
+
+/* 描述列表组件辅助类 */
+.ele-pro-form-descriptions-details.el-descriptions {
+  .el-descriptions__cell.el-descriptions__label {
+    width: eleVar('pro-form', 'descriptions-label-wdith');
+    font-weight: normal;
+  }
+}

package/es/ele-pro-form/types.d.ts

@@ -0,0 +1,132 @@
+import type { VNode } from 'vue';
+import type { ElFormItemProps, ElRowProps, ElColProps } from '../ele-app/el';
+import type { UserComponent } from '../ele-app/types';
+
+/**
+ * 表单项 key
+ */
+export type ProFormItemKey = keyof any;
+
+/**
+ * 表单项数据
+ */
+export interface ProFormItemProps {
+  /** 表单项 key */
+  key?: ProFormItemKey;
+  /** 字段名 */
+  prop: string;
+  /** 标题 */
+  label?: string;
+  /** 是否为必填项 */
+  required?: boolean;
+  /** 必填校验信息 */
+  requiredMessage?: string;
+  /** ElFormItem 属性 */
+  itemProps?: ElFormItemProps;
+  /** ElFormItem 插槽 */
+  itemSlots?: Record<string, string>;
+  /** 组件类型 */
+  type?: string;
+  /** 组件属性 */
+  props?: Record<string, any>;
+  /** 组件插槽 */
+  slots?: Record<string, string>;
+  /** 下拉单选多选等选项数据 */
+  options?: ProFormItemOption[];
+  /** ElCol 属性 */
+  colProps?: ElColProps;
+  /** 容器组件是否栅格布局 */
+  grid?: boolean | ElColProps;
+  /** 容器组件栅格布局 ElRow 属性 */
+  rowProps?: ElRowProps;
+  /** 自定义组件类型时标识表单项类型 */
+  itemType?: 'default' | 'view' | 'container';
+  /** 显示条件 */
+  vIf?: any;
+  /** 初始值 */
+  initValue?: any;
+  /** 子级 */
+  children?: ProFormItemProps[];
+}
+
+/**
+ * 下拉选项数据
+ */
+export interface ProFormItemOption extends Record<string, any> {
+  /** 循环的 key */
+  key?: keyof any;
+  /** 选中值 */
+  value: any;
+  /** 显示文本 */
+  label?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 子级 */
+  children?: ProFormItemOption[];
+}
+
+/**
+ * 获取表单项类型组件属性的方法参数
+ */
+export interface ProFormItemPropsFunctionParams {
+  /** 表单项数据 */
+  item: ProFormItemProps;
+  /** 表单项对应的绑定值 */
+  modelValue: any;
+  /** 更新绑定值的方法 */
+  updateModelValue: (value: any) => void;
+  /** 判断表单项是否展示的方法 */
+  isShowFormItem: (item: ProFormItemProps) => boolean;
+  /** 渲染表单项子级的方法 */
+  renderChildren: (
+    item: ProFormItemProps,
+    sortDisabled?: boolean,
+    containerSelectable?: boolean
+  ) => string | VNode | Array<string | VNode> | undefined;
+}
+
+/**
+ * 表单项类型数据
+ */
+export interface ProFormItemTypeData {
+  /** 组件类型 */
+  type: string;
+  /** 组件 */
+  component: UserComponent;
+  /** 是否是容器组件 */
+  isContainer?: boolean;
+  /** 容器组件在编辑模式下是否禁用拖拽功能 */
+  sortDisabled?: boolean;
+  /** 容器组件在编辑模式下是否可选中 */
+  containerSelectable?: boolean;
+  /** 是否渲染 label 属性为文本内容 */
+  renderLabelText?: boolean;
+  /** 组件的默认属性 */
+  defaultProps?: (
+    params: ProFormItemPropsFunctionParams
+  ) => Record<string, any>;
+  /** 组件的保留属性 */
+  reservedProps?: (
+    params: ProFormItemPropsFunctionParams
+  ) => Record<string, any>;
+  /** 组件的保留插槽 */
+  reservedSlots?: (
+    params: ProFormItemPropsFunctionParams
+  ) => ProFormItemRenderSlots;
+  /** 必填校验触发方式 */
+  requiredTrigger?: string;
+  /** 选项组件 */
+  optionsComponent?: UserComponent;
+  /** 选项组件属性 */
+  optionsComponentProps?: (option: ProFormItemOption) => Record<string, any>;
+}
+
+/**
+ * 渲染表单项组件时的插槽数据
+ */
+export type ProFormItemRenderSlots = Record<
+  string,
+  (
+    slotProps?: Record<string, any>
+  ) => string | VNode | Array<string | VNode> | undefined
+>;

package/es/ele-pro-form/util.d.ts

@@ -0,0 +1,2 @@
+export { get as getValue, set as setValue, merge as mergeValue } from 'lodash-es';
+export { sortableGroupName, ChildrenRender } from './components/render-util';

package/es/ele-pro-form/util.js

@@ -0,0 +1,11 @@
+import { ChildrenRender, sortableGroupName } from "./components/render-util";
+import { default as default2 } from "../../node_modules/lodash-es/get.js";
+import { default as default3 } from "../../node_modules/lodash-es/set.js";
+import { default as default4 } from "../../node_modules/lodash-es/merge.js";
+export {
+  ChildrenRender,
+  default2 as getValue,
+  default4 as mergeValue,
+  default3 as setValue,
+  sortableGroupName
+};

package/es/ele-pro-form-builder/components/body-form.d.ts

@@ -0,0 +1,58 @@
+import { UserComponent } from '../../ele-app/types';
+import { ProFormItemKey, ProFormItemProps, 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<{
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 选中的表单项 id */
+    currentFormItemId?: ProFormItemKey;
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentFormItemId": (formItemId?: string | number | symbol | undefined) => void;
+    updateItems: (result: UpdateItemsResult) => void;
+    openTableTool: (formItemId: string, el: HTMLElement) => void;
+    updateFormItems: (items: ProFormItemProps[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 选中的表单项 id */
+    currentFormItemId?: ProFormItemKey;
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>>> & {
+    onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
+    onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
+    "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
+    onUpdateFormItems?: ((items: ProFormItemProps[]) => 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/es/ele-pro-form-builder/components/body-form.js

@@ -0,0 +1,181 @@
+import { defineComponent, ref, reactive, watch, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, mergeProps, createSlots, withCtx, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps, unref, createCommentVNode } from "vue";
+import { ElEmpty } from "element-plus";
+import { eachTree } from "../../utils/core";
+import { mergeValue, setValue } from "../../ele-pro-form/util";
+import EleProForm from "../../ele-pro-form/index";
+import { getFormInitValue } from "../util";
+import { generateAddChildData, generateCopyItemData } from "./build-util";
+import ComponentName from "./component-name";
+import BuilderTools from "./builder-tools";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "body-form",
+  props: {
+    formProps: {},
+    currentFormItemId: {},
+    currentScreen: {},
+    componentData: {},
+    proFormComponent: {},
+    itemTypeData: {}
+  },
+  emits: ["update:currentFormItemId", "updateItems", "openTableTool", "updateFormItems"],
+  setup(__props, { emit: __emit }) {
+    const ownSlots = ["builderItemHandleContent", "builderItemTools"];
+    const props = __props;
+    const emit = __emit;
+    const proFormRef = ref(null);
+    const formData = reactive({});
+    const cachebuilderFormData = reactive({});
+    const handleUpdateItems = (result) => {
+      emit("updateItems", result);
+    };
+    const handleUpdateCurrentFormItemId = (formItemId) => {
+      emit("update:currentFormItemId", formItemId);
+    };
+    const handleDeleteItem = (item) => {
+      if (item.key != null) {
+        handleUpdateItems({
+          deleteItemIds: [item.key],
+          addItems: [],
+          updateItems: []
+        });
+      }
+    };
+    const handleAddChildrenItem = (formItem, action) => {
+      var _a;
+      if (formItem.key != null) {
+        eachTree((_a = props.formProps) == null ? void 0 : _a.items, (item, cIndex, parent) => {
+          var _a2;
+          if (item.key === formItem.key) {
+            const result = generateAddChildData(
+              item,
+              parent,
+              cIndex,
+              action,
+              (_a2 = props.formProps) == null ? void 0 : _a2.items
+            );
+            handleUpdateItems(result);
+            return false;
+          }
+        });
+      }
+    };
+    const handleCopyItem = (item) => {
+      var _a;
+      if (item.key != null) {
+        handleUpdateItems(
+          generateCopyItemData(item.key, (_a = props.formProps) == null ? void 0 : _a.items)
+        );
+      }
+    };
+    const handleOpenTableTool = (item, e) => {
+      if (item.key != null) {
+        emit("openTableTool", item.key, e.currentTarget);
+      }
+    };
+    const setBuilderFormDataFieldValue = (field, value) => {
+      setValue(formData, field, value);
+      setValue(cachebuilderFormData, field, value);
+    };
+    const handleUpdateFormItems = (items) => {
+      emit("updateFormItems", items);
+    };
+    watch(
+      () => props.currentFormItemId,
+      (currentFormItemId) => {
+        var _a;
+        eachTree((_a = props.formProps) == null ? void 0 : _a.items, (item, _cIndex, parent) => {
+          if (item.key === currentFormItemId) {
+            if (item.type && ["tabPane", "collapseItem"].includes(item.type) && parent) {
+              setBuilderFormDataFieldValue(parent.prop, item.prop);
+            }
+            return false;
+          }
+        });
+      }
+    );
+    watch(
+      () => props.formProps,
+      () => {
+        var _a;
+        Object.keys(formData).forEach((k) => {
+          formData[k] = void 0;
+        });
+        mergeValue(
+          formData,
+          getFormInitValue((_a = props.formProps) == null ? void 0 : _a.items, props.itemTypeData),
+          cachebuilderFormData
+        );
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "ele-pro-form-builder-body",
+          { "is-pc": _ctx.currentScreen === "pc" },
+          { "is-pad": _ctx.currentScreen === "pad" },
+          { "is-phone": _ctx.currentScreen === "phone" }
+        ])
+      }, [
+        (openBlock(), createBlock(resolveDynamicComponent(_ctx.proFormComponent || EleProForm), mergeProps(_ctx.formProps || {}, {
+          ref_key: "proFormRef",
+          ref: proFormRef,
+          model: formData,
+          searchExpand: formData.searchExpand,
+          "onUpdate:searchExpand": _cache[0] || (_cache[0] = ($event) => formData.searchExpand = $event),
+          activeItemKey: _ctx.currentFormItemId,
+          editable: true,
+          footer: false,
+          validateOnRuleChange: false,
+          scrollToError: false,
+          showMessage: false,
+          itemTypeData: _ctx.itemTypeData,
+          class: "ele-pro-form-builder-body-form",
+          onUpdateValue: setBuilderFormDataFieldValue,
+          "onUpdate:items": handleUpdateFormItems,
+          "onUpdate:activeItemKey": handleUpdateCurrentFormItemId
+        }), createSlots({
+          builderItemHandleContent: withCtx(({ item }) => [
+            createVNode(ComponentName, {
+              itemType: item.type,
+              componentData: _ctx.componentData
+            }, null, 8, ["itemType", "componentData"])
+          ]),
+          builderItemTools: withCtx(({ item }) => [
+            createVNode(BuilderTools, {
+              itemType: item.type,
+              onDelete: ($event) => handleDeleteItem(item),
+              onCopy: ($event) => handleCopyItem(item),
+              onAdd: ($event) => handleAddChildrenItem(item),
+              onAddTableRow: ($event) => handleAddChildrenItem(item, "addTableRow"),
+              onAddTableCol: ($event) => handleAddChildrenItem(item, "addTableCol"),
+              onOpenTableTool: (e) => handleOpenTableTool(item, e)
+            }, null, 8, ["itemType", "onDelete", "onCopy", "onAdd", "onAddTableRow", "onAddTableCol", "onOpenTableTool"])
+          ]),
+          _: 2
+        }, [
+          renderList(Object.keys(_ctx.$slots).filter((k) => !ownSlots.includes(k)), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1040, ["model", "searchExpand", "activeItemKey", "itemTypeData"])),
+        !_ctx.formProps || !_ctx.formProps.items || !_ctx.formProps.items.length ? (openBlock(), createBlock(unref(ElEmpty), {
+          key: 0,
+          imageSize: 80,
+          description: "拖拽左侧组件到此",
+          class: "ele-pro-form-builder-form-empty"
+        })) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-pro-form-builder/components/body-header.d.ts

@@ -0,0 +1,62 @@
+import { UserComponent } from '../../ele-app/types';
+import { ProFormItemTypeData } from '../../ele-pro-form/types';
+import { TemplateFormConfig } from '../types';
+
+declare function __VLS_template(): {
+    headerTools?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:currentScreen": (size?: string | undefined) => void;
+    undo: () => void;
+    redo: () => void;
+    clear: () => void;
+    previewFormSubmit: (data: Record<string, any>) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    /** 当前选中屏幕尺寸 */
+    currentScreen?: string;
+    /** 是否禁用撤销 */
+    undoDisabled?: boolean;
+    /** 是否禁用恢复 */
+    redoDisabled?: boolean;
+    /** 表单属性 */
+    formProps?: TemplateFormConfig;
+    /** 高级表单组件 */
+    proFormComponent?: UserComponent;
+    /** 高级表单组件类型数据 */
+    itemTypeData?: ProFormItemTypeData[];
+}>>> & {
+    onClear?: (() => any) | undefined;
+    onPreviewFormSubmit?: ((data: Record<string, any>) => any) | undefined;
+    "onUpdate:currentScreen"?: ((size?: string | undefined) => any) | undefined;
+    onUndo?: (() => any) | undefined;
+    onRedo?: (() => 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;
+    };
+};