fix: Scrollbar migration to TypeScript (#397)

packages/autocomplete/src/index.vue

@@ -92,7 +92,7 @@ import { generateId, isArray } from '@element-plus/utils/util'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import throwError from '@element-plus/utils/error'
 import ElInput from '@element-plus/input/src/index.vue'
-import ElScrollbar from '@element-plus/scrollbar/src'
+import { ElScrollbar } from '@element-plus/scrollbar'
 import { Popper as ElPopper } from '@element-plus/popper'
 
 export default defineComponent({

packages/scrollbar/__tests__/scrollbar.spec.ts

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

packages/scrollbar/index.ts

@@ -1,5 +1,7 @@
 import { App } from 'vue'
-import Scrollbar from './src/index'
+import Scrollbar from './src/index.vue'
 export default (app: App): void => {
   app.component(Scrollbar.name, Scrollbar)
 }
+
+export const ElScrollbar = Scrollbar

packages/scrollbar/src/index.vue

@@ -1,11 +1,49 @@
-
-import { addResizeListener, removeResizeListener } from '@element-plus/utils/resize-event'
+<template>
+  <div class="el-scrollbar">
+    <div
+      ref="wrap"
+      :class="[
+        wrapClass,
+        'el-scrollbar__wrap',
+        native ? '' : gutter ? '' : 'el-scrollbar__wrap--hidden-default',
+      ]"
+      :style="style"
+      @scroll="handleScroll"
+    >
+      <component
+        :is="tag"
+        ref="resize"
+        :class="['el-scrollbar__view', viewClass]"
+        :style="viewStyle"
+      >
+        <slot></slot>
+      </component>
+    </div>
+    <template v-if="!native">
+      <bar :move="moveX" :size="sizeWidth" />
+      <bar vertical :move="moveY" :size="sizeHeight" />
+    </template>
+  </div>
+</template>
+<script lang='ts'>
+import {
+  addResizeListener,
+  removeResizeListener,
+} from '@element-plus/utils/resize-event'
 import scrollbarWidth from '@element-plus/utils/scrollbar-width'
 import { toObject } from '@element-plus/utils/util'
-import { h, ref, onMounted, onBeforeUnmount, nextTick, provide } from 'vue'
+import {
+  defineComponent,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  provide,
+  computed,
+} from 'vue'
 import Bar from './bar'
 
-export default {
+export default defineComponent({
   name: 'ElScrollbar',
 
   components: { Bar },
@@ -38,7 +76,7 @@ export default {
     },
   },
 
-  setup(props, ctx) {
+  setup(props) {
     const sizeWidth = ref('0')
     const sizeHeight = ref('0')
     const moveX = ref(0)
@@ -49,18 +87,22 @@ export default {
     provide('scroll-bar-wrap', wrap)
 
     const handleScroll = () => {
-      moveY.value = ((wrap.value.scrollTop * 100) / wrap.value.clientHeight)
-      moveX.value = ((wrap.value.scrollLeft * 100) / wrap.value.clientWidth)
+      if (!props.native) {
+        moveY.value = (wrap.value.scrollTop * 100) / wrap.value.clientHeight
+        moveX.value = (wrap.value.scrollLeft * 100) / wrap.value.clientWidth
+      }
     }
 
     const update = () => {
       if (!wrap.value) return
 
-      const heightPercentage = (wrap.value.clientHeight * 100 / wrap.value.scrollHeight)
-      const widthPercentage = (wrap.value.clientWidth * 100 / wrap.value.scrollWidth)
+      const heightPercentage =
+        (wrap.value.clientHeight * 100) / wrap.value.scrollHeight
+      const widthPercentage =
+        (wrap.value.clientWidth * 100) / wrap.value.scrollWidth
 
-      sizeHeight.value = (heightPercentage < 100) ? (heightPercentage + '%') : ''
-      sizeWidth.value = (widthPercentage < 100) ? (widthPercentage + '%') : ''
+      sizeHeight.value = heightPercentage < 100 ? heightPercentage + '%' : ''
+      sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : ''
     }
 
     onMounted(() => {
@@ -73,14 +115,15 @@ export default {
       if (props.native) return
       !props.noresize && removeResizeListener(resize.value, update)
     })
-
-    return () => {
+    const gutter = computed(() => {
+      return scrollbarWidth()
+    })
+    const style = computed(() => {
       const gutter = scrollbarWidth()
       let style = props.wrapStyle
       if (gutter) {
         const gutterWith = `-${gutter}px`
         const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`
-
         if (Array.isArray(props.wrapStyle)) {
           style = toObject(props.wrapStyle)
           style.marginRight = style.marginBottom = gutterWith
@@ -90,41 +133,20 @@ export default {
           style = gutterStyle
         }
       }
-      const view = h(props.tag, {
-        class: ['el-scrollbar__view', props.viewClass],
-        style: props.viewStyle,
-        ref: resize,
-      }, ctx.slots.default())
-      const _wrap = h('div', {
-        ref: wrap,
-        style,
-        onScroll: handleScroll,
-        class: [props.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'],
-      }, [view])
-
-      let nodes
-
-      if (!props.native) {
-        nodes = [_wrap,h(Bar,{
-          move: moveX.value,
-          size: sizeWidth.value,
-        }),h(Bar,{
-          vertical: true,
-          move: moveY.value,
-          size: sizeHeight.value,
-        }),
-        ]
-      } else {
-        nodes = [
-          h('div',{
-            ref: wrap,
-            class: [props.wrapClass, 'el-scrollbar__wrap'],
-            style,
-          }, [view]),
-        ]
-      }
-
-      return h('div', { class: 'el-scrollbar' }, nodes)
+      return style
+    })
+    return {
+      moveX,
+      moveY,
+      sizeWidth,
+      sizeHeight,
+      style,
+      gutter,
+      wrap,
+      resize,
+      update,
+      handleScroll,
     }
   },
-}
+})
+</script>

packages/select/src/select.vue

@@ -175,7 +175,7 @@ import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
 import ElTag from '@element-plus/tag/src/index.vue'
 import { Popper as ElPopper } from '@element-plus/popper'
-import ElScrollbar from '@element-plus/scrollbar/src/index'
+import { ElScrollbar } from '@element-plus/scrollbar'
 import ClickOutside from '@element-plus/directives/click-outside'
 import { addResizeListener, removeResizeListener } from '@element-plus/utils/resize-event'
 import { t } from '@element-plus/locale'

packages/time-picker/src/time-picker-com/basic-time-spinner.vue

@@ -64,7 +64,7 @@ import {
 } from 'vue'
 import { Dayjs } from 'dayjs'
 import { RepeatClick } from '@element-plus/directives'
-import ElScrollbar from '@element-plus/scrollbar/src'
+import { ElScrollbar } from '@element-plus/scrollbar'
 import { getTimeLists } from './useTimePicker'
 
 export default defineComponent({