yuang-framework-ui-pc 1.1.44 → 1.1.45

package/{lib/ele-ellipsis → es/ele-avatar-group}/index.d.ts

@@ -1,164 +1,246 @@
 import { StyleValue } from '../ele-app/types';
-import { EleTextProps, EleTextInstance } from '../ele-app/plus';
-import { EllipsisTooltip } from './types';
+import { AvatarItem, AvatarErrorOption } from './types';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    maxLine: NumberConstructor;
-    lineHeight: (NumberConstructor | StringConstructor)[];
+    data: {
+        type: import('vue').PropType<AvatarItem[]>;
+        required: boolean;
+    };
+    maxCount: NumberConstructor;
+    shape: import('vue').PropType<import('../ele-app/el').ElAvatarProps["shape"]>;
+    size: import('vue').PropType<import('../ele-app/el').ElAvatarProps["size"]>;
+    itemStyle: import('vue').PropType<StyleValue>;
+    avatarStyle: import('vue').PropType<StyleValue>;
+    moreStyle: import('vue').PropType<StyleValue>;
     tooltip: {
-        type: import('vue').PropType<boolean | EllipsisTooltip>;
-        default: () => {
-            original: boolean;
-        };
+        type: BooleanConstructor;
+        default: boolean;
     };
-    tag: {
-        type: StringConstructor;
-        default: string;
+    tooltipProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
+    overflowPopover: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    type: import('vue').PropType<import('../ele-text/types').TextType>;
-    size: import('vue').PropType<import('../ele-text/types').TextSize>;
-    deleted: BooleanConstructor;
-    underline: BooleanConstructor;
-    strong: BooleanConstructor;
-    italic: BooleanConstructor;
-    icon: import('vue').PropType<import('../ele-text/types').TextIcon>;
-    iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
-    iconStyle: import('vue').PropType<StyleValue>;
+    overflowPopoverProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
+    hoverOpen: BooleanConstructor;
 }>, {
-    textRef: import('vue').Ref<EleTextInstance, EleTextInstance>;
-    virtualRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
-    tooltipProps: import('vue').ComputedRef<Partial<import('../ele-tooltip/props').TooltipProps>>;
-    multiLine: import('vue').ComputedRef<boolean>;
-    textProps: import('vue').ComputedRef<EleTextProps>;
-    rootStyle: import('vue').ComputedRef<Partial<import('vue').CSSProperties>>;
-    handleHover: (e: MouseEvent) => void;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    maxLine: NumberConstructor;
-    lineHeight: (NumberConstructor | StringConstructor)[];
+    tooltipContent: import('vue').Ref<string, string>;
+    virtualRef: import('vue').Ref<any, any>;
+    overflowVisible: import('vue').Ref<boolean, boolean>;
+    commonStyle: import('vue').ComputedRef<Partial<import('vue').CSSProperties>>;
+    isOverflow: import('vue').ComputedRef<boolean>;
+    avatarData: import('vue').ComputedRef<AvatarItem[]>;
+    overflowCount: import('vue').ComputedRef<number>;
+    overflowData: import('vue').ComputedRef<AvatarItem[]>;
+    handleItemHover: (item: AvatarItem, e: MouseEvent) => void;
+    handleItemClick: (item: AvatarItem) => void;
+    handleMoreClick: () => void;
+    handleError: (option: AvatarErrorOption) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_item: AvatarItem) => boolean;
+    moreClick: () => boolean;
+    error: (_option: AvatarErrorOption) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: {
+        type: import('vue').PropType<AvatarItem[]>;
+        required: boolean;
+    };
+    maxCount: NumberConstructor;
+    shape: import('vue').PropType<import('../ele-app/el').ElAvatarProps["shape"]>;
+    size: import('vue').PropType<import('../ele-app/el').ElAvatarProps["size"]>;
+    itemStyle: import('vue').PropType<StyleValue>;
+    avatarStyle: import('vue').PropType<StyleValue>;
+    moreStyle: import('vue').PropType<StyleValue>;
     tooltip: {
-        type: import('vue').PropType<boolean | EllipsisTooltip>;
-        default: () => {
-            original: boolean;
-        };
+        type: BooleanConstructor;
+        default: boolean;
     };
