ele-admin-plus 1.0.0-beta.2 → 1.0.0-beta.4

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

@@ -8,7 +8,7 @@
   }
 }
 
-.ele-icon-select-popup {
+.ele-icon-select {
   display: flex;
   flex-direction: column;
 }
@@ -19,175 +19,177 @@
   padding: 0 12px;
   box-sizing: border-box;
   box-shadow: 0 -1px 0 elVar('border-color', 'lighter') inset;
+}
+
+.ele-icon-select-tabs {
+  flex: 1;
+  overflow: auto;
+  overflow: overlay;
+  display: flex;
+  align-items: center;
 
   .ele-icon-select-tab {
-    flex: 1;
-    overflow: auto;
-    overflow: overlay;
-    display: flex;
-    align-items: center;
+    height: 42px;
+    line-height: 42px;
+    padding: 0 2px;
+    box-sizing: border-box;
+    transition: color 0.3s, background-color 0.3s;
+    white-space: nowrap;
+    position: relative;
+    cursor: pointer;
 
-    .ele-icon-select-tab-item {
-      height: 42px;
-      line-height: 42px;
-      padding: 0 2px;
-      box-sizing: border-box;
-      transition: color 0.3s, background-color 0.3s;
-      white-space: nowrap;
-      position: relative;
-      cursor: pointer;
-
-      & + .ele-icon-select-tab-item {
-        margin-left: 16px;
-      }
+    & + .ele-icon-select-tab {
+      margin-left: 16px;
+    }
 
-      &::after {
-        content: '';
-        width: 100%;
-        height: 2px;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        opacity: 0;
-        transform: scaleX(0.0001);
-        background: elVar('color-primary');
-        transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
-          opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
-      }
+    &::after {
+      content: '';
+      width: 100%;
+      height: 2px;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      opacity: 0;
+      transform: scaleX(0.0001);
+      background: elVar('color-primary');
+      transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
+        opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
 
-      &:hover {
-        color: elVar('color-primary');
-      }
+    &:hover {
+      color: elVar('color-primary');
+    }
 
-      &.is-active {
-        color: elVar('color-primary');
+    &.is-active {
+      color: elVar('color-primary');
 
-        &::after {
-          opacity: 1;
-          transform: scaleX(1);
-          transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
-            opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
-        }
+      &::after {
+        opacity: 1;
+        transform: scaleX(1);
+        transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+          opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
       }
     }
   }
+}
 
-  .ele-icon-select-search {
-    width: 100%;
-    flex-shrink: 0;
-    padding: 8px 0;
-    box-sizing: border-box;
-  }
+.ele-icon-select-search {
+  width: 100%;
+  flex-shrink: 0;
+  padding: 8px 0;
+  box-sizing: border-box;
+}
 
-  .ele-icon-select-tab + .ele-icon-select-search {
-    width: 120px;
-    padding-left: 12px;
-  }
+.ele-icon-select-tabs + .ele-icon-select-search {
+  width: 120px;
+  padding-left: 12px;
 }
 
-.ele-icon-select-body {
+.ele-icon-select-main {
   flex: 1;
   display: flex;
   overflow: auto;
+}
+
+.ele-icon-select-menus {
+  width: 120px;
+  height: 100%;
+  flex-shrink: 0;
+  overflow: auto;
+  overflow: overlay;
+  padding: 12px 0;
+  box-sizing: border-box;
+  box-shadow: -1px 0 0 elVar('border-color', 'lighter') inset;
 
   .ele-icon-select-menu {
-    width: 120px;
-    height: 100%;
-    flex-shrink: 0;
-    overflow: auto;
-    overflow: overlay;
-    padding: 12px 0;
+    height: 36px;
+    line-height: 36px;
+    padding: 0 12px;
     box-sizing: border-box;
-    box-shadow: -1px 0 0 elVar('border-color', 'lighter') inset;
-
-    .ele-icon-select-menu-item {
-      height: 36px;
-      line-height: 36px;
-      padding: 0 12px;
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      word-break: break-all;
-      transition: color 0.3s, background-color 0.3s;
-      position: relative;
-      cursor: pointer;
-
-      &::after {
-        content: '';
-        width: 2px;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        right: 0;
-        opacity: 0;
-        transform: scaleY(0.0001);
-        background: elVar('color-primary');
-        transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
-          opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
-      }
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    transition: color 0.3s, background-color 0.3s;
+    position: relative;
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      width: 2.5px;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      right: 0;
+      opacity: 0;
+      transform: scaleY(0.0001);
+      background: elVar('color-primary');
+      transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
+        opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
 
-      &:hover {
-        color: elVar('color-primary');
-      }
+    &:hover {
+      color: elVar('color-primary');
+    }
 
-      &:active {
-        background: elVar('color-primary', 'light-9');
-      }
+    &:active {
+      background: elVar('color-primary', 'light-9');
+    }
 
-      &.is-active {
-        color: elVar('color-primary');
-        background: elVar('color-primary', 'light-9');
+    &.is-active {
+      color: elVar('color-primary');
+      background: elVar('color-primary', 'light-9');
 
-        &::after {
-          opacity: 1;
-          transform: scaleY(1);
-          transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
-            opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
-        }
+      &::after {
+        opacity: 1;
+        transform: scaleY(1);
+        transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+          opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
       }
     }
   }
+}
 
-  .ele-icon-select-list {
-    flex: 1;
-    height: 100%;
-    font-size: 0;
-    overflow: auto;
-    overflow: overlay;
-    padding: 12px 4px 4px 12px;
-    box-sizing: border-box;
+.ele-icon-select-body {
+  flex: 1;
+  height: 100%;
+  padding: 12px;
+  box-sizing: border-box;
+  overflow: auto;
+  overflow: overlay;
+}
 
-    .ele-icon-select-item {
-      width: calc(20% - 8px);
-      min-width: 46px;
-      height: 48px;
-      font-size: 22px;
-      margin: 0 8px 8px 0;
-      vertical-align: top;
-      display: inline-flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      box-sizing: border-box;
-      border: 1px solid elVar('border-color', 'lighter');
-      transition: color 0.3s, background-color 0.3s, border-color 0.3s;
-      border-radius: 6px;
-      overflow: hidden;
-      cursor: pointer;
-
-      &:hover {
-        color: elVar('color-primary');
-        border-color: elVar('color-primary', 'light-9');
-        background: elVar('color-primary', 'light-9');
-      }
+.ele-icon-select-grid {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 8px;
 
-      &.is-active {
-        color: elVar('color-primary');
-        border-color: elVar('color-primary');
-        background: elVar('color-primary', 'light-9');
-        border-width: 2px;
-      }
+  .ele-icon-select-item {
+    height: 48px;
+    font-size: 22px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    border: 1px solid elVar('border-color', 'lighter');
+    transition: color 0.3s, background-color 0.3s, border-color 0.3s;
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+
+    &:hover {
+      color: elVar('color-primary');
+      border-color: elVar('color-primary', 'light-9');
+      background: elVar('color-primary', 'light-9');
+    }
+
+    &.is-active {
+      color: elVar('color-primary');
+      border-color: elVar('color-primary');
+      background: elVar('color-primary', 'light-9');
+      border-width: 2px;
     }
   }
 }

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

@@ -2,9 +2,9 @@ import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, next
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { ElAutocomplete, ElInput, ElButton, ElIcon, ElEmpty } from "element-plus";
 import { Plus, Location, CircleCheck, Search, Check } from "@element-plus/icons-vue";
+import { useLicense } from "../../ele-config-provider/receiver";
 import EleLoading from "../../ele-loading/index";
-import { useLicense, UNAUTHORIZED_TIP } from "../../utils/license-util";
-import { mapViewProps } from "../props";
+import { mapProps } from "../props";
 const ICON_CLASS = "ele-map-view-main-icon";
 const _sfc_main = defineComponent({
   name: "MapView",
@@ -20,7 +20,7 @@ const _sfc_main = defineComponent({
     CircleCheck,
     Search
   },
-  props: mapViewProps,
+  props: mapProps,
   emits: {
     done: (_result) => true,
     mapDone: (_ins) => true
@@ -156,7 +156,6 @@ const _sfc_main = defineComponent({
     };
     const onConfirm = () => {
       if (!authenticated.value) {
-        console.warn(UNAUTHORIZED_TIP);
         return;
       }
       if (!selected.value) {
@@ -548,7 +547,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("div", _hoisted_5, [
           createVNode(_component_EleLoading, {
             loading: _ctx.poiLoading,
-            class: "ele-map-view-list"
+            class: "ele-map-view-list ele-scrollbar-hover ele-scrollbar-mini"
           }, {
             default: withCtx(() => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {

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

@@ -1,4 +1,8 @@
+import type { Ref } from 'vue';
 import type { CenterPoint, MapLocale } from './types';
+import type { MapProps } from './props';
+import type MapViewType from "./components/map-view";
+export type MapViewInstance = InstanceType<typeof MapViewType> | null;
 declare const _sfc_main: import("vue").DefineComponent<{
     modelValue: BooleanConstructor;
     modalProps: import("vue").PropType<Partial<Omit<import("../ele-modal/props").ModalProps, "modelValue">>>;
@@ -62,10 +66,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
     okText: StringConstructor;
     emptyProps: import("vue").PropType<Partial<import("element-plus").EmptyProps>>;
 }, {
-    mapRef: any;
+    mapRef: Ref<any>;
     lang: import("vue").ComputedRef<MapLocale>;
     isResponsive: import("vue").ComputedRef<boolean>;
     aMapKey: import("vue").ComputedRef<string | undefined>;
+    mapProps: import("vue").ComputedRef<Partial<MapProps>>;
     updateModelValue: (value: boolean) => void;
     onDone: (result: CenterPoint) => void;
     onMapDone: (ins: any) => void;

package/es/ele-map-picker/index.js

@@ -1,18 +1,22 @@
 import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { useLocale, useResponsive } from "../ele-config-provider/use-receiver";
+import { pick } from "../utils/core";
+import { useLocale, useResponsive } from "../ele-config-provider/receiver";
 import EleModal from "../ele-modal/index";
 import MapView from "./components/map-view";
-import { mapModalProps, mapModalEmits } from "./props";
+import { mapPickerProps, mapPickerEmits, mapPropKeys } from "./props";
 const _sfc_main = defineComponent({
   name: "EleMapPicker",
   components: { EleModal, MapView },
-  props: mapModalProps,
-  emits: mapModalEmits,
+  props: mapPickerProps,
+  emits: mapPickerEmits,
   setup(props, { emit }) {
     const { lang, globalConfig } = useLocale("map", props);
     const isResponsive = useResponsive(props);
     const mapRef = ref(null);
     const aMapKey = computed(() => props.mapKey || globalConfig.mapKey);
+    const mapProps = computed(() => {
+      return pick(props, mapPropKeys);
+    });
     const updateModelValue = (value) => {
       emit("update:modelValue", value);
     };
@@ -27,6 +31,7 @@ const _sfc_main = defineComponent({
       lang,
       isResponsive,
       aMapKey,
+      mapProps,
       updateModelValue,
       onDone,
       onMapDone
@@ -52,32 +57,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:modelValue": _ctx.updateModelValue
   }), createSlots({
     default: withCtx(() => [
-      createVNode(_component_MapView, {
+      createVNode(_component_MapView, mergeProps(_ctx.mapProps, {
         ref: "mapRef",
-        height: _ctx.height,
-        center: _ctx.center,
-        zoom: _ctx.zoom,
-        selectedZoom: _ctx.selectedZoom,
-        poiLimit: _ctx.poiLimit,
-        poiType: _ctx.poiType,
-        poiKeywords: _ctx.poiKeywords,
-        poiRadius: _ctx.poiRadius,
-        returnRegions: _ctx.returnRegions,
-        required: _ctx.required,
-        suggestionCity: _ctx.suggestionCity,
-        keywordMode: _ctx.keywordMode,
-        markerSrc: _ctx.markerSrc,
-        mapVersion: _ctx.mapVersion,
-        mapStyle: _ctx.mapStyle,
-        darkMode: _ctx.darkMode,
-        emptyProps: _ctx.emptyProps,
         message: _ctx.lang.message,
         searchPlaceholder: _ctx.lang.placeholder,
         okText: _ctx.lang.ok,
         mapKey: _ctx.aMapKey,
         onDone: _ctx.onDone,
         onMapDone: _ctx.onMapDone
-      }, null, 8, ["height", "center", "zoom", "selectedZoom", "poiLimit", "poiType", "poiKeywords", "poiRadius", "returnRegions", "required", "suggestionCity", "keywordMode", "markerSrc", "mapVersion", "mapStyle", "darkMode", "emptyProps", "message", "searchPlaceholder", "okText", "mapKey", "onDone", "onMapDone"])
+      }), null, 16, ["message", "searchPlaceholder", "okText", "mapKey", "onDone", "onMapDone"])
     ]),
     _: 2
   }, [

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

@@ -5,7 +5,7 @@ import type { MapLocale, CenterPoint } from './types';
 /**
  * 属性
  */
-export declare const mapViewProps: {
+export declare const mapProps: {
     height: {
         type: StringConstructor;
         default: string;
@@ -61,7 +61,7 @@ export declare const mapViewProps: {
     okText: StringConstructor;
     emptyProps: PropType<Partial<EmptyProps>>;
 };
-export declare const mapModalProps: {
+export declare const mapPickerProps: {
     modelValue: BooleanConstructor;
     modalProps: PropType<Partial<Omit<ModalProps, "modelValue">>>;
     responsive: {
@@ -124,14 +124,20 @@ export declare const mapModalProps: {
     okText: StringConstructor;
     emptyProps: PropType<Partial<EmptyProps>>;
 };
-export type MapModalProps = ExtractPropTypes<typeof mapModalProps>;
+export type MapPickerProps = ExtractPropTypes<typeof mapPickerProps>;
+export type MapProps = ExtractPropTypes<typeof mapProps>;
 /**
  * 事件
  */
-export declare const mapModalEmits: {
+export declare const mapPickerEmits: {
     done: (_result: CenterPoint) => boolean;
     mapDone: (_ins: any) => boolean;
     open: () => boolean;
     closed: () => boolean;
     'update:modelValue': (_value: boolean) => boolean;
 };
+export type MapPropKeys = Array<keyof typeof mapProps>;
+/**
+ * 地图组件属性名
+ */
+export declare const mapPropKeys: MapPropKeys;

package/es/ele-map-picker/props.js

@@ -1,4 +1,4 @@
-const mapViewProps = {
+const mapProps = {
   // 地图的高度
   height: {
     type: String,
@@ -75,8 +75,8 @@ const mapViewProps = {
   // 空组件属性
   emptyProps: Object
 };
-const mapModalProps = {
-  ...mapViewProps,
+const mapPickerProps = {
+  ...mapProps,
   // 弹窗是否显示
   modelValue: Boolean,
   // 弹窗参数
@@ -89,7 +89,7 @@ const mapModalProps = {
   // 国际化
   locale: Object
 };
-const mapModalEmits = {
+const mapPickerEmits = {
   // 选择完成事件
   done: (_result) => true,
   // 地图渲染完成事件
@@ -101,8 +101,10 @@ const mapModalEmits = {
   // 更新弹窗打开状态
   "update:modelValue": (_value) => true
 };
+const mapPropKeys = Object.keys(mapProps);
 export {
-  mapModalEmits,
-  mapModalProps,
-  mapViewProps
+  mapPickerEmits,
+  mapPickerProps,
+  mapPropKeys,
+  mapProps
 };

package/es/ele-map-picker/style/index.scss

@@ -99,6 +99,7 @@
   .ele-map-view-list {
     flex: 1;
     overflow: auto;
+    overflow: overlay;
     box-sizing: border-box;
   }