ele-admin-plus 1.3.0 → 1.4.0-beta.1

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

@@ -1,5 +1,5 @@
 import { formProps, formEmits } from "element-plus";
-import { pick } from "../utils/core";
+import { pick } from "../utils/common";
 const proFormProps = {
   ...formProps,
   /** 标签宽度 */
@@ -20,24 +20,15 @@ const proFormProps = {
   /** 底栏 ElFormItem 插槽 */
   footerSlots: Object,
   /** 栅格布局时底栏 ElCol 属性 */
-  footerColProps: {
-    type: Object,
-    default: () => {
-      return { span: 24 };
-    }
-  },
+  footerColProps: Object,
+  /** 自动计算底栏栅格份数 */
+  autoFooterCol: Boolean,
   /** 底栏样式 */
   footerStyle: Object,
   /** 提交按钮文本 */
-  submitText: {
-    type: String,
-    default: "提交"
-  },
+  submitText: String,
   /** 重置按钮文本 */
-  resetText: {
-    type: String,
-    default: "重置"
-  },
+  resetText: String,
   /** 提交按钮属性 */
   submitButtonProps: Object,
   /** 重置按钮属性 */
@@ -47,15 +38,9 @@ const proFormProps = {
   /** 展开和收起按钮属性 */
   searchExpandButtonProps: Object,
   /** 展开按钮的文字 */
-  searchExpandText: {
-    type: String,
-    default: "展开"
-  },
+  searchExpandText: String,
   /** 收起按钮的文字 */
-  searchShrinkText: {
-    type: String,
-    default: "收起"
-  },
+  searchShrinkText: String,
   /** 搜索表单展开状态 */
   searchExpand: Boolean,
   /** 阻止表单原生的表单提交事件 */
@@ -65,12 +50,16 @@ const proFormProps = {
   },
   /** 编辑模式 */
   editable: Boolean,
+  /** 屏幕尺寸 */
+  screenSize: String,
   /** 编辑模式选中的表单项 */
   activeItemKey: [String, Number],
   /** 组件类型数据 */
   itemTypeData: Array,
   /** 远程数据源请求工具 */
-  httpRequest: [Object, Function]
+  httpRequest: [Object, Function],
+  /** 国际化 */
+  locale: Object
 };
 const proFormEmits = {
   ...formEmits,
@@ -89,12 +78,18 @@ const childrenRenderProps = {
     "grid",
     "rowProps",
     "editable",
+    "screenSize",
     "activeItemKey",
     "itemTypeData",
     "httpRequest"
   ]),
   /** 额外的 ElCol 属性 */
   contentExtraColProps: Object,
+  /** 自动计算额外的 ElCol 份数 */
+  autoContentExtraCol: {
+    type: Boolean,
+    required: false
+  },
   /** 父级表单项 */
   parentItem: Object,
   /** 全部的表单项 */
@@ -117,6 +112,8 @@ const childrenRenderProps = {
   updateItemsData: Function,
   /** 更新编辑模式选中项方法 */
   updateActiveItemKey: Function,
+  /** 默认的必填提示文本 */
+  requiredLang: String,
   /** 兼容旧版 */
   item: Object
 };

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

@@ -7,22 +7,25 @@
 
 /* 构建表单内对部分组件排除禁用 */
 $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'
+  '.el-tabs__header',
+  '.el-tabs__item',
+  '.ele-tab-title',
+  '.el-tabs__nav-prev',
+  '.el-tabs__nav-next',
+  '.el-collapse-item__header',
+  '.el-carousel__arrow',
+  '.el-carousel__button'
 ) !default;
 /* 构建表单内排除禁用的元素 */
 $exclude-disabled-selectors: list.join(
   (
     '.ele-pro-form-builder-item-wrapper',
+    '.ele-pro-form-builder-grid-item-wrapper',
     '.ele-pro-form-builder-container-wrapper',
-    '.ele-pro-form-builder-item-tools',
+    '.ele-pro-form-builder-grid-container-wrapper',
+    '.ele-pro-form-builder-item-tool-wrapper',
     '.ele-pro-form-builder-item-handle',
+    '.ele-pro-form-builder-item-tools',
     '.ele-pro-form-builder-tool-button'
   ),
   $enable-selectors
@@ -44,7 +47,6 @@ $exclude-disabled-selectors: list.join(
   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 {
@@ -59,17 +61,15 @@ $exclude-disabled-selectors: list.join(
 .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 {
+  font-weight: normal;
   position: static;
   overflow: visible;
-  font-weight: normal;
-  pointer-events: none;
 }
 
 .ele-pro-form-builder-item-wrapper:not(.is-active),
@@ -115,8 +115,18 @@ $exclude-disabled-selectors: list.join(
   min-height: eleVar('pro-form', 'container-div-min-height');
 }
 
+.ele-pro-form-builder-grid-container-wrapper.el-row {
+  align-content: flex-start;
+}
+
 /* 构建表单组件特殊处理 */
 .ele-pro-form.is-editable {
+  user-select: none !important;
+
+  * {
+    user-select: none !important;
+  }
+
   & > .ele-pro-form-builder-container-wrapper {
     border: none;
     outline: none;
@@ -142,12 +152,14 @@ $exclude-disabled-selectors: list.join(
       #{eleVarName('table', 'tr-hover-bg')}: eleVar('table', 'even-bg');
     }
 
-    td > .ele-pro-form-builder-container-wrapper {
+    td > .ele-pro-form-builder-container-wrapper,
+    td > .ele-pro-form-builder-grid-container-wrapper {
       height: 100%;
     }
   }
 
-  .el-descriptions__cell > .ele-pro-form-builder-container-wrapper {
+  .el-descriptions__cell > .ele-pro-form-builder-container-wrapper,
+  .el-descriptions__cell > .ele-pro-form-builder-grid-container-wrapper {
     min-height: eleVar('pro-form', 'container-description-min-height');
   }
 
@@ -156,17 +168,39 @@ $exclude-disabled-selectors: list.join(
       width: 100%;
       height: 100%;
 
-      td > .ele-pro-form-builder-container-wrapper {
+      td > .ele-pro-form-builder-container-wrapper,
+      td > .ele-pro-form-builder-grid-container-wrapper {
         height: 100%;
       }
     }
   }
 
-  .el-carousel__item > .ele-pro-form-builder-container-wrapper {
+  .el-carousel__item > .ele-pro-form-builder-container-wrapper,
+  .el-carousel__item > .ele-pro-form-builder-grid-container-wrapper {
     height: 100%;
   }
 }
 
+/* 搜索表单底栏展开样式 */
+.ele-pro-form-footer-body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.ele-pro-form-footer.is-search-expand > .el-form-item__content {
+  & > .ele-pro-form-footer-body {
+    justify-content: flex-end;
+  }
+}
+
+/* 快捷栅格布局拖动时样式优化 */
+.ele-pro-form-builder-container-wrapper:not(.el-row) {
+  & > .ele-pro-form-builder-grid-item-wrapper {
+    max-width: none;
+  }
+}
+
 /* 表单必填星号辅助类 */
 .ele-pro-form-required-asterisk::before {
   content: '*';
@@ -191,6 +225,14 @@ $exclude-disabled-selectors: list.join(
   border-color: elVar('border-color', 'light');
 }
 
+.ele-icon-border-color-lighter {
+  border-color: elVar('border-color', 'lighter');
+}
+
+.ele-icon-border-color-extra-light {
+  border-color: elVar('border-color', 'extra-light');
+}
+
 .ele-icon-border-color-primary {
   border-color: elVar('color-primary');
 }
@@ -236,6 +278,18 @@ $exclude-disabled-selectors: list.join(
   background: elVar('fill-color', 'light');
 }
 
+.ele-icon-bg-fill-extra-light {
+  background: elVar('fill-color', 'lighter');
+}
+
+.ele-icon-bg-fill-extra-lighter {
+  background: elVar('fill-color', 'extra-light');
+}
+
+.ele-icon-bg-fill-blank {
+  background: elVar('fill-color', 'blank');
+}
+
 .ele-icon-bg-fill-dark {
   background: elVar('border-color');
 }

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

@@ -110,3 +110,19 @@ export type ProFormItemRenderSlots = Record<
     slotProps?: Record<string, any>
   ) => string | VNode | Array<string | VNode> | undefined
 >;
+
+/**
+ * 屏幕尺寸
+ */
+export type ScreenSize = 'pc' | 'pad' | 'phone';
+
+/**
+ * 国际化
+ */
+export interface ProFormLocale {
+  submit: string;
+  reset: string;
+  expand: string;
+  shrink: string;
+  required: string;
+}

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

@@ -1,8 +1,8 @@
-import { get as getValue, set as setValue, merge as mergeValue } from 'lodash-es';
 import { ProFormItemProps, ProFormItemTypeData } from './types';
+import { getValue, setValue, mergeValue, cloneDeep, ChildrenRender } from './components/render-util';
 
-export { sortableGroupName, ChildrenRender } from './components/render-util';
-export { setValue, getValue, mergeValue };
+export { sortableGroupName } from './components/render-core';
+export { setValue, getValue, mergeValue, cloneDeep, ChildrenRender };
 /**
  * 判断表单项是否是容器类型
  * @param item 表单项
@@ -13,5 +13,6 @@ export declare function isContainerType(item: ProFormItemProps, itemTypeData?: P
  * 获取表单数据初始值
  * @param items 表单项数据
  * @param itemTypeData 高级表单组件类型数据
+ * @param excludeUndefined 排除空值
  */
-export declare function getFormInitValue(items?: ProFormItemProps[], itemTypeData?: ProFormItemTypeData[]): Record<string, any>;
+export declare function getFormInitValue(items?: ProFormItemProps[], itemTypeData?: ProFormItemTypeData[], excludeUndefined?: boolean): Record<string, any>;

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

@@ -1,56 +1,52 @@
-import { set, get } from "lodash-es";
-import { get as get2, merge, set as set2 } from "lodash-es";
-import { eachTree } from "../utils/core";
-import { defaultItemTypeData } from "./components/item-type-data";
-import { ChildrenRender, sortableGroupName } from "./components/render-util";
+import { eachTree } from "../utils/common";
+import { getItemTypeData, setValue, getValue } from "./components/render-util";
+import { ChildrenRender, cloneDeep, getValue as getValue2, mergeValue, setValue as setValue2 } from "./components/render-util";
+import { sortableGroupName } from "./components/render-core";
 function isContainerType(item, itemTypeData) {
-  const typeData = item.type ? [...itemTypeData || [], ...defaultItemTypeData].find(
-    (d) => d.type === item.type
-  ) : void 0;
+  const typeData = getItemTypeData(item, itemTypeData);
   return (typeData == null ? void 0 : typeData.isContainer) || item.itemType === "container" || item.itemType === "view";
 }
-function getFormInitValue(items, itemTypeData) {
+function getFormInitValue(items, itemTypeData, excludeUndefined) {
   const init = {};
   eachTree(items, (item) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     if (item.initValue != null && item.initValue !== "" && item.prop) {
-      set(init, item.prop, item.initValue);
+      setValue(init, item.prop, item.initValue);
       return;
     }
     if (item.type && item.prop) {
       if ("tabs" === item.type) {
         const active = ((_a = item.props) == null ? void 0 : _a.modelValue) ?? ((_c = (_b = item.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.prop);
-        set(init, item.prop, active);
+        setValue(init, item.prop, active);
         return;
       }
       if ("collapse" === item.type) {
         const active = ((_d = item.props) == null ? void 0 : _d.modelValue) ?? (((_e = item.props) == null ? void 0 : _e.accordion) ? ((_h = (_g = (_f = item.children) == null ? void 0 : _f[0]) == null ? void 0 : _g.props) == null ? void 0 : _h.name) ?? ((_j = (_i = item.children) == null ? void 0 : _i[0]) == null ? void 0 : _j.prop) : []);
-        set(init, item.prop, active);
+        setValue(init, item.prop, active);
         return;
       }
       if ("sliderRange" === item.type) {
-        set(init, item.prop, [
+        setValue(init, item.prop, [
           ((_k = item.props) == null ? void 0 : _k.min) ?? 0,
           ((_l = item.props) == null ? void 0 : _l.max) ?? 100
         ]);
         return;
       }
     }
-    if (isContainerType(item, itemTypeData) || !item.prop) {
+    if (excludeUndefined || isContainerType(item, itemTypeData) || !item.prop || typeof getValue(init, item.prop) !== "undefined") {
       return;
     }
-    if (typeof get(init, item.prop) === "undefined") {
-      set(init, item.prop, void 0);
-    }
+    setValue(init, item.prop, void 0);
   });
   return init;
 }
 export {
   ChildrenRender,
+  cloneDeep,
   getFormInitValue,
-  get2 as getValue,
+  getValue2 as getValue,
   isContainerType,
-  merge as mergeValue,
-  set2 as setValue,
+  mergeValue,
+  setValue2 as setValue,
   sortableGroupName
 };

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

@@ -1,15 +1,16 @@
 import { UserComponent } from '../../ele-app/types';
-import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData } from '../../ele-pro-form/types';
-import { TemplateFormConfig, ComponentGroup, UpdateItemsResult } from '../types';
+import { EleProFormProps } from '../../ele-app/plus';
+import { ProFormItemKey, ProFormItemProps, ProFormItemTypeData, ScreenSize } from '../../ele-pro-form/types';
+import { ComponentGroup, UpdateItemsResult } from '../types';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 选中的表单项 id */
     currentFormItemId?: ProFormItemKey;
     /** 当前选中屏幕尺寸 */
-    currentScreen?: string;
+    currentScreen?: ScreenSize;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
     /** 高级表单组件 */
@@ -25,11 +26,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     updateFormItems: (items: ProFormItemProps[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 选中的表单项 id */
     currentFormItemId?: ProFormItemKey;
     /** 当前选中屏幕尺寸 */
-    currentScreen?: string;
+    currentScreen?: ScreenSize;
     /** 组件库数据 */
     componentData?: ComponentGroup[];
     /** 高级表单组件 */
@@ -40,8 +41,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     httpRequest?: any;
 }>>> & Readonly<{
     onUpdateItems?: ((result: UpdateItemsResult) => any) | undefined;
-    onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
     "onUpdate:currentFormItemId"?: ((formItemId?: string | number | symbol | undefined) => any) | undefined;
+    onOpenTableTool?: ((formItemId: string, el: HTMLElement) => any) | undefined;
     onUpdateFormItems?: ((items: ProFormItemProps[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

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

@@ -1,19 +1,20 @@
-import { defineComponent, ref, reactive, watch, openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, mergeProps, createSlots, withCtx, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps, unref, createCommentVNode } from "vue";
+import { defineComponent, ref, reactive, watch, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, resolveDynamicComponent, mergeProps, createSlots, withCtx, createVNode, renderList, renderSlot, normalizeProps, guardReactiveProps, unref } from "vue";
 import { ElEmpty } from "element-plus";
-import { eachTree } from "../../utils/core";
+import { eachTree } from "../../utils/common";
 import { mergeValue, getFormInitValue, setValue } from "../../ele-pro-form/util";
 import EleProForm from "../../ele-pro-form/index";
 import { generateAddChildData, generateCopyItemData } from "./build-util";
 import ComponentName from "./component-name";
 import BuilderTools from "./builder-tools";
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "BodyForm" },
   __name: "body-form",
   props: {
     formProps: {},
     currentFormItemId: {},
     currentScreen: {},
     componentData: {},
-    proFormComponent: {},
+    proFormComponent: { type: [String, Object, Function] },
     itemTypeData: {},
     httpRequest: {}
   },
@@ -104,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
         mergeValue(
           formData,
-          getFormInitValue((_a = props.formProps) == null ? void 0 : _a.items, props.itemTypeData),
+          getFormInitValue((_a = props.formProps) == null ? void 0 : _a.items, props.itemTypeData, true),
           cachebuilderFormData
         );
       },
@@ -126,10 +127,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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,
+          screenSize: _ctx.currentScreen,
           footer: false,
           validateOnRuleChange: false,
           scrollToError: false,
@@ -168,7 +168,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             };
           })
-        ]), 1040, ["model", "searchExpand", "activeItemKey", "itemTypeData", "httpRequest"])),
+        ]), 1040, ["model", "activeItemKey", "screenSize", "itemTypeData", "httpRequest"])),
         !_ctx.formProps || !_ctx.formProps.items || !_ctx.formProps.items.length ? (openBlock(), createBlock(unref(ElEmpty), {
           key: 0,
           imageSize: 80,

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

@@ -1,25 +1,30 @@
 import { UserComponent } from '../../ele-app/types';
-import { ProFormItemTypeData } from '../../ele-pro-form/types';
-import { TemplateFormConfig, HeaderRightToolName } from '../types';
+import { EleProFormProps } from '../../ele-app/plus';
+import { ProFormItemTypeData, ScreenSize } from '../../ele-pro-form/types';
+import { HeaderRightToolName, ComponentGroup } from '../types';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & {
     headerTools?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 当前选中屏幕尺寸 */
-    currentScreen?: string;
+    currentScreen?: ScreenSize;
     /** 是否禁用撤销 */
     undoDisabled?: boolean;
     /** 是否禁用恢复 */
     redoDisabled?: boolean;
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 顶栏右侧操作按钮顺序 */
-    headerTools?: HeaderRightToolName[];
+    headerTools?: boolean | HeaderRightToolName[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
     /** JSON 编辑器组件 */
     jsonEditerComponent?: UserComponent;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
     /** 远程数据源请求工具 */
@@ -30,30 +35,34 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     redo: () => void;
     clear: () => void;
     previewFormSubmit: (data: Record<string, any>) => void;
-    importData: (data: TemplateFormConfig) => void;
+    importData: (data: EleProFormProps) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     /** 当前选中屏幕尺寸 */
-    currentScreen?: string;
+    currentScreen?: ScreenSize;
     /** 是否禁用撤销 */
     undoDisabled?: boolean;
     /** 是否禁用恢复 */
     redoDisabled?: boolean;
     /** 表单属性 */
-    formProps?: TemplateFormConfig;
+    formProps?: EleProFormProps;
     /** 顶栏右侧操作按钮顺序 */
-    headerTools?: HeaderRightToolName[];
+    headerTools?: boolean | HeaderRightToolName[];
     /** 高级表单组件 */
     proFormComponent?: UserComponent;
     /** JSON 编辑器组件 */
     jsonEditerComponent?: UserComponent;
+    /** 代码查看器组件 */
+    codeViewerComponent?: UserComponent;
+    /** 组件库数据 */
+    componentData?: ComponentGroup[];
     /** 高级表单组件类型数据 */
     itemTypeData?: ProFormItemTypeData[];
     /** 远程数据源请求工具 */
     httpRequest?: any;
 }>>> & Readonly<{
     onClear?: (() => any) | undefined;
+    onImportData?: ((data: EleProFormProps) => any) | undefined;
     onPreviewFormSubmit?: ((data: Record<string, any>) => any) | undefined;
-    onImportData?: ((data: TemplateFormConfig) => any) | undefined;
     "onUpdate:currentScreen"?: ((size?: string | undefined) => any) | undefined;
     onUndo?: (() => any) | undefined;
     onRedo?: (() => any) | undefined;