feat(comp:pagination): remove itemRender and totalRender (#695)

BREAKING CHANGE: itemRender and totalRender have been removed

re #658

packages/components/config/src/defaultConfig.ts

@@ -98,7 +98,6 @@ const menu: MenuConfig = {
 }
 
 const pagination: PaginationConfig = {
-  lessJumper: false,
   pageSize: 10,
   pageSizes: [10, 20, 50, 100],
   showQuickJumper: false,

packages/components/config/src/types.ts

@@ -20,7 +20,7 @@ import type { MenuTheme } from '@idux/components/menu'
 import type { MessageType } from '@idux/components/message'
 import type { ModalType } from '@idux/components/modal'
 import type { NotificationPlacement, NotificationType } from '@idux/components/notification'
-import type { PaginationItemRenderFn, PaginationSize, PaginationTotalRenderFn } from '@idux/components/pagination'
+import type { PaginationSize } from '@idux/components/pagination'
 import type { ProgressFormat, ProgressSize } from '@idux/components/progress'
 import type { ResultStatus } from '@idux/components/result'
 import type { SpaceSize } from '@idux/components/space'
@@ -84,8 +84,6 @@ export interface MenuConfig {
 }
 
 export interface PaginationConfig {
-  itemRender?: PaginationItemRenderFn
-  lessJumper: boolean
   pageSize: number
   pageSizes: number[]
   showQuickJumper: boolean
@@ -94,7 +92,6 @@ export interface PaginationConfig {
   showTotal: boolean
   simple: boolean
   size: PaginationSize
-  totalRender?: PaginationTotalRenderFn
 }
 
 // Data Entry

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

@@ -1,16 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Pagination render work 1`] = `
-"<ul class=\\"ix-pagination ix-pagination-medium\\">
+"<ul class=\\"ix-pagination ix-pagination-md\\">
   <li class=\\"ix-pagination-total\\">共 50 条</li>
-  <li class=\\"ix-pagination-item\\" title=\\"上一页\\"><button class=\\"ix-button ix-button-disabled ix-button-icon-only ix-button-text ix-button-small ix-button-circle\\" 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-small ix-button-circle\\" type=\\"button\\"><span>1</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"2\\"><button class=\\"ix-button ix-button-text ix-button-small ix-button-circle\\" type=\\"button\\"><span>2</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"3\\"><button class=\\"ix-button ix-button-text ix-button-small ix-button-circle\\" type=\\"button\\"><span>3</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"4\\"><button class=\\"ix-button ix-button-text ix-button-small ix-button-circle\\" type=\\"button\\"><span>4</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"5\\"><button class=\\"ix-button ix-button-text ix-button-small ix-button-circle\\" type=\\"button\\"><span>5</span></button></li>
-  <li class=\\"ix-pagination-item\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-small ix-button-circle\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
-  <!---->
-  <!---->
+  <li class=\\"ix-pagination-item\\" 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=\\"下一页\\"><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>
+</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\\" 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\\"><input class=\\"ix-input ix-input-md\\"><span class=\\"ix-pagination-item-slash\\">/</span><span>5</span></li>
+  <li class=\\"ix-pagination-item\\" 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-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></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\\" 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\\" 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-select ix-select-single ix-select-with-suffix ix-select-md\\">
+      <!---->
+      <div class=\\"ix-select-selector\\">
+        <div class=\\"ix-select-selector-item\\"><span class=\\"ix-select-selector-item-label\\">10 条/页</span>
+          <!---->
+        </div>
+        <div class=\\"ix-select-selector-input\\"><input class=\\"ix-select-selector-input-inner\\" style=\\"opacity: 0;\\" autocomplete=\\"off\\">
+          <!---->
+        </div>
+        <!---->
+        <div class=\\"ix-select-selector-suffix\\"><i class=\\"ix-icon ix-icon-down\\" role=\\"img\\" aria-label=\\"down\\"></i></div>
+        <!---->
+      </div>
+    </div>
+    <!---->
+  </li>
+  <li class=\\"ix-pagination-jumper\\">前往<input class=\\"ix-input ix-input-md\\">页</li>
 </ul>"
 `;

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

@@ -1,19 +1,20 @@
-import { MountingOptions, flushPromises, mount } from '@vue/test-utils'
+import { MountingOptions, mount } from '@vue/test-utils'
 import { h } from 'vue'
 
 import { renderWork } from '@tests'
 
-import { IxButton } from '@idux/components/button'
-
 import IxPagination from '../src/Pagination'
-import Sizes from '../src/Sizes'
-import { PaginationItemRenderOptions, PaginationProps } from '../src/types'
+import { PaginationProps } from '../src/types'
 
-describe.skip('Pagination', () => {
+describe('Pagination', () => {
   const PaginationMount = (options?: MountingOptions<Partial<PaginationProps>>) => mount(IxPagination, { ...options })
 
   renderWork<PaginationProps>(IxPagination, { props: { total: 50 } })
 
+  renderWork<PaginationProps>(IxPagination, { props: { simple: true, total: 50 } })
+
+  renderWork<PaginationProps>(IxPagination, { props: { total: 500, showQuickJumper: true, showSizeChanger: true } })
+
   test('v-model:pageIndex work', async () => {
     const onUpdatePageIndex = jest.fn()
     const wrapper = PaginationMount({ props: { total: 50, pageIndex: 1, 'onUpdate:pageIndex': onUpdatePageIndex } })
@@ -23,7 +24,6 @@ describe.skip('Pagination', () => {
     const items = wrapper.findAll('.ix-pagination-item')
     await items[4].trigger('click')
 
-    expect(wrapper.find('.ix-pagination-item-active').text()).toEqual('4')
     expect(onUpdatePageIndex).toBeCalledWith(4)
 
     await wrapper.setProps({ pageIndex: 3 })
@@ -33,10 +33,10 @@ describe.skip('Pagination', () => {
     // max index is: 50 / 10 = 5
     await wrapper.setProps({ pageIndex: 6 })
 
-    expect(wrapper.find('.ix-pagination-item-active').text()).toEqual('5')
+    expect(onUpdatePageIndex).toBeCalledWith(5)
   })
 
-  test('v-model:pageSize and showSizeChanger work', async () => {
+  test('v-model:pageSize work', async () => {
     const onUpdatePageSize = jest.fn()
     const wrapper = PaginationMount({
       props: { total: 50, pageSize: 10, showSizeChanger: true, 'onUpdate:pageSize': onUpdatePageSize },
@@ -52,16 +52,13 @@ describe.skip('Pagination', () => {
 
     expect(wrapper.findAll('.ix-pagination-item').length).toEqual(5)
 
-    wrapper.findComponent(Sizes).vm.onPageSizeChange(50)
-    await flushPromises()
-
-    expect(wrapper.findAll('.ix-pagination-item').length).toEqual(3)
-    expect(onUpdatePageSize).toBeCalledWith(50)
+    // TODO: change size
+    //  expect(onUpdatePageSize).toBeCalledWith(50)
   })
 
   test('disabled work', async () => {
     const wrapper = PaginationMount({
-      props: { pageIndex: 3, total: 50, showQuickJumper: true, showSizeChanger: true, disabled: true },
+      props: { total: 50, showQuickJumper: true, showSizeChanger: true, disabled: true },
     })
 
     wrapper.findAll('.ix-button').forEach(item => {
@@ -71,17 +68,19 @@ describe.skip('Pagination', () => {
     expect(wrapper.find('.ix-select').classes()).toContain('ix-select-disabled')
 
     await wrapper.find('.ix-pagination-item').trigger('click')
-    expect(wrapper.find('.ix-pagination-item-active').text()).toEqual('3')
+    expect(wrapper.find('.ix-pagination-item-active').text()).toEqual('1')
 
     await wrapper.setProps({ disabled: false })
 
-    wrapper.findAll('.ix-button').forEach(item => {
-      expect(item.classes()).not.toContain('ix-button-disabled')
+    wrapper.findAll('.ix-button').forEach((item, index) => {
+      if (index !== 0) {
+        expect(item.classes()).not.toContain('ix-button-disabled')
+      }
     })
     expect(wrapper.find('.ix-input').classes()).not.toContain('ix-input-disabled')
     expect(wrapper.find('.ix-select').classes()).not.toContain('ix-select-disabled')
 
-    await wrapper.find('.ix-pagination-item').trigger('click')
+    await wrapper.findAll('.ix-pagination-item')[2].trigger('click')
     expect(wrapper.find('.ix-pagination-item-active').text()).toEqual('2')
   })
 
@@ -91,8 +90,8 @@ describe.skip('Pagination', () => {
     expect(wrapper.find('.ix-pagination-jumper').exists()).toBeTruthy()
     expect(wrapper.find('.ix-pagination-item-active').text()).toEqual('1')
 
-    await wrapper.find('.ix-input-inner').setValue('3')
-    await wrapper.find('.ix-input-inner').trigger('keydown', { key: 'enter' })
+    await wrapper.find('.ix-input').setValue('3')
+    await wrapper.find('.ix-input').trigger('keydown', { key: 'enter' })
 
     expect(wrapper.find('.ix-pagination-item-active').text()).toEqual('3')
   })
@@ -127,18 +126,18 @@ describe.skip('Pagination', () => {
 
     expect(wrapper.find('.ix-pagination-item-slash').exists()).toBeTruthy()
 
-    await wrapper.find('.ix-input-inner').setValue('3')
-    await wrapper.find('.ix-input-inner').trigger('keydown', { key: 'enter' })
+    await wrapper.find('.ix-input').setValue('3')
+    await wrapper.find('.ix-input').trigger('keydown', { key: 'enter' })
 
     expect(onUpdatePageIndex).toBeCalledWith(3)
 
-    await wrapper.find('.ix-input-inner').setValue('6')
-    await wrapper.find('.ix-input-inner').trigger('keydown', { key: 'enter' })
+    await wrapper.find('.ix-input').setValue('6')
+    await wrapper.find('.ix-input').trigger('keydown', { key: 'enter' })
 
     expect(onUpdatePageIndex).toBeCalledWith(5)
 
-    await wrapper.find('.ix-input-inner').setValue('asdasd')
-    await wrapper.find('.ix-input-inner').trigger('keydown', { key: 'enter' })
+    await wrapper.find('.ix-input').setValue('asdasd')
+    await wrapper.find('.ix-input').trigger('keydown', { key: 'enter' })
 
     expect(onUpdatePageIndex).toBeCalledWith(5)
 
@@ -157,7 +156,7 @@ describe.skip('Pagination', () => {
 
     expect(wrapper.find('.ix-pagination-sm').exists()).toBeTruthy()
 
-    await wrapper.setProps({ size: undefined })
+    await wrapper.setProps({ size: 'md' })
 
     expect(wrapper.find('.ix-pagination-md').exists()).toBeTruthy()
   })
@@ -188,24 +187,6 @@ describe.skip('Pagination', () => {
     expect(wrapper.findAll('.ix-pagination-item').length).toEqual(9)
   })
 
-  test('itemRender work', async () => {
-    const itemRender = (options: PaginationItemRenderOptions) => {
-      const { type, original } = options
-      if (type === 'prev' || type === 'next') {
-        const text = type === 'prev' ? 'Previous' : 'Next'
-        return h(IxButton, { mode: 'text', size: 'sm' }, { default: () => text })
-      }
-      return original
-    }
-
-    const wrapper = PaginationMount({ props: { total: 50, itemRender } })
-
-    const items = wrapper.findAll('.ix-pagination-item')
-
-    expect(items[0].text()).toEqual('Previous')
-    expect(items[items.length - 1].text()).toEqual('Next')
-  })
-
   test('item slot work', async () => {
     const wrapper = PaginationMount({
       props: { total: 50 },
@@ -228,18 +209,7 @@ describe.skip('Pagination', () => {
     expect(items[items.length - 1].text()).toEqual('Next')
   })
 
-  test('totalRender work', async () => {
-    const totalRender = (options: { total: number; range: [number, number] }) => {
-      const { total, range } = options
-      return `${range[0]}-${range[1]} of ${total} items`
-    }
-
-    const wrapper = PaginationMount({ props: { total: 50, totalRender } })
-
-    expect(wrapper.find('.ix-pagination-total').text()).toEqual('1-10 of 50 items')
-  })
-
-  test('item slot work', async () => {
+  test('total slot work', async () => {
     const wrapper = PaginationMount({
       props: { total: 50 },
       slots: {

packages/components/pagination/demo/Basic.vue

@@ -1,7 +1,13 @@
 <template>
-  <IxPagination :pageIndex="1" :total="50" />
+  <IxPagination :total="50" />
   <br />
-  <IxPagination disabled :pageIndex="1" :total="50" />
+  <IxPagination :pageIndex="pageIndex" disabled :total="500" />
   <br />
-  <IxPagination :pageIndex="6" :total="500" />
+  <IxPagination v-model:pageIndex="pageIndex" :total="500" />
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const pageIndex = ref(6)
+</script>

packages/components/pagination/demo/Controlled.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 受控的分页器
+  en: Controlled pagination
+order: 7
+---
+
+## zh
+
+通过 `:pageIndex`, `:pageSize` 搭配 `onChange`, 让分页器变得受控。
+
+## en
+
+Make the pager controlled by `:pageIndex`, `:pageSize` and `onChange`.  

packages/components/pagination/demo/Controlled.vue

@@ -0,0 +1,22 @@
+<template>
+  <IxPagination
+    :pageIndex="pageIndex"
+    :pageSize="pageSize"
+    :pageSizes="[10, 20, 40, 80, 160]"
+    showSizeChanger
+    :total="500"
+    @change="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const pageIndex = ref(1)
+const pageSize = ref(20)
+
+const onChange = (index: number, size: number) => {
+  pageIndex.value = index + 1
+  pageSize.value = size * 2
+}
+</script>

packages/components/pagination/demo/Item.md

@@ -7,8 +7,8 @@ order: 6
 
 ## zh
 
-通过设置 `itemRender` 或者插槽 `item` 可以自定义页码的结构。
+通过插槽 `item` 可以自定义页码的结构。
 
 ## en
 
-The structure of the page item can be customized by setting `itemRender` or slot `item`.
+The structure of the page item can be customized by `item` slot.

packages/components/pagination/demo/Item.vue

@@ -1,6 +1,4 @@
 <template>
-  <IxPagination :pageIndex="1" :total="500" :itemRender="itemRender" />
-  <br />
   <IxPagination :pageIndex="1" :total="500">
     <template #item="{ type, original }">
       <IxButton v-if="type === 'prev'" mode="text" size="sm">Previous</IxButton>
@@ -9,24 +7,3 @@
     </template>
   </IxPagination>
 </template>
-
-<script lang="ts">
-import { defineComponent, h } from 'vue'
-
-import { IxButton } from '@idux/components/button'
-import { PaginationItemRenderOptions } from '@idux/components/config'
-
-export default defineComponent({
-  setup() {
-    const itemRender = (options: PaginationItemRenderOptions) => {
-      const { type, original } = options
-      if (type === 'prev' || type === 'next') {
-        const text = type === 'prev' ? 'Previous' : 'Next'
-        return h(IxButton, { mode: 'text', size: 'sm' }, { default: () => text })
-      }
-      return original
-    }
-    return { itemRender }
-  },
-})
-</script>

packages/components/pagination/demo/QuickJumper.vue

@@ -1,3 +1,3 @@
 <template>
-  <IxPagination :pageIndex="1" :total="500" showQuickJumper />
+  <IxPagination :total="500" showQuickJumper />
 </template>

packages/components/pagination/demo/Simple.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxPagination :pageIndex="1" :total="500" simple />
+  <IxPagination :total="500" simple />
   <br />
-  <IxPagination :pageIndex="1" :total="500" simple disabled />
+  <IxPagination :total="500" simple disabled />
 </template>