refactor(components): [pagination] use useNamespace (#5725)

packages/components/pagination/src/components/jumper.vue

@@ -1,9 +1,9 @@
 <template>
-  <span class="el-pagination__jump" :disabled="disabled">
+  <span :class="ns.e('jump')" :disabled="disabled">
     {{ t('el.pagination.goto') }}
     <el-input
       size="small"
-      class="el-pagination__editor is-in-pagination"
+      :class="[ns.e('editor'), ns.is('in-pagination')]"
       :min="1"
       :max="pageCount"
       :disabled="disabled"
@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
-import { useLocale } from '@element-plus/hooks'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 import ElInput from '@element-plus/components/input'
 import { usePagination } from '../usePagination'
 
@@ -30,6 +30,7 @@ export default defineComponent({
 
   setup() {
     const { t } = useLocale()
+    const ns = useNamespace('pagination')
     const { pageCount, disabled, currentPage, changeEvent } = usePagination()
     const userInput = ref<number>()
     const innerValue = computed(() => userInput.value ?? currentPage?.value)
@@ -45,6 +46,7 @@ export default defineComponent({
     }
 
     return {
+      ns,
       pageCount,
       disabled,
       innerValue,

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

@@ -1,5 +1,5 @@
 <template>
-  <ul class="el-pager" @click="onPagerClick" @keyup.enter="onEnter">
+  <ul :class="nsPager.b()" @click="onPagerClick" @keyup.enter="onEnter">
     <li
       v-if="pageCount > 0"
       :class="{ active: currentPage === 1, disabled }"
@@ -11,8 +11,7 @@
     </li>
     <li
       v-if="showPrevMore"
-      class="el-icon more btn-quickprev"
-      :class="{ disabled }"
+      :class="['more', 'btn-quickprev', nsIcon.b(), { disabled }]"
       @mouseenter="onMouseenter('left')"
       @mouseleave="quickPrevHover = false"
     >
@@ -31,8 +30,7 @@
     </li>
     <li
       v-if="showNextMore"
-      class="el-icon more btn-quicknext"
-      :class="{ disabled }"
+      :class="['more', 'btn-quicknext', nsIcon.b(), { disabled }]"
       @mouseenter="onMouseenter('right')"
       @mouseleave="quickNextHover = false"
     >
@@ -53,6 +51,7 @@
 <script lang="ts">
 import { defineComponent, ref, computed, watchEffect } from 'vue'
 import { MoreFilled, DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
+import { useNamespace } from '@element-plus/hooks'
 
 const paginationPagerProps = {
   currentPage: {
@@ -82,6 +81,9 @@ export default defineComponent({
   emits: ['change'],
 
   setup(props, { emit }) {
+    const nsPager = useNamespace('pager')
+    const nsIcon = useNamespace('icon')
+
     const showPrevMore = ref(false)
     const showNextMore = ref(false)
     const quickPrevHover = ref(false)
@@ -201,6 +203,8 @@ export default defineComponent({
       quickPrevHover,
       quickNextHover,
       pagers,
+      nsPager,
+      nsIcon,
 
       onMouseenter,
       onPagerClick,

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

@@ -1,5 +1,5 @@
 <template>
-  <span class="el-pagination__sizes">
+  <span :class="ns.e('sizes')">
     <el-select
       :model-value="innerPageSize"
       :disabled="disabled"
@@ -21,8 +21,8 @@
 import { defineComponent, watch, computed, ref } from 'vue'
 import { isEqual } from 'lodash-unified'
 import { ElSelect, ElOption } from '@element-plus/components/select'
-import { useLocale } from '@element-plus/hooks'
 import { buildProps, definePropType, mutable } from '@element-plus/utils-v2'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 import { usePagination } from '../usePagination'
 
 import type { Nullable } from '@element-plus/utils/types'
@@ -60,6 +60,7 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const { t } = useLocale()
+    const ns = useNamespace('pagination')
     const pagination = usePagination()
     const innerPageSize = ref<Nullable<number>>(props.pageSize)
 
@@ -94,6 +95,7 @@ export default defineComponent({
     }
 
     return {
+      ns,
       innerPagesizes,
       innerPageSize,
 

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

@@ -1,5 +1,5 @@
 <template>
-  <span class="el-pagination__total" :disabled="disabled">
+  <span :class="ns.e('total')" :disabled="disabled">
     {{
       t('el.pagination.total', {
         total,
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { useLocale } from '@element-plus/hooks'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 import { usePagination } from '../usePagination'
 import type { ExtractPropTypes } from 'vue'
 
@@ -29,9 +29,11 @@ export default defineComponent({
 
   setup() {
     const { t } = useLocale()
+    const ns = useNamespace('pagination')
     const { disabled } = usePagination()
     return {
       t,
+      ns,
       disabled,
     }
   },

packages/components/pagination/src/pagination.ts

@@ -7,13 +7,13 @@ import {
   getCurrentInstance,
   watch,
 } from 'vue'
-import { useLocale } from '@element-plus/hooks'
 import {
   debugWarn,
   buildProps,
   definePropType,
   mutable,
 } from '@element-plus/utils-v2'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 import { elPaginationKey } from '@element-plus/tokens'
 
 import Prev from './components/prev.vue'
@@ -110,6 +110,7 @@ export default defineComponent({
 
   setup(props, { emit, slots }) {
     const { t } = useLocale()
+    const ns = useNamespace('pagination')
     const vnodeProps = getCurrentInstance()!.vnode.props || {}
     // we can find @xxx="xxx" props on `vnodeProps` to check if user bind corresponding events
     const hasCurrentPageListener =
@@ -266,7 +267,7 @@ export default defineComponent({
       const rightWrapperChildren: Array<VNode | VNode[] | null> = []
       const rightWrapperRoot = h(
         'div',
-        { class: 'el-pagination__rightwrapper' },
+        { class: ns.e('rightwrapper') },
         rightWrapperChildren
       )
       const TEMPLATE_MAP: Record<
@@ -323,14 +324,14 @@ export default defineComponent({
         }
       })
 
-      addClass(rootChildren[0], 'is-first')
-      addClass(rootChildren[rootChildren.length - 1], 'is-last')
+      addClass(rootChildren[0], ns.is('first'))
+      addClass(rootChildren[rootChildren.length - 1], ns.is('last'))
 
       if (haveRightWrapper && rightWrapperChildren.length > 0) {
-        addClass(rightWrapperChildren[0], 'is-first')
+        addClass(rightWrapperChildren[0], ns.is('first'))
         addClass(
           rightWrapperChildren[rightWrapperChildren.length - 1],
-          'is-last'
+          ns.is('last')
         )
         rootChildren.push(rightWrapperRoot)
       }
@@ -340,10 +341,10 @@ export default defineComponent({
           role: 'pagination',
           'aria-label': 'pagination',
           class: [
-            'el-pagination',
+            ns.b(),
+            ns.is('background', props.background),
             {
-              'is-background': props.background,
-              'el-pagination--small': props.small,
+              [ns.m('small')]: props.small,
             },
           ],
         },