naive-ui 2.21.5 → 2.23.2

package/es/alert/src/Alert.js

@@ -44,26 +44,26 @@ export default defineComponent({
             const { type } = props;
             const { left, right } = getMargin(iconMargin);
             return {
-                '--bezier': cubicBezierEaseInOut,
-                '--color': self[createKey('color', type)],
-                '--close-color': self[createKey('closeColor', type)],
-                '--close-color-hover': self[createKey('closeColorHover', type)],
-                '--close-color-pressed': self[createKey('closeColorPressed', type)],
-                '--icon-color': self[createKey('iconColor', type)],
-                '--border': self[createKey('border', type)],
-                '--title-text-color': self[createKey('titleTextColor', type)],
-                '--content-text-color': self[createKey('contentTextColor', type)],
-                '--line-height': lineHeight,
-                '--border-radius': borderRadius,
-                '--font-size': fontSize,
-                '--title-font-weight': titleFontWeight,
-                '--icon-size': iconSize,
-                '--icon-margin': iconMargin,
-                '--close-size': closeSize,
-                '--close-margin': closeMargin,
-                '--padding': padding,
-                '--icon-margin-left': left,
-                '--icon-margin-right': right
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-color': self[createKey('color', type)],
+                '--n-close-color': self[createKey('closeColor', type)],
+                '--n-close-color-hover': self[createKey('closeColorHover', type)],
+                '--n-close-color-pressed': self[createKey('closeColorPressed', type)],
+                '--n-icon-color': self[createKey('iconColor', type)],
+                '--n-border': self[createKey('border', type)],
+                '--n-title-text-color': self[createKey('titleTextColor', type)],
+                '--n-content-text-color': self[createKey('contentTextColor', type)],
+                '--n-line-height': lineHeight,
+                '--n-border-radius': borderRadius,
+                '--n-font-size': fontSize,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-icon-size': iconSize,
+                '--n-icon-margin': iconMargin,
+                '--n-close-size': closeSize,
+                '--n-close-margin': closeMargin,
+                '--n-padding': padding,
+                '--n-icon-margin-left': left,
+                '--n-icon-margin-right': right
             };
         });
         const visibleRef = ref(true);
@@ -126,9 +126,9 @@ export default defineComponent({
                         }
                     })))),
                     h("div", { class: `${mergedClsPrefix}-alert-body` },
-                        this.title !== undefined && (h("div", { class: `${mergedClsPrefix}-alert-body__title` }, renderSlot($slots, 'header', undefined, () => [
+                        this.title || $slots.header ? (h("div", { class: `${mergedClsPrefix}-alert-body__title` }, renderSlot($slots, 'header', undefined, () => [
                             this.title
-                        ]))),
+                        ]))) : null,
                         $slots.default && (h("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots))))) : null;
             }
         }));

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

@@ -1,44 +1,44 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
 import fadeInHeightExpandTranstion from '../../../_styles/transitions/fade-in-height-expand.cssr'; // vars:
