From daa69aa95424a4bc0bfcd1c4e3326660eaeea0b7 Mon Sep 17 00:00:00 2001 From: leno23 <39647285+leno23@users.noreply.github.com> Date: Tue, 22 Feb 2022 21:00:19 +0800 Subject: [PATCH] feat(ui/layout): add component layout (#8) --- packages/varlet-vue2-ui/src/col/Col.vue | 83 +++++ packages/varlet-vue2-ui/src/col/col.less | 49 +++ packages/varlet-vue2-ui/src/col/docs/zh-CN.md | 25 ++ packages/varlet-vue2-ui/src/col/index.ts | 10 + packages/varlet-vue2-ui/src/col/props.ts | 31 ++ packages/varlet-vue2-ui/src/row/Row.vue | 56 ++++ .../__snapshots__/index.spec.js.snap | 316 ++++++++++++++++++ .../src/row/__tests__/index.spec.js | 204 +++++++++++ packages/varlet-vue2-ui/src/row/docs/en-US.md | 206 ++++++++++++ packages/varlet-vue2-ui/src/row/docs/zh-CN.md | 200 +++++++++++ .../src/row/example/Responsive.vue | 34 ++ .../src/row/example/ResponsiveObject.vue | 70 ++++ .../varlet-vue2-ui/src/row/example/index.vue | 93 ++++++ .../src/row/example/locale/en-US.ts | 6 + .../src/row/example/locale/index.ts | 23 ++ .../src/row/example/locale/zh-CN.ts | 6 + packages/varlet-vue2-ui/src/row/index.ts | 10 + packages/varlet-vue2-ui/src/row/props.ts | 29 ++ packages/varlet-vue2-ui/src/row/row.less | 4 + packages/varlet-vue2-ui/types/col.d.ts | 23 ++ packages/varlet-vue2-ui/types/global.d.ts | 4 + packages/varlet-vue2-ui/types/index.d.ts | 6 +- packages/varlet-vue2-ui/types/row.d.ts | 14 + 23 files changed, 1499 insertions(+), 3 deletions(-) create mode 100644 packages/varlet-vue2-ui/src/col/Col.vue create mode 100644 packages/varlet-vue2-ui/src/col/col.less create mode 100644 packages/varlet-vue2-ui/src/col/docs/zh-CN.md create mode 100644 packages/varlet-vue2-ui/src/col/index.ts create mode 100644 packages/varlet-vue2-ui/src/col/props.ts create mode 100644 packages/varlet-vue2-ui/src/row/Row.vue create mode 100644 packages/varlet-vue2-ui/src/row/__tests__/__snapshots__/index.spec.js.snap create mode 100644 packages/varlet-vue2-ui/src/row/__tests__/index.spec.js create mode 100644 packages/varlet-vue2-ui/src/row/docs/en-US.md create mode 100644 packages/varlet-vue2-ui/src/row/docs/zh-CN.md create mode 100644 packages/varlet-vue2-ui/src/row/example/Responsive.vue create mode 100644 packages/varlet-vue2-ui/src/row/example/ResponsiveObject.vue create mode 100644 packages/varlet-vue2-ui/src/row/example/index.vue create mode 100644 packages/varlet-vue2-ui/src/row/example/locale/en-US.ts create mode 100644 packages/varlet-vue2-ui/src/row/example/locale/index.ts create mode 100644 packages/varlet-vue2-ui/src/row/example/locale/zh-CN.ts create mode 100644 packages/varlet-vue2-ui/src/row/index.ts create mode 100644 packages/varlet-vue2-ui/src/row/props.ts create mode 100644 packages/varlet-vue2-ui/src/row/row.less create mode 100644 packages/varlet-vue2-ui/types/col.d.ts create mode 100644 packages/varlet-vue2-ui/types/row.d.ts diff --git a/packages/varlet-vue2-ui/src/col/Col.vue b/packages/varlet-vue2-ui/src/col/Col.vue new file mode 100644 index 0000000..83d656e --- /dev/null +++ b/packages/varlet-vue2-ui/src/col/Col.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/packages/varlet-vue2-ui/src/col/col.less b/packages/varlet-vue2-ui/src/col/col.less new file mode 100644 index 0000000..eb124e7 --- /dev/null +++ b/packages/varlet-vue2-ui/src/col/col.less @@ -0,0 +1,49 @@ +.var-col { + transition: all 0.25s; +} + +.create-col(@i) when (@i =< 24) { + .var-col--span-@{i} { + flex: 0 0 @i * (100% / 24); + } + + .var-col--offset-@{i} { + margin-left: @i * (100% / 24); + } + + .create-col(@i + 1); +} + +.create-responsive-col(@i, @mode) when (@i =< 24) { + .var-col--span-@{mode}-@{i} { + flex: 0 0 @i * (100% / 24); + } + + .var-col--offset-@{mode}-@{i} { + margin-left: @i * (100% / 24); + } + + .create-responsive-col(@i + 1,@mode); +} + +.create-col(1); + +@media only screen and (max-width: 767px) { + .create-responsive-col(1, xs); +} + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .create-responsive-col(1, sm); +} + +@media only screen and (min-width: 992px) and (max-width: 1199px) { + .create-responsive-col(1, md); +} + +@media only screen and (min-width: 1200px) and (max-width: 1919px) { + .create-responsive-col(1, lg); +} + +@media only screen and (min-width: 1920px) { + .create-responsive-col(1, xl); +} diff --git a/packages/varlet-vue2-ui/src/col/docs/zh-CN.md b/packages/varlet-vue2-ui/src/col/docs/zh-CN.md new file mode 100644 index 0000000..cc3a663 --- /dev/null +++ b/packages/varlet-vue2-ui/src/col/docs/zh-CN.md @@ -0,0 +1,25 @@ +## API + +### 属性 + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| `span` | 列占据的栅格数 | _number \| string_ | `24` | +| `offset` | 列偏移的栅格数 | _number \| string_ | `0` | +| `xs` | `<768px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `sm` | `≥768px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `md` | `≥992px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `lg` | `≥1200px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `xl` | `≥1920px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | + +### 事件 + +| 事件名 | 说明 | 参数 | +| --- | --- | --- | +| `click` | 点击 Col 时触发 | `event: Event` | + +### 插槽 + +| 插槽名 | 说明 | 参数 | +| --- | --- | --- | +| `default` | Col 内容 | `-` | \ No newline at end of file diff --git a/packages/varlet-vue2-ui/src/col/index.ts b/packages/varlet-vue2-ui/src/col/index.ts new file mode 100644 index 0000000..e7a4c20 --- /dev/null +++ b/packages/varlet-vue2-ui/src/col/index.ts @@ -0,0 +1,10 @@ +import type { App } from 'vue' +import Col from './Col.vue' + +Col.install = function (app: App) { + app.component(Col.name, Col) +} + +export const _ColComponent = Col + +export default Col diff --git a/packages/varlet-vue2-ui/src/col/props.ts b/packages/varlet-vue2-ui/src/col/props.ts new file mode 100644 index 0000000..e857fd2 --- /dev/null +++ b/packages/varlet-vue2-ui/src/col/props.ts @@ -0,0 +1,31 @@ +import type { PropType } from 'vue' +import { SizeDescriptor } from './provide' + +export const props = { + span: { + type: [String, Number], + default: 24, + }, + offset: { + type: [String, Number], + default: 0, + }, + onClick: { + type: Function as PropType<(e: Event) => void>, + }, + xs: { + type: [Object as SizeDescriptor, Number, String] as PropType, + }, + sm: { + type: [Object as SizeDescriptor, Number, String] as PropType, + }, + md: { + type: [Object as SizeDescriptor, Number, String] as PropType, + }, + lg: { + type: [Object as SizeDescriptor, Number, String] as PropType, + }, + xl: { + type: [Object as SizeDescriptor, Number, String] as PropType, + }, +} diff --git a/packages/varlet-vue2-ui/src/row/Row.vue b/packages/varlet-vue2-ui/src/row/Row.vue new file mode 100644 index 0000000..41fd865 --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/Row.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/packages/varlet-vue2-ui/src/row/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/row/__tests__/__snapshots__/index.spec.js.snap new file mode 100644 index 0000000..b990e3b --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/__tests__/__snapshots__/index.spec.js.snap @@ -0,0 +1,316 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`test col in responsive 1`] = ` +"
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
" +`; + +exports[`test col in responsive 2`] = ` +"
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
" +`; + +exports[`test col in responsive 3`] = ` +"
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
" +`; + +exports[`test col in responsive 4`] = ` +"
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
" +`; + +exports[`test col in row 1`] = ` +"
+
+
+
1
+
+
+
2
+
+
+
" +`; + +exports[`test col in row 2`] = ` +"
+
+
+
1
+
+
+
2
+
+
+
" +`; + +exports[`test row Responsive example 1`] = ` +"
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
" +`; + +exports[`test row ResponsiveObject example 1`] = ` +"
+
+
+
+ 1 +
+
+
+
+ 2 +
+
+
+
+ 3 +
+
+
+
+ 4 +
+
+
+
" +`; + +exports[`test row example 1`] = ` +"
+
栅格系统
+
+
+
+
span: 8
+
+
+
span: 8
+
+
+
span: 8
+
+
+
span: 8
+
+
+
span: 8
+
+
+
span: 8
+
+
+
+
偏移
+
+
+
+
offset: 8 span: 16
+
+
+
span: 8
+
+
+
span: 8
+
+
+
span: 8
+
+
+
+
对齐
+
+
+
+
span: 8
+
+
+
span: 8
+
+
+
+
+
+
+
span: 8
+
+
+
span: 8
+
+
+
+
+
+
+
span: 8
+
+
+
span: 8
+
+
+
+
+
+
+
span: 8
+
+
+
span: 8
+
+
+
+
+
+
+
span: 8
+
+
+
span: 8
+
+
+
+
列间距
+
+
+
+
span: 8
+
+
+
span: 8
+
+
+
span: 8
+
+
+
span: 8
+
+
+
span: 8
+
+
+
span: 8
+
+
+
+
" +`; + +exports[`test row flex 1`] = ` +"
+
+
" +`; + +exports[`test row flex 2`] = ` +"
+
+
" +`; + +exports[`test row flex 3`] = ` +"
+
+
" +`; + +exports[`test row flex 4`] = ` +"
+
+
" +`; + +exports[`test row flex 5`] = ` +"
+
+
" +`; + +exports[`test row flex 6`] = ` +"
+
+
" +`; + +exports[`test row flex 7`] = ` +"
+
+
" +`; + +exports[`test row flex 8`] = ` +"
+
+
" +`; diff --git a/packages/varlet-vue2-ui/src/row/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/row/__tests__/index.spec.js new file mode 100644 index 0000000..39ae72d --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/__tests__/index.spec.js @@ -0,0 +1,204 @@ +import example from '../example' +import responsive from '../example/Responsive' +import responsiveObject from '../example/ResponsiveObject' +import Row from '..' +import VarRow from '../Row' +import Col from '../../col' +import VarCol from '../../col/Col' +import { mount } from '@vue/test-utils' +import Vue from 'vue' +import { delay } from '../../utils/jest' + +test('test row example', () => { + const wrapper = mount(example) + expect(wrapper.html()).toMatchSnapshot() + wrapper.destroy() +}) + +test('test row Responsive example', () => { + const wrapper = mount(responsive) + expect(wrapper.html()).toMatchSnapshot() + wrapper.destroy() +}) + +test('test row ResponsiveObject example', () => { + const wrapper = mount(responsiveObject) + expect(wrapper.html()).toMatchSnapshot() + wrapper.destroy() +}) + +test('test row & col plugin', () => { + Vue.use(Row).use(Col) + expect(Vue.component(Row.name)).toBeTruthy() + expect(Vue.component(Col.name)).toBeTruthy() +}) + +test('test row flex', async () => { + const template = `` + + const wrapper = mount({ + components: { + [VarRow.name]: VarRow, + }, + template, + }) + + await delay(0) + + await wrapper.setProps({ justify: 'flex-start' }) + expect(wrapper.html()).toMatchSnapshot() + + await wrapper.setProps({ justify: 'flex-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: 'flex-start' }) + expect(wrapper.html()).toMatchSnapshot() + + await wrapper.setProps({ align: 'center' }) + expect(wrapper.html()).toMatchSnapshot() + + await wrapper.setProps({ align: 'flex-end' }) + expect(wrapper.html()).toMatchSnapshot() + + wrapper.destroy() +}) + +test('test row onClick null callback', () => { + const template = `` + const wrapper = mount({ + components: { + [VarRow.name]: VarRow, + }, + template, + }) + wrapper.trigger('click') + wrapper.destroy() +}) + +test('test row onClick', async () => { + const onClick = jest.fn() + + const wrapper = mount(VarRow, { + listeners: { + click: onClick, + }, + }) + await wrapper.find('.var-row').trigger('click') + expect(onClick).toHaveBeenCalledTimes(1) + wrapper.destroy() +}) + +test('test col in row', async () => { + const template = ` + + 1 + 2 + + ` + const wrapper = mount({ + data: () => ({ + span: 8, + offset: 4, + }), + components: { + [VarCol.name]: VarCol, + [VarRow.name]: VarRow, + }, + template, + }) + expect(wrapper.html()).toMatchSnapshot() + + await wrapper.setData({ + span: 12, + offset: 0, + }) + expect(wrapper.html()).toMatchSnapshot() + wrapper.destroy() +}) + +test('test col onClick', () => { + const onClick = jest.fn() + const template = ` + + + + ` + + const wrapper = mount({ + methods: { + onClick, + }, + components: { + [VarCol.name]: VarCol, + [VarRow.name]: VarRow, + }, + template, + }) + + wrapper.find('.var-col').trigger('click') + expect(onClick).toHaveBeenCalledTimes(1) + wrapper.destroy() +}) + +test('test col in responsive', async () => { + const template = ` + + 1 + 2 + 3 + 4 + + ` + const wrapper = mount({ + data: () => ({ + xs: 24, + sm: 12, + md: 8, + lg: 6, + xl: 4, + }), + components: { + [VarCol.name]: VarCol, + [VarRow.name]: VarRow, + }, + template, + }) + expect(wrapper.html()).toMatchSnapshot() + + await wrapper.setData({ + xs: 12, + sm: 24, + md: 12, + lg: 12, + xl: 12, + }) + expect(wrapper.html()).toMatchSnapshot() + + await wrapper.setData({ + xs: { span: 12, offset: 12 }, + sm: { span: 12, offset: 12 }, + md: { span: 12, offset: 12 }, + lg: { span: 12, offset: 12 }, + xl: { span: 12, offset: 12 }, + }) + expect(wrapper.html()).toMatchSnapshot() + + await wrapper.setData({ + xs: 24, + sm: { span: '12', offset: 12 }, + md: { span: 12, offset: '12' }, + lg: '12', + xl: { span: '12', offset: '12' }, + }) + expect(wrapper.html()).toMatchSnapshot() + wrapper.destroy() +}) diff --git a/packages/varlet-vue2-ui/src/row/docs/en-US.md b/packages/varlet-vue2-ui/src/row/docs/en-US.md new file mode 100644 index 0000000..7b17a8a --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/docs/en-US.md @@ -0,0 +1,206 @@ +# Layout + +### Intro + +The component library provides two auxiliary layout components, +`` and ``, +so that you can layout more efficiently. + +### Install + +```js +import { createApp } from 'vue' +import { Row, Col } from '@varlet/ui' + +createApp().use(Row).use(Col) +``` + +### Gird System + +```html +The `` component divides a row into an average grid of 24 columns (24 pieces). The `` provides the +span property to set the number of pieces in the column and the `offset` property to set the number of pieces `offset` +in the column. +``` + +```html + + span: 8 + span: 8 + span: 8 + span: 8 + span: 8 + span: 8 + +``` + +### Offset + +```html + + offset: 8 span: 16 + span: 8 + span: 8 + span: 8 + +``` + +### Alignment + +The layout component is laid out in `flex` by default, +using the `` `justify` and `align` properties to set the alignment of the main and cross axes. + +```html + + span: 8 + span: 8 + + + span: 8 + span: 8 + + + span: 8 + span: 8 + + + span: 8 + span: 8 + + + span: 8 + span: 8 + +``` + +### Gutter + +```html + + span: 8 + span: 8 + span: 8 + span: 8 + span: 8 + span: 8 + +``` + +### Responsive Layout + +#### Basic Usage + +```vue +import BasicExample from '../example/Responsive.vue' +``` + +```html + + 1 + 2 + 3 + 4 + +``` +#### Column Props Object + +```vue +import ObjectExample from '../example/ResponsiveObject.vue' +``` + +```html + + + 1 + + + 2 + + + 3 + + + 4 + + +``` + +## API + +### Props + +#### Row Props + +| Prop | Description | Type | Default | +| --------- | ---------------------------------------------------------------------------------------------------- | ------------------ | ------------ | +| `gutter` | Col gutter | _string \| number_ | `0` | +| `justify` | Spindle alignment, optional value is `flex-start` `flex-end` `center` `space-between` `space-around` | _string_ | `flex-start` | +| `align` | Cross axis alignment, optional value is `flex-start` `flex-end` `center` | _string_ | `flex-start` | + +#### Col Props + +| Prop | Description | Type | Default | +|----------| --------------------------------------------------- |----------| ------- | +| `span` | Number of grids occupied by columns | _string \| number_ | `24` | +| `offset` | Number of grids for column offsets | _string \| number_ | `0` | +| `xs` | `<768px` Responsive columns or column props object | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `sm` | `≥768px` Responsive columns or column props object | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `md` | `≥992px` Responsive columns or column props object | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `lg` | `≥1200px` Responsive columns or column props object | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `xl` | `≥1920px` Responsive columns or column props object | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | + +### Events + +#### Row Events + +| Event | Description | Arguments | +| ------- | ---------------------------- | -------------- | +| `click` | Triggered when you click Row | `event: Event` | + +#### Col Events + +| Event | Description | Arguments | +| ------- | ---------------------------- | -------------- | +| `click` | Triggered when you click Col | `event: Event` | + +### Slots + +#### Row Slots + +| Slot | Description | Arguments | +| --------- | ----------- | --------- | +| `default` | Row content | `-` | + +#### Col Slots + +| Slot | Description | Arguments | +| --------- | ----------- | --------- | +| `default` | Col content | `-` | diff --git a/packages/varlet-vue2-ui/src/row/docs/zh-CN.md b/packages/varlet-vue2-ui/src/row/docs/zh-CN.md new file mode 100644 index 0000000..4aa050d --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/docs/zh-CN.md @@ -0,0 +1,200 @@ +# 布局 + +### 介绍 + +组件库提供了 `` 和 `` 两个辅助布局的组件，使您更有效率的进行布局。 + +### 引入 + +```js +import Vue from 'vue' +import { Row, Col } from '@varlet-vue2/ui' + +Vue.use(Row) +Vue.use(Col) +``` + +### 栅格系统 + +`` 组件把一行平均划分为 24列 栅格( 24份 )，`` 提供 `span` 属性设置这一列所占的份数，`offset` 属性设置这一列偏移的份数。 + +```html + + span: 8 + span: 8 + span: 8 + span: 8 + span: 8 + span: 8 + +``` + +### 偏移 + +```html + + offset: 8 span: 16 + span: 8 + span: 8 + span: 8 + +``` + +### 对齐 + +布局组件默认使用 `flex` 布局，通过 ``的 `justify` 和 `align` 属性设置主轴和交叉轴的对齐方式。 + +```html + + span: 8 + span: 8 + + + span: 8 + span: 8 + + + span: 8 + span: 8 + + + span: 8 + span: 8 + + + span: 8 + span: 8 + +``` + +### 列间距 + +```html + + span: 8 + span: 8 + span: 8 + span: 8 + span: 8 + span: 8 + +``` + +### 响应式布局 + +#### 基本用法 + +```vue +import BasicExample from '../example/Responsive.vue' +``` + +```html + + 1 + 2 + 3 + 4 + +``` + +#### 属性对象 +```vue +import ObjectExample from '../example/ResponsiveObject.vue' +``` + +```html + + + 1 + + + 2 + + + 3 + + + 4 + + +``` + +## API + +### 属性 + +#### Row Props + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| `gutter` | 列间距 | _string \| number_ | `0` | +| `justify` | 主轴对齐方式, 可选值为 `flex-start` `flex-end` `center` `space-between` `space-around` | _string_ | `flex-start` | +| `align` | 交叉轴对齐方式, 可选值为 `flex-start` `flex-end` `center` | _string_ | `flex-start` | + +#### Col Props + +| 参数 | 说明 | 类型 | 默认值 | +|----------|--------------------------|----------|---------| +| `span` | 列占据的栅格数 | _string \| number_ | `24` | +| `offset` | 列偏移的栅格数 | _string \| number_ | `0` | +| `xs` | `<768px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `sm` | `≥768px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `md` | `≥992px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `lg` | `≥1200px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | +| `xl` | `≥1920px` 响应式栅格数或者栅格属性对象 | _string \| number \| { span?: number \| string, offset?: number \| string }_ | `-` | + +### 事件 + +#### Row Events + +| 事件名 | 说明 | 参数 | +| --- | --- | --- | +| `click` | 点击 Row 时触发 | `event: Event` | + +#### Col Events + +| 事件名 | 说明 | 参数 | +| --- | --- | --- | +| `click` | 点击 Col 时触发 | `event: Event` | + +### 插槽 + +#### Row Slots + +| 插槽名 | 说明 | 参数 | +| --- | --- | --- | +| `default` | Row 内容 | `-` | + +#### Col Slots + +| 插槽名 | 说明 | 参数 | +| --- | --- | --- | +| `default` | Col 内容 | `-` | \ No newline at end of file diff --git a/packages/varlet-vue2-ui/src/row/example/Responsive.vue b/packages/varlet-vue2-ui/src/row/example/Responsive.vue new file mode 100644 index 0000000..6807d34 --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/example/Responsive.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/packages/varlet-vue2-ui/src/row/example/ResponsiveObject.vue b/packages/varlet-vue2-ui/src/row/example/ResponsiveObject.vue new file mode 100644 index 0000000..5355c1d --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/example/ResponsiveObject.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/packages/varlet-vue2-ui/src/row/example/index.vue b/packages/varlet-vue2-ui/src/row/example/index.vue new file mode 100644 index 0000000..bc63c45 --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/example/index.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/packages/varlet-vue2-ui/src/row/example/locale/en-US.ts b/packages/varlet-vue2-ui/src/row/example/locale/en-US.ts new file mode 100644 index 0000000..40929ca --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/example/locale/en-US.ts @@ -0,0 +1,6 @@ +export default { + girdSystem: 'Grid System', + offset: 'Offset', + alignment: 'Alignment', + gutter: 'Gutter', +} diff --git a/packages/varlet-vue2-ui/src/row/example/locale/index.ts b/packages/varlet-vue2-ui/src/row/example/locale/index.ts new file mode 100644 index 0000000..d2e375e --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/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/row/example/locale/zh-CN.ts b/packages/varlet-vue2-ui/src/row/example/locale/zh-CN.ts new file mode 100644 index 0000000..1646050 --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/example/locale/zh-CN.ts @@ -0,0 +1,6 @@ +export default { + girdSystem: '栅格系统', + offset: '偏移', + alignment: '对齐', + gutter: '列间距', +} diff --git a/packages/varlet-vue2-ui/src/row/index.ts b/packages/varlet-vue2-ui/src/row/index.ts new file mode 100644 index 0000000..96eb9ce --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/index.ts @@ -0,0 +1,10 @@ +import type { App } from 'vue' +import Row from './Row.vue' + +Row.install = function (app: App) { + app.component(Row.name, Row) +} + +export const _RowComponent = Row + +export default Row diff --git a/packages/varlet-vue2-ui/src/row/props.ts b/packages/varlet-vue2-ui/src/row/props.ts new file mode 100644 index 0000000..bdac42e --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/props.ts @@ -0,0 +1,29 @@ +import type { PropType } from 'vue' + +function justifyValidator(justify: string) { + return ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'].includes(justify) +} + +function alignValidator(align: string) { + return ['flex-start', 'center', 'flex-end'].includes(align) +} + +export const props = { + gutter: { + type: [String, Number], + default: 0, + }, + justify: { + type: String as PropType<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'>, + default: 'flex-start', + validator: justifyValidator, + }, + align: { + type: String as PropType<'flex-start' | 'center' | 'flex-end'>, + default: 'flex-start', + validator: alignValidator, + }, + onClick: { + type: Function as PropType<(e: Event) => void>, + }, +} diff --git a/packages/varlet-vue2-ui/src/row/row.less b/packages/varlet-vue2-ui/src/row/row.less new file mode 100644 index 0000000..4c59e38 --- /dev/null +++ b/packages/varlet-vue2-ui/src/row/row.less @@ -0,0 +1,4 @@ +.var-row { + display: flex; + flex-wrap: wrap; +} diff --git a/packages/varlet-vue2-ui/types/col.d.ts b/packages/varlet-vue2-ui/types/col.d.ts new file mode 100644 index 0000000..f39be51 --- /dev/null +++ b/packages/varlet-vue2-ui/types/col.d.ts @@ -0,0 +1,23 @@ +import { VarComponent } from './varComponent' + +export type SizeDescriptor = { + span?: number | string + offset?: number | string +} + +export interface ColProps { + span?: string | number + offset?: string | number + xs?: string | number | SizeDescriptor | undefined + sm?: string | number | SizeDescriptor | undefined + md?: string | number | SizeDescriptor | undefined + lg?: string | number | SizeDescriptor | undefined + xl?: string | number | SizeDescriptor | undefined + onClick?: (e: Event) => void +} + +export class Col extends VarComponent { + $props: ColProps +} + +export class _ColComponent extends Col {} diff --git a/packages/varlet-vue2-ui/types/global.d.ts b/packages/varlet-vue2-ui/types/global.d.ts index 6150846..dff44f9 100644 --- a/packages/varlet-vue2-ui/types/global.d.ts +++ b/packages/varlet-vue2-ui/types/global.d.ts @@ -11,6 +11,7 @@ declare module 'vue' { VarDivider: typeof import('@varlet-vue2/ui')['_DividerComponent'] VarForm: typeof import('@varlet-vue2/ui')['_FormComponent'] VarImage: typeof import('@varlet-vue2/ui')['_ImageComponent'] + VarInput: typeof import('@varlet-vue2/ui')['_InputComponent'] VarLazy: typeof import('@varlet-vue2/ui')['_LazyComponent'] VarLoading: typeof import('@varlet-vue2/ui')['_LoadingComponent'] VarLocale: typeof import('@varlet-vue2/ui')['_LocaleComponent'] @@ -23,6 +24,9 @@ declare module 'vue' { VarSnackbar: typeof import('@varlet-vue2/ui')['_SnackbarComponent'] VarSwitch: typeof import('@varlet-vue2/ui')['_SwitchComponent'] VarSticky: typeof import('@varlet-vue2/ui')['_StickyComponent'] + VarRow: typeof import('@varlet-vue2/ui')['_RowComponent'] + VarCol: typeof import('@varlet-vue2/ui')['_ColComponent'] + VarTable: typeof import('@varlet-vue2/ui')['_TableComponent'] } } diff --git a/packages/varlet-vue2-ui/types/index.d.ts b/packages/varlet-vue2-ui/types/index.d.ts index 18e368d..66281fd 100644 --- a/packages/varlet-vue2-ui/types/index.d.ts +++ b/packages/varlet-vue2-ui/types/index.d.ts @@ -14,6 +14,7 @@ export * from './countdown' export * from './divider' export * from './form' export * from './image' +export * from './input' export * from './lazy' export * from './loading' export * from './locale' @@ -25,9 +26,8 @@ export * from './rate' export * from './skeleton' export * from './snackbar' export * from './sticky' -export * from './loading' -export * from './menu' -export * from './input' +export * from './row' +export * from './col' export * from './table' export * from './pagination' export * from './switch' diff --git a/packages/varlet-vue2-ui/types/row.d.ts b/packages/varlet-vue2-ui/types/row.d.ts new file mode 100644 index 0000000..1d323af --- /dev/null +++ b/packages/varlet-vue2-ui/types/row.d.ts @@ -0,0 +1,14 @@ +import { VarComponent } from './varComponent' + +export interface RowProps { + gutter?: string | number + justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' + align?: 'flex-start' | 'center' | 'flex-end' + onClick?: (e: Event) => void +} + +export class Row extends VarComponent { + $props: RowProps +} + +export class _RowComponent extends Row {}