feat(comp:pagination): add large size and update style

packages/components/alert/__tests__/alert.spec.ts

@@ -93,19 +93,20 @@ describe('Alert', () => {
     await wrapper.setProps({ pagination: true })
 
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
-    expect(wrapper.findAll('button')[0].classes()).toContain('ix-button-disabled')
-    expect(wrapper.findAll('button')[1].classes()).not.toContain('ix-button-disabled')
+    expect(wrapper.findAll('.ix-pagination-item')[0].classes()).toContain('ix-pagination-item-disabled')
+    expect(wrapper.findAll('.ix-pagination-item')[1].classes()).not.toContain('ix-pagination-item-disabled')
+    expect(wrapper.findAll('.ix-pagination-item')[2].classes()).not.toContain('ix-pagination-item-disabled')
 
     await wrapper.trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
 
-    await wrapper.findAll('button')[1].trigger('click')
+    await wrapper.findAll('.ix-pagination-item')[2].trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message2')
 
-    await wrapper.findAll('button')[1].trigger('click')
+    await wrapper.findAll('.ix-pagination-item')[2].trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message2')
 
-    await wrapper.findAll('button')[0].trigger('click')
+    await wrapper.findAll('.ix-pagination-item')[0].trigger('click')
     expect(wrapper.find('.ix-alert-content').text()).toBe('message1')
 
     const onChange = vi.fn()
@@ -118,7 +119,7 @@ describe('Alert', () => {
     })
     expect(wrapper.find('.ix-alert-content').text()).toBe('message2')
 
-    await wrapper.findAll('button')[0].trigger('click')
+    await wrapper.findAll('.ix-pagination-item')[0].trigger('click')
     expect(onChange).toBeCalledWith(1)
   })
 })

packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap

@@ -3,52 +3,51 @@
 exports[`Pagination > render work 1`] = `
 "<ul class=\\"ix-pagination ix-pagination-md\\">
   <li class=\\"ix-pagination-total\\">共 50 项</li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-active\\" title=\\"1\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>1</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"2\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>2</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"3\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>3</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"4\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>4</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"5\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>5</span></button></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page ix-pagination-item-active\\" tabindex=\\"0\\" title=\\"1\\"><span class=\\"ix-pagination-item-content\\">1</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"2\\"><span class=\\"ix-pagination-item-content\\">2</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"3\\"><span class=\\"ix-pagination-item-content\\">3</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"4\\"><span class=\\"ix-pagination-item-content\\">4</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"5\\"><span class=\\"ix-pagination-item-content\\">5</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
 </ul>"
 `;
 
 exports[`Pagination > render work 2`] = `
 "<ul class=\\"ix-pagination ix-pagination-simple ix-pagination-md\\">
   <li class=\\"ix-pagination-total\\">共 50 项</li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
   <li class=\\"ix-pagination-item\\">1<span class=\\"ix-pagination-item-slash\\">/</span><span>5</span></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
 </ul>"
 `;
 
 exports[`Pagination > render work 3`] = `
 "<ul class=\\"ix-pagination ix-pagination-md\\">
   <li class=\\"ix-pagination-total\\">共 500 项</li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" disabled=\\"\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></button></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-active\\" title=\\"1\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>1</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"2\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>2</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"3\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>3</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"4\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>4</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"5\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>5</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"向后 5 页\\"><span class=\\"ix-pagination-item-jumper\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-double-right\\" role=\\"img\\" aria-label=\\"double-right\\"></i></button><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm ix-pagination-item-ellipsis\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-ellipsis\\" role=\\"img\\" aria-label=\\"ellipsis\\"></i></button></span></li>
-  <li class=\\"ix-pagination-item\\" title=\\"50\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>50</span></button></li>
-  <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
-  <li class=\\"ix-pagination-sizes\\">每页<div class=\\"ix-pagination-sizes-select-wrapper\\">
-      <div class=\\"ix-select ix-selector ix-selector-sm ix-selector-single\\">
-        <!---->
-        <div class=\\"ix-selector-content\\">
-          <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">10</span>
-            <!---->
-          </div>
-          <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
-            <!---->
-          </div>
-          <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
+  <li class=\\"ix-pagination-item ix-pagination-item-prev ix-pagination-item-disabled\\" tabindex=\\"-1\\" title=\\"上一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-left\\" role=\\"img\\" aria-label=\\"left\\"></i></span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page ix-pagination-item-active\\" tabindex=\\"0\\" title=\\"1\\"><span class=\\"ix-pagination-item-content\\">1</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"2\\"><span class=\\"ix-pagination-item-content\\">2</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"3\\"><span class=\\"ix-pagination-item-content\\">3</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"4\\"><span class=\\"ix-pagination-item-content\\">4</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"5\\"><span class=\\"ix-pagination-item-content\\">5</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-next5\\" tabindex=\\"0\\" title=\\"向后 5 页\\"><span class=\\"ix-pagination-item-content\\"><span class=\\" ix-pagination-item-jumper\\"><i class=\\"ix-icon ix-icon-double-right\\" role=\\"img\\" aria-label=\\"double-right\\"></i><i class=\\"ix-icon ix-icon-ellipsis ix-pagination-item-ellipsis\\" role=\\"img\\" aria-label=\\"ellipsis\\"></i></span></span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-page\\" tabindex=\\"0\\" title=\\"50\\"><span class=\\"ix-pagination-item-content\\">50</span></li>
+  <li class=\\"ix-pagination-item ix-pagination-item-next\\" tabindex=\\"0\\" title=\\"下一页\\"><span class=\\"ix-pagination-item-content\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></span></li>
+  <li class=\\"ix-pagination-sizes\\">每页<div class=\\"ix-select ix-selector ix-selector-sm ix-selector-single\\">
+      <!---->
+      <div class=\\"ix-selector-content\\">
+        <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">10</span>
+          <!---->
+        </div>
+        <div class=\\"ix-selector-input\\"><input class=\\"ix-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\" readonly=\\"\\">
+          <!---->
         </div>
+        <div class=\\"ix-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
       </div>
-      <!---->
-    </div>项</li>
+    </div>
+    <!---->项
+  </li>
   <li class=\\"ix-pagination-jumper\\">前往<input class=\\"ix-input ix-input-sm\\">页</li>
 </ul>"
 `;

