naive-ui 2.30.8 → 2.31.0

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.30.8";
+declare const _default: "2.31.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.30.8';
+export default '2.31.0';

package/es/watermark/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NWatermark } from './src/Watermark';
+export { default as NWatermark, watermarkProps } from './src/Watermark';
 export type { WatermarkProps } from './src/Watermark';

package/es/watermark/index.js

@@ -1 +1 @@
-export { default as NWatermark } from './src/Watermark';
+export { default as NWatermark, watermarkProps } from './src/Watermark';

package/es/watermark/src/Watermark.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
-declare const watermarkProps: {
+export declare const watermarkProps: {
     readonly debug: BooleanConstructor;
     readonly cross: BooleanConstructor;
     readonly fullscreen: BooleanConstructor;

package/es/watermark/src/Watermark.js

@@ -17,7 +17,7 @@ function getRatio(context) {
         1;
     return (window.devicePixelRatio || 1) / backingStore;
 }
-const watermarkProps = Object.assign(Object.assign({}, useTheme.props), { debug: Boolean, cross: Boolean, fullscreen: Boolean, width: {
+export const watermarkProps = Object.assign(Object.assign({}, useTheme.props), { debug: Boolean, cross: Boolean, fullscreen: Boolean, width: {
         type: Number,
         default: 32
     }, height: {

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

@@ -1,7 +1,10 @@
 import { c, cB, cNotM, cM } from '../../../_utils/cssr';
 export default c([cB('watermark-container', `
  position: relative;
- `, [cNotM('selectable', 'user-select: none;')]), cB('watermark', `
+ `, [cNotM('selectable', `
+ user-select: none;
+ -webkit-user-select: none;
+ `)]), cB('watermark', `
  position: absolute;
  top: 0;
  left: 0;

package/lib/_internal/scrollbar/src/Scrollbar.js

@@ -575,13 +575,19 @@ const Scrollbar = (0, vue_1.defineComponent)({
                                 this.contentClass
                             ] }, $slots))
                     }))),
-                (0, vue_1.h)("div", { ref: "yRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--vertical`, style: this.verticalRailStyle, "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
+                (0, vue_1.h)("div", { ref: "yRailRef", class: [
+                        `${mergedClsPrefix}-scrollbar-rail`,
+                        `${mergedClsPrefix}-scrollbar-rail--vertical`
+                    ], "data-scrollbar-rail": true, style: this.verticalRailStyle, "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
                     default: () => this.needYBar && this.isShowYBar && !this.isIos ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             height: this.yBarSizePx,
                             top: this.yBarTopPx
                         }, onMousedown: this.handleYScrollMouseDown })) : null
                 })),
-                (0, vue_1.h)("div", { ref: "xRailRef", class: `${mergedClsPrefix}-scrollbar-rail ${mergedClsPrefix}-scrollbar-rail--horizontal`, style: this.horizontalRailStyle, "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
+                (0, vue_1.h)("div", { ref: "xRailRef", class: [
+                        `${mergedClsPrefix}-scrollbar-rail`,
+                        `${mergedClsPrefix}-scrollbar-rail--horizontal`
+                    ], style: this.horizontalRailStyle, "data-scrollbar-rail": true, "aria-hidden": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
                     default: () => this.needXBar && this.isShowXBar && !this.isIos ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             width: this.xBarSizePx,
                             left: this.xBarLeftPx

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

@@ -38,6 +38,7 @@ exports.default = (0, cssr_1.cB)('scrollbar', `
  position: absolute;
  pointer-events: none;
  user-select: none;
+ -webkit-user-select: none;
  `, [(0, cssr_1.cM)('horizontal', `
  left: 2px;
  right: 2px;

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

@@ -201,6 +201,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  white-space: pre;
  visibility: hidden;
  user-select: none;
+ -webkit-user-select: none;
  opacity: 0;
  `)]), ['warning', 'error'].map(status => (0, cssr_1.cM)(`${status}-status`, [(0, cssr_1.cE)('state-border', `border: var(--n-border-${status});`), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
  box-shadow: var(--n-box-shadow-hover-${status});

package/lib/_mixins/use-rtl.d.ts

@@ -1,3 +1,3 @@
 import { Ref } from 'vue';
 import { RtlEnabledState, RtlItem } from '../config-provider/src/internal-interface';
-export default function useRtl(mountId: string, rtlStateRef: Ref<RtlEnabledState | undefined> | undefined, clsPrefixRef: Ref<string>): Ref<RtlItem | undefined> | undefined;
+export declare function useRtl(mountId: string, rtlStateRef: Ref<RtlEnabledState | undefined> | undefined, clsPrefixRef: Ref<string>): Ref<RtlItem | undefined> | undefined;

package/lib/_mixins/use-rtl.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRtl = void 0;
 const vue_1 = require("vue");
 const css_render_1 = require("css-render");
 const vue3_ssr_1 = require("@css-render/vue3-ssr");
@@ -50,4 +51,4 @@ function useRtl(mountId, rtlStateRef, clsPrefixRef) {
     }
     return componentRtlStateRef;
 }
-exports.default = useRtl;
+exports.useRtl = useRtl;

package/lib/_utils/env/browser.d.ts

@@ -0,0 +1,3 @@
+export declare const isChrome: boolean;
+export declare const isFirefox: boolean;
+export declare const isSafari: boolean;

package/lib/_utils/env/browser.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSafari = exports.isFirefox = exports.isChrome = void 0;
+const is_browser_1 = require("./is-browser");
+exports.isChrome = is_browser_1.isBrowser && 'chrome' in window;
+exports.isFirefox = is_browser_1.isBrowser && navigator.userAgent.includes('Firefox');
+exports.isSafari = is_browser_1.isBrowser && navigator.userAgent.includes('Safari') && !exports.isChrome;

package/lib/_utils/env/is-native-lazy-load.d.ts

@@ -0,0 +1 @@
+export declare const isImageSupportNativeLazy = false;

package/lib/_utils/env/is-native-lazy-load.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isImageSupportNativeLazy = void 0;
+exports.isImageSupportNativeLazy = false;
+// Keep it to false currently, we will provide a prop to make it configuable
+// typeof document !== 'undefined' && 'loading' in document.createElement('img')

package/lib/affix/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NAffix } from './src/Affix';
+export { default as NAffix, affixProps } from './src/Affix';
 export type { AffixProps } from './src/Affix';

package/lib/affix/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NAffix = void 0;
+exports.affixProps = exports.NAffix = void 0;
 var Affix_1 = require("./src/Affix");
 Object.defineProperty(exports, "NAffix", { enumerable: true, get: function () { return __importDefault(Affix_1).default; } });
+Object.defineProperty(exports, "affixProps", { enumerable: true, get: function () { return Affix_1.affixProps; } });

package/lib/alert/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NAlert } from './src/Alert';
+export { default as NAlert, alertProps } from './src/Alert';
 export type { AlertProps } from './src/Alert';

package/lib/alert/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NAlert = void 0;
+exports.alertProps = exports.NAlert = void 0;
 var Alert_1 = require("./src/Alert");
 Object.defineProperty(exports, "NAlert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
+Object.defineProperty(exports, "alertProps", { enumerable: true, get: function () { return Alert_1.alertProps; } });

package/lib/alert/src/Alert.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const alertProps: {
+export declare const alertProps: {
     title: StringConstructor;
     showIcon: {
         type: BooleanConstructor;

package/lib/alert/src/Alert.js

@@ -3,16 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.alertProps = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const icons_1 = require("../../_internal/icons");
 const _internal_1 = require("../../_internal");
-const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
+const use_rtl_1 = require("../../_mixins/use-rtl");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const alertProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, showIcon: {
+exports.alertProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, showIcon: {
         type: Boolean,
         default: true
     }, type: {
@@ -24,7 +25,7 @@ const alertProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
 exports.default = (0, vue_1.defineComponent)({
     name: 'Alert',
     inheritAttrs: false,
-    props: alertProps,
+    props: exports.alertProps,
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {
@@ -35,7 +36,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Alert', '-alert', index_cssr_1.default, styles_1.alertLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = (0, use_rtl_1.default)('Alert', mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('Alert', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
             const { fontSize, borderRadius, titleFontWeight, lineHeight, iconSize, iconMargin, iconMarginRtl, closeIconSize, closeBorderRadius, closeSize, closeMargin, closeMarginRtl, padding } = self;

package/lib/anchor/index.d.ts

@@ -1,4 +1,4 @@
-export { default as NAnchor } from './src/AnchorAdapter';
+export { default as NAnchor, anchorProps } from './src/AnchorAdapter';
 export type { AnchorInst, AnchorProps } from './src/AnchorAdapter';
-export { default as NAnchorLink } from './src/Link';
+export { default as NAnchorLink, anchorLinkProps } from './src/Link';
 export type { AnchorLinkProps } from './src/Link';

package/lib/anchor/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NAnchorLink = exports.NAnchor = void 0;
+exports.anchorLinkProps = exports.NAnchorLink = exports.anchorProps = exports.NAnchor = void 0;
 var AnchorAdapter_1 = require("./src/AnchorAdapter");
 Object.defineProperty(exports, "NAnchor", { enumerable: true, get: function () { return __importDefault(AnchorAdapter_1).default; } });
+Object.defineProperty(exports, "anchorProps", { enumerable: true, get: function () { return AnchorAdapter_1.anchorProps; } });
 var Link_1 = require("./src/Link");
 Object.defineProperty(exports, "NAnchorLink", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
+Object.defineProperty(exports, "anchorLinkProps", { enumerable: true, get: function () { return Link_1.anchorLinkProps; } });

package/lib/anchor/src/AnchorAdapter.d.ts

@@ -2,7 +2,7 @@ import type { ExtractPublicPropTypes } from '../../_utils';
 export interface AnchorInst {
     scrollTo: (href: string) => void;
 }
-declare const anchorProps: {
+export declare const anchorProps: {
     readonly type: {
         readonly type: import("vue").PropType<"block" | "rail">;
         readonly default: "rail";

package/lib/anchor/src/AnchorAdapter.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.anchorProps = void 0;
 const vue_1 = require("vue");
 const affix_1 = require("../../affix");
 const Affix_1 = require("../../affix/src/Affix");
@@ -34,10 +35,10 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const BaseAnchor_1 = __importStar(require("./BaseAnchor"));
-const anchorProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), { affix: Boolean }), Affix_1.affixProps), BaseAnchor_1.baseAnchorProps);
+exports.anchorProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), { affix: Boolean }), Affix_1.affixProps), BaseAnchor_1.baseAnchorProps);
 exports.default = (0, vue_1.defineComponent)({
     name: 'Anchor',
-    props: anchorProps,
+    props: exports.anchorProps,
     setup(props, { slots }) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Anchor', '-anchor', index_cssr_1.default, styles_1.anchorLight, props, mergedClsPrefixRef);

package/lib/anchor/src/Link.d.ts

@@ -9,7 +9,7 @@ export interface AnchorInjection {
     titleEls: HTMLElement[];
 }
 export declare const anchorInjectionKey: import("vue").InjectionKey<AnchorInjection>;
-declare const anchorLinkProps: {
+export declare const anchorLinkProps: {
     readonly title: StringConstructor;
     readonly href: StringConstructor;
 };

package/lib/anchor/src/Link.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.anchorInjectionKey = void 0;
+exports.anchorLinkProps = exports.anchorInjectionKey = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const composable_1 = require("../../_utils/composable");
 const _utils_1 = require("../../_utils");
 exports.anchorInjectionKey = (0, _utils_1.createInjectionKey)('n-anchor');
-const anchorLinkProps = {
+exports.anchorLinkProps = {
     title: String,
     href: String
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'AnchorLink',
-    props: anchorLinkProps,
+    props: exports.anchorLinkProps,
     setup(props, { slots }) {
         const titleRef = (0, vue_1.ref)(null);
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/lib/auto-complete/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NAutoComplete } from './src/AutoComplete';
+export { default as NAutoComplete, autoCompleteProps } from './src/AutoComplete';
 export type { AutoCompleteProps } from './src/AutoComplete';
 export type { AutoCompleteOption, AutoCompleteGroupOption, AutoCompleteInst } from './src/interface';

package/lib/auto-complete/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NAutoComplete = void 0;
+exports.autoCompleteProps = exports.NAutoComplete = void 0;
 var AutoComplete_1 = require("./src/AutoComplete");
 Object.defineProperty(exports, "NAutoComplete", { enumerable: true, get: function () { return __importDefault(AutoComplete_1).default; } });
+Object.defineProperty(exports, "autoCompleteProps", { enumerable: true, get: function () { return AutoComplete_1.autoCompleteProps; } });

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

@@ -7,7 +7,7 @@ import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '.
 import { MaybeArray } from '../../_utils';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { AutoCompleteOptions, OnUpdateValue, OnSelect } from './interface';
-declare const autoCompleteProps: {
+export declare const autoCompleteProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.autoCompleteProps = void 0;
 const vue_1 = require("vue");
 const treemate_1 = require("treemate");
 const vueuc_1 = require("vueuc");
@@ -16,7 +17,7 @@ const input_1 = require("../../input");
 const styles_1 = require("../styles");
 const utils_2 = require("./utils");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const autoCompleteProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, bordered: {
+exports.autoCompleteProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.useAdjustedTo.propTo, bordered: {
         type: Boolean,
         default: undefined
     }, clearable: {
@@ -42,7 +43,7 @@ const autoCompleteProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     onInput: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'AutoComplete',
-    props: autoCompleteProps,
+    props: exports.autoCompleteProps,
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {

package/lib/avatar/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NAvatar } from './src/Avatar';
+export { default as NAvatar, avatarProps } from './src/Avatar';
 export type { AvatarProps } from './src/Avatar';

package/lib/avatar/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NAvatar = void 0;
+exports.avatarProps = exports.NAvatar = void 0;
 var Avatar_1 = require("./src/Avatar");
 Object.defineProperty(exports, "NAvatar", { enumerable: true, get: function () { return __importDefault(Avatar_1).default; } });
+Object.defineProperty(exports, "avatarProps", { enumerable: true, get: function () { return Avatar_1.avatarProps; } });

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

@@ -1,6 +1,7 @@
 import { PropType } from 'vue';
-import type { Size, ObjectFit } from './interface';
+import { IntersectionObserverOptions } from '../../image/src/utils';
 import type { ExtractPublicPropTypes } from '../../_utils';
+import type { Size, ObjectFit } from './interface';
 export declare const avatarProps: {
     readonly size: PropType<Size>;
     readonly src: StringConstructor;
@@ -19,6 +20,8 @@ export declare const avatarProps: {
     };
     readonly onError: PropType<(e: Event) => void>;
     readonly fallbackSrc: StringConstructor;
+    readonly intersectionObserverOptions: PropType<IntersectionObserverOptions>;
+    readonly lazy: BooleanConstructor;
     /** @deprecated */
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
@@ -80,6 +83,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly onError: PropType<(e: Event) => void>;
     readonly fallbackSrc: StringConstructor;
+    readonly intersectionObserverOptions: PropType<IntersectionObserverOptions>;
+    readonly lazy: BooleanConstructor;
     /** @deprecated */
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
@@ -141,6 +146,10 @@ declare const _default: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
     hasLoadError: import("vue").Ref<boolean>;
     handleError: (e: Event) => void;
+    imageRef: import("vue").Ref<HTMLImageElement | null>;
+    shouldStartLoading: import("vue").Ref<boolean>;
+    loaded: import("vue").Ref<boolean>;
+    mergedOnLoad: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly size: PropType<Size>;
     readonly src: StringConstructor;
@@ -159,6 +168,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly onError: PropType<(e: Event) => void>;
     readonly fallbackSrc: StringConstructor;
+    readonly intersectionObserverOptions: PropType<IntersectionObserverOptions>;
+    readonly lazy: BooleanConstructor;
     /** @deprecated */
     readonly color: StringConstructor;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
@@ -201,6 +212,7 @@ declare const _default: import("vue").DefineComponent<{
         colorPopover: string;
     }, any>>>;
 }>>, {
+    readonly lazy: boolean;
     readonly round: boolean;
     readonly circle: boolean;
     readonly bordered: boolean;

package/lib/avatar/src/Avatar.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.avatarProps = void 0;
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
-const context_1 = require("./context");
+const is_native_lazy_load_1 = require("../../_utils/env/is-native-lazy-load");
+const utils_1 = require("../../image/src/utils");
 const Tag_1 = require("../../tag/src/Tag");
 const _mixins_1 = require("../../_mixins");
-const styles_1 = require("../styles");
 const _utils_1 = require("../../_utils");
+const styles_1 = require("../styles");
+const context_1 = require("./context");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: [String, Number], src: String, circle: {
         type: Boolean,
@@ -21,7 +23,7 @@ exports.avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, bordered: {
         type: Boolean,
         default: undefined
-    }, onError: Function, fallbackSrc: String, 
+    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, 
     /** @deprecated */
     color: String });
 exports.default = (0, vue_1.defineComponent)({
@@ -78,6 +80,8 @@ exports.default = (0, vue_1.defineComponent)({
             return props.bordered || false;
         });
         const handleError = (e) => {
+            if (!shouldStartLoadingRef.value)
+                return;
             hasLoadErrorRef.value = true;
             const { onError } = props;
             if (onError) {
@@ -136,6 +140,26 @@ exports.default = (0, vue_1.defineComponent)({
                 return hash;
             }), cssVarsRef, props)
             : undefined;
+        const imageRef = (0, vue_1.ref)(null);
+        const shouldStartLoadingRef = (0, vue_1.ref)(!props.lazy);
+        (0, vue_1.onMounted)(() => {
+            if (is_native_lazy_load_1.isImageSupportNativeLazy) {
+                return;
+            }
+            let unobserve;
+            const stopWatchHandle = (0, vue_1.watchEffect)(() => {
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                unobserve = undefined;
+                if (props.lazy) {
+                    unobserve = (0, utils_1.observeIntersection)(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+                }
+            });
+            (0, vue_1.onBeforeUnmount)(() => {
+                stopWatchHandle();
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+            });
+        });
+        const loadedRef = (0, vue_1.ref)(!props.lazy);
         return {
             textRef,
             selfRef,
@@ -146,13 +170,23 @@ exports.default = (0, vue_1.defineComponent)({
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             hasLoadError: hasLoadErrorRef,
-            handleError
+            handleError,
+            imageRef,
+            shouldStartLoading: shouldStartLoadingRef,
+            loaded: loadedRef,
+            mergedOnLoad: (e) => {
+                const { onLoad } = props;
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+                loadedRef.value = true;
+            }
         };
     },
     render() {
-        const { $slots, src, mergedClsPrefix, onRender } = this;
+        var _a, _b;
+        const { $slots, src, mergedClsPrefix, lazy, onRender, mergedOnLoad, shouldStartLoading, loaded } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         let img;
+        const placeholderNode = (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a);
         if (this.hasLoadError) {
             img = (0, vue_1.h)("img", { src: this.fallbackSrc, style: { objectFit: this.objectFit } });
         }
@@ -164,10 +198,29 @@ exports.default = (0, vue_1.defineComponent)({
                     }));
                 }
                 else if (src) {
-                    return ((0, vue_1.h)("img", { src: src, onError: this.handleError, style: { objectFit: this.objectFit } }));
+                    return (0, vue_1.h)('img', {
+                        loading: lazy ? 'lazy' : 'eager',
+                        ref: 'imageRef',
+                        src: is_native_lazy_load_1.isImageSupportNativeLazy
+                            ? src
+                            : shouldStartLoading || loaded
+                                ? src
+                                : undefined,
+                        onLoad: mergedOnLoad,
+                        'data-image-src': src,
+                        onError: this.handleError,
+                        style: [
+                            { objectFit: this.objectFit },
+                            placeholderNode && !loaded
+                                ? { height: '0', width: '0', visibility: 'hidden' }
+                                : ''
+                        ]
+                    });
                 }
             });
         }
-        return ((0, vue_1.h)("span", { ref: "selfRef", class: [`${mergedClsPrefix}-avatar`, this.themeClass], style: this.cssVars }, img));
+        return ((0, vue_1.h)("span", { ref: "selfRef", class: [`${mergedClsPrefix}-avatar`, this.themeClass], style: this.cssVars },
+            img,
+            lazy && !loaded && placeholderNode));
     }
 });

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

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

package/lib/avatar-group/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NAvatarGroup = void 0;
+exports.avatarGroupProps = exports.NAvatarGroup = void 0;
 var AvatarGroup_1 = require("./src/AvatarGroup");
 Object.defineProperty(exports, "NAvatarGroup", { enumerable: true, get: function () { return __importDefault(AvatarGroup_1).default; } });
+Object.defineProperty(exports, "avatarGroupProps", { enumerable: true, get: function () { return AvatarGroup_1.avatarGroupProps; } });

package/lib/avatar-group/src/AvatarGroup.d.ts

@@ -7,7 +7,7 @@ export interface AvatarGroupInjection {
 interface AvatarOption {
     src: string;
 }
-declare const avatarGroupProps: {
+export declare const avatarGroupProps: {
     readonly max: NumberConstructor;
     readonly maxStyle: PropType<string | CSSProperties>;
     readonly options: {

package/lib/avatar-group/src/AvatarGroup.js

@@ -3,25 +3,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.avatarGroupProps = void 0;
 const vue_1 = require("vue");
 const context_1 = require("../../avatar/src/context");
 const Avatar_1 = __importDefault(require("../../avatar/src/Avatar"));
 const _mixins_1 = require("../../_mixins");
 const avatar_group_cssr_1 = __importDefault(require("./styles/avatar-group.cssr"));
-const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
+const use_rtl_1 = require("../../_mixins/use-rtl");
 const styles_1 = require("../styles");
-const avatarGroupProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { max: Number, maxStyle: [Object, String], options: {
+exports.avatarGroupProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { max: Number, maxStyle: [Object, String], options: {
         type: Array,
         default: () => []
     }, vertical: Boolean, size: [String, Number] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'AvatarGroup',
-    props: avatarGroupProps,
+    props: exports.avatarGroupProps,
     setup(props) {
         const { mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const mergedThemeRef = (0, _mixins_1.useTheme)('AvatarGroup', '-avatar-group', avatar_group_cssr_1.default, styles_1.avatarGroupLight, props, mergedClsPrefixRef);
         (0, vue_1.provide)(context_1.avatarGroupInjectionKey, props);
-        const rtlEnabledRef = (0, use_rtl_1.default)('AvatarGroup', mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('AvatarGroup', mergedRtlRef, mergedClsPrefixRef);
         const restOptionsRef = (0, vue_1.computed)(() => {
             const { max } = props;
             if (max === undefined)

package/lib/back-top/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NBackTop } from './src/BackTop';
+export { default as NBackTop, backTopProps } from './src/BackTop';
 export type { BackTopProps } from './src/BackTop';

package/lib/back-top/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NBackTop = void 0;
+exports.backTopProps = exports.NBackTop = void 0;
 var BackTop_1 = require("./src/BackTop");
 Object.defineProperty(exports, "NBackTop", { enumerable: true, get: function () { return __importDefault(BackTop_1).default; } });
+Object.defineProperty(exports, "backTopProps", { enumerable: true, get: function () { return BackTop_1.backTopProps; } });