feat: update type

components/_util/type.ts

@@ -47,29 +47,33 @@ export function eventType<T>() {
   return { type: [Function, Array] as PropType<T | T[]> };
 }
 
-export function objectType<T>(defaultVal?: any) {
+export function objectType<T = {}>(defaultVal?: T) {
   return { type: Object as PropType<T>, default: defaultVal as T };
 }
 
-export function booleanType(defaultVal?: any) {
+export function booleanType(defaultVal?: boolean) {
   return { type: Boolean, default: defaultVal as boolean };
 }
 
-export function functionType<T = () => {}>(defaultVal?: any) {
+export function functionType<T = () => {}>(defaultVal?: T) {
   return { type: Function as PropType<T>, default: defaultVal as T };
 }
 
-export function anyType<T = any>() {
+export function anyType<T = any>(defaultVal?: T) {
-  return { validator: () => true } as unknown as { type: PropType<T> };
+  return { validator: () => true, default: defaultVal as T } as unknown as { type: PropType<T> };
 }
 export function vNodeType<T = VueNode>() {
   return { validator: () => true } as unknown as { type: PropType<T> };
 }
 
-export function stringType<T extends string = string>(defaultVal?: string) {
+export function arrayType<T extends any[]>(defaultVal?: T) {
+  return { type: Array as unknown as PropType<T>, default: defaultVal as T };
+}
+
+export function stringType<T extends string = string>(defaultVal?: T) {
   return { type: String as unknown as PropType<T>, default: defaultVal as T };
 }
 
-export function someType<T>(types: any[], defaultVal?: any) {
+export function someType<T>(types: any[], defaultVal?: T) {
   return { type: types as PropType<T>, default: defaultVal as T };
 }

components/comment/style/index.tsx

@@ -141,7 +141,6 @@ const genBaseStyle: GenerateStyle<CommentToken> = token => {
 };
 
 export default genComponentStyleHook('Comment', token => {
-  console.log(token);
   const commentToken = mergeToken<CommentToken>(token, {
     commentBg: 'inherit',
     commentPaddingBase: `${token.paddingMD}px 0`,

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.

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 },
+  bordered: booleanType(),
-  dataSource: PropTypes.array,
+  dataSource: arrayType(),
-  extra: PropTypes.any,
+  extra: vNodeType(),
-  grid: { type: Object as PropType<ListGridType>, default: undefined as ListGridType },
+  grid: objectType<ListGridType>(),
   itemLayout: String as PropType<ListItemLayout>,
-  loading: {
+  loading: someType<boolean | (SpinProps & HTMLAttributes)>([Boolean, Object]),
-    type: [Boolean, Object] as PropType<boolean | (SpinProps & HTMLAttributes)>,
+  loadMore: vNodeType(),
-    default: undefined as boolean | (SpinProps & HTMLAttributes),
+  pagination: someType<false | PaginationConfig>([Boolean, Object]),
-  },
-  loadMore: PropTypes.any,
-  pagination: {
-    type: [Boolean, Object] as PropType<false | PaginationConfig>,
-    default: undefined as false | PaginationConfig,
-  },
   prefixCls: String,
-  rowKey: [String, Number, Function] as PropType<Key | ((item: any) => Key)>,
+  rowKey: someType<Key | ((item: any) => Key)>([String, Number, Function]),
-  renderItem: Function as PropType<(opt: { item: any; index: number }) => any>,
+  renderItem: functionType<(opt: { item: any; index: number }) => any>(),
   size: String as PropType<ListSize>,
-  split: { type: Boolean, default: undefined },
+  split: booleanType(),
-  header: PropTypes.any,
+  header: vNodeType(),
-  footer: PropTypes.any,
+  footer: vNodeType(),
-  locale: {
+  locale: objectType<ListLocale>(),
-    type: Object as PropType<ListLocale>,
-  },
 });
 
 export interface ListLocale {
@@ -78,7 +77,6 @@ export interface ListLocale {
 export type ListProps = Partial<ExtractPropTypes<ReturnType<typeof listProps>>>;
 
 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) => (
-      <div class={`${prefixCls.value}-empty-text`}>
-        {props.locale?.emptyText || renderEmptyHandler('List')}
-      </div>
-    );
-
     const loadingProp = computed(() => {
       if (typeof props.loading === 'boolean') {
         return {
@@ -304,7 +296,11 @@ const List = defineComponent({
           <ul class={`${prefixCls.value}-items`}>{items}</ul>
         );
       } else if (!children.length && !isLoading.value) {
-        childrenContent = renderEmptyFunc(renderEmpty);
+        childrenContent = (
+          <div class={`${prefixCls.value}-empty-text`}>
+            {props.locale?.emptyText || renderEmpty('List')}
+          </div>
+        );
       }
 
       const paginationPosition = paginationProps.value.position || 'bottom';

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
 ---
 
 通用列表。

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,
+  title: vNodeType(),
-  subTitle: PropTypes.any,
+  subTitle: vNodeType(),
   breadcrumb: PropTypes.object,
-  tags: PropTypes.any,
+  tags: vNodeType(),
-  footer: PropTypes.any,
+  footer: vNodeType(),
-  extra: PropTypes.any,
+  extra: vNodeType(),
-  avatar: PropTypes.object,
+  avatar: objectType<AvatarProps>(),
   ghost: { type: Boolean, default: undefined },
   onBack: Function as PropType<MouseEventHandler>,
 });

components/page-header/style/index.tsx

@@ -24,7 +24,7 @@ const genPageHeaderStyle: GenerateStyle<PageHeaderToken, CSSObject> = token => {
       ...resetComponent(token),
       position: 'relative',
       padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`,
-      backgroundColor: token.colorBgLayout,
+      backgroundColor: token.colorBgContainer,
 
       [`${componentCls}-ghost`]: {
         backgroundColor: token.pageHeaderGhostBg,

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<countdownValueType>,
+    value: someType<countdownValueType>([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 = ({
+    const formatCountdown = ({ value, config }: { value: valueType; config: FormatConfig }) => {
-      value,
-      config,
-    }: {
-      value: countdownValueType;
-      config: FormatConfig;
-    }) => {
       const { format } = props;
       return formatCD(value, { ...config, format });
     };

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<NumberProps> = 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) {

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: {
+  value: someType<valueType>([Number, String, Object]),
-    type: [String, Number, Object] as PropType<valueType>,
-  },
   valueStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
-  valueRender: PropTypes.any,
+  valueRender: functionType<(node: VNode | JSX.Element) => VNode | JSX.Element>(),
-  formatter: PropTypes.any,
+  formatter: anyType<Formatter>(),
   precision: Number,
-  prefix: PropTypes.any,
+  prefix: vNodeType(),
-  suffix: PropTypes.any,
+  suffix: vNodeType(),
-  title: PropTypes.any,
+  title: vNodeType(),
-  loading: { type: Boolean, default: undefined },
+  loading: booleanType(),
 });
 
 export type StatisticProps = Partial<ExtractPropTypes<ReturnType<typeof statisticProps>>>;
@@ -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 = (

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.

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
 ---
 
 展示统计数值。

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();