feat(space): space justify center space- (#182)

* feat: space justify

* docs: en

* fix: space margin gap

* chore: docs

Co-authored-by: 07akioni <07akioni2@gmail.com>

src/space/demos/enUS/center.demo.md

@@ -0,0 +1,9 @@
+# From Center
+
+```html
+<n-space justify="center">
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+</n-space>
+```

src/space/demos/enUS/index.demo-entry.md

@@ -8,6 +8,9 @@ A great invention.
 basic
 vertical
 from-end
+space-between
+space-around
+center
 ```
 
 ## Props
@@ -17,7 +20,7 @@ from-end
 | align | `'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'` | `undefined` |  |
 | inline | `boolean` | `false` |  |
 | item-style | `string \| object` | `undefined` |  |
-| justify | `'start' \| 'end'` | `'start'` |  |
+| justify | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` |  |
 | size | `'small' \| 'medium' \| 'large' \| number \| [number, number]` | `'medium'` |  |
 | vertical | `boolean` | `false` |  |
 | wrap | `boolean` | `true` |  |

src/space/demos/enUS/space-around.demo.md

@@ -0,0 +1,9 @@
+# Space Around
+
+```html
+<n-space justify="space-around" size="large">
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+</n-space>
+```

src/space/demos/enUS/space-between.demo.md

@@ -0,0 +1,11 @@
+# Space Between
+
+In a way, `size` doesn't work on the main axis.
+
+```html
+<n-space justify="space-between" :size="[50, 10]">
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+</n-space>
+```

src/space/demos/zhCN/center.demo.md

@@ -0,0 +1,9 @@
+# 从中间
+
+```html
+<n-space justify="center">
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+</n-space>
+```

src/space/demos/zhCN/index.demo-entry.md

@@ -8,6 +8,9 @@
 basic
 vertical
 from-end
+space-between
+space-around
+center
 grid-debug
 ```
 
@@ -18,7 +21,7 @@ grid-debug
 | align | `'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'` | `undefined` |  |
 | inline | `boolean` | `false` |  |
 | item-style | `string \| object` | `undefined` |  |
-| justify | `'start' \| 'end'` | `'start'` |  |
+| justify | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` |  |
 | size | `'small' \| 'medium' \| 'large' \| number \| [number, number]` | `'medium'` |  |
 | vertical | `boolean` | `false` |  |
 | wrap | `boolean` | `true` |  |

src/space/demos/zhCN/space-around.demo.md

@@ -0,0 +1,9 @@
+# 空间围绕
+
+```html
+<n-space justify="space-around" size="large">
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+</n-space>
+```

src/space/demos/zhCN/space-between.demo.md

@@ -0,0 +1,11 @@
+# 间隙
+
+从某种以上来说, `size` 在主轴并没有用。
+
+```html
+<n-space justify="space-between" :size="[50, 10]">
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+  <n-button>Oops!</n-button>
+</n-space>
+```

src/space/src/Space.tsx

@@ -16,11 +16,12 @@ type Align =
   | 'flex-end'
   | 'flex-start'
 
+type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between'
 const spaceProps = {
   ...(useTheme.props as ThemeProps<SpaceTheme>),
   align: String as PropType<Align>,
   justify: {
-    type: String as PropType<'start' | 'end'>,
+    type: String as PropType<Justify>,
     default: 'start'
   },
   inline: Boolean,
@@ -93,9 +94,11 @@ export default defineComponent({
     } = this
     const children = flatten(getSlot(this))
     const horizontalMargin = `${margin.horizontal}px`
+    const semiHorizontalMargin = `${margin.horizontal / 2}px`
     const verticalMargin = `${margin.vertical}px`
     const semiVerticalMargin = `${margin.vertical / 2}px`
     const lastIndex = children.length - 1
+    const isJustifySpace = justify.startsWith('space-')
     return (
       <div
         role="none"
@@ -103,6 +106,9 @@ export default defineComponent({
         style={{
           display: inline ? 'inline-flex' : 'flex',
           flexDirection: vertical ? 'column' : 'row',
+          justifyContent: ['start', 'end'].includes(justify)
+            ? 'flex-' + justify
+            : justify,
           flexWrap: !wrap || vertical ? 'nowrap' : 'wrap',
           justifyContent: 'flex-' + justify,
           marginTop: vertical ? '' : `-${semiVerticalMargin}`,
@@ -123,7 +129,18 @@ export default defineComponent({
                     marginBottom: index !== lastIndex ? verticalMargin : ''
                   }
                 : {
-                    marginRight: index !== lastIndex ? horizontalMargin : '',
+                    marginRight: isJustifySpace
+                      ? justify === 'space-between' && index === lastIndex
+                        ? ''
+                        : semiHorizontalMargin
+                      : index !== lastIndex
+                        ? horizontalMargin
+                        : '',
+                    marginLeft: isJustifySpace
+                      ? justify === 'space-between' && index === 0
+                        ? ''
+                        : semiHorizontalMargin
+                      : '',
                     paddingTop: semiVerticalMargin,
                     paddingBottom: semiVerticalMargin
                   }