naive-ui 2.23.0 → 2.24.1

package/lib/alert/src/Alert.d.ts

@@ -562,8 +562,8 @@ declare const _default: import("vue").DefineComponent<{
     builtinThemeOverrides?: unknown;
 } & {
     type: "default" | "error" | "info" | "success" | "warning";
-    closable: boolean;
     showIcon: boolean;
+    closable: boolean;
 } & {
     onAfterLeave?: Function | undefined;
     title?: string | undefined;
@@ -726,8 +726,8 @@ declare const _default: import("vue").DefineComponent<{
     type: "default" | "error" | "info" | "success" | "warning";
     onAfterLeave: Function;
     title: string;
-    closable: boolean;
     showIcon: boolean;
+    closable: boolean;
     onAfterHide: Function;
 }>;
 export default _default;

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -1,9 +1,10 @@
 import { PropType, InputHTMLAttributes } from 'vue';
 import { TreeNode } from 'treemate';
+import { RenderOption, RenderLabel } from '../../_internal/select-menu/src/interface';
 import { MaybeArray } from '../../_utils';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../select/src/interface';
-import { AutoCompleteOptions, OnUpdateValue, OnSelect } from './interface';
+import type { AutoCompleteOptions, OnUpdateValue, OnSelect } from './interface';
 declare const autoCompleteProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -35,6 +36,8 @@ declare const autoCompleteProps: {
     readonly clearAfterSelect: BooleanConstructor;
     readonly getShow: PropType<(inputValue: string) => boolean>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly renderOption: PropType<RenderOption>;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -46,11 +49,7 @@ declare const autoCompleteProps: {
     readonly onSelect: PropType<MaybeArray<OnSelect>>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
     }, {
@@ -432,6 +431,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly clearAfterSelect: BooleanConstructor;
     readonly getShow: PropType<(inputValue: string) => boolean>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly renderOption: PropType<RenderOption>;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -443,11 +444,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSelect: PropType<MaybeArray<OnSelect>>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
     }, {
@@ -1072,8 +1069,8 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--menu-box-shadow': string;
-        '--bezier': string;
+        '--n-menu-box-shadow': string;
+        '--n-bezier': string;
     }>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     namespace: import("vue").ComputedRef<string | undefined>;
@@ -1091,6 +1088,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly clearAfterSelect?: unknown;
     readonly getShow?: unknown;
     readonly inputProps?: unknown;
+    readonly renderOption?: unknown;
+    readonly renderLabel?: unknown;
     readonly size?: unknown;
     readonly options?: unknown;
     readonly zIndex?: unknown;
@@ -1469,6 +1468,8 @@ declare const _default: import("vue").DefineComponent<{
     }>> | undefined;
     loading?: boolean | undefined;
     bordered?: boolean | undefined;
+    renderLabel?: RenderLabel | undefined;
+    renderOption?: RenderOption | undefined;
     clearable?: boolean | undefined;
     inputProps?: InputHTMLAttributes | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
@@ -1476,7 +1477,6 @@ declare const _default: import("vue").DefineComponent<{
     getShow?: ((inputValue: string) => boolean) | undefined;
 }>, {
     disabled: boolean | undefined;
-    onInput: MaybeArray<OnUpdateValue> | undefined;
     to: string | boolean | HTMLElement;
     loading: boolean;
     bordered: boolean | undefined;

package/lib/auto-complete/src/AutoComplete.js

@@ -8,14 +8,14 @@ const treemate_1 = require("treemate");
 const vueuc_1 = require("vueuc");
 const vdirs_1 = require("vdirs");
 const vooks_1 = require("vooks");
+const utils_1 = require("../../select/src/utils");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const _internal_1 = require("../../_internal");
 const input_1 = require("../../input");
 const styles_1 = require("../styles");
-const utils_1 = require("./utils");
+const utils_2 = require("./utils");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const utils_2 = require("../../select/src/utils");
 const autoCompleteProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, bordered: {
         type: Boolean,
         default: undefined
@@ -31,25 +31,23 @@ const autoCompleteProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     }, disabled: {
         type: Boolean,
         default: undefined
-    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, inputProps: Object, size: String, options: {
+    }, placeholder: String, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, inputProps: Object, renderOption: Function, renderLabel: Function, size: String, options: {
         type: Array,
         default: () => []
     }, zIndex: Number, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onSelect: [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
     // deprecated
-    onInput: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('auto-complete', '`on-input` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onInput: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'AutoComplete',
     props: autoCompleteProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onInput !== undefined) {
+                    (0, _utils_1.warnOnce)('auto-complete', '`on-input` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -62,7 +60,7 @@ exports.default = (0, vue_1.defineComponent)({
         const isComposingRef = (0, vue_1.ref)(false);
         const themeRef = (0, _mixins_1.useTheme)('AutoComplete', 'AutoComplete', index_cssr_1.default, styles_1.autoCompleteLight, props, mergedClsPrefixRef);
         const selectOptionsRef = (0, vue_1.computed)(() => {
-            return (0, utils_1.mapAutoCompleteOptionsToSelectOptions)(props.options);
+            return (0, utils_2.mapAutoCompleteOptionsToSelectOptions)(props.options);
         });
         const mergedShowOptionsRef = (0, vue_1.computed)(() => {
             const { getShow } = props;
@@ -76,7 +74,7 @@ exports.default = (0, vue_1.defineComponent)({
                 canBeActivatedRef.value &&
                 !!selectOptionsRef.value.length);
         });
-        const treeMateRef = (0, vue_1.computed)(() => (0, treemate_1.createTreeMate)(selectOptionsRef.value, utils_2.tmOptions));
+        const treeMateRef = (0, vue_1.computed)(() => (0, treemate_1.createTreeMate)(selectOptionsRef.value, utils_1.tmOptions));
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onInput } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
@@ -211,8 +209,8 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow } } = themeRef.value;
                 return {
-                    '--menu-box-shadow': menuBoxShadow,
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-menu-box-shadow': menuBoxShadow,
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             }),
             mergedBordered: mergedBorderedRef,
@@ -247,7 +245,7 @@ exports.default = (0, vue_1.defineComponent)({
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.active
                                 ? (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: mergedClsPrefix, ref: "menuInstRef", theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                        .InternalSelectMenu, "auto-pending": true, class: `${mergedClsPrefix}-auto-complete-menu`, style: this.cssVars, treeMate: this.treeMate, multiple: false, size: "medium", onToggle: this.handleToggle }), [[vdirs_1.clickoutside, this.handleClickOutsideMenu]])
+                                        .InternalSelectMenu, "auto-pending": true, class: `${mergedClsPrefix}-auto-complete-menu`, style: this.cssVars, treeMate: this.treeMate, multiple: false, renderLabel: this.renderLabel, renderOption: this.renderOption, size: "medium", onToggle: this.handleToggle }), [[vdirs_1.clickoutside, this.handleClickOutsideMenu]])
                                 : null
                         }))
                     })

