feat(row): add support for space-evenly

Author: tangjinzhou

components/grid/Col.tsx

@@ -141,7 +141,7 @@ export default defineComponent({
     });
     return () => {
       return (
-        <div class={classes.value} style={mergedStyle.value}>
+        <div role="cell" class={classes.value} style={mergedStyle.value}>
           {slots.default?.()}
         </div>
       );

components/grid/Row.tsx

@@ -9,9 +9,10 @@ import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
 import useProvideRow from './context';
 
 const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
-const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
+const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
 
-export type Gutter = number | Partial<Record<Breakpoint, number>>;
+type Gap = number | undefined;
+export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
 
 export interface rowContextState {
   gutter?: [number, number];
@@ -68,9 +69,9 @@ const ARow = defineComponent({
     });
 
     const gutter = computed(() => {
-      const results: [number, number] = [0, 0];
+      const results: [Gap, Gap] = [undefined, undefined];
       const { gutter = 0 } = props;
-      const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
+      const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];
       normalizedGutter.forEach((g, index) => {
         if (typeof g === 'object') {
           for (let i = 0; i < responsiveArray.length; i++) {
@@ -81,7 +82,7 @@ const ARow = defineComponent({
             }
           }
         } else {
-          results[index] = g || 0;
+          results[index] = g;
         }
       });
       return results;
@@ -106,8 +107,8 @@ const ARow = defineComponent({
       const gt = gutter.value;
       // Add gutter related style
       const style: CSSProperties = {};
-      const horizontalGutter = gt[0] > 0 ? `${gt[0] / -2}px` : undefined;
-      const verticalGutter = gt[1] > 0 ? `${gt[1] / -2}px` : undefined;
+      const horizontalGutter = gt[0] != null && gt[0] > 0 ? `${gt[0] / -2}px` : undefined;
+      const verticalGutter = gt[1] != null && gt[1] > 0 ? `${gt[1] / -2}px` : undefined;
 
       if (horizontalGutter) {
         style.marginLeft = horizontalGutter;
@@ -126,7 +127,7 @@ const ARow = defineComponent({
 
     return () => {
       return (
-        <div class={classes.value} style={rowStyle.value}>
+        <div role="row" class={classes.value} style={rowStyle.value}>
           {slots.default?.()}
         </div>
       );

components/grid/demo/playfround.vue

@@ -58,7 +58,6 @@ A simple playground for column count and gutter.
       >
         <div>Column</div>
       </a-col>
-
       <a-col
         v-for="item in colCounts[colCountKey]"
         :key="item.toString()"
@@ -119,23 +118,34 @@ export default defineComponent({
 });
 </script>
 <style scoped>
-#components-grid-demo-playground :deep(.ant-col) {
+#components-grid-demo-playground [class~='ant-col'] {
   background: transparent;
   border: 0;
 }
-#components-grid-demo-playground :deep(.ant-col) > div {
-  background: #00a0e9;
+#components-grid-demo-playground [class~='ant-col'] > div {
   height: 120px;
+  font-size: 14px;
   line-height: 120px;
-  font-size: 13px;
+  background: #0092ff;
+  border-radius: 4px;
 }
 #components-grid-demo-playground pre {
+  padding: 8px 16px;
+  font-size: 13px;
   background: #f9f9f9;
   border-radius: 6px;
-  font-size: 13px;
-  padding: 8px 16px;
 }
-[data-theme='dark'] #components-grid-demo-playground pre {
-  background: #2f2f2f;
+#components-grid-demo-playground pre.demo-code {
+  direction: ltr;
+}
+#components-grid-demo-playground .ant-col {
+  padding: 0;
+}
+.code-box-demo #components-grid-demo-playground .ant-row > div {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+[data-theme='dark'] #components-grid-demo-playground [class~='ant-col'] > div {
+  background: #028ac8;
 }
 </style>

components/grid/index.en-US.md

@@ -10,6 +10,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
 
 ## Design concept
 
+<div class="grid-demo">
+  <img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
+</div>
+
 In most business situations, Ant Design Vue needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.
 
 We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.
@@ -37,7 +41,7 @@ Our grid systems support Flex layout to allow the elements within the parent to
 | --- | --- | --- | --- |
 | align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |
 | gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `1.5.0`) | number/object/array | 0 |
-| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |
+| justify | horizontal arrangement of the flex layout: `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | string | `start` |
 | wrap | Auto wrap line | boolean | false |
 
 ### Col

components/grid/index.zh-CN.md

@@ -11,6 +11,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
 
 ## 设计理念
 
+<div class="grid-demo">
+  <img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
+</div>
+
 在多数业务情况下，Ant Design Vue 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
 
 ## 概述
@@ -34,7 +38,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
 | --- | --- | --- | --- |
 | align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |
 | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`1.5.0 后支持`）。 | number/object/array | 0 |
-| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |
+| justify | flex 布局下的水平排列方式： `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | string | `start` |
 | wrap | 是否自动换行 | boolean | false |
 
 ### Col

components/grid/style/index.less

@@ -2,9 +2,6 @@
 @import '../../style/mixins/index';
 @import './mixin';
 
-@row-prefix-cls: ~'@{ant-prefix}-row';
-@col-prefix-cls: ~'@{ant-prefix}-col';
-
 // Grid system
 .@{row-prefix-cls} {
   display: flex;
@@ -46,6 +43,11 @@
   justify-content: space-around;
 }
 
+// x轴有间隔地均分
+.@{row-prefix-cls}-space-evenly {
+  justify-content: space-evenly;
+}
+
 // 顶部对齐
 .@{row-prefix-cls}-top {
   align-items: flex-start;

components/grid/style/mixin.less

@@ -1,49 +1,52 @@
 @import '../../style/mixins/index';
 
+@row-prefix-cls: ~'@{ant-prefix}-row';
+@col-prefix-cls: ~'@{ant-prefix}-col';
+
 // mixins for grid system
 // ------------------------
 
 .loop-grid-columns(@index, @class) when (@index > 0) {
-  .@{ant-prefix}-col@{class}-@{index} {
+  .@{col-prefix-cls}@{class}-@{index} {
     display: block;
     flex: 0 0 percentage((@index / @grid-columns));
     max-width: percentage((@index / @grid-columns));
   }
-  .@{ant-prefix}-col@{class}-push-@{index} {
+  .@{col-prefix-cls}@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));
   }
-  .@{ant-prefix}-col@{class}-pull-@{index} {
+  .@{col-prefix-cls}@{class}-pull-@{index} {
     right: percentage((@index / @grid-columns));
   }
-  .@{ant-prefix}-col@{class}-offset-@{index} {
+  .@{col-prefix-cls}@{class}-offset-@{index} {
     margin-left: percentage((@index / @grid-columns));
   }
-  .@{ant-prefix}-col@{class}-order-@{index} {
+  .@{col-prefix-cls}@{class}-order-@{index} {
     order: @index;
   }
   .loop-grid-columns((@index - 1), @class);
 }
 
 .loop-grid-columns(@index, @class) when (@index = 0) {
-  .@{ant-prefix}-col@{class}-@{index} {
+  .@{col-prefix-cls}@{class}-@{index} {
     display: none;
   }
-  .@{ant-prefix}-col-push-@{index} {
+  .@{col-prefix-cls}-push-@{index} {
     left: auto;
   }
-  .@{ant-prefix}-col-pull-@{index} {
+  .@{col-prefix-cls}-pull-@{index} {
     right: auto;
   }
-  .@{ant-prefix}-col@{class}-push-@{index} {
+  .@{col-prefix-cls}@{class}-push-@{index} {
     left: auto;
   }
-  .@{ant-prefix}-col@{class}-pull-@{index} {
+  .@{col-prefix-cls}@{class}-pull-@{index} {
     right: auto;
   }
-  .@{ant-prefix}-col@{class}-offset-@{index} {
+  .@{col-prefix-cls}@{class}-offset-@{index} {
     margin-left: 0;
   }
-  .@{ant-prefix}-col@{class}-order-@{index} {
+  .@{col-prefix-cls}@{class}-order-@{index} {
     order: 0;
   }
 }

components/grid/style/rtl.less

@@ -1,67 +1,68 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './mixin';
 
-.@{ant-prefix}-row {
+.@{row-prefix-cls} {
   &-rtl {
     direction: rtl;
   }
 }
 
 // mixin
 .loop-grid-columns(@index, @class) when (@index > 0) {
-  .@{ant-prefix}-col@{class}-push-@{index} {
+  .@{col-prefix-cls}@{class}-push-@{index} {
     // reset property in RTL direction
-    &.@{ant-prefix}-col-rtl {
+    &.@{col-prefix-cls}-rtl {
       right: percentage((@index / @grid-columns));
       left: auto;
     }
   }
 
-  .@{ant-prefix}-col@{class}-pull-@{index} {
+  .@{col-prefix-cls}@{class}-pull-@{index} {
     // reset property in RTL direction
-    &.@{ant-prefix}-col-rtl {
+    &.@{col-prefix-cls}-rtl {
       right: auto;
       left: percentage((@index / @grid-columns));
     }
   }
 
-  .@{ant-prefix}-col@{class}-offset-@{index} {
+  .@{col-prefix-cls}@{class}-offset-@{index} {
     // reset property in RTL direction
-    &.@{ant-prefix}-col-rtl {
+    &.@{col-prefix-cls}-rtl {
       margin-right: percentage((@index / @grid-columns));
       margin-left: 0;
     }
   }
 }
 
 .loop-grid-columns(@index, @class) when (@index = 0) {
-  .@{ant-prefix}-col-push-@{index} {
+  .@{col-prefix-cls}-push-@{index} {
     // reset property in RTL direction
-    &.@{ant-prefix}-col-rtl {
+    &.@{col-prefix-cls}-rtl {
       right: auto;
     }
   }
 
-  .@{ant-prefix}-col-pull-@{index} {
-    &.@{ant-prefix}-col-rtl {
+  .@{col-prefix-cls}-pull-@{index} {
+    &.@{col-prefix-cls}-rtl {
       left: auto;
     }
   }
 
-  .@{ant-prefix}-col@{class}-push-@{index} {
-    &.@{ant-prefix}-col-rtl {
+  .@{col-prefix-cls}@{class}-push-@{index} {
+    &.@{col-prefix-cls}-rtl {
       right: auto;
     }
   }
 
-  .@{ant-prefix}-col@{class}-pull-@{index} {
-    &.@{ant-prefix}-col-rtl {
+  .@{col-prefix-cls}@{class}-pull-@{index} {
+    &.@{col-prefix-cls}-rtl {
       left: auto;
     }
   }
 
-  .@{ant-prefix}-col@{class}-offset-@{index} {
-    &.@{ant-prefix}-col-rtl {
+  .@{col-prefix-cls}@{class}-offset-@{index} {
+    &.@{col-prefix-cls}-rtl {
       margin-right: 0;
     }
   }