refactor(components): [scrollbar] use type-based definitions (#23427)

* refactor(components): [scrollbar] use type-based definitions

* refactor(components): [scrollbar] use type-based definitions

* refactor: update

* Update packages/components/scrollbar/src/scrollbar.ts

---------

Co-authored-by: rzzf <cszhjh@gmail.com>

packages/components/scrollbar/src/bar.ts

@@ -1,8 +1,16 @@
 import { buildProps } from '@element-plus/utils'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 import type Bar from './bar.vue'
 
+export interface BarProps {
+  always?: boolean
+  minSize: number
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `BarProps` instead.
+ */
 export const barProps = buildProps({
   always: {
     type: Boolean,
@@ -13,7 +21,7 @@ export const barProps = buildProps({
     required: true,
   },
 } as const)
-export type BarProps = ExtractPropTypes<typeof barProps>
+
 export type BarPropsPublic = ExtractPublicPropTypes<typeof barProps>
 
 export type BarInstance = InstanceType<typeof Bar> & unknown

packages/components/scrollbar/src/bar.vue

@@ -13,10 +13,13 @@
 import { inject, ref } from 'vue'
 import { GAP } from './util'
 import Thumb from './thumb.vue'
-import { barProps } from './bar'
 import { scrollbarContextKey } from './constants'
 
-const props = defineProps(barProps)
+import type { BarProps } from './bar'
+
+const props = withDefaults(defineProps<BarProps>(), {
+  always: true,
+})
 
 const scrollbar = inject(scrollbarContextKey)
 

packages/components/scrollbar/src/scrollbar.ts

@@ -1,9 +1,93 @@
 import { buildProps, definePropType, isNumber } from '@element-plus/utils'
 import { useAriaProps } from '@element-plus/hooks'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes, StyleValue } from 'vue'
+import type { ExtractPublicPropTypes, StyleValue } from 'vue'
 import type Scrollbar from './scrollbar.vue'
 
+export interface ScrollbarProps {
+  /**
+   * @description trigger distance(px)
+   * @default 0
+   */
+  distance?: number
+  /**
+   * @description height of scrollbar
+   * @default ''
+   */
+  height?: number | string
+  /**
+   * @description max height of scrollbar
+   * @default ''
+   */
+  maxHeight?: number | string
+  /**
+   * @description whether to use the native scrollbar
+   */
+  native?: boolean
+  /**
+   * @description style of wrap
+   * @default ''
+   */
+  wrapStyle?: StyleValue
+  /**
+   * @description class of wrap
+   * @default ''
+   */
+  wrapClass?: string | string[]
+  /**
+   * @description class of view
+   * @default ''
+   */
+  viewClass?: string | string[]
+  /**
+   * @description style of view
+   * @default ''
+   */
+  viewStyle?: StyleValue
+  /**
+   * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance
+   */
+  noresize?: boolean
+  /**
+   * @description element tag of the view
+   * @default 'div'
+   */
+  tag?: keyof HTMLElementTagNameMap | (string & {})
+  /**
+   * @description always show
+   */
+  always?: boolean
+  /**
+   * @description minimum size of scrollbar
+   * @default 20
+   */
+  minSize?: number
+  /**
+   * @description Wrap tabindex
+   * @default undefined
+   */
+  tabindex?: number | string
+  /**
+   * @description id of view
+   */
+  id?: string
+  /**
+   * @description role of view
+   */
+  role?: string
+  /**
+   * @description native `aria-label` attribute
+   */
+  ariaLabel?: string
+  /**
+   * @description native `aria-orientation` attribute
+   */
+  ariaOrientation?: 'horizontal' | 'vertical' | 'undefined'
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.
+ */
 export const scrollbarProps = buildProps({
   /**
    * @description trigger distance(px)
@@ -97,7 +181,6 @@ export const scrollbarProps = buildProps({
   role: String,
   ...useAriaProps(['ariaLabel', 'ariaOrientation']),
 } as const)
-export type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>
 export type ScrollbarPropsPublic = ExtractPublicPropTypes<typeof scrollbarProps>
 
 export const scrollbarEmits = {

packages/components/scrollbar/src/scrollbar.vue

@@ -43,9 +43,9 @@ import { addUnit, debugWarn, isNumber, isObject } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import Bar from './bar.vue'
 import { scrollbarContextKey } from './constants'
-import { scrollbarEmits, scrollbarProps } from './scrollbar'
+import { scrollbarEmits } from './scrollbar'
 
-import type { ScrollbarDirection } from './scrollbar'
+import type { ScrollbarDirection, ScrollbarProps } from './scrollbar'
 import type { BarInstance } from './bar'
 import type { CSSProperties, StyleValue } from 'vue'
 
@@ -55,7 +55,18 @@ defineOptions({
   name: COMPONENT_NAME,
 })
 
-const props = defineProps(scrollbarProps)
+const props = withDefaults(defineProps<ScrollbarProps>(), {
+  distance: 0,
+  height: '',
+  maxHeight: '',
+  wrapStyle: '',
+  wrapClass: '',
+  viewStyle: '',
+  viewClass: '',
+  tag: 'div',
+  minSize: 20,
+  tabindex: undefined,
+})
 const emit = defineEmits(scrollbarEmits)
 
 const ns = useNamespace('scrollbar')

packages/components/scrollbar/src/thumb.ts

@@ -1,8 +1,19 @@
 import { buildProps } from '@element-plus/utils'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 import type Thumb from './thumb.vue'
 
+export interface ThumbProps {
+  vertical?: boolean
+  size?: string
+  move?: number
+  ratio: number
+  always?: boolean
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `ThumbProps` instead.
+ */
 export const thumbProps = buildProps({
   vertical: Boolean,
   size: String,
@@ -13,7 +24,6 @@ export const thumbProps = buildProps({
   },
   always: Boolean,
 } as const)
-export type ThumbProps = ExtractPropTypes<typeof thumbProps>
 export type ThumbPropsPublic = ExtractPublicPropTypes<typeof thumbProps>
 
 export type ThumbInstance = InstanceType<typeof Thumb> & unknown

packages/components/scrollbar/src/thumb.vue

@@ -24,10 +24,11 @@ import { isClient, throwError } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import { scrollbarContextKey } from './constants'
 import { BAR_MAP, renderThumbStyle } from './util'
-import { thumbProps } from './thumb'
+
+import type { ThumbProps } from './thumb'
 
 const COMPONENT_NAME = 'Thumb'
-const props = defineProps(thumbProps)
+const props = defineProps<ThumbProps>()
 
 const scrollbar = inject(scrollbarContextKey)
 const ns = useNamespace('scrollbar')