@uzum-tech/ui 1.8.2 → 1.9.0

package/es/_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;
@@ -48,10 +48,6 @@ export interface ScrollbarInst extends ScrollbarInstMethods {
     containerScrollTop: number;
 }
 declare const scrollbarProps: {
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
     readonly duration: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -71,7 +67,7 @@ declare const scrollbarProps: {
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
     readonly containerStyle: PropType<string | CSSProperties>;
-    readonly contentClass: StringConstructor;
+    readonly contentClass: PropType<string | Array<string | undefined>>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly horizontalRailStyle: PropType<string | CSSProperties>;
     readonly verticalRailStyle: PropType<string | CSSProperties>;
@@ -80,26 +76,54 @@ 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;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
         color: string;
         colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
         color: string;
         colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>>>;
 };
 export type ScrollbarProps = ExtractPublicPropTypes<typeof scrollbarProps>;
 export type ScrollbarInternalProps = ExtractInternalPropTypes<typeof scrollbarProps>;
 declare const Scrollbar: import("vue").DefineComponent<{
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
     readonly duration: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -119,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: StringConstructor;
+    readonly contentClass: PropType<string | Array<string | undefined>>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly horizontalRailStyle: PropType<string | CSSProperties>;
     readonly verticalRailStyle: PropType<string | CSSProperties>;
@@ -128,17 +152,49 @@ 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;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
         color: string;
         colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
         color: string;
         colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
@@ -170,6 +226,23 @@ declare const Scrollbar: import("vue").DefineComponent<{
         '--u-scrollbar-border-radius': string;
         '--u-scrollbar-width': string;
         '--u-scrollbar-height': string;
+        '--u-scrollbar-rail-top-horizontal-top': string;
+        '--u-scrollbar-rail-right-horizontal-top': string;
+        '--u-scrollbar-rail-bottom-horizontal-top': string;
+        '--u-scrollbar-rail-left-horizontal-top': string;
+        '--u-scrollbar-rail-top-horizontal-bottom': string;
+        '--u-scrollbar-rail-right-horizontal-bottom': string;
+        '--u-scrollbar-rail-bottom-horizontal-bottom': string;
+        '--u-scrollbar-rail-left-horizontal-bottom': string;
+        '--u-scrollbar-rail-top-vertical-right': string;
+        '--u-scrollbar-rail-right-vertical-right': string;
+        '--u-scrollbar-rail-bottom-vertical-right': string;
+        '--u-scrollbar-rail-left-vertical-right': string;
+        '--u-scrollbar-rail-top-vertical-left': string;
+        '--u-scrollbar-rail-right-vertical-left': string;
+        '--u-scrollbar-rail-bottom-vertical-left': string;
+        '--u-scrollbar-rail-left-vertical-left': string;
+        '--u-scrollbar-rail-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -180,10 +253,6 @@ declare const Scrollbar: import("vue").DefineComponent<{
     handleMouseEnterWrapper: () => void;
     handleMouseLeaveWrapper: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
     readonly duration: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -203,7 +272,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
     readonly containerStyle: PropType<string | CSSProperties>;
-    readonly contentClass: StringConstructor;
+    readonly contentClass: PropType<string | Array<string | undefined>>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly horizontalRailStyle: PropType<string | CSSProperties>;
     readonly verticalRailStyle: PropType<string | CSSProperties>;
@@ -212,20 +281,51 @@ 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;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
         color: string;
         colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
         color: string;
         colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>>>;
 }>>, {
-    readonly size: number;
     readonly duration: number;
     readonly scrollable: boolean;
     readonly xScrollable: boolean;
@@ -233,6 +333,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/es/_internal/scrollbar/src/Scrollbar.js

@@ -1,16 +1,13 @@
-import { h, ref, defineComponent, computed, onMounted, onBeforeUnmount, mergeProps, Transition, watchEffect, Fragment } from 'vue';
-import { on, off } from 'evtd';
-import { VResizeObserver } from 'vueuc';
+import { off, on } from 'evtd';
+import { depx, getPadding, getPreciseEventTarget } from 'seemly';
 import { useIsIos } from 'vooks';
-import { getPreciseEventTarget } from 'seemly';
-import { useConfig, useTheme, useThemeClass, useRtl } from '../../../_mixins';
-import { useReactivated, Wrapper } from '../../../_utils';
+import { computed, defineComponent, Fragment, h, mergeProps, onBeforeUnmount, onMounted, ref, Transition, watchEffect } from 'vue';
+import { VResizeObserver } from 'vueuc';
+import { useConfig, useRtl, useTheme, useThemeClass } from '../../../_mixins';
+import { rtlInset, useReactivated, Wrapper } from '../../../_utils';
 import { scrollbarLight } from '../styles';
 import style from './styles/index.cssr';
-const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), { size: {
-        type: Number,
-        default: 5
-    }, duration: {
+const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), { duration: {
         type: Number,
         default: 0
     }, scrollable: {
@@ -21,7 +18,13 @@ const scrollbarProps = Object.assign(Object.assign({}, useTheme.props), { size:
         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, 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 = defineComponent({
     name: 'Scrollbar',
     props: scrollbarProps,
@@ -55,6 +58,7 @@ const Scrollbar = defineComponent({
         let memoMouseX = 0;
         let memoMouseY = 0;
         const isIos = useIsIos();
+        const themeRef = useTheme('Scrollbar', '-scrollbar', style, scrollbarLight, props, mergedClsPrefixRef);
         const yBarSizeRef = computed(() => {
             const { value: containerHeight } = containerHeightRef;
             const { value: contentHeight } = contentHeightRef;
@@ -65,7 +69,8 @@ const Scrollbar = defineComponent({
                 return 0;
             }
             else {
-                return Math.min(containerHeight, (yRailSize * containerHeight) / contentHeight + props.size * 1.5);
+                return Math.min(containerHeight, (yRailSize * containerHeight) / contentHeight +
+                    depx(themeRef.value.self.width) * 1.5);
             }
         });
         const yBarSizePxRef = computed(() => {
@@ -81,7 +86,8 @@ const Scrollbar = defineComponent({
                 return 0;
             }
             else {
-                return (xRailSize * containerWidth) / contentWidth + props.size * 1.5;
+                return ((xRailSize * containerWidth) / contentWidth +
+                    depx(themeRef.value.self.height) * 1.5);
             }
         });
         const xBarSizePxRef = computed(() => {
@@ -99,8 +105,9 @@ const Scrollbar = defineComponent({
             }
             else {
                 const heightDiff = contentHeight - containerHeight;
-                if (!heightDiff)
+                if (!heightDiff) {
                     return 0;
+                }
                 return ((containerScrollTop / heightDiff) * (yRailSize - yBarSizeRef.value));
             }
         });
@@ -119,8 +126,9 @@ const Scrollbar = defineComponent({
             }
             else {
                 const widthDiff = contentWidth - containerWidth;
-                if (!widthDiff)
+                if (!widthDiff) {
                     return 0;
+                }
                 return ((containerScrollLeft / widthDiff) * (xRailSize - xBarSizeRef.value));
             }
         });
@@ -151,43 +159,22 @@ const Scrollbar = defineComponent({
         });
         const mergedContainerRef = computed(() => {
             const { container } = props;
-            if (container)
+            if (container) {
                 return container();
+            }
             return containerRef.value;
         });
         const mergedContentRef = computed(() => {
             const { content } = props;
-            if (content)
+            if (content) {
                 return content();
-            return contentRef.value;
-        });
-        const activateState = useReactivated(() => {
-            // Only restore for builtin container & content
-            if (!props.container) {
-                // remount
-                scrollTo({
-                    top: containerScrollTopRef.value,
-                    left: containerScrollLeftRef.value
-                });
             }
+            return contentRef.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)
+            if (!props.scrollable) {
                 return;
+            }
             if (typeof options === 'number') {
                 scrollToPosition(options, y !== null && y !== void 0 ? y : 0, 0, false, 'auto');
                 return;
@@ -209,12 +196,41 @@ const Scrollbar = defineComponent({
                 scrollToPosition(0, 0, 0, false, behavior);
             }
         };
+        const activateState = 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)
+            if (!props.scrollable) {
                 return;
+            }
             const { value: container } = mergedContainerRef;
-            if (!container)
+            if (!container) {
                 return;
+            }
             if (typeof options === 'object') {
                 container.scrollBy(options);
             }
@@ -224,8 +240,9 @@ const Scrollbar = defineComponent({
         };
         function scrollToPosition(left, top, elSize, debounce, behavior) {
             const { value: container } = mergedContainerRef;
-            if (!container)
+            if (!container) {
                 return;
+            }
             if (debounce) {
                 const { scrollTop, offsetHeight } = container;
                 if (top > scrollTop) {
@@ -290,8 +307,9 @@ const Scrollbar = defineComponent({
         }
         function handleScroll(e) {
             const { onScroll } = props;
-            if (onScroll)
+            if (onScroll) {
                 onScroll(e);
+            }
             syncScrollState();
         }
         function syncScrollState() {
@@ -350,8 +368,9 @@ const Scrollbar = defineComponent({
             }
         }
         function sync() {
-            if (!props.scrollable)
+            if (!props.scrollable) {
                 return;
+            }
             if (props.useUnifiedContainer) {
                 syncUnifiedContainer();
             }
@@ -376,8 +395,9 @@ const Scrollbar = defineComponent({
                 : e.clientX;
         }
         function handleXScrollMouseMove(e) {
-            if (!xBarPressed)
+            if (!xBarPressed) {
                 return;
+            }
             if (xBarVanishTimerId !== undefined) {
                 window.clearTimeout(xBarVanishTimerId);
             }
@@ -387,8 +407,9 @@ const Scrollbar = defineComponent({
             const { value: containerWidth } = containerWidthRef;
             const { value: contentWidth } = contentWidthRef;
             const { value: xBarSize } = xBarSizeRef;
-            if (containerWidth === null || contentWidth === null)
+            if (containerWidth === null || contentWidth === null) {
                 return;
+            }
             const dX = (rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
                 ? window.innerWidth - e.clientX - memoMouseX
                 : e.clientX - memoMouseX;
@@ -401,8 +422,9 @@ const Scrollbar = defineComponent({
             if (container) {
                 container.scrollLeft = toScrollLeft * ((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value) ? -1 : 1);
                 const { internalOnUpdateScrollLeft } = props;
-                if (internalOnUpdateScrollLeft)
+                if (internalOnUpdateScrollLeft) {
                     internalOnUpdateScrollLeft(toScrollLeft);
+                }
             }
         }
         function handleXScrollMouseUp(e) {
@@ -426,8 +448,9 @@ const Scrollbar = defineComponent({
             memoMouseY = e.clientY;
         }
         function handleYScrollMouseMove(e) {
-            if (!yBarPressed)
+            if (!yBarPressed) {
                 return;
+            }
             if (xBarVanishTimerId !== undefined) {
                 window.clearTimeout(xBarVanishTimerId);
             }
@@ -437,8 +460,9 @@ const Scrollbar = defineComponent({
             const { value: containerHeight } = containerHeightRef;
             const { value: contentHeight } = contentHeightRef;
             const { value: yBarSize } = yBarSizeRef;
-            if (containerHeight === null || contentHeight === null)
+            if (containerHeight === null || contentHeight === null) {
                 return;
+            }
             const dY = e.clientY - memoMouseY;
             const dScrollTop = (dY * (contentHeight - containerHeight)) / (containerHeight - yBarSize);
             const toScrollTopUpperBound = contentHeight - containerHeight;
@@ -493,8 +517,9 @@ const Scrollbar = defineComponent({
             // if you pass inner to scrollbar, you may use a ref inside component
             // however, when scrollbar is mounted, ref is not ready at component
             // you need to init by yourself
-            if (props.container)
+            if (props.container) {
                 return;
+            }
             sync();
         });
         onBeforeUnmount(() => {
@@ -507,16 +532,40 @@ const Scrollbar = defineComponent({
             off('mousemove', window, handleYScrollMouseMove, true);
             off('mouseup', window, handleYScrollMouseUp, true);
         });
-        const themeRef = useTheme('Scrollbar', '-scrollbar', style, scrollbarLight, props, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseInOut, scrollbarBorderRadius, scrollbarHeight, scrollbarWidth }, self: { color, colorHover } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { color, colorHover, height, width, borderRadius, railInsetHorizontalTop, railInsetHorizontalBottom, railInsetVerticalRight, railInsetVerticalLeft, railColor } } = themeRef.value;
+            const { top: railTopHorizontalTop, right: railRightHorizontalTop, bottom: railBottomHorizontalTop, left: railLeftHorizontalTop } = getPadding(railInsetHorizontalTop);
+            const { top: railTopHorizontalBottom, right: railRightHorizontalBottom, bottom: railBottomHorizontalBottom, left: railLeftHorizontalBottom } = getPadding(railInsetHorizontalBottom);
+            const { top: railTopVerticalRight, right: railRightVerticalRight, bottom: railBottomVerticalRight, left: railLeftVerticalRight } = getPadding((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? rtlInset(railInsetVerticalRight)
+                : railInsetVerticalRight);
+            const { top: railTopVerticalLeft, right: railRightVerticalLeft, bottom: railBottomVerticalLeft, left: railLeftVerticalLeft } = getPadding((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? rtlInset(railInsetVerticalLeft)
+                : railInsetVerticalLeft);
             return {
                 '--u-scrollbar-bezier': cubicBezierEaseInOut,
                 '--u-scrollbar-color': color,
                 '--u-scrollbar-color-hover': colorHover,
-                '--u-scrollbar-border-radius': scrollbarBorderRadius,
-                '--u-scrollbar-width': scrollbarWidth,
-                '--u-scrollbar-height': scrollbarHeight
+                '--u-scrollbar-border-radius': borderRadius,
+                '--u-scrollbar-width': width,
+                '--u-scrollbar-height': height,
+                '--u-scrollbar-rail-top-horizontal-top': railTopHorizontalTop,
+                '--u-scrollbar-rail-right-horizontal-top': railRightHorizontalTop,
+                '--u-scrollbar-rail-bottom-horizontal-top': railBottomHorizontalTop,
+                '--u-scrollbar-rail-left-horizontal-top': railLeftHorizontalTop,
+                '--u-scrollbar-rail-top-horizontal-bottom': railTopHorizontalBottom,
+                '--u-scrollbar-rail-right-horizontal-bottom': railRightHorizontalBottom,
+                '--u-scrollbar-rail-bottom-horizontal-bottom': railBottomHorizontalBottom,
+                '--u-scrollbar-rail-left-horizontal-bottom': railLeftHorizontalBottom,
+                '--u-scrollbar-rail-top-vertical-right': railTopVerticalRight,
+                '--u-scrollbar-rail-right-vertical-right': railRightVerticalRight,
+                '--u-scrollbar-rail-bottom-vertical-right': railBottomVerticalRight,
+                '--u-scrollbar-rail-left-vertical-right': railLeftVerticalRight,
+                '--u-scrollbar-rail-top-vertical-left': railTopVerticalLeft,
+                '--u-scrollbar-rail-right-vertical-left': railRightVerticalLeft,
+                '--u-scrollbar-rail-bottom-vertical-left': railBottomVerticalLeft,
+                '--u-scrollbar-rail-left-vertical-left': railLeftVerticalLeft,
+                '--u-scrollbar-rail-color': railColor
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -543,15 +592,18 @@ const Scrollbar = defineComponent({
     },
     render() {
         var _a;
-        const { $slots, mergedClsPrefix, triggerDisplayManually, rtlEnabled, internalHoistYRail } = this;
-        if (!this.scrollable)
+        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';
-        const createYRail = (style) => {
+        const createYRail = (className, style) => {
             return (h("div", { ref: "yRailRef", class: [
                     `${mergedClsPrefix}-scrollbar-rail`,
-                    `${mergedClsPrefix}-scrollbar-rail--vertical`
-                ], "data-scrollbar-rail": true, style: [style || '', this.verticalRailStyle], "aria-hiddens": true }, h((triggerIsNone ? Wrapper : Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
+                    `${mergedClsPrefix}-scrollbar-rail--vertical`,
+                    `${mergedClsPrefix}-scrollbar-rail--vertical--${yPlacement}`,
+                    className
+                ], "data-scrollbar-rail": true, style: [style || '', this.verticalRailStyle], "aria-hidden": true }, h((triggerIsNone ? Wrapper : Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
                 default: () => this.needYBar && this.isShowYBar && !this.isIos ? (h("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                         height: this.yBarSizePx,
                         top: this.yBarTopPx
@@ -592,10 +644,11 @@ const Scrollbar = defineComponent({
                                 this.contentClass
                             ] }, $slots))
                     }))),
-                internalHoistYRail ? null : createYRail(undefined),
-                this.xScrollable && (h("div", { ref: "xRailRef", class: [
+                internalHoistYRail ? null : createYRail(undefined, undefined),
+                xScrollable && (h("div", { ref: "xRailRef", class: [
                         `${mergedClsPrefix}-scrollbar-rail`,
-                        `${mergedClsPrefix}-scrollbar-rail--horizontal`
+                        `${mergedClsPrefix}-scrollbar-rail--horizontal`,
+                        `${mergedClsPrefix}-scrollbar-rail--horizontal--${xPlacement}`
                     ], style: this.horizontalRailStyle, "data-scrollbar-rail": true, "aria-hidden": true }, h((triggerIsNone ? Wrapper : Transition), triggerIsNone ? null : { name: 'fade-in-transition' }, {
                     default: () => this.needXBar && this.isShowXBar && !this.isIos ? (h("div", { class: `${mergedClsPrefix}-scrollbar-rail__scrollbar`, style: {
                             width: this.xBarSizePx,
@@ -611,7 +664,7 @@ const Scrollbar = defineComponent({
         if (internalHoistYRail) {
             return (h(Fragment, null,
                 scrollbarNode,
-                createYRail(this.cssVars)));
+                createYRail(this.themeClass, this.cssVars)));
         }
         else {
             return scrollbarNode;