naive-ui 2.22.0 → 2.24.0

package/lib/_mixins/use-css-vars-class.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCssVarsClass = void 0;
+const vue_1 = require("vue");
+const hash_1 = __importDefault(require("@emotion/hash"));
+const cssr_1 = require("../_utils/cssr");
+// window.xxx = 0
+function useCssVarsClass(cssVarsRef) {
+    const cssVarsClassRef = (0, vue_1.ref)('');
+    (0, vue_1.watchEffect)(() => {
+        // window.xxx -= performance.now()
+        const cssVars = cssVarsRef.value;
+        let style = '';
+        for (const key in cssVars) {
+            style += `${key}: ${cssVars[key]};`;
+        }
+        const styleHash = (0, hash_1.default)(style);
+        cssVarsClassRef.value = `c${styleHash}`;
+        (0, cssr_1.c)(`.c${styleHash}`, style).mount({
+            id: styleHash
+        });
+        // window.xxx += performance.now()
+    });
+    return cssVarsClassRef;
+}
+exports.useCssVarsClass = useCssVarsClass;

package/lib/_mixins/use-rtl.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const css_render_1 = require("css-render");
 const vue3_ssr_1 = require("@css-render/vue3-ssr");
+const common_1 = require("./common");
 function useRtl(mountId, rtlStateRef, clsPrefixRef) {
     if (!rtlStateRef)
         return undefined;
@@ -33,6 +34,7 @@ function useRtl(mountId, rtlStateRef, clsPrefixRef) {
             componentRtlState.style.mount({
                 id,
                 head: true,
+                anchorMetaName: common_1.cssrAnchorMetaName,
                 props: {
                     bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
                 },

package/lib/_mixins/use-style.js

@@ -7,6 +7,7 @@ const vue_1 = require("vue");
 const vue3_ssr_1 = require("@css-render/vue3-ssr");
 const index_cssr_1 = __importDefault(require("../_styles/global/index.cssr"));
 const _utils_1 = require("../_utils");
+const common_1 = require("./common");
 function useStyle(mountId, style, clsPrefixRef) {
     if (!style) {
         if (process.env.NODE_ENV !== 'production')
@@ -19,6 +20,7 @@ function useStyle(mountId, style, clsPrefixRef) {
         style.mount({
             id: clsPrefix === undefined ? mountId : clsPrefix + mountId,
             head: true,
+            anchorMetaName: common_1.cssrAnchorMetaName,
             props: {
                 bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
             },
@@ -27,6 +29,7 @@ function useStyle(mountId, style, clsPrefixRef) {
         index_cssr_1.default.mount({
             id: 'naive-ui/global',
             head: true,
+            anchorMetaName: common_1.cssrAnchorMetaName,
             ssr: ssrAdapter
         });
     };

package/lib/_mixins/use-theme.js

@@ -10,6 +10,7 @@ const lodash_1 = require("lodash");
 const vue3_ssr_1 = require("@css-render/vue3-ssr");
 const index_cssr_1 = __importDefault(require("../_styles/global/index.cssr"));
 const ConfigProvider_1 = require("../config-provider/src/ConfigProvider");
+const common_1 = require("./common");
 function createTheme(theme) {
     return theme;
 }
@@ -25,11 +26,13 @@ function useTheme(resolveId, mountId, style, defaultTheme, props, clsPrefixRef)
                 props: {
                     bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
                 },
+                anchorMetaName: common_1.cssrAnchorMetaName,
                 ssr: ssrAdapter
             });
             index_cssr_1.default.mount({
                 id: 'naive-ui/global',
                 head: true,
+                anchorMetaName: common_1.cssrAnchorMetaName,
                 ssr: ssrAdapter
             });
         };

package/lib/_utils/composable/use-houdini.js

@@ -1,29 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useHoudini = void 0;
-const vue_1 = require("vue");
 let houdiniRegistered = false;
 function useHoudini() {
-    (0, vue_1.onBeforeMount)(() => {
-        var _a;
-        if (!houdiniRegistered) {
-            houdiniRegistered = true;
-            if ((_a = window === null || window === void 0 ? void 0 : window.CSS) === null || _a === void 0 ? void 0 : _a.registerProperty) {
+    if (typeof window === 'undefined')
+        return;
+    if (!window.CSS)
+        return;
+    if (!houdiniRegistered) {
+        houdiniRegistered = true;
+        if ('registerProperty' in (window === null || window === void 0 ? void 0 : window.CSS)) {
+            try {
                 ;
                 CSS.registerProperty({
-                    name: '--color-start',
+                    name: '--n-color-start',
                     syntax: '<color>',
                     inherits: false,
                     initialValue: '#0000'
                 });
                 CSS.registerProperty({
-                    name: '--color-end',
+                    name: '--n-color-end',
                     syntax: '<color>',
                     inherits: false,
                     initialValue: '#0000'
                 });
             }
+            catch (e) { }
         }
-    });
+    }
 }
 exports.useHoudini = useHoudini;

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;