naive-ui 2.31.0 → 2.32.0

package/es/watermark/src/Watermark.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, ref, watchEffect } from 'vue';
 import { onFontsReady } from 'vooks';
 import { useConfig, useTheme } from '../../_mixins';
-import { warnOnce } from '../../_utils';
+import { isBrowser, warnOnce } from '../../_utils';
 import { watermarkLight } from '../styles';
 import style from './styles/index.cssr';
 function getRatio(context) {
@@ -65,6 +65,9 @@ export const watermarkProps = Object.assign(Object.assign({}, useTheme.props), {
     }, lineHeight: {
         type: Number,
         default: 14
+    }, globalRotate: {
+        type: Number,
+        default: 0
     } });
 export default defineComponent({
     name: 'Watermark',
@@ -73,11 +76,13 @@ export default defineComponent({
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('Watermark', '-watermark', style, watermarkLight, props, mergedClsPrefixRef);
         const base64UrlRef = ref('');
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
+        const canvas = isBrowser ? document.createElement('canvas') : null;
+        const ctx = canvas ? canvas.getContext('2d') : null;
         const fontsReadyRef = ref(false);
         onFontsReady(() => (fontsReadyRef.value = true));
         watchEffect(() => {
+            if (!canvas)
+                return;
             void fontsReadyRef.value;
             const ratio = getRatio(ctx);
             const { xGap, yGap, width, height, yOffset, xOffset, rotate, image, content, fontColor, fontStyle, fontVariant, fontStretch, fontWeight, fontFamily, fontSize, lineHeight, debug } = props;
@@ -131,27 +136,43 @@ export default defineComponent({
         });
         return () => {
             var _a;
+            const { globalRotate, fullscreen, zIndex } = props;
+            const mergedClsPrefix = mergedClsPrefixRef.value;
+            const isFullScreenGlobalRotate = globalRotate !== 0 && fullscreen;
+            const rotatedImageOffset = 'max(142vh, 142vw)';
             const watermarkNode = (h("div", { class: [
-                    `${mergedClsPrefixRef.value}-watermark`,
-                    props.fullscreen &&
-                        `${mergedClsPrefixRef.value}-watermark--fullscreen`
+                    `${mergedClsPrefix}-watermark`,
+                    globalRotate !== 0 && `${mergedClsPrefix}-watermark--global-rotate`,
+                    fullscreen && `${mergedClsPrefix}-watermark--fullscreen`
                 ], style: {
-                    zIndex: props.zIndex,
+                    transform: globalRotate
+                        ? `translateX(-50%) translateY(-50%) rotate(${globalRotate}deg)`
+                        : undefined,
+                    zIndex: isFullScreenGlobalRotate ? undefined : zIndex,
                     backgroundSize: `${props.xGap + props.width}px`,
-                    backgroundPosition: props.cross
-                        ? `${props.width / 2}px ${props.height / 2}px, 0 0`
-                        : '',
+                    backgroundPosition: globalRotate === 0
+                        ? props.cross
+                            ? `${props.width / 2}px ${props.height / 2}px, 0 0`
+                            : ''
+                        : props.cross
+                            ? `calc(${rotatedImageOffset} + ${props.width / 2}px) calc(${rotatedImageOffset} + ${props.height / 2}px), ${rotatedImageOffset} ${rotatedImageOffset}`
+                            : rotatedImageOffset,
                     backgroundImage: props.cross
                         ? `url(${base64UrlRef.value}), url(${base64UrlRef.value})`
                         : `url(${base64UrlRef.value})`
                 } }));
-            if (props.fullscreen)
+            if (props.fullscreen && !globalRotate)
                 return watermarkNode;
             return (h("div", { class: [
-                    `${mergedClsPrefixRef.value}-watermark-container`,
+                    `${mergedClsPrefix}-watermark-container`,
+                    globalRotate !== 0 &&
+                        `${mergedClsPrefix}-watermark-container--global-rotate`,
+                    fullscreen && `${mergedClsPrefix}-watermark-container--fullscreen`,
                     props.selectable &&
-                        `${mergedClsPrefixRef.value}-watermark-container--selectable`
-                ] }, (_a = slots.default) === null || _a === void 0 ? void 0 :
+                        `${mergedClsPrefix}-watermark-container--selectable`
+                ], style: {
+                    zIndex: isFullScreenGlobalRotate ? zIndex : undefined
+                } }, (_a = slots.default) === null || _a === void 0 ? void 0 :
                 _a.call(slots),
                 watermarkNode));
         };

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

@@ -4,6 +4,15 @@ export default c([cB('watermark-container', `
  `, [cNotM('selectable', `
  user-select: none;
  -webkit-user-select: none;
+ `), cM('global-rotate', `
+ overflow: hidden;
+ `), cM('fullscreen', `
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ position: fixed;
  `)]), cB('watermark', `
  position: absolute;
  top: 0;
@@ -14,4 +23,8 @@ export default c([cB('watermark-container', `
  background-repeat: repeat;
  `, [cM('fullscreen', `
  position: fixed;
+ `), cM('global-rotate', `
+ position: absolute;
+ height: max(284vh, 284vw);
+ width: max(284vh, 284vw);
  `)])]);

package/lib/_internal/scrollbar/src/Scrollbar.d.ts

@@ -79,6 +79,7 @@ declare const scrollbarProps: {
     readonly onWheel: PropType<(e: WheelEvent) => void>;
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
+    readonly internalHoistYRail: BooleanConstructor;
     readonly theme: PropType<import("../../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
@@ -126,6 +127,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly onWheel: PropType<(e: WheelEvent) => void>;
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
+    readonly internalHoistYRail: BooleanConstructor;
     readonly theme: PropType<import("../../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
@@ -140,6 +142,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
+    rtlEnabled: import("vue").Ref<import("../../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     containerScrollTop: import("vue").Ref<number>;
     wrapperRef: import("vue").Ref<HTMLElement | null>;
     containerRef: import("vue").Ref<HTMLElement | null>;
@@ -208,6 +211,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly onWheel: PropType<(e: WheelEvent) => void>;
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
+    readonly internalHoistYRail: BooleanConstructor;
     readonly theme: PropType<import("../../../_mixins").Theme<"Scrollbar", {
         color: string;
         colorHover: string;
@@ -228,6 +232,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly trigger: "none" | "hover";
     readonly useUnifiedContainer: boolean;
     readonly triggerDisplayManually: boolean;
+    readonly internalHoistYRail: boolean;
 }>;
 declare type NativeScrollbarProps = Omit<HTMLAttributes, keyof ScrollbarInternalProps>;
 declare type MergedProps = Partial<ScrollbarInternalProps & NativeScrollbarProps>;

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

@@ -26,13 +26,14 @@ const scrollbarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props)
         default: 'hover'
     }, useUnifiedContainer: Boolean, triggerDisplayManually: Boolean, 
     // If container is set, resize observer won't not attached
-    container: Function, content: Function, containerClass: String, containerStyle: [String, Object], contentClass: String, contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function });
+    container: Function, content: Function, containerClass: String, containerStyle: [String, Object], contentClass: String, contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function, internalHoistYRail: Boolean });
 const Scrollbar = (0, vue_1.defineComponent)({
     name: 'Scrollbar',
     props: scrollbarProps,
     inheritAttrs: false,
     setup(props) {
-        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const rtlEnabledRef = (0, _mixins_1.useRtl)('Scrollbar', mergedRtlRef, mergedClsPrefixRef);
         // dom ref
         const wrapperRef = (0, vue_1.ref)(null);
         const containerRef = (0, vue_1.ref)(null);
@@ -303,7 +304,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: container } = mergedContainerRef;
             if (container) {
                 containerScrollTopRef.value = container.scrollTop;
-                containerScrollLeftRef.value = container.scrollLeft;
+                containerScrollLeftRef.value =
+                    container.scrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
             }
         }
         function syncPositionState() {
@@ -336,7 +338,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: container } = mergedContainerRef;
             if (container) {
                 containerScrollTopRef.value = container.scrollTop;
-                containerScrollLeftRef.value = container.scrollLeft;
+                containerScrollLeftRef.value =
+                    container.scrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
                 containerHeightRef.value = container.offsetHeight;
                 containerWidthRef.value = container.offsetWidth;
                 contentHeightRef.value = container.scrollHeight;
@@ -373,7 +376,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             (0, evtd_1.on)('mousemove', window, handleXScrollMouseMove, true);
             (0, evtd_1.on)('mouseup', window, handleXScrollMouseUp, true);
             memoXLeft = containerScrollLeftRef.value;
-            memoMouseX = e.clientX;
+            memoMouseX = (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? window.innerWidth - e.clientX
+                : e.clientX;
         }
         function handleXScrollMouseMove(e) {
             if (!xBarPressed)
@@ -389,7 +394,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: xBarSize } = xBarSizeRef;
             if (containerWidth === null || contentWidth === null)
                 return;
-            const dX = e.clientX - memoMouseX;
+            const dX = (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? window.innerWidth - e.clientX - memoMouseX
+                : e.clientX - memoMouseX;
             const dScrollLeft = (dX * (contentWidth - containerWidth)) / (containerWidth - xBarSize);
             const toScrollLeftUpperBound = contentWidth - containerWidth;
             let toScrollLeft = memoXLeft + dScrollLeft;
@@ -397,7 +404,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             toScrollLeft = Math.max(toScrollLeft, 0);
             const { value: container } = mergedContainerRef;
             if (container) {
-                container.scrollLeft = toScrollLeft;
+                container.scrollLeft = toScrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
                 const { internalOnUpdateScrollLeft } = props;
                 if (internalOnUpdateScrollLeft)
                     internalOnUpdateScrollLeft(toScrollLeft);
@@ -528,7 +535,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             handleMouseEnterWrapper,
             handleMouseLeaveWrapper
         };
-        return Object.assign(Object.assign({}, exposedMethods), { mergedClsPrefix: mergedClsPrefixRef, containerScrollTop: containerScrollTopRef, wrapperRef,
+        return Object.assign(Object.assign({}, exposedMethods), { mergedClsPrefix: mergedClsPrefixRef, rtlEnabled: rtlEnabledRef, containerScrollTop: containerScrollTopRef, wrapperRef,
             containerRef,
             contentRef,
             yRailRef,
@@ -541,17 +548,32 @@ const Scrollbar = (0, vue_1.defineComponent)({
     },
     render() {
         var _a;
-        const { $slots, mergedClsPrefix, triggerDisplayManually } = this;
+        const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail } = this;
         if (!this.scrollable)
             return (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots);
+        const triggerIsNone = this.trigger === 'none';
+        const createYRail = () => {
+            return ((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
+            })));
+        };
         const createChildren = () => {
             var _a, _b;
             (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-            const triggerIsNone = this.trigger === 'none';
             return (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
                 role: 'none',
                 ref: 'wrapperRef',
-                class: [`${mergedClsPrefix}-scrollbar`, this.themeClass],
+                class: [
+                    `${mergedClsPrefix}-scrollbar`,
+                    this.themeClass,
+                    rtlEnabled && `${mergedClsPrefix}-scrollbar--rtl`
+                ],
                 style: this.cssVars,
                 onMouseenter: triggerDisplayManually
                     ? undefined
@@ -575,29 +597,30 @@ const Scrollbar = (0, vue_1.defineComponent)({
                                 this.contentClass
                             ] }, $slots))
                     }))),
-                (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: [
+                internalHoistYRail ? null : createYRail(),
+                this.xScrollable && ((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
+                            right: rtlEnabled ? this.xBarLeftPx : undefined,
+                            left: rtlEnabled ? undefined : this.xBarLeftPx
                         }, onMousedown: this.handleXScrollMouseDown })) : null
-                }))
+                })))
             ]);
         };
-        return this.container ? (createChildren()) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleContainerResize }, {
+        const scrollbarNode = this.container ? (createChildren()) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleContainerResize }, {
             default: createChildren
         }));
+        if (internalHoistYRail) {
+            return ((0, vue_1.h)(vue_1.Fragment, null,
+                scrollbarNode,
+                createYRail()));
+        }
+        else {
+            return scrollbarNode;
+        }
     }
 });
 exports.default = Scrollbar;

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

@@ -34,7 +34,7 @@ exports.default = (0, cssr_1.cB)('scrollbar', `
  `), (0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-content', `
  box-sizing: border-box;
  min-width: 100%;
- `)])]), (0, cssr_1.cB)('scrollbar-rail', `
+ `)])])]), (0, cssr_1.c)('>, +', [(0, cssr_1.cB)('scrollbar-rail', `
  position: absolute;
  pointer-events: none;
  user-select: none;

package/lib/_internal/scrollbar/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

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

@@ -0,0 +1,17 @@
+"use strict";
+
+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', `
+ left: 0;
+ right: unset;
+ `)])]), (0, cssr_1.cM)('vertical', `
+ left: 4px;
+ right: unset;
+ `)])])])]);

package/lib/_internal/scrollbar/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as scrollbarDark } from './dark';
 export { default as scrollbarLight } from './light';
+export { default as scrollbarRtl } from './rtl';
 export type { ScrollbarTheme, ScrollbarThemeVars } from './light';

package/lib/_internal/scrollbar/styles/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.scrollbarLight = exports.scrollbarDark = void 0;
+exports.scrollbarRtl = exports.scrollbarLight = exports.scrollbarDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "scrollbarDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "scrollbarLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "scrollbarRtl", { enumerable: true, get: function () { return __importDefault(rtl_1).default; } });

package/lib/_internal/scrollbar/styles/rtl.d.ts

@@ -0,0 +1,3 @@
+import { RtlItem } from '../../../config-provider/src/internal-interface';
+export declare const scrollbarRtl: RtlItem;
+export default scrollbarRtl;

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

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollbarRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.scrollbarRtl = {
+    name: 'Scrollbar',
+    style: rtl_cssr_1.default
+};
+exports.default = exports.scrollbarRtl;

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

@@ -506,7 +506,8 @@ exports.default = (0, vue_1.defineComponent)({
                 : this.active
                     ? !this.pattern && !this.isCompositing
                     : true;
-            const placeholder = showPlaceholder ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` }, this.placeholder)) : null;
+            const placeholder = showPlaceholder ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` },
+                (0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder__inner` }, this.placeholder))) : null;
             const popoverTrigger = filterable ? ((0, vue_1.h)("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-tags` },
                 tags,
                 maxTagCountResponsive ? null : input,
@@ -550,7 +551,8 @@ exports.default = (0, vue_1.defineComponent)({
                             })
                             : renderLabel
                                 ? renderLabel(this.selectedOption, true)
-                                : (0, _utils_1.render)(this.label, this.selectedOption, true)))) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" }, this.placeholder)),
+                                : (0, _utils_1.render)(this.label, this.selectedOption, true)))) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" },
+                        (0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder__inner` }, this.placeholder))),
                     suffix));
             }
         }

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

@@ -91,7 +91,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  text-overflow: ellipsis;
  `)]), (0, cssr_1.cB)('base-selection-placeholder', `
  color: var(--n-placeholder-color);
- `), (0, cssr_1.cB)('base-selection-tags', `
+ `, [(0, cssr_1.cE)('inner', `
+ max-width: 100%;
+ overflow: hidden;
+ `)]), (0, cssr_1.cB)('base-selection-tags', `
  cursor: pointer;
  outline: none;
  box-sizing: border-box;

package/lib/_mixins/index.d.ts

@@ -7,3 +7,4 @@ export { default as useStyle } from './use-style';
 export { default as useHljs } from './use-hljs';
 export type { Hljs } from './use-hljs';
 export { useThemeClass } from './use-css-vars-class';
+export { useRtl } from './use-rtl';

package/lib/_mixins/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useThemeClass = exports.useHljs = exports.useStyle = exports.useLocale = exports.defaultClsPrefix = exports.useConfig = exports.createTheme = exports.useTheme = exports.useFormItem = void 0;
+exports.useRtl = exports.useThemeClass = exports.useHljs = exports.useStyle = exports.useLocale = exports.defaultClsPrefix = exports.useConfig = exports.createTheme = exports.useTheme = exports.useFormItem = void 0;
 var use_form_item_1 = require("./use-form-item");
 Object.defineProperty(exports, "useFormItem", { enumerable: true, get: function () { return __importDefault(use_form_item_1).default; } });
 var use_theme_1 = require("./use-theme");
@@ -20,3 +20,5 @@ var use_hljs_1 = require("./use-hljs");
 Object.defineProperty(exports, "useHljs", { enumerable: true, get: function () { return __importDefault(use_hljs_1).default; } });
 var use_css_vars_class_1 = require("./use-css-vars-class");
 Object.defineProperty(exports, "useThemeClass", { enumerable: true, get: function () { return use_css_vars_class_1.useThemeClass; } });
+var use_rtl_1 = require("./use-rtl");
+Object.defineProperty(exports, "useRtl", { enumerable: true, get: function () { return use_rtl_1.useRtl; } });

package/lib/_utils/naive/extract-public-props.d.ts

@@ -1,6 +1,9 @@
 import { ExtractPropTypes } from 'vue';
 import { useTheme } from '../../_mixins';
 declare type themePropKeys = keyof typeof useTheme.props;
-export declare type ExtractPublicPropTypes<T> = Omit<Partial<ExtractPropTypes<T>>, Exclude<themePropKeys, 'themeOverrides'> | Extract<keyof T, `internal${string}`>>;
+declare type RemoveReadonly<T> = {
+    -readonly [key in keyof T]: T[key];
+};
+export declare type ExtractPublicPropTypes<T> = Omit<Partial<RemoveReadonly<ExtractPropTypes<T>>>, Exclude<themePropKeys, 'themeOverrides'> | Extract<keyof T, `internal${string}`>>;
 export declare type ExtractInternalPropTypes<T> = Partial<ExtractPropTypes<T>>;
 export {};

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

@@ -824,6 +824,7 @@ declare const _default: import("vue").DefineComponent<{
         select: () => void;
         activate: () => void;
         deactivate: () => void;
+        scrollTo: (options: ScrollToOptions) => void;
     } | null>;
     uncontrolledValue: import("vue").Ref<string | null>;
     mergedValue: import("vue").ComputedRef<string | null>;

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

@@ -146,7 +146,6 @@ 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;

package/lib/avatar/src/Avatar.js

@@ -140,7 +140,6 @@ 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) {
@@ -151,7 +150,7 @@ exports.default = (0, vue_1.defineComponent)({
                 unobserve === null || unobserve === void 0 ? void 0 : unobserve();
                 unobserve = undefined;
                 if (props.lazy) {
-                    unobserve = (0, utils_1.observeIntersection)(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+                    unobserve = (0, utils_1.observeIntersection)(selfRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
                 }
             });
             (0, vue_1.onBeforeUnmount)(() => {
@@ -171,7 +170,6 @@ exports.default = (0, vue_1.defineComponent)({
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             hasLoadError: hasLoadErrorRef,
             handleError,
-            imageRef,
             shouldStartLoading: shouldStartLoadingRef,
             loaded: loadedRef,
             mergedOnLoad: (e) => {
@@ -183,10 +181,10 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         var _a, _b;
-        const { $slots, src, mergedClsPrefix, lazy, onRender, mergedOnLoad, shouldStartLoading, loaded } = this;
+        const { $slots, src, mergedClsPrefix, lazy, onRender, mergedOnLoad, shouldStartLoading, loaded, hasLoadError } = 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);
+        const placeholderNode = !loaded && !hasLoadError && ((_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 } });
         }
@@ -199,8 +197,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
                 else if (src) {
                     return (0, vue_1.h)('img', {
-                        loading: lazy ? 'lazy' : 'eager',
-                        ref: 'imageRef',
+                        loading: is_native_lazy_load_1.isImageSupportNativeLazy && lazy ? 'lazy' : 'eager',
                         src: is_native_lazy_load_1.isImageSupportNativeLazy
                             ? src
                             : shouldStartLoading || loaded
@@ -211,8 +208,13 @@ exports.default = (0, vue_1.defineComponent)({
                         onError: this.handleError,
                         style: [
                             { objectFit: this.objectFit },
-                            placeholderNode && !loaded
-                                ? { height: '0', width: '0', visibility: 'hidden' }
+                            placeholderNode
+                                ? {
+                                    height: '0',
+                                    width: '0',
+                                    visibility: 'hidden',
+                                    position: 'absolute'
+                                }
                                 : ''
                         ]
                     });
@@ -221,6 +223,6 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return ((0, vue_1.h)("span", { ref: "selfRef", class: [`${mergedClsPrefix}-avatar`, this.themeClass], style: this.cssVars },
             img,
-            lazy && !loaded && placeholderNode));
+            lazy && placeholderNode));
     }
 });

package/lib/button/src/Button.js

@@ -87,6 +87,9 @@ const Button = (0, vue_1.defineComponent)({
         });
         const handleMousedown = (e) => {
             var _a;
+            if (!mergedFocusableRef.value) {
+                e.preventDefault();
+            }
             if (props.nativeFocusBehavior) {
                 return;
             }

package/lib/carousel/src/Carousel.d.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties, PropType, Ref, TransitionProps, VNode } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-import type { ElementOf } from './interface';
-declare const transitionProperties: ["transitionDuration", "transitionTimingFunction"];
-declare type TransitionStyle = Partial<Pick<CSSProperties, ElementOf<typeof transitionProperties>>>;
+import type { ArrowScopedSlotProps, DotScopedSlotProps, Size } from './interface';
+declare const transitionProperties: readonly ["transitionDuration", "transitionTimingFunction"];
+declare type TransitionStyle = Partial<Pick<CSSProperties, typeof transitionProperties[number]>>;
 export declare const carouselProps: {
     defaultIndex: {
         type: NumberConstructor;
@@ -206,35 +206,9 @@ declare const _default: import("vue").DefineComponent<{
     to: (index: number) => void;
     prev: () => void;
     next: () => void;
-    arrowSlotProps: import("vue").ComputedRef<{
-        to: (index: number) => void;
-        prev: () => void;
-        next: () => void;
-        isVertical: () => boolean;
-        isPrevDisabled: () => boolean;
-        isNextDisabled: () => boolean;
-        isPrev: (slideOrIndex: HTMLElement | number) => boolean;
-        isNext: (slideOrIndex: HTMLElement | number) => boolean;
-        isActive: (slideOrIndex: HTMLElement | number) => boolean;
-        isHorizontal: () => boolean;
-        getCurrentIndex: () => number;
-        getSlideIndex: (slideOrIndex: HTMLElement | number) => number;
-        getSlideStyle: (slide: HTMLElement | number) => any;
-        addSlide: (slide?: HTMLElement | undefined) => void;
-        removeSlide: (slide?: HTMLElement | undefined) => void;
-        onCarouselItemClick: (index: number, event: MouseEvent) => void;
-        prevSlideStyleRef: Ref<string | CSSProperties | undefined>;
-        nextSlideStyleRef: Ref<string | CSSProperties | undefined>;
-        total: number;
-        currentIndex: number;
-    }>;
-    dotSlotProps: import("vue").ComputedRef<{
-        total: number;
-        currentIndex: number;
-        to: (index: number) => void;
-    }>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     selfElRef: Ref<HTMLDivElement | null>;
+    slidesElRef: Ref<HTMLDivElement | null>;
     slideVNodes: {
         value: VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
@@ -243,18 +217,23 @@ declare const _default: import("vue").DefineComponent<{
     duplicatedable: import("vue").ComputedRef<boolean>;
     userWantsControl: import("vue").ComputedRef<boolean>;
     autoSlideSize: import("vue").ComputedRef<boolean>;
-    displayIndex: Ref<number>;
-    realIndex: Ref<number>;
-    slideStyles: import("vue").ComputedRef<CSSProperties[] | {
-        [x: string]: string;
-    }[]>;
+    displayIndex: import("vue").ComputedRef<number>;
+    realIndex: import("vue").ComputedRef<number>;
+    slideStyles: import("vue").ComputedRef<CSSProperties[] | (Partial<Size> | undefined)[]>;
     translateStyle: Ref<CSSProperties>;
-    handleTouchstart: (event: MouseEvent | TouchEvent) => void;
+    slidesControlListeners: import("vue").ComputedRef<{
+        onTouchstartPassive: ((event: MouseEvent | TouchEvent) => void) | undefined;
+        onMousedown: ((event: MouseEvent | TouchEvent) => void) | undefined;
+        onWheel: ((event: WheelEvent) => void) | undefined;
+    }>;
     handleTransitionEnd: () => void;
-    handleMousewheel: (event: WheelEvent) => void;
     handleResize: () => void;
     handleSlideResize: () => void;
+    handleMouseenter: () => void;
+    handleMouseleave: () => void;
     isActive: (index: number) => boolean;
+    arrowSlotProps: import("vue").ComputedRef<ArrowScopedSlotProps>;
+    dotSlotProps: import("vue").ComputedRef<DotScopedSlotProps>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     defaultIndex: {
         type: NumberConstructor;