feat(comp: space): add size and block props

BREAKING CHANGE: size is used instead of gap
IDuxFE · Dec 28, 2021 · 1479892 · 1479892
1 parent 84116bd
commit 1479892
Show file tree

Hide file tree

Showing 18 changed files with 129 additions and 43 deletions.
diff --git a/packages/components/back-top/style/index.less b/packages/components/back-top/style/index.less
@@ -10,13 +10,19 @@
   background-color: @back-top-background-color;
   width: @back-top-width;
   height: @back-top-height;
-  color: @color-white;
+  color: @back-top-color;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: @back-top-font-size;
   border-radius: @back-top-border-radius;
+  box-shadow: @back-top-box-shadow;
   cursor: pointer;
+
+  &:hover {
+    background-color: @back-top-background-hover-color;
+    color: @back-top-hover-color;
+  }
 }
 
 @media screen and (min-width: @screen-lg) and (max-width: @screen-lg-max) {

diff --git a/packages/components/back-top/style/themes/default.variable.less b/packages/components/back-top/style/themes/default.variable.less
@@ -15,4 +15,10 @@
 
 @back-top-bottom: 50px;
 
+@back-top-color: @color-white;
+@back-top-hover-color: @color-white;
 @back-top-background-color: @color-primary;
+@back-top-background-hover-color: @color-primary;
+
+
+@back-top-box-shadow: 0 2px 8px 0 rgba(30,35,43,0.12);
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -76,7 +76,7 @@ const divider: DividerConfig = {
   type: 'horizontal',
 }
 
-const space: SpaceConfig = { gap: 8, wrap: true }
+const space: SpaceConfig = { size: 'sm', wrap: true }
 
 const row: RowConfig = { wrap: true }
 

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -23,6 +23,7 @@ import type { NotificationPlacement, NotificationType } from '@idux/components/n
 import type { PaginationItemRenderFn, PaginationSize, PaginationTotalRenderFn } from '@idux/components/pagination'
 import type { ProgressFormat, ProgressSize } from '@idux/components/progress'
 import type { ResultStatus } from '@idux/components/result'
+import type { SpaceSize } from '@idux/components/space'
 import type { SpinSize, SpinTipAlignType } from '@idux/components/spin'
 import type { StepperSize } from '@idux/components/stepper'
 import type { TableColumnAlign, TableColumnSortOrder, TablePaginationPosition, TableSize } from '@idux/components/table'
@@ -55,7 +56,7 @@ export interface DividerConfig {
 }
 
 export interface SpaceConfig {
-  gap: number | string | [number | string, number | string]
+  size: number | string | [number | string, number | string] | SpaceSize
   wrap: boolean
 }
 

diff --git a/packages/components/space/__tests__/space.spec.ts b/packages/components/space/__tests__/space.spec.ts
@@ -54,7 +54,25 @@ describe('Space', () => {
     expect(wrapper.classes()).toContain('ix-space-vertical')
   })
 
-  test('gap work', async () => {
+  test('block work', async () => {
+    const wrapper = SpaceMount({
+      props: {
+        direction: 'vertical',
+      },
+    })
+
+    expect(wrapper.classes()).not.toContain('ix-space-block')
+
+    await wrapper.setProps({ block: true })
+
+    expect(wrapper.classes()).toContain('ix-space-block')
+
+    await wrapper.setProps({ direction: 'horizontal' })
+
+    expect(wrapper.classes()).not.toContain('ix-space-block')
+  })
+
+  test('size work', async () => {
     const wrapper = SpaceMount()
 
     const wrapperElement = wrapper.element as HTMLElement
@@ -68,7 +86,7 @@ describe('Space', () => {
     expect(itemElements[2].style.marginRight).toBe('')
     expect(itemElements[2].style.paddingBottom).toEqual('8px')
 
-    await wrapper.setProps({ gap: 16 })
+    await wrapper.setProps({ size: 'md' })
 
     expect(wrapperElement.style.marginBottom).toBe('-16px')
     expect(itemElements[0].style.marginRight).toBe('16px')
@@ -78,17 +96,17 @@ describe('Space', () => {
     expect(itemElements[2].style.marginRight).toBe('')
     expect(itemElements[2].style.paddingBottom).toEqual('16px')
 
-    await wrapper.setProps({ gap: `24px` })
+    await wrapper.setProps({ size: 30 })
 
-    expect(wrapperElement.style.marginBottom).toBe('-24px')
-    expect(itemElements[0].style.marginRight).toBe('24px')
-    expect(itemElements[0].style.paddingBottom).toEqual('24px')
-    expect(itemElements[1].style.marginRight).toBe('24px')
-    expect(itemElements[1].style.paddingBottom).toEqual('24px')
+    expect(wrapperElement.style.marginBottom).toBe('-30px')
+    expect(itemElements[0].style.marginRight).toBe('30px')
+    expect(itemElements[0].style.paddingBottom).toEqual('30px')
+    expect(itemElements[1].style.marginRight).toBe('30px')
+    expect(itemElements[1].style.paddingBottom).toEqual('30px')
     expect(itemElements[2].style.marginRight).toBe('')
-    expect(itemElements[2].style.paddingBottom).toEqual('24px')
+    expect(itemElements[2].style.paddingBottom).toEqual('30px')
 
-    await wrapper.setProps({ gap: [8, 16] })
+    await wrapper.setProps({ size: [8, 16] })
 
     expect(wrapperElement.style.marginBottom).toBe('-16px')
     expect(itemElements[0].style.marginRight).toBe('8px')

diff --git a/packages/components/space/demo/Basic.vue b/packages/components/space/demo/Basic.vue
@@ -1,6 +1,6 @@
 <template>
   <IxSpace>
-    Space
+    space:
     <IxButton mode="primary">Button</IxButton>
     <IxButton>Button</IxButton>
     <IxButton danger>Button</IxButton>

diff --git a/packages/components/space/demo/Gap.md → packages/components/space/demo/CustomSize.md b/packages/components/space/demo/Gap.md → packages/components/space/demo/CustomSize.md
diff --git a/packages/components/space/demo/CustomSize.vue b/packages/components/space/demo/CustomSize.vue
@@ -0,0 +1,17 @@
+<template>
+  <IxSpace direction="vertical" block>
+    <IxSlider v-model:value="size" :tooltip-visible="true" :min="0" :max="50"></IxSlider>
+    <IxSpace :size="size">
+      space:
+      <IxButton mode="primary">Button</IxButton>
+      <IxButton>Button</IxButton>
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const size = ref(8)
+</script>
+<style scoped></style>
diff --git a/packages/components/space/demo/Direction.md b/packages/components/space/demo/Direction.md
@@ -9,4 +9,4 @@ title:
 
 相邻组件垂直间距。
 
-可以设置 `width: 100%` 独占一行。
+可以设置 `block` 独占一行。
diff --git a/packages/components/space/demo/Direction.vue b/packages/components/space/demo/Direction.vue
@@ -1,6 +1,6 @@
 <template>
-  <IxSpace direction="vertical">
-    Space
+  <IxSpace direction="vertical" block>
+    space:
     <IxButton mode="primary">Button</IxButton>
     <IxButton>Button</IxButton>
   </IxSpace>

diff --git a/packages/components/space/demo/Gap.vue b/packages/components/space/demo/Gap.vue
diff --git a/packages/components/space/demo/Size.md b/packages/components/space/demo/Size.md
@@ -0,0 +1,10 @@
+---
+order: 2
+title:
+  zh: 尺寸
+  en: Size
+---
+
+## zh
+
+提供了`sm`、`md`、`lg`三种间隔尺寸
diff --git a/packages/components/space/demo/Size.vue b/packages/components/space/demo/Size.vue
@@ -0,0 +1,20 @@
+<template>
+  <IxSpace direction="vertical">
+    <IxRadioGroup v-model:value="size">
+      <IxRadio value="sm">小</IxRadio>
+      <IxRadio value="md">正常</IxRadio>
+      <IxRadio value="lg">大</IxRadio>
+    </IxRadioGroup>
+    <IxSpace :size="size">
+      space:
+      <IxButton mode="primary">Button</IxButton>
+      <IxButton>Button</IxButton>
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const size = ref('md')
+</script>
diff --git a/packages/components/space/docs/Index.zh.md b/packages/components/space/docs/Index.zh.md
@@ -15,15 +15,12 @@ cover:
 | 属性 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `align` | 对齐方式 | `'start' \| 'center' \| 'end' \| 'baseline'` | - | - | `horizontal` 时，默认为 `center` |
+| `block` | 将内容宽度调整为自适应其父元素的宽度 | `boolean` | - | - | 仅在`direction`为 `vertical` 时生效 |
 | `direction` | 间距方向 | `'horizontal' \| 'vertical'` | `'horizontal'` | - | - |
-| `gap` | 间距大小 | `number \| string \| [number \| string, number \| string]` | `8` | ✅  | 默认使用 [`flex` 布局的 `gap` 属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap), 如果遇到不兼容的浏览器，会使用 `margin` 代替。 如果传入一个数组，那么分别表示 `[rowGap, columnGap]` |
+| `size` | 间距大小 | `number \| string \| [number \| string, number \| string] \| 'sm' \| 'md' \| 'lg'` | `sm` | ✅  | 默认使用 [`flex` 布局的 `gap` 属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap), 如果遇到不兼容的浏览器，会使用 `margin` 代替。 如果传入一个数组，那么分别表示 `[rowGap, columnGap]` |
 | `split` | 设置间隔分割符 | `string \| #split` | - | - | - |
 | `wrap` | 是否自动换行 | `boolean` | `true` | ✅ | - |
 
-```ts
-export type SpaceSize = 'sm' | 'md' | 'lg' | number
-```
-
 #### SpaceSlots
 
 | 属性 | 说明 | 参数类型 | 备注 |

diff --git a/packages/components/space/index.ts b/packages/components/space/index.ts
@@ -19,4 +19,5 @@ export type {
   SpacePublicProps as SpaceProps,
   SpaceAlign,
   SpaceDirection,
+  SpaceSize,
 } from './src/types'
diff --git a/packages/components/space/src/Space.tsx b/packages/components/space/src/Space.tsx
@@ -6,6 +6,7 @@
  */
 
 import type { SpaceProps } from './types'
+import type { FormSize } from '@idux/components/form'
 import type { ComputedRef, Slots, VNode } from 'vue'
 
 import { computed, defineComponent, normalizeClass } from 'vue'
@@ -18,6 +19,12 @@ import { spaceProps } from './types'
 
 const flexGapSupported = supportsFlexGap()
 
+const defaultSizeMap = {
+  sm: '8px',
+  md: '16px',
+  lg: '24px',
+} as const
+
 export default defineComponent({
   name: 'IxSpace',
   props: spaceProps,
@@ -36,17 +43,18 @@ export default defineComponent({
     })
 
     const mergedGaps = computed(() => {
-      const { gap = config.gap } = props
-      const gaps = Array.isArray(gap) ? gap : [gap, gap]
-      return gaps.map(gap => convertCssPixel(gap))
+      const { size = config.size } = props
+      const sizes = Array.isArray(size) ? size : [size, size]
+      return sizes.map(size => defaultSizeMap[size as FormSize] || convertCssPixel(size))
     })
 
     const classes = computed(() => {
-      const { direction } = props
+      const { block, direction } = props
       const align = mergedAlign.value
       const prefixCls = mergedPrefixCls.value
       return normalizeClass({
         [prefixCls]: true,
+        [`${prefixCls}-block`]: block && direction === 'vertical',
         [`${prefixCls}-align-${align}`]: align,
         [`${prefixCls}-${direction}`]: true,
         [`${prefixCls}-wrap`]: wrap.value,

diff --git a/packages/components/space/src/types.ts b/packages/components/space/src/types.ts
@@ -6,17 +6,25 @@
  */
 
 import type { IxInnerPropTypes, IxPublicPropTypes } from '@idux/cdk/utils'
+import type { FormSize } from '@idux/components/form'
 import type { DefineComponent, HTMLAttributes } from 'vue'
 
 import { IxPropTypes } from '@idux/cdk/utils'
 
 export type SpaceAlign = 'start' | 'center' | 'end' | 'baseline'
 export type SpaceDirection = 'vertical' | 'horizontal'
+export type SpaceSize = 'sm' | 'md' | 'lg'
 
 export const spaceProps = {
   align: IxPropTypes.oneOf<SpaceAlign>(['start', 'center', 'end', 'baseline']),
+  block: IxPropTypes.bool,
   direction: IxPropTypes.oneOf<SpaceDirection>(['vertical', 'horizontal']).def('horizontal'),
-  gap: IxPropTypes.oneOfType([Number, String, IxPropTypes.arrayOf(Number)]),
+  size: IxPropTypes.oneOfType([
+    Number,
+    String,
+    IxPropTypes.oneOf([Number, String]),
+    IxPropTypes.oneOf<FormSize>(['sm', 'md', 'lg']),
+  ]),
   split: IxPropTypes.oneOfType([String, IxPropTypes.vNode]),
   wrap: IxPropTypes.bool,
 }

diff --git a/packages/components/space/style/index.less b/packages/components/space/style/index.less
@@ -10,6 +10,16 @@
   &-vertical {
     flex-direction: column;
   }
+
+  &-block {
+    width: 100%;
+    >.@{space-prefix} {
+
+      &-item {
+        width: 100%;
+      }
+    }
+  }
 
   &-align {