feat(ActionSheet): add cancel slot (#8333)

src/action-sheet/ActionSheet.tsx

@@ -78,11 +78,11 @@ export default defineComponent({
     };
 
     const renderCancel = () => {
-      if (props.cancelText) {
+      if (slots.cancel || props.cancelText) {
         return [
           <div class={bem('gap')} />,
           <button type="button" class={bem('cancel')} onClick={onCancel}>
-            {props.cancelText}
+            {slots.cancel ? slots.cancel() : props.cancelText}
           </button>,
         ];
       }

src/action-sheet/README.md

@@ -212,9 +212,10 @@ export default {
 ### Slots
 
 | Name             | Description                          |
-| ----------- | ------------------ |
+| ---------------- | ------------------------------------ |
 | default          | Custom content                       |
-| description | Custom description |
+| description      | Custom description above the options |
+| cancel `v3.0.10` | Custom the content of cancel button  |
 
 ### Less Variables
 

src/action-sheet/README.zh-CN.md

@@ -228,9 +228,10 @@ export default {
 ### Slots
 
 | 名称             | 说明                 |
-| ----------- | -------------------- |
+| ---------------- | -------------------- |
 | default          | 自定义面板的展示内容 |
 | description      | 自定义描述文案       |
+| cancel `v3.0.10` | 自定义取消按钮内容   |
 
 ### 样式变量
 

src/action-sheet/test/__snapshots__/index.spec.ts.snap

@@ -5,6 +5,14 @@ exports[`should allow to custom close icon with closeIcon prop 1`] = `
 </i>
 `;
 
+exports[`should render cancel slot correctly 1`] = `
+<button type="button"
+        class="van-action-sheet__cancel"
+>
+  Custom Cancel
+</button>
+`;
+
 exports[`should render default slot correctly 1`] = `
 <transition-stub>
   <div class="van-overlay">

src/action-sheet/test/index.spec.ts

@@ -182,6 +182,19 @@ test('should render description correctly', () => {
   ).toMatchSnapshot();
 });
 
+test('should render cancel slot correctly', () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      show: true,
+    },
+    slots: {
+      cancel: () => 'Custom Cancel',
+    },
+  });
+
+  expect(wrapper.find('.van-action-sheet__cancel').html()).toMatchSnapshot();
+});
+
 test('should render description slot when match snapshot', () => {
   const wrapper = mount(ActionSheet, {
     props: {

src/number-keyboard/demo/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <demo-block card>
     <van-cell is-link @touchstart.stop="keyboard = 'default'">
       {{ t('button1') }}
     </van-cell>
@@ -25,6 +26,7 @@
       :placeholder="t('clickToInput')"
       @touchstart.stop="keyboard = 'bindValue'"
     />
+  </demo-block>
 
   <van-number-keyboard
     :show="keyboard === 'default'"

src/number-keyboard/test/__snapshots__/demo.spec.ts.snap

@@ -1,6 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render demo and match snapshot 1`] = `
+<div>
   <div class="van-cell van-cell--clickable"
        role="button"
        tabindex="0"
@@ -80,6 +81,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
   </div>
+</div>
 <transition-stub>
   <div class="van-number-keyboard">
     <div class="van-number-keyboard__body">

src/stepper/demo/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <demo-block card>
     <van-cell center :title="t('basicUsage')">
       <van-stepper v-model="stepper1" />
     </van-cell>
@@ -43,6 +44,7 @@
         disable-input
       />
     </van-cell>
+  </demo-block>
 </template>
 
 <script lang="ts">

src/stepper/test/__snapshots__/demo.spec.ts.snap

@@ -1,6 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render demo and match snapshot 1`] = `
+<div>
   <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
@@ -280,4 +281,5 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
   </div>
+</div>
 `;