naive-ui 2.30.7 → 2.32.0

package/es/upload/src/UploadFile.d.ts

@@ -387,8 +387,8 @@ declare const _default: import("vue").DefineComponent<{
     showRemoveButton: import("vue").ComputedRef<boolean>;
     showDownloadButton: import("vue").ComputedRef<boolean>;
     showRetryButton: import("vue").ComputedRef<boolean>;
-    showPreviewButton: import("vue").ComputedRef<boolean | "">;
-    thumbnailUrl: import("vue").Ref<string>;
+    showPreviewButton: import("vue").ComputedRef<boolean | "" | null>;
+    mergedThumbnailUrl: import("vue").ComputedRef<string | null>;
     imageRef: import("vue").Ref<{
         click: () => void;
     } | null>;

package/es/upload/src/UploadFile.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { h, defineComponent, computed, inject, ref, watchEffect } from 'vue';
+import { useMemo } from 'vooks';
 import { CancelIcon, TrashIcon, AttachIcon, RetryIcon, DownloadIcon, EyeIcon } from '../../_internal/icons';
 import { NImage } from '../../image';
 import { NButton } from '../../button';
@@ -85,12 +86,15 @@ export default defineComponent({
             const { file } = props;
             return ['error'].includes(file.status);
         });
+        const mergedThumbnailUrlRef = useMemo(() => {
+            return thumbnailUrlRef.value || props.file.thumbnailUrl || props.file.url;
+        });
         const showPreviewButtonRef = computed(() => {
             if (!NUpload.showPreviewButtonRef.value)
                 return false;
-            const { file: { status, url }, listType } = props;
+            const { file: { status }, listType } = props;
             return (['finished'].includes(status) &&
-                (url || thumbnailUrlRef.value) &&
+                mergedThumbnailUrlRef.value &&
                 listType === 'image-card');
         });
         function handleRetryClick() {
@@ -180,7 +184,7 @@ export default defineComponent({
             showDownloadButton: showDownloadButtonRef,
             showRetryButton: showRetryButtonRef,
             showPreviewButton: showPreviewButtonRef,
-            thumbnailUrl: thumbnailUrlRef,
+            mergedThumbnailUrl: mergedThumbnailUrlRef,
             imageRef,
             handleRemoveOrCancelClick,
             handleDownloadClick,
@@ -196,7 +200,7 @@ export default defineComponent({
         const isImageCardType = listType === 'image-card';
         if (isImageType || isImageCardType) {
             icon = !isImageFile(file) ? (h("span", { class: `${clsPrefix}-upload-file-info__thumbnail` },
-                h(NBaseIcon, { clsPrefix: clsPrefix }, { default: () => documentIcon }))) : (file.url || this.thumbnailUrl) && file.status !== 'error' ? (h("a", { rel: "noopener noreferer", target: "_blank", href: file.url || undefined, class: `${clsPrefix}-upload-file-info__thumbnail`, onClick: this.handlePreviewClick }, listType === 'image-card' ? (h(NImage, { src: this.thumbnailUrl || file.thumbnailUrl || file.url || undefined, previewSrc: file.url || undefined, alt: file.name, ref: "imageRef" })) : (h("img", { src: this.thumbnailUrl || file.thumbnailUrl || file.url || undefined, alt: file.name })))) : (h("span", { class: `${clsPrefix}-upload-file-info__thumbnail` },
+                h(NBaseIcon, { clsPrefix: clsPrefix }, { default: () => documentIcon }))) : this.mergedThumbnailUrl && file.status !== 'error' ? (h("a", { rel: "noopener noreferer", target: "_blank", href: file.url || undefined, class: `${clsPrefix}-upload-file-info__thumbnail`, onClick: this.handlePreviewClick }, listType === 'image-card' ? (h(NImage, { src: this.mergedThumbnailUrl || undefined, previewSrc: file.url || undefined, alt: file.name, ref: "imageRef" })) : (h("img", { src: this.mergedThumbnailUrl || undefined, alt: file.name })))) : (h("span", { class: `${clsPrefix}-upload-file-info__thumbnail` },
                 h(NBaseIcon, { clsPrefix: clsPrefix }, { default: () => imageIcon })));
         }
         else {

package/es/upload/src/interface.d.ts

@@ -26,7 +26,7 @@ export declare type OnChange = (data: {
 export declare type OnFinish = ({ file, event }: {
     file: SettledFileInfo;
     event?: ProgressEvent;
-}) => FileInfo | undefined;
+}) => FileInfo | undefined | void;
 export declare type OnRemove = (data: {
     file: SettledFileInfo;
     fileList: SettledFileInfo[];
@@ -115,7 +115,7 @@ export declare type CustomRequest = (options: CustomRequestOptions) => void;
 export declare type OnError = ({ file, event }: {
     file: SettledFileInfo;
     event?: ProgressEvent;
-}) => FileInfo | undefined;
+}) => FileInfo | undefined | void;
 export interface FileAndEntry {
     file: File;
     entry: FileSystemFileEntry | null;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.30.7";
+declare const _default: "2.32.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.30.7';
+export default '2.32.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;
@@ -77,6 +77,10 @@ declare const watermarkProps: {
         readonly type: NumberConstructor;
         readonly default: 14;
     };
+    readonly globalRotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Watermark", {
         fontFamily: string;
     }, unknown>>;
@@ -165,6 +169,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 14;
     };
+    readonly globalRotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Watermark", {
         fontFamily: string;
     }, unknown>>;
@@ -251,6 +259,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 14;
     };
+    readonly globalRotate: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
     readonly theme: PropType<import("../../_mixins").Theme<"Watermark", {
         fontFamily: string;
     }, unknown>>;
@@ -281,5 +293,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly xOffset: number;
     readonly imageOpacity: number;
     readonly fontColor: string;
+    readonly globalRotate: number;
 }>;
 export default _default;

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) {
@@ -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: {
@@ -65,6 +65,9 @@ const watermarkProps = Object.assign(Object.assign({}, useTheme.props), { debug:
     }, 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

@@ -1,7 +1,19 @@
 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;
+ `), 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;
  left: 0;
@@ -11,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,23 +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`, 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' }, {
+                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,10 +34,11 @@ 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;
+ -webkit-user-select: none;
  `, [(0, cssr_1.cM)('horizontal', `
  left: 2px;
  right: 2px;

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/select-menu/src/styles/index.cssr.js

@@ -55,7 +55,7 @@ exports.default = (0, cssr_1.cB)('base-select-menu', `
  padding: 8px var(--n-option-padding-left);
  font-size: var(--n-option-font-size);
  transition: 
- color .3s var(--n-bezier);
+ color .3s var(--n-bezier),
  border-color .3s var(--n-bezier);
  border-top: 1px solid var(--n-action-divider-color);
  color: var(--n-action-text-color);

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;
@@ -201,6 +204,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/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/_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;