merge feat-v4

Author: shifeng1993

components/_util/transKeys.ts

@@ -0,0 +1,17 @@
+export const groupKeysMap = (keys: string[]) => {
+  const map = new Map<string, number>();
+  keys.forEach((key, index) => {
+    map.set(key, index);
+  });
+  return map;
+};
+
+export const groupDisabledKeysMap = <RecordType extends any[]>(dataSource: RecordType) => {
+  const map = new Map<string, number>();
+  dataSource.forEach(({ disabled, key }, index) => {
+    if (disabled) {
+      map.set(key, index);
+    }
+  });
+  return map;
+};

components/card/Card.tsx

@@ -1,14 +1,14 @@
 import type { VNodeTypes, PropType, VNode, ExtractPropTypes, CSSProperties } from 'vue';
 import { isVNode, defineComponent, renderSlot } from 'vue';
 import Tabs from '../tabs';
-import Row from '../row';
-import Col from '../col';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren, isEmptyElement, filterEmptyWithUndefined } from '../_util/props-util';
 import type { SizeType } from '../config-provider';
 import isPlainObject from 'lodash-es/isPlainObject';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import devWarning from '../vc-util/devWarning';
+import useStyle from './style';
+import Skeleton from '../skeleton';
 export interface CardTabListType {
   key: string;
   tab: any;
@@ -51,10 +51,12 @@ export type CardProps = Partial<ExtractPropTypes<ReturnType<typeof cardProps>>>;
 const Card = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ACard',
+  inheritAttrs: false,
   props: cardProps(),
   slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'],
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const { prefixCls, direction, size } = useConfigInject('card', props);
+    const [wrapSSR, hashId] = useStyle(prefixCls);
     const getAction = (actions: VNodeTypes[]) => {
       const actionList = actions.map((action, index) =>
         (isVNode(action) && !isEmptyElement(action)) || !isVNode(action) ? (
@@ -99,6 +101,7 @@ const Card = defineComponent({
       const pre = prefixCls.value;
       const classString = {
         [`${pre}`]: true,
+        [hashId.value]: true,
         [`${pre}-loading`]: loading,
         [`${pre}-bordered`]: bordered,
         [`${pre}-hoverable`]: !!hoverable,
@@ -108,34 +111,10 @@ const Card = defineComponent({
         [`${pre}-type-${type}`]: !!type,
         [`${pre}-rtl`]: direction.value === 'rtl',
       };
-
-      const loadingBlockStyle =
-        bodyStyle.padding === 0 || bodyStyle.padding === '0px' ? { padding: '24px' } : undefined;
-
-      const block = <div class={`${pre}-loading-block`} />;
       const loadingBlock = (
-        <div class={`${pre}-loading-content`} style={loadingBlockStyle}>
-          <Row gutter={8}>
-            <Col span={22}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={8}>{block}</Col>
-            <Col span={15}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={6}>{block}</Col>
-            <Col span={18}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={13}>{block}</Col>
-            <Col span={9}>{block}</Col>
-          </Row>
-          <Row gutter={8}>
-            <Col span={4}>{block}</Col>
-            <Col span={3}>{block}</Col>
-            <Col span={16}>{block}</Col>
-          </Row>
-        </div>
+        <Skeleton loading active paragraph={{ rows: 4 }} title={false}>
+          {children}
+        </Skeleton>
       );
 
       const hasActiveTabKey = activeTabKey !== undefined;
@@ -190,13 +169,13 @@ const Card = defineComponent({
       const actionDom =
         actions && actions.length ? <ul class={`${pre}-actions`}>{getAction(actions)}</ul> : null;
 
-      return (
-        <div class={classString} ref="cardContainerRef">
+      return wrapSSR(
+        <div ref="cardContainerRef" {...attrs} class={[classString, attrs.class]}>
           {head}
           {coverDom}
           {children && children.length ? body : null}
           {actionDom}
-        </div>
+        </div>,
       );
     };
   },

components/card/Meta.tsx

@@ -1,14 +1,14 @@
 import type { ExtractPropTypes } from 'vue';
 import { defineComponent } from 'vue';
-import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+import { vNodeType } from '../_util/type';
 
 export const cardMetaProps = () => ({
   prefixCls: String,
-  title: PropTypes.any,
-  description: PropTypes.any,
-  avatar: PropTypes.any,
+  title: vNodeType(),
+  description: vNodeType(),
+  avatar: vNodeType(),
 });
 export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardMetaProps>>>;
 export default defineComponent({

components/card/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Display
 title: Card
-cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Simple rectangular container.

components/card/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据展示
 title: Card
 subtitle: 卡片
-cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 通用卡片容器