packages/components/pagination/demo/Basic.vue

@@ -1,9 +1,9 @@
 <template>
-  <IxPagination :total="50" />
-  <br />
-  <IxPagination :pageIndex="pageIndex" disabled :total="500" />
-  <br />
-  <IxPagination v-model:pageIndex="pageIndex" :total="500" />
+  <IxSpace vertical block>
+    <IxPagination :total="500" />
+    <IxPagination :pageIndex="pageIndex" disabled :total="500" />
+    <IxPagination v-model:pageIndex="pageIndex" :total="500" />
+  </IxSpace>
 </template>
 
 <script setup lang="ts">

packages/components/pagination/demo/Size.md

@@ -1,14 +1,14 @@
 ---
 title:
-  zh: 迷你版本
-  en: Small size
+  zh: 尺寸
+  en: Size
 order: 3
 ---
 
 ## zh
 
-通过设置 `size="sm"` 可以使用迷你版本。
+分页器共有 3 种尺寸：小、中、大，默认为中。
 
 ## en
 
-The mini version can be used by setting `size="sm"`.
+There are three sizes of pagination: small, medium, and large. The default is medium.

packages/components/pagination/demo/Size.vue

@@ -1,5 +1,7 @@
 <template>
-  <IxPagination :total="500" size="sm" />
-  <br />
-  <IxPagination :total="500" size="sm" showQuickJumper showSizeChanger />
+  <IxSpace vertical block>
+    <IxPagination :total="500" size="sm" showQuickJumper showSizeChanger />
+    <IxPagination :total="500" size="md" showQuickJumper showSizeChanger />
+    <IxPagination :total="500" size="lg" showQuickJumper showSizeChanger />
+  </IxSpace>
 </template>

packages/components/pagination/demo/SizeChanger.vue

@@ -1,7 +1,9 @@
 <template>
-  <IxPagination showSizeChanger :total="500" />
-  <br />
-  <IxPagination v-model:pageSize="pageSize" :pageSizes="[10, 20, 30, 40]" showSizeChanger :total="500" />
+  <IxSpace vertical block>
+    <IxPagination showSizeChanger :total="500" />
+
+    <IxPagination v-model:pageSize="pageSize" :pageSizes="[10, 20, 30, 40]" showSizeChanger :total="500" />
+  </IxSpace>
 </template>
 
 <script setup lang="ts">

packages/components/pagination/demo/Total.vue

@@ -1,9 +1,10 @@
 <template>
-  <IxPagination :total="500" :showTotal="false" />
-  <br />
-  <IxPagination :total="500">
-    <template #total="{ total, range, prefix, suffix }">
-      <span> {{ range[0] }}-{{ range[1] }} {{ prefix }} {{ total }} {{ suffix }}</span>
-    </template>
-  </IxPagination>
+  <IxSpace vertical block>
+    <IxPagination :total="500" :showTotal="false" />
+    <IxPagination :total="500">
+      <template #total="{ total, range, prefix, suffix }">
+        <span> {{ range[0] }}-{{ range[1] }} {{ prefix }} {{ total }} {{ suffix }}</span>
+      </template>
+    </IxPagination>
+  </IxSpace>
 </template>

packages/components/pagination/docs/Index.zh.md

@@ -4,5 +4,6 @@ type: 导航
 order: 0
 title: Pagination
 subtitle: 分页
+theme: true
 ---
 

packages/components/pagination/docs/Theme.zh.md

