[new feature] Cell: add label slot (#2956)

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 |

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>
   );
 

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>
+`;

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();
+});

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` |