naive-ui 2.23.1 → 2.24.2

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

@@ -0,0 +1,48 @@
+import { PropType, CSSProperties } from 'vue';
+import type { Size } from './interface';
+import { ExtractPublicPropTypes } from '../../_utils';
+export interface AvatarGroupInjection {
+    size?: Size | undefined;
+}
+interface AvatarOption {
+    src: string;
+}
+export declare const avatarGroupInjectionKey: import("vue").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<import("vue").ExtractPropTypes<{
+    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>;
+}>>, {
+    vertical: boolean;
+    options: AvatarOption[];
+}>;
+export default _default;

package/es/avatar/src/AvatarGroup.js

@@ -0,0 +1,64 @@
+import { h, defineComponent, provide, computed } from 'vue';
+import NAvatar from './Avatar';
+import { useConfig, useStyle } from '../../_mixins';
+import { createInjectionKey } from '../../_utils';
+import style from './styles/avatar-group.cssr';
+export const avatarGroupInjectionKey = createInjectionKey('n-avatar-group');
+const avatarGroupProps = {
+    max: Number,
+    maxStyle: [Object, String],
+    options: {
+        type: Array,
+        default: () => []
+    },
+    vertical: Boolean,
+    size: [String, Number]
+};
+export default defineComponent({
+    name: 'AvatarGroup',
+    props: avatarGroupProps,
+    setup(props) {
+        const { mergedClsPrefixRef } = useConfig(props);
+        useStyle('AvatarGroup', style, mergedClsPrefixRef);
+        provide(avatarGroupInjectionKey, props);
+        const restOptionsRef = computed(() => {
+            const { max } = props;
+            if (max === undefined)
+                return undefined;
+            const { options } = props;
+            if (options.length > max)
+                return options.slice(max - 1, options.length);
+            return [];
+        });
+        const displayedOptionsRef = computed(() => {
+            const { options, max } = props;
+            if (max === undefined)
+                return options;
+            if (options.length > max)
+                return options.slice(0, max - 1);
+            if (options.length === max)
+                return options.slice(0, max);
+            return options;
+        });
+        return {
+            mergedClsPrefix: mergedClsPrefixRef,
+            restOptions: restOptionsRef,
+            displayedOptions: displayedOptionsRef
+        };
+    },
+    render() {
+        const { mergedClsPrefix, displayedOptions, restOptions, $slots } = this;
+        return (h("div", { class: [
+                `${mergedClsPrefix}-avatar-group`,
+                this.vertical && `${mergedClsPrefix}-avatar-group--vertical`
+            ], role: "group" },
+            displayedOptions.map((option) => {
+                return $slots.avatar ? ($slots.avatar({ option })) : (h(NAvatar, { src: option.src }));
+            }),
+            restOptions !== undefined &&
+                restOptions.length > 0 &&
+                ($slots.rest ? ($slots.rest({ options: restOptions, rest: restOptions.length })) : (h(NAvatar, { style: this.maxStyle }, {
+                    default: () => `+${restOptions.length}`
+                })))));
+    }
+});

package/es/avatar/src/interface.d.ts

@@ -0,0 +1,2 @@
+export declare type Size = number | 'small' | 'medium' | 'large';
+export declare type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';

package/es/avatar/src/interface.js

@@ -0,0 +1 @@
+export {};

package/es/avatar/src/styles/avatar-group.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/avatar/src/styles/avatar-group.cssr.js

@@ -0,0 +1,14 @@
+import { c, cB, cM, cNotM } from '../../../_utils/cssr/index';
+export default cB('avatar-group', `
+ flex-wrap: nowrap;
+ display: inline-flex;
+ position: relative;
+`, [cNotM('vertical', {
+  flexDirection: 'row'
+}, [cB('avatar', [c('&:not(:first-child)', `
+ margin-left: -12px;
+ `)])]), cM('vertical', {
+  flexDirection: 'column'
+}, [cB('avatar', [c('&:not(:first-child)', `
+ margin-top: -12px;
+ `)])])]);

package/es/avatar/src/styles/index.cssr.js

@@ -1,7 +1,9 @@
-import { c, cE, cB } from '../../../_utils/cssr'; // vars:
+import { c, cE, cB, insideModal, insidePopover } from '../../../_utils/cssr'; // vars:
 // --n-font-size
 // --n-border-radius
 // --n-color
+// --n-color-modal
+// --n-color-popover
 // --n-bezier
 // --n-merged-size
 
