feat(comp: space): replace gap prop with size

IDuxFE · Dec 27, 2021 · 6086f8d · 6086f8d
1 parent 84116bd
commit 6086f8d
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 54 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: 'md', wrap: true }
 
 const row: RowConfig = { wrap: true }
 

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -55,7 +55,7 @@ export interface DividerConfig {
 }
 
 export interface SpaceConfig {
-  gap: number | string | [number | string, number | string]
+  size: number | [number, number] | FormSize
   wrap: boolean
 }
 

diff --git a/packages/components/space/__tests__/__snapshots__/space.spec.ts.snap b/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-horizontal 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>"
 `;
diff --git a/packages/components/space/__tests__/space.spec.ts b/packages/components/space/__tests__/space.spec.ts
@@ -54,22 +54,12 @@ describe('Space', () => {
     expect(wrapper.classes()).toContain('ix-space-vertical')
   })
 
-  test('gap work', async () => {
+  test('size work', async () => {
     const wrapper = SpaceMount()
 
     const wrapperElement = wrapper.element as HTMLElement
     const itemElements = wrapper.findAll('.ix-space-item').map(item => item.element as HTMLElement)
 
-    expect(wrapperElement.style.marginBottom).toBe('-8px')
-    expect(itemElements[0].style.marginRight).toBe('8px')
-    expect(itemElements[0].style.paddingBottom).toEqual('8px')
-    expect(itemElements[1].style.marginRight).toBe('8px')
-    expect(itemElements[1].style.paddingBottom).toEqual('8px')
-    expect(itemElements[2].style.marginRight).toBe('')
-    expect(itemElements[2].style.paddingBottom).toEqual('8px')
-
-    await wrapper.setProps({ gap: 16 })
-
     expect(wrapperElement.style.marginBottom).toBe('-16px')
     expect(itemElements[0].style.marginRight).toBe('16px')
     expect(itemElements[0].style.paddingBottom).toEqual('16px')
@@ -78,17 +68,27 @@ describe('Space', () => {
     expect(itemElements[2].style.marginRight).toBe('')
     expect(itemElements[2].style.paddingBottom).toEqual('16px')
 
-    await wrapper.setProps({ gap: `24px` })
+    await wrapper.setProps({ size: 'sm' })
+
+    expect(wrapperElement.style.marginBottom).toBe('-8px')
+    expect(itemElements[0].style.marginRight).toBe('8px')
+    expect(itemElements[0].style.paddingBottom).toEqual('8px')
+    expect(itemElements[1].style.marginRight).toBe('8px')
+    expect(itemElements[1].style.paddingBottom).toEqual('8px')
+    expect(itemElements[2].style.marginRight).toBe('')
+    expect(itemElements[2].style.paddingBottom).toEqual('8px')
+
+    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,5 @@
 <template>
   <IxSpace>
-    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,20 @@
+<template>
+  <IxSpace direction="vertical">
+    <IxSlider v-model:value="size" :tooltip-visible="true" :min="0" :max="50"></IxSlider>
+    <IxSpace :size="size">
+      <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>
+.ix-space {
+  width: 100%;
+}
+</style>
diff --git a/packages/components/space/demo/Direction.vue b/packages/components/space/demo/Direction.vue
@@ -1,6 +1,5 @@
 <template>
   <IxSpace direction="vertical">
-    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,19 @@
+<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">
+      <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
@@ -16,14 +16,10 @@ cover:
 | --- | --- | --- | --- | --- | --- |
 | `align` | 对齐方式 | `'start' \| 'center' \| 'end' \| 'baseline'` | - | - | `horizontal` 时，默认为 `center` |
 | `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 \| [number, number] \| 'sm' \| 'md' \| 'lg'` | `md` | ✅  | 默认使用 [`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/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'
@@ -14,7 +15,7 @@ import { supportsFlexGap } from '@idux/cdk/platform'
 import { convertCssPixel, flattenNode } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 
-import { spaceProps } from './types'
+import { defaultSizeMap, spaceProps } from './types'
 
 const flexGapSupported = supportsFlexGap()
 
@@ -36,9 +37,17 @@ 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
+
+      let _size = []
+
+      if (!Array.isArray(size)) {
+        const defaultSizeMapValue = defaultSizeMap[size as FormSize]
+        _size = defaultSizeMapValue ? [defaultSizeMapValue, defaultSizeMapValue] : [size, size]
+      } else {
+        _size = size
+      }
+      return _size.map(item => convertCssPixel(item))
     })
 
     const classes = computed(() => {

diff --git a/packages/components/space/src/types.ts b/packages/components/space/src/types.ts
@@ -6,17 +6,24 @@
  */
 
 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 const defaultSizeMap = {
+  sm: 8,
+  md: 16,
+  lg: 24,
+} as const
+
 export const spaceProps = {
   align: IxPropTypes.oneOf<SpaceAlign>(['start', 'center', 'end', 'baseline']),
   direction: IxPropTypes.oneOf<SpaceDirection>(['vertical', 'horizontal']).def('horizontal'),
-  gap: IxPropTypes.oneOfType([Number, String, IxPropTypes.arrayOf(Number)]),
+  size: IxPropTypes.oneOfType([Number, IxPropTypes.arrayOf(Number), IxPropTypes.oneOf<FormSize>(['sm', 'md', 'lg'])]),
   split: IxPropTypes.oneOfType([String, IxPropTypes.vNode]),
   wrap: IxPropTypes.bool,
 }