From e9b4e0c10f01dd9883d641b00383f342ff6b56ce Mon Sep 17 00:00:00 2001 From: wuyangfan <1102042793@qq.com> Date: Wed, 23 Feb 2022 14:51:02 +0800 Subject: [PATCH] feat(ui/space): add component space --- .../__snapshots__/index.spec.js.snap | 584 ++++++++++++++++++ .../src/space/__tests__/index.spec.js | 151 +++++ .../varlet-vue2-ui/src/space/docs/en-US.md | 103 +++ .../varlet-vue2-ui/src/space/docs/zh-CN.md | 104 ++++ .../src/space/example/index.vue | 85 +++ .../src/space/example/locale/en-US.ts | 9 + .../src/space/example/locale/index.ts | 23 + .../src/space/example/locale/zh-CN.ts | 9 + packages/varlet-vue2-ui/types/global.d.ts | 10 +- packages/varlet-vue2-ui/types/index.d.ts | 13 +- packages/varlet-vue2-ui/types/space.d.ts | 26 + 11 files changed, 1108 insertions(+), 9 deletions(-) create mode 100644 packages/varlet-vue2-ui/src/space/__tests__/__snapshots__/index.spec.js.snap create mode 100644 packages/varlet-vue2-ui/src/space/__tests__/index.spec.js create mode 100644 packages/varlet-vue2-ui/src/space/docs/en-US.md create mode 100644 packages/varlet-vue2-ui/src/space/docs/zh-CN.md create mode 100644 packages/varlet-vue2-ui/src/space/example/index.vue create mode 100644 packages/varlet-vue2-ui/src/space/example/locale/en-US.ts create mode 100644 packages/varlet-vue2-ui/src/space/example/locale/index.ts create mode 100644 packages/varlet-vue2-ui/src/space/example/locale/zh-CN.ts create mode 100644 packages/varlet-vue2-ui/types/space.d.ts diff --git a/packages/varlet-vue2-ui/src/space/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/space/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 0000000..0c59ab4 --- /dev/null +++ b/packages/varlet-vue2-ui/src/space/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,584 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`test child in space 1`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test child in space 2`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test child in space 3`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test child in space 4`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space example 1`] = ` +"
+
基本用法
+
+
+
+
+
+
+
+
垂直
+
+
+
+
+
+
+
+
间隙
+
+
+
+
+
+
+
+
+
+
+
+
+
+
靠右
+
+
+
+
+
+
环绕
+
+
+
+
+
+
居中
+
+
+
+
+
+
两端对齐
+
+
+
+
+
+
" +`; + +exports[`test space props 1`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 2`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 3`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 4`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 5`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 6`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 7`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 8`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 9`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 10`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 11`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 12`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 13`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 14`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 15`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 16`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 17`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 18`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 19`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 20`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 21`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 22`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 23`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 24`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; + +exports[`test space props 25`] = ` +"
+
+
div1
+
+
+
+
div2
+
+
+
+
div3
+
+
" +`; diff --git a/packages/varlet-vue2-ui/src/space/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/space/__tests__/index.spec.js new file mode 100644 index 0000000..7ad3ca8 --- /dev/null +++ b/packages/varlet-vue2-ui/src/space/__tests__/index.spec.js @@ -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 = ` + +
div1
+
div2
+
div3
+ + ` + + 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 = ` + +
div1
+
div2
+
div3
+ + ` + 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() +}) diff --git a/packages/varlet-vue2-ui/src/space/docs/en-US.md b/packages/varlet-vue2-ui/src/space/docs/en-US.md new file mode 100644 index 0000000..27cbaf2 --- /dev/null +++ b/packages/varlet-vue2-ui/src/space/docs/en-US.md @@ -0,0 +1,103 @@ +# Space + +### Intro + +The component library provides two auxiliary layout components, +``, +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 + + Button1 + Button2 + Button3 + +``` + +### Vertical + +```html + + Button1 + Button2 + Button3 + +``` + +### Space Size + +```html + + Button1 + Button2 + Button3 + Button4 + Button5 + Button6 + +``` + +### Right Align + +```html + + Button1 + Button2 + +``` + +### Space Around + +```html + + Button1 + Button2 + +``` + +### Align Center + +```html + + Button1 + Button2 + +``` + +### Space Between + +```html + + Button1 + Button2 + +``` + +## 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 | `-` | diff --git a/packages/varlet-vue2-ui/src/space/docs/zh-CN.md b/packages/varlet-vue2-ui/src/space/docs/zh-CN.md new file mode 100644 index 0000000..4e7f0eb --- /dev/null +++ b/packages/varlet-vue2-ui/src/space/docs/zh-CN.md @@ -0,0 +1,104 @@ +# Space 间隔 + +### 介绍 + +组件库提供了 `` 布局的组件，使您更有效率的进行 flex 布局。 + +### 引入 + +```js +import Vue from 'vue' +import { Space } from '@varlet-vue2/ui' + +Vue.use(Space) +``` + +### 基本用法 + +```html + + Button1 + Button2 + Button3 + +``` + +### 垂直 + +```html + + Button1 + Button2 + Button3 + +``` + +### 间隙 + +```html + + Button1 + Button2 + Button3 + Button4 + Button5 + Button6 + +``` + +### 靠右 + +```html + + Button1 + Button2 + +``` + +### 环绕 + +```html + + Button1 + Button2 + +``` + +### 居中 + +```html + + Button1 + Button2 + +``` + +### 两端对齐 + +```html + + Button1 + Button2 + +``` + + +## 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 内容 | `-` | diff --git a/packages/varlet-vue2-ui/src/space/example/index.vue b/packages/varlet-vue2-ui/src/space/example/index.vue new file mode 100644 index 0000000..b73c9ff --- /dev/null +++ b/packages/varlet-vue2-ui/src/space/example/index.vue @@ -0,0 +1,85 @@ + + diff --git a/packages/varlet-vue2-ui/src/space/example/locale/en-US.ts b/packages/varlet-vue2-ui/src/space/example/locale/en-US.ts new file mode 100644 index 0000000..b29a37c --- /dev/null +++ b/packages/varlet-vue2-ui/src/space/example/locale/en-US.ts @@ -0,0 +1,9 @@ +export default { + baseUse: 'Basic use', + vertical: 'Vertical', + space: 'Space Size', + rightAlign: 'Right Align', + around: 'Space Around', + center: 'Align Center', + between: 'Space Between', +} diff --git a/packages/varlet-vue2-ui/src/space/example/locale/index.ts b/packages/varlet-vue2-ui/src/space/example/locale/index.ts new file mode 100644 index 0000000..d2e375e --- /dev/null +++ b/packages/varlet-vue2-ui/src/space/example/locale/index.ts @@ -0,0 +1,23 @@ +// lib +import _zhCN from '../../../locale/zh-CN' +import _enCN from '../../../locale/en-US' +// mobile example doc +import zhCN from './zh-CN' +import enUS from './en-US' +import { useLocale, add as _add, use as _use } from '../../../locale' + +const { add, use: exampleUse, pack, packs, merge } = useLocale() + +const use = (lang: string) => { + _use(lang) + exampleUse(lang) +} + +export { add, pack, packs, merge, use } + +// lib +_add('zh-CN', _zhCN) +_add('en-US', _enCN) +// mobile example doc +add('zh-CN', zhCN as any) +add('en-US', enUS as any) diff --git a/packages/varlet-vue2-ui/src/space/example/locale/zh-CN.ts b/packages/varlet-vue2-ui/src/space/example/locale/zh-CN.ts new file mode 100644 index 0000000..ff047ea --- /dev/null +++ b/packages/varlet-vue2-ui/src/space/example/locale/zh-CN.ts @@ -0,0 +1,9 @@ +export default { + baseUse: '基本用法', + vertical: '垂直', + space: '间隙', + rightAlign: '靠右', + around: '环绕', + center: '居中', + between: '两端对齐', +} diff --git a/packages/varlet-vue2-ui/types/global.d.ts b/packages/varlet-vue2-ui/types/global.d.ts index dff44f9..722ba1e 100644 --- a/packages/varlet-vue2-ui/types/global.d.ts +++ b/packages/varlet-vue2-ui/types/global.d.ts @@ -7,7 +7,9 @@ declare module 'vue' { VarCard: typeof import('@varlet-vue2/ui')['_CardComponent'] VarCell: typeof import('@varlet-vue2/ui')['_CellComponent'] VarChip: typeof import('@varlet-vue2/ui')['_ChipComponent'] + VarCol: typeof import('@varlet-vue2/ui')['_ColComponent'] VarCountdown: typeof import('@varlet-vue2/ui')['_CountdownComponent'] + VarCounter: typeof import('@varlet-vue2/ui')['_CounterComponent'] VarDivider: typeof import('@varlet-vue2/ui')['_DividerComponent'] VarForm: typeof import('@varlet-vue2/ui')['_FormComponent'] VarImage: typeof import('@varlet-vue2/ui')['_ImageComponent'] @@ -16,17 +18,19 @@ declare module 'vue' { VarLoading: typeof import('@varlet-vue2/ui')['_LoadingComponent'] VarLocale: typeof import('@varlet-vue2/ui')['_LocaleComponent'] VarMenu: typeof import('@varlet-vue2/ui')['_MenuComponent'] + VarPagination: typeof import('@varlet-vue2/ui')['_PaginationComponent'] VarProgress: typeof import('@varlet-vue2/ui')['_ProgressComponent'] VarRadio: typeof import('@varlet-vue2/ui')['_RadioComponent'] VarRadioGroup: typeof import('@varlet-vue2/ui')['_RadioGroupComponent'] VarRate: typeof import('@varlet-vue2/ui')['_RateComponent'] + VarRow: typeof import('@varlet-vue2/ui')['_RowComponent'] VarSkeleton: typeof import('@varlet-vue2/ui')['_SkeletonComponent'] VarSnackbar: typeof import('@varlet-vue2/ui')['_SnackbarComponent'] - VarSwitch: typeof import('@varlet-vue2/ui')['_SwitchComponent'] + VarSpace: typeof import('@varlet-vue2/ui')['_SpaceComponent'] VarSticky: typeof import('@varlet-vue2/ui')['_StickyComponent'] - VarRow: typeof import('@varlet-vue2/ui')['_RowComponent'] - VarCol: typeof import('@varlet-vue2/ui')['_ColComponent'] + VarSwitch: typeof import('@varlet-vue2/ui')['_SwitchComponent'] VarTable: typeof import('@varlet-vue2/ui')['_TableComponent'] + VarTimePicker: typeof import('@varlet-vue2/ui')['_TimePickerComponent'] } } diff --git a/packages/varlet-vue2-ui/types/index.d.ts b/packages/varlet-vue2-ui/types/index.d.ts index 66281fd..847a03e 100644 --- a/packages/varlet-vue2-ui/types/index.d.ts +++ b/packages/varlet-vue2-ui/types/index.d.ts @@ -6,11 +6,12 @@ export * from './appBar' export * from './backTop' export * from './badge' export * from './button' -export * from './timePicker' export * from './card' export * from './cell' export * from './chip' +export * from './col' export * from './countdown' +export * from './counter' export * from './divider' export * from './form' export * from './image' @@ -19,18 +20,18 @@ export * from './lazy' export * from './loading' export * from './locale' export * from './menu' +export * from './pagination' export * from './progress' export * from './radio' export * from './radioGroup' export * from './rate' +export * from './row' export * from './skeleton' export * from './snackbar' +export * from './space' export * from './sticky' -export * from './row' -export * from './col' -export * from './table' -export * from './pagination' export * from './switch' -export * from './counter' +export * from './table' +export * from './timePicker' export * from './varComponent' export * from './varDirective' diff --git a/packages/varlet-vue2-ui/types/space.d.ts b/packages/varlet-vue2-ui/types/space.d.ts new file mode 100644 index 0000000..511be30 --- /dev/null +++ b/packages/varlet-vue2-ui/types/space.d.ts @@ -0,0 +1,26 @@ +import { VarComponent } from './varComponent' + +export type SpaceAlign = 'stretch' | 'center' | 'start' | 'end' | 'baseline' | 'initial' | 'inherit' + +export type SpaceDirection = 'row' | 'column' + +export type SpaceJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' + +export type SpaceInternalSize = 'mini' | 'small' | 'normal' | 'large' + +export type SpaceSize = 'mini' | 'small' | 'normal' | 'large' | number | string | (number | string)[] + +export interface SpaceProps { + align?: SpaceAlign + size?: SpaceSize + warp?: boolean + direction?: SpaceDirection + justify?: SpaceJustify + inline?: boolean +} + +export class Space extends VarComponent { + $props: SpaceProps +} + +export class _SpaceComponent extends Space {}