From 5cd9c06c7133e870dfb171d28de95e97e71f2ede Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Sun, 3 Dec 2023 10:48:24 +0800
Subject: [PATCH] fix(row): [layout] restore the gutter value, and add gutter
demo (#1006)
* fix(row): restore the gutter value, and add gutter demo
* fix(row): fix e2e test
---
.../pc/app/layout/gutter-composition-api.vue | 11 +++++++++++
examples/sites/demos/pc/app/layout/gutter.spec.ts | 3 +++
examples/sites/demos/pc/app/layout/gutter.vue | 11 +++++++++++
.../sites/demos/pc/app/layout/webdoc/layout.js | 15 +++++++++++++--
packages/renderless/src/col/index.ts | 9 +++++++--
packages/renderless/src/col/vue.ts | 5 ++---
packages/vue/src/row/src/index.ts | 6 +++++-
packages/vue/src/row/src/pc.vue | 2 +-
8 files changed, 53 insertions(+), 9 deletions(-)
diff --git a/examples/sites/demos/pc/app/layout/gutter-composition-api.vue b/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
index e811129c6..a80682a40 100644
--- a/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
@@ -12,6 +12,17 @@
gutter {{ gutter }}px
+
+
+ noSpace
+
+
+ noSpace
+
+
+ noSpace
+
+
diff --git a/examples/sites/demos/pc/app/layout/gutter.spec.ts b/examples/sites/demos/pc/app/layout/gutter.spec.ts
index 6aeb7f92b..c730788c8 100644
--- a/examples/sites/demos/pc/app/layout/gutter.spec.ts
+++ b/examples/sites/demos/pc/app/layout/gutter.spec.ts
@@ -13,4 +13,7 @@ test('gutter栅格间隔', async ({ page }) => {
const row3 = layout.nth(2)
await expect(row3.locator('div').first()).toHaveCSS('padding-left', '10px')
+
+ const row4 = layout.first()
+ await expect(row4).toHaveCSS('margin-left', '0px')
})
diff --git a/examples/sites/demos/pc/app/layout/gutter.vue b/examples/sites/demos/pc/app/layout/gutter.vue
index 539950325..7861f1985 100644
--- a/examples/sites/demos/pc/app/layout/gutter.vue
+++ b/examples/sites/demos/pc/app/layout/gutter.vue
@@ -12,6 +12,17 @@
gutter {{ gutter }}px
+
+
+ noSpace
+
+
+ noSpace
+
+
+ noSpace
+
+
diff --git a/examples/sites/demos/pc/app/layout/webdoc/layout.js b/examples/sites/demos/pc/app/layout/webdoc/layout.js
index 39ba14f84..04a26a134 100644
--- a/examples/sites/demos/pc/app/layout/webdoc/layout.js
+++ b/examples/sites/demos/pc/app/layout/webdoc/layout.js
@@ -81,8 +81,9 @@ export default {
'name': { 'zh-CN': '栅格间隔', 'en-US': 'Gutter' },
'desc': {
'zh-CN': `
- 通过使用 Row 组件的 gutter 属性实现栅格间隔。
- 不设置 gutter 时，组件会默认为 Col 设置 左右10px 的padding值。
+ 通过使用 Row 组件的 gutter 属性实现栅格间隔。
+ 不设置 gutter 时，组件会默认为 Col 设置 左右10px 的padding值
+ 通过 noSpace 属性，让子项间没有间距。
`,
'en-US': `
This is done by using the gutter property of the Row component.
@@ -160,6 +161,16 @@ export default {
'desc': { 'zh-CN': '子项的间隔的像素', 'en-US': 'The spacing of the child items in pixels' },
'demoId': 'gutter'
},
+ {
+ 'name': 'noSpace',
+ 'type': 'boolean',
+ 'defaultValue': 'false',
+ 'desc': {
+ 'zh-CN': '子项没有间隔，相当于强制gutter=0的情况',
+ 'en-US': 'Child entries have no spacing, equivalent to forcing gutter=0'
+ },
+ 'demoId': 'gutter'
+ },
{
'name': 'justify',
'type': 'string',
diff --git a/packages/renderless/src/col/index.ts b/packages/renderless/src/col/index.ts
index 0318e7640..5e3074d13 100644
--- a/packages/renderless/src/col/index.ts
+++ b/packages/renderless/src/col/index.ts
@@ -120,10 +120,15 @@ export const getStyle =
const no = props.no
const styles = []
let gutter = parent ? parent.gutter : null
+ let noSpace = parent ? parent.noSpace : null
let order = ''
- gutter = gutter / 2
- styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
+ if (gutter) {
+ gutter = gutter / 2
+ styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
+ } else if (noSpace) {
+ styles.push('padding-left:0;padding-right:0;')
+ }
if (parent && parent.flex && parent.order) {
/* istanbul ignore next */
diff --git a/packages/renderless/src/col/vue.ts b/packages/renderless/src/col/vue.ts
index 1e3005d92..181e22f08 100644
--- a/packages/renderless/src/col/vue.ts
+++ b/packages/renderless/src/col/vue.ts
@@ -14,13 +14,12 @@ import { setSubitemAttrValue, setGlobalAttrValue, getClassName, getStyle, row }
export const api = ['state']
-export const renderless = (props, { computed, reactive, inject }, { parent }) => {
+export const renderless = (props, { computed, reactive }, { parent }) => {
const api = {}
const state = reactive({
row: computed(() => api.row()),
style: computed(() => api.getStyle()),
- className: computed(() => api.getClassName()),
- layout: inject('layout')
+ className: computed(() => api.getClassName())
})
Object.assign(api, {
diff --git a/packages/vue/src/row/src/index.ts b/packages/vue/src/row/src/index.ts
index 55c187c8f..6eec62c61 100644
--- a/packages/vue/src/row/src/index.ts
+++ b/packages/vue/src/row/src/index.ts
@@ -20,7 +20,7 @@ export default defineComponent({
flex: Boolean,
gutter: {
type: Number,
- default: 20,
+ default: 0,
validator(value: number) {
return value >= 0
}
@@ -42,6 +42,10 @@ export default defineComponent({
tag: {
type: String,
default: 'div'
+ },
+ noSpace: {
+ type: Boolean,
+ default: false
}
},
setup(props, context) {
diff --git a/packages/vue/src/row/src/pc.vue b/packages/vue/src/row/src/pc.vue
index 83a12778d..a87a54d3a 100644
--- a/packages/vue/src/row/src/pc.vue
+++ b/packages/vue/src/row/src/pc.vue
@@ -20,7 +20,7 @@ import { renderless, api } from '@opentiny/vue-renderless/row/vue'
import { props, setup, defineComponent } from '@opentiny/vue-common'
export default defineComponent({
- props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag'],
+ props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag', 'noSpace'],
setup(props, context) {
return setup({ props, context, renderless, api })
}