element-plus
Version:
A Component Library for Vue 3
1 lines • 15 kB
Source Map (JSON)
{"version":3,"file":"pagination.mjs","sources":["../../../../../../packages/components/pagination/src/pagination.ts"],"sourcesContent":["import {\n h,\n ref,\n provide,\n computed,\n defineComponent,\n getCurrentInstance,\n watch,\n} from 'vue'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { elPaginationKey } from '@element-plus/tokens'\n\nimport Prev from './components/prev.vue'\nimport Next from './components/next.vue'\nimport Sizes from './components/sizes.vue'\nimport Jumper from './components/jumper.vue'\nimport Total from './components/total.vue'\nimport Pager from './components/pager.vue'\n\nimport type { VNode, ExtractPropTypes } from 'vue'\n\n/**\n * It it user's responsibility to guarantee that the value of props.total... is number\n * (same as pageSize, defaultPageSize, currentPage, defaultCurrentPage, pageCount)\n * Otherwise we can reasonable infer that the corresponding field is absent\n */\nconst isAbsent = (v: unknown): v is undefined => typeof v !== 'number'\n\ntype LayoutKey =\n | 'prev'\n | 'pager'\n | 'next'\n | 'jumper'\n | '->'\n | 'total'\n | 'sizes'\n | 'slot'\n\nexport const paginationProps = buildProps({\n total: Number,\n pageSize: Number,\n defaultPageSize: Number,\n currentPage: Number,\n defaultCurrentPage: Number,\n pageCount: Number,\n pagerCount: {\n type: Number,\n validator: (value: unknown) => {\n return (\n typeof value === 'number' &&\n (value | 0) === value &&\n value > 4 &&\n value < 22 &&\n value % 2 === 1\n )\n },\n default: 7,\n },\n layout: {\n type: String,\n default: (\n ['prev', 'pager', 'next', 'jumper', '->', 'total'] as LayoutKey[]\n ).join(', '),\n },\n pageSizes: {\n type: definePropType<number[]>(Array),\n default: () => mutable([10, 20, 30, 40, 50, 100] as const),\n },\n popperClass: {\n type: String,\n default: '',\n },\n prevText: {\n type: String,\n default: '',\n },\n nextText: {\n type: String,\n default: '',\n },\n small: Boolean,\n background: Boolean,\n disabled: Boolean,\n hideOnSinglePage: Boolean,\n} as const)\nexport type PaginationProps = ExtractPropTypes<typeof paginationProps>\n\nexport const paginationEmits = {\n 'update:current-page': (val: number) => typeof val === 'number',\n 'update:page-size': (val: number) => typeof val === 'number',\n 'size-change': (val: number) => typeof val === 'number',\n 'current-change': (val: number) => typeof val === 'number',\n 'prev-click': (val: number) => typeof val === 'number',\n 'next-click': (val: number) => typeof val === 'number',\n}\nexport type PaginationEmits = typeof paginationEmits\n\nconst componentName = 'ElPagination'\nexport default defineComponent({\n name: componentName,\n\n props: paginationProps,\n emits: paginationEmits,\n\n setup(props, { emit, slots }) {\n const { t } = useLocaleInject()\n const vnodeProps = getCurrentInstance()!.vnode.props || {}\n // we can find @xxx=\"xxx\" props on `vnodeProps` to check if user bind corresponding events\n const hasCurrentPageListener =\n 'onUpdate:currentPage' in vnodeProps ||\n 'onUpdate:current-page' in vnodeProps ||\n 'onCurrentChange' in vnodeProps\n const hasPageSizeListener =\n 'onUpdate:pageSize' in vnodeProps ||\n 'onUpdate:page-size' in vnodeProps ||\n 'onSizeChange' in vnodeProps\n const assertValidUsage = computed(() => {\n // Users have to set either one, otherwise count of pages cannot be determined\n if (isAbsent(props.total) && isAbsent(props.pageCount)) return false\n // <el-pagination ...otherProps :current-page=\"xxx\" /> without corresponding listener is forbidden now\n // Users have to use two way binding of `currentPage`\n // If users just want to provide a default value, `defaultCurrentPage` is here for you\n if (!isAbsent(props.currentPage) && !hasCurrentPageListener) return false\n // When you want to change sizes, things get more complex, detailed below\n // Basically the most important value we need is page count\n // either directly from props.pageCount\n // or calculated from props.total\n // we will take props.pageCount precedence over props.total\n if (props.layout.includes('sizes')) {\n if (!isAbsent(props.pageCount)) {\n // if props.pageCount is assign by user, then user have to watch pageSize change\n // and recalculate pageCount\n if (!hasPageSizeListener) return false\n } else if (!isAbsent(props.total)) {\n // Otherwise, we will see if user have props.pageSize defined\n // If so, meaning user want to have pageSize controlled himself/herself from component\n // Thus page size listener is required\n // users are account for page size change\n if (!isAbsent(props.pageSize)) {\n if (!hasPageSizeListener) {\n return false\n }\n } else {\n // (else block just for explaination)\n // else page size is controlled by el-pagination internally\n }\n }\n }\n return true\n })\n\n const innerPageSize = ref(\n isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize\n )\n const innerCurrentPage = ref(\n isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage\n )\n\n const pageSizeBridge = computed({\n get() {\n return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize\n },\n set(v: number) {\n if (isAbsent(props.pageSize)) {\n innerPageSize.value = v\n }\n if (hasPageSizeListener) {\n emit('update:page-size', v)\n emit('size-change', v)\n }\n },\n })\n\n const pageCountBridge = computed<number>(() => {\n let pageCount = 0\n if (!isAbsent(props.pageCount)) {\n pageCount = props.pageCount\n } else if (!isAbsent(props.total)) {\n pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value))\n }\n return pageCount\n })\n\n const currentPageBridge = computed<number>({\n get() {\n return isAbsent(props.currentPage)\n ? innerCurrentPage.value\n : props.currentPage\n },\n set(v) {\n let newCurrentPage = v\n if (v < 1) {\n newCurrentPage = 1\n } else if (v > pageCountBridge.value) {\n newCurrentPage = pageCountBridge.value\n }\n if (isAbsent(props.currentPage)) {\n innerCurrentPage.value = newCurrentPage\n }\n if (hasCurrentPageListener) {\n emit('update:current-page', newCurrentPage)\n emit('current-change', newCurrentPage)\n }\n },\n })\n\n watch(pageCountBridge, (val) => {\n if (currentPageBridge.value > val) currentPageBridge.value = val\n })\n\n function handleCurrentChange(val: number) {\n currentPageBridge.value = val\n }\n\n function handleSizeChange(val: number) {\n pageSizeBridge.value = val\n const newPageCount = pageCountBridge.value\n if (currentPageBridge.value > newPageCount) {\n currentPageBridge.value = newPageCount\n }\n }\n\n function prev() {\n if (props.disabled) return\n currentPageBridge.value -= 1\n emit('prev-click', currentPageBridge.value)\n }\n\n function next() {\n if (props.disabled) return\n currentPageBridge.value += 1\n emit('next-click', currentPageBridge.value)\n }\n\n provide(elPaginationKey, {\n pageCount: pageCountBridge,\n disabled: computed(() => props.disabled),\n currentPage: currentPageBridge,\n changeEvent: handleCurrentChange,\n handleSizeChange,\n })\n\n return () => {\n if (!assertValidUsage.value) {\n debugWarn(componentName, t('el.pagination.deprecationWarning'))\n return null\n }\n if (!props.layout) return null\n if (props.hideOnSinglePage && pageCountBridge.value <= 1) return null\n const rootChildren: Array<VNode | VNode[] | null> = []\n const rightWrapperChildren: Array<VNode | VNode[] | null> = []\n const rightWrapperRoot = h(\n 'div',\n { class: 'el-pagination__rightwrapper' },\n rightWrapperChildren\n )\n const TEMPLATE_MAP: Record<\n Exclude<LayoutKey, '->'>,\n VNode | VNode[] | null\n > = {\n prev: h(Prev, {\n disabled: props.disabled,\n currentPage: currentPageBridge.value,\n prevText: props.prevText,\n onClick: prev,\n }),\n jumper: h(Jumper),\n pager: h(Pager, {\n currentPage: currentPageBridge.value,\n pageCount: pageCountBridge.value,\n pagerCount: props.pagerCount,\n onChange: handleCurrentChange,\n disabled: props.disabled,\n }),\n next: h(Next, {\n disabled: props.disabled,\n currentPage: currentPageBridge.value,\n pageCount: pageCountBridge.value,\n nextText: props.nextText,\n onClick: next,\n }),\n sizes: h(Sizes, {\n pageSize: pageSizeBridge.value,\n pageSizes: props.pageSizes,\n popperClass: props.popperClass,\n disabled: props.disabled,\n }),\n slot: slots?.default?.() ?? null,\n total: h(Total, { total: isAbsent(props.total) ? 0 : props.total }),\n }\n\n const components = props.layout\n .split(',')\n .map((item: string) => item.trim()) as LayoutKey[]\n\n let haveRightWrapper = false\n\n components.forEach((c) => {\n if (c === '->') {\n haveRightWrapper = true\n return\n }\n if (!haveRightWrapper) {\n rootChildren.push(TEMPLATE_MAP[c])\n } else {\n rightWrapperChildren.push(TEMPLATE_MAP[c])\n }\n })\n\n if (haveRightWrapper && rightWrapperChildren.length > 0) {\n rootChildren.unshift(rightWrapperRoot)\n }\n\n return h(\n 'div',\n {\n role: 'pagination',\n 'aria-label': 'pagination',\n class: [\n 'el-pagination',\n {\n 'is-background': props.background,\n 'el-pagination--small': props.small,\n },\n ],\n },\n rootChildren\n )\n }\n },\n})\n"],"names":["Prev","Jumper","Pager","Next","Sizes","Total"],"mappings":"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"}