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

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

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

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

packages/components/pagination/src/components/total.ts

@@ -0,0 +1,14 @@
+import { buildProps } from '@element-plus/utils'
+import type Total from './total.vue'
+import type { ExtractPropTypes } from 'vue'
+
+export const paginationTotalProps = buildProps({
+  total: {
+    type: Number,
+    default: 1000,
+  },
+} as const)
+
+export type PaginationTotalProps = ExtractPropTypes<typeof paginationTotalProps>
+
+export type TotalInstance = InstanceType<typeof Total>

packages/components/pagination/src/components/total.vue

@@ -8,34 +8,18 @@
   </span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { usePagination } from '../usePagination'
-import type { ExtractPropTypes } from 'vue'
+import { paginationTotalProps } from './total'
 
-const paginationTotalProps = {
-  total: {
-    type: Number,
-    default: 1000,
-  },
-} as const
-export type PaginationTotalProps = ExtractPropTypes<typeof paginationTotalProps>
+const { t } = useLocale()
+const ns = useNamespace('pagination')
+const { disabled } = usePagination()
 
-export default defineComponent({
+defineOptions({
   name: 'ElPaginationTotal',
-
-  props: paginationTotalProps,
-
-  setup() {
-    const { t } = useLocale()
-    const ns = useNamespace('pagination')
-    const { disabled } = usePagination()
-    return {
-      t,
-      ns,
-      disabled,
-    }
-  },
 })
+
+defineProps(paginationTotalProps)
 </script>