fix(comp:space): empty item should be hidden (#1263)

IDuxFE · Nov 8, 2022 · 7fed8bc · 7fed8bc
1 parent 1cd30cb
commit 7fed8bc
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 20 deletions.
diff --git a/packages/components/space/demo/Basic.vue b/packages/components/space/demo/Basic.vue
@@ -1,6 +1,6 @@
 <template>
-  <IxSpace>
-    space:
+  <IxSpace align="center">
+    Text
     <IxButton mode="primary">Button</IxButton>
     <IxButton>Button</IxButton>
     <IxButton danger>Button</IxButton>

diff --git a/packages/components/space/demo/CustomSize.vue b/packages/components/space/demo/CustomSize.vue
@@ -1,8 +1,8 @@
 <template>
   <IxSpace vertical block>
-    <IxSlider v-model:value="size" :tooltip-visible="true" :min="0" :max="50"></IxSlider>
-    <IxSpace :size="size">
-      space:
+    <IxSlider v-model:value="size" tooltipVisible :min="0" :max="50"></IxSlider>
+    <IxSpace :size="size" align="center">
+      Text
       <IxButton mode="primary">Button</IxButton>
       <IxButton>Button</IxButton>
     </IxSpace>

diff --git a/packages/components/space/demo/Size.vue b/packages/components/space/demo/Size.vue
@@ -5,8 +5,8 @@
       <IxRadio value="md">Medium</IxRadio>
       <IxRadio value="lg">Large</IxRadio>
     </IxRadioGroup>
-    <IxSpace :size="size">
-      space:
+    <IxSpace :size="size" align="center">
+      Text
       <IxButton mode="primary">Button</IxButton>
       <IxButton>Button</IxButton>
     </IxSpace>

diff --git a/packages/components/space/demo/Vertical.vue b/packages/components/space/demo/Vertical.vue
@@ -1,6 +1,6 @@
 <template>
-  <IxSpace vertical>
-    space:
+  <IxSpace vertical justify="center">
+    Text
     <IxButton mode="primary">Button</IxButton>
     <IxButton>Button</IxButton>
   </IxSpace>

diff --git a/packages/components/space/demo/Wrap.vue b/packages/components/space/demo/Wrap.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxSpace :gap="[8, 16]">
+  <IxSpace :size="[8, 16]">
     <IxButton v-for="item in 20" :key="item">Button</IxButton>
   </IxSpace>
 </template>
diff --git a/packages/components/space/docs/Api.zh.md b/packages/components/space/docs/Api.zh.md
@@ -6,9 +6,9 @@
 
 | 属性 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `align` | 垂直对齐方式 | `'start' \| 'center' \| 'end' \| 'baseline' \| 'stretch'` | - | - | - |
+| `align` | 垂直对齐方式 | `'start' \| 'center' \| 'end' \| 'baseline' \| 'stretch'` | - | - | 参见[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) |
 | `block` | 将内容宽度调整为自适应其父元素的宽度 | `boolean` | - | - | - |
-| `justify` | 水平对齐方式 | `'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between'` | - | - | - |
+| `justify` | 水平对齐方式 | `'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between'` | - | - |  参见[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) |
 | `size` | 间距大小 | `'sm' \| 'md' \| 'lg' \| number \| string \| [number \| string, number \| string]` | `sm` | ✅  | 如果传入一个数组，那么分别表示 `[垂直间距, 水平间距]` |
 | `separator` | 设置间隔分割符 | `string \| #separator` | - | - | - |
 | `vertical` | 是否为垂直方向 | `boolean` | - | - | - |

diff --git a/packages/components/space/src/Space.tsx b/packages/components/space/src/Space.tsx
@@ -44,10 +44,10 @@ export default defineComponent({
       return normalizeClass({
         [prefixCls]: true,
         [`${prefixCls}-align-${align}`]: align,
-        [`${prefixCls}-justify-${justify}`]: justify,
         [`${prefixCls}-block`]: block,
-        [`${prefixCls}-vertical`]: vertical,
+        [`${prefixCls}-justify-${justify}`]: justify,
         [`${prefixCls}-nowrap`]: !wrap.value,
+        [`${prefixCls}-vertical`]: vertical,
       })
     })
 

diff --git a/packages/components/space/style/index.less b/packages/components/space/style/index.less
@@ -1,7 +1,6 @@
 .@{space-prefix} {
   display: inline-flex;
   flex-wrap: wrap;
-  line-height: 1;
 
   &-nowrap {
     flex-wrap: nowrap;
@@ -11,10 +10,7 @@
     flex-direction: column;
   }
 
-  &-block {
-    width: 100%;
-  }
-
+  &-block,
   &-block&-vertical > &-item {
     width: 100%;
   }
@@ -62,4 +58,8 @@
       justify-content: space-between;
     }
   }
+
+  &-item:empty {
+    display: none;
+  }
 }
diff --git a/packages/site/src/styles/themes/index.less b/packages/site/src/styles/themes/index.less
@@ -1,2 +1,2 @@
 // auto generated file
-@import './seer.less';
+@import './default.less';