feat(Picker): add toolbar slot (#8968)

src/picker/Picker.tsx

@@ -94,11 +94,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const formattedColumns = ref<PickerObjectColumn[]>([]);
 
-    const {
+    const { text: textKey, values: valuesKey, children: childrenKey } = extend(
-      text: textKey,
-      values: valuesKey,
-      children: childrenKey,
-    } = extend(
       {
         // compatible with valueKey prop
         text: props.valueKey,
@@ -108,8 +104,9 @@ export default defineComponent({
       props.columnsFieldNames
     );
 
-    const { children, linkChildren } =
+    const { children, linkChildren } = useChildren<ComponentInstance>(
-      useChildren<ComponentInstance>(PICKER_KEY);
+      PICKER_KEY
+    );
 
     linkChildren();
 
@@ -322,11 +319,12 @@ export default defineComponent({
 
     const renderToolbar = () => {
       if (props.showToolbar) {
+        // default slot is deprecated
+        // should be removed in next major version
+        const slot = slots.toolbar || slots.default;
         return (
           <div class={bem('toolbar')}>
-            {slots.default
+            {slot ? slot() : [renderCancel(), renderTitle(), renderConfirm()]}
-              ? slots.default()
-              : [renderCancel(), renderTitle(), renderConfirm()]}
           </div>
         );
       }

src/picker/README.md

@@ -346,15 +346,15 @@ Picker events will pass different parameters according to the columns are single
 
 ### Slots
 
-| Name           | Description                  | SlotProps                  |
+| Name            | Description                  | SlotProps                  |
-| -------------- | ---------------------------- | -------------------------- |
+| --------------- | ---------------------------- | -------------------------- |
-| default        | Custom toolbar content       | -                          |
+| toolbar `3.1.2` | Custom toolbar content       | -                          |
-| title          | Custom title                 | -                          |
+| title           | Custom title                 | -                          |
-| confirm        | Custom confirm button text   | -                          |
+| confirm         | Custom confirm button text   | -                          |
-| cancel         | Custom cancel button text    | -                          |
+| cancel          | Custom cancel button text    | -                          |
-| option         | Custom option content        | _option: string \| object_ |
+| option          | Custom option content        | _option: string \| object_ |
-| columns-top    | Custom content above columns | -                          |
+| columns-top     | Custom content above columns | -                          |
-| columns-bottom | Custom content below columns | -                          |
+| columns-bottom  | Custom content below columns | -                          |
 
 ### Data Structure of Column
 

src/picker/README.zh-CN.md

@@ -369,15 +369,15 @@ export default {
 
 ### Slots
 
-| 名称           | 说明                   | 参数                       |
+| 名称             | 说明                   | 参数                       |
-| -------------- | ---------------------- | -------------------------- |
+| ---------------- | ---------------------- | -------------------------- |
-| default        | 自定义整个顶部栏的内容 | -                          |
+| toolbar `v3.1.2` | 自定义整个顶部栏的内容 | -                          |
-| title          | 自定义标题内容         | -                          |
+| title            | 自定义标题内容         | -                          |
-| confirm        | 自定义确认按钮内容     | -                          |
+| confirm          | 自定义确认按钮内容     | -                          |
-| cancel         | 自定义取消按钮内容     | -                          |
+| cancel           | 自定义取消按钮内容     | -                          |
-| option         | 自定义选项内容         | _option: string \| object_ |
+| option           | 自定义选项内容         | _option: string \| object_ |
-| columns-top    | 自定义选项上方内容     | -                          |
+| columns-top      | 自定义选项上方内容     | -                          |
-| columns-bottom | 自定义选项下方内容     | -                          |
+| columns-bottom   | 自定义选项下方内容     | -                          |
 
 ### Column 数据结构
 

src/picker/test/__snapshots__/index.spec.tsx.snap

@@ -225,41 +225,6 @@ exports[`not allow html 1`] = `
 </div>
 `;
 
-exports[`render confirm/cancel slot 1`] = `
-<div class="van-picker">
-  <div class="van-picker__toolbar">
-    <button type="button"
-            class="van-picker__cancel"
-    >
-      Custom Cancel
-    </button>
-    <button type="button"
-            class="van-picker__confirm"
-    >
-      Custom Confirm
-    </button>
-  </div>
-  <div class="van-picker__columns"
-       style="height: 264px;"
-  >
-    <div class="van-picker-column">
-      <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
-          class="van-picker-column__wrapper"
-      >
-      </ul>
-    </div>
-    <div class="van-picker__mask"
-         style="background-size: 100% 110px;"
-    >
-    </div>
-    <div class="van-hairline-unset--top-bottom van-picker__frame"
-         style="height: 44px;"
-    >
-    </div>
-  </div>
-</div>
-`;
-
 exports[`render option slot with object columns 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
@@ -362,42 +327,6 @@ exports[`render option slot with simple columns 1`] = `
 </div>
 `;
 
-exports[`render title slot 1`] = `
-<div class="van-picker">
-  <div class="van-picker__toolbar">
-    <button type="button"
-            class="van-picker__cancel"
-    >
-      Cancel
-    </button>
-    Custom title
-    <button type="button"
-            class="van-picker__confirm"
-    >
-      Confirm
-    </button>
-  </div>
-  <div class="van-picker__columns"
-       style="height: 264px;"
-  >
-    <div class="van-picker-column">
-      <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
-          class="van-picker-column__wrapper"
-      >
-      </ul>
-    </div>
-    <div class="van-picker__mask"
-         style="background-size: 100% 110px;"
-    >
-    </div>
-    <div class="van-hairline-unset--top-bottom van-picker__frame"
-         style="height: 44px;"
-    >
-    </div>
-  </div>
-</div>
-`;
-
 exports[`set rem item-height 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
@@ -451,6 +380,103 @@ exports[`set rem item-height 1`] = `
 </div>
 `;
 
+exports[`should render confirm/cancel slot correctly 1`] = `
+<div class="van-picker">
+  <div class="van-picker__toolbar">
+    <button type="button"
+            class="van-picker__cancel"
+    >
+      Custom Cancel
+    </button>
+    <button type="button"
+            class="van-picker__confirm"
+    >
+      Custom Confirm
+    </button>
+  </div>
+  <div class="van-picker__columns"
+       style="height: 264px;"
+  >
+    <div class="van-picker-column">
+      <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
+          class="van-picker-column__wrapper"
+      >
+      </ul>
+    </div>
+    <div class="van-picker__mask"
+         style="background-size: 100% 110px;"
+    >
+    </div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame"
+         style="height: 44px;"
+    >
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render title slot correctly 1`] = `
+<div class="van-picker">
+  <div class="van-picker__toolbar">
+    <button type="button"
+            class="van-picker__cancel"
+    >
+      Cancel
+    </button>
+    Custom title
+    <button type="button"
+            class="van-picker__confirm"
+    >
+      Confirm
+    </button>
+  </div>
+  <div class="van-picker__columns"
+       style="height: 264px;"
+  >
+    <div class="van-picker-column">
+      <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
+          class="van-picker-column__wrapper"
+      >
+      </ul>
+    </div>
+    <div class="van-picker__mask"
+         style="background-size: 100% 110px;"
+    >
+    </div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame"
+         style="height: 44px;"
+    >
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render toolbar slot correctly 1`] = `
+<div class="van-picker">
+  <div class="van-picker__toolbar">
+    Custom toolbar
+  </div>
+  <div class="van-picker__columns"
+       style="height: 264px;"
+  >
+    <div class="van-picker-column">
+      <ul style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"
+          class="van-picker-column__wrapper"
+      >
+      </ul>
+    </div>
+    <div class="van-picker__mask"
+         style="background-size: 100% 110px;"
+    >
+    </div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame"
+         style="height: 44px;"
+    >
+    </div>
+  </div>
+</div>
+`;
+
 exports[`toolbar-position prop 1`] = `
 <div class="van-picker">
   <div class="van-picker__columns"

src/picker/test/index.spec.tsx

@@ -141,7 +141,7 @@ test('column watch default index', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('render title slot', () => {
+test('should render title slot correctly', () => {
   const wrapper = mount(Picker, {
     slots: {
       title: () => 'Custom title',
@@ -151,7 +151,16 @@ test('render title slot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('render confirm/cancel slot', () => {
+test('should render toolbar slot correctly', () => {
+  const wrapper = mount(Picker, {
+    slots: {
+      toolbar: () => 'Custom toolbar',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render confirm/cancel slot correctly', () => {
   const wrapper = mount(Picker, {
     slots: {
       confirm: () => 'Custom Confirm',