feat: update grid (#2377)

* feat: update grid

* fix: row can't provide rowContext to col

Co-authored-by: tangjinzhou <[email protected]>

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, provide, reactive } from 'vue';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
@@ -20,20 +21,24 @@ export default {
     ...RowProps,
     gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]).def(0),
   },
-  provide() {
+  setup() {
+    const rowContext = reactive({
+      getGutter: undefined,
+    });
+    provide('rowContext', rowContext);
     return {
-      rowContext: this,
+      configProvider: inject('configProvider', ConfigConsumerProps),
+      rowContext,
     };
   },
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-  },
   data() {
     return {
       screens: {},
     };
   },
-
+  created() {
+    this.rowContext.getGutter = this.getGutter;
+  },
   mounted() {
     this.$nextTick(() => {
       this.token = ResponsiveObserve.subscribe(screens => {
@@ -101,7 +106,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 Tooltip from 'ant-design-vue/tooltip';
 import 'ant-design-vue/style.js';
 
@@ -37,5 +39,7 @@ createApp(App)
   .use(Spin)
   .use(Empty)
   .use(Timeline)
+  .use(Col)
+  .use(Row)
   .use(Tooltip)
   .mount('#app');