refactor(components): refactor scrollbar

packages/components/scrollbar/__tests__/scrollbar.spec.ts

@@ -1,7 +1,7 @@
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { defineGetter, makeScroll } from '@element-plus/test-utils'
-import Scrollbar from '../src/index.vue'
+import Scrollbar from '../src/scrollbar.vue'
 
 const _mount = (template: string) =>
   mount({

packages/components/scrollbar/index.ts

@@ -1,15 +1,14 @@
-import Scrollbar from './src/index.vue'
+import { withInstall, withNoopInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import Scrollbar from './src/scrollbar.vue'
+import Bar from './src/bar.vue'
 
-Scrollbar.install = (app: App): void => {
-  app.component(Scrollbar.name, Scrollbar)
-}
-
-const _Scrollbar = Scrollbar as SFCWithInstall<typeof Scrollbar>
-
-export default _Scrollbar
-export const ElScrollbar = _Scrollbar
+export const ElScrollbar = withInstall(Scrollbar, {
+  Bar,
+})
+export default ElScrollbar
+export const ElBar = withNoopInstall(Bar)
 
 export * from './src/util'
+export * from './src/scrollbar'
+export * from './src/bar'

packages/components/scrollbar/src/bar.ts

@@ -0,0 +1,11 @@
+import { buildProps } from '@element-plus/utils/props'
+import type { ExtractPropTypes } from 'vue'
+
+export const barProps = buildProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: Number,
+  always: Boolean,
+} as const)
+export type BarProps = ExtractPropTypes<typeof barProps>

packages/components/scrollbar/src/bar.vue

@@ -28,18 +28,13 @@ import {
 import { off, on } from '@element-plus/utils/dom'
 import { BAR_MAP, renderThumbStyle } from './util'
 
+import { barProps } from './bar'
 import type { Ref } from 'vue'
 import type { Nullable } from '@element-plus/utils/types'
 
 export default defineComponent({
   name: 'Bar',
-  props: {
-    vertical: Boolean,
-    size: String,
-    move: Number,
-    ratio: Number,
-    always: Boolean,
-  },
+  props: barProps,
   setup(props) {
     const instance = ref(null)
     const thumb = ref(null)

packages/components/scrollbar/src/scrollbar.ts

@@ -0,0 +1,60 @@
+import { buildProps, definePropType } from '@element-plus/utils/props'
+import { isNumber } from '@element-plus/utils/util'
+import type { CSSProperties, ExtractPropTypes } from 'vue'
+
+export const scrollbarProps = buildProps({
+  height: {
+    type: [String, Number],
+    default: '',
+  },
+  maxHeight: {
+    type: [String, Number],
+    default: '',
+  },
+  native: {
+    type: Boolean,
+    default: false,
+  },
+  wrapStyle: {
+    type: definePropType<string | CSSProperties[]>([String, Array]),
+    default: '',
+  },
+  wrapClass: {
+    type: [String, Array],
+    default: '',
+  },
+  viewClass: {
+    type: [String, Array],
+    default: '',
+  },
+  viewStyle: {
+    type: [String, Array],
+    default: '',
+  },
+  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  always: {
+    type: Boolean,
+    default: false,
+  },
+  minSize: {
+    type: Number,
+    default: 20,
+  },
+} as const)
+
+export type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>
+
+export const scrollbarEmits = {
+  scroll: ({
+    scrollTop,
+    scrollLeft,
+  }: {
+    scrollTop: number
+    scrollLeft: number
+  }) => isNumber(scrollTop) && isNumber(scrollLeft),
+}
+export type ScrollbarEmits = typeof scrollbarEmits

packages/components/scrollbar/src/scrollbar.vue

@@ -55,62 +55,21 @@ import {
 import { debugWarn } from '@element-plus/utils/error'
 import Bar from './bar.vue'
 
-import type { CSSProperties, PropType } from 'vue'
+import { scrollbarProps, scrollbarEmits } from './scrollbar'
+import type { CSSProperties } from 'vue'
 
 export default defineComponent({
   name: 'ElScrollbar',
   components: { Bar },
-  props: {
-    height: {
-      type: [String, Number],
-      default: '',
-    },
-    maxHeight: {
-      type: [String, Number],
-      default: '',
-    },
-    native: {
-      type: Boolean,
-      default: false,
-    },
-    wrapStyle: {
-      type: [String, Array] as PropType<string | CSSProperties[]>,
-      default: '',
-    },
-    wrapClass: {
-      type: [String, Array],
-      default: '',
-    },
-    viewClass: {
-      type: [String, Array],
-      default: '',
-    },
-    viewStyle: {
-      type: [String, Array],
-      default: '',
-    },
-    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    always: {
-      type: Boolean,
-      default: false,
-    },
-    minSize: {
-      type: Number,
-      default: 20,
-    },
-  },
-  emits: ['scroll'],
+  props: scrollbarProps,
+  emits: scrollbarEmits,
   setup(props, { emit }) {
     const sizeWidth = ref('0')
     const sizeHeight = ref('0')
     const moveX = ref(0)
     const moveY = ref(0)
     const scrollbar = ref(null)
-    const wrap = ref(null)
+    const wrap = ref<HTMLElement>()
     const resize = ref(null)
     const ratioY = ref(1)
     const ratioX = ref(1)
@@ -142,7 +101,7 @@ export default defineComponent({
         debugWarn(SCOPE, 'value must be a number')
         return
       }
-      wrap.value.scrollTop = value
+      wrap.value!.scrollTop = value
     }
 
     const setScrollLeft = (value: number) => {
@@ -150,7 +109,7 @@ export default defineComponent({
         debugWarn(SCOPE, 'value must be a number')
         return
       }
-      wrap.value.scrollLeft = value
+      wrap.value!.scrollLeft = value
     }
 
     const update = () => {
@@ -199,14 +158,14 @@ export default defineComponent({
         nextTick(update)
       }
       if (!props.noresize) {
-        addResizeListener(resize.value, update)
+        addResizeListener(resize.value!, update)
         addEventListener('resize', update)
       }
     })
 
     onBeforeUnmount(() => {
       if (!props.noresize) {
-        removeResizeListener(resize.value, update)
+        removeResizeListener(resize.value!, update)
         removeEventListener('resize', update)
       }
     })