-// --bezier
-// --color
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --icon-color
-// --border
-// --title-text-color
-// --content-text-color
-// --line-height
-// --border-radius
-// --font-size
-// --title-font-weight
-// --icon-size
-// --icon-margin
-// --close-size
-// --close-margin
-// --padding
-// --icon-margin-left
-// --icon-margin-right
+// --n-bezier
+// --n-color
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-icon-color
+// --n-border
+// --n-title-text-color
+// --n-content-text-color
+// --n-line-height
+// --n-border-radius
+// --n-font-size
+// --n-title-font-weight
+// --n-icon-size
+// --n-icon-margin
+// --n-close-size
+// --n-close-margin
+// --n-padding
+// --n-icon-margin-left
+// --n-icon-margin-right
 
 export default cB('alert', `
- line-height: var(--line-height);
- border-radius: var(--border-radius);
+ line-height: var(--n-line-height);
+ border-radius: var(--n-border-radius);
  position: relative;
- transition: background-color .3s var(--bezier);
- background-color: var(--color);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-color);
  text-align: start;
 `, [cE('icon', {
-  color: 'var(--icon-color)'
+  color: 'var(--n-icon-color)'
 }), cB('alert-body', {
-  border: 'var(--border)',
-  padding: 'var(--padding)'
+  border: 'var(--n-border)',
+  padding: 'var(--n-padding)'
 }, [cE('title', {
-  color: 'var(--title-text-color)'
+  color: 'var(--n-title-text-color)'
 }), cE('content', {
-  color: 'var(--content-text-color)'
+  color: 'var(--n-content-text-color)'
 })]), fadeInHeightExpandTranstion({
-  originalTransition: 'transform .3s var(--bezier)',
+  originalTransition: 'transform .3s var(--n-bezier)',
   enterToProps: {
     transform: 'scale(1)'
   },
@@ -52,32 +52,32 @@ export default cB('alert', `
  align-items: center;
  justify-content: center;
  display: flex;
- width: var(--icon-size);
- height: var(--icon-size);
- font-size: var(--icon-size);
- margin: var(--icon-margin);
+ width: var(--n-icon-size);
+ height: var(--n-icon-size);
+ font-size: var(--n-icon-size);
+ margin: var(--n-icon-margin);
  `), cE('close', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  position: absolute;
  right: 0;
  top: 0;
- margin: var(--close-margin);
- font-size: var(--close-size);
+ margin: var(--n-close-margin);
+ font-size: var(--n-close-size);
  `), cM('show-icon', [cB('alert-body', {
-  paddingLeft: 'calc(var(--icon-margin-left) + var(--icon-size) + var(--icon-margin-right))'
+  paddingLeft: 'calc(var(--n-icon-margin-left) + var(--n-icon-size) + var(--n-icon-margin-right))'
 })]), cB('alert-body', `
- border-radius: var(--border-radius);
- transition: border-color .3s var(--bezier);
+ border-radius: var(--n-border-radius);
+ transition: border-color .3s var(--n-bezier);
  `, [cE('title', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  font-size: 16px;
  line-height: 19px;
- font-weight: var(--title-font-weight);
+ font-weight: var(--n-title-font-weight);
  `, [c('& +', [cE('content', {
   marginTop: '9px'
 })])]), cE('content', {
-  transition: 'color .3s var(--bezier)',
-  fontSize: 'var(--font-size)'
+  transition: 'color .3s var(--n-bezier)',
+  fontSize: 'var(--n-font-size)'
 })]), cE('icon', {
-  transition: 'color .3s var(--bezier)'
+  transition: 'color .3s var(--n-bezier)'
 })]);

package/es/anchor/src/AnchorAdapter.js

