feat: Cell component

src-next/cell/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell">
+        <div class="van-cell__title"><span>单元格</span></div>
+        <div class="van-cell__value"><span>内容</span></div>
+      </div>
+      <div class="van-cell">
+        <div class="van-cell__title"><span>单元格</span>
+          <div class="van-cell__label">描述信息</div>
+        </div>
+        <div class="van-cell__value"><span>内容</span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell van-cell--large">
+      <div class="van-cell__title"><span>单元格</span></div>
+      <div class="van-cell__value"><span>内容</span></div>
+    </div>
+    <div class="van-cell van-cell--large">
+      <div class="van-cell__title"><span>单元格</span>
+        <div class="van-cell__label">描述信息</div>
+      </div>
+      <div class="van-cell__value"><span>内容</span></div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell"><i class="van-icon van-icon-location-o van-cell__left-icon">
+        <!----></i>
+      <div class="van-cell__title"><span>单元格</span></div>
+      <div class="van-cell__value"><span>内容</span></div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell">
+      <div class="van-cell__value van-cell__value--alone"><span>内容</span></div>
+    </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>单元格</span></div>
+      <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>单元格</span></div>
+      <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow-down van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>URL 跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>路由跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div class="van-cell-group__title">分组 1</div>
+      <div class="van-cell-group van-hairline--top-bottom">
+        <div class="van-cell">
+          <div class="van-cell__title"><span>单元格</span></div>
+          <div class="van-cell__value"><span>内容</span></div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="van-cell-group__title">分组 2</div>
+      <div class="van-cell-group van-hairline--top-bottom">
+        <div class="van-cell">
+          <div class="van-cell__title"><span>单元格</span></div>
+          <div class="van-cell__value"><span>内容</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span class="custom-title">单元格</span> <span class="van-tag van-tag--danger">标签</span></div>
+      <div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div class="van-cell"><i class="van-icon van-icon-shop-o van-cell__left-icon">
+        <!----></i>
+      <div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-search" style="line-height: inherit;">
+        <!----></i>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell van-cell--center">
+      <div class="van-cell__title"><span>单元格</span>
+        <div class="van-cell__label">描述信息</div>
+      </div>
+      <div class="van-cell__value"><span>内容</span></div>
+    </div>
+  </div>
+</div>
+`;

src-next/cell/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CellGroup title slot 1`] = `
+<div>
+  <div class="van-cell-group__title">CustomTitle</div>
+  <div class="van-cell-group van-hairline--top-bottom"></div>
+</div>
+`;
+
+exports[`arrow direction 1`] = `
+<div role="button" tabindex="0" class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
+    <!----></i></div>
+`;
+
+exports[`icon-prefix prop 1`] = `
+<div class="van-cell"><i class="my-icon my-icon-success van-cell__left-icon">
+    <!----></i></div>
+`;
+
+exports[`render slot 1`] = `
+<div class="van-cell">Custom Icon<div class="van-cell__title">Custom Title<div class="van-cell__label">Custom Label</div>
+  </div>Custom Extra</div>
+`;
+
+exports[`title-style prop 1`] = `
+<div class="van-cell">
+  <div class="van-cell__title" style="color: red;"><span>title</span></div>
+</div>
+`;

src-next/cell/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

src-next/cell/test/index.spec.js

@@ -0,0 +1,80 @@
+import Cell from '..';
+import CellGroup from '../../cell-group';
+import { mount } from '../../../test';
+
+test('click event', () => {
+  const click = jest.fn();
+  const wrapper = mount(Cell, {
+    context: {
+      on: {
+        click,
+      },
+    },
+  });
+
+  wrapper.trigger('click');
+  expect(click).toHaveBeenCalled();
+});
+
+test('arrow direction', () => {
+  const wrapper = mount(Cell, {
+    propsData: {
+      isLink: true,
+      arrowDirection: 'down',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('render slot', () => {
+  const wrapper = mount({
+    template: `
+      <cell>
+        <template v-slot:icon>Custom Icon</template>
+        <template v-slot:title>Custom Title</template>
+        <template v-slot:label>Custom Label</template>
+        <template v-slot:extra>Custom Extra</template>
+      </cell>
+    `,
+    components: {
+      Cell,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('title-style prop', () => {
+  const wrapper = mount(Cell, {
+    propsData: {
+      title: 'title',
+      titleStyle: {
+        color: 'red',
+      },
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('CellGroup title slot', () => {
+  const wrapper = mount(CellGroup, {
+    scopedSlots: {
+      title: () => 'CustomTitle',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('icon-prefix prop', () => {
+  const wrapper = mount(Cell, {
+    propsData: {
+      iconPrefix: 'my-icon',
+      icon: 'success',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});