naive-ui 2.23.1 → 2.24.2

package/es/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;
     }, {
@@ -1078,48 +1075,52 @@ declare const _default: import("vue").DefineComponent<{
     mergedBordered: import("vue").ComputedRef<boolean>;
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly to?: unknown;
-    readonly bordered?: unknown;
-    readonly clearable?: unknown;
-    readonly defaultValue?: unknown;
-    readonly loading?: unknown;
-    readonly disabled?: unknown;
-    readonly placeholder?: unknown;
-    readonly value?: unknown;
-    readonly blurAfterSelect?: unknown;
-    readonly clearAfterSelect?: unknown;
-    readonly getShow?: unknown;
-    readonly inputProps?: unknown;
-    readonly size?: unknown;
-    readonly options?: unknown;
-    readonly zIndex?: unknown;
-    readonly 'onUpdate:value'?: unknown;
-    readonly onUpdateValue?: unknown;
-    readonly onSelect?: unknown;
-    readonly onBlur?: unknown;
-    readonly onFocus?: unknown;
-    readonly onInput?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    options: AutoCompleteOptions;
-    defaultValue: string | null;
-    blurAfterSelect: boolean;
-    clearAfterSelect: boolean;
-} & {
-    value?: string | undefined;
-    size?: "small" | "medium" | "large" | undefined;
-    zIndex?: number | undefined;
-    disabled?: boolean | undefined;
-    onFocus?: MaybeArray<(e: FocusEvent) => void> | undefined;
-    onBlur?: MaybeArray<(e: FocusEvent) => void> | undefined;
-    onInput?: MaybeArray<OnUpdateValue> | undefined;
-    onSelect?: MaybeArray<OnSelect> | undefined;
-    placeholder?: string | undefined;
-    to?: string | boolean | HTMLElement | undefined;
-    theme?: import("../../_mixins").Theme<"AutoComplete", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly to: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: undefined;
+    };
+    readonly bordered: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly clearable: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly defaultValue: {
+        readonly type: PropType<string | null>;
+        readonly default: null;
+    };
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly disabled: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly placeholder: StringConstructor;
+    readonly value: StringConstructor;
+    readonly blurAfterSelect: BooleanConstructor;
+    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>;
+        readonly default: () => never[];
+    };
+    readonly zIndex: NumberConstructor;
+    readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
+    readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
+    readonly onSelect: PropType<MaybeArray<OnSelect>>;
+    readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
+    readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
     }, {
         InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
@@ -1234,8 +1235,8 @@ declare const _default: import("vue").DefineComponent<{
             paddingLarge: string;
             clearSize: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AutoComplete", {
+    }>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
     }, {
         InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
@@ -1350,8 +1351,8 @@ declare const _default: import("vue").DefineComponent<{
             paddingLarge: string;
             clearSize: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AutoComplete", {
+    }>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
     }, {
         InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
@@ -1466,17 +1467,9 @@ declare const _default: import("vue").DefineComponent<{
             paddingLarge: string;
             clearSize: string;
         }, any>;
-    }>> | undefined;
-    loading?: boolean | undefined;
-    bordered?: boolean | undefined;
-    clearable?: boolean | undefined;
-    inputProps?: InputHTMLAttributes | undefined;
-    "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
-    onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
-    getShow?: ((inputValue: string) => boolean) | undefined;
-}>, {
+    }>>>;
+}>>, {
     disabled: boolean | undefined;
-    onInput: MaybeArray<OnUpdateValue> | undefined;
     to: string | boolean | HTMLElement;
     loading: boolean;
     bordered: boolean | undefined;

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

@@ -1,16 +1,16 @@
-import { h, ref, toRef, computed, defineComponent, Transition, withDirectives } from 'vue';
+import { h, ref, toRef, computed, defineComponent, Transition, withDirectives, watchEffect } from 'vue';
 import { createTreeMate } from 'treemate';
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { useIsMounted, useMergedState } from 'vooks';
+import { tmOptions } from '../../select/src/utils';
 import { useFormItem, useTheme, useConfig } from '../../_mixins';
-import { call, warn, useAdjustedTo, getFirstSlotVNode } from '../../_utils';
+import { call, useAdjustedTo, getFirstSlotVNode, warnOnce } from '../../_utils';
 import { NInternalSelectMenu } from '../../_internal';
 import { NInput } from '../../input';
 import { autoCompleteLight } from '../styles';
 import { mapAutoCompleteOptionsToSelectOptions } from './utils';
 import style from './styles/index.cssr';
-import { tmOptions } from '../../select/src/utils';
 const autoCompleteProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, bordered: {
         type: Boolean,
         default: undefined
@@ -26,25 +26,23 @@ const autoCompleteProps = Object.assign(Object.assign({}, useTheme.props), { to:
     }, 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') {
-                warn('auto-complete', '`on-input` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onInput: [Function, Array] });
 export default defineComponent({
     name: 'AutoComplete',
     props: autoCompleteProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onInput !== undefined) {
+                    warnOnce('auto-complete', '`on-input` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef } = useConfig(props);
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -242,7 +240,7 @@ export default defineComponent({
                         default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
                             default: () => this.active
                                 ? withDirectives(h(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 }), [[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 }), [[clickoutside, this.handleClickOutsideMenu]])
                                 : null
                         }))
                     })

package/es/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/es/avatar/index.js

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

package/es/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,104 +85,122 @@ 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<{
         '--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;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly size?: unknown;
-    readonly src?: unknown;
-    readonly circle?: unknown;
-    readonly objectFit?: unknown;
-    readonly round?: 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;
-    src?: string | undefined;
-    theme?: import("../../_mixins").Theme<"Avatar", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly size: PropType<Size>;
+    readonly src: StringConstructor;
+    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 onError: PropType<(e: Event) => void>;
+    readonly fallbackSrc: StringConstructor;
+    /** @deprecated */
+    readonly color: StringConstructor;
+    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;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
+        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;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Avatar", {
+        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;
-    }, any>> | undefined;
-    fallbackSrc?: string | undefined;
-}>, {
+        colorModal: string;
+        colorPopover: string;
+    }, any>>>;
+}>>, {
     round: boolean;
-    size: number | "small" | "medium" | "large";
     circle: boolean;
-    objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
+    bordered: boolean;
 }>;
 export default _default;

package/es/avatar/src/Avatar.js

@@ -1,17 +1,21 @@
 import { h, ref, computed, defineComponent, inject, watch } from 'vue';
 import { VResizeObserver } from 'vueuc';
+import { avatarGroupInjectionKey } from './AvatarGroup';
 import { tagInjectionKey } from '../../tag/src/Tag';
 import { useConfig, useTheme } from '../../_mixins';
 import { avatarLight } from '../styles';
 import { createKey } from '../../_utils';
 import style from './styles/index.cssr';
-const avatarProps = Object.assign(Object.assign({}, useTheme.props), { size: {
-        type: [String, Number],
-        default: 'medium'
-    }, src: String, circle: Boolean, objectFit: {
-        type: String,
-        default: 'fill'
-    }, round: Boolean, onError: Function, fallbackSrc: String, 
+export const avatarProps = Object.assign(Object.assign({}, 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 });
 export default defineComponent({
@@ -39,16 +43,34 @@ export default defineComponent({
                 }
             }
         };
+        const NAvatarGroup = inject(avatarGroupInjectionKey, null);
+        const mergedSizeRef = computed(() => {
+            const { size } = props;
+            if (size)
+                return size;
+            const { size: avatarGroupSize } = NAvatarGroup || {};
+            if (avatarGroupSize)
+                return avatarGroupSize;
+            return 'medium';
+        });
         const themeRef = useTheme('Avatar', 'Avatar', style, avatarLight, props, mergedClsPrefixRef);
         const TagInjection = inject(tagInjectionKey, null);
         const mergedRoundRef = 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 = computed(() => {
+            if (NAvatarGroup)
+                return true;
+            return props.bordered || false;
+        });
         const handleError = (e) => {
             hasLoadErrorRef.value = true;
             const { onError } = props;
@@ -64,8 +86,11 @@ export default defineComponent({
             mergedClsPrefix: mergedClsPrefixRef,
             fitTextTransform,
             cssVars: 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`;
@@ -75,8 +100,11 @@ export default defineComponent({
                 }
                 return {
                     '--n-font-size': fontSize,
-                    '--n-border-radius': mergedRoundRef.value ? '50%' : borderRadius,
+                    '--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})`
                 };