naive-ui 2.22.0 → 2.24.0

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;
@@ -185,19 +185,19 @@ declare const _default: import("vue").DefineComponent<{
     handleScroll: () => void;
     handleClick: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border-radius': string;
-        '--height': string;
-        '--width': string;
-        '--box-shadow': string;
-        '--box-shadow-hover': string;
-        '--box-shadow-pressed': string;
-        '--color': string;
-        '--icon-size': string;
-        '--icon-color': string;
-        '--icon-color-hover': string;
-        '--icon-color-pressed': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-height': string;
+        '--n-width': string;
+        '--n-box-shadow': string;
+        '--n-box-shadow-hover': string;
+        '--n-box-shadow-pressed': string;
+        '--n-color': string;
+        '--n-icon-size': string;
+        '--n-icon-color': string;
+        '--n-icon-color-hover': string;
+        '--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;
@@ -266,7 +266,7 @@ declare const _default: import("vue").DefineComponent<{
     }, any>> | undefined;
     onShow?: (() => void) | undefined;
     onHide?: (() => void) | undefined;
-    listenTo?: string | HTMLElement | (() => HTMLElement) | undefined;
+    listenTo?: string | HTMLElement | Document | (() => HTMLElement | Document) | undefined;
 }>, {
     right: string | number;
     bottom: string | number;

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

@@ -173,19 +173,19 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { color, boxShadow, boxShadowHover, boxShadowPressed, iconColor, iconColorHover, iconColorPressed, width, height, iconSize, borderRadius, textColor }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--height': height,
-                    '--width': width,
-                    '--box-shadow': boxShadow,
-                    '--box-shadow-hover': boxShadowHover,
-                    '--box-shadow-pressed': boxShadowPressed,
-                    '--color': color,
-                    '--icon-size': iconSize,
-                    '--icon-color': iconColor,
-                    '--icon-color-hover': iconColorHover,
-                    '--icon-color-pressed': iconColorPressed,
-                    '--text-color': textColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-height': height,
+                    '--n-width': width,
+                    '--n-box-shadow': boxShadow,
+                    '--n-box-shadow-hover': boxShadowHover,
+                    '--n-box-shadow-pressed': boxShadowPressed,
+                    '--n-color': color,
+                    '--n-icon-size': iconSize,
+                    '--n-icon-color': iconColor,
+                    '--n-icon-color-hover': iconColorHover,
+                    '--n-icon-color-pressed': iconColorPressed,
+                    '--n-text-color': textColor
                 };
             })
         };

package/es/back-top/src/styles/index.cssr.js

@@ -1,18 +1,18 @@
 import { c, cB, cM } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --bezier
-// --border-radius
-// --height
-// --width
-// --box-shadow
-// --box-shadow-hover
-// --box-shadow-pressed
-// --color
-// --icon-size
-// --icon-color
-// --icon-color-hover
-// --icon-color-pressed
-// --text-color
+// --n-bezier
+// --n-border-radius
+// --n-height
+// --n-width
+// --n-box-shadow
+// --n-box-shadow-hover
+// --n-box-shadow-pressed
+// --n-color
+// --n-icon-size
+// --n-icon-color
+// --n-icon-color-hover
+// --n-icon-color-pressed
+// --n-text-color
 
 export default cB('back-top', `
  position: fixed;
@@ -22,30 +22,30 @@ export default cB('back-top', `
  display: flex;
  align-items: center;
  justify-content: center;
- color: var(--text-color);
+ color: var(--n-text-color);
  transition:
- color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier);
- border-radius: var(--border-radius);
- height: var(--height);
- min-width: var(--width);
- box-shadow: var(--box-shadow);
- background-color: var(--color);
+ color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ border-radius: var(--n-border-radius);
+ height: var(--n-height);
+ min-width: var(--n-width);
+ box-shadow: var(--n-box-shadow);
+ background-color: var(--n-color);
 `, [fadeInScaleUpTransition(), cM('transition-disabled', {
   transition: 'none !important'
 }), cB('base-icon', `
