refactor(components): [pagination/sizes] switch to script-setup syntax (#7749)

* refactor(components): [pagination/sizes] switch to script-setup syntax

* fix(components): [pagination/sizes] cast props to const

* fix(components): [pagination/sizes] remove prop default

Co-authored-by: metanas <matanas@pre-history.com>

packages/components/pagination/__tests__/pagination.test.ts

@@ -15,12 +15,12 @@ const assertElementsExistence = (
   })
 }
 
-const assertCurrent = (wrapper, page) => {
+const assertCurrent = (wrapper: VueWrapper<any>, page: number) => {
   expect(wrapper.find('.el-pager li.is-active.number').text()).toBe(
     String(page)
   )
 }
-const assertPages = (wrapper, total) => {
+const assertPages = (wrapper: VueWrapper<any>, total: number) => {
   expect(wrapper.find('.el-pagination .el-pager li:last-child').text()).toBe(
     String(total)
   )
@@ -37,7 +37,7 @@ describe('Pagination', () => {
     })
     test('both absence of total & pageCount is invalid', async () => {
       expect(console.warn).not.toHaveBeenCalled()
-      const total = ref(undefined)
+      const total = ref<number | undefined>(undefined)
       const wrapper = mount({
         setup() {
           return () => {

packages/components/pagination/src/components/sizes.ts

@@ -0,0 +1,26 @@
+import { buildProps, definePropType, mutable } from '@element-plus/utils'
+import type { ExtractPropTypes } from 'vue'
+import type Sizes from './sizes.vue'
+
+export const paginationSizesProps = buildProps({
+  pageSize: {
+    type: Number,
+    required: true,
+  },
+  pageSizes: {
+    type: definePropType<number[]>(Array),
+    default: () => mutable([10, 20, 30, 40, 50, 100] as const),
+  },
+  popperClass: {
+    type: String,
+  },
+  disabled: Boolean,
+  size: {
+    type: String,
+    default: 'default',
+  },
+} as const)
+
+export type PaginationSizesProps = ExtractPropTypes<typeof paginationSizesProps>
+
+export type SizesInstance = InstanceType<typeof Sizes>

packages/components/pagination/src/components/sizes.vue

@@ -17,90 +17,50 @@
   </span>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
 import { isEqual } from 'lodash-unified'
 import { ElOption, ElSelect } from '@element-plus/components/select'
 import { useLocale, useNamespace } from '@element-plus/hooks'
-import { buildProps, definePropType, mutable } from '@element-plus/utils'
 import { usePagination } from '../usePagination'
+import { paginationSizesProps } from './sizes'
 
-import type { Nullable } from '@element-plus/utils'
-
-const paginationSizesProps = buildProps({
-  pageSize: {
-    type: Number,
-    required: true,
-  },
-  pageSizes: {
-    type: definePropType<number[]>(Array),
-    default: () => mutable([10, 20, 30, 40, 50, 100] as const),
-  },
-  popperClass: {
-    type: String,
-    default: '',
-  },
-  disabled: Boolean,
-  size: {
-    type: String,
-    default: 'default',
-  },
-} as const)
-
-export default defineComponent({
+defineOptions({
   name: 'ElPaginationSizes',
-
-  components: {
-    ElSelect,
-    ElOption,
-  },
-
-  props: paginationSizesProps,
-  emits: ['page-size-change'],
-
-  setup(props, { emit }) {
-    const { t } = useLocale()
-    const ns = useNamespace('pagination')
-    const pagination = usePagination()
-    const innerPageSize = ref<Nullable<number>>(props.pageSize)
-
-    watch(
-      () => props.pageSizes,
-      (newVal, oldVal) => {
-        if (isEqual(newVal, oldVal)) return
-        if (Array.isArray(newVal)) {
-          const pageSize = newVal.includes(props.pageSize)
-            ? props.pageSize
-            : props.pageSizes[0]
-          emit('page-size-change', pageSize)
-        }
-      }
-    )
-
-    watch(
-      () => props.pageSize,
-      (newVal) => {
-        innerPageSize.value = newVal
-      }
-    )
-
-    const innerPageSizes = computed(() => props.pageSizes)
-
-    function handleChange(val: number) {
-      if (val !== innerPageSize.value) {
-        innerPageSize.value = val
-        pagination.handleSizeChange?.(Number(val))
-      }
-    }
-
-    return {
-      ns,
-      innerPageSizes,
-      innerPageSize,
-
-      t,
-      handleChange,
-    }
-  },
 })
+
+const props = defineProps(paginationSizesProps)
+const emit = defineEmits(['page-size-change'])
+const { t } = useLocale()
+const ns = useNamespace('pagination')
+const pagination = usePagination()
+const innerPageSize = ref<number>(props.pageSize!)
+
+watch(
+  () => props.pageSizes,
+  (newVal, oldVal) => {
+    if (isEqual(newVal, oldVal)) return
+    if (Array.isArray(newVal)) {
+      const pageSize = newVal.includes(props.pageSize!)
+        ? props.pageSize
+        : props.pageSizes[0]
+      emit('page-size-change', pageSize)
+    }
+  }
+)
+
+watch(
+  () => props.pageSize,
+  (newVal) => {
+    innerPageSize.value = newVal!
+  }
+)
+
+const innerPageSizes = computed(() => props.pageSizes)
+function handleChange(val: number) {
+  if (val !== innerPageSize.value) {
+    innerPageSize.value = val
+    pagination.handleSizeChange?.(Number(val))
+  }
+}
 </script>