@uzum-tech/ui 1.8.2 → 1.9.1

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;
@@ -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/lib/_internal/scrollbar/src/Scrollbar.js

@@ -4,19 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.XScrollbar = void 0;
-const vue_1 = require("vue");
 const evtd_1 = require("evtd");
-const vueuc_1 = require("vueuc");
-const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
+const vooks_1 = require("vooks");
+const vue_1 = require("vue");
+const vueuc_1 = require("vueuc");
 const _mixins_1 = require("../../../_mixins");
 const _utils_1 = require("../../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const scrollbarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
-        type: Number,
-        default: 5
-    }, duration: {
+const scrollbarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { duration: {
         type: Number,
         default: 0
     }, scrollable: {
@@ -27,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, 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,
@@ -61,6 +64,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
         let memoMouseX = 0;
         let memoMouseY = 0;
         const isIos = (0, vooks_1.useIsIos)();
+        const themeRef = (0, _mixins_1.useTheme)('Scrollbar', '-scrollbar', index_cssr_1.default, styles_1.scrollbarLight, props, mergedClsPrefixRef);
         const yBarSizeRef = (0, vue_1.computed)(() => {
             const { value: containerHeight } = containerHeightRef;
             const { value: contentHeight } = contentHeightRef;
@@ -71,7 +75,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 return 0;
             }
             else {
-                return Math.min(containerHeight, (yRailSize * containerHeight) / contentHeight + props.size * 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)(() => {
@@ -87,7 +92,8 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 return 0;
             }
             else {
-                return (xRailSize * containerWidth) / contentWidth + props.size * 1.5;
+                return ((xRailSize * containerWidth) / contentWidth +
+                    (0, seemly_1.depx)(themeRef.value.self.height) * 1.5);
             }
         });
         const xBarSizePxRef = (0, vue_1.computed)(() => {
@@ -105,8 +111,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             }
             else {
                 const heightDiff = contentHeight - containerHeight;
-                if (!heightDiff)
+                if (!heightDiff) {
                     return 0;
+                }
                 return ((containerScrollTop / heightDiff) * (yRailSize - yBarSizeRef.value));
             }
         });
@@ -125,8 +132,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             }
             else {
                 const widthDiff = contentWidth - containerWidth;
-                if (!widthDiff)
+                if (!widthDiff) {
                     return 0;
+                }
                 return ((containerScrollLeft / widthDiff) * (xRailSize - xBarSizeRef.value));
             }
         });
@@ -157,43 +165,22 @@ const Scrollbar = (0, vue_1.defineComponent)({
         });
         const mergedContainerRef = (0, vue_1.computed)(() => {
             const { container } = props;
-            if (container)
+            if (container) {
                 return container();
+            }
             return containerRef.value;
         });
         const mergedContentRef = (0, vue_1.computed)(() => {
             const { content } = props;
-            if (content)
+            if (content) {
                 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
-                });
             }
+            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;
@@ -215,12 +202,41 @@ 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)
+            if (!props.scrollable) {
                 return;
+            }
             const { value: container } = mergedContainerRef;
-            if (!container)
+            if (!container) {
                 return;
+            }
             if (typeof options === 'object') {
                 container.scrollBy(options);
             }
@@ -230,8 +246,9 @@ const Scrollbar = (0, vue_1.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) {
@@ -296,8 +313,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
         }
         function handleScroll(e) {
             const { onScroll } = props;
-            if (onScroll)
+            if (onScroll) {
                 onScroll(e);
+            }
             syncScrollState();
         }
         function syncScrollState() {
@@ -356,8 +374,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             }
         }
         function sync() {
-            if (!props.scrollable)
+            if (!props.scrollable) {
                 return;
+            }
             if (props.useUnifiedContainer) {
                 syncUnifiedContainer();
             }
@@ -382,8 +401,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 : e.clientX;
         }
         function handleXScrollMouseMove(e) {
-            if (!xBarPressed)
+            if (!xBarPressed) {
                 return;
+            }
             if (xBarVanishTimerId !== undefined) {
                 window.clearTimeout(xBarVanishTimerId);
             }
@@ -393,8 +413,9 @@ const Scrollbar = (0, vue_1.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;
@@ -407,8 +428,9 @@ const Scrollbar = (0, vue_1.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) {
@@ -432,8 +454,9 @@ const Scrollbar = (0, vue_1.defineComponent)({
             memoMouseY = e.clientY;
         }
         function handleYScrollMouseMove(e) {
-            if (!yBarPressed)
+            if (!yBarPressed) {
                 return;
+            }
             if (xBarVanishTimerId !== undefined) {
                 window.clearTimeout(xBarVanishTimerId);
             }
@@ -443,8 +466,9 @@ const Scrollbar = (0, vue_1.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;
@@ -499,8 +523,9 @@ const Scrollbar = (0, vue_1.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();
         });
         (0, vue_1.onBeforeUnmount)(() => {
@@ -513,16 +538,40 @@ const Scrollbar = (0, vue_1.defineComponent)({
             (0, evtd_1.off)('mousemove', window, handleYScrollMouseMove, true);
             (0, evtd_1.off)('mouseup', window, handleYScrollMouseUp, true);
         });
-        const themeRef = (0, _mixins_1.useTheme)('Scrollbar', '-scrollbar', index_cssr_1.default, styles_1.scrollbarLight, props, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.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 } = (0, seemly_1.getPadding)(railInsetHorizontalTop);
+            const { top: railTopHorizontalBottom, right: railRightHorizontalBottom, bottom: railBottomHorizontalBottom, left: railLeftHorizontalBottom } = (0, seemly_1.getPadding)(railInsetHorizontalBottom);
+            const { top: railTopVerticalRight, right: railRightVerticalRight, bottom: railBottomVerticalRight, left: railLeftVerticalRight } = (0, seemly_1.getPadding)((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? (0, _utils_1.rtlInset)(railInsetVerticalRight)
+                : railInsetVerticalRight);
+            const { top: railTopVerticalLeft, right: railRightVerticalLeft, bottom: railBottomVerticalLeft, left: railLeftVerticalLeft } = (0, seemly_1.getPadding)((rtlEnabledRef === null || rtlEnabledRef === void 0 ? void 0 : rtlEnabledRef.value)
+                ? (0, _utils_1.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
@@ -549,15 +598,18 @@ const Scrollbar = (0, vue_1.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 ((0, vue_1.h)("div", { ref: "yRailRef", class: [
                     `${mergedClsPrefix}-scrollbar-rail`,
-                    `${mergedClsPrefix}-scrollbar-rail--vertical`
-                ], "data-scrollbar-rail": true, style: [style || '', this.verticalRailStyle], "aria-hiddens": true }, (0, vue_1.h)((triggerIsNone ? _utils_1.Wrapper : vue_1.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 }, (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
@@ -598,10 +650,11 @@ const Scrollbar = (0, vue_1.defineComponent)({
                                 this.contentClass
                             ] }, $slots))
                     }))),
-                internalHoistYRail ? null : createYRail(undefined),
-                this.xScrollable && ((0, vue_1.h)("div", { ref: "xRailRef", class: [
+                internalHoistYRail ? null : createYRail(undefined, undefined),
+                xScrollable && ((0, vue_1.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 }, (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,
@@ -617,7 +670,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
         if (internalHoistYRail) {
             return ((0, vue_1.h)(vue_1.Fragment, null,
                 scrollbarNode,
-                createYRail(this.cssVars)));
+                createYRail(this.themeClass, this.cssVars)));
         }
         else {
             return scrollbarNode;