package/lib/auto-complete/src/styles/index.cssr.js

@@ -13,8 +13,8 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --bezier
-// --menu-box-shadow
+// --n-bezier
+// --n-menu-box-shadow
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('auto-complete', `
@@ -24,7 +24,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('auto-complete', `
  width: 100%;
  `), (0, cssr_1.cB)('auto-complete-menu', `
  margin: 4px 0;
- box-shadow: var(--menu-box-shadow);
+ box-shadow: var(--n-menu-box-shadow);
  `, [(0, fade_in_scale_up_cssr_1.default)({
-  originalTransition: 'background-color .3s var(--bezier)'
+  originalTransition: 'background-color .3s var(--n-bezier)'
 })])]);

package/lib/avatar/index.d.ts

@@ -1,2 +1,4 @@
 export { default as NAvatar } from './src/Avatar';
 export type { AvatarProps } from './src/Avatar';
+export { default as NAvatarGroup } from './src/AvatarGroup';
+export type { AvatarGroupProps } from './src/AvatarGroup';

package/lib/avatar/index.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NAvatar = void 0;
+exports.NAvatarGroup = exports.NAvatar = void 0;
 var Avatar_1 = require("./src/Avatar");
 Object.defineProperty(exports, "NAvatar", { enumerable: true, get: function () { return __importDefault(Avatar_1).default; } });
+var AvatarGroup_1 = require("./src/AvatarGroup");
+Object.defineProperty(exports, "NAvatarGroup", { enumerable: true, get: function () { return __importDefault(AvatarGroup_1).default; } });

package/lib/avatar/src/Avatar.d.ts

@@ -1,17 +1,22 @@
 import { PropType } from 'vue';
+import type { Size, ObjectFit } from './interface';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const avatarProps: {
-    readonly size: {
-        readonly type: PropType<number | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
+export declare const avatarProps: {
+    readonly size: PropType<Size>;
     readonly src: StringConstructor;
-    readonly circle: BooleanConstructor;
-    readonly objectFit: {
-        readonly type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
-        readonly default: "fill";
+    readonly circle: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly objectFit: PropType<ObjectFit>;
+    readonly round: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly bordered: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
     };
-    readonly round: BooleanConstructor;
     readonly onError: PropType<(e: Event) => void>;
     readonly fallbackSrc: StringConstructor;
     /** @deprecated */
@@ -19,47 +24,60 @@ declare const avatarProps: {
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>>;
 };
 export declare type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>;
 declare const _default: import("vue").DefineComponent<{
-    readonly size: {
-        readonly type: PropType<number | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
+    readonly size: PropType<Size>;
     readonly src: StringConstructor;
-    readonly circle: BooleanConstructor;
-    readonly objectFit: {
-        readonly type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
-        readonly default: "fill";
+    readonly circle: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly objectFit: PropType<ObjectFit>;
+    readonly round: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly bordered: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
     };
-    readonly round: BooleanConstructor;
     readonly onError: PropType<(e: Event) => void>;
     readonly fallbackSrc: StringConstructor;
     /** @deprecated */
@@ -67,45 +85,57 @@ declare const _default: import("vue").DefineComponent<{
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>>>;
 }, {
     textRef: import("vue").Ref<HTMLElement | null>;
     selfRef: import("vue").Ref<HTMLElement | null>;
-    mergedRoundRef: import("vue").ComputedRef<boolean>;
+    mergedRoundRef: import("vue").ComputedRef<boolean | undefined>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     fitTextTransform: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--border-radius': string;
-        '--color': string;
-        '--bezier': string;
-        '--merged-size': string;
+        '--n-font-size': string;
+        '--n-border': string;
+        '--n-border-radius': string;
+        '--n-color': string;
+        '--n-color-modal': string;
+        '--n-color-popover': string;
+        '--n-bezier': string;
+        '--n-merged-size': string;
     }>;
     hasLoadError: import("vue").Ref<boolean>;
     handleError: (e: Event) => void;
@@ -115,56 +145,65 @@ declare const _default: import("vue").DefineComponent<{
     readonly circle?: unknown;
     readonly objectFit?: unknown;
     readonly round?: unknown;
+    readonly bordered?: unknown;
     readonly onError?: unknown;
     readonly fallbackSrc?: unknown;
     readonly color?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
-} & {
-    round: boolean;
-    size: number | "small" | "medium" | "large";
-    circle: boolean;
-    objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
-} & {
+} & {} & {
     onError?: ((e: Event) => void) | undefined;
     color?: string | undefined;
+    round?: boolean | undefined;
+    size?: Size | undefined;
+    circle?: boolean | undefined;
+    objectFit?: ObjectFit | undefined;
     src?: string | undefined;
     theme?: import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any> | undefined;
     themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>> | undefined;
     builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
+        border: string;
         heightTiny: string;
         heightSmall: string;
         heightMedium: string;
         heightLarge: string;
         heightHuge: string;
         color: string;
+        colorModal: string;
+        colorPopover: string;
     }, any>> | undefined;
+    bordered?: boolean | undefined;
     fallbackSrc?: string | undefined;
 }>, {
     round: boolean;
-    size: number | "small" | "medium" | "large";
     circle: boolean;
-    objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
+    bordered: boolean;
 }>;
 export default _default;

package/lib/avatar/src/Avatar.js

@@ -3,25 +3,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatarProps = void 0;
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
+const AvatarGroup_1 = require("./AvatarGroup");
 const Tag_1 = require("../../tag/src/Tag");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const _utils_1 = require("../../_utils");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
-        type: [String, Number],
-        default: 'medium'
-    }, src: String, circle: Boolean, objectFit: {
-        type: String,
-        default: 'fill'
-    }, round: Boolean, onError: Function, fallbackSrc: String, 
+exports.avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: [String, Number], src: String, circle: {
+        type: Boolean,
+        default: undefined
+    }, objectFit: String, round: {
+        type: Boolean,
+        default: undefined
+    }, bordered: {
+        type: Boolean,
+        default: undefined
+    }, onError: Function, fallbackSrc: String, 
     /** @deprecated */
     color: String });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Avatar',
-    props: avatarProps,
+    props: exports.avatarProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const hasLoadErrorRef = (0, vue_1.ref)(false);
@@ -44,16 +49,34 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         };
+        const NAvatarGroup = (0, vue_1.inject)(AvatarGroup_1.avatarGroupInjectionKey, null);
+        const mergedSizeRef = (0, vue_1.computed)(() => {
+            const { size } = props;
+            if (size)
+                return size;
+            const { size: avatarGroupSize } = NAvatarGroup || {};
+            if (avatarGroupSize)
+                return avatarGroupSize;
+            return 'medium';
+        });
         const themeRef = (0, _mixins_1.useTheme)('Avatar', 'Avatar', index_cssr_1.default, styles_1.avatarLight, props, mergedClsPrefixRef);
         const TagInjection = (0, vue_1.inject)(Tag_1.tagInjectionKey, null);
         const mergedRoundRef = (0, vue_1.computed)(() => {
-            if (props.round || props.circle)
+            if (NAvatarGroup)
                 return true;
+            const { round, circle } = props;
+            if (round !== undefined || circle !== undefined)
+                return round || circle;
             if (TagInjection) {
                 return TagInjection.roundRef.value;
             }
             return false;
         });
+        const mergedBorderedRef = (0, vue_1.computed)(() => {
+            if (NAvatarGroup)
+                return true;
+            return props.bordered || false;
+        });
         const handleError = (e) => {
             hasLoadErrorRef.value = true;
             const { onError } = props;
@@ -69,8 +92,11 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefix: mergedClsPrefixRef,
             fitTextTransform,
             cssVars: (0, vue_1.computed)(() => {
-                const { size, color: propColor } = props;
-                const { self: { borderRadius, fontSize, color }, common: { cubicBezierEaseInOut } } = themeRef.value;
+                const size = mergedSizeRef.value;
+                const round = mergedRoundRef.value;
+                const bordered = mergedBorderedRef.value;
+                const { color: propColor } = props;
+                const { self: { borderRadius, fontSize, color, border, colorModal, colorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 let height;
                 if (typeof size === 'number') {
                     height = `${size}px`;
@@ -79,11 +105,14 @@ exports.default = (0, vue_1.defineComponent)({
                     height = themeRef.value.self[(0, _utils_1.createKey)('height', size)];
                 }
                 return {
-                    '--font-size': fontSize,
-                    '--border-radius': mergedRoundRef.value ? '50%' : borderRadius,
-                    '--color': propColor || color,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--merged-size': `var(--avatar-size-override, ${height})`
+                    '--n-font-size': fontSize,
+                    '--n-border': bordered ? border : 'none',
+                    '--n-border-radius': round ? '50%' : borderRadius,
+                    '--n-color': propColor || color,
+                    '--n-color-modal': propColor || colorModal,
+                    '--n-color-popover': propColor || colorPopover,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-merged-size': `var(--n-avatar-size-override, ${height})`
                 };
             }),
             hasLoadError: hasLoadErrorRef,

package/lib/avatar/src/AvatarGroup.d.ts

@@ -0,0 +1,52 @@
+import { PropType, CSSProperties, InjectionKey } from 'vue';
+import type { Size } from './interface';
+import type { ExtractPublicPropTypes } from '../../_utils';
+export interface AvatarGroupInjection {
+    size?: Size | undefined;
+}
+interface AvatarOption {
+    src: string;
+}
+export declare const avatarGroupInjectionKey: InjectionKey<AvatarGroupInjection>;
+declare const avatarGroupProps: {
+    readonly max: NumberConstructor;
+    readonly maxStyle: PropType<string | CSSProperties>;
+    readonly options: {
+        readonly type: PropType<AvatarOption[]>;
+        readonly default: () => never[];
+    };
+    readonly vertical: BooleanConstructor;
+    readonly size: PropType<Size | undefined>;
+};
+export declare type AvatarGroupProps = ExtractPublicPropTypes<typeof avatarGroupProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly max: NumberConstructor;
+    readonly maxStyle: PropType<string | CSSProperties>;
+    readonly options: {
+        readonly type: PropType<AvatarOption[]>;
+        readonly default: () => never[];
+    };
+    readonly vertical: BooleanConstructor;
+    readonly size: PropType<Size | undefined>;
+}, {
+    mergedClsPrefix: import("vue").ComputedRef<string>;
+    restOptions: import("vue").ComputedRef<AvatarOption[] | undefined>;
+    displayedOptions: import("vue").ComputedRef<AvatarOption[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly max?: unknown;
+    readonly maxStyle?: unknown;
+    readonly options?: unknown;
+    readonly vertical?: unknown;
+    readonly size?: unknown;
+} & {
+    vertical: boolean;
+    options: AvatarOption[];
+} & {
+    size?: Size | undefined;
+    max?: number | undefined;
+    maxStyle?: string | CSSProperties | undefined;
+}>, {
+    vertical: boolean;
+    options: AvatarOption[];
+}>;
+export default _default;