ele-admin-plus 1.1.6-beta.1 → 1.1.6-beta.3

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

@@ -1,17 +1,34 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, normalizeStyle, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, ref, computed, watch, resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, normalizeStyle, createElementBlock, renderSlot, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode, createVNode, normalizeProps, guardReactiveProps } from "vue";
 import { useResponsive } from "../ele-config-provider/receiver";
 import EleBasicSelect from "../ele-basic-select/index";
-import IconPopper from "./components/icon-popper";
+import { valueIsChanged } from "../ele-basic-select/util";
+import IconGrid from "./components/icon-grid";
 import { iconSelectProps, iconSelectEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleIconSelect",
-  components: { EleBasicSelect, IconPopper },
+  components: { EleBasicSelect, IconGrid },
   props: iconSelectProps,
   emits: iconSelectEmits,
   setup(props, { emit }) {
     const isResponsive = useResponsive(props);
-    const visible = ref(false);
-    const popupClass = computed(() => {
+    const iconState = { keyword: "" };
+    const selectRef = ref(null);
+    const selectVisible = ref(false);
+    const tabs = ref([]);
+    const tabActive = ref();
+    const menus = ref([]);
+    const menuActive = ref();
+    const icons = ref([]);
+    const tabBar = computed(() => {
+      if (!tabs.value || !tabs.value.length) {
+        return false;
+      }
+      if (props.hideOnSingleTab && tabs.value.length === 1) {
+        return false;
+      }
+      return true;
+    });
+    const selectPopperClass = computed(() => {
       const classes = ["ele-icon-select-popper"];
       if (isResponsive.value) {
         classes.push("is-responsive");
@@ -21,7 +38,7 @@ const _sfc_main = defineComponent({
       }
       return classes.join(" ");
     });
-    const popupStyle = computed(() => {
+    const iconPopperStyle = computed(() => {
       if (!props.popperHeight) {
         return;
       }
@@ -29,40 +46,143 @@ const _sfc_main = defineComponent({
         height: typeof props.popperHeight === "number" ? `${props.popperHeight}px` : props.popperHeight
       };
     });
-    const updateVisible = (value) => {
-      if (visible.value !== value) {
-        visible.value = value;
-        emit("visibleChange", value);
+    const updatePopover = () => {
+      selectRef.value && selectRef.value.updatePopper();
+    };
+    const initData = () => {
+      if (props.data == null || !props.data.length || typeof props.data[0] === "string") {
+        tabs.value = [];
+        menus.value = [];
+        tabActive.value = void 0;
+        menuActive.value = void 0;
+        icons.value = filterData(props.data);
+        return;
+      }
+      tabs.value = props.data.map(
+        (d) => d.title
+      );
+      if (tabActive.value == null || tabActive.value >= tabs.value.length) {
+        tabActive.value = 0;
+      }
+      const data = props.data[tabActive.value];
+      if (typeof data !== "string" && data.children != null && data.children.length) {
+        menus.value = data.children.map((d) => d.title);
+        if (menuActive.value == null || menuActive.value >= menus.value.length) {
+          menuActive.value = 0;
+        }
+        icons.value = filterData(data.children[menuActive.value].icons);
+        return;
+      }
+      menus.value = [];
+      menuActive.value = void 0;
+      icons.value = typeof data !== "string" ? filterData(data.icons) : [];
+    };
+    const filterData = (data) => {
+      if (!data) {
+        return [];
+      }
+      if (!iconState.keyword) {
+        return data;
+      }
+      return data.filter((t) => t.toLowerCase().includes(iconState.keyword));
+    };
+    const updateVisible = (visible) => {
+      if (visible) {
+        onSelectFilter("");
+      }
+      if (selectVisible.value !== visible) {
+        selectVisible.value = visible;
+        emit("visibleChange", visible);
       }
     };
-    const updateModelValue = (value) => {
-      emit("update:modelValue", value);
-      emit("change", value);
+    const updateModelValue = (modelValue) => {
+      if (valueIsChanged(modelValue, props.modelValue)) {
+        emit("update:modelValue", modelValue);
+        emit("change", modelValue);
+      }
     };
-    const onClear = () => {
+    const onSelectClear = () => {
       updateModelValue(null);
       updateVisible(false);
       emit("clear");
     };
-    const onFocus = (e) => {
+    const onSelectFocus = (e) => {
       emit("focus", e);
     };
-    const onBlur = (e) => {
+    const onSelectBlur = (e) => {
       emit("blur", e);
     };
-    const onSelect = (value) => {
-      updateModelValue(value);
+    const onSelectFilter = (keywords) => {
+      var _a;
+      iconState.keyword = keywords ? keywords.toLowerCase() : "";
+      initData();
+      if (!((_a = props.data) == null ? void 0 : _a.length) || icons.value.length) {
+        return;
+      }
+      for (let i = 0; i < props.data.length; i++) {
+        const d = props.data[i];
+        if (typeof d === "string") {
+          return;
+        }
+        if (d.children != null && d.children.length) {
+          for (let j = 0; j < d.children.length; j++) {
+            const icons2 = d.children[j].icons;
+            if (icons2 && icons2.some((t) => t.toLowerCase().includes(iconState.keyword))) {
+              menuActive.value = j;
+              tabActive.value = i;
+              initData();
+              return;
+            }
+          }
+        } else if (d.icons != null && d.icons.some((t) => t.toLowerCase().includes(iconState.keyword))) {
+          tabActive.value = i;
+          initData();
+          return;
+        }
+      }
+    };
+    const onTabClick = (index2) => {
+      tabActive.value = index2;
+      initData();
+    };
+    const onMenuClick = (index2) => {
+      menuActive.value = index2;
+      initData();
+    };
+    const onIconSelect = (icon) => {
+      updateModelValue(icon);
       updateVisible(false);
     };
+    watch(
+      () => props.data,
+      () => {
+        initData();
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
     return {
-      visible,
-      popupClass,
-      popupStyle,
+      selectRef,
+      selectVisible,
+      tabs,
+      tabActive,
+      menus,
+      menuActive,
+      icons,
+      tabBar,
+      selectPopperClass,
+      iconPopperStyle,
+      updatePopover,
       updateVisible,
-      onClear,
-      onFocus,
-      onBlur,
-      onSelect
+      onSelectClear,
+      onSelectFocus,
+      onSelectBlur,
+      onSelectFilter,
+      onTabClick,
+      onMenuClick,
+      onIconSelect
     };
   }
 });
@@ -73,61 +193,99 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "ele-icon-select-main" };
+const _hoisted_3 = ["onClick"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_IconPopper = resolveComponent("IconPopper");
+  const _component_IconGrid = resolveComponent("IconGrid");
   const _component_EleBasicSelect = resolveComponent("EleBasicSelect");
   return openBlock(), createBlock(_component_EleBasicSelect, {
+    ref: "selectRef",
     value: _ctx.modelValue,
     multiple: false,
     disabled: _ctx.disabled,
     size: _ctx.size,
     clearable: _ctx.clearable,
     placeholder: _ctx.placeholder,
-    name: _ctx.name,
-    autocomplete: _ctx.autocomplete,
-    selectedLabel: _ctx.modelValue,
-    visible: _ctx.visible,
+    automaticDropdown: _ctx.automaticDropdown,
+    filterable: _ctx.filterable,
     teleported: _ctx.teleported,
     persistent: _ctx.persistent,
-    automaticDropdown: _ctx.automaticDropdown,
     placement: _ctx.placement,
+    transition: _ctx.transition,
     popperWidth: _ctx.popperWidth,
     popperOptions: _ctx.popperOptions,
-    popperClass: _ctx.popupClass,
+    popperClass: _ctx.selectPopperClass,
+    selectedLabel: _ctx.modelValue,
+    visible: _ctx.selectVisible,
     "onUpdate:visible": _ctx.updateVisible,
-    onClear: _ctx.onClear,
-    onFocus: _ctx.onFocus,
-    onBlur: _ctx.onBlur
+    onFilterChange: _ctx.onSelectFilter,
+    onClear: _ctx.onSelectClear,
+    onFocus: _ctx.onSelectFocus,
+    onBlur: _ctx.onSelectBlur
   }, createSlots({
     default: withCtx(() => [
-      createVNode(_component_IconPopper, {
-        icon: _ctx.modelValue,
-        data: _ctx.data,
-        emptyProps: _ctx.emptyProps,
-        filterable: _ctx.filterable,
-        filterPlaceholder: _ctx.filterPlaceholder,
-        hideOnSingleTab: _ctx.hideOnSingleTab,
-        tooltip: _ctx.tooltip,
-        tooltipProps: _ctx.tooltipProps,
-        popperVisible: _ctx.visible,
-        headerStyle: _ctx.headerStyle,
-        tabsStyle: _ctx.tabsStyle,
-        searchStyle: _ctx.searchStyle,
-        menusStyle: _ctx.menusStyle,
-        bodyStyle: _ctx.bodyStyle,
-        gridStyle: _ctx.gridStyle,
-        itemStyle: _ctx.itemStyle,
-        style: normalizeStyle(_ctx.popupStyle),
-        onSelect: _ctx.onSelect
-      }, createSlots({ _: 2 }, [
-        _ctx.$slots.icon ? {
-          name: "icon",
-          fn: withCtx((slotProps) => [
-            renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps(slotProps || {})))
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["icon", "data", "emptyProps", "filterable", "filterPlaceholder", "hideOnSingleTab", "tooltip", "tooltipProps", "popperVisible", "headerStyle", "tabsStyle", "searchStyle", "menusStyle", "bodyStyle", "gridStyle", "itemStyle", "style", "onSelect"])
+      createElementVNode("div", {
+        class: "ele-icon-select",
+        style: normalizeStyle(_ctx.iconPopperStyle)
+      }, [
+        _ctx.tabBar ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "ele-icon-select-header",
+          style: normalizeStyle(_ctx.headerStyle)
+        }, [
+          renderSlot(_ctx.$slots, "tabLeftExtra"),
+          _ctx.tabBar ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-icon-select-tabs",
+            style: normalizeStyle(_ctx.tabsStyle)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.tabs, (t, i) => {
+              return openBlock(), createElementBlock("div", {
+                key: i + "-" + t,
+                class: normalizeClass(["ele-icon-select-tab", { "is-active": i === _ctx.tabActive }]),
+                onClick: ($event) => _ctx.onTabClick(i)
+              }, toDisplayString(t), 11, _hoisted_1);
+            }), 128))
+          ], 4)) : createCommentVNode("", true),
+          renderSlot(_ctx.$slots, "tabRightExtra")
+        ], 4)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          _ctx.menus && _ctx.menus.length ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ele-icon-select-menus",
+            style: normalizeStyle(_ctx.menusStyle)
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menus, (m, i) => {
+              return openBlock(), createElementBlock("div", {
+                key: i + "-" + m,
+                class: normalizeClass(["ele-icon-select-menu", { "is-active": i === _ctx.menuActive }]),
+                onClick: ($event) => _ctx.onMenuClick(i)
+              }, toDisplayString(m), 11, _hoisted_3);
+            }), 128))
+          ], 4)) : createCommentVNode("", true),
+          createVNode(_component_IconGrid, {
+            data: _ctx.icons,
+            icon: _ctx.modelValue,
+            emptyProps: _ctx.emptyProps,
+            tooltip: _ctx.tooltip,
+            tooltipProps: _ctx.tooltipProps,
+            popperVisible: _ctx.selectVisible,
+            gridStyle: _ctx.gridStyle,
+            itemStyle: _ctx.itemStyle,
+            style: normalizeStyle(_ctx.bodyStyle),
+            onSelect: _ctx.onIconSelect
+          }, 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", "onSelect"])
+        ])
+      ], 4)
     ]),
     _: 2
   }, [
@@ -141,7 +299,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       key: "0"
     } : void 0
-  ]), 1032, ["value", "disabled", "size", "clearable", "placeholder", "name", "autocomplete", "selectedLabel", "visible", "teleported", "persistent", "automaticDropdown", "placement", "popperWidth", "popperOptions", "popperClass", "onUpdate:visible", "onClear", "onFocus", "onBlur"]);
+  ]), 1032, ["value", "disabled", "size", "clearable", "placeholder", "automaticDropdown", "filterable", "teleported", "persistent", "placement", "transition", "popperWidth", "popperOptions", "popperClass", "selectedLabel", "visible", "onUpdate:visible", "onFilterChange", "onClear", "onFocus", "onBlur"]);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -5,7 +5,7 @@ import type { IconItem } from './types';
  * 属性
  */
 export declare const iconSelectProps: {
-    /** 绑定值 */
+    /** 选中值 */
     modelValue: StringConstructor;
     /** 图标数据 */
     data: {
@@ -15,61 +15,54 @@ export declare const iconSelectProps: {
     /** 是否禁用 */
     disabled: BooleanConstructor;
     /** 尺寸 */
-    size: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
-    /** 支持清除 */
+    size: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined>;
+    /** 是否支持清除 */
     clearable: BooleanConstructor;
-    /** 占位符 */
+    /** 无选中时提示文本 */
     placeholder: StringConstructor;
-    /** input 的 name 属性 */
-    name: StringConstructor;
-    /** input 的 autocomplete 属性 */
-    autocomplete: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** 是否将 popover 内容插入 body */
+    /** 是否在输入框获得焦点后自动弹出选项菜单 */
+    automaticDropdown: BooleanConstructor;
+    /** 是否可以筛选 */
+    filterable: BooleanConstructor;
+    /** 是否将下拉框插入 body */
     teleported: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 始终渲染 popover 内容 */
+    /** 始终渲染下拉框 */
     persistent: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 是否在输入框获得焦点后自动弹出选项菜单 */
-    automaticDropdown: BooleanConstructor;
-    /** 气泡框位置 */
+    /** 下拉框位置 */
     placement: {
-        type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
+        type: PropType<import("element-plus/es/utils/index").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
         default: string;
     };
-    /** popper 宽度 */
+    /** 下拉框渐变动画 */
+    transition: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** popper.js 参数 */
+    popperOptions: PropType<Partial<import("element-plus").Options> | undefined>;
+    /** 下拉框类名 */
+    popperClass: StringConstructor;
+    /** 下拉框宽度 */
     popperWidth: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    /** popper 高度 */
+    /** 下拉框高度 */
     popperHeight: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    /** popper.js 的参数 */
-    popperOptions: PropType<Partial<import("element-plus").Options> | undefined>;
-    /** 下拉框的类名 */
-    popperClass: StringConstructor;
-    /** 是否显示搜索框 */
-    filterable: BooleanConstructor;
-    /** 搜索框提示文本 */
-    filterPlaceholder: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** 顶栏选项卡只有一个时隐藏 */
+    /** 顶部选项卡只有一个时隐藏 */
     hideOnSingleTab: BooleanConstructor;
     /** 空组件属性 */
     emptyProps: PropType<ElEmptyProps>;
-    /** 是否显示提示 */
+    /** 是否显示文本提示 */
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
@@ -105,7 +98,7 @@ export declare const iconSelectEmits: {
     'update:modelValue': (_value?: string | null) => boolean;
     /** 选中值改变事件 */
     change: (_value?: string | null) => boolean;
-    /** 展开状态改变事件 */
+    /** 下拉框展开状态改变事件 */
     visibleChange: (_visible: boolean) => boolean;
     /** 清空事件 */
     clear: () => boolean;

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

@@ -1,5 +1,5 @@
 const iconSelectProps = {
-  /** 绑定值 */
+  /** 选中值 */
   modelValue: String,
   /** 图标数据 */
   data: {
@@ -10,60 +10,53 @@ const iconSelectProps = {
   disabled: Boolean,
   /** 尺寸 */
   size: String,
-  /** 支持清除 */
+  /** 是否支持清除 */
   clearable: Boolean,
-  /** 占位符 */
+  /** 无选中时提示文本 */
   placeholder: String,
-  /** input 的 name 属性 */
-  name: String,
-  /** input 的 autocomplete 属性 */
-  autocomplete: {
-    type: String,
-    default: "off"
-  },
-  /** 是否将 popover 内容插入 body */
+  /** 是否在输入框获得焦点后自动弹出选项菜单 */
+  automaticDropdown: Boolean,
+  /** 是否可以筛选 */
+  filterable: Boolean,
+  /** 是否将下拉框插入 body */
   teleported: {
     type: Boolean,
     default: true
   },
-  /** 始终渲染 popover 内容 */
+  /** 始终渲染下拉框 */
   persistent: {
     type: Boolean,
     default: true
   },
-  /** 是否在输入框获得焦点后自动弹出选项菜单 */
-  automaticDropdown: Boolean,
-  /** 气泡框位置 */
+  /** 下拉框位置 */
   placement: {
     type: String,
     default: "bottom-start"
   },
-  /** popper 宽度 */
+  /** 下拉框渐变动画 */
+  transition: {
+    type: String,
+    default: "el-zoom-in-top"
+  },
+  /** popper.js 参数 */
+  popperOptions: Object,
+  /** 下拉框类名 */
+  popperClass: String,
+  /** 下拉框宽度 */
   popperWidth: {
     type: [Number, String],
     default: 414
   },
-  /** popper 高度 */
+  /** 下拉框高度 */
   popperHeight: {
     type: [Number, String],
     default: 260
   },
-  /** popper.js 的参数 */
-  popperOptions: Object,
-  /** 下拉框的类名 */
-  popperClass: String,
-  /** 是否显示搜索框 */
-  filterable: Boolean,
-  /** 搜索框提示文本 */
-  filterPlaceholder: {
-    type: String,
-    default: "搜索.."
-  },
-  /** 顶栏选项卡只有一个时隐藏 */
+  /** 顶部选项卡只有一个时隐藏 */
   hideOnSingleTab: Boolean,
   /** 空组件属性 */
   emptyProps: Object,
-  /** 是否显示提示 */
+  /** 是否显示文本提示 */
   tooltip: {
     type: Boolean,
     default: true
@@ -95,7 +88,7 @@ const iconSelectEmits = {
   "update:modelValue": (_value) => true,
   /** 选中值改变事件 */
   change: (_value) => true,
-  /** 展开状态改变事件 */
+  /** 下拉框展开状态改变事件 */
   visibleChange: (_visible) => true,
   /** 清空事件 */
   clear: () => true,

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

@@ -1,4 +1,3 @@
-import 'element-plus/es/components/input/style/index';
 import 'element-plus/es/components/empty/style/index';
 import '../../ele-tooltip/style/index';
 import '../../ele-basic-select/style/index';

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

@@ -88,18 +88,6 @@
   }
 }
 
-.ele-icon-select-search {
-  width: 100%;
-  flex-shrink: 0;
-  padding: eleVar('icon', 'search-padding');
-  box-sizing: border-box;
-}
-
-.ele-icon-select-tabs + .ele-icon-select-search {
-  width: eleVar('icon', 'search-width');
-  padding-left: 12px;
-}
-
 .ele-icon-select-main {
   flex: 1;
   display: flex;

package/es/ele-map-picker/components/map-view.d.ts

@@ -47,12 +47,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     mapKey: StringConstructor;
     mapVersion: {
-        type: StringConstructor;
+        type: StringConstructor; /** 确定按钮请求状态 */
         default: string;
     };
     mapStyle: StringConstructor;
-    darkMode: BooleanConstructor; /** 输入建议数据 */
-    okText: StringConstructor;
+    darkMode: BooleanConstructor;
+    okText: StringConstructor; /** 输入建议数据 */
     emptyProps: import("vue").PropType<import("../../ele-app/types").ElEmptyProps>;
     headerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
 }, {
@@ -161,12 +161,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     mapKey: StringConstructor;
     mapVersion: {
-        type: StringConstructor;
+        type: StringConstructor; /** 确定按钮请求状态 */
         default: string;
     };
     mapStyle: StringConstructor;
-    darkMode: BooleanConstructor; /** 输入建议数据 */
-    okText: StringConstructor;
+    darkMode: BooleanConstructor;
+    okText: StringConstructor; /** 输入建议数据 */
     emptyProps: import("vue").PropType<import("../../ele-app/types").ElEmptyProps>;
     headerStyle: import("vue").PropType<Partial<import("vue").CSSProperties>>;
 }>> & {

package/es/ele-map-picker/components/map-view.js

@@ -72,6 +72,7 @@ const _sfc_main = defineComponent({
           pageSize: props.poiLimit,
           pageIndex: 1
         });
+        const defaultStyle = props.darkMode ? "amap://styles/dark" : void 0;
         state.mapIns = new AMap.Map(mapRef.value, {
           zoom: props.zoom,
           // 初缩放级别
@@ -79,7 +80,7 @@ const _sfc_main = defineComponent({
           // 初始中心点
           resizeEnable: true,
           // 监控地图容器尺寸变化
-          mapStyle: props.mapStyle ? props.mapStyle : props.darkMode ? "amap://styles/dark" : void 0
+          mapStyle: props.mapStyle || defaultStyle
         });
         state.mapIns.on("complete", () => {
           loading.value = false;