@@ -14,12 +16,15 @@ export default cB('avatar', `
  position: relative;
  overflow: hidden;
  text-align: center;
+ border: var(--n-border);
  border-radius: var(--n-border-radius);
- background-color: var(--n-color);
+ --n-merged-color: var(--n-color);
+ background-color: var(--n-merged-color);
  transition:
+ border-color .3s var(--n-bezier),
  background-color .3s var(--n-bezier),
  color .3s var(--n-bezier);
-`, [c('img', `
+`, [insideModal(c('&', '--n-merged-color: var(--n-color-modal);')), insidePopover(c('&', '--n-merged-color: var(--n-color-popover);')), c('img', `
  width: 100%;
  height: 100%;
  `), cE('text', `

package/es/avatar/styles/light.d.ts

@@ -3,12 +3,15 @@ import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
     borderRadius: string;
     fontSize: string;
+    border: string;
     heightTiny: string;
     heightSmall: string;
     heightMedium: string;
     heightLarge: string;
     heightHuge: string;
     color: string;
+    colorModal: string;
+    colorPopover: string;
 };
 export declare type AvatarThemeVars = ReturnType<typeof self>;
 declare const avatarLight: Theme<'Avatar', AvatarThemeVars>;

package/es/avatar/styles/light.js

@@ -1,15 +1,19 @@
 import { commonLight } from '../../_styles/common';
+import { composite } from 'seemly';
 export const self = (vars) => {
-    const { borderRadius, avatarColor, fontSize, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge } = vars;
+    const { borderRadius, avatarColor, cardColor, fontSize, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge, modalColor, popoverColor } = vars;
     return {
         borderRadius,
         fontSize,
+        border: `2px solid ${cardColor}`,
         heightTiny,
         heightSmall,
         heightMedium,
         heightLarge,
         heightHuge,
-        color: avatarColor
+        color: composite(cardColor, avatarColor),
+        colorModal: composite(modalColor, avatarColor),
+        colorPopover: composite(popoverColor, avatarColor)
     };
 };
 const avatarLight = {

package/es/back-top/src/BackTop.d.ts

@@ -21,7 +21,7 @@ declare const backTopProps: {
         readonly type: NumberConstructor;
         readonly default: 180;
     };
-    readonly listenTo: PropType<string | HTMLElement | (() => HTMLElement)>;
+    readonly listenTo: PropType<string | HTMLElement | Document | (() => HTMLElement | Document)>;
     readonly 'onUpdate:show': {
         readonly type: FunctionConstructor;
         readonly default: () => void;
@@ -106,7 +106,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 180;
     };
-    readonly listenTo: PropType<string | HTMLElement | (() => HTMLElement)>;
+    readonly listenTo: PropType<string | HTMLElement | Document | (() => HTMLElement | Document)>;
     readonly 'onUpdate:show': {
         readonly type: FunctionConstructor;
         readonly default: () => void;
@@ -199,30 +199,48 @@ declare const _default: import("vue").DefineComponent<{
         '--n-icon-color-pressed': string;
         '--n-text-color': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly show?: unknown;
-    readonly right?: unknown;
-    readonly bottom?: unknown;
-    readonly to?: unknown;
-    readonly visibilityHeight?: unknown;
-    readonly listenTo?: unknown;
-    readonly 'onUpdate:show'?: unknown;
-    readonly target?: unknown;
-    readonly onShow?: unknown;
-    readonly onHide?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    right: string | number;
-    bottom: string | number;
-    to: string | HTMLElement;
-    "onUpdate:show": Function;
-    visibilityHeight: number;
-} & {
-    show?: boolean | undefined;
-    target?: (() => HTMLElement | undefined) | undefined;
-    theme?: import("../../_mixins").Theme<"BackTop", {
+}, 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 show: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly right: {
+        readonly type: PropType<string | number>;
+        readonly default: 40;
+    };
+    readonly bottom: {
+        readonly type: PropType<string | number>;
+        readonly default: 40;
+    };
+    readonly to: {
+        readonly type: PropType<string | HTMLElement>;
+        readonly default: "body";
+    };
+    readonly visibilityHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 180;
+    };
+    readonly listenTo: PropType<string | HTMLElement | Document | (() => HTMLElement | Document)>;
+    readonly 'onUpdate:show': {
+        readonly type: FunctionConstructor;
+        readonly default: () => void;
+    };
+    readonly target: {
+        readonly type: PropType<() => HTMLElement | undefined>;
+        readonly validator: () => boolean;
+        readonly default: undefined;
+    };
+    readonly onShow: {
+        readonly type: PropType<(() => void) | undefined>;
+        readonly validator: () => boolean;
+        readonly default: undefined;
+    };
+    readonly onHide: {
+        readonly type: PropType<(() => void) | undefined>;
+        readonly validator: () => boolean;
+        readonly default: undefined;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"BackTop", {
         color: string;
         textColor: string;
         iconColor: string;
@@ -235,8 +253,8 @@ declare const _default: import("vue").DefineComponent<{
         height: string;
         borderRadius: string;
         iconSize: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"BackTop", {
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"BackTop", {
         color: string;
         textColor: string;
         iconColor: string;
@@ -249,8 +267,8 @@ declare const _default: import("vue").DefineComponent<{
         height: string;
         borderRadius: string;
         iconSize: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"BackTop", {
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"BackTop", {
         color: string;
         textColor: string;
         iconColor: string;
@@ -263,11 +281,8 @@ declare const _default: import("vue").DefineComponent<{
         height: string;
         borderRadius: string;
         iconSize: string;
-    }, any>> | undefined;
-    onShow?: (() => void) | undefined;
-    onHide?: (() => void) | undefined;
-    listenTo?: string | HTMLElement | (() => HTMLElement) | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     right: string | number;
     bottom: string | number;
     show: boolean | undefined;

package/es/back-top/src/BackTop.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, toRef, watch, nextTick, defineComponent, renderSlot, mergeProps, Transition, onMounted, onBeforeUnmount } from 'vue';
+import { h, ref, computed, toRef, watch, nextTick, defineComponent, mergeProps, Transition, onMounted, onBeforeUnmount } from 'vue';
 import { VLazyTeleport } from 'vueuc';
 import { useIsMounted, useMergedState } from 'vooks';
 import { getScrollParent, unwrapElement } from 'seemly';
@@ -206,9 +206,7 @@ export default defineComponent({
                             style: Object.assign(Object.assign({}, this.style), this.cssVars),
                             onClick: this.handleClick
                         }), [
-                            renderSlot(this.$slots, 'default', undefined, () => [
-                                h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => BackTopIcon })
-                            ])
+                            this.$slots.default ? (this.$slots.default()) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => BackTopIcon }))
                         ])
                         : null
                 }))

package/es/badge/src/Badge.d.ts

@@ -118,29 +118,31 @@ declare const _default: import("vue").DefineComponent<{
         '--n-bezier': string;
         '--n-ripple-bezier': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly value?: unknown;
-    readonly max?: unknown;
-    readonly dot?: unknown;
-    readonly type?: unknown;
-    readonly show?: unknown;
-    readonly showZero?: unknown;
-    readonly processing?: unknown;
-    readonly color?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    type: "default" | "error" | "info" | "success" | "warning";
-    show: boolean;
-    dot: boolean;
-    showZero: boolean;
-    processing: boolean;
-} & {
-    value?: string | number | undefined;
-    color?: string | undefined;
-    max?: number | undefined;
-    theme?: import("../../_mixins").Theme<"Badge", {
+}, 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 value: PropType<string | number>;
+    readonly max: NumberConstructor;
+    readonly dot: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly type: {
+        readonly type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        readonly default: "default";
+    };
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly showZero: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly processing: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly color: StringConstructor;
+    readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
         colorInfo: string;
         colorSuccess: string;
@@ -148,8 +150,8 @@ declare const _default: import("vue").DefineComponent<{
         colorWarning: string;
         fontSize: string;
         fontFamily: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
         colorInfo: string;
         colorSuccess: string;
@@ -157,8 +159,8 @@ declare const _default: import("vue").DefineComponent<{
         colorWarning: string;
         fontSize: string;
         fontFamily: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
         colorInfo: string;
         colorSuccess: string;
@@ -166,8 +168,8 @@ declare const _default: import("vue").DefineComponent<{
         colorWarning: string;
         fontSize: string;
         fontFamily: string;
-    }, any>> | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     type: "default" | "error" | "info" | "success" | "warning";
     show: boolean;
     dot: boolean;

package/es/badge/src/Badge.js

@@ -1,4 +1,4 @@
-import { h, computed, onMounted, ref, defineComponent, renderSlot, Transition } from 'vue';
+import { h, computed, onMounted, ref, defineComponent, Transition } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { NBaseSlotMachine, NBaseWave } from '../../_internal';
 import { createKey, getTitleAttribute } from '../../_utils';
@@ -63,15 +63,16 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        var _a;
+        const { mergedClsPrefix, $slots } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-badge`,
                 {
                     [`${mergedClsPrefix}-badge--dot`]: this.dot,
-                    [`${mergedClsPrefix}-badge--as-is`]: !this.$slots.default
+                    [`${mergedClsPrefix}-badge--as-is`]: !$slots.default
                 }
-            ], style: this.cssVars },
-            renderSlot(this.$slots, 'default'),
+            ], style: this.cssVars }, (_a = $slots.default) === null || _a === void 0 ? void 0 :
+            _a.call($slots),
             h(Transition, { name: "fade-in-scale-up-transition", onAfterEnter: this.handleAfterEnter, onAfterLeave: this.handleAfterLeave }, {
                 default: () => this.showBadge ? (h("sup", { class: `${mergedClsPrefix}-badge-sup`, title: getTitleAttribute(this.value) },
                     !this.dot ? (h(NBaseSlotMachine, { clsPrefix: mergedClsPrefix, appeared: this.appeared, max: this.max, value: this.value })) : null,

package/es/breadcrumb/src/Breadcrumb.d.ts

@@ -1,10 +1,10 @@
-import { InjectionKey, Ref } from 'vue';
-import type { ExtractPublicPropTypes } from '../../_utils';
+import { Ref } from 'vue';
+import { ExtractPublicPropTypes } from '../../_utils';
 export interface BreadcrumbInjection {
     separatorRef: Ref<string>;
     mergedClsPrefixRef: Ref<string>;
 }
-export declare const breadcrumbInjectionKey: InjectionKey<BreadcrumbInjection>;
+export declare const breadcrumbInjectionKey: import("vue").InjectionKey<BreadcrumbInjection>;
 declare const breadcrumbProps: {
     readonly separator: {
         readonly type: StringConstructor;
@@ -74,24 +74,21 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--bezier': string;
-        '--item-text-color': string;
-        '--item-text-color-hover': string;
-        '--item-text-color-pressed': string;
-        '--item-text-color-active': string;
-        '--separator-color': string;
-        '--font-weight-active': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-item-text-color': string;
+        '--n-item-text-color-hover': string;
+        '--n-item-text-color-pressed': string;
+        '--n-item-text-color-active': string;
+        '--n-separator-color': string;
+        '--n-font-weight-active': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly separator?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    separator: string;
-} & {
-    theme?: import("../../_mixins").Theme<"Breadcrumb", {
+}, 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 separator: {
+        readonly type: StringConstructor;
+        readonly default: "/";
+    };
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Breadcrumb", {
         fontSize: string;
         itemTextColor: string;
         itemTextColorHover: string;
@@ -99,8 +96,8 @@ declare const _default: import("vue").DefineComponent<{
         itemTextColorActive: string;
         separatorColor: string;
         fontWeightActive: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Breadcrumb", {
+    }, any>>;
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Breadcrumb", {
         fontSize: string;
         itemTextColor: string;
         itemTextColorHover: string;
@@ -108,8 +105,8 @@ declare const _default: import("vue").DefineComponent<{
         itemTextColorActive: string;
         separatorColor: string;
         fontWeightActive: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Breadcrumb", {
+    }, any>>>;
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Breadcrumb", {
         fontSize: string;
         itemTextColor: string;
         itemTextColorHover: string;
@@ -117,8 +114,8 @@ declare const _default: import("vue").DefineComponent<{
         itemTextColorActive: string;
         separatorColor: string;
         fontWeightActive: string;
-    }, any>> | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     separator: string;
 }>;
 export default _default;

package/es/breadcrumb/src/Breadcrumb.js

@@ -2,7 +2,8 @@ import { h, computed, defineComponent, provide, toRef } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { breadcrumbLight } from '../styles';
 import style from './styles/index.cssr';
-export const breadcrumbInjectionKey = Symbol('breadcrumb');
+import { createInjectionKey } from '../../_utils';
+export const breadcrumbInjectionKey = createInjectionKey('n-breadcrumb');
 const breadcrumbProps = Object.assign(Object.assign({}, useTheme.props), { separator: {
         type: String,
         default: '/'
@@ -22,14 +23,14 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { separatorColor, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, fontSize, fontWeightActive } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-hover': itemTextColorHover,
-                    '--item-text-color-pressed': itemTextColorPressed,
-                    '--item-text-color-active': itemTextColorActive,
-                    '--separator-color': separatorColor,
-                    '--font-weight-active': fontWeightActive
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-item-text-color': itemTextColor,
+                    '--n-item-text-color-hover': itemTextColorHover,
+                    '--n-item-text-color-pressed': itemTextColorPressed,
+                    '--n-item-text-color-active': itemTextColorActive,
+                    '--n-separator-color': separatorColor,
+                    '--n-font-weight-active': fontWeightActive
                 };
             })
         };

package/es/breadcrumb/src/BreadcrumbItem.d.ts

@@ -7,11 +7,8 @@ export declare type BreadcrumbItemProps = Partial<ExtractPropTypes<typeof breadc
 declare const _default: import("vue").DefineComponent<{
     readonly separator: StringConstructor;
     readonly href: StringConstructor;
-}, (() => null) | (() => JSX.Element), unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly separator?: unknown;
-    readonly href?: unknown;
-} & {} & {
-    separator?: string | undefined;
-    href?: string | undefined;
-}>, {}>;
+}, (() => null) | (() => JSX.Element), unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    readonly separator: StringConstructor;
+    readonly href: StringConstructor;
+}>>, {}>;
 export default _default;