From a36d858d7deac5114b8285949745746341751234 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 5 Mar 2022 15:45:01 +0800 Subject: [PATCH] feat: update pagination ts --- components/page-header/style/index.less | 4 +- .../page-header/style/{index.ts => index.tsx} | 0 components/page-header/style/rtl.less | 1 + components/pagination/Pagination.tsx | 84 ++++++++++++------- components/pagination/style/index.less | 12 ++- 5 files changed, 68 insertions(+), 33 deletions(-) rename components/page-header/style/{index.ts => index.tsx} (100%) diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 084d85e57..6eeedec96 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -66,7 +66,7 @@ color: @heading-color; font-weight: 600; font-size: @page-header-heading-title; - line-height: 32px; + line-height: @height-base; .text-overflow-ellipsis(); } @@ -90,6 +90,7 @@ margin-left: @margin-sm; white-space: unset; } + > *:first-child { margin-left: 0; } @@ -105,6 +106,7 @@ .@{ant-prefix}-tabs { > .@{ant-prefix}-tabs-nav { margin: 0; + &::before { border: none; } diff --git a/components/page-header/style/index.ts b/components/page-header/style/index.tsx similarity index 100% rename from components/page-header/style/index.ts rename to components/page-header/style/index.tsx diff --git a/components/page-header/style/rtl.less b/components/page-header/style/rtl.less index f7e9afdbe..33e5c0d86 100644 --- a/components/page-header/style/rtl.less +++ b/components/page-header/style/rtl.less @@ -56,6 +56,7 @@ margin-left: 0; } } + > *:first-child { .@{pageheader-prefix-cls}-rtl & { margin-right: 0; diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 35d28f19a..c9ea513fc 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -1,11 +1,9 @@ -import type { ExtractPropTypes } from 'vue'; +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 { tuple } from '../_util/type'; -import PropTypes, { withUndefined } from '../_util/vue-types'; import VcSelect from '../select'; import MiniSelect from './MiniSelect'; import { useLocaleReceiver } from '../locale-provider/LocaleReceiver'; @@ -15,42 +13,65 @@ import classNames from '../_util/classNames'; import useConfigInject from '../_util/hooks/useConfigInject'; export const paginationProps = () => ({ - total: PropTypes.number, - defaultCurrent: PropTypes.number, - disabled: PropTypes.looseBool, - current: PropTypes.number, - defaultPageSize: PropTypes.number, - pageSize: PropTypes.number, - hideOnSinglePage: PropTypes.looseBool, - showSizeChanger: PropTypes.looseBool, - pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), - buildOptionText: PropTypes.func, - showSizeChange: PropTypes.func, - showQuickJumper: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])), - showTotal: PropTypes.any, - size: PropTypes.string, - simple: PropTypes.looseBool, - locale: PropTypes.object, - prefixCls: PropTypes.string, - selectPrefixCls: PropTypes.string, - itemRender: PropTypes.func, - role: PropTypes.string, - showLessItems: PropTypes.looseBool, - onChange: PropTypes.func, - onShowSizeChange: PropTypes.func, - 'onUpdate:current': PropTypes.func, - 'onUpdate:pageSize': PropTypes.func, + 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: PropTypes.oneOf(tuple('top', 'bottom', 'both')), + position: String as PropType, }); export type PaginationProps = Partial>>; export type PaginationConfig = Partial>>; -export type PaginationLocale = any; +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, @@ -110,6 +131,7 @@ export default defineComponent({ size, itemRender = slots.itemRender, buildOptionText = slots.buildOptionText, + selectComponentClass, ...restProps } = props; @@ -119,7 +141,7 @@ export default defineComponent({ ...getIconsProps(prefixCls.value), prefixCls: prefixCls.value, selectPrefixCls: selectPrefixCls.value, - selectComponentClass: isSmall ? MiniSelect : VcSelect, + selectComponentClass: selectComponentClass || (isSmall ? MiniSelect : VcSelect), locale: locale.value, buildOptionText, ...attrs, diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less index f49136863..60ee9d69d 100644 --- a/components/pagination/style/index.less +++ b/components/pagination/style/index.less @@ -63,6 +63,7 @@ &:hover { border-color: @primary-color; transition: all 0.3s; + a { color: @primary-color; } @@ -101,6 +102,7 @@ letter-spacing: -1px; opacity: 0; transition: all 0.2s; + &-svg { top: 0; right: 0; @@ -144,6 +146,7 @@ &-jump-next { margin-right: 8px; } + &-prev, &-next, &-jump-prev, @@ -259,6 +262,7 @@ height: @pagination-item-size-sm; background-color: transparent; border: 0; + &::after { height: @pagination-item-size-sm; line-height: @pagination-item-size-sm; @@ -287,6 +291,11 @@ border-color: @primary-color; } + &:focus { + border-color: @primary-color-hover; + box-shadow: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline; + } + &[disabled] { color: @disabled-color; background: @disabled-bg; @@ -326,6 +335,7 @@ &.mini &-next &-item-link { background: transparent; border-color: transparent; + &::after { height: @pagination-item-size-sm; line-height: @pagination-item-size-sm; @@ -377,7 +387,7 @@ &-active { background: @pagination-item-disabled-bg-active; - border-color: transparent; + a { color: @pagination-item-disabled-color-active; }