naive-ui 2.23.1 → 2.23.2

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})`
                 };

package/es/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;

package/es/avatar/src/AvatarGroup.js

@@ -0,0 +1,61 @@
+import { h, defineComponent, provide, computed } from 'vue';
+import NAvatar from './Avatar';
+import { useConfig, useStyle } from '../../_mixins';
+import style from './styles/avatar-group.cssr';
+export const avatarGroupInjectionKey = Symbol('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;
+            return options.slice(max, options.length);
+        });
+        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/breadcrumb/src/Breadcrumb.d.ts

@@ -74,14 +74,14 @@ 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;

package/es/breadcrumb/src/Breadcrumb.js

@@ -22,14 +22,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/styles/index.cssr.js

@@ -1,12 +1,12 @@
 import { c, cB, cE } from '../../../_utils/cssr'; // vars:
-// --font-size
-// --bezier
-// --item-text-color
-// --item-text-color-hover
-// --item-text-color-pressed
-// --item-text-color-active
-// --separator-color
-// --font-weight-active
+// --n-font-size
+// --n-bezier
+// --n-item-text-color
+// --n-item-text-color-hover
+// --n-item-text-color-pressed
+// --n-item-text-color-active
+// --n-separator-color
+// --n-font-weight-active
 
 export default cB('breadcrumb', `
  white-space: nowrap;
@@ -18,36 +18,36 @@ export default cB('breadcrumb', `
  color: inherit;
  text-decoration: inherit;
  `), cB('breadcrumb-item', {
-  fontSize: 'var(--font-size)',
-  transition: 'color .3s var(--bezier)',
+  fontSize: 'var(--n-font-size)',
+  transition: 'color .3s var(--n-bezier)',
   display: 'inline-block'
 }, [cB('icon', `
  font-size: 18px;
  vertical-align: -.2em;
- transition: color .3s var(--bezier);
- color: var(--item-text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-item-text-color);
  `), cE('link', {
   cursor: 'pointer',
-  transition: 'color .3s var(--bezier)',
-  color: 'var(--item-text-color)'
+  transition: 'color .3s var(--n-bezier)',
+  color: 'var(--n-item-text-color)'
 }), cE('separator', {
   margin: '0 8px',
-  color: 'var(--separator-color)',
-  transition: 'color .3s var(--bezier)'
+  color: 'var(--n-separator-color)',
+  transition: 'color .3s var(--n-bezier)'
 }), c('&:hover', [cB('icon', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 }), cE('link', {
-  color: 'var(--item-text-color-hover)'
+  color: 'var(--n-item-text-color-hover)'
 })]), c('&:active', [cB('icon', {
-  color: 'var(--item-text-color-pressed)'
+  color: 'var(--n-item-text-color-pressed)'
 }), cE('link', {
-  color: 'var(--item-text-color-pressed)'
+  color: 'var(--n-item-text-color-pressed)'
 })]), c('&:last-child', [cE('link', `
- font-weight: var(--font-weight-active);
+ font-weight: var(--n-font-weight-active);
  cursor: unset;
- color: var(--item-text-color-active);
+ color: var(--n-item-text-color-active);
  `), cB('icon', {
-  color: 'var(--item-text-color-active)'
+  color: 'var(--n-item-text-color-active)'
 }), cE('separator', {
   display: 'none'
 })])])]);

package/es/calendar/src/Calendar.d.ts

@@ -1762,27 +1762,27 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border-color': string;
-        '--border-color-modal': string;
-        '--border-color-popover': string;
-        '--border-radius': string;
-        '--text-color': string;
-        '--title-font-weight': string;
-        '--title-font-size': string;
-        '--title-text-color': string;
-        '--day-text-color': string;
-        '--font-size': string;
-        '--line-height': string;
-        '--date-color-current': string;
-        '--date-text-color-current': string;
-        '--cell-color': string;
-        '--cell-color-modal': string;
-        '--cell-color-popover': string;
-        '--cell-color-hover': string;
-        '--cell-color-hover-modal': string;
-        '--cell-color-hover-popover': string;
-        '--bar-color': string;
+        '--n-bezier': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-border-radius': string;
+        '--n-text-color': string;
+        '--n-title-font-weight': string;
+        '--n-title-font-size': string;
+        '--n-title-text-color': string;
+        '--n-day-text-color': string;
+        '--n-font-size': string;
+        '--n-line-height': string;
+        '--n-date-color-current': string;
+        '--n-date-text-color-current': string;
+        '--n-cell-color': string;
+        '--n-cell-color-modal': string;
+        '--n-cell-color-popover': string;
+        '--n-cell-color-hover': string;
+        '--n-cell-color-hover-modal': string;
+        '--n-cell-color-hover-popover': string;
+        '--n-bar-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly isDateDisabled?: unknown;

package/es/calendar/src/Calendar.js

@@ -62,27 +62,27 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { borderColor, borderColorModal, borderColorPopover, borderRadius, titleFontSize, textColor, titleFontWeight, titleTextColor, dayTextColor, fontSize, lineHeight, dateColorCurrent, dateTextColorCurrent, cellColorHover, cellColor, cellColorModal, barColor, cellColorPopover, cellColorHoverModal, cellColorHoverPopover } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-color': borderColor,
-                    '--border-color-modal': borderColorModal,
-                    '--border-color-popover': borderColorPopover,
-                    '--border-radius': borderRadius,
-                    '--text-color': textColor,
-                    '--title-font-weight': titleFontWeight,
-                    '--title-font-size': titleFontSize,
-                    '--title-text-color': titleTextColor,
-                    '--day-text-color': dayTextColor,
-                    '--font-size': fontSize,
-                    '--line-height': lineHeight,
-                    '--date-color-current': dateColorCurrent,
-                    '--date-text-color-current': dateTextColorCurrent,
-                    '--cell-color': cellColor,
-                    '--cell-color-modal': cellColorModal,
-                    '--cell-color-popover': cellColorPopover,
-                    '--cell-color-hover': cellColorHover,
-                    '--cell-color-hover-modal': cellColorHoverModal,
-                    '--cell-color-hover-popover': cellColorHoverPopover,
-                    '--bar-color': barColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-color': borderColor,
+                    '--n-border-color-modal': borderColorModal,
+                    '--n-border-color-popover': borderColorPopover,
+                    '--n-border-radius': borderRadius,
+                    '--n-text-color': textColor,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-day-text-color': dayTextColor,
+                    '--n-font-size': fontSize,
+                    '--n-line-height': lineHeight,
+                    '--n-date-color-current': dateColorCurrent,
+                    '--n-date-text-color-current': dateTextColorCurrent,
+                    '--n-cell-color': cellColor,
+                    '--n-cell-color-modal': cellColorModal,
+                    '--n-cell-color-popover': cellColorPopover,
+                    '--n-cell-color-hover': cellColorHover,
+                    '--n-cell-color-hover-modal': cellColorHoverModal,
+                    '--n-cell-color-hover-popover': cellColorHoverPopover,
+                    '--n-bar-color': barColor
                 };
             })
         };