diff --git a/src/col/index.js b/src/col/index.js index e6a569f22..056d47c32 100644 --- a/src/col/index.js +++ b/src/col/index.js @@ -16,28 +16,15 @@ export default createComponent({ }, computed: { - gutter() { - return (this.parent && Number(this.parent.gutter)) || 0; - }, - style() { - const { index, gutter } = this; - - if (gutter) { - const count = this.parent.children.length; - const padding = (gutter * (count - 1)) / count; - - if (index === 0) { - return { paddingRight: `${padding}px` }; - } - - if (index === count - 1) { - return { paddingLeft: `${padding}px` }; - } + const { index } = this; + const { spaces } = this.parent || {}; + if (spaces && spaces[index]) { + const { left, right } = spaces[index]; return { - paddingLeft: `${padding / 2}px`, - paddingRight: `${padding / 2}px`, + paddingLeft: left ? `${left}px` : null, + paddingRight: right ? `${right}px` : null, }; } }, diff --git a/src/col/test/__snapshots__/demo.spec.js.snap b/src/col/test/__snapshots__/demo.spec.js.snap index f185770c6..7c04f9b40 100644 --- a/src/col/test/__snapshots__/demo.spec.js.snap +++ b/src/col/test/__snapshots__/demo.spec.js.snap @@ -23,8 +23,8 @@ exports[`renders demo correctly 1`] = `
span: 8
-
span: 8
-
span: 8
+
span: 8
+
span: 8
diff --git a/src/col/test/__snapshots__/index.spec.js.snap b/src/col/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..2d4588095 --- /dev/null +++ b/src/col/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,22 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`gutter prop 1`] = ` +
+
24
+
12
+
12
+
8
+
8
+
8
+
6
+
6
+
6
+
6
+
7
+
6
+
5
+
4
+
3
+
2
+
+`; diff --git a/src/col/test/index.spec.js b/src/col/test/index.spec.js index aa6bce612..dfe0a20ac 100644 --- a/src/col/test/index.spec.js +++ b/src/col/test/index.spec.js @@ -15,3 +15,34 @@ test('Row click event', () => { expect(wrapper.emitted('click')).toBeTruthy(); }); + +test('gutter prop', () => { + const wrapper = mount({ + template: ` + + 24 + + 12 + 12 + + 8 + 8 + 8 + + 6 + 6 + 6 + 6 + + 7 + 6 + 5 + 4 + 3 + 2 + + `, + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/image/test/__snapshots__/demo.spec.js.snap b/src/image/test/__snapshots__/demo.spec.js.snap index e41266caa..2c1671de0 100644 --- a/src/image/test/__snapshots__/demo.spec.js.snap +++ b/src/image/test/__snapshots__/demo.spec.js.snap @@ -12,35 +12,35 @@ exports[`renders demo correctly 1`] = `
-
+
contain
-
+
cover
-
+
fill
-
+
none
-
+
@@ -51,35 +51,35 @@ exports[`renders demo correctly 1`] = `
-
+
contain
-
+
cover
-
+
fill
-
+
none
-
+
diff --git a/src/row/index.js b/src/row/index.js index 76a70f9ab..25f697d20 100644 --- a/src/row/index.js +++ b/src/row/index.js @@ -20,6 +20,47 @@ export default createComponent({ }, }, + computed: { + spaces() { + const gutter = Number(this.gutter); + + if (!gutter) { + return; + } + + const spaces = []; + const groups = [[]]; + + let totalSpan = 0; + this.children.forEach((item, index) => { + totalSpan += Number(item.span); + + if (totalSpan > 24) { + groups.push([index]); + totalSpan -= 24; + } else { + groups[groups.length - 1].push(index); + } + }); + + groups.forEach((group) => { + const averagePadding = (gutter * (group.length - 1)) / group.length; + + group.forEach((item, index) => { + if (index === 0) { + spaces.push({ right: group.length > 1 ? averagePadding : 0 }); + } else { + const left = gutter - spaces[item - 1].right; + const right = averagePadding - left; + spaces.push({ left, right }); + } + }); + }); + + return spaces; + }, + }, + methods: { onClick(event) { this.$emit('click', event);