feat(comp:space): add justify prop

packages/components/checkbox/demo/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxCheckboxGroup v-model:value="value" buttoned>
       <IxCheckbox value="beijing">Beijing</IxCheckbox>
       <IxCheckbox value="shanghai">Shanghai</IxCheckbox>

packages/components/checkbox/demo/Gap.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxCheckboxGroup v-model:value="value" :options="options" :gap="16" />
     <IxCheckboxGroup v-model:value="value" :options="options" :gap="16" buttoned />
   </IxSpace>

packages/components/checkbox/demo/Indeterminate.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxCheckbox v-model:checked="isCheckAll" :indeterminate="indeterminate" @change="onCheckAllChange">
       Check all
     </IxCheckbox>

packages/components/checkbox/demo/Options.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxCheckboxGroup v-model:value="value" :options="options"></IxCheckboxGroup>
     <IxCheckboxGroup v-model:value="value" :options="options" buttoned></IxCheckboxGroup>
   </IxSpace>

packages/components/checkbox/demo/Size.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxCheckboxGroup v-model:value="value" :options="options" buttoned size="sm" />
     <IxCheckboxGroup v-model:value="value" :options="options" buttoned />
     <IxCheckboxGroup v-model:value="value" :options="options" buttoned size="lg" />

packages/components/config/src/defaultConfig.ts

@@ -77,10 +77,9 @@ const divider: DividerConfig = {
   labelPlacement: 'center',
   plain: false,
   size: 'md',
-  vertical: false,
 }
 
-const space: SpaceConfig = { size: 'sm', wrap: true }
+const space: SpaceConfig = { size: 'md', wrap: true }
 
 const row: RowConfig = { wrap: true }
 

packages/components/config/src/types.ts

