From 5abf617b009fbb63409724a3394b207949cc3a2c Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Sat, 20 Nov 2021 14:32:24 +0800
Subject: [PATCH] fix(ui/space): modify the behavior of space in space-around
 and space-between modes

affects: @varlet/ui
---
 packages/varlet-ui/src/space/Space.tsx        | 20 ++++++++++++++-----
 .../__snapshots__/index.spec.js.snap          | 18 ++++++++---------
 packages/varlet-ui/src/space/docs/en-US.md    |  5 ++++-
 packages/varlet-ui/src/space/docs/zh-CN.md    |  5 ++++-
 .../varlet-ui/src/space/example/index.vue     |  5 ++++-
 5 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/packages/varlet-ui/src/space/Space.tsx b/packages/varlet-ui/src/space/Space.tsx
index 98b9aeb261e..ede890c1ca9 100644
--- a/packages/varlet-ui/src/space/Space.tsx
+++ b/packages/varlet-ui/src/space/Space.tsx
@@ -36,12 +36,22 @@ export default defineComponent({
         let margin = '0'
 
         if (direction === 'row') {
-          if (index === 0) {
-            margin = `${y / 2}px ${x / 2}px ${y / 2}px 0`
-          } else if (index === lastIndex) {
-            margin = `${y / 2}px 0 ${y / 2}px ${x / 2}px`
-          } else {
+          if (justify === 'start' || justify === 'center' || justify === 'end') {
+            if (index !== lastIndex) {
+              margin = `${y / 2}px ${x}px ${y / 2}px 0`
+            } else {
+              margin = `${y / 2}px 0`
+            }
+          } else if (justify === 'space-around') {
             margin = `${y / 2}px ${x / 2}px`
+          } else if (justify === 'space-between') {
+            if (index === 0) {
+              margin = `${y / 2}px ${x / 2}px ${y / 2}px 0`
+            } else if (index === lastIndex) {
+              margin = `${y / 2}px 0 ${y / 2}px ${x / 2}px`
+            } else {
+              margin = `${y / 2}px ${x / 2}px`
+            }
           }
         }
 
diff --git a/packages/varlet-ui/src/space/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/space/__tests__/__snapshots__/index.spec.js.snap
index 01ea6985344..1a56dca572b 100644
--- a/packages/varlet-ui/src/space/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/space/__tests__/__snapshots__/index.spec.js.snap
@@ -2,13 +2,13 @@
 
 exports[`test child in space 1`] = `
 "<div class=\\"var-space var--box var-space--inline\\" style=\\"flex-direction: row; justify-content: start; flex-wrap: wrap; margin: -2px 0px;\\">
-  <div style=\\"margin: 2px 2px 2px 0px;\\">
+  <div style=\\"margin: 2px 4px 2px 0px;\\">
     <div>div1</div>
   </div>
-  <div style=\\"margin: 2px 2px;\\">
+  <div style=\\"margin: 2px 4px 2px 0px;\\">
     <div>div2</div>
   </div>
-  <div style=\\"margin: 2px 0px 2px 2px;\\">
+  <div style=\\"margin: 2px 0px;\\">
     <div>div3</div>
   </div>
 </div>"
@@ -16,13 +16,13 @@ exports[`test child in space 1`] = `
 
 exports[`test child in space 2`] = `
 "<div class=\\"var-space var--box var-space--inline\\" style=\\"flex-direction: row; justify-content: start; flex-wrap: wrap; margin: -5px 0px;\\">
-  <div style=\\"margin: 5px 10px 5px 0px;\\">
+  <div style=\\"margin: 5px 20px 5px 0px;\\">
     <div>div1</div>
   </div>
-  <div style=\\"margin: 5px 10px;\\">
+  <div style=\\"margin: 5px 20px 5px 0px;\\">
     <div>div2</div>
   </div>
-  <div style=\\"margin: 5px 0px 5px 10px;\\">
+  <div style=\\"margin: 5px 0px;\\">
     <div>div3</div>
   </div>
 </div>"
@@ -58,13 +58,13 @@ exports[`test child in space 4`] = `
 
 exports[`test space props 1`] = `
 "<div class=\\"var-space var--box\\" style=\\"flex-direction: row; justify-content: start; flex-wrap: wrap; margin: -4px 0px;\\">
-  <div style=\\"margin: 4px 6px 4px 0px;\\">
+  <div style=\\"margin: 4px 12px 4px 0px;\\">
     <div>div1</div>
   </div>
-  <div style=\\"margin: 4px 6px;\\">
+  <div style=\\"margin: 4px 12px 4px 0px;\\">
     <div>div2</div>
   </div>
-  <div style=\\"margin: 4px 0px 4px 6px;\\">
+  <div style=\\"margin: 4px 0px;\\">
     <div>div3</div>
   </div>
 </div>"
diff --git a/packages/varlet-ui/src/space/docs/en-US.md b/packages/varlet-ui/src/space/docs/en-US.md
index 775c50d9d2c..383a98d0394 100644
--- a/packages/varlet-ui/src/space/docs/en-US.md
+++ b/packages/varlet-ui/src/space/docs/en-US.md
@@ -38,10 +38,13 @@ createApp().use(Space)
 ### Space Between
 
 ```html
-<var-space :size="['30px','10px']">
+<var-space :size="[20, 20]">
   <var-button>Button1</var-button>
   <var-button>Button2</var-button>
   <var-button>Button3</var-button>
+  <var-button>Button4</var-button>
+  <var-button>Button5</var-button>
+  <var-button>Button6</var-button>
 </var-space>
 ```
 
diff --git a/packages/varlet-ui/src/space/docs/zh-CN.md b/packages/varlet-ui/src/space/docs/zh-CN.md
index 6c5bccbec61..bd8dd704447 100644
--- a/packages/varlet-ui/src/space/docs/zh-CN.md
+++ b/packages/varlet-ui/src/space/docs/zh-CN.md
@@ -36,10 +36,13 @@ createApp().use(Space)
 ### 间隙
 
 ```html
-<var-space :size="['30px','10px']">
+<var-space :size="[20, 20]">
   <var-button>Button1</var-button>
   <var-button>Button2</var-button>
   <var-button>Button3</var-button>
+  <var-button>Button4</var-button>
+  <var-button>Button5</var-button>
+  <var-button>Button6</var-button>
 </var-space>
 ```
 
diff --git a/packages/varlet-ui/src/space/example/index.vue b/packages/varlet-ui/src/space/example/index.vue
index 05ee47ccc3f..fc7df6406bf 100644
--- a/packages/varlet-ui/src/space/example/index.vue
+++ b/packages/varlet-ui/src/space/example/index.vue
@@ -14,10 +14,13 @@
   </var-space>
 
   <app-type>{{ pack.space }}</app-type>
-  <var-space :size="['30px', '10px']">
+  <var-space :size="[20, 20]">
     <var-button>Button1</var-button>
     <var-button>Button2</var-button>
     <var-button>Button3</var-button>
+    <var-button>Button4</var-button>
+    <var-button>Button5</var-button>
+    <var-button>Button6</var-button>
   </var-space>
 
   <app-type>{{ pack.rightAlign }}</app-type>