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

package/es/ele-pro-form/components/item-type-data.js

@@ -1,3 +1,4 @@
+import { markRaw } from "vue";
 import { ElDivider, ElButton, ElImage, ElCollapse, ElCollapseItem, ElCarousel, ElCarouselItem, ElDescriptions, ElDescriptionsItem, ElRow, ElCol, ElInput, ElDatePicker, ElTimePicker, ElTimeSelect, ElSwitch, ElInputNumber, ElRate, ElSlider, ElColorPicker } from "element-plus";
 import EleIcon from "../../ele-icon/index";
 import EleText from "../../ele-text/index";
@@ -23,21 +24,21 @@ import EleAutocomplete from "../../ele-autocomplete/index";
 const defaultItemTypeData = [
   {
     type: "label",
-    component: EleText,
+    component: markRaw(EleText),
     isContainer: true,
     sortDisabled: true,
     renderLabelText: true
   },
   {
     type: "divider",
-    component: ElDivider,
+    component: markRaw(ElDivider),
     isContainer: true,
     sortDisabled: true,
     renderLabelText: true
   },
   {
     type: "button",
-    component: ElButton,
+    component: markRaw(ElButton),
     isContainer: true,
     sortDisabled: true,
     renderLabelText: true,
@@ -47,25 +48,25 @@ const defaultItemTypeData = [
   },
   {
     type: "icon",
-    component: EleIcon,
+    component: markRaw(EleIcon),
     isContainer: true,
     sortDisabled: true
   },
   {
     type: "image",
-    component: ElImage,
+    component: markRaw(ElImage),
     isContainer: true,
     sortDisabled: true
   },
   {
     type: "alert",
-    component: EleAlert,
+    component: markRaw(EleAlert),
     isContainer: true,
     sortDisabled: true
   },
   {
     type: "steps",
-    component: EleSteps,
+    component: markRaw(EleSteps),
     isContainer: true,
     sortDisabled: true,
     defaultProps: ({ modelValue }) => ({
@@ -74,13 +75,13 @@ const defaultItemTypeData = [
   },
   {
     type: "proTable",
+    component: markRaw(EleProTable),
     isContainer: true,
-    sortDisabled: true,
-    component: EleProTable
+    sortDisabled: true
   },
   {
     type: "card",
-    component: EleCard,
+    component: markRaw(EleCard),
     isContainer: true,
     defaultProps: () => ({
       bordered: true
@@ -88,7 +89,7 @@ const defaultItemTypeData = [
   },
   {
     type: "tabs",
-    component: EleTabs,
+    component: markRaw(EleTabs),
     isContainer: true,
     defaultProps: ({ item, modelValue }) => {
       var _a, _b;
@@ -127,7 +128,7 @@ const defaultItemTypeData = [
   },
   {
     type: "table",
-    component: EleTable,
+    component: markRaw(EleTable),
     isContainer: true,
     sortDisabled: true
   },
@@ -145,7 +146,7 @@ const defaultItemTypeData = [
   },
   {
     type: "collapse",
-    component: ElCollapse,
+    component: markRaw(ElCollapse),
     isContainer: true,
     sortDisabled: true,
     defaultProps: ({ item, modelValue }) => {
@@ -160,49 +161,49 @@ const defaultItemTypeData = [
   },
   {
     type: "collapseItem",
-    component: ElCollapseItem,
+    component: markRaw(ElCollapseItem),
     isContainer: true,
     containerSelectable: true
   },
   {
     type: "carousel",
-    component: ElCarousel,
+    component: markRaw(ElCarousel),
     isContainer: true,
     sortDisabled: true
   },
   {
     type: "carouselItem",
-    component: ElCarouselItem,
+    component: markRaw(ElCarouselItem),
     isContainer: true,
     containerSelectable: true
   },
   {
     type: "descriptions",
-    component: ElDescriptions,
+    component: markRaw(ElDescriptions),
     isContainer: true,
     sortDisabled: true
   },
   {
     type: "descriptionsItem",
-    component: ElDescriptionsItem,
+    component: markRaw(ElDescriptionsItem),
     isContainer: true,
     containerSelectable: true
   },
   {
     type: "row",
-    component: ElRow,
+    component: markRaw(ElRow),
     isContainer: true,
     sortDisabled: true
   },
   {
     type: "col",
-    component: ElCol,
+    component: markRaw(ElCol),
     isContainer: true,
     containerSelectable: true
   },
   {
     type: "adminLayout",
-    component: EleAdminLayout,
+    component: markRaw(EleAdminLayout),
     isContainer: true
   },
   {
@@ -214,7 +215,7 @@ const defaultItemTypeData = [
   },
   {
     type: "input",
-    component: ElInput,
+    component: markRaw(ElInput),
     defaultProps: ({ item }) => ({
       clearable: true,
       placeholder: `请输入${item.label ?? ""}`
@@ -227,7 +228,7 @@ const defaultItemTypeData = [
   },
   {
     type: "textarea",
-    component: ElInput,
+    component: markRaw(ElInput),
     defaultProps: ({ item }) => ({
       rows: 4,
       placeholder: `请输入${item.label ?? ""}`
@@ -241,7 +242,7 @@ const defaultItemTypeData = [
   },
   {
     type: "select",
-    component: EleSelect,
+    component: markRaw(EleSelect),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
@@ -254,7 +255,7 @@ const defaultItemTypeData = [
   },
   {
     type: "multipleSelect",
-    component: EleSelect,
+    component: markRaw(EleSelect),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
@@ -268,7 +269,7 @@ const defaultItemTypeData = [
   },
   {
     type: "radio",
-    component: EleRadioGroup,
+    component: markRaw(EleRadioGroup),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
@@ -276,7 +277,7 @@ const defaultItemTypeData = [
   },
   {
     type: "radioButton",
-    component: EleRadioGroup,
+    component: markRaw(EleRadioGroup),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       type: "button",
       modelValue,
@@ -285,7 +286,7 @@ const defaultItemTypeData = [
   },
   {
     type: "checkbox",
-    component: EleCheckboxGroup,
+    component: markRaw(EleCheckboxGroup),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
@@ -293,7 +294,7 @@ const defaultItemTypeData = [
   },
   {
     type: "checkboxButton",
-    component: EleCheckboxGroup,
+    component: markRaw(EleCheckboxGroup),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       type: "button",
       modelValue,
@@ -302,7 +303,7 @@ const defaultItemTypeData = [
   },
   {
     type: "date",
-    component: ElDatePicker,
+    component: markRaw(ElDatePicker),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       valueFormat: "YYYY-MM-DD",
@@ -315,7 +316,7 @@ const defaultItemTypeData = [
   },
   {
     type: "datetime",
-    component: ElDatePicker,
+    component: markRaw(ElDatePicker),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       valueFormat: "YYYY-MM-DD HH:mm:ss",
@@ -329,7 +330,7 @@ const defaultItemTypeData = [
   },
   {
     type: "daterange",
-    component: ElDatePicker,
+    component: markRaw(ElDatePicker),
     defaultProps: () => ({
       class: "ele-fluid",
       valueFormat: "YYYY-MM-DD",
@@ -346,7 +347,7 @@ const defaultItemTypeData = [
   },
   {
     type: "datetimerange",
-    component: ElDatePicker,
+    component: markRaw(ElDatePicker),
     defaultProps: () => ({
       class: "ele-fluid",
       valueFormat: "YYYY-MM-DD HH:mm:ss",
@@ -363,7 +364,7 @@ const defaultItemTypeData = [
   },
   {
     type: "time",
-    component: ElTimePicker,
+    component: markRaw(ElTimePicker),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       valueFormat: "HH:mm:ss",
@@ -376,7 +377,7 @@ const defaultItemTypeData = [
   },
   {
     type: "timerange",
-    component: ElTimePicker,
+    component: markRaw(ElTimePicker),
     defaultProps: () => ({
       class: "ele-fluid",
       valueFormat: "HH:mm:ss",
@@ -392,7 +393,7 @@ const defaultItemTypeData = [
   },
   {
     type: "timeSelect",
-    component: ElTimeSelect,
+    component: markRaw(ElTimeSelect),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       placeholder: `请选择${item.label ?? ""}`
@@ -404,7 +405,7 @@ const defaultItemTypeData = [
   },
   {
     type: "switch",
-    component: ElSwitch,
+    component: markRaw(ElSwitch),
     defaultProps: () => ({
       activeValue: 1,
       inactiveValue: 0
@@ -416,7 +417,7 @@ const defaultItemTypeData = [
   },
   {
     type: "inputNumber",
-    component: ElInputNumber,
+    component: markRaw(ElInputNumber),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       controlsPosition: "right",
@@ -429,7 +430,7 @@ const defaultItemTypeData = [
   },
   {
     type: "autocomplete",
-    component: EleAutocomplete,
+    component: markRaw(EleAutocomplete),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       placeholder: `请输入${item.label ?? ""}`
@@ -441,7 +442,7 @@ const defaultItemTypeData = [
   },
   {
     type: "cascader",
-    component: EleCascader,
+    component: markRaw(EleCascader),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
@@ -454,7 +455,7 @@ const defaultItemTypeData = [
   },
   {
     type: "multipleCascader",
-    component: EleCascader,
+    component: markRaw(EleCascader),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
@@ -468,7 +469,7 @@ const defaultItemTypeData = [
   },
   {
     type: "rate",
-    component: ElRate,
+    component: markRaw(ElRate),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
@@ -476,7 +477,7 @@ const defaultItemTypeData = [
   },
   {
     type: "slider",
-    component: ElSlider,
+    component: markRaw(ElSlider),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
@@ -484,7 +485,7 @@ const defaultItemTypeData = [
   },
   {
     type: "sliderRange",
-    component: ElSlider,
+    component: markRaw(ElSlider),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       range: true,
       modelValue,
@@ -493,7 +494,7 @@ const defaultItemTypeData = [
   },
   {
     type: "mention",
-    component: EleMention,
+    component: markRaw(EleMention),
     defaultProps: ({ item }) => ({
       clearable: true,
       placeholder: `请输入${item.label ?? ""}`
@@ -505,7 +506,7 @@ const defaultItemTypeData = [
   },
   {
     type: "colorPicker",
-    component: ElColorPicker,
+    component: markRaw(ElColorPicker),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
@@ -513,7 +514,7 @@ const defaultItemTypeData = [
   },
   {
     type: "transfer",
-    component: EleTransfer,
+    component: markRaw(EleTransfer),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
@@ -521,7 +522,7 @@ const defaultItemTypeData = [
   },
   {
     type: "treeSelect",
-    component: EleSelectTree,
+    component: markRaw(EleSelectTree),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
@@ -534,7 +535,7 @@ const defaultItemTypeData = [
   },
   {
     type: "treeMultipleSelect",
-    component: EleSelectTree,
+    component: markRaw(EleSelectTree),
     defaultProps: ({ item }) => ({
       class: "ele-fluid",
       clearable: true,
@@ -549,7 +550,7 @@ const defaultItemTypeData = [
   },
   {
     type: "virtualTreeSelect",
-    component: EleTreeSelect,
+    component: markRaw(EleTreeSelect),
     defaultProps: ({ item }) => ({
       clearable: true,
       placeholder: `请选择${item.label ?? ""}`
@@ -561,7 +562,7 @@ const defaultItemTypeData = [
   },
   {
     type: "virtualTreeMultipleSelect",
-    component: EleTreeSelect,
+    component: markRaw(EleTreeSelect),
     defaultProps: ({ item }) => ({
       clearable: true,
       maxTagCount: 1,
@@ -575,7 +576,7 @@ const defaultItemTypeData = [
   },
   {
     type: "tableSelect",
-    component: EleTableSelect,
+    component: markRaw(EleTableSelect),
     defaultProps: ({ item }) => ({
       clearable: true,
       placeholder: `请选择${item.label ?? ""}`
@@ -587,7 +588,7 @@ const defaultItemTypeData = [
   },
   {
     type: "tableMultipleSelect",
-    component: EleTableSelect,
+    component: markRaw(EleTableSelect),
     defaultProps: ({ item }) => ({
       clearable: true,
       placeholder: `请选择${item.label ?? ""}`
@@ -600,7 +601,7 @@ const defaultItemTypeData = [
   },
   {
     type: "checkCard",
-    component: EleCheckCard,
+    component: markRaw(EleCheckCard),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       modelValue,
       "onUpdate:modelValue": updateModelValue
@@ -608,7 +609,7 @@ const defaultItemTypeData = [
   },
   {
     type: "multipleCheckCard",
-    component: EleCheckCard,
+    component: markRaw(EleCheckCard),
     reservedProps: ({ modelValue, updateModelValue }) => ({
       multiple: true,
       modelValue,
@@ -617,7 +618,7 @@ const defaultItemTypeData = [
   },
   {
     type: "editTag",
-    component: EleEditTag,
+    component: markRaw(EleEditTag),
     defaultProps: () => ({
       type: "info",
       style: { marginTop: "4px" },
@@ -632,7 +633,7 @@ const defaultItemTypeData = [
   },
   {
     type: "text",
-    component: EleText,
+    component: markRaw(EleText),
     reservedSlots: ({ modelValue }) => ({
       default: () => modelValue
     })

package/es/ele-pro-form/components/pro-form-footer.d.ts

@@ -10,6 +10,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     footerProps: PropType<ElFormItemProps>;
     /** 底栏 ElFormItem 插槽 */
     footerSlots: PropType<Record<string, string>>;
+    /** 自动计算底栏栅格份数 */
+    autoFooterCol: BooleanConstructor;
     /** 底栏样式 */
     footerStyle: PropType<CSSProperties>;
     /** 提交按钮文本 */
@@ -39,6 +41,8 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     footerProps: PropType<ElFormItemProps>;
     /** 底栏 ElFormItem 插槽 */
     footerSlots: PropType<Record<string, string>>;
+    /** 自动计算底栏栅格份数 */
+    autoFooterCol: BooleanConstructor;
     /** 底栏样式 */
     footerStyle: PropType<CSSProperties>;
     /** 提交按钮文本 */
@@ -64,6 +68,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onSubmit?: (() => any) | undefined;
     onUpdateSearchExpand?: ((_expand: boolean) => any) | undefined;
 }>, {
+    autoFooterCol: boolean;
     showSearchExpand: boolean;
     searchExpand: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/ele-pro-form/components/pro-form-footer.js

@@ -1,6 +1,7 @@
-import { defineComponent, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createVNode, createTextVNode, toDisplayString, createElementBlock, Fragment, createCommentVNode, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, normalizeStyle, renderSlot, createCommentVNode, createVNode, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps } from "vue";
 import { ElFormItem, ElButton, ElLink, ElIcon } from "element-plus";
-import { ArrowUp, ArrowDown } from "../../icons";
+import { ArrowUp, ArrowDown } from "../../icons/index";
+import { getSlotsMap } from "../../utils/common";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "ProFormFooter" },
   __name: "pro-form-footer",
@@ -9,6 +10,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     footerProps: Object,
     /** 底栏 ElFormItem 插槽 */
     footerSlots: Object,
+    /** 自动计算底栏栅格份数 */
+    autoFooterCol: Boolean,
     /** 底栏样式 */
     footerStyle: Object,
     /** 提交按钮文本 */
@@ -50,17 +53,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createBlock(unref(ElFormItem), mergeProps(__props.footerProps || {}, {
+      return openBlock(), createBlock(unref(ElFormItem), mergeProps({
+        class: [
+          "ele-pro-form-footer",
+          { "is-search-expand": __props.autoFooterCol && __props.searchExpand }
+        ]
+      }, __props.footerProps || {}, {
         labelWidth: typeof ((_a = __props.footerProps) == null ? void 0 : _a.labelWidth) === "number" ? `${__props.footerProps.labelWidth}px` : (_b = __props.footerProps) == null ? void 0 : _b.labelWidth
       }), createSlots({
         default: withCtx(() => [
           createElementVNode("div", {
-            style: normalizeStyle({
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              ...__props.footerStyle || {}
-            })
+            class: "ele-pro-form-footer-body",
+            style: normalizeStyle(__props.footerStyle)
           }, [
             renderSlot(_ctx.$slots, "footer", {}, () => [
               createVNode(unref(ElButton), mergeProps({ type: "primary" }, __props.submitButtonProps || {}, { onClick: handleSubmit }), {
@@ -79,7 +83,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             __props.showSearchExpand ? (openBlock(), createBlock(unref(ElLink), mergeProps({
               key: 0,
               type: "primary",
-              underline: false,
+              underline: "never",
               style: { "margin-left": "12px" }
             }, __props.searchExpandButtonProps || {}, { onClick: toggleSearchExpand }), {
               default: withCtx(() => [
@@ -108,20 +112,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         _: 2
       }, [
-        renderList(Object.keys(__props.footerSlots || {}).filter(
-          (k) => !ownSlots.includes(k) && !!(__props.footerSlots && __props.footerSlots[k] && _ctx.$slots[__props.footerSlots[k]])
-        ), (name) => {
+        renderList(unref(getSlotsMap)(
+          _ctx.$slots,
+          __props.footerSlots,
+          ["default"],
+          ownSlots
+        ), (slotName, name) => {
           return {
             name,
-            fn: withCtx((slotProps) => {
-              var _a2;
-              return [
-                renderSlot(_ctx.$slots, (_a2 = __props.footerSlots) == null ? void 0 : _a2[name], normalizeProps(guardReactiveProps(slotProps || {})))
-              ];
-            })
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(slotProps || {})))
+            ])
           };
         })
-      ]), 1040, ["labelWidth"]);
+      ]), 1040, ["class", "labelWidth"]);
     };
   }
 });

package/es/ele-pro-form/components/render-core.d.ts

@@ -0,0 +1,62 @@
+import { ElColProps } from '../../ele-app/el';
+import { ProFormItemProps, ScreenSize } from '../types';
+
+/**
+ * 编辑模式拖拽排序分组名称
+ */
+export declare const sortableGroupName = "ProFormBuilderBodySortGroup";
+/**
+ * 代码字符串前缀
+ */
+export declare const codeStringPrefix = "/*__PRO_FORM__*/";
+/**
+ * 获取栅格响应式对象属性
+ * @param prop 栅格响应式属性
+ */
+export declare function getColObjectProp(prop?: number | Record<string, number>): Record<string, number>;
+/**
+ * 获取屏幕尺寸对应的栅格属性
+ * @param screenSize 屏幕尺寸
+ * @param gridColProps 父级栅格布局属性
+ * @param itemColProps 栅格属性
+ */
+export declare function getScreenSizeColProps(screenSize?: ScreenSize, gridColProps?: ElColProps, itemColProps?: ElColProps): ElColProps;
+/**
+ * 获取搜索表单底栏栅格默认属性
+ * @param grid 表单栅格布局属性
+ * @param itemsLength 表单项数量
+ */
+export declare function computeContentExtraCol(grid?: ElColProps, itemsLength?: number): ElColProps;
+/**
+ * 执行代码字符串
+ * @param code 代码字符串
+ * @param form 表单数据
+ * @param items 全部表单项
+ * @param searchExpand 搜索表单折叠展开状态
+ * @param httpRequest 远程数据源请求工具
+ * @param getProFormRefs 获取表单组件的组件引用数据的方法
+ */
+export declare function getCodeResult(code: string, form: Record<string, any> | undefined, items: ProFormItemProps[], searchExpand?: boolean, httpRequest?: any, getProFormRefs?: () => Record<string, any>): any;
+/**
+ * 判断表单项是否展示
+ * @param item 表单项
+ * @param form 表单数据
+ * @param items 表单项数据
+ * @param searchExpand 搜索表单展开状态
+ * @param editable 是否是编辑模式
+ */
+export declare function isShowItem(item: ProFormItemProps, form: Record<string, any> | undefined, items: ProFormItemProps[], searchExpand?: boolean, editable?: boolean): any;
+/**
+ * 解析代码字符串
+ * @param code 值
+ * @param form 表单数据
+ * @param items 全部表单项
+ * @param searchExpand 搜索表单折叠展开状态
+ * @param httpRequest 远程数据源请求工具
+ * @param getProFormRefs 获取表单组件的组件引用数据的方法
+ * @param getAndCacheCode 获取并缓存代码解析结果方法
+ */
+export declare function translateJsCode(code: any, form: Record<string, any> | undefined, items: ProFormItemProps[], searchExpand?: boolean, httpRequest?: any, getProFormRefs?: () => Record<string, any>, getAndCacheCode?: (code: string, codeResult: any) => any): {
+    result: any;
+    isCode: boolean;
+};