- font-size: var(--icon-size);
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ font-size: var(--n-icon-size);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  `), c('svg', {
   pointerEvents: 'none'
 }), c('&:hover', {
-  boxShadow: 'var(--box-shadow-hover)'
+  boxShadow: 'var(--n-box-shadow-hover)'
 }, [cB('base-icon', {
-  color: 'var(--icon-color-hover)'
+  color: 'var(--n-icon-color-hover)'
 })]), c('&:active', {
-  boxShadow: 'var(--box-shadow-pressed)'
+  boxShadow: 'var(--n-box-shadow-pressed)'
 }, [cB('base-icon', {
-  color: 'var(--icon-color-pressed)'
+  color: 'var(--n-icon-color-pressed)'
 })])]);

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

@@ -111,12 +111,12 @@ declare const _default: import("vue").DefineComponent<{
     handleAfterEnter: () => void;
     handleAfterLeave: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--font-family': string;
-        '--color': string;
-        '--ripple-color': string;
-        '--bezier': string;
-        '--ripple-bezier': string;
+        '--n-font-size': string;
+        '--n-font-family': string;
+        '--n-color': string;
+        '--n-ripple-color': string;
+        '--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;

package/es/badge/src/Badge.js

@@ -52,12 +52,12 @@ export default defineComponent({
                 const { type, color: propColor } = props;
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [createKey('color', type)]: color, fontFamily, fontSize } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--font-family': fontFamily,
-                    '--color': propColor || color,
-                    '--ripple-color': propColor || color,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--ripple-bezier': cubicBezierEaseOut
+                    '--n-font-size': fontSize,
+                    '--n-font-family': fontFamily,
+                    '--n-color': propColor || color,
+                    '--n-ripple-color': propColor || color,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-ripple-bezier': cubicBezierEaseOut
                 };
             })
         };

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

@@ -1,28 +1,28 @@
 import { c, cB, cM } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --color
-// --ripple-color
-// --bezier
-// --ripple-bezier
-// --font-size
-// --font-family
+// --n-color
+// --n-ripple-color
+// --n-bezier
+// --n-ripple-bezier
+// --n-font-size
+// --n-font-family
 
 export default c([c('@keyframes badge-wave-spread', {
   from: {
-    boxShadow: '0 0 0.5px 0px var(--ripple-color)',
+    boxShadow: '0 0 0.5px 0px var(--n-ripple-color)',
     opacity: 0.6
   },
   to: {
     // don't use exact 5px since chrome will display the animation with glitches
-    boxShadow: '0 0 0.5px 4.5px var(--ripple-color)',
+    boxShadow: '0 0 0.5px 4.5px var(--n-ripple-color)',
     opacity: 0
   }
 }), cB('badge', `
  display: inline-flex;
  position: relative;
  vertical-align: middle;
- color: var(--color);
- font-family: var(--font-family);
+ color: var(--n-color);
+ font-family: var(--n-font-family);
  `, [cM('as-is', [cB('badge-sup', {
   position: 'static',
   transform: 'translateX(0)'
@@ -39,10 +39,10 @@ export default c([c('@keyframes badge-wave-spread', {
 }, [c('::before', {
   borderRadius: '4px'
 })])]), cB('badge-sup', `
- background: var(--color);
+ background: var(--n-color);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  color: #FFF;
  position: absolute;
  height: 18px;
