ele-admin-plus 1.4.1-beta.1 → 1.4.1

package/es/ele-icon-select/props.d.ts

@@ -3,7 +3,7 @@ import { StyleValue } from '../ele-app/types';
 import { ElInputProps, ElEmptyProps } from '../ele-app/el';
 import { EleTooltipProps } from '../ele-app/plus';
 import { PopperType, PopperProps } from '../ele-basic-select/types';
-import { IconItem } from './types';
+import { IconItem, ItemTooltip } from './types';
 
 /**
  * 属性
@@ -25,12 +25,37 @@ export declare const iconSelectProps: {
     automaticDropdown: BooleanConstructor;
     /** 是否可以筛选 */
     filterable: PropType<boolean | "popper">;
-    /** 是否将下拉框插入 body */
+    /** 自定义样式 */
+    selectStyle: PropType<StyleValue>;
+    /** 自定义输入框样式 */
+    inputStyle: PropType<StyleValue>;
+    /** 自定义多选标签容器样式 */
+    selectTagsStyle: PropType<StyleValue>;
+    /** 下拉组件类名 */
+    popperClass: StringConstructor;
+    /** 下拉组件宽度 */
+    popperWidth: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    /** 下拉组件高度 */
+    popperHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    /** 下拉组件类型 */
+    popperType: {
+        type: PropType<PopperType>;
+        default: string;
+    };
+    /** 下拉组件属性 */
+    popperProps: PropType<PopperProps>;
+    /** 是否将下拉组件插入 body */
     teleported: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 始终渲染下拉框 */
