naive-ui 2.21.2 → 2.22.0

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

@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_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
 
 
 exports.default = (0, cssr_1.cB)('anchor', `
  position: relative;
 `, [(0, cssr_1.cNotM)('block', `
- padding-left: var(--rail-width);
+ padding-left: var(--n-rail-width);
  `, [(0, cssr_1.cB)('anchor-link', [(0, cssr_1.c)('+, >', [(0, cssr_1.cB)('anchor-link', `
  margin-top: .5em;
  `)])]), (0, cssr_1.cB)('anchor-link-background', `
@@ -32,56 +32,52 @@ exports.default = (0, cssr_1.cB)('anchor', `
  `), (0, cssr_1.cNotM)('show-rail', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('anchor-link', 'padding-left: 0;')])])]), (0, cssr_1.cM)('block', [(0, cssr_1.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);
  `, [(0, cssr_1.cM)('active', `
- background-color: var(--link-color);
+ background-color: var(--n-link-color);
  `)])]), (0, cssr_1.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);
  `), (0, cssr_1.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);
  `, [(0, cssr_1.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);
  `, [(0, cssr_1.cM)('active', {
-  backgroundColor: 'var(--rail-color-active)'
+  backgroundColor: 'var(--n-rail-color-active)'
 })])]), (0, cssr_1.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;
- `, [(0, cssr_1.cM)('active', [(0, cssr_1.cE)('title', `
- color: var(--link-text-color-active);
- `)]), (0, cssr_1.c)('&:hover, &:focus', [(0, cssr_1.cE)('title', `
- color: var(--link-text-color-hover);
- `)]), (0, cssr_1.c)('&:active', [(0, cssr_1.cE)('title', `
- color: var(--link-text-color-pressed);
- `)]), (0, cssr_1.cE)('title', `
+ `, [(0, cssr_1.cM)('active', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('title', `
+ color: var(--n-link-text-color-active);
+ `)])]), (0, cssr_1.cE)('title', `
  outline: none;
  max-width: 100%;
  text-decoration: none;
@@ -91,6 +87,10 @@ exports.default = (0, cssr_1.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);
+ `, [(0, cssr_1.c)('&:hover, &:focus', `
+ color: var(--n-link-text-color-hover);
+ `), (0, cssr_1.c)('&:active', `
+ color: var(--n-link-text-color-pressed);
+ `)])])]);

package/lib/avatar/src/Avatar.d.ts

@@ -7,7 +7,6 @@ declare const avatarProps: {
     };
     readonly src: StringConstructor;
     readonly circle: BooleanConstructor;
-    readonly color: StringConstructor;
     readonly objectFit: {
         readonly type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         readonly default: "fill";
@@ -15,6 +14,8 @@ declare const avatarProps: {
     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;
@@ -54,7 +55,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly src: StringConstructor;
     readonly circle: BooleanConstructor;
-    readonly color: StringConstructor;
     readonly objectFit: {
         readonly type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         readonly default: "fill";
@@ -62,6 +62,8 @@ declare const _default: import("vue").DefineComponent<{
     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;
@@ -111,11 +113,11 @@ 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 onError?: unknown;
     readonly fallbackSrc?: unknown;
+    readonly color?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;

package/lib/avatar/src/Avatar.js

@@ -13,10 +13,12 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
         type: [String, Number],
         default: 'medium'
-    }, src: String, circle: Boolean, color: String, objectFit: {
+    }, src: String, circle: Boolean, objectFit: {
         type: String,
         default: 'fill'
-    }, round: Boolean, onError: Function, fallbackSrc: String });
+    }, round: Boolean, onError: Function, fallbackSrc: String, 
+    /** @deprecated */
+    color: String });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Avatar',
     props: avatarProps,
