From 1c20ad25b175f8c8ce2fe1c7a8fb1ba9ce366bbe Mon Sep 17 00:00:00 2001 From: qiang Date: Wed, 7 Dec 2022 20:08:15 +0800 Subject: [PATCH] docs(components): [pagination] format the Type value (#10894) * docs(components): [pagination] format the Type value closed #10192 * docs(components): [pagination] format the Type value --- docs/en-US/component/pagination.md | 58 ++++++++-------- .../components/pagination/src/pagination.ts | 69 +++++++++++++++++-- 2 files changed, 91 insertions(+), 36 deletions(-) diff --git a/docs/en-US/component/pagination.md b/docs/en-US/component/pagination.md index 831dee7088..a10c29c386 100644 --- a/docs/en-US/component/pagination.md +++ b/docs/en-US/component/pagination.md @@ -63,26 +63,26 @@ pagination/more-elements ## Attributes -| Name | Description | Type | Accepted Values | Default | -| -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------ | -------------------------------------- | -| small | whether to use small pagination | boolean | — | false | -| background | whether the buttons have a background color | boolean | — | false | -| page-size | item count of each page, supports the v-model bidirectional binding | number | — | 10 | -| default-page-size | default initial value of page size | number | - | - | -| total | total item count | number | — | — | -| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | number | — | — | -| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | number | (odd number between 5 and 21) | 7 | -| current-page | current page number, supports the v-model bidirectional binding | number | — | 1 | -| default-current-page | default initial value of current-page | number | - | - | -| layout | layout of Pagination, elements separated with a comma | string | `sizes` / `prev` / `pager` / `next` / `jumper` / `->` / `total` / `slot` | 'prev, pager, next, jumper, ->, total' | -| page-sizes | options of item count per page | number[] | — | [10, 20, 30, 40, 50, 100] | -| popper-class | custom class name for the page size Select's dropdown | string | — | — | -| prev-text | text for the prev button | string | — | — | -| prev-icon | icon for the prev button, higher priority of `prev-text` | `string \| Component` | — | ArrowLeft | -| next-text | text for the next button | string | — | — | -| next-icon | icon for the next button, higher priority of `next-text` | `string \| Component` | — | ArrowRight | -| disabled | whether Pagination is disabled | boolean | — | false | -| hide-on-single-page | whether to hide when there's only one page | boolean | — | - | +| Name | Description | Type | Default | +| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------ | +| small | whether to use small pagination | ^[boolean] | false | +| background | whether the buttons have a background color | ^[boolean] | false | +| page-size / v-model:page-size | item count of each page | ^[number] | 10 | +| default-page-size | default initial value of page size | ^[number] | - | +| total | total item count | ^[number] | — | +| page-count | total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required | ^[number] | — | +| pager-count | number of pagers. Pagination collapses when the total page count exceeds this value | ^[number]`5 \| 7 \| 9 \| 11 \| 13 \| 15 \| 17 \| 19 \| 21` | 7 | +| current-page / v-model:current-page | current page number | ^[number] | 1 | +| default-current-page | default initial value of current-page | ^[number] | - | +| layout | layout of Pagination, elements separated with a comma | ^[string]`string (consists of sizes, prev, pager, next, jumper, ->, total, slot)` | prev, pager, next, jumper, ->, total | +| page-sizes | options of item count per page | ^[array]`number[]` | [10, 20, 30, 40, 50, 100] | +| popper-class | custom class name for the page size Select's dropdown | ^[string] | — | +| prev-text | text for the prev button | ^[string] | — | +| prev-icon | icon for the prev button, higher priority of `prev-text` | ^[string] / ^[Component] | ArrowLeft | +| next-text | text for the next button | ^[string] | — | +| next-icon | icon for the next button, higher priority of `next-text` | ^[string] / ^[Component] | ArrowRight | +| disabled | whether Pagination is disabled | ^[boolean] | false | +| hide-on-single-page | whether to hide when there's only one page | ^[boolean] | - | :::warning @@ -96,12 +96,12 @@ We'll detect some deprecated usages, if your pagination don't appeared or worked ## Events -| Name | Description | Parameters | -| -------------- | ----------------------------------------------------------------- | -------------------- | -| size-change | triggers when `page-size` changes | the new page size | -| current-change | triggers when `current-page` changes | the new current page | -| prev-click | triggers when the prev button is clicked and current page changes | the new current page | -| next-click | triggers when the next button is clicked and current page changes | the new current page | +| Name | Description | Type | +| -------------- | ----------------------------------------------------------------- | ------------------------------------ | +| size-change | triggers when `page-size` changes | ^[Function]`(value: number) => void` | +| current-change | triggers when `current-page` changes | ^[Function]`(value: number) => void` | +| prev-click | triggers when the prev button is clicked and current page changes | ^[Function]`(value: number) => void` | +| next-click | triggers when the next button is clicked and current page changes | ^[Function]`(value: number) => void` | :::warning @@ -111,6 +111,6 @@ Events above are not recommended(but are still supported for compatible reason), ## Slots -| Name | Description | -| ---- | ------------------------------------------------------------------- | -| — | custom content. To use this, you need to declare `slot` in `layout` | +| Name | Description | +| ------- | ------------------------------------------------------------------- | +| default | custom content. To use this, you need to declare `slot` in `layout` | diff --git a/packages/components/pagination/src/pagination.ts b/packages/components/pagination/src/pagination.ts index ed66a10bd0..0d18f56240 100644 --- a/packages/components/pagination/src/pagination.ts +++ b/packages/components/pagination/src/pagination.ts @@ -13,6 +13,7 @@ import { debugWarn, definePropType, iconPropType, + isNumber, mutable, } from '@element-plus/utils' import { useLocale, useNamespace } from '@element-plus/hooks' @@ -45,17 +46,38 @@ type LayoutKey = | 'slot' export const paginationProps = buildProps({ + /** + * @description total item count + */ total: Number, + /** + * @description options of item count per page + */ pageSize: Number, + /** + * @description default initial value of page size + */ defaultPageSize: Number, + /** + * @description current page number + */ currentPage: Number, + /** + * @description default initial value of current-page + */ defaultCurrentPage: Number, + /** + * @description total page count. Set either `total` or `page-count` and pages will be displayed; if you need `page-sizes`, `total` is required + */ pageCount: Number, + /** + * @description number of pagers. Pagination collapses when the total page count exceeds this value + */ pagerCount: { type: Number, validator: (value: unknown) => { return ( - typeof value === 'number' && + isNumber(value) && Math.trunc(value) === value && value > 4 && value < 22 && @@ -64,50 +86,83 @@ export const paginationProps = buildProps({ }, default: 7, }, + /** + * @description layout of Pagination, elements separated with a comma + */ layout: { type: String, default: ( ['prev', 'pager', 'next', 'jumper', '->', 'total'] as LayoutKey[] ).join(', '), }, + /** + * @description item count of each page + */ pageSizes: { type: definePropType(Array), default: () => mutable([10, 20, 30, 40, 50, 100] as const), }, + /** + * @description custom class name for the page size Select's dropdown + */ popperClass: { type: String, default: '', }, + /** + * @description text for the prev button + */ prevText: { type: String, default: '', }, + /** + * @description icon for the prev button, higher priority of `prev-text` + */ prevIcon: { type: iconPropType, default: () => ArrowLeft, }, + /** + * @description text for the next button + */ nextText: { type: String, default: '', }, + /** + * @description icon for the next button, higher priority of `next-text` + */ nextIcon: { type: iconPropType, default: () => ArrowRight, }, + /** + * @description whether to use small pagination + */ small: Boolean, + /** + * @description whether the buttons have a background color + */ background: Boolean, + /** + * @description whether Pagination is disabled + */ disabled: Boolean, + /** + * @description whether to hide when there's only one page + */ hideOnSinglePage: Boolean, } as const) export type PaginationProps = ExtractPropTypes export const paginationEmits = { - 'update:current-page': (val: number) => typeof val === 'number', - 'update:page-size': (val: number) => typeof val === 'number', - 'size-change': (val: number) => typeof val === 'number', - 'current-change': (val: number) => typeof val === 'number', - 'prev-click': (val: number) => typeof val === 'number', - 'next-click': (val: number) => typeof val === 'number', + 'update:current-page': (val: number) => isNumber(val), + 'update:page-size': (val: number) => isNumber(val), + 'size-change': (val: number) => isNumber(val), + 'current-change': (val: number) => isNumber(val), + 'prev-click': (val: number) => isNumber(val), + 'next-click': (val: number) => isNumber(val), } export type PaginationEmits = typeof paginationEmits