feat: Grid component

2020-07-06 16:49:07 +08:00
parent 3bf64717b5
commit 660e535811
12 changed files with 1012 additions and 8 deletions
@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item" style="flex-basis: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid">
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center">
+          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+                <!----></i></div>
+          </div>
+        </div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center">
+          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-2.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+                <!----></i></div>
+          </div>
+        </div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--center">
+          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-3.jpg" class="van-image__img" style="object-fit: contain;">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+                <!----></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item van-grid-item--square" style="flex-basis: 25%; padding-top: 25%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid" style="padding-left: 10px;">
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 25%; padding-right: 10px; margin-top: 10px;">
+        <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
+        <div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item" style="flex-basis: 50%;">
+        <div role="button" tabindex="0" class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">路由跳转</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 50%;">
+        <div role="button" tabindex="0" class="van-grid-item__content van-grid-item__content--center van-grid-item__content--clickable van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
+            <!----></i><span class="van-grid-item__text">URL 跳转</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-grid van-hairline--top">
+      <div class="van-grid-item" style="flex-basis: 50%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
+            <div class="van-info van-info--dot"></div>
+          </i><span class="van-grid-item__text">文字</span></div>
+      </div>
+      <div class="van-grid-item" style="flex-basis: 50%;">
+        <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
+            <div class="van-info">99+</div>
+          </i><span class="van-grid-item__text">文字</span></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`icon-size prop 1`] = `
+<div class="van-grid van-hairline--top">
+  <div class="van-grid-item" style="flex-basis: 25%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-success van-grid-item__icon" style="font-size: 10px;">
+        <!----></i></div>
+  </div>
+</div>
+`;
+
+exports[`render icon-slot 1`] = `
+<div class="van-grid van-hairline--top">
+  <div class="van-grid-item" style="flex-basis: 25%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-hairline">
+      <div class="van-grid-item__icon-wrapper">
+        <div></div>
+        <div class="van-info">1</div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`sqaure and set gutter 1`] = `
+<div class="van-grid" style="padding-left: 10rem;">
+  <div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
+  </div>
+  <div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
+  </div>
+  <div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
+  </div>
+</div>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,60 @@
+import { mount } from '../../../test';
+
+test('click grid item', () => {
+  const onClick = jest.fn();
+  const wrapper = mount({
+    template: `
+      <van-grid>
+        <van-grid-item @click="onClick" />
+      </van-grid>
+    `,
+    methods: {
+      onClick,
+    },
+  });
+
+  const Item = wrapper.find('.van-grid-item__content');
+  Item.trigger('click');
+
+  expect(onClick).toHaveBeenCalledTimes(1);
+});
+
+test('sqaure and set gutter', () => {
+  const wrapper = mount({
+    template: `
+      <van-grid square :column-num="2" gutter="10rem">
+        <van-grid-item />
+        <van-grid-item />
+        <van-grid-item />
+      </van-grid>
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('icon-size prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-grid icon-size="10">
+        <van-grid-item icon="success" />
+      </van-grid>
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render icon-slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-grid icon-size="10">
+        <van-grid-item info="1">
+          <div slot="icon" />
+        </van-grid-item>
+      </van-grid>
+    `,
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});