ele-admin-plus 1.1.9-beta.1 → 1.1.9-beta.11

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

@@ -4,193 +4,234 @@
 
 @include set-map-var($ele);
 
-.ele-map-picker > .el-dialog__body > div.ele-modal-body {
+.ele-modal .ele-map-picker .ele-modal-body {
   padding: 0;
 }
 
-/* 工具栏 */
-.ele-map-view-header {
+.ele-map-picker {
+  overflow: hidden;
+}
+
+/* 主体区域 */
+.ele-map-view {
   display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: eleVar('map', 'header-padding');
+}
 
-  .ele-map-view-search {
-    flex: 1;
-    padding-right: 14px;
-    box-sizing: border-box;
+/* 地图容器 */
+.ele-map-view-body {
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+}
 
-    .el-autocomplete,
-    .el-input {
-      width: 100%;
-      max-width: 220px;
-    }
-  }
+/* 地图中心图标 */
+.ele-map-view-body-icon {
+  width: 26px;
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  margin-left: -13px;
+}
 
-  .ele-map-view-btn-ok {
-    padding-left: 9px;
-    padding-right: 11px;
-  }
+.ele-map-view-icon-plus {
+  color: #1677ff;
+  font-size: 14px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
-/* 地图 */
-.ele-map-view-body {
+/* 列表区域 */
+.ele-map-view-side {
+  width: 40%;
+  height: 100%;
+  flex-shrink: 0;
   display: flex;
-  border-bottom-left-radius: eleVar('modal', 'radius');
-  border-bottom-right-radius: eleVar('modal', 'radius');
-  overflow: hidden;
-
-  .ele-map-view-main {
-    flex: 1;
-    position: relative;
-    box-sizing: border-box;
-  }
+  flex-direction: column;
+  box-sizing: border-box;
+}
 
-  .ele-map-view-main-icon {
-    width: 26px;
-    position: absolute;
-    left: 50%;
-    bottom: 50%;
-    margin-left: -13px;
-  }
+/* 列表顶部搜索框 */
+.ele-map-view-search {
+  flex-shrink: 0;
+  padding: eleVar('map', 'search-padding');
+  box-sizing: border-box;
 
-  .ele-map-view-icon-plus {
-    color: #1677ff;
-    font-size: 14px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  .el-autocomplete,
+  .el-input {
+    width: 100%;
   }
+}
 
-  /* 右侧 */
-  .ele-map-view-side {
-    width: 300px;
-    flex-shrink: 0;
-    border-top: 1px solid elVar('border-color', 'light');
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-  }
+/* 列表底部提示信息 */
+.ele-map-view-extra {
+  flex-shrink: 0;
+  padding: 6px 12px;
+  box-sizing: border-box;
 
-  /* 提示信息 */
-  .ele-map-view-extra {
-    flex-shrink: 0;
-    padding: 6px 12px;
-    box-sizing: border-box;
+  /* 确定按钮 */
+  .ele-map-view-btn-ok {
+    width: 100%;
+    display: block;
   }
+}
 
-  .ele-map-view-message {
-    padding: 4px 8px;
-    box-sizing: border-box;
-    color: elVar('color-error');
-    font-size: elVar('font-size', 'small');
-    background: elVar('color-error', 'light-9');
-    border: 1px solid elVar('color-error', 'light-8');
-    border-radius: elVar('border-radius', 'base');
-    text-align: center;
-  }
+.ele-map-view-message {
+  padding: 4px 8px;
+  box-sizing: border-box;
+  color: elVar('color-error');
+  font-size: elVar('font-size', 'small');
+  background: elVar('color-error', 'light-9');
+  border: 1px solid elVar('color-error', 'light-8');
+  border-radius: elVar('border-radius', 'base');
+  text-align: center;
+}
 
-  /* 空图标 */
-  .ele-map-view-empty {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
+/* 列表空图标 */
+.ele-map-view-empty {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 
-  /* poi列表 */
-  .ele-map-view-list {
-    flex: 1;
-    box-sizing: border-box;
-    overflow: auto;
-    overflow: overlay;
-  }
+/* poi列表 */
+.ele-map-view-list {
+  flex: 1;
+  box-sizing: border-box;
+  overflow: auto;
+}
 
-  .ele-map-view-item {
-    padding: 8px 26px 8px 38px;
-    border-bottom: 1px solid elVar('border-color', 'light');
-    transition: background-color $ele-transition;
-    box-sizing: border-box;
-    position: relative;
-    cursor: pointer;
+.ele-map-view-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 14px;
+  transition: background-color $ele-transition;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
 
-    &:hover {
-      background: elVar('fill-color', 'light');
-    }
+  &:hover {
+    background: elVar('fill-color', 'light');
   }
 
-  .ele-map-view-item-icon {
-    font-size: 20px;
-    color: elVar('text-color', 'secondary');
+  & + .ele-map-view-item::before {
+    content: '';
+    border-top: 1px solid elVar('border-color', 'light');
     position: absolute;
-    top: 50%;
+    top: 0;
     left: 12px;
-    transform: translateY(-50%);
+    right: 12px;
   }
+}
 
-  .ele-map-view-item-title {
-    font-size: elVar('font-size', 'base');
-  }
+.ele-map-view-item-body {
+  flex: 1;
+  padding: 0 0 0 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
 
-  .ele-map-view-item-text {
-    color: elVar('text-color', 'secondary');
-    font-size: elVar('font-size', 'extra-small');
-    margin-top: 2px;
-  }
+.ele-map-view-item-title {
+  font-size: elVar('font-size', 'base');
+  word-break: break-all;
+}
 
-  .ele-map-view-item-radio {
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
-    color: elVar('color-primary');
-    font-size: 14px;
-    display: none;
-  }
+.ele-map-view-item-text {
+  color: elVar('text-color', 'secondary');
+  font-size: elVar('font-size', 'extra-small');
+  word-break: break-all;
+  margin-top: 2px;
+}
 
-  .ele-map-view-item.is-active .ele-map-view-item-radio {
-    display: block;
-  }
+.ele-map-view-item-icon {
+  flex-shrink: 0;
+  font-size: 18px;
+  color: elVar('text-color', 'secondary');
+}
 
-  /* 地图图标跳动动画 */
-  .ele-map-view-anim-bounce {
-    animation: mapAnimBounce 500ms;
-    animation-direction: alternate;
-  }
+.ele-map-view-item-radio {
+  font-size: 14px;
+  color: elVar('color-primary');
+  margin: 0 -4px 0 0;
+  visibility: hidden;
 }
 
-@keyframes mapAnimBounce {
-  0%,
-  60%,
-  75%,
-  90%,
-  to {
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
+.ele-map-view-item.is-active .ele-map-view-item-radio {
+  visibility: visible;
+}
 
-  0%,
-  to {
-    transform: translate3d(0, 0, 0);
+/* 地图底部提示信息 */
+.ele-map-view-body {
+  & > .ele-map-view-search {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    padding: 8px;
+    width: 228px;
+    max-width: calc(100% - 16px);
+    background: elVar('bg-color');
+    box-shadow: elVar('box-shadow', 'lighter');
+    border-radius: elVar('border-radius', 'base');
   }
 
-  25% {
-    transform: translate3d(0, -10px, 0);
+  & > .ele-map-view-message,
+  & > .ele-map-view-btn-ok {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: max-content;
+    max-width: calc(100% - 32px);
+    box-shadow: elVar('box-shadow', 'light');
   }
 
-  50% {
-    transform: translate3d(0, -20px, 0);
+  & > .ele-map-view-btn-ok {
+    width: 120px;
+    border-radius: 32px;
   }
+}
 
-  75% {
-    transform: translate3d(0, -10px, 0);
-  }
+/* 搜索建议列表 */
+.ele-map-suggest-popper.el-popper .el-autocomplete-suggestion__list > li {
+  height: auto;
+}
+
+.ele-map-suggest-item {
+  line-height: normal;
+  box-sizing: border-box;
+  padding: 6px 0;
+}
+
+.ele-map-suggest-title {
+  word-break: break-all;
 }
 
 .ele-map-suggest-text {
   color: elVar('text-color', 'secondary');
   font-size: elVar('font-size', 'small');
-  margin-left: 6px;
+  word-break: break-all;
+  margin-top: 2px;
+}
+
+/* 地图图标跳动动画 */
+.ele-map-view-anim-bounce {
+  animation: mapAnimBounce 0.6s;
+}
+
+@keyframes mapAnimBounce {
+  from,
+  to {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-20px);
+  }
 }
 
 /* 小屏幕适应 */
@@ -198,10 +239,11 @@
   .ele-map-picker.is-responsive {
     top: 0 !important;
     left: 0 !important;
+    margin: 0 !important;
     width: 100% !important;
     max-width: 100% !important;
     height: 100% !important;
-    margin: 0 !important;
+    border-radius: 0 !important;
     display: flex !important;
     flex-direction: column !important;
 
@@ -220,33 +262,20 @@
     }
 
     .ele-map-view {
-      display: flex;
+      height: 100% !important;
       flex-direction: column;
-      height: 100%;
-
-      .ele-map-view-header {
-        flex-shrink: 0;
-      }
-
-      .ele-map-view-body {
-        flex: 1;
-        flex-direction: column;
-        overflow: hidden;
-        height: auto;
+    }
 
-        .ele-map-view-main {
-          flex: none;
+    .ele-map-view-body {
+      height: auto;
+    }
 
-          & > div {
-            height: 240px !important;
-          }
-        }
+    .ele-map-view-side {
+      width: 100%;
+      height: 68%;
 
-        .ele-map-view-side {
-          flex: 1;
-          width: auto;
-          overflow: hidden;
-        }
+      & > .ele-map-view-search {
+        padding-top: 6px;
       }
     }
   }

package/lib/ele-map-picker/types.d.ts

@@ -43,13 +43,11 @@ export interface PoiLocation {
  */
 export interface PoiItem {
   /** 地点名称 */
-  name: string;
+  name?: string;
   /** 详细地址 */
-  address: string;
+  address?: string;
   /** 经纬度坐标 */
   location: PoiLocation;
-  /** 是否选中 */
-  selected?: boolean;
   /** 数据唯一标识 */
   id?: string;
   /** 输入建议唯一标识 */
@@ -62,6 +60,11 @@ export interface PoiItem {
   value?: string;
 }
 
+/**
+ * 位置选择模式
+ */
+export type SelectMode = 'lnglat' | 'poi' | 'keyword';
+
 /**
  * 实例
  */
@@ -90,4 +93,5 @@ export interface MapLocale {
   placeholder: string;
   message: string;
   ok: string;
+  clickMessage: string;
 }

package/lib/ele-menus/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 const vue = require("vue");
 const elementPlus = require("element-plus");
-const receiver = require("../ele-config-provider/receiver");
+const EleTooltip = require("../ele-tooltip/index");
 const core = require("../utils/core");
 const icons = require("../icons");
 const util = require("./util");
@@ -11,10 +11,13 @@ const index = vue.defineComponent({
   props: props.menusProps,
   emits: props.menusEmits,
   setup(props$1, { slots, emit, expose }) {
-    const { authenticated } = receiver.useLicense();
+    const isWebkit = navigator.userAgent.includes("WebKit");
     const menuRef = vue.ref(null);
     const ellipsisRef = vue.ref(null);
     const sliceIndex = vue.ref(-1);
+    const tooltipVirtualRef = vue.ref();
+    const tooltipContent = vue.ref("");
+    const tooltipVisible = vue.ref(false);
     const isHorizontal = vue.computed(() => props$1.mode === "horizontal");
     const { observe, unobserve, computedEllipsis } = util.useMenuEllipsis({
       getMenuEl: () => {
@@ -58,8 +61,44 @@ const index = vue.defineComponent({
         }
       }
     );
-    const onItemClick = (item) => {
-      emit("itemClick", item);
+    const triggerTooltip = (e) => {
+      var _a;
+      if (props$1.textEllipsisTooltip) {
+        const itemEl = (_a = e.currentTarget) == null ? void 0 : _a.parentNode;
+        if (itemEl) {
+          const titleEl = itemEl.querySelector(`.${util.titleClass}`);
+          const text = titleEl == null ? void 0 : titleEl.innerText;
+          if (text && core.contentIsEllipsis(titleEl, "horizontal")) {
+            tooltipVirtualRef.value = itemEl;
+            tooltipContent.value = text;
+            tooltipVisible.value = true;
+            return;
+          }
+        }
+      }
+      hideTooltip();
+    };
+    const hideTooltip = () => {
+      tooltipVisible.value = false;
+    };
+    const onItemClick = (item, e) => {
+      emit("itemClick", item, e);
+    };
+    const onItemMouseenter = (item, e) => {
+      triggerTooltip(e);
+      emit("itemMouseenter", item, e);
+    };
+    const onItemMouseleave = (item, e) => {
+      hideTooltip();
+      emit("itemMouseleave", item, e);
+    };
+    const onParentMouseenter = (item, e) => {
+      triggerTooltip(e);
+      emit("parentMouseenter", item, e);
+    };
+    const onParentMouseleave = (item, e) => {
+      hideTooltip();
+      emit("parentMouseleave", item, e);
     };
     const exposeValue = {
       menuRef,
@@ -83,11 +122,11 @@ const index = vue.defineComponent({
           ref: menuRef,
           ellipsis: false,
           class: [
-            { "ele-menu": authenticated.value },
-            { "ele-menu-dark": authenticated.value && props$1.theme === "dark" },
-            { "is-night": authenticated.value && props$1.theme === "dark" },
-            { "ele-menu-colorful": authenticated.value && props$1.colorful },
-            { "is-colorful": authenticated.value && props$1.colorful }
+            "ele-menu",
+            { "ele-menu-dark": props$1.theme === "dark" },
+            { "is-night": props$1.theme === "dark" },
+            { "ele-menu-colorful": props$1.colorful },
+            { "is-colorful": props$1.colorful }
           ],
           onOpen: (index2, indexPath) => {
             emit("open", index2, indexPath);
@@ -116,7 +155,12 @@ const index = vue.defineComponent({
             props$1.popupColorful,
             props$1.firstPopperClass,
             true,
-            onItemClick
+            onItemClick,
+            onItemMouseenter,
+            onItemMouseleave,
+            isWebkit,
+            onParentMouseenter,
+            onParentMouseleave
           );
           if (moreItems) {
             const ellipsisProps = props$1.ellipsisProps || {};
@@ -127,7 +171,8 @@ const index = vue.defineComponent({
               props$1.colorful,
               props$1.popupColorful,
               props$1.firstPopperClass,
-              true
+              true,
+              isWebkit
             );
             nodes.push(
               vue.h(
@@ -154,7 +199,12 @@ const index = vue.defineComponent({
                       props$1.popupColorful,
                       props$1.firstPopperClass,
                       false,
-                      onItemClick
+                      onItemClick,
+                      onItemMouseenter,
+                      onItemMouseleave,
+                      isWebkit,
+                      onParentMouseenter,
+                      onParentMouseleave
                     );
                   },
                   title: () => {
@@ -169,6 +219,20 @@ const index = vue.defineComponent({
               )
             );
           }
+          if (props$1.textEllipsisTooltip) {
+            nodes.push(
+              vue.h(EleTooltip, {
+                trigger: "click",
+                placement: "right",
+                persistent: false,
+                ...props$1.textEllipsisTooltip === true ? {} : props$1.textEllipsisTooltip,
+                virtualTriggering: true,
+                virtualRef: tooltipVirtualRef.value,
+                content: tooltipContent.value,
+                visible: tooltipVisible.value
+              })
+            );
+          }
           return nodes;
         }
       );

package/lib/ele-menus/index.d.ts

@@ -1,7 +1,8 @@
-import type { NavigationFailure } from 'vue-router';
-import type { MenuItemClicked } from 'element-plus';
-import type { ElMenuInstance } from '../ele-app/el';
-declare const _default: import("vue").DefineComponent<{
+import { ElMenuInstance } from '../ele-app/el';
+import { MenuItemClicked } from 'element-plus';
+import { NavigationFailure } from 'vue-router';
+
+declare const _default: import('vue').DefineComponent<{
     items: {
         type: import("vue").PropType<import("./types").MenuItem[]>;
         required: boolean;
@@ -19,6 +20,7 @@ declare const _default: import("vue").DefineComponent<{
     firstPopperClass: StringConstructor;
     tooltipDisabled: BooleanConstructor;
     ellipsisProps: import("vue").PropType<import("./types").EllipsisProps>;
+    textEllipsisTooltip: import("vue").PropType<boolean | Partial<import("../ele-tooltip/props").TooltipProps>>;
     mode: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
     defaultActive: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     defaultOpeneds: import("element-plus/es/utils/index").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
@@ -43,7 +45,12 @@ declare const _default: import("vue").DefineComponent<{
     open: (index: string) => void;
     close: (index: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    itemClick: (_item: import("./types").MenuItem) => boolean;
+    /** 文本溢出提示是否显示 */
+    itemClick: (_item: import("./types").MenuItem, _e: MouseEvent) => boolean; /** 是否是水平菜单 */
+    itemMouseenter: (_item: import("./types").MenuItem, _e: MouseEvent) => boolean;
+    itemMouseleave: (_item: import("./types").MenuItem, _e: MouseEvent) => boolean;
+    parentMouseenter: (_item: import("./types").MenuItem, _e: MouseEvent) => boolean;
+    parentMouseleave: (_item: import("./types").MenuItem, _e: MouseEvent) => boolean;
     close: (index: string, indexPath: string[]) => boolean;
     open: (index: string, indexPath: string[]) => boolean;
     select: (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => boolean;
@@ -65,6 +72,7 @@ declare const _default: import("vue").DefineComponent<{
     firstPopperClass: StringConstructor;
     tooltipDisabled: BooleanConstructor;
     ellipsisProps: import("vue").PropType<import("./types").EllipsisProps>;
+    textEllipsisTooltip: import("vue").PropType<boolean | Partial<import("../ele-tooltip/props").TooltipProps>>;
     mode: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, "horizontal" | "vertical", unknown, "vertical", boolean>;
     defaultActive: import("element-plus/es/utils/index").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     defaultOpeneds: import("element-plus/es/utils/index").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
@@ -85,10 +93,14 @@ declare const _default: import("vue").DefineComponent<{
     showTimeout: import("element-plus/es/utils/index").EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
     hideTimeout: import("element-plus/es/utils/index").EpPropFinalized<NumberConstructor, unknown, unknown, 300, boolean>;
 }>> & {
+    onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
     onOpen?: ((index: string, indexPath: string[]) => any) | undefined;
     onClose?: ((index: string, indexPath: string[]) => any) | undefined;
-    onSelect?: ((index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure> | undefined) => any) | undefined;
-    onItemClick?: ((_item: import("./types").MenuItem) => any) | undefined;
+    onItemClick?: ((_item: import("./types").MenuItem, _e: MouseEvent) => any) | undefined;
+    onItemMouseenter?: ((_item: import("./types").MenuItem, _e: MouseEvent) => any) | undefined;
+    onItemMouseleave?: ((_item: import("./types").MenuItem, _e: MouseEvent) => any) | undefined;
+    onParentMouseenter?: ((_item: import("./types").MenuItem, _e: MouseEvent) => any) | undefined;
+    onParentMouseleave?: ((_item: import("./types").MenuItem, _e: MouseEvent) => any) | undefined;
 }, {
     showTimeout: number;
     hideTimeout: number;