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

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

@@ -1,5 +1,6 @@
-import { defineComponent, ref, computed, watch, createBlock, openBlock, createSlots, withCtx, createElementVNode, normalizeStyle, createElementBlock, createCommentVNode, renderSlot, Fragment, renderList, normalizeClass, toDisplayString, createVNode, unref, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, ref, computed, watch, createBlock, openBlock, unref, createSlots, withCtx, createElementBlock, createCommentVNode, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, normalizeClass, toDisplayString, createVNode, normalizeProps, guardReactiveProps } from "vue";
 import { ElInput } from "element-plus";
+import { useLocale } from "../ele-config-provider/receiver";
 import { useResponsive } from "../ele-pro-layout/util";
 import EleBasicSelect from "../ele-basic-select/index";
 import { useFormValidate, valueIsChanged } from "../ele-basic-select/util";
@@ -15,8 +16,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: iconSelectProps,
   emits: iconSelectEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
+    const ownSlots = ["default", "icon", "tabLeftExtra", "tabRightExtra"];
     const props = __props;
     const emit = __emit;
+    const { lang } = useLocale("iconSelect", props);
     const { validateChange } = useFormValidate();
     const isResponsive = useResponsive(props);
     const selectRef = ref(null);
@@ -36,24 +39,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return true;
     });
