refactor(scrollbar): transition with trigger=none

CHANGELOG.en-US.md

@@ -1,5 +1,7 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
 ### Fixes
 
 - Fix `n-tree` throw error when use `pattern` prop filter the tree node, closes [#2960].

CHANGELOG.zh-CN.md

@@ -1,5 +1,7 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
 ### Fixes
 
 - 修复 `n-tree` 使用 `pattern` 属性过滤树节点时报错, 关闭 [#2960].

src/_internal/scrollbar/index.ts

@@ -1,5 +1,5 @@
 export {
   default as NScrollbar,
   XScrollbar as NxScrollbar
-} from './src/ScrollBar'
-export type { ScrollbarInst, ScrollbarProps } from './src/ScrollBar'
+} from './src/Scrollbar'
+export type { ScrollbarInst, ScrollbarProps } from './src/Scrollbar'

src/_internal/scrollbar/src/Scrollbar.tsx

@@ -24,6 +24,7 @@ import type {
 } from '../../../_utils'
 import { scrollbarLight } from '../styles'
 import type { ScrollbarTheme } from '../styles'
+import { Wrapper } from './Wrapper'
 import style from './styles/index.cssr'
 
 export interface ScrollTo {
@@ -678,6 +679,7 @@ const Scrollbar = defineComponent({
     if (!this.scrollable) return $slots.default?.()
     const createChildren = (): VNode => {
       this.onRender?.()
+      const triggerIsNone = this.trigger === 'none'
       return h(
         'div',
         mergeProps(this.$attrs, {
@@ -739,8 +741,10 @@ const Scrollbar = defineComponent({
             style={this.horizontalRailStyle}
             aria-hidden
           >
-            <Transition name="fade-in-transition">
-              {{
+            {h(
+              (triggerIsNone ? Wrapper : Transition) as any,
+              triggerIsNone ? null : { name: 'fade-in-transition' },
+              {
                 default: () =>
                   this.needYBar && this.isShowYBar && !this.isIos ? (
                     <div
@@ -752,8 +756,8 @@ const Scrollbar = defineComponent({
                       onMousedown={this.handleYScrollMouseDown}
                     />
                   ) : null
-              }}
-            </Transition>
+              }
+            )}
           </div>,
           <div
             ref="xRailRef"
@@ -761,8 +765,10 @@ const Scrollbar = defineComponent({
             style={this.verticalRailStyle}
             aria-hidden
           >
-            <Transition name="fade-in-transition">
-              {{
+            {
+              ((triggerIsNone ? Wrapper : Transition) as any,
+              triggerIsNone ? null : { name: 'fade-in-transition' },
+              {
                 default: () =>
                   this.needXBar && this.isShowXBar && !this.isIos ? (
                     <div
@@ -774,8 +780,8 @@ const Scrollbar = defineComponent({
                       onMousedown={this.handleXScrollMouseDown}
                     />
                   ) : null
-              }}
-            </Transition>
+              })
+            }
           </div>
         ]
       )

src/_internal/scrollbar/src/Wrapper.tsx

@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue'
+
+export const Wrapper = defineComponent({
+  render () {
+    return this.$slots.default?.()
+  }
+})

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

@@ -7,6 +7,7 @@ It looks better but I'm sure it's not as reliable as native scrollbar.
 ```demo
 basic.vue
 x.vue
+trigger.vue
 ```
 
 ## API

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

@@ -0,0 +1,23 @@
+<markdown>
+# Trigger
+
+You can set different scrollbar trigger. Setting `trigger="none"` will make scrollbar always shown. Setting `trigger="hover"` will make scrollbar shown on mouse hover.
+</markdown>
+
+<template>
+  <n-scrollbar style="max-height: 120px" trigger="none">
+    And as I sat there, brooding on the old unknown world, I thought of Gatsby’s
+    wonder when he first picked out the green light at the end of Daisy’s dock.
+    He had come a long way to this blue lawn and his dream must have seemed so
+    close that he could hardly fail to grasp it. He did not know that it was
+    already behind him, somewhere back in that vast obscurity beyond the city,
+    where the dark fields of the republic rolled on under the night.<br><br>
+
+    Gatsby believed in the green light, the orgastic future that year by year
+    recedes before us. It eluded us then, but that’s no matter—tomorrow we will
+    run faster, stretch out our arms farther. . . . And one fine morning——<br><br>
+
+    So we beat on, boats against the current, borne back ceaselessly into the
+    past.
+  </n-scrollbar>
+</template>

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

@@ -7,6 +7,7 @@
 ```demo
 basic.vue
 x.vue
+trigger.vue
 ```
 
 ## API

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

@@ -0,0 +1,27 @@
+<markdown>
+# 触发方式
+
+你可以设定不同的触发方式，`trigger="none"` 会让滚动条一直显示，`trigger="hover"` 会让滚动条在鼠标悬浮的时候显示。
+</markdown>
+
+<template>
+  <n-scrollbar style="max-height: 120px" trigger="none">
+    我们在田野上面找猪<br>
+    想象中已找到了三只<br>
+    小鸟在白云上面追逐<br>
+    它们在树底下跳舞<br>
+    啦啦啦啦啦啦啦啦咧<br>
+    啦啦啦啦咧<br>
+    我们在想象中度过了许多年<br>
+    想象中我们是如此的疯狂<br>
+    我们在城市里面找猪<br>
+    想象中已找到了几百万只<br>
+    小鸟在公园里面唱歌<br>
+    它们独自在想象里跳舞<br>
+    啦啦啦啦啦啦啦啦咧<br>
+    啦啦啦啦咧<br>
+    我们在想象中度过了许多年<br>
+    许多年之后我们又开始想象<br>
+    啦啦啦啦啦啦啦啦咧
+  </n-scrollbar>
+</template>

src/scrollbar/index.ts

@@ -1,2 +1,2 @@
-export { default as NScrollbar } from './src/ScrollBar'
-export type { ScrollbarInst, ScrollbarProps } from './src/ScrollBar'
+export { default as NScrollbar } from './src/Scrollbar'
+export type { ScrollbarInst, ScrollbarProps } from './src/Scrollbar'