@@ -67,7 +69,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefix: mergedClsPrefixRef,
             fitTextTransform,
             cssVars: (0, vue_1.computed)(() => {
-                const { size } = props;
+                const { size, color: propColor } = props;
                 const { self: { borderRadius, fontSize, color }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 let height;
                 if (typeof size === 'number') {
@@ -79,7 +81,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return {
                     '--font-size': fontSize,
                     '--border-radius': mergedRoundRef.value ? '50%' : borderRadius,
-                    '--color': color,
+                    '--color': propColor || color,
                     '--bezier': cubicBezierEaseInOut,
                     '--merged-size': `var(--avatar-size-override, ${height})`
                 };
@@ -96,7 +98,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         else if (!(!$slots.default && src)) {
             img = ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.fitTextTransform }, {
-                default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text`, style: { background: this.color } }, $slots))
+                default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text` }, $slots))
             }));
         }
         else {

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

@@ -9,7 +9,7 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --border-radius
 // --color
 // --bezier
-// --size
+// --merged-size
 
 
 exports.default = (0, cssr_1.cB)('avatar', `
@@ -37,7 +37,5 @@ exports.default = (0, cssr_1.cB)('avatar', `
  top: 50%;
  `), (0, cssr_1.cB)('icon', `
  vertical-align: bottom;
- font-size: var(--size);
- `), (0, cssr_1.cE)('text', {
-  lineHeight: 1.25
-})]);
+ font-size: calc(var(--merged-size) - 6px);
+ `), (0, cssr_1.cE)('text', 'line-height: 1.25')]);

package/lib/button/src/Button.d.ts

@@ -60,9 +60,9 @@ declare const buttonProps: {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -264,9 +264,9 @@ declare const buttonProps: {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -468,9 +468,9 @@ declare const buttonProps: {
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -719,9 +719,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -923,9 +923,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -1127,9 +1127,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -1334,42 +1334,42 @@ declare const Button: import("vue").DefineComponent<{
     handleKeyup: (e: KeyboardEvent) => void;
     handleClick: (e: MouseEvent) => void;
     customColorCssVars: import("vue").ComputedRef<{
-        '--border-color': string;
-        '--border-color-hover': string;
-        '--border-color-pressed': string;
-        '--border-color-focus': string;
-        '--border-color-disabled': string;
+        '--n-border-color': string;
+        '--n-border-color-hover': string;
+        '--n-border-color-pressed': string;
+        '--n-border-color-focus': string;
+        '--n-border-color-disabled': string;
     } | null>;
     cssVars: import("vue").ComputedRef<{
-        '--width': string;
-        '--height': string;
-        '--font-size': string;
-        '--padding': string;
-        '--icon-size': string;
-        '--icon-margin': string;
-        '--border-radius': string;
-        '--border': string;
-        '--border-hover': string;
-        '--border-pressed': string;
-        '--border-focus': string;
-        '--border-disabled': string;
-        '--color': string;
-        '--color-hover': string;
-        '--color-pressed': string;
-        '--color-focus': string;
-        '--color-disabled': string;
-        '--ripple-color': string;
-        '--text-color': string;
-        '--text-color-hover': string;
-        '--text-color-pressed': string;
-        '--text-color-focus': string;
-        '--text-color-disabled': string;
+        '--n-width': string;
+        '--n-height': string;
+        '--n-font-size': string;
+        '--n-padding': string;
+        '--n-icon-size': string;
+        '--n-icon-margin': string;
+        '--n-border-radius': string;
+        '--n-border': string;
+        '--n-border-hover': string;
+        '--n-border-pressed': string;
+        '--n-border-focus': string;
+        '--n-border-disabled': string;
+        '--n-color': string;
+        '--n-color-hover': string;
+        '--n-color-pressed': string;
+        '--n-color-focus': string;
+        '--n-color-disabled': string;
+        '--n-ripple-color': string;
+        '--n-text-color': string;
+        '--n-text-color-hover': string;
+        '--n-text-color-pressed': string;
+        '--n-text-color-focus': string;
+        '--n-text-color-disabled': string;
         fontWeight: string;
-        '--bezier': string;
-        '--bezier-ease-out': string;
-        '--ripple-duration': string;
-        '--opacity-disabled': string;
-        '--wave-opacity': string;
+        '--n-bezier': string;
+        '--n-bezier-ease-out': string;
+        '--n-ripple-duration': string;
+        '--n-opacity-disabled': string;
+        '--n-wave-opacity': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly color?: unknown;
@@ -1436,9 +1436,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -1640,9 +1640,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;
@@ -1844,9 +1844,9 @@ declare const Button: import("vue").DefineComponent<{
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;