fix(Layout): gutter calculation (#6197)

* Revert "fix(Layout): outside of the screen after setting gutter (#6143)"

This reverts commit a460425b265e9b83a8e835466be60c87b157e73e.

* fix(Layout): gutter calculation

* test: fix snapshot

src/col/index.js

@@ -16,28 +16,15 @@ export default createComponent({
   },
 
   computed: {
-    gutter() {
-      return (this.parent && Number(this.parent.gutter)) || 0;
-    },
-
     style() {
-      const { index, gutter } = this;
+      const { index } = this;
-
+      const { spaces } = this.parent || {};
-      if (gutter) {
-        const count = this.parent.children.length;
-        const padding = (gutter * (count - 1)) / count;
-
-        if (index === 0) {
-          return { paddingRight: `${padding}px` };
-        }
-
-        if (index === count - 1) {
-          return { paddingLeft: `${padding}px` };
-        }
 
+      if (spaces && spaces[index]) {
+        const { left, right } = spaces[index];
         return {
-          paddingLeft: `${padding / 2}px`,
+          paddingLeft: left ? `${left}px` : null,
-          paddingRight: `${padding / 2}px`,
+          paddingRight: right ? `${right}px` : null,
         };
       }
     },

src/col/test/__snapshots__/demo.spec.js.snap

@@ -23,8 +23,8 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-row">
       <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left: 6.666666666666667px; padding-right: 6.666666666666667px;">span: 8</div>
+      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
-      <div class="van-col van-col--8" style="padding-left: 13.333333333333334px;">span: 8</div>
+      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
     </div>
   </div>
   <div>

src/col/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gutter prop 1`] = `
+<div class="van-row">
+  <div class="van-col van-col--24">24</div>
+  <div class="van-col van-col--12" style="padding-right: 12px;">12</div>
+  <div class="van-col van-col--12" style="padding-left: 12px;">12</div>
+  <div class="van-col van-col--8" style="padding-right: 16px;">8</div>
+  <div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
+  <div class="van-col van-col--8" style="padding-left: 16px;">8</div>
+  <div class="van-col van-col--6" style="padding-right: 18px;">6</div>
+  <div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
+  <div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
+  <div class="van-col van-col--6" style="padding-left: 18px;">6</div>
+  <div class="van-col van-col--7" style="padding-right: 18px;">7</div>
+  <div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
+  <div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
+  <div class="van-col van-col--4" style="padding-left: 18px;">4</div>
+  <div class="van-col van-col--3" style="padding-right: 12px;">3</div>
+  <div class="van-col van-col--2" style="padding-left: 12px;">2</div>
+</div>
+`;

src/col/test/index.spec.js

@@ -15,3 +15,34 @@ test('Row click event', () => {
 
   expect(wrapper.emitted('click')).toBeTruthy();
 });
+
+test('gutter prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-row gutter="24">
+        <van-col span="24">24</van-col>
+
+        <van-col span="12">12</van-col>
+        <van-col span="12">12</van-col>
+
+        <van-col span="8">8</van-col>
+        <van-col span="8">8</van-col>
+        <van-col span="8">8</van-col>
+
+        <van-col span="6">6</van-col>
+        <van-col span="6">6</van-col>
+        <van-col span="6">6</van-col>
+        <van-col span="6">6</van-col>
+        
+        <van-col span="7">7</van-col>
+        <van-col span="6">6</van-col>
+        <van-col span="5">5</van-col>
+        <van-col span="4">4</van-col>
+        <van-col span="3">3</van-col>
+        <van-col span="2">2</van-col>
+      </van-row>
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src/image/test/__snapshots__/demo.spec.js.snap

@@ -12,35 +12,35 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-row">
-      <div class="van-col van-col--8" style="padding-right: 16px;">
+      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
         <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>
         </div>
         <div class="text">contain</div>
       </div>
-      <div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
+      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
         <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>
         </div>
         <div class="text">cover</div>
       </div>
-      <div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
+      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
         <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>
         </div>
         <div class="text">fill</div>
       </div>
-      <div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
+      <div class="van-col van-col--8" style="padding-right: 10px;">
         <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>
         </div>
         <div class="text">none</div>
       </div>
-      <div class="van-col van-col--8" style="padding-left: 16px;">
+      <div class="van-col van-col--8" style="padding-left: 10px;">
         <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>
@@ -51,35 +51,35 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-row">
-      <div class="van-col van-col--8" style="padding-right: 16px;">
+      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
         <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>
         </div>
         <div class="text">contain</div>
       </div>
-      <div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
+      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
         <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>
         </div>
         <div class="text">cover</div>
       </div>
-      <div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
+      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
         <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>
         </div>
         <div class="text">fill</div>
       </div>
-      <div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">
+      <div class="van-col van-col--8" style="padding-right: 10px;">
         <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>
         </div>
         <div class="text">none</div>
       </div>
-      <div class="van-col van-col--8" style="padding-left: 16px;">
+      <div class="van-col van-col--8" style="padding-left: 10px;">
         <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
               <!----></i></div>

src/row/index.js

@@ -20,6 +20,47 @@ export default createComponent({
     },
   },
 
+  computed: {
+    spaces() {
+      const gutter = Number(this.gutter);
+
+      if (!gutter) {
+        return;
+      }
+
+      const spaces = [];
+      const groups = [[]];
+
+      let totalSpan = 0;
+      this.children.forEach((item, index) => {
+        totalSpan += Number(item.span);
+
+        if (totalSpan > 24) {
+          groups.push([index]);
+          totalSpan -= 24;
+        } else {
+          groups[groups.length - 1].push(index);
+        }
+      });
+
+      groups.forEach((group) => {
+        const averagePadding = (gutter * (group.length - 1)) / group.length;
+
+        group.forEach((item, index) => {
+          if (index === 0) {
+            spaces.push({ right: group.length > 1 ? averagePadding : 0 });
+          } else {
+            const left = gutter - spaces[item - 1].right;
+            const right = averagePadding - left;
+            spaces.push({ left, right });
+          }
+        });
+      });
+
+      return spaces;
+    },
+  },
+
   methods: {
     onClick(event) {
       this.$emit('click', event);