fix(ui/space): modify the behavior of space in space-around and space…

…-between modes affects: @varlet/ui
varletjs · Nov 20, 2021 · 5abf617 · 5abf617
1 parent 2c9cd02
commit 5abf617
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 17 deletions.
diff --git 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
@@ -2,27 +2,27 @@
 
 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>"
 `;
 
 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
@@ -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
@@ -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
@@ -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>