naive-ui 2.33.4 → 2.34.0

package/lib/_internal/loading/src/Loading.js

@@ -7,34 +7,31 @@ const vue_1 = require("vue");
 const _mixins_1 = require("../../../_mixins");
 const icon_switch_transition_1 = __importDefault(require("../../icon-switch-transition"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const exposedLoadingProps = {
+    strokeWidth: {
+        type: Number,
+        default: 28
+    },
+    stroke: {
+        type: String,
+        default: undefined
+    }
+};
 exports.default = (0, vue_1.defineComponent)({
     name: 'BaseLoading',
-    props: {
-        clsPrefix: {
+    props: Object.assign({ clsPrefix: {
             type: String,
             required: true
-        },
-        scale: {
+        }, show: {
+            type: Boolean,
+            default: true
+        }, scale: {
             type: Number,
             default: 1
-        },
-        radius: {
+        }, radius: {
             type: Number,
             default: 100
-        },
-        strokeWidth: {
-            type: Number,
-            default: 28
-        },
-        stroke: {
-            type: String,
-            default: undefined
-        },
-        show: {
-            type: Boolean,
-            default: true
-        }
-    },
+        } }, exposedLoadingProps),
     setup(props) {
         (0, _mixins_1.useStyle)('-base-loading', index_cssr_1.default, (0, vue_1.toRef)(props, 'clsPrefix'));
     },

package/lib/_internal/loading/src/styles/index.cssr.js

@@ -3,11 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../../_utils/cssr");
-
 const icon_switch_cssr_1 = require("../../../../_styles/transitions/icon-switch.cssr");
-
 exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes loading-container-rotate', `
  to {
  -webkit-transform: rotate(360deg);

package/lib/_internal/menu-mask/src/styles/index.cssr.js

@@ -3,11 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../../_utils/cssr");
-
 const fade_in_cssr_1 = require("../../../../_styles/transitions/fade-in.cssr");
-
 exports.default = (0, cssr_1.cB)('base-menu-mask', `
  position: absolute;
  left: 0;

package/lib/_internal/scrollbar/src/styles/index.cssr.js

@@ -3,18 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../../_utils/cssr");
-
-const fade_in_cssr_1 = require("../../../../_styles/transitions/fade-in.cssr"); // vars:
+const fade_in_cssr_1 = require("../../../../_styles/transitions/fade-in.cssr");
+// vars:
 // --n-scrollbar-bezier
 // --n-scrollbar-color
 // --n-scrollbar-color-hover
 // --n-scrollbar-width
 // --n-scrollbar-height
 // --n-scrollbar-border-radius
-
-
 exports.default = (0, cssr_1.cB)('scrollbar', `
  overflow: hidden;
  position: relative;

package/lib/_internal/scrollbar/src/styles/rtl.cssr.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../../_utils/cssr");
-
 exports.default = (0, cssr_1.cB)('scrollbar', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-rail', [(0, cssr_1.cM)('horizontal', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `

package/lib/_internal/select-menu/src/styles/index.cssr.js

@@ -3,14 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../../_utils/cssr");
-
-const fade_in_scale_up_cssr_1 = require("../../../../_styles/transitions/fade-in-scale-up.cssr"); // --n-loading-color
+const fade_in_scale_up_cssr_1 = require("../../../../_styles/transitions/fade-in-scale-up.cssr");
+// --n-loading-color
 // --n-loading-size
 // --n-option-padding-right
-
-
 exports.default = (0, cssr_1.cB)('base-select-menu', `
  line-height: 1.5;
  outline: none;

package/lib/_internal/selection/src/Selection.js

@@ -461,7 +461,7 @@ exports.default = (0, vue_1.defineComponent)({
                     ? renderLabel(option, true)
                     : (0, _utils_1.render)(option[labelField], option, true)
             }))));
-            const originalTags = (maxTagCountNumeric
+            const createOriginalTagNodes = () => (maxTagCountNumeric
                 ? this.selectedOptions.slice(0, maxTagCount)
                 : this.selectedOptions).map(createTag);
             const input = filterable ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-input-tag`, ref: "inputTagElRef", key: "__input-tag__" },
@@ -487,7 +487,7 @@ exports.default = (0, vue_1.defineComponent)({
                     display: 'flex',
                     overflow: 'hidden'
                 } }, {
-                default: () => originalTags,
+                default: createOriginalTagNodes,
                 counter: renderCounter,
                 tail: () => input
             })) : ((0, vue_1.h)(vueuc_1.VOverflow, { ref: "overflowRef", updateCounter: this.updateCounter, getCounter: this.getCounter, style: {
@@ -495,12 +495,12 @@ exports.default = (0, vue_1.defineComponent)({
                     display: 'flex',
                     overflow: 'hidden'
                 } }, {
-                default: () => originalTags,
+                default: createOriginalTagNodes,
                 counter: renderCounter
-            }))) : maxTagCountNumeric ? (originalTags.concat(counter)) : (originalTags);
+            }))) : maxTagCountNumeric ? (createOriginalTagNodes().concat(counter)) : (createOriginalTagNodes());
             const renderPopover = useMaxTagCount
                 ? () => ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-popover` }, maxTagCountResponsive
-                    ? originalTags
+                    ? createOriginalTagNodes()
                     : this.selectedOptions.map(createTag)))
                 : undefined;
             const popoverProps = useMaxTagCount

package/lib/_internal/selection/src/styles/index.cssr.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-const cssr_1 = require("../../../../_utils/cssr"); // vars:
+const cssr_1 = require("../../../../_utils/cssr");
+// vars:
 // --n-bezier
 // --n-border
 // --n-border-active
@@ -31,8 +31,6 @@ const cssr_1 = require("../../../../_utils/cssr"); // vars:
 // --n-loading-color
 // ...clear vars
 // ...form item vars
-
-
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  position: relative;
  z-index: auto;

package/lib/_internal/slot-machine/src/styles/index.cssr.js

@@ -3,14 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../../_utils/cssr");
-
 const fade_in_width_expand_cssr_1 = require("../../../../_styles/transitions/fade-in-width-expand.cssr");
-
-const fade_up_width_expand_cssr_1 = require("../../../../_styles/transitions/fade-up-width-expand.cssr"); // ease-out: cubic-bezier(0, 0, .2, 1)
-
-
+const fade_up_width_expand_cssr_1 = require("../../../../_styles/transitions/fade-up-width-expand.cssr");
+// ease-out: cubic-bezier(0, 0, .2, 1)
 exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes n-base-slot-machine-fade-up-in', `
  from {
  transform: translateY(60%);
@@ -61,7 +57,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes n-base-slot-machine-f
  max-width: .6em;
  `, [(0, fade_up_width_expand_cssr_1.fadeUpWidthExpandTransition)({
   duration: '.2s'
-}), // use 0s, not 0
+}),
+// use 0s, not 0
 (0, fade_in_width_expand_cssr_1.fadeInWidthExpandTransition)({
   duration: '.2s',
   delay: '0s'

package/lib/_internal/wave/src/styles/index.cssr.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const index_1 = require("../../../../_utils/cssr/index");
-
 exports.default = (0, index_1.cB)('base-wave', `
  position: absolute;
  left: 0;

package/lib/_styles/global/index.cssr.js

@@ -5,20 +5,17 @@ var __importDefault = this && this.__importDefault || function (mod) {
     "default": mod
   };
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../_utils/cssr");
-
 const _common_1 = __importDefault(require("../common/_common"));
-
 const {
   fontSize,
   fontFamily,
   lineHeight
-} = _common_1.default; // All the components need the style
+} = _common_1.default;
+// All the components need the style
 // It is static and won't be changed in the app's lifetime
 // If user want to overrides it they need to use `n-global-style` is provided
 //
@@ -28,7 +25,6 @@ const {
 // -webkit-tap-hilight-color:
 // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
 // In some android devices, there will be the style.
-
 exports.default = (0, cssr_1.c)('body', `
  margin: 0;
  font-size: ${fontSize};

package/lib/_styles/transitions/fade-down.cssr.js

@@ -5,20 +5,15 @@ var __importDefault = this && this.__importDefault || function (mod) {
     "default": mod
   };
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fadeDownTransition = void 0;
-
 const cssr_1 = require("../../_utils/cssr");
-
 const _common_1 = __importDefault(require("../common/_common"));
-
 const {
   cubicBezierEaseInOut
 } = _common_1.default;
-
 function fadeDownTransition({
   name = 'fade-down',
   fromOffset = '-4px',
@@ -39,5 +34,4 @@ function fadeDownTransition({
     transition: `opacity ${enterDuration} ${enterCubicBezier}, transform ${enterDuration} ${enterCubicBezier}`
   })];
 }
-
 exports.fadeDownTransition = fadeDownTransition;

package/lib/_styles/transitions/fade-in-height-expand.cssr.js

@@ -5,22 +5,17 @@ var __importDefault = this && this.__importDefault || function (mod) {
     "default": mod
   };
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fadeInHeightExpandTransition = void 0;
-
 const cssr_1 = require("../../_utils/cssr");
-
 const _common_1 = __importDefault(require("../common/_common"));
-
 const {
   cubicBezierEaseInOut,
   cubicBezierEaseOut,
   cubicBezierEaseIn
 } = _common_1.default;
-
 function fadeInHeightExpandTransition({
   overflow = 'hidden',
   duration = '.3s',
@@ -65,5 +60,4 @@ function fadeInHeightExpandTransition({
  ${originalTransition ? ',' + originalTransition : ''}
  `)];
 }
-
 exports.fadeInHeightExpandTransition = fadeInHeightExpandTransition;

package/lib/_styles/transitions/fade-in-scale-up.cssr.js

@@ -5,21 +5,16 @@ var __importDefault = this && this.__importDefault || function (mod) {
     "default": mod
   };
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fadeInScaleUpTransition = void 0;
-
 const cssr_1 = require("../../_utils/cssr");
-
 const _common_1 = __importDefault(require("../common/_common"));
-
 const {
   cubicBezierEaseIn,
   cubicBezierEaseOut
 } = _common_1.default;
-
 function fadeInScaleUpTransition({
   transformOrigin = 'inherit',
   duration = '.2s',
@@ -41,5 +36,4 @@ function fadeInScaleUpTransition({
     transform: `${originalTransform} scale(1)`
   })];
 }
-
 exports.fadeInScaleUpTransition = fadeInScaleUpTransition;

package/lib/_styles/transitions/fade-in-width-expand.cssr.js

@@ -5,20 +5,15 @@ var __importDefault = this && this.__importDefault || function (mod) {
     "default": mod
   };
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fadeInWidthExpandTransition = void 0;
-
 const cssr_1 = require("../../_utils/cssr");
-
 const _common_1 = __importDefault(require("../common/_common"));
-
 const {
   cubicBezierEaseInOut
 } = _common_1.default;
-
 function fadeInWidthExpandTransition({
   duration = '.2s',
   delay = '.1s'
@@ -45,5 +40,4 @@ function fadeInWidthExpandTransition({
  margin-right ${duration} ${cubicBezierEaseInOut};
  `)];
 }
-
 exports.fadeInWidthExpandTransition = fadeInWidthExpandTransition;

package/lib/_styles/transitions/fade-in.cssr.js

@@ -5,20 +5,15 @@ var __importDefault = this && this.__importDefault || function (mod) {
     "default": mod
   };
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fadeInTransition = void 0;
-
 const cssr_1 = require("../../_utils/cssr");
-
 const _common_1 = __importDefault(require("../common/_common"));
-
 const {
   cubicBezierEaseInOut
 } = _common_1.default;
-
 function fadeInTransition({
   name = 'fade-in',
   enterDuration = '0.2s',
@@ -36,5 +31,4 @@ function fadeInTransition({
     opacity: 1
   })];
 }
-
 exports.fadeInTransition = fadeInTransition;

package/lib/_styles/transitions/fade-up-width-expand.cssr.js

@@ -5,20 +5,15 @@ var __importDefault = this && this.__importDefault || function (mod) {
     "default": mod
   };
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fadeUpWidthExpandTransition = void 0;
-
 const cssr_1 = require("../../_utils/cssr");
-
 const _common_1 = __importDefault(require("../common/_common"));
-
 const {
   cubicBezierEaseOut
 } = _common_1.default;
-
 function fadeUpWidthExpandTransition({
   duration = '.2s'
 } = {}) {
@@ -50,5 +45,4 @@ function fadeUpWidthExpandTransition({
     transform: 'translateY(60%)'
   })];
 }
-
 exports.fadeUpWidthExpandTransition = fadeUpWidthExpandTransition;

package/lib/_styles/transitions/icon-switch.cssr.js

@@ -5,20 +5,15 @@ var __importDefault = this && this.__importDefault || function (mod) {
     "default": mod
   };
 };
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.iconSwitchTransition = void 0;
-
 const cssr_1 = require("../../_utils/cssr");
-
 const _common_1 = __importDefault(require("../common/_common"));
-
 const {
   cubicBezierEaseInOut
 } = _common_1.default;
-
 function iconSwitchTransition({
   originalTransform = '',
   left = 0,
@@ -43,5 +38,4 @@ function iconSwitchTransition({
     transition
   })];
 }
-
 exports.iconSwitchTransition = iconSwitchTransition;

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

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
 exports.default = (0, cssr_1.cB)('affix', [(0, cssr_1.cM)('affixed', {
   position: 'fixed'
 }, [(0, cssr_1.cM)('absolute-positioned', {

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
-const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-in-height-expand.cssr"); // vars:
+const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-in-height-expand.cssr");
+// vars:
 // --n-bezier
 // --n-color
 // --n-close-color-hover
@@ -30,8 +29,6 @@ const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-
 // --n-padding
 // --n-icon-margin-left
 // --n-icon-margin-right
-
-
 exports.default = (0, cssr_1.cB)('alert', `
  line-height: var(--n-line-height);
  border-radius: var(--n-border-radius);

package/lib/alert/src/styles/rtl.cssr.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
 exports.default = (0, cssr_1.cB)('alert', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `, [(0, cssr_1.cE)('icon', `

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-const cssr_1 = require("../../../_utils/cssr"); // vars:
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
 // --n-link-color
 // --n-link-font-size
 // --n-link-text-color
@@ -17,8 +17,6 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-rail-width
 // --n-link-padding
 // --n-link-border-radius
-
-
 exports.default = (0, cssr_1.cB)('anchor', `
  position: relative;
 `, [(0, cssr_1.cNotM)('block', `

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

@@ -3,14 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
-const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr"); // vars:
+const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr");
+// vars:
 // --n-bezier
 // --n-menu-box-shadow
-
-
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('auto-complete', `
  z-index: auto;
  position: relative;

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

@@ -1,4 +1,4 @@
-import { PropType, VNodeChild } from 'vue';
+import { PropType, VNodeChild, ImgHTMLAttributes } from 'vue';
 import { IntersectionObserverOptions } from '../../image/src/utils';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { Size, ObjectFit } from './interface';
@@ -25,6 +25,7 @@ export declare const avatarProps: {
     readonly onLoad: PropType<(e: Event) => void>;
     readonly renderPlaceholder: PropType<() => VNodeChild>;
     readonly renderFallback: PropType<() => VNodeChild>;
+    readonly imgProps: PropType<ImgHTMLAttributes>;
     /** @deprecated */
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
@@ -91,6 +92,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onLoad: PropType<(e: Event) => void>;
     readonly renderPlaceholder: PropType<() => VNodeChild>;
     readonly renderFallback: PropType<() => VNodeChild>;
+    readonly imgProps: PropType<ImgHTMLAttributes>;
     /** @deprecated */
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
@@ -178,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onLoad: PropType<(e: Event) => void>;
     readonly renderPlaceholder: PropType<() => VNodeChild>;
     readonly renderFallback: PropType<() => VNodeChild>;
+    readonly imgProps: PropType<ImgHTMLAttributes>;
     /** @deprecated */
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {

package/lib/avatar/src/Avatar.js

@@ -23,7 +23,7 @@ exports.avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, bordered: {
         type: Boolean,
         default: undefined
-    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, 
+    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, imgProps: Object, 
     /** @deprecated */
     color: String });
 exports.default = (0, vue_1.defineComponent)({
@@ -80,10 +80,12 @@ exports.default = (0, vue_1.defineComponent)({
             return props.bordered || false;
         });
         const handleError = (e) => {
+            var _a;
             if (!shouldStartLoadingRef.value)
                 return;
             hasLoadErrorRef.value = true;
-            const { onError } = props;
+            const { onError, imgProps } = props;
+            (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onError) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
             if (onError) {
                 onError(e);
             }
@@ -173,8 +175,10 @@ exports.default = (0, vue_1.defineComponent)({
             shouldStartLoading: shouldStartLoadingRef,
             loaded: loadedRef,
             mergedOnLoad: (e) => {
-                const { onLoad } = props;
+                var _a;
+                const { onLoad, imgProps } = props;
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+                (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoad) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
                 loadedRef.value = true;
             }
         };
@@ -204,17 +208,13 @@ exports.default = (0, vue_1.defineComponent)({
                     }));
                 }
                 else if (src) {
-                    return (0, vue_1.h)('img', {
-                        loading: is_native_lazy_load_1.isImageSupportNativeLazy && lazy ? 'lazy' : 'eager',
-                        src: is_native_lazy_load_1.isImageSupportNativeLazy
+                    const { imgProps } = this;
+                    return (0, vue_1.h)('img', Object.assign(Object.assign({}, imgProps), { loading: is_native_lazy_load_1.isImageSupportNativeLazy && lazy ? 'lazy' : 'eager', src: is_native_lazy_load_1.isImageSupportNativeLazy
                             ? src
                             : shouldStartLoading || loaded
                                 ? src
-                                : undefined,
-                        onLoad: mergedOnLoad,
-                        'data-image-src': src,
-                        onError: this.handleError,
-                        style: [
+                                : undefined, onLoad: mergedOnLoad, 'data-image-src': src, onError: this.handleError, style: [
+                            imgProps === null || imgProps === void 0 ? void 0 : imgProps.style,
                             { objectFit: this.objectFit },
                             placeholderNode
                                 ? {
@@ -224,8 +224,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     position: 'absolute'
                                 }
                                 : ''
-                        ]
-                    });
+                        ] }));
                 }
             });
         }

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-const cssr_1 = require("../../../_utils/cssr"); // vars:
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
 // --n-font-size
 // --n-border-radius
 // --n-color
@@ -12,8 +12,6 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-color-popover
 // --n-bezier
 // --n-merged-size
-
-
 exports.default = (0, cssr_1.cB)('avatar', `
  width: var(--n-merged-size);
  height: var(--n-merged-size);

package/lib/avatar-group/index.d.ts

@@ -1,2 +1,2 @@
 export { default as NAvatarGroup, avatarGroupProps } from './src/AvatarGroup';
-export type { AvatarGroupProps } from './src/AvatarGroup';
+export type { AvatarGroupProps, AvatarGroupOption } from './src/AvatarGroup';