feat(scrollbar): adds height, width, radius, railInsetHorizontal, railInsetVertical and railColor theme variables

CHANGELOG.en-US.md

@@ -40,6 +40,7 @@
 - `n-cascader` adds `get-render-prefix` prop.
 - `n-cascader` adds `get-render-suffix` prop.
 - `n-image` optimizes download icon style.
+- `n-scrollbar` adds `height`, `width`, `radius`, `railInsetHorizontal`, `railInsetVertical` and `railColor` theme variables.
 
 ## 2.38.1
 

CHANGELOG.zh-CN.md

@@ -39,6 +39,7 @@
 - `n-cascader` 新增 `render-prefix` 属性
 - `n-cascader` 新增 `render-suffix` 属性
 - `n-image` 优化下载按钮图标
+- `n-scrollbar` 新增 `height`、`width`、`radius`、`railInsetHorizontal`、`railInsetVertical`、`railColor` 主题变量
 
 ## 2.38.1
 

src/_internal/scrollbar/src/Scrollbar.tsx

@@ -14,7 +14,7 @@ import type { PropType, CSSProperties, VNode, HTMLAttributes } from 'vue'
 import { on, off } from 'evtd'
 import { VResizeObserver } from 'vueuc'
 import { useIsIos } from 'vooks'