+    const showFilterInput = computed(() => {
+      if (props.filterable === true && props.popperType !== "popper") {
+        return true;
+      }
+      return props.filterable === "popper";
+    });
     const selectPopperClass = computed(() => {
       const classes = ["ele-icon-select-popper"];
-      if (isResponsive.value) {
-        classes.push("is-responsive");
+      if (props.popperType === "default") {
+        classes.push("is-icon-select-default");
+      }
+      if (props.popperType === "modal" && (tabBar.value || showFilterInput.value || menus.value?.length)) {
+        classes.push("ele-modal-show-header-border");
+      }
+      if (isResponsive.value && props.popperType === "popper") {
+        classes.push("is-icon-select-responsive");
       }
       if (props.popperClass) {
         classes.push(props.popperClass);
       }
       return classes.join(" ");
     });
-    const iconPopperStyle = computed(() => {
-      if (!props.popperHeight) {
-        return;
-      }
-      return {
-        height: typeof props.popperHeight === "number" ? `${props.popperHeight}px` : props.popperHeight
-      };
-    });
     const updatePopover = () => {
       selectRef.value && selectRef.value.updatePopper();
     };
@@ -123,12 +130,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("blur", e);
     };
     const handleSelectFilter = (value) => {
-      var _a;
       if (keywords.value !== value) {
         keywords.value = value;
       }
       initData();
-      if (!((_a = props.data) == null ? void 0 : _a.length) || icons.value.length) {
+      if (!props.data?.length || icons.value.length) {
         return;
       }
       for (let i = 0; i < props.data.length; i++) {
@@ -196,15 +202,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         persistent: _ctx.persistent,
         placement: _ctx.placement,
         transition: _ctx.transition,
-        popperWidth: _ctx.popperWidth,
         popperOptions: _ctx.popperOptions,
-        popperClass: selectPopperClass.value,
         selectClass: "is-icon-select",
         selectStyle: _ctx.selectStyle,
         inputStyle: _ctx.inputStyle,
         selectTagsStyle: _ctx.selectTagsStyle,
+        popperClass: selectPopperClass.value,
+        popperWidth: _ctx.popperWidth,
+        popperHeight: _ctx.popperHeight,
         popperType: _ctx.popperType,
         popperProps: _ctx.popperProps,
+        popperSlots: _ctx.popperSlots,
+        popperTitle: unref(lang).title,
+        responsive: unref(isResponsive),
         selectedLabel: _ctx.modelValue,
         visible: selectVisible.value,
         "onUpdate:visible": updateVisible,
@@ -214,85 +224,89 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         onBlur: handleSelectBlur
       }, createSlots({
         default: withCtx(() => [
-          createElementVNode("div", {
-            class: "ele-icon-select",
-            style: normalizeStyle(iconPopperStyle.value)
+          tabBar.value || showFilterInput.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-icon-select-header",
+            style: normalizeStyle(_ctx.headerStyle)
           }, [
-            tabBar.value || _ctx.filterable === "popper" ? (openBlock(), createElementBlock("div", {
+            renderSlot(_ctx.$slots, "tabLeftExtra"),
+            tabBar.value ? (openBlock(), createElementBlock("div", {
               key: 0,
-              class: "ele-icon-select-header",
-              style: normalizeStyle(_ctx.headerStyle)
+              class: "ele-icon-select-tabs",
+              style: normalizeStyle(_ctx.tabsStyle)
             }, [
-              renderSlot(_ctx.$slots, "tabLeftExtra"),
-              tabBar.value ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: "ele-icon-select-tabs",
-                style: normalizeStyle(_ctx.tabsStyle)
-              }, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (t, i) => {
-                  return openBlock(), createElementBlock("div", {
-                    key: i + "-" + t,
-                    class: normalizeClass(["ele-icon-select-tab", { "is-active": i === tabActive.value }]),
-                    onClick: ($event) => handleTabClick(i)
-                  }, toDisplayString(t), 11, _hoisted_1);
-                }), 128))
-              ], 4)) : createCommentVNode("", true),
-              _ctx.filterable === "popper" ? (openBlock(), createElementBlock("div", {
-                key: 1,
-                class: "ele-icon-select-search",
-                style: normalizeStyle(_ctx.searchStyle)
-              }, [
-                createVNode(unref(ElInput), {
-                  size: "small",
-                  clearable: true,
-                  modelValue: keywords.value,
-                  validateEvent: false,
-                  prefixIcon: unref(SearchOutlined),
-                  placeholder: _ctx.filterPlaceholder,
-                  "onUpdate:modelValue": handleSelectFilter
-                }, null, 8, ["modelValue", "prefixIcon", "placeholder"])
-              ], 4)) : createCommentVNode("", true),
-              renderSlot(_ctx.$slots, "tabRightExtra")
+              (openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (t, i) => {
+                return openBlock(), createElementBlock("div", {
+                  key: `${i}-${t}`,
+                  class: normalizeClass(["ele-icon-select-tab", { "is-active": i === tabActive.value }]),
+                  onClick: ($event) => handleTabClick(i)
+                }, toDisplayString(t), 11, _hoisted_1);
+              }), 128))
             ], 4)) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_2, [
-              menus.value && menus.value.length ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                class: "ele-icon-select-menus",
-                style: normalizeStyle(_ctx.menusStyle)
-              }, [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(menus.value, (m, i) => {
-                  return openBlock(), createElementBlock("div", {
-                    key: i + "-" + m,
-                    class: normalizeClass(["ele-icon-select-menu", { "is-active": i === menuActive.value }]),
-                    onClick: ($event) => handleMenuClick(i)
-                  }, toDisplayString(m), 11, _hoisted_3);
-                }), 128))
-              ], 4)) : createCommentVNode("", true),
-              createVNode(IconGrid, {
-                data: icons.value,
-                icon: _ctx.modelValue,
-                emptyProps: _ctx.emptyProps,
-                tooltip: _ctx.tooltip,
-                tooltipProps: _ctx.tooltipProps,
-                popperVisible: selectVisible.value,
-                gridStyle: _ctx.gridStyle,
-                itemStyle: _ctx.itemStyle,
-                style: normalizeStyle(_ctx.bodyStyle),
-                onSelect: handleIconSelect
-              }, createSlots({ _: 2 }, [
-                _ctx.$slots.icon ? {
-                  name: "icon",
-                  fn: withCtx((slotProps) => [
-                    renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(slotProps || {})))
-                  ]),
-                  key: "0"
-                } : void 0
-              ]), 1032, ["data", "icon", "emptyProps", "tooltip", "tooltipProps", "popperVisible", "gridStyle", "itemStyle", "style"])
-            ])
-          ], 4)
+            showFilterInput.value ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: "ele-icon-select-search",
+              style: normalizeStyle(_ctx.searchStyle)
+            }, [
+              createVNode(unref(ElInput), {
+                size: "small",
+                clearable: true,
+                modelValue: keywords.value,
+                validateEvent: false,
+                prefixIcon: unref(SearchOutlined),
+                placeholder: _ctx.filterPlaceholder ?? unref(lang).searchPlaceholder,
+                "onUpdate:modelValue": handleSelectFilter
+              }, null, 8, ["modelValue", "prefixIcon", "placeholder"])
+            ], 4)) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "tabRightExtra")
+          ], 4)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2, [
+            menus.value && menus.value.length ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "ele-icon-select-menus",
+              style: normalizeStyle(_ctx.menusStyle)
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(menus.value, (m, i) => {
+                return openBlock(), createElementBlock("div", {
+                  key: `${i}-${m}`,
+                  class: normalizeClass(["ele-icon-select-menu", { "is-active": i === menuActive.value }]),
+                  onClick: ($event) => handleMenuClick(i)
+                }, toDisplayString(m), 11, _hoisted_3);
+              }), 128))
+            ], 4)) : createCommentVNode("", true),
+            createVNode(IconGrid, {
+              data: icons.value,
+              icon: _ctx.modelValue,
+              emptyProps: _ctx.emptyProps,
+              tooltip: _ctx.tooltip,
+              tooltipProps: _ctx.tooltipProps,
+              popperVisible: selectVisible.value,
+              gridStyle: _ctx.gridStyle,
+              itemStyle: _ctx.itemStyle,
+              popperType: _ctx.popperType,
+              style: normalizeStyle(_ctx.bodyStyle),
+              onSelect: handleIconSelect
+            }, createSlots({ _: 2 }, [
+              _ctx.$slots.icon ? {
+                name: "icon",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(slotProps || {})))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["data", "icon", "emptyProps", "tooltip", "tooltipProps", "popperVisible", "gridStyle", "itemStyle", "popperType", "style"])
+          ])
         ]),
         _: 2
       }, [
+        renderList(Object.keys(_ctx.$slots).filter((k) => !ownSlots.includes(k)), (name) => {
+          return {
+            name,
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+            ])
+          };
+        }),
         _ctx.modelValue && _ctx.$slots.icon ? {
           name: "prefix",
           fn: withCtx(() => [
@@ -303,7 +317,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["value", "disabled", "size", "clearable", "placeholder", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperWidth", "popperOptions", "popperClass", "selectStyle", "inputStyle", "selectTagsStyle", "popperType", "popperProps", "selectedLabel", "visible"]);
+      ]), 1032, ["value", "disabled", "size", "clearable", "placeholder", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperOptions", "selectStyle", "inputStyle", "selectTagsStyle", "popperClass", "popperWidth", "popperHeight", "popperType", "popperProps", "popperSlots", "popperTitle", "responsive", "selectedLabel", "visible"]);
     };
   }
 });

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,39 @@ 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>;
+    /** 下拉组件插槽对应名称 */
+    popperSlots: PropType<Record<string, string>>;
+    /** 是否将下拉组件插入 body */
     teleported: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 始终渲染下拉框 */
+    /** 始终渲染下拉组件 */
     persistent: {
         type: BooleanConstructor;
         default: boolean;
@@ -47,35 +74,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 +101,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,39 @@ 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,
+  /** 下拉组件插槽对应名称 */
+  popperSlots: Object,
+  /** 是否将下拉组件插入 body */
   teleported: {
     type: Boolean,
     default: true
   },
-  /** 始终渲染下拉框 */
+  /** 始终渲染下拉组件 */
   persistent: {
     type: Boolean,
     default: true
@@ -37,35 +64,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 +91,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,33 @@
 
 @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;
+  height: 100%;
+  padding: 0;
 }
 
+.ele-icon-select-main {
+  flex: 1;
+  display: flex;
+  overflow: auto;
+}
+
+/* 顶栏 */
 .ele-icon-select-header {
   display: flex;
   align-items: center;
@@ -91,6 +105,7 @@
   }
 }
 
+/* 顶栏搜索框 */
 .ele-icon-select-search {
   width: 100%;
   flex-shrink: 0;
@@ -107,20 +122,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 +193,7 @@
   }
 }
 
+/* 图标列表 */
 .ele-icon-select-body {
   flex: 1;
   height: 100%;
@@ -198,11 +208,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 +222,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 +239,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;
+}