naive-ui 2.38.2 → 2.40.0

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

@@ -1,4 +1,4 @@
-import type { PropType, CSSProperties, HTMLAttributes } from 'vue';
+import type { CSSProperties, HTMLAttributes, PropType } from 'vue';
 import type { ExtractInternalPropTypes, ExtractPublicPropTypes } from '../../../_utils';
 export interface ScrollTo {
     (x: number, y: number): void;
@@ -67,7 +67,7 @@ declare const scrollbarProps: {
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
     readonly containerStyle: PropType<string | CSSProperties>;
-    readonly contentClass: PropType<string | (string | undefined)[]>;
+    readonly contentClass: PropType<string | Array<string | undefined>>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly horizontalRailStyle: PropType<string | CSSProperties>;
     readonly verticalRailStyle: PropType<string | CSSProperties>;
@@ -76,14 +76,24 @@ declare const scrollbarProps: {
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
     readonly internalHoistYRail: BooleanConstructor;
+    readonly yPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+    };
+    readonly xPlacement: {
+        readonly type: PropType<"top" | "bottom">;
+        readonly default: "bottom";
+    };
     readonly theme: PropType<import("../../../_mixins").Theme<"Scrollbar", {
         height: string;
         width: string;
         borderRadius: string;
         color: string;
         colorHover: string;
-        railInsetHorizontal: string;
-        railInsetVertical: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
         railColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
@@ -92,8 +102,10 @@ declare const scrollbarProps: {
         borderRadius: string;
         color: string;
         colorHover: string;
-        railInsetHorizontal: string;
-        railInsetVertical: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
         railColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
@@ -102,8 +114,10 @@ declare const scrollbarProps: {
         borderRadius: string;
         color: string;
         colorHover: string;
-        railInsetHorizontal: string;
-        railInsetVertical: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
         railColor: string;
     }, any>>>;
 };
@@ -129,7 +143,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
     readonly containerStyle: PropType<string | CSSProperties>;
-    readonly contentClass: PropType<string | (string | undefined)[]>;
+    readonly contentClass: PropType<string | Array<string | undefined>>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly horizontalRailStyle: PropType<string | CSSProperties>;
     readonly verticalRailStyle: PropType<string | CSSProperties>;
@@ -138,14 +152,24 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
     readonly internalHoistYRail: BooleanConstructor;
+    readonly yPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+    };
+    readonly xPlacement: {
+        readonly type: PropType<"top" | "bottom">;
+        readonly default: "bottom";
+    };
     readonly theme: PropType<import("../../../_mixins").Theme<"Scrollbar", {
         height: string;
         width: string;
         borderRadius: string;
         color: string;
         colorHover: string;
-        railInsetHorizontal: string;
-        railInsetVertical: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
         railColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
@@ -154,8 +178,10 @@ declare const Scrollbar: import("vue").DefineComponent<{
         borderRadius: string;
         color: string;
         colorHover: string;
-        railInsetHorizontal: string;
-        railInsetVertical: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
         railColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
@@ -164,8 +190,10 @@ declare const Scrollbar: import("vue").DefineComponent<{
         borderRadius: string;
         color: string;
         colorHover: string;
-        railInsetHorizontal: string;
-        railInsetVertical: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
         railColor: string;
     }, any>>>;
 }, {
@@ -198,8 +226,10 @@ declare const Scrollbar: import("vue").DefineComponent<{
         '--n-scrollbar-border-radius': string;
         '--n-scrollbar-width': string;
         '--n-scrollbar-height': string;
-        '--n-scrollbar-rail-inset-horizontal': string;
-        '--n-scrollbar-rail-inset-vertical': string;
+        '--n-scrollbar-rail-inset-horizontal-top': string;
+        '--n-scrollbar-rail-inset-horizontal-bottom': string;
+        '--n-scrollbar-rail-inset-vertical-right': string;
+        '--n-scrollbar-rail-inset-vertical-left': string;
         '--n-scrollbar-rail-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
@@ -230,7 +260,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
     readonly containerStyle: PropType<string | CSSProperties>;
-    readonly contentClass: PropType<string | (string | undefined)[]>;
+    readonly contentClass: PropType<string | Array<string | undefined>>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly horizontalRailStyle: PropType<string | CSSProperties>;
     readonly verticalRailStyle: PropType<string | CSSProperties>;
@@ -239,14 +269,24 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
     readonly internalHoistYRail: BooleanConstructor;
+    readonly yPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+    };
+    readonly xPlacement: {
+        readonly type: PropType<"top" | "bottom">;
+        readonly default: "bottom";
+    };
     readonly theme: PropType<import("../../../_mixins").Theme<"Scrollbar", {
         height: string;
         width: string;
         borderRadius: string;
         color: string;
         colorHover: string;
-        railInsetHorizontal: string;
-        railInsetVertical: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
         railColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
@@ -255,8 +295,10 @@ declare const Scrollbar: import("vue").DefineComponent<{
         borderRadius: string;
         color: string;
         colorHover: string;
-        railInsetHorizontal: string;
-        railInsetVertical: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
         railColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
@@ -265,8 +307,10 @@ declare const Scrollbar: import("vue").DefineComponent<{
         borderRadius: string;
         color: string;
         colorHover: string;
-        railInsetHorizontal: string;
-        railInsetVertical: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
         railColor: string;
     }, any>>>;
 }>>, {
@@ -277,6 +321,8 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly useUnifiedContainer: boolean;
     readonly triggerDisplayManually: boolean;
     readonly internalHoistYRail: boolean;
+    readonly yPlacement: "left" | "right";
+    readonly xPlacement: "top" | "bottom";
 }, {}>;
 type NativeScrollbarProps = Omit<HTMLAttributes, keyof ScrollbarInternalProps>;
 type MergedProps = Partial<ScrollbarInternalProps & NativeScrollbarProps>;

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

@@ -24,7 +24,13 @@ 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, Array], contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function, internalHoistYRail: Boolean });
+    container: Function, content: Function, containerClass: String, containerStyle: [String, Object], contentClass: [String, Array], contentStyle: [String, Object], horizontalRailStyle: [String, Object], verticalRailStyle: [String, Object], onScroll: Function, onWheel: Function, onResize: Function, internalOnUpdateScrollLeft: Function, internalHoistYRail: Boolean, yPlacement: {
+        type: String,
+        default: 'right'
+    }, xPlacement: {
+        type: String,
+        default: 'bottom'
+    } });
 const Scrollbar = (0, vue_1.defineComponent)({
     name: 'Scrollbar',
     props: scrollbarProps,
@@ -63,14 +69,14 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: containerHeight } = containerHeightRef;
             const { value: contentHeight } = contentHeightRef;
             const { value: yRailSize } = yRailSizeRef;
-            if (containerHeight === null ||
-                contentHeight === null ||
-                yRailSize === null) {
+            if (containerHeight === null
+                || contentHeight === null
+                || yRailSize === null) {
                 return 0;
             }
             else {
-                return Math.min(containerHeight, (yRailSize * containerHeight) / contentHeight +
-                    (0, seemly_1.depx)(themeRef.value.self.width) * 1.5);
+                return Math.min(containerHeight, (yRailSize * containerHeight) / contentHeight
+                    + (0, seemly_1.depx)(themeRef.value.self.width) * 1.5);
             }
         });
         const yBarSizePxRef = (0, vue_1.computed)(() => {
@@ -80,14 +86,14 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: containerWidth } = containerWidthRef;
             const { value: contentWidth } = contentWidthRef;
             const { value: xRailSize } = xRailSizeRef;
-            if (containerWidth === null ||
-                contentWidth === null ||
-                xRailSize === null) {
+            if (containerWidth === null
+                || contentWidth === null
+                || xRailSize === null) {
                 return 0;
             }
             else {
-                return ((xRailSize * containerWidth) / contentWidth +
-                    (0, seemly_1.depx)(themeRef.value.self.height) * 1.5);
+                return ((xRailSize * containerWidth) / contentWidth
+                    + (0, seemly_1.depx)(themeRef.value.self.height) * 1.5);
             }
         });
         const xBarSizePxRef = (0, vue_1.computed)(() => {
@@ -98,9 +104,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: containerScrollTop } = containerScrollTopRef;
             const { value: contentHeight } = contentHeightRef;
             const { value: yRailSize } = yRailSizeRef;
-            if (containerHeight === null ||
-                contentHeight === null ||
-                yRailSize === null) {
+            if (containerHeight === null
+                || contentHeight === null
+                || yRailSize === null) {
                 return 0;
             }
             else {
@@ -118,9 +124,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: containerScrollLeft } = containerScrollLeftRef;
             const { value: contentWidth } = contentWidthRef;
             const { value: xRailSize } = xRailSizeRef;
-            if (containerWidth === null ||
-                contentWidth === null ||
-                xRailSize === null) {
+            if (containerWidth === null
+                || contentWidth === null
+                || xRailSize === null) {
                 return 0;
             }
             else {
@@ -136,16 +142,16 @@ const Scrollbar = (0, vue_1.defineComponent)({
         const needYBarRef = (0, vue_1.computed)(() => {
             const { value: containerHeight } = containerHeightRef;
             const { value: contentHeight } = contentHeightRef;
-            return (containerHeight !== null &&
-                contentHeight !== null &&
-                contentHeight > containerHeight);
+            return (containerHeight !== null
+                && contentHeight !== null
+                && contentHeight > containerHeight);
         });
         const needXBarRef = (0, vue_1.computed)(() => {
             const { value: containerWidth } = containerWidthRef;
             const { value: contentWidth } = contentWidthRef;
-            return (containerWidth !== null &&
-                contentWidth !== null &&
-                contentWidth > containerWidth);
+            return (containerWidth !== null
+                && contentWidth !== null
+                && contentWidth > containerWidth);
         });
         const mergedShowXBarRef = (0, vue_1.computed)(() => {
             const { trigger } = props;
@@ -167,30 +173,6 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 return content();
             return contentRef.value;
         });
-        const activateState = (0, _utils_1.useReactivated)(() => {
-            // Only restore for builtin container & content
-            if (!props.container) {
-                // remount
-                scrollTo({
-                    top: containerScrollTopRef.value,
-                    left: containerScrollLeftRef.value
-                });
-            }
-        });
-        // methods
-        const handleContentResize = () => {
-            if (activateState.isDeactivated)
-                return;
-            sync();
-        };
-        const handleContainerResize = (e) => {
-            if (activateState.isDeactivated)
-                return;
-            const { onResize } = props;
-            if (onResize)
-                onResize(e);
-            sync();
-        };
         const scrollTo = (options, y) => {
             if (!props.scrollable)
                 return;
@@ -215,6 +197,30 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 scrollToPosition(0, 0, 0, false, behavior);
             }
         };
+        const activateState = (0, _utils_1.useReactivated)(() => {
+            // Only restore for builtin container & content
+            if (!props.container) {
+                // remount
+                scrollTo({
+                    top: containerScrollTopRef.value,
+                    left: containerScrollLeftRef.value
+                });
+            }
+        });
+        // methods
+        const handleContentResize = () => {
+            if (activateState.isDeactivated)
+                return;
+            sync();
+        };
+        const handleContainerResize = (e) => {
+            if (activateState.isDeactivated)
+                return;
+            const { onResize } = props;
+            if (onResize)
+                onResize(e);
+            sync();
+        };
         const scrollBy = (options, y) => {
             if (!props.scrollable)
                 return;
@@ -305,8 +311,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: container } = mergedContainerRef;
             if (container) {
                 containerScrollTopRef.value = container.scrollTop;
-                containerScrollLeftRef.value =
-                    container.scrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
+                containerScrollLeftRef.value
+                    = container.scrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
             }
         }
         function syncPositionState() {
@@ -339,8 +345,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
             const { value: container } = mergedContainerRef;
             if (container) {
                 containerScrollTopRef.value = container.scrollTop;
-                containerScrollLeftRef.value =
-                    container.scrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
+                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;
@@ -514,7 +520,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             (0, evtd_1.off)('mouseup', window, handleYScrollMouseUp, true);
         });
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseInOut }, self: { color, colorHover, height, width, borderRadius, railInsetHorizontal, railInsetVertical, railColor } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { color, colorHover, height, width, borderRadius, railInsetHorizontalTop, railInsetHorizontalBottom, railInsetVerticalRight, railInsetVerticalLeft, railColor } } = themeRef.value;
             return {
                 '--n-scrollbar-bezier': cubicBezierEaseInOut,
                 '--n-scrollbar-color': color,
@@ -522,10 +528,14 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 '--n-scrollbar-border-radius': borderRadius,
                 '--n-scrollbar-width': width,
                 '--n-scrollbar-height': height,
-                '--n-scrollbar-rail-inset-horizontal': railInsetHorizontal,
-                '--n-scrollbar-rail-inset-vertical': (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
-                    ? (0, _utils_1.rtlInset)(railInsetVertical)
-                    : railInsetVertical,
+                '--n-scrollbar-rail-inset-horizontal-top': railInsetHorizontalTop,
+                '--n-scrollbar-rail-inset-horizontal-bottom': railInsetHorizontalBottom,
+                '--n-scrollbar-rail-inset-vertical-right': (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                    ? (0, _utils_1.rtlInset)(railInsetVerticalRight)
+                    : railInsetVerticalRight,
+                '--n-scrollbar-rail-inset-vertical-left': (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                    ? (0, _utils_1.rtlInset)(railInsetVerticalLeft)
+                    : railInsetVerticalLeft,
                 '--n-scrollbar-rail-color': railColor
             };
         });
@@ -553,7 +563,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
     },
     render() {
         var _a;
-        const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail } = this;
+        const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail, yPlacement, xPlacement, xScrollable } = this;
         if (!this.scrollable)
             return (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots);
         const triggerIsNone = this.trigger === 'none';
@@ -561,10 +571,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             return ((0, vue_1.h)("div", { ref: "yRailRef", class: [
                     `${mergedClsPrefix}-scrollbar-rail`,
                     `${mergedClsPrefix}-scrollbar-rail--vertical`,
+                    `${mergedClsPrefix}-scrollbar-rail--vertical--${yPlacement}`,
                     className
-                ], "data-scrollbar-rail": true, style: [style || '', this.verticalRailStyle], "aria-hidden": true }, (0, vue_1.h)(
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            (triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
+                ], "data-scrollbar-rail": true, style: [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
@@ -606,12 +615,11 @@ const Scrollbar = (0, vue_1.defineComponent)({
                             ] }, $slots))
                     }))),
                 internalHoistYRail ? null : createYRail(undefined, undefined),