-    tag: {
-        type: StringConstructor;
-        default: string;
+    tooltipProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
+    overflowPopover: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-    type: import('vue').PropType<import('../ele-text/types').TextType>;
-    size: import('vue').PropType<import('../ele-text/types').TextSize>;
-    deleted: BooleanConstructor;
-    underline: BooleanConstructor;
-    strong: BooleanConstructor;
-    italic: BooleanConstructor;
-    icon: import('vue').PropType<import('../ele-text/types').TextIcon>;
-    iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
-    iconStyle: import('vue').PropType<StyleValue>;
-}>> & Readonly<{}>, {
-    tag: string;
-    tooltip: boolean | EllipsisTooltip;
-    underline: boolean;
-    strong: boolean;
-    italic: boolean;
-    deleted: boolean;
+    overflowPopoverProps: import('vue').PropType<import('../ele-app/plus').EleTooltipProps>;
+    hoverOpen: BooleanConstructor;
+}>> & Readonly<{
+    onError?: ((_option: AvatarErrorOption) => any) | undefined;
+    onItemClick?: ((_item: AvatarItem) => any) | undefined;
+    onMoreClick?: (() => any) | undefined;
+}>, {
+    tooltip: boolean;
+    overflowPopover: boolean;
+    hoverOpen: boolean;
 }, {}, {
-    EleText: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-        tag: {
-            type: StringConstructor;
-            default: string;
-        };
-        type: import('vue').PropType<import('../ele-text/types').TextType>;
-        size: import('vue').PropType<import('../ele-text/types').TextSize>;
-        deleted: BooleanConstructor;
-        underline: BooleanConstructor;
-        strong: BooleanConstructor;
-        italic: BooleanConstructor;
-        icon: import('vue').PropType<import('../ele-text/types').TextIcon>;
-        iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
-        iconStyle: import('vue').PropType<StyleValue>;
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-        tag: {
-            type: StringConstructor;
-            default: string;
-        };
-        type: import('vue').PropType<import('../ele-text/types').TextType>;
-        size: import('vue').PropType<import('../ele-text/types').TextSize>;
-        deleted: BooleanConstructor;
-        underline: BooleanConstructor;
-        strong: BooleanConstructor;
-        italic: BooleanConstructor;
-        icon: import('vue').PropType<import('../ele-text/types').TextIcon>;
-        iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
-        iconStyle: import('vue').PropType<StyleValue>;
-    }>> & Readonly<{}>, {
-        tag: string;
-        underline: boolean;
-        strong: boolean;
-        italic: boolean;
-        deleted: boolean;
-    }, {}, {
-        ElIcon: {
-            new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
-                readonly size: {
-                    readonly type: import('vue').PropType<string | number>;
-                    readonly required: false;
-                    readonly validator: ((val: unknown) => boolean) | undefined;
-                    __epPropKey: true;
-                };
-                readonly color: {
-                    readonly type: import('vue').PropType<string>;
-                    readonly required: false;
-                    readonly validator: ((val: unknown) => boolean) | undefined;
-                    __epPropKey: true;
-                };
-            }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
-                P: {};
-                B: {};
-                D: {};
-                C: {};
-                M: {};
-                Defaults: {};
-            }, Readonly<import('vue').ExtractPropTypes<{
-                readonly size: {
-                    readonly type: import('vue').PropType<string | number>;
-                    readonly required: false;
-                    readonly validator: ((val: unknown) => boolean) | undefined;
-                    __epPropKey: true;
-                };
-                readonly color: {
-                    readonly type: import('vue').PropType<string>;
-                    readonly required: false;
-                    readonly validator: ((val: unknown) => boolean) | undefined;
-                    __epPropKey: true;
-                };
-            }>>, {}, {}, {}, {}, {}>;
-            __isFragment?: never;
-            __isTeleport?: never;
-            __isSuspense?: never;
-        } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    ElAvatar: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
             readonly size: {
-                readonly type: import('vue').PropType<string | number>;
+                readonly type: import('vue').PropType<number | "" | "small" | "default" | "large">;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
+            } & {
+                readonly default: "";
+            };
+            readonly shape: {
+                readonly type: import('vue').PropType<"circle" | "square">;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: "circle";
             };
