feat: update card

components/button/button.jsx

@@ -14,9 +14,8 @@ export default {
   __ANT_BUTTON: true,
   props,
   setup() {
-    const configProvider = inject('configProvider', ConfigConsumerProps);
     return {
-      configProvider,
+      configProvider: inject('configProvider', ConfigConsumerProps),
     };
   },
   data() {

components/card/Card.jsx

@@ -1,14 +1,10 @@
+import { inject } from 'vue';
 import omit from 'omit.js';
 import Tabs from '../tabs';
 import Row from '../row';
 import Col from '../col';
 import PropTypes from '../_util/vue-types';
-import {
+import { getComponent, getSlotOptions, filterEmpty, getListeners } from '../_util/props-util';
-  getComponentFromProp,
-  getSlotOptions,
-  filterEmpty,
-  getListeners,
-} from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
 
@@ -33,8 +29,10 @@ export default {
     activeTabKey: PropTypes.string,
     defaultActiveTabKey: PropTypes.string,
   },
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     return {
@@ -82,7 +80,7 @@ export default {
     const prefixCls = getPrefixCls('card', customizePrefixCls);
 
     const { $slots, $scopedSlots } = this;
-    const tabBarExtraContent = getComponentFromProp(this, 'tabBarExtraContent');
+    const tabBarExtraContent = getComponent(this, 'tabBarExtraContent');
     const classString = {
       [`${prefixCls}`]: true,
       [`${prefixCls}-loading`]: loading,
@@ -170,8 +168,8 @@ export default {
           })}
         </Tabs>
       ) : null;
-    const titleDom = getComponentFromProp(this, 'title');
+    const titleDom = getComponent(this, 'title');
-    const extraDom = getComponentFromProp(this, 'extra');
+    const extraDom = getComponent(this, 'extra');
     if (titleDom || extraDom || tabs) {
       head = (
         <div class={`${prefixCls}-head`} style={headStyle}>
@@ -185,7 +183,7 @@ export default {
     }
 
     const children = $slots.default;
-    const cover = getComponentFromProp(this, 'cover');
+    const cover = getComponent(this, 'cover');
     const coverDom = cover ? <div class={`${prefixCls}-cover`}>{cover}</div> : null;
     const body = (
       <div class={`${prefixCls}-body`} style={bodyStyle}>

components/card/Grid.jsx

@@ -1,6 +1,7 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { ConfigConsumerProps } from '../config-provider';
-import { getListeners } from '../_util/props-util';
+import { getSlot } from '../_util/props-util';
 
 export default {
   name: 'ACardGrid',
@@ -9,8 +10,10 @@ export default {
     prefixCls: PropTypes.string,
     hoverable: PropTypes.bool,
   },
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   render() {
     const { prefixCls: customizePrefixCls, hoverable = true } = this.$props;
@@ -22,10 +25,6 @@ export default {
       [`${prefixCls}-grid`]: true,
       [`${prefixCls}-grid-hoverable`]: hoverable,
     };
-    return (
+    return <div class={classString}>{getSlot(this)}</div>;
-      <div {...{ on: getListeners(this) }} class={classString}>
-        {this.$slots.default}
-      </div>
-    );
   },
 };

components/card/Meta.jsx

@@ -1,5 +1,6 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { getComponentFromProp, getListeners } from '../_util/props-util';
+import { getComponent } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
 export default {
@@ -9,8 +10,10 @@ export default {
     title: PropTypes.any,
     description: PropTypes.any,
   },
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   render() {
     const { prefixCls: customizePrefixCls } = this.$props;
@@ -22,9 +25,9 @@ export default {
       [`${prefixCls}-meta`]: true,
     };
 
-    const avatar = getComponentFromProp(this, 'avatar');
+    const avatar = getComponent(this, 'avatar');
-    const title = getComponentFromProp(this, 'title');
+    const title = getComponent(this, 'title');
-    const description = getComponentFromProp(this, 'description');
+    const description = getComponent(this, 'description');
 
     const avatarDom = avatar ? <div class={`${prefixCls}-meta-avatar`}>{avatar}</div> : null;
     const titleDom = title ? <div class={`${prefixCls}-meta-title`}>{title}</div> : null;
@@ -39,7 +42,7 @@ export default {
         </div>
       ) : null;
     return (
-      <div {...{ on: getListeners(this) }} class={classString}>
+      <div class={classString}>
         {avatarDom}
         {MetaDetail}
       </div>

components/card/index.js

@@ -1,16 +1,14 @@
 import Card from './Card';
 import Meta from './Meta';
 import Grid from './Grid';
-import Base from '../base';
 Card.Meta = Meta;
 Card.Grid = Grid;
 
 /* istanbul ignore next */
-Card.install = function(Vue) {
+Card.install = function(app) {
-  Vue.use(Base);
+  app.component(Card.name, Card);
-  Vue.component(Card.name, Card);
+  app.component(Meta.name, Meta);
-  Vue.component(Meta.name, Meta);
+  app.component(Grid.name, Grid);
-  Vue.component(Grid.name, Grid);
 };
 
 export default Card;