-                this.xScrollable && ((0, vue_1.h)("div", { ref: "xRailRef", class: [
+                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)(
-                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                (triggerIsNone ? _utils_1.Wrapper : vue_1.Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
+                        `${mergedClsPrefix}-scrollbar-rail--horizontal`,
+                        `${mergedClsPrefix}-scrollbar-rail--horizontal--${xPlacement}`
+                    ], 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,
                             right: rtlEnabled ? this.xBarLeftPx : undefined,

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

@@ -44,20 +44,26 @@ exports.default = (0, cssr_1.cB)('scrollbar', `
  background: var(--n-scrollbar-rail-color);
  -webkit-user-select: none;
  `, [(0, cssr_1.cM)('horizontal', `
- inset: var(--n-scrollbar-rail-inset-horizontal);
  height: var(--n-scrollbar-height);
  `, [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
  height: var(--n-scrollbar-height);
  border-radius: var(--n-scrollbar-border-radius);
  right: 0;
- `)])]), (0, cssr_1.cM)('vertical', `
- inset: var(--n-scrollbar-rail-inset-vertical);
+ `)])]), (0, cssr_1.cM)('horizontal--top', `
+ inset: var(--n-scrollbar-rail-inset-horizontal-top); 
+ `), (0, cssr_1.cM)('horizontal--bottom', `
+ inset: var(--n-scrollbar-rail-inset-horizontal-bottom); 
+ `), (0, cssr_1.cM)('vertical', `
  width: var(--n-scrollbar-width);
  `, [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
  width: var(--n-scrollbar-width);
  border-radius: var(--n-scrollbar-border-radius);
  bottom: 0;
- `)])]), (0, cssr_1.cM)('disabled', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', 'pointer-events: none;')])]), (0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
+ `)])]), (0, cssr_1.cM)('vertical--left', `
+ inset: var(--n-scrollbar-rail-inset-vertical-left); 
+ `), (0, cssr_1.cM)('vertical--right', `
+ inset: var(--n-scrollbar-rail-inset-vertical-right); 
+ `), (0, cssr_1.cM)('disabled', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', 'pointer-events: none;')])]), (0, cssr_1.c)('>', [(0, cssr_1.cE)('scrollbar', `
  z-index: 1;
  position: absolute;
  cursor: pointer;

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

@@ -1,5 +1,7 @@
 export declare const commonVars: {
-    railInsetHorizontal: string;
-    railInsetVertical: string;
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
     railColor: string;
 };

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

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.commonVars = void 0;
 exports.commonVars = {
-    railInsetHorizontal: 'auto 2px 4px 2px',
-    railInsetVertical: '2px 4px 2px auto',
+    railInsetHorizontalBottom: 'auto 2px 4px 2px',
+    railInsetHorizontalTop: '4px 2px auto 2px',
+    railInsetVerticalRight: '2px 4px 2px auto',
+    railInsetVerticalLeft: '2px auto 2px 4px',
     railColor: 'transparent'
 };

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

@@ -1,13 +1,15 @@
 import type { ThemeCommonVars } from '../../../_styles/common';
 import type { Theme } from '../../../_mixins';
-export declare const self: (vars: ThemeCommonVars) => {
+export declare function self(vars: ThemeCommonVars): {
     height: string;
     width: string;
     borderRadius: string;
     color: string;
     colorHover: string;
-    railInsetHorizontal: string;
-    railInsetVertical: string;
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
     railColor: string;
 };
 export type ScrollbarThemeVars = ReturnType<typeof self>;

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

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.self = void 0;
+exports.self = self;
 const common_1 = require("../../../_styles/common");
 const common_2 = require("./common");
-const self = (vars) => {
+function self(vars) {
     const { scrollbarColor, scrollbarColorHover, scrollbarHeight, scrollbarWidth, scrollbarBorderRadius } = vars;
     return Object.assign(Object.assign({}, common_2.commonVars), { height: scrollbarHeight, width: scrollbarWidth, borderRadius: scrollbarBorderRadius, color: scrollbarColor, colorHover: scrollbarColorHover });
-};
-exports.self = self;
+}
 const scrollbarLight = {
     name: 'Scrollbar',
     common: common_1.commonLight,
-    self: exports.self
+    self
 };
 exports.default = scrollbarLight;

package/lib/_internal/select-menu/src/SelectGroupHeader.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     tmNode: {
-        type: PropType<TreeNode<SelectGroupOption, SelectGroupOption, SelectGroupOption>>;
+        type: PropType<TreeNode<SelectGroupOption>>;
         required: true;
     };
 }, {
@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     tmNode: {
-        type: PropType<TreeNode<SelectGroupOption, SelectGroupOption, SelectGroupOption>>;
+        type: PropType<TreeNode<SelectGroupOption>>;
         required: true;
     };
 }>>, {}, {}>;

package/lib/_internal/select-menu/src/SelectGroupHeader.js

@@ -16,9 +16,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup() {
-        const { renderLabelRef, renderOptionRef, labelFieldRef, nodePropsRef
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-         } = (0, vue_1.inject)(interface_1.internalSelectionMenuInjectionKey);
+        const { renderLabelRef, renderOptionRef, labelFieldRef, nodePropsRef } = (0, vue_1.inject)(interface_1.internalSelectionMenuInjectionKey);
         return {
             labelField: labelFieldRef,
             nodeProps: nodePropsRef,