-            readonly color: {
+            readonly icon: {
+                readonly type: import('vue').PropType<string | import('vue').Component>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly src: {
                 readonly type: import('vue').PropType<string>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
+            } & {
+                readonly default: "";
             };
-        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-            $slots: {
-                default?(_: {}): any;
+            readonly alt: StringConstructor;
+            readonly srcSet: StringConstructor;
+            readonly fit: {
+                readonly type: import('vue').PropType<any>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: "cover";
             };
-        }) & import('vue').Plugin;
-    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        }>> & {
+            onError?: ((evt: Event) => any) | undefined;
+        }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            error: (evt: Event) => void;
+        }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {
+            readonly size: number | "" | "small" | "default" | "large";
+            readonly shape: "circle" | "square";
+            readonly src: string;
+            readonly fit: any;
+        }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            readonly size: {
+                readonly type: import('vue').PropType<number | "" | "small" | "default" | "large">;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: "";
+            };
+            readonly shape: {
+                readonly type: import('vue').PropType<"circle" | "square">;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: "circle";
+            };
+            readonly icon: {
+                readonly type: import('vue').PropType<string | import('vue').Component>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly src: {
+                readonly type: import('vue').PropType<string>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: "";
+            };
+            readonly alt: StringConstructor;
+            readonly srcSet: StringConstructor;
+            readonly fit: {
+                readonly type: import('vue').PropType<any>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: "cover";
+            };
+        }>> & {
+            onError?: ((evt: Event) => any) | undefined;
+        }, {}, {}, {}, {}, {
+            readonly size: number | "" | "small" | "default" | "large";
+            readonly shape: "circle" | "square";
+            readonly src: string;
+            readonly fit: any;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        readonly size: {
+            readonly type: import('vue').PropType<number | "" | "small" | "default" | "large">;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        } & {
+            readonly default: "";
+        };
+        readonly shape: {
+            readonly type: import('vue').PropType<"circle" | "square">;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        } & {
+            readonly default: "circle";
+        };
+        readonly icon: {
+            readonly type: import('vue').PropType<string | import('vue').Component>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        readonly src: {
+            readonly type: import('vue').PropType<string>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        } & {
+            readonly default: "";
+        };
+        readonly alt: StringConstructor;
+        readonly srcSet: StringConstructor;
+        readonly fit: {
+            readonly type: import('vue').PropType<any>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        } & {
+            readonly default: "cover";
+        };
+    }>> & {
+        onError?: ((evt: Event) => any) | undefined;
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        error: (evt: Event) => void;
+    }, string, {
+        readonly size: number | "" | "small" | "default" | "large";
+        readonly shape: "circle" | "square";
+        readonly src: string;
+        readonly fit: any;
+    }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) & import('vue').Plugin;
     EleTooltip: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         bodyStyle: import('vue').PropType<StyleValue>;
         bg: StringConstructor;
         arrowBg: StringConstructor;
