From 0a393fc63e80997f4130d3a1c37e2ded9cf898fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=AD=E6=96=87=E5=AD=A6?= <1355729285@qq.com>
Date: Sun, 21 Nov 2021 23:34:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(grid):=20=E4=BC=98=E5=8C=96col=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6=E5=93=8D=E5=BA=94=E5=BC=8F=E7=9A=84=E9=97=AE=E9=A2=98?=
=?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96API=E6=96=87=E6=A1=A3=E6=96=87?=
=?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
packages/devui-vue/devui/grid/src/grid-types.ts | 12 +++++++-----
packages/devui-vue/devui/grid/src/use-grid.ts | 2 +-
packages/devui-vue/devui/grid/src/use-screen.ts | 2 +-
packages/devui-vue/docs/components/grid/index.md | 6 +++---
4 files changed, 12 insertions(+), 10 deletions(-)
diff --git a/packages/devui-vue/devui/grid/src/grid-types.ts b/packages/devui-vue/devui/grid/src/grid-types.ts
index a6491cf2..4d4328b7 100644
--- a/packages/devui-vue/devui/grid/src/grid-types.ts
+++ b/packages/devui-vue/devui/grid/src/grid-types.ts
@@ -6,11 +6,13 @@ export type Justify = 'start' | 'end' | 'center' | 'around' | 'between'
export interface GutterScreenSizes {
xs?: number | number[]
- sm: number | number[]
- md: number | number[]
- lg: number | number[]
- xl: number | number[]
- xxl: number | number[]
+ sm?: number | number[]
+ md?: number | number[]
+ lg?: number | number[]
+ xl?: number | number[]
+ xxl?: number | number[]
+ // 如果没有必选项，gutter将是unknown类型
+ [key: string]: number | number[]
}
export const rowProps = {
diff --git a/packages/devui-vue/devui/grid/src/use-grid.ts b/packages/devui-vue/devui/grid/src/use-grid.ts
index a303a362..b32211bf 100644
--- a/packages/devui-vue/devui/grid/src/use-grid.ts
+++ b/packages/devui-vue/devui/grid/src/use-grid.ts
@@ -18,7 +18,7 @@ export function useColClassNames (props: ColPropsBaseClass) {
}
function setSpace (val:string) {
- return val && ` ${val.trim()} `
+ return ` ${val.trim()}${val && ' '}`
}
export function useSize (colSizes: ScreenSizes) {
diff --git a/packages/devui-vue/devui/grid/src/use-screen.ts b/packages/devui-vue/devui/grid/src/use-screen.ts
index 98d86f99..2c99c630 100644
--- a/packages/devui-vue/devui/grid/src/use-screen.ts
+++ b/packages/devui-vue/devui/grid/src/use-screen.ts
@@ -1,7 +1,7 @@
export const RESULT_SCREEN = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs']
-const screenMedias = {
+export const screenMedias = {
xs: 'screen and (max-width: 575px)',
sm: 'screen and (min-width: 576px)',
md: 'screen and (min-width: 768px)',
diff --git a/packages/devui-vue/docs/components/grid/index.md b/packages/devui-vue/docs/components/grid/index.md
index 2a67551b..a45e41dc 100644
--- a/packages/devui-vue/docs/components/grid/index.md
+++ b/packages/devui-vue/docs/components/grid/index.md
@@ -259,7 +259,7 @@ Col的flex属性支持flex填充。
Col
Col
- Col
+ Col
```
@@ -287,7 +287,7 @@ Col的flex属性支持flex填充。
:::
-### d-grid
+### API
d-row 参数
@@ -295,7 +295,7 @@ d-row 参数
| ---- | ---- | ---- | ---- | --------- | --------- |
| align | `string` | `'top'` | flex 布局下的垂直对齐方式：`'top'`，`'middle'`，`'bottom'` | [垂直对齐](#垂直对齐) | |
| justify | `string` | `'start'` | flex 布局下的垂直对齐方式：`'start'`，`'end'`，`'center'`，`'space-around'`，`'space-between'` | [垂直对齐](#垂直对齐) | |
-| gutter | `number\|array\|object` | 0 | 栅格间隔，数值形式：水平间距。对象形式支持响应式： { xs: 8, sm: 16, md: 24}。数组形式：[水平间距, 垂直间距]。 | [对齐](#对齐) | |
+| gutter | `number\|array\|object` | 0 | 栅格间隔，数值形式：水平间距。对象形式支持响应式： { xs: 8, sm: 16, md: 24}。数组形式：[水平间距, 垂直间距]。 | [子元素的间隔](#子元素的间隔) | |
| wrap | `boolean` | false | 是否自动换行 | | |
d-col 参数
--
Gitee
From 2c7b1fcfec9984e37a9818d97a9f35559f4155ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=AD=E6=96=87=E5=AD=A6?= <1355729285@qq.com>
Date: Sun, 21 Nov 2021 23:45:29 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0grid=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../devui/grid/__tests__/grid.spec.ts | 8 --
.../devui/grid/__tests__/grid.spec.tsx | 116 ++++++++++++++++++
2 files changed, 116 insertions(+), 8 deletions(-)
delete mode 100644 packages/devui-vue/devui/grid/__tests__/grid.spec.ts
create mode 100644 packages/devui-vue/devui/grid/__tests__/grid.spec.tsx
diff --git a/packages/devui-vue/devui/grid/__tests__/grid.spec.ts b/packages/devui-vue/devui/grid/__tests__/grid.spec.ts
deleted file mode 100644
index fa33b976..00000000
--- a/packages/devui-vue/devui/grid/__tests__/grid.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { Row } from '../index';
-
-describe('grid test', () => {
- it('grid init render', async () => {
- // todo
- })
-})
diff --git a/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx b/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx
new file mode 100644
index 00000000..85861434
--- /dev/null
+++ b/packages/devui-vue/devui/grid/__tests__/grid.spec.tsx
@@ -0,0 +1,116 @@
+import { mount } from '@vue/test-utils'
+import { Row, Col } from '../index'
+import { Justify, Align, ColProps } from '../src/grid-types'
+import { screenMedias } from '../src/use-screen'
+
+describe('d-row', () => {
+ window.matchMedia = jest.fn().mockImplementation(query => {
+ return {
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: jest.fn(), // deprecated
+ removeListener: jest.fn(), // deprecated
+ addEventListener: jest.fn(),
+ removeEventListener: jest.fn(),
+ dispatchEvent: jest.fn(),
+ }
+ })
+
+ it('d-row init', () => {
+ const wrapper = mount(Row)
+ expect(wrapper.classes()).toEqual(['devui-row', 'devui-row-align-top', 'devui-row-justify-start'])
+ })
+
+ const justify: Justify[] = ['start', 'end', 'center', 'around', 'between']
+ justify.forEach(item => {
+ it(`d-row justify ${item}`, () => {
+ const wrapper = mount(Row, {
+ props: { justify: item }
+ })
+ expect(wrapper.classes(`devui-row-justify-${item}`)).toBe(true)
+ })
+ })
+
+ const align: Align[] = ['top', 'middle', 'bottom']
+ align.forEach(item => {
+ it(`d-row align ${item}`, () => {
+ const wrapper = mount(Row, {
+ props: { align: item }
+ })
+ expect(wrapper.classes(`devui-row-align-${item}`)).toBe(true)
+ })
+ })
+
+ it('d-row wrap', () => {
+ const wrapper = mount(Row, {
+ props: { wrap: true }
+ })
+ expect(wrapper.classes('devui-row-wrap')).toBe(true)
+ })
+})
+
+describe('d-col', () => {
+
+ const value = 8
+
+ it('d-col flex', () => {
+ const component =
+
+
+ const wrapper = mount(component)
+ expect(wrapper.find('.devui-col').attributes()).toMatchObject({ style: `flex: ${value} ${value} auto;` })
+ })
+
+
+ it('d-col order', () => {
+ const component =
+
+
+ const wrapper = mount(component)
+ expect(wrapper.find('.devui-col').attributes()).toMatchObject({ style: `order: ${value};` })
+ })
+
+ const props: (keyof ColProps)[] = ['span', 'offset', 'pull', 'push']
+ props.forEach(item => {
+ const prop = { [item]: value }
+ const component =
+
+
+ it(`d-col ${item}`, () => {
+ const wrapper = mount(component)
+ expect(wrapper.findAll(`.devui-col-${item}-${value}`).length).toBe(1)
+ })
+ })
+
+ const sizes = Object.keys(screenMedias) as (keyof typeof screenMedias)[]
+ sizes.forEach(item => {
+ const prop = { [item]: value }
+ const component =
+
+
+ it(`d-col ${item} span`, () => {
+ const wrapper = mount(component)
+ console.log(wrapper.html())
+ expect(wrapper.findAll(`.devui-col-${item}-span-${value}`).length)
+ })
+ })
+
+ it('d-row gutter', () => {
+ const component1 =
+
+
+ const component2 =
+
+
+ // const component3 =
+ //
+ //
+ const wrapper1 = mount(component1)
+ const wrapper2 = mount(component2)
+ // const wrapper3 = mount(component3)
+ expect(wrapper1.find('.devui-col').attributes()).toMatchObject({ style: 'padding: 0px 4px 0px 4px;' })
+ expect(wrapper2.find('.devui-col').attributes()).toMatchObject({ style: 'padding: 4px 4px 4px 4px;' })
+ // expect(wrapper3.find('.devui-col').attributes()).toMatchObject({ style: 'padding: 4px 4px 4px 4px;' })
+ })
+})
--
Gitee