@@ -17,18 +17,18 @@ export default defineComponent({
         const cssVarsRef = computed(() => {
             const { self: { railColor, linkColor, railColorActive, linkTextColor, linkTextColorHover, linkTextColorPressed, linkTextColorActive, linkFontSize, railWidth, linkPadding, borderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
-                '--link-border-radius': borderRadius,
-                '--link-color': linkColor,
-                '--link-font-size': linkFontSize,
-                '--link-text-color': linkTextColor,
-                '--link-text-color-hover': linkTextColorHover,
-                '--link-text-color-active': linkTextColorActive,
-                '--link-text-color-pressed': linkTextColorPressed,
-                '--link-padding': linkPadding,
-                '--bezier': cubicBezierEaseInOut,
-                '--rail-color': railColor,
-                '--rail-color-active': railColorActive,
-                '--rail-width': railWidth
+                '--n-link-border-radius': borderRadius,
+                '--n-link-color': linkColor,
+                '--n-link-font-size': linkFontSize,
+                '--n-link-text-color': linkTextColor,
+                '--n-link-text-color-hover': linkTextColorHover,
+                '--n-link-text-color-active': linkTextColorActive,
+                '--n-link-text-color-pressed': linkTextColorPressed,
+                '--n-link-padding': linkPadding,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-rail-color': railColor,
+                '--n-rail-color-active': railColorActive,
+                '--n-rail-width': railWidth
             };
         });
         return {

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

@@ -1,21 +1,21 @@
 import { c, cE, cB, cM, cNotM } from '../../../_utils/cssr'; // vars:
-// --link-color
-// --link-font-size
-// --link-text-color
-// --link-text-color-hover
-// --link-text-color-active
-// --link-text-color-pressed
-// --bezier
-// --rail-color
-// --rail-color-active
-// --rail-width
-// --link-padding
-// --link-border-radius
+// --n-link-color
+// --n-link-font-size
+// --n-link-text-color
+// --n-link-text-color-hover
+// --n-link-text-color-active
+// --n-link-text-color-pressed
+// --n-bezier
+// --n-rail-color
+// --n-rail-color-active
+// --n-rail-width
+// --n-link-padding
+// --n-link-border-radius
 
 export default cB('anchor', `
  position: relative;
 `, [cNotM('block', `
- padding-left: var(--rail-width);
+ padding-left: var(--n-rail-width);
  `, [cB('anchor-link', [c('+, >', [cB('anchor-link', `
  margin-top: .5em;
  `)])]), cB('anchor-link-background', `
@@ -25,56 +25,52 @@ export default cB('anchor', `
  `), cNotM('show-rail', [c('>', [cB('anchor-link', 'padding-left: 0;')])])]), cM('block', [cB('anchor-link', `
  margin-bottom: 4px;
  padding: 2px 8px;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  background-color: transparent;
- border-radius: var(--link-border-radius);
+ border-radius: var(--n-link-border-radius);
  `, [cM('active', `
- background-color: var(--link-color);
+ background-color: var(--n-link-color);
  `)])]), cB('anchor-link-background', `
  position: absolute;
- left: calc(var(--rail-width) / 2);
+ left: calc(var(--n-rail-width) / 2);
  width: 100%;
- background-color: var(--link-color);
+ background-color: var(--n-link-color);
  transition:
- top .15s var(--bezier),
- max-width .15s var(--bezier),
- background-color .3s var(--bezier);
+ top .15s var(--n-bezier),
+ max-width .15s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `), cB('anchor-rail', `
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
- width: var(--rail-width);
- border-radius: calc(var(--rail-width) / 2);
+ width: var(--n-rail-width);
+ border-radius: calc(var(--n-rail-width) / 2);
  overflow: hidden;
- transition: background-color .3s var(--bezier);
- background-color: var(--rail-color);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-rail-color);
  `, [cE('bar', `
  position: absolute;
  left: 0;
- width: var(--rail-width);
+ width: var(--n-rail-width);
  height: 21px;
  background-color: #0000;
  transition: 
- top .15s var(--bezier),
- background-color .3s var(--bezier);
+ top .15s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [cM('active', {
-  backgroundColor: 'var(--rail-color-active)'
+  backgroundColor: 'var(--n-rail-color-active)'
 })])]), cB('anchor-link', `
- padding: var(--link-padding);
+ padding: var(--n-link-padding);
  position: relative;
  line-height: 1.5;
- font-size: var(--link-font-size);
+ font-size: var(--n-link-font-size);
  min-height: 1.5em;
  display: flex;
  flex-direction: column;
- `, [cM('active', [cE('title', `
- color: var(--link-text-color-active);
- `)]), c('&:hover, &:focus', [cE('title', `
- color: var(--link-text-color-hover);
- `)]), c('&:active', [cE('title', `
- color: var(--link-text-color-pressed);
- `)]), cE('title', `
+ `, [cM('active', [c('>', [cE('title', `
+ color: var(--n-link-text-color-active);
+ `)])]), cE('title', `
  outline: none;
  max-width: 100%;
  text-decoration: none;
@@ -84,6 +80,10 @@ export default cB('anchor', `
  cursor: pointer;
  display: inline-block;
  padding-right: 16px;
- transition: color .3s var(--bezier);
- color: var(--link-text-color);
- `)])]);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-link-text-color);
+ `, [c('&:hover, &:focus', `
+ color: var(--n-link-text-color-hover);
+ `), c('&:active', `
+ color: var(--n-link-text-color-pressed);
+ `)])])]);

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

@@ -1072,8 +1072,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>;

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

@@ -206,8 +206,8 @@ export default defineComponent({
             cssVars: 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,

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

@@ -1,7 +1,7 @@
 import { c, cB } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --bezier
-// --menu-box-shadow
+// --n-bezier
+// --n-menu-box-shadow
 
 export default c([cB('auto-complete', `
  z-index: auto;
@@ -10,7 +10,7 @@ export default c([cB('auto-complete', `
  width: 100%;
  `), cB('auto-complete-menu', `
  margin: 4px 0;
- box-shadow: var(--menu-box-shadow);
+ box-shadow: var(--n-menu-box-shadow);
  `, [fadeInScaleUpTransition({
-  originalTransition: 'background-color .3s var(--bezier)'
+  originalTransition: 'background-color .3s var(--n-bezier)'
 })])]);

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,109 +1,141 @@
 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 color: StringConstructor;
-    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 */
+    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;
+        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 color: StringConstructor;
-    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 */
+    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;
+        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;
@@ -111,58 +143,67 @@ declare const _default: import("vue").DefineComponent<{
     readonly size?: unknown;
     readonly src?: unknown;
     readonly circle?: unknown;
-    readonly color?: 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;