-        width: (NumberConstructor | StringConstructor)[];
+        width: (StringConstructor | NumberConstructor)[];
         isPopover: BooleanConstructor;
         showAfter: {
             readonly type: import('vue').PropType<number>;
@@ -331,7 +413,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         bodyStyle: import('vue').PropType<StyleValue>;
         bg: StringConstructor;
         arrowBg: StringConstructor;
-        width: (NumberConstructor | StringConstructor)[];
+        width: (StringConstructor | NumberConstructor)[];
         isPopover: BooleanConstructor;
         showAfter: {
             readonly type: import('vue').PropType<number>;

package/es/ele-avatar-group/index.js

@@ -0,0 +1,189 @@
+import { defineComponent, ref, computed, resolveComponent, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, createVNode, Fragment, renderList, normalizeStyle, withCtx, renderSlot, mergeProps, createElementVNode, toDisplayString } from "vue";
+import { ElAvatar } from "element-plus";
+import EleTooltip from "../ele-tooltip/index";
+import { avatarGroupEmits, avatarGroupProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleAvatarGroup",
+  components: { ElAvatar, EleTooltip },
+  props: avatarGroupProps,
+  emits: avatarGroupEmits,
+  setup(props, { emit }) {
+    const tooltipContent = ref("");
+    const virtualRef = ref();
+    const overflowVisible = ref(false);
+    const commonStyle = computed(() => {
+      if (props.size == null || typeof props.size === "string") {
+        const obj = { large: "-12px", default: "-10px", small: "-8px" };
+        return { marginLeft: props.size ? obj[props.size] : "-10px" };
+      }
+      if (typeof props.size === "number" && props.size >= 0) {
+        return { marginLeft: `${-Math.round(props.size / 3)}px` };
+      }
+      return {};
+    });
+    const isOverflow = computed(() => {
+      return props.maxCount != null && props.maxCount > 0 && props.data != null && props.data.length > props.maxCount;
+    });
+    const avatarData = computed(() => {
+      if (props.data == null) {
+        return [];
+      }
+      return isOverflow.value ? props.data.slice(0, props.maxCount) : props.data;
+    });
+    const overflowCount = computed(() => {
+      if (!isOverflow.value || !props.data || props.maxCount == null) {
+        return 0;
+      }
+      return props.data.length - props.maxCount;
+    });
+    const overflowData = computed(() => {
+      if (props.data == null || !isOverflow.value) {
+        return [];
+      }
+      return props.data.slice(props.maxCount);
+    });
+    const handleItemHover = (item, e) => {
+      if (props.tooltip && item.label) {
+        virtualRef.value = e.currentTarget;
+        tooltipContent.value = item.label;
+      }
+    };
+    const handleItemClick = (item) => {
+      emit("itemClick", item);
+    };
+    const handleMoreClick = () => {
+      emit("moreClick");
+    };
+    const handleError = (option) => {
+      emit("error", option);
+    };
+    return {
+      tooltipContent,
+      virtualRef,
+      overflowVisible,
+      commonStyle,
+      isOverflow,
+      avatarData,
+      overflowCount,
+      overflowData,
+      handleItemHover,
+      handleItemClick,
+      handleMoreClick,
+      handleError
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-avatar-more-inner" };
+const _hoisted_2 = {
+  key: 0,
+  class: "ele-popover-body ele-avatar-group"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElAvatar = resolveComponent("ElAvatar");
+  const _component_EleTooltip = resolveComponent("EleTooltip");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["ele-avatar-group", { "is-hover-open": _ctx.hoverOpen }])
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.avatarData, (item, index2) => {
+      return openBlock(), createBlock(_component_ElAvatar, {
+        key: item.key ?? index2 + "-" + (item.value || item.label),
+        size: _ctx.size,
+        shape: _ctx.shape,
+        src: item.value,
+        style: normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.avatarStyle]),
+        onClick: ($event) => _ctx.handleItemClick(item),
+        onError: (e) => _ctx.handleError({ item, e }),
+        onMouseover: (e) => _ctx.handleItemHover(item, e)
+      }, {
+        default: withCtx(() => [
+          _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
+            key: 0,
+            item
+          }) : createCommentVNode("", true)
+        ]),
+        _: 2
+      }, 1032, ["size", "shape", "src", "style", "onClick", "onError", "onMouseover"]);
+    }), 128)),
+    _ctx.isOverflow ? (openBlock(), createBlock(_component_EleTooltip, mergeProps({
+      key: 0,
+      effect: "light",
+      isPopover: true,
+      gpuAcceleration: true,
+      placement: "top",
+      popperClass: "ele-avatar-popover",
+      offset: 6
+    }, _ctx.overflowPopoverProps || {}, {
+      disabled: !_ctx.overflowPopover,
+      visible: _ctx.overflowVisible,
+      "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.overflowVisible = $event)
+    }), {
+      body: withCtx(() => [
+        _ctx.overflowPopover ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "overflow", { overflowData: _ctx.overflowData }, () => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.overflowData, (item, index2) => {
+              return openBlock(), createBlock(_component_ElAvatar, {
+                key: item.key ?? index2 + "-" + (item.value || item.label),
+                size: _ctx.size,
+                shape: _ctx.shape,
+                src: item.value,
+                style: normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.avatarStyle]),
+                onClick: ($event) => _ctx.handleItemClick(item),
+                onError: (e) => _ctx.handleError({ item, e }),
+                onMouseover: (e) => _ctx.handleItemHover(item, e)
+              }, {
+                default: withCtx(() => [
+                  _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
+                    key: 0,
+                    item
+                  }) : createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["size", "shape", "src", "style", "onClick", "onError", "onMouseover"]);
+            }), 128))
+          ])
+        ])) : createCommentVNode("", true)
+      ]),
+      default: withCtx(() => [
+        createVNode(_component_ElAvatar, {
+          size: _ctx.size,
+          shape: _ctx.shape,
+          style: normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.moreStyle]),
+          class: "ele-avatar-more",
+          onClick: _ctx.handleMoreClick
+        }, {
+          default: withCtx(() => [
+            createElementVNode("span", _hoisted_1, [
+              renderSlot(_ctx.$slots, "more", {
+                overflowCount: _ctx.overflowCount,
+                overflowData: _ctx.overflowData
+              }, () => [
+                createElementVNode("span", null, "+" + toDisplayString(_ctx.overflowCount), 1)
+              ])
+            ])
+          ]),
+          _: 3
+        }, 8, ["size", "shape", "style", "onClick"])
+      ]),
+      _: 3
+    }, 16, ["disabled", "visible"])) : createCommentVNode("", true),
+    createVNode(_component_EleTooltip, mergeProps({
+      placement: "top",
+      offset: 6
+    }, _ctx.tooltipProps || {}, {
+      content: _ctx.tooltipContent,
+      virtualRef: _ctx.virtualRef,
+      virtualTriggering: true
+    }), null, 16, ["content", "virtualRef"])
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-avatar-group/style/index.scss

@@ -0,0 +1,73 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-avatar-group {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  font-size: 0;
+
+  .el-avatar {
+    vertical-align: top;
+    border: 1px solid elVar('bg-color', 'overlay');
+    transition: all 0.3s ease;
+    box-sizing: content-box;
+    position: relative;
+    cursor: pointer;
+    z-index: 1;
+
+    &:first-child {
+      margin-left: 0 !important;
+    }
+
+    &:hover {
+      z-index: 2;
+    }
+  }
+
+  .ele-avatar-more {
+    color: rgb(245, 106, 0);
+    background: elVar('bg-color', 'overlay');
+    display: inline-block;
+  }
+
+  .ele-avatar-more-inner {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(245, 106, 0, 0.2);
+  }
+
+  &.is-hover-open {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transition: all 0.3s ease;
+      pointer-events: all;
+      z-index: 9999;
+    }
+
+    &:hover {
+      &::before {
+        visibility: hidden;
+      }
+
+      .el-avatar {
+        margin-left: 0 !important;
+      }
+    }
+  }
+}
+
+.ele-avatar-popover.ele-popper.ele-popover {
+  min-width: auto;
+}
+
+.ele-avatar-popover > .ele-popover-body {
+  padding: 8px 12px;
+}