refactor(scrollbar): clean code

CHANGELOG.en-US.md

@@ -31,6 +31,7 @@
 - `n-transfer` add `render-source-label` prop.
 - `n-transfer` add `render-target-label` prop.
 - `n-transfer` add `render-source-list` prop.
+- `n-scrollbar` supports RTL.
 
 ## 2.31.0
 
@@ -81,7 +82,6 @@
 - `n-drawer` adds `default-height` prop.
 - `n-drawer` adds `on-update:width` prop.
 - `n-drawer` adds `on-update:height` prop.
-- `n-scrollbar` supports RTL.
 - Update ukUA locale.
 
 ## 2.30.8

CHANGELOG.zh-CN.md

@@ -31,6 +31,7 @@
 - `n-transfer` 新增 `render-source-label` 属性
 - `n-transfer` 新增 `render-target-label` 属性
 - `n-transfer` 新增 `render-source-list` 属性
+- `n-scrollbar` 支持 RTL
 
 ## 2.31.0
 
@@ -81,7 +82,6 @@
 - `n-drawer` 新增 `default-width` 属性
 - `n-drawer` 新增 `on-update:height` 属性
 - `n-drawer` 新增 `on-update:width` 属性
-- `n-scrollbar` 支持 RTL
 - 更新 ukUA locale
 
 ## 2.30.8

src/_internal/scrollbar/src/Scrollbar.tsx

@@ -677,7 +677,7 @@ const Scrollbar = defineComponent({
     return {
       ...exposedMethods,
       mergedClsPrefix: mergedClsPrefixRef,
-      rtlEnable: rtlEnabledRef,
+      rtlEnabled: rtlEnabledRef,
       containerScrollTop: containerScrollTopRef,
       wrapperRef,
       containerRef,
@@ -708,7 +708,7 @@ const Scrollbar = defineComponent({
       $slots,
       mergedClsPrefix,
       triggerDisplayManually,
-      rtlEnable,
+      rtlEnabled,
       internalHoistYRail
     } = this
     if (!this.scrollable) return $slots.default?.()
@@ -755,7 +755,7 @@ const Scrollbar = defineComponent({
           class: [
             `${mergedClsPrefix}-scrollbar`,
             this.themeClass,
-            rtlEnable && `${mergedClsPrefix}-scrollbar--rtl`
+            rtlEnabled && `${mergedClsPrefix}-scrollbar--rtl`
           ],
           style: this.cssVars,
           onMouseenter: triggerDisplayManually
@@ -828,8 +828,8 @@ const Scrollbar = defineComponent({
                         class={`${mergedClsPrefix}-scrollbar-rail__scrollbar`}
                         style={{
                           width: this.xBarSizePx,
-                          right: !rtlEnable ? 'unset' : this.xBarLeftPx,
-                          left: rtlEnable ? 'unset' : this.xBarLeftPx
+                          right: rtlEnabled ? this.xBarLeftPx : undefined,
+                          left: rtlEnabled ? undefined : this.xBarLeftPx
                         }}
                         onMousedown={this.handleXScrollMouseDown}
                       />