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

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

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

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

packages/components/pagination/src/components/pager.ts

@@ -0,0 +1,23 @@
+import { buildProps } from '@element-plus/utils'
+import type { ExtractPropTypes } from 'vue'
+import type Pager from './pager.vue'
+
+export const paginationPagerProps = buildProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  pageCount: {
+    type: Number,
+    required: true,
+  },
+  pagerCount: {
+    type: Number,
+    default: 7,
+  },
+  disabled: Boolean,
+} as const)
+
+export type PaginationPagerProps = ExtractPropTypes<typeof paginationPagerProps>
+
+export type PagerInstance = InstanceType<typeof Pager>

packages/components/pagination/src/components/pager.vue

@@ -67,53 +67,27 @@
     </li>
   </ul>
 </template>
-<script lang="ts">
-import { computed, defineComponent, ref, watchEffect } from 'vue'
+<script lang="ts" setup>
+import { computed, ref, watchEffect } from 'vue'
 import { DArrowLeft, DArrowRight, MoreFilled } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
-
-const paginationPagerProps = {
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  pageCount: {
-    type: Number,
-    required: true,
-  },
-  pagerCount: {
-    type: Number,
-    default: 7,
-  },
-  disabled: Boolean,
-} as const
-
-export default defineComponent({
+import { paginationPagerProps } from './pager'
+defineOptions({
   name: 'ElPaginationPager',
-
-  components: {
-    DArrowLeft,
-    DArrowRight,
-    MoreFilled,
-  },
-  props: paginationPagerProps,
-  emits: ['change'],
-
-  setup(props, { emit }) {
+})
+const props = defineProps(paginationPagerProps)
+const emit = defineEmits(['change'])
 const nsPager = useNamespace('pager')
 const nsIcon = useNamespace('icon')
-
 const showPrevMore = ref(false)
 const showNextMore = ref(false)
 const quickPrevHover = ref(false)
 const quickNextHover = ref(false)
-
 const pagers = computed(() => {
   const pagerCount = props.pagerCount
   const halfPagerCount = (pagerCount - 1) / 2
   const currentPage = Number(props.currentPage)
   const pageCount = Number(props.pageCount)
-
   let showPrevMore = false
   let showNextMore = false
   if (pageCount > pagerCount) {
@@ -144,26 +118,21 @@ export default defineComponent({
       array.push(i)
     }
   }
-
   return array
 })
-
 watchEffect(() => {
   const halfPagerCount = (props.pagerCount - 1) / 2
-
   showPrevMore.value = false
   showNextMore.value = false
-
-      if (props.pageCount > props.pagerCount) {
+  if (props.pageCount! > props.pagerCount) {
     if (props.currentPage > props.pagerCount - halfPagerCount) {
       showPrevMore.value = true
     }
-        if (props.currentPage < props.pageCount - halfPagerCount) {
+    if (props.currentPage < props.pageCount! - halfPagerCount) {
       showNextMore.value = true
     }
   }
 })
-
 function onMouseenter(direction: 'left' | 'right') {
   if (props.disabled) return
   if (direction === 'left') {
@@ -172,7 +141,6 @@ export default defineComponent({
     quickNextHover.value = true
   }
 }
-
 function onEnter(e: UIEvent) {
   const target = e.target as HTMLElement
   if (
@@ -185,15 +153,13 @@ export default defineComponent({
     }
   }
 }
-
 function onPagerClick(event: UIEvent) {
   const target = event.target as HTMLElement
   if (target.tagName.toLowerCase() === 'ul' || props.disabled) {
     return
   }
-
   let newPage = Number(target.textContent)
-      const pageCount = props.pageCount
+  const pageCount = props.pageCount!
   const currentPage = props.currentPage
   const pagerCountOffset = props.pagerCount - 2
   if (target.className.includes('more')) {
@@ -215,20 +181,4 @@ export default defineComponent({
     emit('change', newPage)
   }
 }
-
-    return {
-      showPrevMore,
-      showNextMore,
-      quickPrevHover,
-      quickNextHover,
-      pagers,
-      nsPager,
-      nsIcon,
-
-      onMouseenter,
-      onPagerClick,
-      onEnter,
-    }
-  },
-})
 </script>