fix: card

breakChange-2.x.md

@@ -69,3 +69,7 @@ v-model -> v-model:checked
 v-model -> v-model:activeKey
 
 renderTabBar({props, on, style, class}, DefaultTabBar) -> {DefaultTabBar, ...props} 多参数改成单参数并且扁平化处理
+
+## card
+
+tabList[{scopedSlots}] -> tabList[{slots}]

components/card/Card.jsx

@@ -1,9 +1,9 @@
-import { inject } from 'vue';
+import { inject, isVNode } from 'vue';
 import Tabs from '../tabs';
 import Row from '../row';
 import Col from '../col';
 import PropTypes from '../_util/vue-types';
-import { getComponent, filterEmpty, getSlot } from '../_util/props-util';
+import { getComponent, getSlot, isEmptyElement } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
 import isPlainObject from 'lodash/isPlainObject';
@@ -28,6 +28,7 @@ export default {
     tabBarExtraContent: PropTypes.any,
     activeTabKey: PropTypes.string,
     defaultActiveTabKey: PropTypes.string,
+    cover: PropTypes.any,
   },
   setup() {
     return {
@@ -41,11 +42,13 @@ export default {
   },
   methods: {
     getAction(actions) {
-      const actionList = actions.map((action, index) => (
-        <li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
-          <span>{action}</span>
-        </li>
-      ));
+      const actionList = actions.map((action, index) =>
+        (isVNode(action) && !isEmptyElement(action)) || !isVNode(action) ? (
+          <li style={{ width: `${100 / actions.length}%` }} key={`action-${index}`}>
+            <span>{action}</span>
+          </li>
+        ) : null,
+      );
       return actionList;
     },
     onTabChange(key) {
@@ -75,6 +78,7 @@ export default {
       activeTabKey,
       defaultActiveTabKey,
     } = this.$props;
+    const { $slots } = this;
     const children = getSlot(this);
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('card', customizePrefixCls);
@@ -155,9 +159,9 @@ export default {
       tabList && tabList.length ? (
         <Tabs {...tabsProps}>
           {tabList.map(item => {
-            const { tab: temp, children = {} } = item;
-            const name = children.tab;
-            const tab = temp !== undefined ? temp : children[name] ? children[name](item) : null;
+            const { tab: temp, scopedSlots = {}, slots = {} } = item;
+            const name = slots.tab || scopedSlots.tab;
+            const tab = temp !== undefined ? temp : $slots[name] ? $slots[name](item) : null;
             return <TabPane tab={tab} key={item.key} disabled={item.disabled} />;
           })}
         </Tabs>
@@ -183,7 +187,7 @@ export default {
         {loading ? loadingBlock : children}
       </div>
     );
-    const actions = filterEmpty(getComponent(this, 'action'));
+    const actions = getComponent(this, 'actions');
     const actionDom =
       actions && actions.length ? (
         <ul class={`${prefixCls}-actions`}>{this.getAction(actions)}</ul>

components/card/Meta.jsx

@@ -9,6 +9,7 @@ export default {
     prefixCls: PropTypes.string,
     title: PropTypes.any,
     description: PropTypes.any,
+    avatar: PropTypes.any,
   },
   setup() {
     return {

components/card/__tests__/__snapshots__/index.test.js.snap

@@ -2,6 +2,8 @@
 
 exports[`Card should still have padding when card which set padding to 0 is loading 1`] = `
 <div class="ant-card ant-card-loading ant-card-bordered">
+  <!---->
+  <!---->
   <div class="ant-card-body" style="padding: 0px;">
     <div class="ant-card-loading-content">
       <div class="ant-row" style="margin-left: -4px; margin-right: -4px;">
@@ -46,6 +48,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
       </div>
     </div>
   </div>
+  <!---->
 </div>
 `;
 
@@ -54,11 +57,15 @@ exports[`Card title should be vertically aligned 1`] = `
   <div class="ant-card-head">
     <div class="ant-card-head-wrapper">
       <div class="ant-card-head-title">Card title</div>
-      <div class="ant-card-extra"><button type="button" class="ant-btn"><span>Button</span></button></div>
+      <div class="ant-card-extra"><button class="ant-btn" type="button">
+          <!----><span>Button</span></button></div>
     </div>
+    <!---->
   </div>
+  <!---->
   <div class="ant-card-body">
     <p>Card content</p>
   </div>
+  <!---->
 </div>
 `;

components/card/__tests__/index.test.js

@@ -64,10 +64,7 @@ describe('Card', () => {
         sync: false,
       },
     );
-    wrapper
-      .findAll('.ant-tabs-tab')
-      .at(1)
-      .trigger('click');
+    wrapper.findAll('.ant-tabs-tab')[1].trigger('click');
     expect(onTabChange).toHaveBeenCalledWith('tab2');
   });
 

examples/index.js

@@ -38,6 +38,7 @@ import Steps from 'ant-design-vue/steps';
 import Switch from 'ant-design-vue/switch';
 import Layout from 'ant-design-vue/layout';
 import Tabs from 'ant-design-vue/tabs';
+import Card from 'ant-design-vue/card';
 import 'ant-design-vue/style.js';
 
 const basic = {
@@ -89,4 +90,5 @@ app
   .use(Switch)
   .use(Layout)
   .use(Tabs)
+  .use(Card)
   .mount('#app');