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

examples/sites/demos/pc/app/layout/gutter-composition-api.vue

@@ -12,6 +12,17 @@
           <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
       </tiny-row>
+      <tiny-row :gutter="0" noSpace>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+      </tiny-row>
     </tiny-layout>
   </div>
 </template>

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')
 })

examples/sites/demos/pc/app/layout/gutter.vue

@@ -12,6 +12,17 @@
           <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
       </tiny-row>
+      <tiny-row :gutter="0" noSpace>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+        <tiny-col :span="4">
+          <div class="col">noSpace</div>
+        </tiny-col>
+      </tiny-row>
     </tiny-layout>
   </div>
 </template>

examples/sites/demos/pc/app/layout/webdoc/layout.js

@@ -81,8 +81,9 @@ export default {
       'name': { 'zh-CN': '栅格间隔', 'en-US': 'Gutter' },
       'desc': {
         'zh-CN': `
-            通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。
-            不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值。
+            通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。<br>
+            不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值<br>
+            通过 <code>noSpace</code> 属性，让子项间没有间距。
           `,
         'en-US': `
             This is done by using the <code>gutter</code> property of the <code>Row</code> 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',

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 = ''
 
+    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  */

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, {

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) {

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 })
   }