feat(Cell): add value slot, deprecate default slot (#8933)

src/cell/Cell.tsx

@@ -33,7 +33,7 @@ export const cellProps = {
   valueClass: unknownProp,
   labelClass: unknownProp,
   titleClass: unknownProp,
-  titleStyle: (null as unknown) as PropType<string | CSSProperties>,
+  titleStyle: null as unknown as PropType<string | CSSProperties>,
   arrowDirection: String as PropType<CellArrowDirection>,
   clickable: {
     type: Boolean as PropType<boolean | null>,
@@ -76,13 +76,16 @@ export default defineComponent({
     };
 
     const renderValue = () => {
-      const hasValue = slots.default || isDef(props.value);
+      // default slot is deprecated
+      // should be removed in next major version
+      const slot = slots.value || slots.default;
+      const hasValue = slot || isDef(props.value);
 
       if (hasValue) {
         const hasTitle = slots.title || isDef(props.title);
         return (
           <div class={[bem('value', { alone: !hasTitle }), props.valueClass]}>
-            {slots.default ? slots.default() : <span>{props.value}</span>}
+            {slot ? slot() : <span>{props.value}</span>}
           </div>
         );
       }

src/cell/README.md

@@ -183,14 +183,14 @@ app.use(CellGroup);
 
 ### Cell Slots
 
-| Name       | Description                       |
-| ---------- | --------------------------------- |
-| default    | Custom value                      |
-| icon       | Custom icon                       |
-| title      | Custom title                      |
-| label      | Custom label                      |
-| right-icon | Custom right icon                 |
-| extra      | Custom extra content on the right |
+| Name           | Description                       |
+| -------------- | --------------------------------- |
+| title          | Custom title                      |
+| value `v3.1.1` | Custom value                      |
+| label          | Custom label                      |
+| icon           | Custom left icon                  |
+| right-icon     | Custom right icon                 |
+| extra          | Custom extra content on the right |
 
 ### CSS Variables
 

src/cell/README.zh-CN.md

@@ -188,14 +188,14 @@ app.use(CellGroup);
 
 ### Cell Slots
 
-| 名称       | 说明                          |
-| ---------- | ----------------------------- |
-| default    | 自定义右侧 value 的内容       |
-| title      | 自定义左侧 title 的内容       |
-| label      | 自定义标题下方 label 的内容   |
-| icon       | 自定义左侧图标                |
-| right-icon | 自定义右侧按钮，默认为`arrow` |
-| extra      | 自定义单元格最右侧的额外内容  |
+| 名称           | 说明                         |
+| -------------- | ---------------------------- |
+| title          | 自定义左侧标题               |
+| value `v3.1.1` | 自定义右侧内容               |
+| label          | 自定义标题下方的描述信息     |
+| icon           | 自定义左侧图标               |
+| right-icon     | 自定义右侧图标               |
+| extra          | 自定义单元格最右侧的额外内容 |
 
 ### 样式变量
 

src/cell/test/__snapshots__/index.spec.ts.snap

@@ -15,7 +15,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
 exports[`should render default slot correctly 1`] = `
 <div class="van-cell">
   <div class="van-cell__value van-cell__value--alone">
-    Custom Default
+    Custom Value
   </div>
 </div>
 `;
@@ -52,3 +52,11 @@ exports[`should render title slot correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`should render value slot correctly 1`] = `
+<div class="van-cell">
+  <div class="van-cell__value van-cell__value--alone">
+    Custom Value
+  </div>
+</div>
+`;

src/cell/test/index.spec.ts

@@ -4,7 +4,16 @@ import { mount } from '../../../test';
 test('should render default slot correctly', () => {
   const wrapper = mount(Cell, {
     slots: {
-      default: () => 'Custom Default',
+      default: () => 'Custom Value',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render value slot correctly', () => {
+  const wrapper = mount(Cell, {
+    slots: {
+      value: () => 'Custom Value',
     },
   });
   expect(wrapper.html()).toMatchSnapshot();