@@ -1,24 +1,20 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@pagination-font-size-md` | `@font-size-md` | `@font-size-sm` | - |
-| `@pagination-font-size-sm` | `@font-size-sm` | - | - |
-| `@pagination-item-icon-font-size` | `@font-size-sm` | - | - |
-| `@pagination-item-size-md` | `32px` | - | - |
-| `@pagination-item-size-sm` | `24px` | - | - |
-| `@pagination-item-padding-md` | `4px` | - | - |
+| `@pagination-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - |
+| `@pagination-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
+| `@pagination-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
 | `@pagination-item-padding-sm` | `0` | - | - |
-| `@pagination-item-input-width-md` | `48px` | - | - |
-| `@pagination-item-input-width-sm` | `40px` | - | - |
-| `@pagination-item-active-color` | `@color-white` | `@color-primary` | - |
-| `@pagination-item-active-background-color` | `@color-primary` | `@color-primary-l50` | - |
-| `@pagination-item-color` | `@color-graphite-d40` | - | - |
-| `@pagination-item-background-color` | `tint(@color-primary, 90%)` | - | - |
-| `@pagination-item-hover-color` | `@color-graphite-d40` | - | - |
-| `@pagination-item-hover-background-color` | `tint(@color-primary, 90%)` | `@color-graphite-l50` | - |
-| `@pagination-item-disabled-color` | `@text-color-disabled` | - | - |
-| `@pagination-item-disabled-background-color` | `@background-color-disabled` | - | - |
-| `@pagination-item-button-hover-color` | `@color-graphite-d20` | - | - |
-| `@pagination-item-button-active-color` | `@color-graphite-d20` | - | - |
-| `@pagination-item-button-hover-background-color` | `@color-graphite-l50` | - | - |
-| `@pagination-total-color` | `@color-graphite-d10` | - | - |
-| `@pagination-sizes-color` | `@color-graphite-d10` | - | - |
+| `@pagination-item-padding-md` | `var(--ix-spacing-xs)` | - | - |
+| `@pagination-item-padding-lg` | `var(--ix-spacing-xs)` | - | - |
+| `@pagination-item-content-size-sm` | `24px` | - | - |
+| `@pagination-item-content-size-md` | `24px` | - | - |
+| `@pagination-item-content-size-lg` | `32px` | - | - |
+| `@pagination-item-content-border-radius` | `50%` | - | - |
+| `@pagination-item-content-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
+| `@pagination-color-hover` | `var(--ix-text-color)` | `var(--ix-color-primary)` | - |
+| `@pagination-color-active` | `var(--ix-text-color-inverse)` | `var(--ix-color-primary)` | - |
+| `@pagination-color-disabled` | `var(--ix-text-color-disabled)` | `var(--ix-text-color-disabled)` | - |
+| `@pagination-background-color-hover` | `var(--ix-background-color-deep)` | `var(--ix-background-color-light)` | - |
+| `@pagination-background-color-active` | `var(--ix-color-primary)` | `var(--ix-color-primary-l50)` | - |
+| `@pagination-background-color-disabled` | `var(--ix-background-color-deep)` | `var(--ix-background-color-deep)` | - |
+| `@pagination-outline-color` | `var(--ix-color-primary-l10)` | - | - |

packages/components/pagination/src/Pagination.tsx

@@ -31,7 +31,7 @@ export default defineComponent({
 
     const showTotal = computed(() => props.showTotal ?? config.showTotal)
     const simple = computed(() => props.simple ?? config.simple)
-    const size = computed(() => props.size ?? config.size)
+    const mergedSize = computed(() => props.size ?? config.size)
     const showQuickJumper = computed(() => props.showQuickJumper ?? config.showQuickJumper)
     const showSizeChanger = computed(() => props.showSizeChanger ?? config.showSizeChanger)
 
@@ -45,6 +45,7 @@ export default defineComponent({
       config,
       locale,
       mergedPrefixCls,
+      mergedSize,
       activeIndex,
       activeSize,
       lastIndex,
@@ -59,7 +60,7 @@ export default defineComponent({
         [prefixCls]: true,
         [`${prefixCls}-disabled`]: props.disabled,
         [`${prefixCls}-simple`]: simple.value,
-        [`${prefixCls}-${size.value}`]: true,
+        [`${prefixCls}-${mergedSize.value}`]: true,
       })
     })
 
@@ -75,7 +76,12 @@ export default defineComponent({
         children.push(
           <li class={`${prefixCls}-item`}>
             {showQuickJumper.value ? (
-              <ɵInput disabled={props.disabled} size="sm" value={_activeIndex.toString()} onKeydown={jumpToIndex} />
+              <ɵInput
+                disabled={props.disabled}
+                size={mergedSize.value === 'lg' ? 'md' : 'sm'}
+                value={_activeIndex.toString()}
+                onKeydown={jumpToIndex}
+              />
             ) : (
               _activeIndex
             )}