@@ -50,7 +50,7 @@ export default c([c('@keyframes badge-wave-spread', {
  border-radius: 9px;
  padding: 0 6px;
  text-align: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  transform: translateX(-50%);
  left: 100%;
  bottom: calc(100% - 9px);
@@ -64,7 +64,7 @@ export default c([c('@keyframes badge-wave-spread', {
   animationDuration: '2s',
   animationIterationCount: 'infinite',
   animationDelay: '1s',
-  animationTimingFunction: 'var(--ripple-bezier)',
+  animationTimingFunction: 'var(--n-ripple-bezier)',
   animationName: 'badge-wave-spread'
 }), c('&::before', `
  opacity: 0;

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/button/src/Button.d.ts

@@ -41,11 +41,12 @@ declare const buttonProps: {
         readonly type: PropType<"button" | "reset" | "submit">;
         readonly default: "button";
     };
-    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     readonly bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly internalAutoFocus: BooleanConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -700,11 +701,12 @@ declare const Button: import("vue").DefineComponent<{
         readonly type: PropType<"button" | "reset" | "submit">;
         readonly default: "button";
     };
-    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     readonly bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    readonly internalAutoFocus: BooleanConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -1318,8 +1320,8 @@ declare const Button: import("vue").DefineComponent<{
         rippleDuration: string;
     }, any>>>;
 }, {
-    selfRef: import("vue").Ref<HTMLElement | null>;
-    waveRef: import("vue").Ref<{
+    selfElRef: import("vue").Ref<HTMLElement | null>;
+    waveElRef: import("vue").Ref<{
         play: () => void;
     } | null>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
@@ -1393,8 +1395,9 @@ declare const Button: import("vue").DefineComponent<{
     readonly dashed?: unknown;
     readonly iconPlacement?: unknown;
     readonly attrType?: unknown;
-    readonly onClick?: unknown;
     readonly bordered?: unknown;
+    readonly onClick?: unknown;
+    readonly internalAutoFocus?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -1418,6 +1421,7 @@ declare const Button: import("vue").DefineComponent<{
     quaternary: boolean;
     iconPlacement: "left" | "right";
     attrType: "button" | "reset" | "submit";
+    internalAutoFocus: boolean;
 } & {
     color?: string | undefined;
     size?: Size | undefined;
@@ -2055,6 +2059,7 @@ declare const Button: import("vue").DefineComponent<{
     quaternary: boolean;
     iconPlacement: "left" | "right";
     attrType: "button" | "reset" | "submit";
+    internalAutoFocus: boolean;
 }>;
 declare type NativeButtonProps = Omit<ButtonHTMLAttributes, keyof ButtonProps>;
 declare type MergedProps = Partial<ButtonProps & NativeButtonProps>;

package/es/button/src/Button.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, inject, defineComponent, renderSlot, watchEffect } from 'vue';
+import { h, ref, computed, inject, onMounted, defineComponent, renderSlot, watchEffect } from 'vue';
 import { useMemo } from 'vooks';
 import { createHoverColor, createPressedColor } from '../../_utils/color/index';
 import { useConfig, useFormItem, useTheme } from '../../_mixins';
@@ -27,10 +27,10 @@ const buttonProps = Object.assign(Object.assign({}, useTheme.props), { color: St
     }, attrType: {
         type: String,
         default: 'button'
-    }, onClick: [Function, Array], bordered: {
+    }, bordered: {
         type: Boolean,
         default: true
-    } });
+    }, onClick: [Function, Array], internalAutoFocus: Boolean });
 const Button = defineComponent({
     name: 'Button',
     props: buttonProps,
@@ -44,9 +44,18 @@ const Button = defineComponent({
                 }
             });
         }
-        const selfRef = ref(null);
-        const waveRef = ref(null);
+        const selfElRef = ref(null);
+        const waveElRef = ref(null);
         const enterPressedRef = ref(false);
+        onMounted(() => {
+            const { value: selfEl } = selfElRef;
+            if (selfEl &&
+                !props.disabled &&
+                props.focusable &&
+                props.internalAutoFocus) {
+                selfEl.focus({ preventScroll: true });
+            }
+        });
         const showBorderRef = useMemo(() => {
             return (!props.quaternary &&
                 !props.tertiary &&
@@ -82,19 +91,17 @@ const Button = defineComponent({
                 return;
             }
             if (mergedFocusableRef.value) {
-                (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+                (_a = selfElRef.value) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
             }
         };
         const handleClick = (e) => {
+            var _a;
             if (!props.disabled && !props.loading) {
                 const { onClick } = props;
                 if (onClick)
                     call(onClick, e);
                 if (!props.text) {
-                    const { value } = waveRef;
-                    if (value) {
-                        value.play();
-                    }
+                    (_a = waveElRef.value) === null || _a === void 0 ? void 0 : _a.play();
                 }
             }
         };
@@ -126,8 +133,8 @@ const Button = defineComponent({
         const themeRef = useTheme('Button', 'Button', style, buttonLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('Button', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
         return {
-            selfRef,
-            waveRef,
+            selfElRef,
+            waveElRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedFocusable: mergedFocusableRef,
             mergedSize: mergedSizeRef,
@@ -383,7 +390,7 @@ const Button = defineComponent({
     },
     render() {
         const { $slots, mergedClsPrefix, tag: Component } = this;
-        return (h(Component, { ref: "selfRef", class: [
+        return (h(Component, { ref: "selfElRef", class: [
                 `${mergedClsPrefix}-button`,
                 `${mergedClsPrefix}-button--${this.type}-type`,
                 `${mergedClsPrefix}-button--${this.mergedSize}-type`,
@@ -407,7 +414,7 @@ const Button = defineComponent({
                     }))) : null
             }),
             $slots.default && this.iconPlacement === 'left' ? (h("span", { class: `${mergedClsPrefix}-button__content` }, $slots)) : null,
-            !this.text ? (h(NBaseWave, { ref: "waveRef", clsPrefix: mergedClsPrefix })) : null,
+            !this.text ? (h(NBaseWave, { ref: "waveElRef", clsPrefix: mergedClsPrefix })) : null,
             this.showBorder ? (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__border`, style: this.customColorCssVars })) : null,
             this.showBorder ? (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-button__state-border`, style: this.customColorCssVars })) : null));
     }