@@ -53,7 +53,6 @@ export interface DividerConfig {
   plain: boolean
   labelPlacement: 'start' | 'center' | 'end'
   size: 'sm' | 'md' | 'lg'
-  vertical: boolean
 }
 
 export interface SpaceConfig {

packages/components/date-picker/demo/Basic.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxDatePicker v-model:value="dateValue" clearable></IxDatePicker>
     <IxDatePicker v-model:value="weekValue" type="week" clearable></IxDatePicker>
     <IxDatePicker v-model:value="monthValue" type="month" clearable></IxDatePicker>

packages/components/date-picker/demo/Disabled.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxDatePicker v-model:value="value" disabled></IxDatePicker>
   </IxSpace>
 </template>

packages/components/date-picker/demo/DisabledDate.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxDatePicker :disabledDate="disabledDate"></IxDatePicker>
   </IxSpace>
 </template>

packages/components/date-picker/demo/Format.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxDatePicker v-model:value="value" format="dd/MM/yyyy"></IxDatePicker>
     <IxDatePicker v-model:value="value" type="week" format="II/RRRR"></IxDatePicker>
     <IxDatePicker v-model:value="value" type="month" format="MM/yyyy"></IxDatePicker>

packages/components/date-picker/demo/FormatCustom.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxDatePicker v-model:value="value" type="week" :format="weekFormat"></IxDatePicker>
     <IxDatePicker v-model:value="value" type="quarter" :format="quarterFormat"></IxDatePicker>
   </IxSpace>

packages/components/divider/docs/Index.zh.md

@@ -19,4 +19,4 @@ cover:
 | `labelPlacement` | 文字显示位置 | `left \|center\| right` | `center`| ✅ | - |
 | `plain` | 文字是否显示为普通正文样式 | `boolean` | `false` | ✅ | - |
 | `size` | 分割线大小 | `'sm' \| 'md' \| 'lg'` | `md` | ✅ | - |
-| `vertical` | 是否为垂直分割线 | `boolean` | `false` | ✅ | - |
+| `vertical` | 是否为垂直分割线 | `boolean` | - | - | - |

packages/components/divider/src/Divider.tsx

@@ -30,7 +30,7 @@ export default defineComponent({
         position,
         size = config.size,
         type,
-        vertical = config.vertical,
+        vertical,
       } = props
 
       __DEV__ &&

packages/components/input-number/demo/Size.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxInputNumber v-model:value="value" :max="10" :min="1" size="sm" @change="handleChange"></IxInputNumber>
     <IxInputNumber v-model:value="value" :max="10" :min="1" @change="handleChange"></IxInputNumber>
     <IxInputNumber v-model:value="value" :max="10" :min="1" size="lg" @change="handleChange"></IxInputNumber>

packages/components/input/demo/Addon.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxInput v-model:value="value" :addonBefore="addonBefore" :addonAfter="addonAfter" />
     <IxInput v-model:value="value">
       <template #addonBefore>

packages/components/input/demo/Basic.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxInput v-model:value="valueRef" placeholder="Basic usage" />
     <IxInput :value="valueRef" disabled placeholder="Disabled" />
     <IxInput :value="valueRef" readonly placeholder="Readonly" />

packages/components/input/demo/PrefixSuffix.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxInput prefix="user" suffix="info-circle" placeholder="Prefix and suffix" />
     <IxInput placeholder="Prefix and suffix">
       <template #prefix><span>￥</span></template>

packages/components/input/demo/Size.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxInput size="sm" placeholder="small size" />
     <IxInput placeholder="medium size" />
     <IxInput size="lg" placeholder="large size" />

packages/components/radio/demo/Buttoned.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxRadioGroup v-model:value="value" buttoned>
       <IxRadio value="beijing">Beijing</IxRadio>
       <IxRadio value="shanghai">Shanghai</IxRadio>

packages/components/radio/demo/Gap.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxRadioGroup v-model:value="value" :options="options" :gap="16" />
     <IxRadioGroup v-model:value="value" :options="options" :gap="16" buttoned />
   </IxSpace>

packages/components/radio/demo/Name.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxRadioGroup v-model:value="value" :options="options" name="city"></IxRadioGroup>
     <IxRadioGroup v-model:value="value2" :options="options" name="city2" buttoned></IxRadioGroup>
     <IxRadioGroup v-model:value="value3" :options="options" name="city3" buttoned mode="primary"></IxRadioGroup>

packages/components/radio/demo/Options.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxRadioGroup v-model:value="value" :options="options"></IxRadioGroup>
     <IxRadioGroup v-model:value="value" :options="options" buttoned></IxRadioGroup>
   </IxSpace>

packages/components/radio/demo/Size.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxRadioGroup v-model:value="value" :options="options" buttoned size="sm"></IxRadioGroup>
     <IxRadioGroup v-model:value="value" :options="options" buttoned></IxRadioGroup>
     <IxRadioGroup v-model:value="value" :options="options" buttoned size="lg">></IxRadioGroup>

packages/components/radio/demo/VerticalGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <IxRadioGroup v-model:value="value">
-    <IxSpace direction="vertical">
+    <IxSpace vertical>
       <IxRadio value="a">A</IxRadio>
       <IxRadio value="b">B</IxRadio>
       <IxRadio value="c">C</IxRadio>

packages/components/rate/demo/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxRate :value="3" icon="star" />
     <IxRate :value="3">
       <template #icon>A</template>

packages/components/rate/demo/Size.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxRate size="sm"></IxRate>
     <IxRate></IxRate>
     <IxRate size="lg"></IxRate>

packages/components/select/demo/Searchable.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxSpace> searchable:<IxRadioGroup v-model:value="searchableValue" :options="searchableOptions" /></IxSpace>
     <IxSelect
       v-model:value="value"

packages/components/space/__tests__/__snapshots__/space.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Space render work 1`] = `
-"<div class=\\"ix-space ix-space-align-center ix-space-horizontal ix-space-wrap\\" style=\\"margin-bottom: -8px;\\">
-  <div class=\\"ix-space-item\\" style=\\"margin-right: 8px; padding-bottom: 8px;\\">Space</div>
-  <div class=\\"ix-space-item\\" style=\\"margin-right: 8px; padding-bottom: 8px;\\"><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
-  <div class=\\"ix-space-item\\" style=\\"padding-bottom: 8px;\\"><button class=\\"ix-button ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
+"<div class=\\"ix-space ix-space-align-center ix-space-justify-start ix-space-wrap\\" style=\\"margin-bottom: -16px;\\">
+  <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\">Space</div>
+  <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\"><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
+  <div class=\\"ix-space-item\\" style=\\"padding-bottom: 16px;\\"><button class=\\"ix-button ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
 </div>"
 `;

packages/components/space/__tests__/space.spec.ts

@@ -20,60 +20,41 @@ describe('Space', () => {
       slots: { default: defaultSlots, ...slots },
     })
   }
+
   renderWork<SpaceProps>(Space, { slots: { default: defaultSlots } })
 
   test('align work', async () => {
-    const wrapper = SpaceMount()
-
-    expect(wrapper.classes()).toContain('ix-space-align-center')
-
-    await wrapper.setProps({ align: 'start' })
+    const wrapper = SpaceMount({ props: { align: 'start' } })
 
     expect(wrapper.classes()).toContain('ix-space-align-start')
 
-    await wrapper.setProps({ align: 'center' })
-
-    expect(wrapper.classes()).toContain('ix-space-align-center')
-
     await wrapper.setProps({ align: 'end' })
 
     expect(wrapper.classes()).toContain('ix-space-align-end')
-
-    await wrapper.setProps({ align: 'baseline' })
-
-    expect(wrapper.classes()).toContain('ix-space-align-baseline')
   })
 
-  test('direction work', async () => {
-    const wrapper = SpaceMount()
-
-    expect(wrapper.classes()).toContain('ix-space-horizontal')
-
-    await wrapper.setProps({ direction: 'vertical' })
+  test('block work', async () => {
+    const wrapper = SpaceMount({ props: { block: true } })
 
-    expect(wrapper.classes()).toContain('ix-space-vertical')
-  })
+    expect(wrapper.classes()).toContain('ix-space-block')
 
-  test('block work', async () => {
-    const wrapper = SpaceMount({
-      props: {
-        direction: 'vertical',
-      },
-    })
+    await wrapper.setProps({ block: false })
 
     expect(wrapper.classes()).not.toContain('ix-space-block')
+  })
 
-    await wrapper.setProps({ block: true })
+  test('justify work', async () => {
+    const wrapper = SpaceMount({ props: { justify: 'start' } })
 
-    expect(wrapper.classes()).toContain('ix-space-block')
+    expect(wrapper.classes()).toContain('ix-space-justify-start')
 
-    await wrapper.setProps({ direction: 'horizontal' })
+    await wrapper.setProps({ justify: 'end' })
 
-    expect(wrapper.classes()).not.toContain('ix-space-block')
+    expect(wrapper.classes()).toContain('ix-space-justify-end')
   })
 
   test('size work', async () => {
-    const wrapper = SpaceMount()
+    const wrapper = SpaceMount({ props: { size: 'sm' } })
 
     const wrapperElement = wrapper.element as HTMLElement
     const itemElements = wrapper.findAll('.ix-space-item').map(item => item.element as HTMLElement)
@@ -117,15 +98,25 @@ describe('Space', () => {
     expect(itemElements[2].style.paddingBottom).toEqual('16px')
   })
 
-  test('split work', async () => {
-    const wrapper = SpaceMount({ props: { split: '/' } })
+  test('separator work', async () => {
+    const wrapper = SpaceMount({ props: { separator: '/' } })
 
-    expect(wrapper.findAll('.ix-space-item-split').length).toBe(2)
-    expect(wrapper.find('.ix-space-item-split').text()).toBe('/')
+    expect(wrapper.findAll('.ix-space-item-separator').length).toBe(2)
+    expect(wrapper.find('.ix-space-item-separator').text()).toBe('/')
 
-    await wrapper.setProps({ split: '-' })
+    await wrapper.setProps({ separator: '-' })
 
-    expect(wrapper.find('.ix-space-item-split').text()).toBe('-')
+    expect(wrapper.find('.ix-space-item-separator').text()).toBe('-')
+  })
+
+  test('vertical work', async () => {
+    const wrapper = SpaceMount({ props: { vertical: true } })
+
+    expect(wrapper.classes()).toContain('ix-space-vertical')
+
+    await wrapper.setProps({ vertical: false })
+
+    expect(wrapper.classes()).not.toContain('ix-space-vertical')
   })
 
   test('wrap work', async () => {
@@ -134,6 +125,7 @@ describe('Space', () => {
     expect(wrapper.classes()).toContain('ix-space-wrap')
 
     await wrapper.setProps({ wrap: false })
+
     expect(wrapper.classes()).not.toContain('ix-space-wrap')
   })
 })

packages/components/space/demo/CustomSize.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace direction="vertical" block>
+  <IxSpace vertical block>
     <IxSlider v-model:value="size" :tooltip-visible="true" :min="0" :max="50"></IxSlider>
     <IxSpace :size="size">
       space:
@@ -14,4 +14,3 @@ import { ref } from 'vue'
 
 const size = ref(8)
 </script>
-<style scoped></style>

packages/components/space/demo/Split.md → packages/components/space/demo/Separator.md

@@ -2,7 +2,7 @@
 order: 6 
 title:
   zh: 分隔符 
-  en: Divider
+  en: Separator
 ---
 
 ## zh

packages/components/space/demo/Split.vue → packages/components/space/demo/Separator.vue

@@ -1,5 +1,5 @@
 <template>
-  <IxSpace split="/">
+  <IxSpace separator="/">
     <a href="">link</a>
     <a href="">link</a>
     <a href="">link</a>

packages/components/space/demo/Size.vue

@@ -1,9 +1,9 @@
 <template>
-  <IxSpace direction="vertical">
+  <IxSpace vertical>
     <IxRadioGroup v-model:value="size">
-      <IxRadio value="sm">小</IxRadio>
-      <IxRadio value="md">正常</IxRadio>
-      <IxRadio value="lg">大</IxRadio>
+      <IxRadio value="sm">Small</IxRadio>
+      <IxRadio value="md">Medium</IxRadio>
+      <IxRadio value="lg">Large</IxRadio>
     </IxRadioGroup>
     <IxSpace :size="size">
       space:

packages/components/space/demo/Vertical.md

@@ -0,0 +1,10 @@
+---
+order: 1 
+title:
+  zh: 垂直方向 
+  en: Vertical
+---
+
+## zh
+
+相邻组件垂直间距。