+    /** 始终渲染下拉组件 */
     persistent: {
         type: BooleanConstructor;
         default: boolean;
@@ -47,35 +72,19 @@ export declare const iconSelectProps: {
     };
     /** popper.js 参数 */
     popperOptions: PropType<EleTooltipProps["popperOptions"]>;
-    /** 下拉框类名 */
-    popperClass: StringConstructor;
-    /** 下拉框宽度 */
-    popperWidth: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    /** 下拉框高度 */
-    popperHeight: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    /** 自定义样式 */
-    selectStyle: PropType<StyleValue>;
-    /** 自定义样式 */
-    inputStyle: PropType<StyleValue>;
-    /** 自定义多选标签容器样式 */
-    selectTagsStyle: PropType<StyleValue>;
-    /** 顶部选项卡只有一个时隐藏 */
-    hideOnSingleTab: BooleanConstructor;
-    /** 空组件属性 */
-    emptyProps: PropType<ElEmptyProps>;
+    /** 搜索框提示文本 */
+    filterPlaceholder: StringConstructor;
     /** 是否显示文本提示 */
     tooltip: {
-        type: BooleanConstructor;
+        type: PropType<ItemTooltip>;
         default: boolean;
     };
     /** 提示属性 */
     tooltipProps: PropType<EleTooltipProps>;
+    /** 空组件属性 */
+    emptyProps: PropType<ElEmptyProps>;
+    /** 顶部选项卡只有一个时隐藏 */
+    hideOnSingleTab: BooleanConstructor;
     /** 头部样式 */
     headerStyle: PropType<StyleValue>;
     /** 选项卡样式 */
@@ -90,15 +99,6 @@ export declare const iconSelectProps: {
     gridStyle: PropType<StyleValue>;
     /** 图标样式 */
     itemStyle: PropType<StyleValue>;
-    /** 搜索框提示文本 */
-    filterPlaceholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** 下拉类型 */
-    popperType: PropType<PopperType>;
-    /** 下拉组件属性 */
-    popperProps: PropType<PopperProps>;
     /** 是否开启响应式 */
     responsive: {
         type: BooleanConstructor;

package/es/ele-icon-select/props.js

@@ -15,12 +15,37 @@ const iconSelectProps = {
   automaticDropdown: Boolean,
   /** 是否可以筛选 */
   filterable: [Boolean, String],
-  /** 是否将下拉框插入 body */
+  /** 自定义样式 */
+  selectStyle: Object,
+  /** 自定义输入框样式 */
+  inputStyle: Object,
+  /** 自定义多选标签容器样式 */
+  selectTagsStyle: Object,
+  /** 下拉组件类名 */
+  popperClass: String,
+  /** 下拉组件宽度 */
+  popperWidth: {
+    type: [Number, String],
+    default: 460
+  },
+  /** 下拉组件高度 */
+  popperHeight: {
+    type: [Number, String],
+    default: 320
+  },
+  /** 下拉组件类型 */
+  popperType: {
+    type: String,
+    default: "popper"
+  },
+  /** 下拉组件属性 */
+  popperProps: Object,
+  /** 是否将下拉组件插入 body */
   teleported: {
     type: Boolean,
     default: true
   },
-  /** 始终渲染下拉框 */
+  /** 始终渲染下拉组件 */
   persistent: {
     type: Boolean,
     default: true
@@ -37,35 +62,19 @@ const iconSelectProps = {
   },
   /** popper.js 参数 */
   popperOptions: Object,
-  /** 下拉框类名 */
-  popperClass: String,
-  /** 下拉框宽度 */
-  popperWidth: {
-    type: [Number, String],
-    default: 414
-  },
-  /** 下拉框高度 */
-  popperHeight: {
-    type: [Number, String],
-    default: 260
-  },
-  /** 自定义样式 */
-  selectStyle: Object,
-  /** 自定义样式 */
-  inputStyle: Object,
-  /** 自定义多选标签容器样式 */
-  selectTagsStyle: Object,
-  /** 顶部选项卡只有一个时隐藏 */
-  hideOnSingleTab: Boolean,
-  /** 空组件属性 */
-  emptyProps: Object,
+  /** 搜索框提示文本 */
+  filterPlaceholder: String,
   /** 是否显示文本提示 */
   tooltip: {
-    type: Boolean,
+    type: [Boolean, String],
     default: true
   },
   /** 提示属性 */
   tooltipProps: Object,
+  /** 空组件属性 */
+  emptyProps: Object,
+  /** 顶部选项卡只有一个时隐藏 */
+  hideOnSingleTab: Boolean,
   /** 头部样式 */
   headerStyle: Object,
   /** 选项卡样式 */
@@ -80,15 +89,6 @@ const iconSelectProps = {
   gridStyle: Object,
   /** 图标样式 */
   itemStyle: Object,
-  /** 搜索框提示文本 */
-  filterPlaceholder: {
-    type: String,
-    default: ""
-  },
-  /** 下拉类型 */
-  popperType: String,
-  /** 下拉组件属性 */
-  popperProps: Object,
   /** 是否开启响应式 */
   responsive: {
     type: Boolean,

package/es/ele-icon-select/style/css-var.scss

@@ -2,7 +2,7 @@
 
 /* 图标选择主题变量 */
 @mixin set-icon-var($var) {
-  .ele-icon-select {
+  .ele-icon-select-popper {
     @include set-ele-var('icon', $var);
   }
 }

package/es/ele-icon-select/style/index.scss

@@ -4,19 +4,32 @@
 
 @include set-icon-var($ele);
 
+/* 选择框 */
 .ele-select.is-icon-select .el-input__prefix-inner {
   color: elVar('input', 'text-color');
 }
 
-.ele-icon-select-popper.is-responsive {
+/* 下拉面板 */
+.ele-icon-select-popper.is-icon-select-responsive {
   max-width: calc(100vw - 32px);
 }
 
-.ele-icon-select {
+.ele-icon-select-popper.is-icon-select-default,
+.ele-icon-select-popper > .ele-popover-body,
+.ele-icon-select-popper > .el-dialog__body > .ele-modal-body,
+.ele-icon-select-popper > .el-drawer__body > .ele-drawer-body {
   display: flex;
   flex-direction: column;
+  padding: 0;
 }
 
+.ele-icon-select-main {
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+/* 顶栏 */
 .ele-icon-select-header {
   display: flex;
   align-items: center;
@@ -91,6 +104,7 @@
   }
 }
 
+/* 顶栏搜索框 */
 .ele-icon-select-search {
   width: 100%;
   flex-shrink: 0;
@@ -107,20 +121,14 @@
   padding-left: 12px;
 }
 
-.ele-icon-select-main {
-  flex: 1;
-  display: flex;
-  overflow: auto;
-}
-
+/* 左侧菜单 */
 .ele-icon-select-menus {
-  height: 100%;
-  width: eleVar('icon', 'menus-width');
   flex-shrink: 0;
-  overflow: auto;
+  width: eleVar('icon', 'menus-width');
   padding: eleVar('icon', 'menus-padding');
   box-shadow: -0.8px 0 0 elVar('border-color', 'light') inset;
   box-sizing: border-box;
+  overflow: auto;
 
   .ele-icon-select-menu {
     height: eleVar('icon', 'menu-height');
@@ -184,6 +192,7 @@
   }
 }
 
+/* 图标列表 */
 .ele-icon-select-body {
   flex: 1;
   height: 100%;
@@ -198,11 +207,12 @@
 .ele-icon-select-grid {
   box-sizing: border-box;
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
   grid-gap: 8px;
 
   .ele-icon-select-item {
-    height: 48px;
+    height: eleVar('icon', 'item-height');
+    padding: eleVar('icon', 'item-padding');
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -211,11 +221,7 @@
     font-size: eleVar('icon', 'font-size');
     border: eleVar('icon', 'border');
     border-radius: eleVar('icon', 'radius');
-    transition: (
-      color $transition-base,
-      background-color $transition-base,
-      border-color $transition-base
-    );
+    transition: (color $transition-base, background-color $transition-base);
     box-sizing: border-box;
     overflow: hidden;
     cursor: pointer;
@@ -232,4 +238,30 @@
       border: eleVar('icon', 'active-border');
     }
   }
+
+  .ele-icon-select-item-name {
+    max-width: 100%;
+    font-size: eleVar('icon', 'name-font-size');
+    margin-top: eleVar('icon', 'name-margin-top');
+    white-space: nowrap;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &.is-loose {
+    grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
+
+    .ele-icon-select-item {
+      font-size: eleVar('icon', 'loose-font-size');
+      height: eleVar('icon', 'loose-item-height');
+      padding: eleVar('icon', 'loose-item-padding');
+    }
+  }
+}
+
+/* 抽屉模式 */
+.ele-icon-select-popper > .el-drawer__body > .ele-drawer-body {
+  height: 100%;
+  overflow: auto;
 }

package/es/ele-icon-select/types.d.ts

@@ -14,3 +14,16 @@ export interface IconItem {
     icons?: string[];
   }[];
 }
+
+/**
+ * 图标文字提示
+ */
+export type ItemTooltip = boolean | 'static';
+
+/**
+ * 国际化
+ */
+export interface IconSelectLocale {
+  title: string;
+  searchPlaceholder: string;
+}

package/es/ele-map-picker/index.d.ts

@@ -1,5 +1,5 @@
 import { EleMapPickerViewInstance } from '../ele-app/plusx';
-import { PoiItem, MapLocale } from './types';
+import { PoiItem } from './types';
 
 declare function __VLS_template(): Partial<Record<string, (_: any) => any>>;
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -9,7 +9,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: null;
     };
-    locale: import('vue').PropType<Partial<MapLocale>>;
+    locale: import('vue').PropType<Partial<import('./types').MapLocale>>;
     keywordMode: BooleanConstructor;
     headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     height: {
@@ -92,7 +92,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: null;
     };
-    locale: import('vue').PropType<Partial<MapLocale>>;
+    locale: import('vue').PropType<Partial<import('./types').MapLocale>>;
     keywordMode: BooleanConstructor;
     headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
     height: {

package/es/ele-modal/index.d.ts

@@ -23,6 +23,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    bodyHeight: (StringConstructor | NumberConstructor)[];
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
     position: import('vue').PropType<import('./types').Position>;
@@ -191,11 +192,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     close: () => void;
     open: () => void;
     "update:modelValue": (value: boolean) => void;
-    "update:fullscreen": (_fullscreen: boolean) => void;
     opened: () => void;
     closed: () => void;
     openAutoFocus: () => void;
     closeAutoFocus: () => void;
+    "update:fullscreen": (_fullscreen: boolean) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     appendToBody: {
         type: BooleanConstructor;
@@ -205,6 +206,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    bodyHeight: (StringConstructor | NumberConstructor)[];
     moveOut: import('vue').PropType<import('./types').MoveOut>;
     resizable: import('vue').PropType<import('./types').Resizable>;
     position: import('vue').PropType<import('./types').Position>;
@@ -369,11 +371,11 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
     onCloseAutoFocus?: (() => any) | undefined;
+    "onUpdate:fullscreen"?: ((_fullscreen: boolean) => any) | undefined;
 }>, {
     form: boolean;
     title: string;

package/es/ele-modal/index.js

@@ -21,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isActivated = ref(true);
     const dialogClass = computed(() => {
       const classes = [wrapperClass];
-      if (props.responsive ?? isResponsive.value ?? true) {
+      if (isResponsive.value) {
         classes.push("ele-modal-responsive");
       }
       if (props.alignCenter || props.position === "center") {
@@ -284,15 +284,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           default: withCtx(() => [
             createVNode(unref(ReceiverView), {
+              wrapHeight: _ctx.bodyHeight,
               wrapPosition: false,
-              class: normalizeClass(["ele-modal-body", { "is-form": _ctx.form }, _ctx.modalBodyClass]),
+              class: normalizeClass([
+                "ele-modal-body",
+                { "is-fluid-body": _ctx.bodyHeight != null },
+                { "is-form": _ctx.form },
+                _ctx.modalBodyClass
+              ]),
               style: normalizeStyle(_ctx.bodyStyle)
             }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "default")
               ]),
               _: 3
-            }, 8, ["class", "style"])
+            }, 8, ["wrapHeight", "class", "style"])
           ]),
           _: 2
         }, [

package/es/ele-modal/props.d.ts

@@ -15,6 +15,8 @@ export declare const modalProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 弹窗主体高度 */
+    bodyHeight: (NumberConstructor | StringConstructor)[];
     /** 是否可以拖出边界 */
     moveOut: PropType<MoveOut>;
     /** 是否可以拉伸 */

package/es/ele-modal/props.js

@@ -9,6 +9,8 @@ const modalProps = {
     type: Boolean,
     default: true
   },
+  /** 弹窗主体高度 */
+  bodyHeight: [String, Number],
   /** 是否可以拖出边界 */
   moveOut: [Boolean, Array],
   /** 是否可以拉伸 */

package/es/ele-modal/style/index.scss

@@ -39,6 +39,11 @@
       }
     }
   }
+
+  &.dialog-fade-enter-active .el-overlay-dialog *,
+  &.dialog-fade-leave-active .el-overlay-dialog * {
+    pointer-events: none !important;
+  }
 }
 
 /* header */
@@ -59,6 +64,11 @@
   box-sizing: border-box;
 }
 
+.is-show-header-border > .el-dialog__header > .ele-modal-header {
+  padding: eleVar('modal', 'bordered-header-padding');
+  border-bottom: eleVar('modal', 'bordered-header-border');
+}
+
 /* 图标按钮 */
 .ele-modal-tool {
   flex-shrink: 0;
@@ -90,6 +100,12 @@
   padding: eleVar('modal', 'body-padding');
   box-sizing: border-box;
 
+  &.is-fluid-body {
+    max-height: 100%;
+    min-height: 100%;
+    overflow: auto;
+  }
+
   &.is-form {
     padding: eleVar('modal', 'form-body-padding');
   }