From a8a2298a6dbc6710759b6cb4dc32939ac2e89b87 Mon Sep 17 00:00:00 2001
From: yang <30883395+webvs2@users.noreply.github.com>
Date: Fri, 21 Jun 2024 11:29:51 +0800
Subject: [PATCH] feat(pagination) : add  `size` prop (#16858)

* fix(components): [table]

closed #11023

* fix(components): add component prop 'size' and related style supplement

BREAKING CHANGE :
size

closed #16830

* Update component documentation

* Update documentation and tests

* Optimized using useFormSize

* Keep the 'small' api for now

* Eliminate unwanted code

* Eliminate the impact of errors

* Remove 'ref'

* Update docs/examples/pagination/more-elements.vue

Co-authored-by: qiang <qw13131wang@gmail.com>

* Modify documents and declarations

* Eliminate uselessness

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

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* Update docs/en-US/component/pagination.md

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

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

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* Adjust public access

* pass Lint

* Modify attribute acquisition

* change the source of 'size'

* remove `pagination-font-size-large`

* Lift response

* Update packages/theme-chalk/src/common/var.scss

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* Update pagination.ts

* Update docs/examples/pagination/more-elements.vue

---------

Co-authored-by: yang <29636098325@qq.com>
Co-authored-by: qiang <qw13131wang@gmail.com>
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
Co-authored-by: btea <2356281422@qq.com>
---
 docs/en-US/component/pagination.md            |  5 +--
 docs/examples/pagination/more-elements.vue    | 20 ++++++------
 docs/examples/pagination/small-pagination.vue |  4 +--
 .../pagination/__tests__/pagination.test.tsx  |  2 +-
 .../components/pagination/src/pagination.ts   | 32 ++++++++++++++-----
 packages/theme-chalk/src/common/var.scss      |  2 ++
 packages/theme-chalk/src/pagination.scss      | 13 ++++++++
 7 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/docs/en-US/component/pagination.md b/docs/en-US/component/pagination.md
index e2f092b1f5..8964ff908c 100644
--- a/docs/en-US/component/pagination.md
+++ b/docs/en-US/component/pagination.md
@@ -35,7 +35,7 @@ pagination/background-color
 
 Use small pagination in the case of limited space.
 
-:::demo Just set the `small` attribute to `true` and the Pagination becomes smaller.
+:::demo set size to change the `size`. Here is a demonstration of `small`
 
 pagination/small-pagination
 
@@ -67,7 +67,8 @@ pagination/more-elements
 
 | Name                                | Description                                                                                                                     | Type                                                                              | Default                              |
 | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------ |
-| small                               | whether to use small pagination                                                                                                 | ^[boolean]                                                                        | false                                |
+| small ^(deprecated)                 | whether to use small pagination                                                                                                 | ^[boolean]                                                                        | false                                |
+| size ^(2.7.6)                       | pagination size                                                                                                                 | ^[enum]`'large'\| 'default'\| 'small'`                                            | 'default'                            |
 | background                          | whether the buttons have a background color                                                                                     | ^[boolean]                                                                        | false                                |
 | page-size / v-model:page-size       | item count of each page                                                                                                         | ^[number]                                                                         | —                                    |
 | default-page-size                   | default initial value of page size, not setting is the same as setting 10                                                       | ^[number]                                                                         | —                                    |
diff --git a/docs/examples/pagination/more-elements.vue b/docs/examples/pagination/more-elements.vue
index ffcc97b00f..e4a8638fd5 100644
--- a/docs/examples/pagination/more-elements.vue
+++ b/docs/examples/pagination/more-elements.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="flex items-center mb-4">
-    <el-radio-group v-model="small" class="mr-4">
-      <el-radio-button :value="false">default</el-radio-button>
-      <el-radio-button :value="true">small</el-radio-button>
+    <el-radio-group v-model="size" class="mr-4">
+      <el-radio-button value="default">default</el-radio-button>
+      <el-radio-button value="large">large</el-radio-button>
+
+      <el-radio-button value="small">small</el-radio-button>
     </el-radio-group>
     <div>
       background:
@@ -20,7 +22,7 @@
     <el-pagination
       v-model:current-page="currentPage1"
       :page-size="100"
-      :small="small"
+      :size="size"
       :disabled="disabled"
       :background="background"
       layout="total, prev, pager, next"
@@ -35,7 +37,7 @@
       v-model:current-page="currentPage2"
       v-model:page-size="pageSize2"
       :page-sizes="[100, 200, 300, 400]"
-      :small="small"
+      :size="size"
       :disabled="disabled"
       :background="background"
       layout="sizes, prev, pager, next"
@@ -49,7 +51,7 @@
     <el-pagination
       v-model:current-page="currentPage3"
       v-model:page-size="pageSize3"
-      :small="small"
+      :size="size"
       :disabled="disabled"
       :background="background"
       layout="prev, pager, next, jumper"
@@ -64,7 +66,7 @@
       v-model:current-page="currentPage4"
       v-model:page-size="pageSize4"
       :page-sizes="[100, 200, 300, 400]"
-      :small="small"
+      :size="size"
       :disabled="disabled"
       :background="background"
       layout="total, sizes, prev, pager, next, jumper"
@@ -76,7 +78,7 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
-
+import type { ComponentSize } from 'element-plus'
 const currentPage1 = ref(5)
 const currentPage2 = ref(5)
 const currentPage3 = ref(5)
@@ -84,7 +86,7 @@ const currentPage4 = ref(4)
 const pageSize2 = ref(100)
 const pageSize3 = ref(100)
 const pageSize4 = ref(100)
-const small = ref(false)
+const size = ref<ComponentSize>('default')
 const background = ref(false)
 const disabled = ref(false)
 
diff --git a/docs/examples/pagination/small-pagination.vue b/docs/examples/pagination/small-pagination.vue
index 530d418c1f..9fa8c3de0c 100644
--- a/docs/examples/pagination/small-pagination.vue
+++ b/docs/examples/pagination/small-pagination.vue
@@ -1,7 +1,7 @@
 <template>
-  <el-pagination small layout="prev, pager, next" :total="50" />
+  <el-pagination size="small" layout="prev, pager, next" :total="50" />
   <el-pagination
-    small
+    size="small"
     background
     layout="prev, pager, next"
     :total="50"
diff --git a/packages/components/pagination/__tests__/pagination.test.tsx b/packages/components/pagination/__tests__/pagination.test.tsx
index efcdd78c13..e42c5c0c65 100644
--- a/packages/components/pagination/__tests__/pagination.test.tsx
+++ b/packages/components/pagination/__tests__/pagination.test.tsx
@@ -141,7 +141,7 @@ describe('Pagination', () => {
 
     test('test small layout', () => {
       const wrapper = mount(() => (
-        <Pagination total={100} small={true}></Pagination>
+        <Pagination total={100} size="small"></Pagination>
       ))
 
       expect(wrapper.vm.$el.classList.contains('el-pagination--small')).toBe(
diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts
index 84452f2071..f8035dd8f3 100644
--- a/packages/components/pagination/src/pagination.ts
+++ b/packages/components/pagination/src/pagination.ts
@@ -16,7 +16,12 @@ import {
   isNumber,
   mutable,
 } from '@element-plus/utils'
-import { useLocale, useNamespace } from '@element-plus/hooks'
+import {
+  useDeprecated,
+  useLocale,
+  useNamespace,
+  useSizeProp,
+} from '@element-plus/hooks'
 import { elPaginationKey } from './constants'
 
 import Prev from './components/prev.vue'
@@ -25,9 +30,7 @@ import Sizes from './components/sizes.vue'
 import Jumper from './components/jumper.vue'
 import Total from './components/total.vue'
 import Pager from './components/pager.vue'
-
 import type { ExtractPropTypes, VNode } from 'vue'
-
 /**
  * It it user's responsibility to guarantee that the value of props.total... is number
  * (same as pageSize, defaultPageSize, currentPage, defaultCurrentPage, pageCount)
@@ -148,6 +151,10 @@ export const paginationProps = buildProps({
    * @description whether to use small pagination
    */
   small: Boolean,
+  /**
+   * @description set page size
+   */
+  size: useSizeProp,
   /**
    * @description whether the buttons have a background color
    */
@@ -186,6 +193,17 @@ export default defineComponent({
     const { t } = useLocale()
     const ns = useNamespace('pagination')
     const vnodeProps = getCurrentInstance()!.vnode.props || {}
+    const _size = computed(() => (props.small ? 'small' : props?.size))
+    useDeprecated(
+      {
+        from: 'small',
+        replacement: 'size',
+        version: '3.0.0',
+        scope: 'el-pagination',
+        ref: 'https://element-plus.org/zh-CN/component/pagination.html',
+      },
+      computed(() => !!props.small)
+    )
     // we can find @xxx="xxx" props on `vnodeProps` to check if user bind corresponding events
     const hasCurrentPageListener =
       'onUpdate:currentPage' in vnodeProps ||
@@ -364,7 +382,7 @@ export default defineComponent({
           onClick: prev,
         }),
         jumper: h(Jumper, {
-          size: props.small ? 'small' : 'default',
+          size: _size.value,
         }),
         pager: h(Pager, {
           currentPage: currentPageBridge.value,
@@ -387,7 +405,7 @@ export default defineComponent({
           popperClass: props.popperClass,
           disabled: props.disabled,
           teleported: props.teleported,
-          size: props.small ? 'small' : 'default',
+          size: _size.value,
         }),
         slot: slots?.default?.() ?? null,
         total: h(Total, { total: isAbsent(props.total) ? 0 : props.total }),
@@ -428,9 +446,7 @@ export default defineComponent({
           class: [
             ns.b(),
             ns.is('background', props.background),
-            {
-              [ns.m('small')]: props.small,
-            },
+            ns.m(_size.value),
           ],
         },
         rootChildren
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 7ed86aae76..13cdcf9d82 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -923,6 +923,8 @@ $pagination: map.merge(
     'font-size-small': 12px,
     'button-width-small': 24px,
     'button-height-small': 24px,
+    'button-width-large': 40px,
+    'button-height-large': 40px,
     'item-gap': 16px,
   ),
   $pagination
diff --git a/packages/theme-chalk/src/pagination.scss b/packages/theme-chalk/src/pagination.scss
index 6e658e3f45..42702cb163 100644
--- a/packages/theme-chalk/src/pagination.scss
+++ b/packages/theme-chalk/src/pagination.scss
@@ -208,6 +208,19 @@
       width: 100px;
     }
   }
+  @include m(large) {
+    .btn-prev,
+    .btn-next,
+    .#{$namespace}-pager li {
+      height: getCssVar('pagination-button-height-large');
+      line-height: getCssVar('pagination-button-height-large');
+      min-width: getCssVar('pagination-button-width-large');
+    }
+
+    .#{$namespace}-select .#{$namespace}-input {
+      width: 160px;
+    }
+  }
 }
 
 @include b(pager) {