-import { getPreciseEventTarget } from 'seemly'
+import { depx, getPreciseEventTarget } from 'seemly'
 import { useConfig, useTheme, useThemeClass, useRtl } from '../../../_mixins'
 import type { ThemeProps } from '../../../_mixins'
 import type {
@@ -75,10 +75,6 @@ export interface ScrollbarInst extends ScrollbarInstMethods {
 
 const scrollbarProps = {
   ...(useTheme.props as ThemeProps<ScrollbarTheme>),
-  size: {
-    type: Number,
-    default: 5
-  },
   duration: {
     type: Number,
     default: 0
@@ -155,6 +151,15 @@ const Scrollbar = defineComponent({
     let memoMouseY: number = 0
     const isIos = useIsIos()
 
+    const themeRef = useTheme(
+      'Scrollbar',
+      '-scrollbar',
+      style,
+      scrollbarLight,
+      props,
+      mergedClsPrefixRef
+    )
+
     const yBarSizeRef = computed(() => {
       const { value: containerHeight } = containerHeightRef
       const { value: contentHeight } = contentHeightRef
@@ -168,7 +173,8 @@ const Scrollbar = defineComponent({
       } else {
         return Math.min(
           containerHeight,
-          (yRailSize * containerHeight) / contentHeight + props.size * 1.5
+          (yRailSize * containerHeight) / contentHeight +
+            depx(themeRef.value.self.width) * 1.5
         )
       }
     })
@@ -186,7 +192,10 @@ 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(() => {
@@ -636,31 +645,30 @@ 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 }
+        common: { cubicBezierEaseInOut },
+        self: {
+          color,
+          colorHover,
+          height,
+          width,
+          borderRadius,
+          railInsetHorizontal,
+          railInsetVertical,
+          railColor
+        }
       } = themeRef.value
       return {
         '--n-scrollbar-bezier': cubicBezierEaseInOut,
         '--n-scrollbar-color': color,
         '--n-scrollbar-color-hover': colorHover,
-        '--n-scrollbar-border-radius': scrollbarBorderRadius,
-        '--n-scrollbar-width': scrollbarWidth,
-        '--n-scrollbar-height': scrollbarHeight
+        '--n-scrollbar-border-radius': borderRadius,
+        '--n-scrollbar-width': width,
+        '--n-scrollbar-height': height,
+        '--n-scrollbar-rail-inset-horizontal': railInsetHorizontal,
+        '--n-scrollbar-rail-inset-vertical': railInsetVertical,
+        '--n-scrollbar-rail-color': railColor
       }
     })
     const themeClassHandle = inlineThemeDisabled

src/_internal/scrollbar/src/styles/index.cssr.ts

@@ -8,6 +8,9 @@ import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr'
 // --n-scrollbar-width
 // --n-scrollbar-height
 // --n-scrollbar-border-radius
+// --n-scrollbar-rail-inset-horizontal
+// --n-scrollbar-rail-inset-vertical
+// --n-scrollbar-rail-color
 export default cB('scrollbar', `
   overflow: hidden;
   position: relative;
@@ -43,12 +46,11 @@ export default cB('scrollbar', `
       position: absolute;
       pointer-events: none;
       user-select: none;
+      background: var(--n-scrollbar-rail-color);
       -webkit-user-select: none;
     `, [
       cM('horizontal', `
-        left: 2px;
-        right: 2px;
-        bottom: 4px;
+        inset: var(--n-scrollbar-rail-inset-horizontal);
         height: var(--n-scrollbar-height);
       `, [
         c('>', [
@@ -60,9 +62,7 @@ export default cB('scrollbar', `
         ])
       ]),
       cM('vertical', `
-        right: 4px;
-        top: 2px;
-        bottom: 2px;
+        inset: var(--n-scrollbar-rail-inset-vertical);
         width: var(--n-scrollbar-width);
       `, [
         c('>', [

src/_internal/scrollbar/styles/common.ts

@@ -0,0 +1,5 @@
+export const commonVars = {
+  railInsetHorizontal: 'auto 2px 4px 2px',
+  railInsetVertical: '2px 4px 2px auto',
+  railColor: 'transparent'
+}

src/_internal/scrollbar/styles/light.ts

@@ -1,10 +1,21 @@
 import { commonLight } from '../../../_styles/common'
 import type { ThemeCommonVars } from '../../../_styles/common'
 import type { Theme } from '../../../_mixins'
+import { commonVars } from './common'
 
 export const self = (vars: ThemeCommonVars) => {
-  const { scrollbarColor, scrollbarColorHover } = vars
+  const {
+    scrollbarColor,
+    scrollbarColorHover,
+    scrollbarHeight,
+    scrollbarWidth,
+    scrollbarBorderRadius
+  } = vars
   return {
+    ...commonVars,
+    height: scrollbarHeight,
+    width: scrollbarWidth,
+    borderRadius: scrollbarBorderRadius,
     color: scrollbarColor,
     colorHover: scrollbarColorHover
   }

src/scrollbar/demos/enUS/custom.demo.vue

@@ -0,0 +1,36 @@
+<markdown>
+# Custom scrollbar style
+
+You can use `theme-overrides` to control the style of the scrollbar.
+</markdown>
+
+<template>
+  <n-config-provider
+    :theme-overrides="{
+      Scrollbar: {
+        width: '8px',
+        railInsetHorizontal: '4px 4px 4px auto'
+      }
+    }"
+  >
+    <n-scrollbar style="max-height: 120px">
+      我们在田野上面找猪<br>
+      想象中已找到了三只<br>
+      小鸟在白云上面追逐<br>
+      它们在树底下跳舞<br>
+      啦啦啦啦啦啦啦啦咧<br>
+      啦啦啦啦咧<br>
+      我们在想象中度过了许多年<br>
+      想象中我们是如此的疯狂<br>
+      我们在城市里面找猪<br>
+      想象中已找到了几百万只<br>
+      小鸟在公园里面唱歌<br>
+      它们独自在想象里跳舞<br>
+      啦啦啦啦啦啦啦啦咧<br>
+      啦啦啦啦咧<br>
+      我们在想象中度过了许多年<br>
+      许多年之后我们又开始想象<br>
+      啦啦啦啦啦啦啦啦咧
+    </n-scrollbar>
+  </n-config-provider>
+</template>

src/scrollbar/demos/enUS/index.demo-entry.md

@@ -9,6 +9,7 @@ basic.vue
 x.vue
 trigger.vue
 no-sync.vue
+custom.vue
 ```
 
 ## API

src/scrollbar/demos/zhCN/custom.demo.vue

@@ -0,0 +1,36 @@
+<markdown>
+# 自定义样式
+
+你可以通过 `theme-overrides` 去控制滚动条的样式。
+</markdown>
+
+<template>
+  <n-config-provider
+    :theme-overrides="{
+      Scrollbar: {
+        width: '8px',
+        railInsetHorizontal: '4px 4px 4px auto'
+      }
+    }"
+  >
+    <n-scrollbar style="max-height: 120px">
+      我们在田野上面找猪<br>
+      想象中已找到了三只<br>
+      小鸟在白云上面追逐<br>
+      它们在树底下跳舞<br>
+      啦啦啦啦啦啦啦啦咧<br>
+      啦啦啦啦咧<br>
+      我们在想象中度过了许多年<br>
+      想象中我们是如此的疯狂<br>
+      我们在城市里面找猪<br>
+      想象中已找到了几百万只<br>
+      小鸟在公园里面唱歌<br>
+      它们独自在想象里跳舞<br>
+      啦啦啦啦啦啦啦啦咧<br>
+      啦啦啦啦咧<br>
+      我们在想象中度过了许多年<br>
+      许多年之后我们又开始想象<br>
+      啦啦啦啦啦啦啦啦咧
+    </n-scrollbar>
+  </n-config-provider>
+</template>

src/scrollbar/demos/zhCN/index.demo-entry.md

@@ -10,6 +10,7 @@ x.vue
 trigger.vue
 no-sync.vue
 rtl-debug.vue
+custom.vue
 ```
 
 ## API