import type { ExtractPropTypes, PropType } from 'vue'; import { computed, toRef, defineComponent } from 'vue'; import LeftOutlined from '@ant-design/icons-vue/LeftOutlined'; import RightOutlined from '@ant-design/icons-vue/RightOutlined'; import DoubleLeftOutlined from '@ant-design/icons-vue/DoubleLeftOutlined'; import DoubleRightOutlined from '@ant-design/icons-vue/DoubleRightOutlined'; import VcSelect from '../select'; import MiniSelect from './MiniSelect'; import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'; import VcPagination from '../vc-pagination'; import enUS from '../vc-pagination/locale/en_US'; import classNames from '../_util/classNames'; import useConfigInject from '../_util/hooks/useConfigInject'; export const paginationProps = () => ({ total: Number, defaultCurrent: Number, disabled: { type: Boolean, default: undefined }, current: Number, defaultPageSize: Number, pageSize: Number, hideOnSinglePage: { type: Boolean, default: undefined }, showSizeChanger: { type: Boolean, default: undefined }, pageSizeOptions: Array as PropType<(string | number)[]>, buildOptionText: Function as PropType<(opt: { value: any }) => any>, showQuickJumper: { type: [Boolean, Object] as PropType, default: undefined as boolean | { goButton?: any }, }, showTotal: Function as PropType<(total: number, range: [number, number]) => any>, size: String as PropType<'default' | 'small'>, simple: { type: Boolean, default: undefined }, locale: Object, prefixCls: String, selectPrefixCls: String, totalBoundaryShowSizeChanger: Number, selectComponentClass: String, itemRender: Function as PropType< (opt: { page: number; type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next'; originalElement: any; }) => any >, role: String, showLessItems: { type: Boolean, default: undefined }, onChange: Function as PropType<(page: number, pageSize: number) => void>, onShowSizeChange: Function as PropType<(current: number, size: number) => void>, 'onUpdate:current': Function as PropType<(current: number) => void>, 'onUpdate:pageSize': Function as PropType<(size: number) => void>, }); export type PaginationPosition = 'top' | 'bottom' | 'both'; export const paginationConfig = () => ({ ...paginationProps(), position: String as PropType, }); export type PaginationProps = Partial>>; export type PaginationConfig = Partial>>; export interface PaginationLocale { items_per_page?: string; jump_to?: string; jump_to_confirm?: string; page?: string; prev_page?: string; next_page?: string; prev_5?: string; next_5?: string; prev_3?: string; next_3?: string; } export default defineComponent({ name: 'APagination', inheritAttrs: false, props: paginationProps(), emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'], setup(props, { slots, attrs }) { const { prefixCls, configProvider, direction } = useConfigInject('pagination', props); const selectPrefixCls = computed(() => configProvider.getPrefixCls('select', props.selectPrefixCls), ); const [locale] = useLocaleReceiver('Pagination', enUS, toRef(props, 'locale')); const getIconsProps = (pre: string) => { const ellipsis = •••; let prevIcon = ( ); let nextIcon = ( ); let jumpPrevIcon = ( {/* You can use transition effects in the container :) */}
{ellipsis}
); let jumpNextIcon = ( {/* You can use transition effects in the container :) */}
{ellipsis}
); // change arrows direction in right-to-left direction if (direction.value === 'rtl') { [prevIcon, nextIcon] = [nextIcon, prevIcon]; [jumpPrevIcon, jumpNextIcon] = [jumpNextIcon, jumpPrevIcon]; } return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon, }; }; return () => { const { size, itemRender = slots.itemRender, buildOptionText = slots.buildOptionText, selectComponentClass, ...restProps } = props; const isSmall = size === 'small'; const paginationProps = { ...restProps, ...getIconsProps(prefixCls.value), prefixCls: prefixCls.value, selectPrefixCls: selectPrefixCls.value, selectComponentClass: selectComponentClass || (isSmall ? MiniSelect : VcSelect), locale: locale.value, buildOptionText, ...attrs, class: classNames( { mini: isSmall, [`${prefixCls.value}-rtl`]: direction.value === 'rtl' }, attrs.class, ), itemRender, }; return ; }; }, });