feat: update grid

Author: zkwolf

components/col/index.js

@@ -1,9 +1,7 @@
 import { Col } from '../grid';
-import Base from '../base';
 /* istanbul ignore next */
-Col.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Col.name, Col);
+Col.install = function(app) {
+  app.component(Col.name, Col);
 };
 
 export default Col;

components/grid/Col.jsx

@@ -1,6 +1,6 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { ConfigConsumerProps } from '../config-provider';
-import { getListeners } from '../_util/props-util';
 
 const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 
@@ -32,11 +32,11 @@ export const ColProps = {
 export default {
   name: 'ACol',
   props: ColProps,
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-    rowContext: {
-      default: () => null,
-    },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+      rowContext: inject('rowContext', null),
+    };
   },
   render() {
     const {
@@ -82,7 +82,6 @@ export default {
       ...sizeClassObj,
     };
     const divProps = {
-      on: getListeners(this),
       class: classes,
       style: {},
     };
@@ -105,6 +104,6 @@ export default {
         };
       }
     }
-    return <div {...divProps}>{$slots.default}</div>;
+    return <div {...divProps}>{$slots.default && $slots.default()}</div>;
   },
 };

components/grid/Row.jsx

@@ -1,3 +1,4 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
@@ -25,8 +26,10 @@ export default {
       rowContext: this,
     };
   },
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   data() {
     return {
@@ -101,7 +104,7 @@ export default {
     };
     return (
       <div class={classes} style={rowStyle}>
-        {$slots.default}
+        {$slots.default && $slots.default()}
       </div>
     );
   },

components/row/index.js

@@ -1,10 +1,8 @@
 import { Row } from '../grid';
-import Base from '../base';
 
 /* istanbul ignore next */
-Row.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Row.name, Row);
+Row.install = function(app) {
+  app.component(Row.name, Row);
 };
 
 export default Row;

examples/index.js

@@ -17,6 +17,8 @@ import PageHeader from 'ant-design-vue/page-header';
 import Skeleton from 'ant-design-vue/skeleton';
 import Empty from 'ant-design-vue/empty';
 import Timeline from 'ant-design-vue/timeline';
+import Col from 'ant-design-vue/col';
+import Row from 'ant-design-vue/row';
 import 'ant-design-vue/style.js';
 
 createApp(App)
@@ -36,4 +38,6 @@ createApp(App)
   .use(Spin)
   .use(Empty)
   .use(Timeline)
+  .use(Col)
+  .use(Row)
   .mount('#app');