naive-ui 2.30.6 → 2.31.0

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; } });

package/lib/back-top/src/BackTop.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const backTopProps: {
+export declare const backTopProps: {
     readonly show: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;

package/lib/back-top/src/BackTop.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.backTopProps = void 0;
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const vooks_1 = require("vooks");
@@ -13,7 +14,7 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const BackTopIcon_1 = __importDefault(require("./BackTopIcon"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const backTopProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { show: {
+exports.backTopProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { show: {
         type: Boolean,
         default: undefined
     }, right: {
@@ -38,7 +39,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'BackTop',
     // make style applied to back-top button
     inheritAttrs: false,
-    props: backTopProps,
+    props: exports.backTopProps,
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {

package/lib/badge/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NBadge } from './src/Badge';
+export { default as NBadge, badgeProps } from './src/Badge';
 export type { BadgeProps } from './src/Badge';

package/lib/badge/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.NBadge = void 0;
+exports.badgeProps = exports.NBadge = void 0;
 var Badge_1 = require("./src/Badge");
 Object.defineProperty(exports, "NBadge", { enumerable: true, get: function () { return __importDefault(Badge_1).default; } });
+Object.defineProperty(exports, "badgeProps", { enumerable: true, get: function () { return Badge_1.badgeProps; } });

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

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const badgeProps: {
+export declare const badgeProps: {
     readonly value: PropType<string | number>;
     readonly max: NumberConstructor;
     readonly dot: BooleanConstructor;

package/lib/badge/src/Badge.js

@@ -3,14 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeProps = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
-const badgeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: [String, Number], max: Number, dot: Boolean, type: {
+const use_rtl_1 = require("../../_mixins/use-rtl");
+exports.badgeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: [String, Number], max: Number, dot: Boolean, type: {
         type: String,
         default: 'default'
     }, show: {
@@ -19,7 +20,7 @@ const badgeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, showZero: Boolean, processing: Boolean, color: String });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Badge',
-    props: badgeProps,
+    props: exports.badgeProps,
     setup(props, { slots }) {
         const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Badge', '-badge', index_cssr_1.default, styles_1.badgeLight, props, mergedClsPrefixRef);
@@ -41,7 +42,7 @@ exports.default = (0, vue_1.defineComponent)({
             if (showBadgeRef.value)
                 appearedRef.value = true;
         });
-        const rtlEnabledRef = (0, use_rtl_1.default)('Badge', mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('Badge', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { type, color: propColor } = props;
             const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [(0, _utils_1.createKey)('color', type)]: color, fontFamily, fontSize } } = themeRef.value;

package/lib/breadcrumb/index.d.ts

@@ -1,4 +1,4 @@
-export { default as NBreadcrumb } from './src/Breadcrumb';
-export { default as NBreadcrumbItem } from './src/BreadcrumbItem';
+export { default as NBreadcrumb, breadcrumbProps } from './src/Breadcrumb';
+export { default as NBreadcrumbItem, breadcrumbItemProps } from './src/BreadcrumbItem';
 export type { BreadcrumbProps } from './src/Breadcrumb';
 export type { BreadcrumbItemProps } from './src/BreadcrumbItem';

package/lib/breadcrumb/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.NBreadcrumbItem = exports.NBreadcrumb = void 0;
+exports.breadcrumbItemProps = exports.NBreadcrumbItem = exports.breadcrumbProps = exports.NBreadcrumb = void 0;
 var Breadcrumb_1 = require("./src/Breadcrumb");
 Object.defineProperty(exports, "NBreadcrumb", { enumerable: true, get: function () { return __importDefault(Breadcrumb_1).default; } });
+Object.defineProperty(exports, "breadcrumbProps", { enumerable: true, get: function () { return Breadcrumb_1.breadcrumbProps; } });
 var BreadcrumbItem_1 = require("./src/BreadcrumbItem");
 Object.defineProperty(exports, "NBreadcrumbItem", { enumerable: true, get: function () { return __importDefault(BreadcrumbItem_1).default; } });
+Object.defineProperty(exports, "breadcrumbItemProps", { enumerable: true, get: function () { return BreadcrumbItem_1.breadcrumbItemProps; } });

package/lib/breadcrumb/src/Breadcrumb.d.ts

@@ -5,7 +5,7 @@ export interface BreadcrumbInjection {
     mergedClsPrefixRef: Ref<string>;
 }
 export declare const breadcrumbInjectionKey: import("vue").InjectionKey<BreadcrumbInjection>;
-declare const breadcrumbProps: {
+export declare const breadcrumbProps: {
     readonly separator: {
         readonly type: StringConstructor;
         readonly default: "/";

package/lib/breadcrumb/src/Breadcrumb.js

@@ -3,20 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.breadcrumbInjectionKey = void 0;
+exports.breadcrumbProps = exports.breadcrumbInjectionKey = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const _utils_1 = require("../../_utils");
 exports.breadcrumbInjectionKey = (0, _utils_1.createInjectionKey)('n-breadcrumb');
-const breadcrumbProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { separator: {
+exports.breadcrumbProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { separator: {
         type: String,
         default: '/'
     } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Breadcrumb',
-    props: breadcrumbProps,
+    props: exports.breadcrumbProps,
     setup(props) {
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Breadcrumb', '-breadcrumb', index_cssr_1.default, styles_1.breadcrumbLight, props, mergedClsPrefixRef);

package/lib/breadcrumb/src/BreadcrumbItem.d.ts

@@ -1,5 +1,5 @@
 import { ExtractPropTypes, PropType } from 'vue';
-declare const breadcrumbItemProps: {
+export declare const breadcrumbItemProps: {
     readonly separator: StringConstructor;
     readonly href: StringConstructor;
     readonly clickable: {

package/lib/breadcrumb/src/BreadcrumbItem.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbItemProps = void 0;
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const use_browser_location_1 = require("../../_utils/composable/use-browser-location");
 const Breadcrumb_1 = require("./Breadcrumb");
-const breadcrumbItemProps = {
+exports.breadcrumbItemProps = {
     separator: String,
     href: String,
     clickable: {
@@ -15,7 +16,7 @@ const breadcrumbItemProps = {
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'BreadcrumbItem',
-    props: breadcrumbItemProps,
+    props: exports.breadcrumbItemProps,
     setup(props, { slots }) {
         const NBreadcrumb = (0, vue_1.inject)(Breadcrumb_1.breadcrumbInjectionKey, null);
         if (!NBreadcrumb) {

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

@@ -67,6 +67,7 @@ exports.default = (0, cssr_1.cB)('breadcrumb', `
  color: var(--n-separator-color);
  transition: color .3s var(--n-bezier);
  user-select: none;
+ -webkit-user-select: none;
  `), (0, cssr_1.c)('&:last-child', [(0, cssr_1.cE)('link', `
  font-weight: var(--n-font-weight-active);
  cursor: unset;

package/lib/button/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NButton, XButton as NxButton } from './src/Button';
+export { default as NButton, XButton as NxButton, buttonProps } from './src/Button';
 export type { ButtonProps } from './src/Button';

package/lib/button/index.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NxButton = exports.NButton = void 0;
+exports.buttonProps = exports.NxButton = exports.NButton = void 0;
 var Button_1 = require("./src/Button");
 Object.defineProperty(exports, "NButton", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
 Object.defineProperty(exports, "NxButton", { enumerable: true, get: function () { return Button_1.XButton; } });
+Object.defineProperty(exports, "buttonProps", { enumerable: true, get: function () { return Button_1.buttonProps; } });

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

@@ -1,7 +1,7 @@
 import { PropType, ButtonHTMLAttributes, ExtractPropTypes } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { Type, Size } from './interface';
-declare const buttonProps: {
+export declare const buttonProps: {
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
     readonly text: BooleanConstructor;
@@ -46,7 +46,10 @@ declare const buttonProps: {
         readonly default: true;
     };
     readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
-    readonly nativeFocusBehavior: BooleanConstructor;
+    readonly nativeFocusBehavior: {
+        readonly type: BooleanConstructor;
+        readonly default: boolean;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -706,7 +709,10 @@ declare const Button: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
-    readonly nativeFocusBehavior: BooleanConstructor;
+    readonly nativeFocusBehavior: {
+        readonly type: BooleanConstructor;
+        readonly default: boolean;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -1420,7 +1426,10 @@ declare const Button: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
-    readonly nativeFocusBehavior: BooleanConstructor;
+    readonly nativeFocusBehavior: {
+        readonly type: BooleanConstructor;
+        readonly default: boolean;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;

package/lib/button/src/Button.js

@@ -3,19 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.XButton = void 0;
+exports.XButton = exports.buttonProps = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
 const index_1 = require("../../_utils/color/index");
+const context_1 = require("../../button-group/src/context");
+const use_rtl_1 = require("../../_mixins/use-rtl");
+const browser_1 = require("../../_utils/env/browser");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
-const context_1 = require("../../button-group/src/context");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
-const buttonProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { color: String, textColor: String, text: Boolean, block: Boolean, loading: Boolean, disabled: Boolean, circle: Boolean, size: String, ghost: Boolean, round: Boolean, secondary: Boolean, tertiary: Boolean, quaternary: Boolean, strong: Boolean, focusable: {
+exports.buttonProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { color: String, textColor: String, text: Boolean, block: Boolean, loading: Boolean, disabled: Boolean, circle: Boolean, size: String, ghost: Boolean, round: Boolean, secondary: Boolean, tertiary: Boolean, quaternary: Boolean, strong: Boolean, focusable: {
         type: Boolean,
         default: true
     }, keyboard: {
@@ -36,10 +37,13 @@ const buttonProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, bordered: {
         type: Boolean,
         default: true
-    }, onClick: [Function, Array], nativeFocusBehavior: Boolean });
+    }, onClick: [Function, Array], nativeFocusBehavior: {
+        type: Boolean,
+        default: !browser_1.isSafari
+    } });
 const Button = (0, vue_1.defineComponent)({
     name: 'Button',
-    props: buttonProps,
+    props: exports.buttonProps,
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {
@@ -131,7 +135,7 @@ const Button = (0, vue_1.defineComponent)({
         };
         const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Button', '-button', index_cssr_1.default, styles_1.buttonLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = (0, use_rtl_1.default)('Button', mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('Button', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const theme = themeRef.value;
             const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self } = theme;

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

@@ -68,6 +68,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  align-items: center;
  justify-content: center;
  user-select: none;
+ -webkit-user-select: none;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
@@ -159,6 +160,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  top: 50%;
  transform: translateY(-50%);
  display: flex;
+ align-items: center;
+ justify-content: center;
  `, [(0, icon_switch_cssr_1.iconSwitchTransition)({
   top: '50%',
   originalTransform: 'translateY(-50%)'
@@ -166,6 +169,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
+ min-width: 0;
  `, [(0, cssr_1.c)('~', [(0, cssr_1.cE)('icon', {
   margin: 'var(--n-icon-margin)',
   marginRight: 0