diff --git a/components/_util/type.ts b/components/_util/type.ts index 25f5fc329..2433181ac 100644 --- a/components/_util/type.ts +++ b/components/_util/type.ts @@ -47,29 +47,33 @@ export function eventType() { return { type: [Function, Array] as PropType }; } -export function objectType(defaultVal?: any) { +export function objectType(defaultVal?: T) { return { type: Object as PropType, default: defaultVal as T }; } -export function booleanType(defaultVal?: any) { +export function booleanType(defaultVal?: boolean) { return { type: Boolean, default: defaultVal as boolean }; } -export function functionType {}>(defaultVal?: any) { +export function functionType {}>(defaultVal?: T) { return { type: Function as PropType, default: defaultVal as T }; } -export function anyType() { - return { validator: () => true } as unknown as { type: PropType }; +export function anyType(defaultVal?: T) { + return { validator: () => true, default: defaultVal as T } as unknown as { type: PropType }; } export function vNodeType() { return { validator: () => true } as unknown as { type: PropType }; } -export function stringType(defaultVal?: string) { +export function arrayType(defaultVal?: T) { + return { type: Array as unknown as PropType, default: defaultVal as T }; +} + +export function stringType(defaultVal?: T) { return { type: String as unknown as PropType, default: defaultVal as T }; } -export function someType(types: any[], defaultVal?: any) { +export function someType(types: any[], defaultVal?: T) { return { type: types as PropType, default: defaultVal as T }; } diff --git a/components/comment/style/index.tsx b/components/comment/style/index.tsx index ee4c14c8d..c1ac4592a 100644 --- a/components/comment/style/index.tsx +++ b/components/comment/style/index.tsx @@ -141,7 +141,6 @@ const genBaseStyle: GenerateStyle = token => { }; export default genComponentStyleHook('Comment', token => { - console.log(token); const commentToken = mergeToken(token, { commentBg: 'inherit', commentPaddingBase: `${token.paddingMD}px 0`, diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index 02cd1e218..7ef714c70 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -2,7 +2,7 @@ category: Components type: Data Display title: List -cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original --- Simple List. diff --git a/components/list/index.tsx b/components/list/index.tsx index 2fbd6b704..dd5a150c0 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -1,6 +1,5 @@ import type { App, Plugin, ExtractPropTypes, PropType, HTMLAttributes } from 'vue'; import { provide, defineComponent, ref, watch, computed, toRef } from 'vue'; -import PropTypes from '../_util/vue-types'; import classNames from '../_util/classNames'; import type { SpinProps } from '../spin'; @@ -13,6 +12,14 @@ import Item from './Item'; import { flattenChildren } from '../_util/props-util'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import type { Key } from '../_util/type'; +import { + arrayType, + someType, + booleanType, + objectType, + vNodeType, + functionType, +} from '../_util/type'; import ItemMeta from './ItemMeta'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import useBreakpoint from '../_util/hooks/useBreakpoint'; @@ -45,30 +52,22 @@ export type ListSize = 'small' | 'default' | 'large'; export type ListItemLayout = 'horizontal' | 'vertical'; export const listProps = () => ({ - bordered: { type: Boolean, default: undefined }, - dataSource: PropTypes.array, - extra: PropTypes.any, - grid: { type: Object as PropType, default: undefined as ListGridType }, + bordered: booleanType(), + dataSource: arrayType(), + extra: vNodeType(), + grid: objectType(), itemLayout: String as PropType, - loading: { - type: [Boolean, Object] as PropType, - default: undefined as boolean | (SpinProps & HTMLAttributes), - }, - loadMore: PropTypes.any, - pagination: { - type: [Boolean, Object] as PropType, - default: undefined as false | PaginationConfig, - }, + loading: someType([Boolean, Object]), + loadMore: vNodeType(), + pagination: someType([Boolean, Object]), prefixCls: String, - rowKey: [String, Number, Function] as PropType Key)>, - renderItem: Function as PropType<(opt: { item: any; index: number }) => any>, + rowKey: someType Key)>([String, Number, Function]), + renderItem: functionType<(opt: { item: any; index: number }) => any>(), size: String as PropType, - split: { type: Boolean, default: undefined }, - header: PropTypes.any, - footer: PropTypes.any, - locale: { - type: Object as PropType, - }, + split: booleanType(), + header: vNodeType(), + footer: vNodeType(), + locale: objectType(), }); export interface ListLocale { @@ -78,7 +77,6 @@ export interface ListLocale { export type ListProps = Partial>>; import { ListContextKey } from './contextKey'; -import type { RenderEmptyHandler } from '../config-provider/renderEmpty'; const List = defineComponent({ compatConfig: { MODE: 3 }, @@ -135,12 +133,6 @@ const List = defineComponent({ const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange'); - const renderEmptyFunc = (renderEmptyHandler: RenderEmptyHandler) => ( -
- {props.locale?.emptyText || renderEmptyHandler('List')} -
- ); - const loadingProp = computed(() => { if (typeof props.loading === 'boolean') { return { @@ -304,7 +296,11 @@ const List = defineComponent({
    {items}
); } else if (!children.length && !isLoading.value) { - childrenContent = renderEmptyFunc(renderEmpty); + childrenContent = ( +
+ {props.locale?.emptyText || renderEmpty('List')} +
+ ); } const paginationPosition = paginationProps.value.position || 'bottom'; diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index bb380a7d9..f565aa948 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -3,7 +3,7 @@ category: Components type: 数据展示 title: List subtitle: 列表 -cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original --- 通用列表。 diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index 9075e447a..40e8bfcdb 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -5,10 +5,11 @@ import { filterEmpty, flattenChildren, isEmptyContent } from '../_util/props-uti import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined'; import ArrowRightOutlined from '@ant-design/icons-vue/ArrowRightOutlined'; import Breadcrumb from '../breadcrumb'; +import type { AvatarProps } from '../avatar'; import Avatar from '../avatar'; import TransButton from '../_util/transButton'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import { withInstall } from '../_util/type'; +import { objectType, vNodeType, withInstall } from '../_util/type'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import classNames from '../_util/classNames'; import ResizeObserver from '../vc-resize-observer'; @@ -20,15 +21,15 @@ import Space from '../space'; import useStyle from './style'; export const pageHeaderProps = () => ({ - backIcon: PropTypes.any, + backIcon: vNodeType(), prefixCls: String, - title: PropTypes.any, - subTitle: PropTypes.any, + title: vNodeType(), + subTitle: vNodeType(), breadcrumb: PropTypes.object, - tags: PropTypes.any, - footer: PropTypes.any, - extra: PropTypes.any, - avatar: PropTypes.object, + tags: vNodeType(), + footer: vNodeType(), + extra: vNodeType(), + avatar: objectType(), ghost: { type: Boolean, default: undefined }, onBack: Function as PropType, }); diff --git a/components/page-header/style/index.tsx b/components/page-header/style/index.tsx index 4181694b7..45dfd09e3 100644 --- a/components/page-header/style/index.tsx +++ b/components/page-header/style/index.tsx @@ -24,7 +24,7 @@ const genPageHeaderStyle: GenerateStyle = token => { ...resetComponent(token), position: 'relative', padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`, - backgroundColor: token.colorBgLayout, + backgroundColor: token.colorBgContainer, [`${componentCls}-ghost`]: { backgroundColor: token.pageHeaderGhostBg, diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx index ecba9fcea..0b04605e9 100644 --- a/components/statistic/Countdown.tsx +++ b/components/statistic/Countdown.tsx @@ -2,6 +2,7 @@ import type { ExtractPropTypes, PropType } from 'vue'; import { defineComponent, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'; import omit from '../_util/omit'; import initDefaultProps from '../_util/props-util/initDefaultProps'; +import { someType } from '../_util/type'; import Statistic, { statisticProps } from './Statistic'; import type { countdownValueType, FormatConfig, valueType } from './utils'; import { formatCountdown as formatCD } from './utils'; @@ -14,7 +15,7 @@ function getTime(value?: countdownValueType) { export const countdownProps = () => { return { ...statisticProps(), - value: [Number, String, Object] as PropType, + value: someType([Number, String, Object]), format: String, onFinish: Function as PropType<() => void>, onChange: Function as PropType<(value?: countdownValueType) => void>, @@ -67,13 +68,7 @@ export default defineComponent({ } }; - const formatCountdown = ({ - value, - config, - }: { - value: countdownValueType; - config: FormatConfig; - }) => { + const formatCountdown = ({ value, config }: { value: valueType; config: FormatConfig }) => { const { format } = props; return formatCD(value, { ...config, format }); }; diff --git a/components/statistic/Number.tsx b/components/statistic/Number.tsx index cfd694c22..ea56b5a3b 100644 --- a/components/statistic/Number.tsx +++ b/components/statistic/Number.tsx @@ -1,4 +1,3 @@ -import padEnd from 'lodash-es/padEnd'; import type { FunctionalComponent, VNodeTypes } from 'vue'; import type { FormatConfig, valueType } from './utils'; @@ -27,7 +26,7 @@ const StatisticNumber: FunctionalComponent = props => { int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator); if (typeof precision === 'number') { - decimal = padEnd(decimal, precision, '0').slice(0, precision > 0 ? precision : 0); + decimal = decimal.padEnd(precision, '0').slice(0, precision > 0 ? precision : 0); } if (decimal) { diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx index 9e75b352a..35127402b 100644 --- a/components/statistic/Statistic.tsx +++ b/components/statistic/Statistic.tsx @@ -1,31 +1,29 @@ -import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; +import type { CSSProperties, ExtractPropTypes, PropType, VNode } from 'vue'; import { defineComponent } from 'vue'; -import PropTypes from '../_util/vue-types'; import initDefaultProps from '../_util/props-util/initDefaultProps'; import StatisticNumber from './Number'; -import type { valueType } from './utils'; +import type { valueType, Formatter } from './utils'; import Skeleton from '../skeleton/Skeleton'; import useConfigInject from '../config-provider/hooks/useConfigInject'; // CSSINJS import useStyle from './style'; +import { anyType, booleanType, functionType, someType, vNodeType } from '../_util/type'; export const statisticProps = () => ({ prefixCls: String, decimalSeparator: String, groupSeparator: String, format: String, - value: { - type: [String, Number, Object] as PropType, - }, + value: someType([Number, String, Object]), valueStyle: { type: Object as PropType, default: undefined as CSSProperties }, - valueRender: PropTypes.any, - formatter: PropTypes.any, + valueRender: functionType<(node: VNode | JSX.Element) => VNode | JSX.Element>(), + formatter: anyType(), precision: Number, - prefix: PropTypes.any, - suffix: PropTypes.any, - title: PropTypes.any, - loading: { type: Boolean, default: undefined }, + prefix: vNodeType(), + suffix: vNodeType(), + title: vNodeType(), + loading: booleanType(), }); export type StatisticProps = Partial>>; @@ -52,7 +50,7 @@ export default defineComponent({ const title = props.title ?? slots.title?.(); const prefix = props.prefix ?? slots.prefix?.(); const suffix = props.suffix ?? slots.suffix?.(); - const formatter = props.formatter ?? slots.formatter; + const formatter = props.formatter ?? (slots.formatter as unknown as Formatter); // data-for-update just for update component // https://github.com/vueComponent/ant-design-vue/pull/3170 let valueNode = ( diff --git a/components/statistic/index.en-US.md b/components/statistic/index.en-US.md index 41f5e5d82..5e17a1ba5 100644 --- a/components/statistic/index.en-US.md +++ b/components/statistic/index.en-US.md @@ -2,7 +2,7 @@ category: Components type: Data Display title: Statistic -cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YL7PRYNtH-4AAAAAAAAAAAAADrJ8AQ/original --- Display statistic number. diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md index fe72255ae..32a4bad83 100644 --- a/components/statistic/index.zh-CN.md +++ b/components/statistic/index.zh-CN.md @@ -3,7 +3,7 @@ category: Components type: 数据展示 title: Statistic subtitle: 统计数值 -cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YL7PRYNtH-4AAAAAAAAAAAAADrJ8AQ/original --- 展示统计数值。 diff --git a/components/statistic/utils.ts b/components/statistic/utils.ts index ee4466d97..340710d78 100644 --- a/components/statistic/utils.ts +++ b/components/statistic/utils.ts @@ -1,8 +1,7 @@ import type { VNodeTypes } from 'vue'; -import padStart from 'lodash-es/padStart'; export type valueType = number | string; -export type countdownValueType = valueType | Date; +export type countdownValueType = number | string; export type Formatter = | false @@ -41,12 +40,12 @@ export function formatTimeStr(duration: number, format: string) { const templateText = format.replace(escapeRegex, '[]'); const replacedText = timeUnits.reduce((current, [name, unit]) => { - if (current.indexOf(name) !== -1) { + if (current.includes(name)) { const value = Math.floor(leftDuration / unit); leftDuration -= value * unit; return current.replace(new RegExp(`${name}+`, 'g'), (match: string) => { const len = match.length; - return padStart(value.toString(), len, '0'); + return value.toString().padStart(len, '0'); }); } return current; @@ -60,7 +59,7 @@ export function formatTimeStr(duration: number, format: string) { }); } -export function formatCountdown(value: countdownValueType, config: CountdownFormatConfig) { +export function formatCountdown(value: valueType, config: CountdownFormatConfig) { const { format = '' } = config; const target = new Date(value).getTime(); const current = Date.now();