Skip to content
This repository has been archived by the owner on Jan 8, 2025. It is now read-only.

Commit

Permalink
feat(ui/space): add component space
Browse files Browse the repository at this point in the history
  • Loading branch information
@leno23
leno23 committed Feb 23, 2022
1 parent 84e80ed commit e9b4e0c
Show file tree
Hide file tree
Showing 11 changed files with 1,108 additions and 9 deletions.
584 changes: 584 additions & 0 deletions packages/varlet-vue2-ui/src/space/__tests__/__snapshots__/index.spec.js.snap
View file

Large diffs are not rendered by default.

151 changes: 151 additions & 0 deletions packages/varlet-vue2-ui/src/space/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import VarSpace from '../Space'
import Space from '..'
import { mount } from '@vue/test-utils'
import Vue from 'vue'
import { delay } from '../../utils/jest'
import example from '../example'

test('test space example', async () => {
const wrapper = mount(example)
expect(wrapper.html()).toMatchSnapshot()
wrapper.destroy()
})

test('test space plugin', () => {
Vue.use(Space)
expect(Vue.component(Space.name)).toBeTruthy()
})

test('test space props', async () => {
const template = `
<var-space>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</var-space>
`

const wrapper = mount({
components: {
[VarSpace.name]: VarSpace,
},
template,
})

await delay(0)

await wrapper.setProps({ direction: 'row' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ direction: 'column' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ size: 'mini' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ size: 'small' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ size: 'normal' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ size: 'large' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ size: '10px' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ size: '10rem' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ size: '[10px,20px]' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ wrap: true })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ wrap: false })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ justify: 'start' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ justify: 'end' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ justify: 'center' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ justify: 'space-between' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ justify: 'space-around' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ align: 'start' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ align: 'center' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ align: 'end' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ align: 'stretch' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ align: 'baseline' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ align: 'initial' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ align: 'inherit' })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ inline: true })
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setProps({ inline: false })
expect(wrapper.html()).toMatchSnapshot()

wrapper.destroy()
})

test('test child in space', async () => {
const template = `
<var-space :size="size" :direction="direction" :inline="inline">
<div>div1</div>
<div>div2</div>
<div>div3</div>
</var-space>
`
const wrapper = mount({
components: {
[VarSpace.name]: VarSpace,
},
data: () => ({
size: 'mini',
direction: 'row',
inline: true,
}),
template,
})
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setData({
size: ['10px', '20px'],
})
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setData({
direction: 'column',
})
expect(wrapper.html()).toMatchSnapshot()

await wrapper.setData({
inline: false,
})
expect(wrapper.html()).toMatchSnapshot()
wrapper.destroy()
})
103 changes: 103 additions & 0 deletions packages/varlet-vue2-ui/src/space/docs/en-US.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
# Space

### Intro

The component library provides two auxiliary layout components,
`<var-space>`,
so that you can do flex layout more efficiently.

### Install

```js
import Vue from 'vue'
import { Space } from '@varlet/ui'

Vue.use(Space)
```

### Basic use

```html
<var-space>
<var-button>Button1</var-button>
<var-button>Button2</var-button>
<var-button>Button3</var-button>
</var-space>
```

### Vertical

```html
<var-space direction="column" size="large">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
<var-button>Button3</var-button>
</var-space>
```

### Space Size

```html
<var-space :size="[20, 20]">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
<var-button>Button3</var-button>
<var-button>Button4</var-button>
<var-button>Button5</var-button>
<var-button>Button6</var-button>
</var-space>
```

### Right Align

```html
<var-space justify="end" >
<var-button>Button1</var-button>
<var-button>Button2</var-button>
</var-space>
```

### Space Around

```html
<var-space justify="space-around">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
</var-space>
```

### Align Center

```html
<var-space justify="center">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
</var-space>
```

### Space Between

```html
<var-space justify="space-between">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
</var-space>
```

## API


| Prop | Description | Type | Default |
| ------------- | ------------ | --------- | --------- |
| `align` | Vertical arrangement, Can be set to `stretch` `center` `start` `end` `baseline` | _string_ | `-`|
|`justify`|Horizontal arrangement, Can be set to `start` `end` `center` `space-around` `space-between`|_string_|`start`|
| `size` | spacing, Can be set to `mini` `small` `normal` `large` or `[Vertical, Horizontal]`(Support length unit)| _string \|number \| [string \| number, string \| number]_ |`normal`|
|`wrap`|Whether to exceed the line break|_boolean_|`true`|
|`direction`|Layout direction, Can be set to `row` `column`|_string_|`row`|
|`inline`|Is it an inline element|_boolean_|`false`|

### Slots

| Name | Description | SlotProps |
| --- |------------------| --- |
| `default` | Content of space | `-` |
104 changes: 104 additions & 0 deletions packages/varlet-vue2-ui/src/space/docs/zh-CN.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
# Space 间隔

### 介绍

组件库提供了 `<var-space>` 布局的组件，使您更有效率的进行 flex 布局。

### 引入

```js
import Vue from 'vue'
import { Space } from '@varlet-vue2/ui'

Vue.use(Space)
```

### 基本用法

```html
<var-space>
<var-button>Button1</var-button>
<var-button>Button2</var-button>
<var-button>Button3</var-button>
</var-space>
```

### 垂直

```html
<var-space direction="column" size="large">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
<var-button>Button3</var-button>
</var-space>
```

### 间隙

```html
<var-space :size="[20, 20]">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
<var-button>Button3</var-button>
<var-button>Button4</var-button>
<var-button>Button5</var-button>
<var-button>Button6</var-button>
</var-space>
```

### 靠右

```html
<var-space justify="end" >
<var-button>Button1</var-button>
<var-button>Button2</var-button>
</var-space>
```

### 环绕

```html
<var-space justify="space-around">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
</var-space>
```

### 居中

```html
<var-space justify="center">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
</var-space>
```

### 两端对齐

```html
<var-space justify="space-between">
<var-button>Button1</var-button>
<var-button>Button2</var-button>
</var-space>
```


## API

### 属性

| 参数 | 说明 | 类型 | 默认值 |
| ------------- | ------------ | --------- | --------- |
| `align` | 垂直排列方式 可选值为 `stretch` `center` `start` `end` `baseline` | _string_ | `-`|
|`justify`|水平排列方式 可选值为 `start` `end` `center` `space-around` `space-between`|_string_|`start`|
| `size` | 间距，可选值为 `mini` `small` `normal` `large` 或 `[垂直间距, 水平间距]` (支持长度单位)| _string \| number \| [string \| number, string \| number]_ |`normal`|
|`wrap`|是否超出换行|_boolean_|`true`|
|`direction`|布局方向 可选值为 `row` `column`|_string_|`row`|
|`inline`|是否为行内元素|_boolean_|`false`|


### 插槽

| 插槽名 | 说明 | 参数 |
| --- |----------| --- |
| `default` | Space 内容 | `-` |
Loading

0 comments on commit e9b4e0c

Please sign in to comment.