ele-admin-plus 1.0.2 → 1.1.0

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

@@ -1,7 +1,13 @@
 @use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
 
-.ele-icon-select-popper.el-popover {
-  padding: 0;
+@include set-icon-var($ele);
+
+.ele-icon-select-popper {
+  .ele-popover-content {
+    padding: 0;
+  }
 
   &.is-responsive {
     max-width: calc(100vw - 32px);
@@ -16,9 +22,9 @@
 .ele-icon-select-header {
   display: flex;
   align-items: center;
-  padding: 0 12px;
   box-sizing: border-box;
-  box-shadow: 0 -1px 0 elVar('border-color', 'lighter') inset;
+  padding: eleVar('icon', 'header-padding');
+  box-shadow: 0 -0.8px 0 elVar('border-color', 'light') inset;
 }
 
 .ele-icon-select-tabs {
@@ -29,23 +35,27 @@
   align-items: center;
 
   .ele-icon-select-tab {
-    height: 42px;
-    line-height: 42px;
-    padding: 0 2px;
+    height: eleVar('icon', 'tab-height');
+    line-height: eleVar('icon', 'tab-height');
+    color: eleVar('icon', 'tab-color');
+    font-size: eleVar('icon', 'tab-font-size');
+    padding: eleVar('icon', 'tab-padding');
+    border-radius: eleVar('icon', 'tab-radius');
+    transition: color $ele-transition, background-color $ele-transition;
     box-sizing: border-box;
-    transition: color 0.3s, background-color 0.3s;
+    word-break: break-all;
     white-space: nowrap;
     position: relative;
     cursor: pointer;
 
     & + .ele-icon-select-tab {
-      margin-left: 16px;
+      margin-left: eleVar('icon', 'tab-space');
     }
 
     &::after {
       content: '';
       width: 100%;
-      height: 2px;
+      height: eleVar('icon', 'tab-active-line');
       position: absolute;
       left: 0;
       bottom: 0;
@@ -57,11 +67,18 @@
     }
 
     &:hover {
-      color: elVar('color-primary');
+      color: eleVar('icon', 'tab-hover-color');
+      background: eleVar('icon', 'tab-hover-bg');
+    }
+
+    &:active {
+      background: eleVar('icon', 'tab-active-bg');
     }
 
     &.is-active {
-      color: elVar('color-primary');
+      color: eleVar('icon', 'tab-active-color');
+      background: eleVar('icon', 'tab-active-bg');
+      font-weight: eleVar('icon', 'tab-active-font-weight');
 
       &::after {
         opacity: 1;
@@ -76,12 +93,12 @@
 .ele-icon-select-search {
   width: 100%;
   flex-shrink: 0;
-  padding: 8px 0;
+  padding: eleVar('icon', 'search-padding');
   box-sizing: border-box;
 }
 
 .ele-icon-select-tabs + .ele-icon-select-search {
-  width: 120px;
+  width: eleVar('icon', 'search-width');
   padding-left: 12px;
 }
 
@@ -92,32 +109,39 @@
 }
 
 .ele-icon-select-menus {
-  width: 120px;
   height: 100%;
+  width: eleVar('icon', 'menus-width');
   flex-shrink: 0;
   overflow: auto;
   overflow: overlay;
-  padding: 12px 0;
+  padding: eleVar('icon', 'menus-padding');
+  box-shadow: -0.8px 0 0 elVar('border-color', 'light') inset;
   box-sizing: border-box;
-  box-shadow: -1px 0 0 elVar('border-color', 'lighter') inset;
 
   .ele-icon-select-menu {
-    height: 36px;
-    line-height: 36px;
-    padding: 0 12px;
-    box-sizing: border-box;
+    height: eleVar('icon', 'menu-height');
+    line-height: eleVar('icon', 'menu-height');
+    color: eleVar('icon', 'menu-color');
+    font-size: eleVar('icon', 'menu-font-size');
+    padding: eleVar('icon', 'menu-padding');
+    border-radius: eleVar('icon', 'menu-radius');
+    transition: color $ele-transition, background-color $ele-transition;
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
     word-break: break-all;
-    transition: color 0.3s, background-color 0.3s;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
     position: relative;
     cursor: pointer;
 
+    & + .ele-icon-select-menu {
+      margin-top: eleVar('icon', 'menu-space');
+    }
+
     &::after {
       content: '';
-      width: 2.5px;
       height: 100%;
+      width: eleVar('icon', 'menu-active-line');
       position: absolute;
       top: 0;
       right: 0;
@@ -129,16 +153,18 @@
     }
 
     &:hover {
-      color: elVar('color-primary');
+      color: eleVar('icon', 'menu-hover-color');
+      background: eleVar('icon', 'menu-hover-bg');
     }
 
     &:active {
-      background: elVar('color-primary', 'light-9');
+      background: eleVar('icon', 'menu-active-bg');
     }
 
     &.is-active {
-      color: elVar('color-primary');
-      background: elVar('color-primary', 'light-9');
+      color: eleVar('icon', 'menu-active-color');
+      background: eleVar('icon', 'menu-active-bg');
+      font-weight: eleVar('icon', 'menu-active-font-weight');
 
       &::after {
         opacity: 1;
@@ -153,7 +179,7 @@
 .ele-icon-select-body {
   flex: 1;
   height: 100%;
-  padding: 12px;
+  padding: eleVar('icon', 'body-padding');
   box-sizing: border-box;
   overflow: auto;
   overflow: overlay;
@@ -167,33 +193,30 @@
 
   .ele-icon-select-item {
     height: 48px;
-    font-size: 22px;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    color: eleVar('icon', 'color');
+    font-size: eleVar('icon', 'font-size');
+    border: eleVar('icon', 'border');
+    border-radius: eleVar('icon', 'radius');
+    transition: color $ele-transition, background-color $ele-transition,
+      border-color $ele-transition;
     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');
+      color: eleVar('icon', 'hover-color');
+      background: eleVar('icon', 'hover-bg');
+      border: eleVar('icon', 'hover-border');
     }
 
     &.is-active {
-      color: elVar('color-primary');
-      border-color: elVar('color-primary');
-      background: elVar('color-primary', 'light-9');
-      border-width: 2px;
+      color: eleVar('icon', 'active-color');
+      background: eleVar('icon', 'active-bg');
+      border: eleVar('icon', 'active-border');
     }
   }
 }
-
-.ele-icon-select-empty > .el-empty {
-  #{elVarName('empty', 'padding')}: 20px 0;
-}

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

@@ -1,4 +1,4 @@
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     text: StringConstructor;
     background: StringConstructor;
@@ -11,4 +11,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }>>, {
     loading: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

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

@@ -1,5 +1,5 @@
 import type { PoiItem, CenterPoint } from '../types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     height: {
         type: StringConstructor;
         default: string;
@@ -53,9 +53,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
     mapStyle: StringConstructor;
     darkMode: BooleanConstructor;
     okText: StringConstructor;
-    emptyProps: import("vue").PropType<Partial<import("element-plus").EmptyProps>>;
+    emptyProps: import("vue").PropType<import("../../ele-app/types").ElEmptyProps>;
+    headerStyle: import("vue").PropType<import("../../ele-app/types").StyleValue>;
 }, {
-    Check: import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
     mapRef: import("vue").Ref<HTMLDivElement | null>;
     loading: import("vue").Ref<boolean>;
     poiLoading: import("vue").Ref<boolean>;
@@ -167,13 +167,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
     mapStyle: StringConstructor;
     darkMode: BooleanConstructor;
     okText: StringConstructor;
-    emptyProps: import("vue").PropType<Partial<import("element-plus").EmptyProps>>;
+    emptyProps: import("vue").PropType<import("../../ele-app/types").ElEmptyProps>;
+    headerStyle: import("vue").PropType<import("../../ele-app/types").StyleValue>;
 }>> & {
     onDone?: ((_result: CenterPoint) => any) | undefined;
     onMapDone?: ((_ins: any) => any) | undefined;
 }, {
-    height: string;
     required: boolean;
+    height: string;
     zoom: number;
     selectedZoom: number;
     poiLimit: number;
@@ -187,4 +188,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     mapVersion: string;
     darkMode: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

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

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, normalizeStyle, createElementBlock, Fragment, normalizeClass, createCommentVNode, renderList, mergeProps } from "vue";
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, nextTick, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, normalizeStyle, createVNode, toDisplayString, createElementBlock, Fragment, normalizeClass, createCommentVNode, renderList, mergeProps } from "vue";
 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 { Plus, Location, CircleCheck, Check, Search } from "@element-plus/icons-vue";
 import { useLicense } from "../../ele-config-provider/receiver";
 import EleLoading from "../../ele-loading/index";
 import { mapProps } from "../props";
@@ -18,6 +18,7 @@ const _sfc_main = defineComponent({
     Plus,
     Location,
     CircleCheck,
+    Check,
     Search
   },
   props: mapProps,
@@ -209,12 +210,12 @@ const _sfc_main = defineComponent({
             return;
           }
           const data2 = result.tips.filter((d) => !!d.location).map((d) => {
-            const label = `${d.name}(${d.district})`;
+            const key = `${d.name}(${d.district})`;
             return {
               ...d,
-              label,
-              value: label,
-              key: d.id || label,
+              label: d.name,
+              value: d.name,
+              key: d.id || key,
               address: Array.isArray(d.address) ? d.address[0] : d.address
             };
           });
@@ -407,7 +408,6 @@ const _sfc_main = defineComponent({
       destroyAll();
     });
     return {
-      Check,
       mapRef,
       loading,
       poiLoading,
@@ -433,31 +433,33 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-map-view-header" };
-const _hoisted_2 = { class: "ele-map-view-search" };
-const _hoisted_3 = { class: "ele-map-view-main" };
-const _hoisted_4 = ["src"];
-const _hoisted_5 = { class: "ele-map-view-side" };
-const _hoisted_6 = ["onClick"];
-const _hoisted_7 = { class: "ele-map-view-item-title" };
-const _hoisted_8 = {
+const _hoisted_1 = { class: "ele-map-view-search" };
+const _hoisted_2 = { class: "ele-map-suggest-title" };
+const _hoisted_3 = { class: "ele-map-suggest-text" };
+const _hoisted_4 = { class: "ele-map-view-main" };
+const _hoisted_5 = ["src"];
+const _hoisted_6 = { class: "ele-map-view-side" };
+const _hoisted_7 = ["onClick"];
+const _hoisted_8 = { class: "ele-map-view-item-title" };
+const _hoisted_9 = {
   key: 0,
   class: "ele-map-view-item-text"
 };
-const _hoisted_9 = {
+const _hoisted_10 = {
   key: 0,
   class: "ele-map-view-empty"
 };
-const _hoisted_10 = {
+const _hoisted_11 = {
   key: 0,
   class: "ele-map-view-extra"
 };
-const _hoisted_11 = { class: "ele-map-view-message" };
+const _hoisted_12 = { class: "ele-map-view-message" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Search = resolveComponent("Search");
   const _component_ElIcon = resolveComponent("ElIcon");
   const _component_ElInput = resolveComponent("ElInput");
   const _component_ElAutocomplete = resolveComponent("ElAutocomplete");
+  const _component_Check = resolveComponent("Check");
   const _component_ElButton = resolveComponent("ElButton");
   const _component_Plus = resolveComponent("Plus");
   const _component_Location = resolveComponent("Location");
@@ -469,8 +471,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     class: "ele-map-view"
   }, {
     default: withCtx(() => [
-      createElementVNode("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
+      createElementVNode("div", {
+        class: "ele-map-view-header",
+        style: normalizeStyle(_ctx.headerStyle)
+      }, [
+        createElementVNode("div", _hoisted_1, [
           _ctx.keywordMode ? (openBlock(), createBlock(_component_ElInput, {
             key: 0,
             clearable: "",
@@ -482,7 +487,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             prefix: withCtx(() => [
               createVNode(_component_ElIcon, { class: "el-input__icon" }, {
                 default: withCtx(() => [
-                  createVNode(_component_Search)
+                  createVNode(_component_Search, { style: { "transform": "scale(1.1)" } })
                 ]),
                 _: 1
               })
@@ -500,16 +505,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             prefix: withCtx(() => [
               createVNode(_component_ElIcon, { class: "el-input__icon" }, {
                 default: withCtx(() => [
-                  createVNode(_component_Search)
+                  createVNode(_component_Search, { style: { "transform": "scale(1.1)" } })
                 ]),
                 _: 1
               })
             ]),
+            default: withCtx(({ item }) => [
+              createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1),
+              createElementVNode("span", _hoisted_3, "(" + toDisplayString(item.district) + ")", 1)
+            ]),
             _: 1
           }, 8, ["modelValue", "fetchSuggestions", "placeholder", "onSelect"]))
         ]),
         createVNode(_component_ElButton, {
-          icon: _ctx.Check,
           type: "primary",
           disabled: _ctx.disabled,
           loading: _ctx.confirmLoading,
@@ -517,16 +525,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: _ctx.onConfirm
         }, {
           default: withCtx(() => [
-            createTextVNode(toDisplayString(_ctx.okText), 1)
+            createVNode(_component_ElIcon, null, {
+              default: withCtx(() => [
+                createVNode(_component_Check, { style: { "transform": "scale(1.2)" } })
+              ]),
+              _: 1
+            }),
+            createElementVNode("span", null, toDisplayString(_ctx.okText), 1)
           ]),
           _: 1
-        }, 8, ["icon", "disabled", "loading", "onClick"])
-      ]),
+        }, 8, ["disabled", "loading", "onClick"])
+      ], 4),
       createElementVNode("div", {
         class: "ele-map-view-body",
         style: normalizeStyle({ height: _ctx.height })
       }, [
-        createElementVNode("div", _hoisted_3, [
+        createElementVNode("div", _hoisted_4, [
           createElementVNode("div", {
             ref: "mapRef",
             style: normalizeStyle({ height: _ctx.height })
@@ -541,13 +555,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("img", {
               src: _ctx.markerSrc,
               class: normalizeClass(_ctx.centerIconClass)
-            }, null, 10, _hoisted_4)
+            }, null, 10, _hoisted_5)
           ], 64)) : createCommentVNode("", true)
         ]),
-        createElementVNode("div", _hoisted_5, [
+        createElementVNode("div", _hoisted_6, [
           createVNode(_component_EleLoading, {
             loading: _ctx.poiLoading,
-            class: "ele-map-view-list ele-scrollbar-hover ele-scrollbar-mini"
+            class: "ele-map-view-list"
           }, {
             default: withCtx(() => [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
@@ -562,24 +576,24 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     ]),
                     _: 1
                   }),
-                  createElementVNode("div", _hoisted_7, toDisplayString(item.name), 1),
-                  item.address ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(item.address), 1)) : createCommentVNode("", true),
+                  createElementVNode("div", _hoisted_8, toDisplayString(item.name), 1),
+                  item.address ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(item.address), 1)) : createCommentVNode("", true),
                   createVNode(_component_ElIcon, { class: "ele-map-view-item-radio" }, {
                     default: withCtx(() => [
                       createVNode(_component_CircleCheck)
                     ]),
                     _: 1
                   })
-                ], 10, _hoisted_6);
+                ], 10, _hoisted_7);
               }), 128)),
-              !_ctx.data || !_ctx.data.length ? (openBlock(), createElementBlock("div", _hoisted_9, [
+              !_ctx.data || !_ctx.data.length ? (openBlock(), createElementBlock("div", _hoisted_10, [
                 createVNode(_component_ElEmpty, mergeProps({ imageSize: 80 }, _ctx.emptyProps), null, 16)
               ])) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["loading"]),
-          _ctx.disabled ? (openBlock(), createElementBlock("div", _hoisted_10, [
-            createElementVNode("div", _hoisted_11, toDisplayString(_ctx.message), 1)
+          _ctx.disabled ? (openBlock(), createElementBlock("div", _hoisted_11, [
+            createElementVNode("div", _hoisted_12, toDisplayString(_ctx.message), 1)
           ])) : createCommentVNode("", true)
         ])
       ], 4)

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

@@ -3,14 +3,14 @@ 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<{
+declare const _default: import("vue").DefineComponent<{
     modelValue: BooleanConstructor;
     modalProps: import("vue").PropType<Partial<Omit<import("../ele-modal/props").ModalProps, "modelValue">>>;
     responsive: {
         type: BooleanConstructor;
         default: null;
     };
-    locale: import("vue").PropType<MapLocale>;
+    locale: import("vue").PropType<Partial<MapLocale>>;
     height: {
         type: StringConstructor;
         default: string;
@@ -64,9 +64,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
     mapStyle: StringConstructor;
     darkMode: BooleanConstructor;
     okText: StringConstructor;
-    emptyProps: import("vue").PropType<Partial<import("element-plus").EmptyProps>>;
+    emptyProps: import("vue").PropType<import("../ele-app/types").ElEmptyProps>;
+    headerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
 }, {
-    mapRef: Ref<any>;
+    mapRef: Ref<MapViewInstance>;
     lang: import("vue").ComputedRef<MapLocale>;
     isResponsive: import("vue").ComputedRef<boolean>;
     aMapKey: import("vue").ComputedRef<string | undefined>;
@@ -87,7 +88,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: null;
     };
-    locale: import("vue").PropType<MapLocale>;
+    locale: import("vue").PropType<Partial<MapLocale>>;
     height: {
         type: StringConstructor;
         default: string;
@@ -141,18 +142,19 @@ declare const _sfc_main: import("vue").DefineComponent<{
     mapStyle: StringConstructor;
     darkMode: BooleanConstructor;
     okText: StringConstructor;
-    emptyProps: import("vue").PropType<Partial<import("element-plus").EmptyProps>>;
+    emptyProps: import("vue").PropType<import("../ele-app/types").ElEmptyProps>;
+    headerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
 }>> & {
-    onDone?: ((_result: CenterPoint) => any) | undefined;
-    onMapDone?: ((_ins: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
     onOpen?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
+    onDone?: ((_result: CenterPoint) => any) | undefined;
+    onMapDone?: ((_ins: any) => any) | undefined;
 }, {
     required: boolean;
-    responsive: boolean;
     modelValue: boolean;
     height: string;
+    responsive: boolean;
     zoom: number;
     selectedZoom: number;
     poiLimit: number;
@@ -166,4 +168,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     mapVersion: string;
     darkMode: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

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

@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue';
-import type { EmptyProps } from 'element-plus';
+import type { StyleValue, ElEmptyProps } from '../ele-app/types';
 import type { ModalProps } from '../ele-modal/props';
 import type { MapLocale, CenterPoint } from './types';
 /**
@@ -59,7 +59,8 @@ export declare const mapProps: {
     mapStyle: StringConstructor;
     darkMode: BooleanConstructor;
     okText: StringConstructor;
-    emptyProps: PropType<Partial<EmptyProps>>;
+    emptyProps: PropType<ElEmptyProps>;
+    headerStyle: PropType<StyleValue>;
 };
 export declare const mapPickerProps: {
     modelValue: BooleanConstructor;
@@ -68,7 +69,7 @@ export declare const mapPickerProps: {
         type: BooleanConstructor;
         default: null;
     };
-    locale: PropType<MapLocale>;
+    locale: PropType<Partial<MapLocale>>;
     height: {
         type: StringConstructor;
         default: string;
@@ -122,7 +123,8 @@ export declare const mapPickerProps: {
     mapStyle: StringConstructor;
     darkMode: BooleanConstructor;
     okText: StringConstructor;
-    emptyProps: PropType<Partial<EmptyProps>>;
+    emptyProps: PropType<ElEmptyProps>;
+    headerStyle: PropType<StyleValue>;
 };
 export type MapPickerProps = ExtractPropTypes<typeof mapPickerProps>;
 export type MapProps = ExtractPropTypes<typeof mapProps>;

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

@@ -73,7 +73,9 @@ const mapProps = {
   // 完成按钮文字
   okText: String,
   // 空组件属性
-  emptyProps: Object
+  emptyProps: Object,
+  // 自定义header样式
+  headerStyle: Object
 };
 const mapPickerProps = {
   ...mapProps,

package/es/ele-map-picker/style/css-var.scss

@@ -0,0 +1,7 @@
+@use '../../style/util.scss' as *;
+
+@mixin set-map-var($var) {
+  .ele-map-picker {
+    @include set-ele-var('map', $var);
+  }
+}