From a4eedac8b1783ef3c9643f2d6052a4a21d215ccc Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 12 Mar 2019 20:34:17 +0800
Subject: [PATCH] [new feature] Cell: add label slot (#2956)

---
 packages/cell/en-US.md                        |  1 +
 packages/cell/index.tsx                       | 10 ++++++-
 .../test/__snapshots__/index.spec.js.snap     | 13 +++++++++
 packages/cell/test/index.spec.js              | 28 +++++++++++++++++++
 packages/cell/zh-CN.md                        |  7 +++--
 5 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 packages/cell/test/__snapshots__/index.spec.js.snap

diff --git a/packages/cell/en-US.md b/packages/cell/en-US.md
index 0ec29cbf6..075faa4b1 100644
--- a/packages/cell/en-US.md
+++ b/packages/cell/en-US.md
@@ -132,4 +132,5 @@ Vue.use(Cell).use(CellGroup);
 | - | Default slot |
 | icon | Custom icon |
 | title | Custom title |
+| label | Custom label |
 | right-icon | Custom right icon |
diff --git a/packages/cell/index.tsx b/packages/cell/index.tsx
index 3afcb417f..9654f11ac 100644
--- a/packages/cell/index.tsx
+++ b/packages/cell/index.tsx
@@ -18,6 +18,7 @@ export type CellProps = RouteProps &
 export type CellSlots = DefaultSlots & {
   icon?: ScopedSlot;
   title?: ScopedSlot;
+  label?: ScopedSlot;
   extra?: ScopedSlot;
   'right-icon'?: ScopedSlot;
 };
@@ -38,11 +39,18 @@ function Cell(
 
   const showTitle = slots.title || isDef(title);
   const showValue = slots.default || isDef(value);
+  const showLabel = slots.label || isDef(label);
+
+  const Label = showLabel && (
+    <div class={[bem('label'), props.labelClass]}>
+      {slots.label ? slots.label() : label}
+    </div>
+  );
 
   const Title = showTitle && (
     <div class={[bem('title'), props.titleClass]}>
       {slots.title ? slots.title() : <span>{title}</span>}
-      {label && <div class={[bem('label'), props.labelClass]}>{label}</div>}
+      {Label}
     </div>
   );
 
diff --git a/packages/cell/test/__snapshots__/index.spec.js.snap b/packages/cell/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..52bdf7fe1
--- /dev/null
+++ b/packages/cell/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`arrow direction 1`] = `
+<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
+    <!----></i></div>
+`;
+
+exports[`render slot 1`] = `
+<div class="van-cell">
+  <div class="van-cell__title">Custom Title<div class="van-cell__label">Custom Label</div>
+  </div>Custom Extra
+</div>
+`;
diff --git a/packages/cell/test/index.spec.js b/packages/cell/test/index.spec.js
index 94f1ca5a4..6ba3f7c10 100644
--- a/packages/cell/test/index.spec.js
+++ b/packages/cell/test/index.spec.js
@@ -14,3 +14,31 @@ test('click event', () => {
   wrapper.trigger('click');
   expect(click.mock.calls.length).toBeTruthy();
 });
+
+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:title>Custom Title</template>
+        <template v-slot:label>Custom Label</template>
+        <template v-slot:extra>Custom Extra</template>
+      </cell>
+    `,
+    components: {
+      Cell
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/packages/cell/zh-CN.md b/packages/cell/zh-CN.md
index 792c2d1e0..fac275530 100644
--- a/packages/cell/zh-CN.md
+++ b/packages/cell/zh-CN.md
@@ -134,6 +134,7 @@ Vue.use(Cell).use(CellGroup);
 | 名称 | 说明 |
 |------|------|
 | - | 自定义`value`显示内容 |
-| title | 自定义`title`显示内容 |
-| icon | 自定义`icon` |
-| right-icon | 自定义右侧按钮，默认是`arrow` |
+| title | 自定义标题显示内容 |
+| label | 自定义标题下方描述显示内容 |
+| icon | 自定义左侧图标 |
+| right-icon | 自定义右侧按钮，默认为`arrow` |