Merge branch 'feat/space' into dev

varletjs · Nov 17, 2021 · 146a958 · 146a958
2 parents 8c85875 + 36659a4
commit 146a958
Show file tree

Hide file tree

Showing 17 changed files with 1,068 additions and 15 deletions.
diff --git a/packages/varlet-ui/src/row/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/row/__tests__/__snapshots__/index.spec.js.snap
@@ -2,15 +2,15 @@
 
 exports[`test col in row 1`] = `
 "<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
-  <div class=\\"var-col var--box var-col--span-8 var-col--offset-4\\" style=\\"padding-left: 0px; padding-right: 0px;\\"></div>
-  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 0px; padding-right: 0px;\\"></div>
+  <div class=\\"var-col var--box var-col--span-8 var-col--offset-4\\" style=\\"padding-left: 0px; padding-right: 0px;\\">1</div>
+  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 0px; padding-right: 0px;\\">2</div>
 </div>"
 `;
 
 exports[`test col in row 2`] = `
 "<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
-  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 0px; padding-right: 5px;\\"></div>
-  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 5px; padding-right: 0px;\\"></div>
+  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 0px; padding-right: 0px;\\">1</div>
+  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 0px; padding-right: 0px;\\">2</div>
 </div>"
 `;
 

diff --git a/packages/varlet-ui/src/row/__tests__/index.spec.js b/packages/varlet-ui/src/row/__tests__/index.spec.js
@@ -4,7 +4,9 @@ import VarRow from '../Row'
 import Col from '../../col'
 import VarCol from '../../col/Col'
 import { mount } from '@vue/test-utils'
-import { createApp, h } from 'vue'
+import { createApp } from 'vue'
+import { delay } from '../../utils/jest'
+
 
 test('test row example', () => {
   const wrapper = mount(example)
@@ -19,7 +21,16 @@ test('test row & col plugin', () => {
 })
 
 test('test row flex', async () => {
-  const wrapper = mount(VarRow)
+  const template = `<var-row></var-row>`
+
+  const wrapper = mount({
+    components: {
+      [VarRow.name]: VarRow
+    },
+    template,
+  })
+
+  await delay(0)
 
   await wrapper.setProps({ justify: 'flex-start' })
   expect(wrapper.html()).toMatchSnapshot()
@@ -49,7 +60,13 @@ test('test row flex', async () => {
 })
 
 test('test row onClick null callback', () => {
-  const wrapper = mount(VarRow)
+  const template = `<var-row></var-row>`
+  const wrapper = mount({
+    components: {
+      [VarRow.name]: VarRow
+    },
+    template
+  })
   wrapper.trigger('click')
   wrapper.unmount()
 })
@@ -68,20 +85,22 @@ test('test row onClick', () => {
 })
 
 test('test col in row', async () => {
+  const template = `
+    <var-row>
+      <var-col :span='span' :offset='offset'>1</var-col>
+      <var-col :span='12'>2</var-col>
+    </var-row>
+  `
   const wrapper = mount({
     data: () => ({
       span: 8,
       offset: 4,
     }),
-    render() {
-      return h(
-        VarRow,
-        {
-          gutter: '10px',
-        },
-        () => [h(VarCol, { span: this.span, offset: this.offset }), h(VarCol, { span: 12 })]
-      )
+    components:{
+      [VarCol.name]:VarCol,
+      [VarRow.name]:VarRow
     },
+    template
   })
   expect(wrapper.html()).toMatchSnapshot()
 

diff --git a/packages/varlet-ui/src/space/Space.tsx b/packages/varlet-ui/src/space/Space.tsx
@@ -0,0 +1,70 @@
+import { defineComponent } from 'vue'
+import { internalSizeValidator, props } from './props'
+import type { SpaceInternalSize, SpaceSize } from './props'
+import { toPxNum } from '../utils/elements'
+import { isArray } from '../utils/shared'
+import './space.less'
+
+const internalSizes: Record<SpaceInternalSize, number[]> = {
+  mini: [4, 4],
+  small: [6, 6],
+  normal: [8, 12],
+  large: [12, 20],
+}
+
+export default defineComponent({
+  name: 'VarSpace',
+  props,
+  setup(props, { slots }) {
+    const getSize = (size: SpaceSize, isInternalSize: boolean) => {
+      return isInternalSize
+        ? internalSizes[size as SpaceInternalSize]
+        : isArray(size)
+        ? size.map(toPxNum)
+        : [toPxNum(size), toPxNum(size)]
+    }
+
+    return () => {
+      const { inline, justify, align, wrap, direction, size } = props
+      const children = slots.default?.() ?? []
+      const lastIndex = children.length - 1
+      const isInternalSize = internalSizeValidator(size)
+      const [y, x] = getSize(size, isInternalSize)
+
+      const spacers = children.map((child, index) => {
+        let margin = '0'
+
+        if (direction === 'row') {
+          if (index === 0) {
+            margin = `${y / 2}px ${x / 2}px ${y / 2}px 0`
+          } else if (index === lastIndex) {
+            margin = `${y / 2}px 0 ${y / 2}px ${x / 2}px`
+          } else {
+            margin = `${y / 2}px ${x / 2}px`
+          }
+        }
+
+        if (direction === 'column' && index !== lastIndex) {
+          margin = `0 0 ${y}px 0`
+        }
+
+        return <div style={{ margin }}>{child}</div>
+      })
+
+      return (
+        <div
+          class={['var-space', 'var--box', inline ? 'var-space--inline' : null]}
+          style={{
+            flexDirection: direction,
+            justifyContent: justify,
+            alignItems: align,
+            flexWrap: wrap ? 'wrap' : 'nowrap',
+            margin: direction === 'row' ? `-${y / 2}px 0` : undefined,
+          }}
+        >
+          {spacers}
+        </div>
+      )
+    }
+  },
+})