feat: layout component

2020-07-05 16:00:20 +08:00
parent 4a25ebf9ab
commit e671e22ea5
12 changed files with 677 additions and 31 deletions
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-row">
+      <div class="van-col van-col--8">span: 8</div>
+      <div class="van-col van-col--8">span: 8</div>
+      <div class="van-col van-col--8">span: 8</div>
+    </div>
+    <div class="van-row">
+      <div class="van-col van-col--4">span: 4</div>
+      <div class="van-col van-col--10 van-col--offset-4">
+        offset: 4, span: 10
+      </div>
+    </div>
+    <div class="van-row">
+      <div class="van-col van-col--12 van-col--offset-12">
+        offset: 12, span: 12
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-row">
+      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
+      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
+      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
+    </div>
+  </div>
+  <div>
+    <div class="van-row van-row--flex">
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+    </div>
+    <div class="van-row van-row--flex van-row--justify-center">
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+    </div>
+    <div class="van-row van-row--flex van-row--justify-end">
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+    </div>
+    <div class="van-row van-row--flex van-row--justify-space-between">
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+    </div>
+    <div class="van-row van-row--flex van-row--justify-space-around">
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+      <div class="van-col van-col--6">span: 6</div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gutter prop 1`] = `
+<div class="van-row">
+  <div class="van-col van-col--24">24</div>
+  <div class="van-col van-col--12" style="padding-right: 12px;">12</div>
+  <div class="van-col van-col--12" style="padding-left: 12px;">12</div>
+  <div class="van-col van-col--8" style="padding-right: 16px;">8</div>
+  <div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
+  <div class="van-col van-col--8" style="padding-left: 16px;">8</div>
+  <div class="van-col van-col--6" style="padding-right: 18px;">6</div>
+  <div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
+  <div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
+  <div class="van-col van-col--6" style="padding-left: 18px;">6</div>
+  <div class="van-col van-col--7" style="padding-right: 18px;">7</div>
+  <div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
+  <div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
+  <div class="van-col van-col--4" style="padding-left: 18px;">4</div>
+  <div class="van-col van-col--3" style="padding-right: 12px;">3</div>
+  <div class="van-col van-col--2" style="padding-left: 12px;">2</div>
+</div>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,48 @@
+import Col from '..';
+import Row from '../../row';
+import { mount } from '../../../test';
+
+test('Col click event', () => {
+  const wrapper = mount(Col);
+  wrapper.trigger('click');
+
+  expect(wrapper.emitted('click')).toBeTruthy();
+});
+
+test('Row click event', () => {
+  const wrapper = mount(Row);
+  wrapper.trigger('click');
+
+  expect(wrapper.emitted('click')).toBeTruthy();
+});
+
+test('gutter prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-row gutter="24">
+        <van-col span="24">24</van-col>
+
+        <van-col span="12">12</van-col>
+        <van-col span="12">12</van-col>
+
+        <van-col span="8">8</van-col>
+        <van-col span="8">8</van-col>
+        <van-col span="8">8</van-col>
+
+        <van-col span="6">6</van-col>
+        <van-col span="6">6</van-col>
+        <van-col span="6">6</van-col>
+        <van-col span="6">6</van-col>
+        
+        <van-col span="7">7</van-col>
+        <van-col span="6">6</van-col>
+        <van-col span="5">5</van-col>
+        <van-col span="4">4</van-col>
+        <van-col span="3">3</van-col>
+        <van-col span="2">2</van-col>
+      </van-row>
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});