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,70 +1,71 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render demo and match snapshot 1`] = `
-<div class="van-cell van-cell--clickable"
+<div>
+  <div class="van-cell van-cell--clickable"
        role="button"
        tabindex="0"
->
+  >
     <div class="van-cell__value van-cell__value--alone">
       Show Default Keyboard
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
-</div>
+  </div>
-<div class="van-cell van-cell--clickable"
+  <div class="van-cell van-cell--clickable"
        role="button"
        tabindex="0"
->
+  >
     <div class="van-cell__value van-cell__value--alone">
       Show Keyboard With Sidebar
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
-</div>
+  </div>
-<div class="van-cell van-cell--clickable"
+  <div class="van-cell van-cell--clickable"
        role="button"
        tabindex="0"
->
+  >
     <div class="van-cell__value van-cell__value--alone">
       Show IdNumber Keyboard
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
-</div>
+  </div>
-<div class="van-cell van-cell--clickable"
+  <div class="van-cell van-cell--clickable"
        role="button"
        tabindex="0"
->
+  >
     <div class="van-cell__value van-cell__value--alone">
       Show Keyboard With Title
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
-</div>
+  </div>
-<div class="van-cell van-cell--clickable"
+  <div class="van-cell van-cell--clickable"
        role="button"
        tabindex="0"
->
+  >
     <div class="van-cell__value van-cell__value--alone">
       Show Keyboard With Multiple ExtraKey
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
-</div>
+  </div>
-<div class="van-cell van-cell--clickable"
+  <div class="van-cell van-cell--clickable"
        role="button"
        tabindex="0"
->
+  >
     <div class="van-cell__value van-cell__value--alone">
       Show Keyboard With Random Key Order
     </div>
     <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
     </i>
-</div>
+  </div>
-<div class="van-cell van-cell--clickable van-field"
+  <div class="van-cell van-cell--clickable van-field"
        role="button"
        tabindex="0"
->
+  >
     <div class="van-cell__title van-field__label">
       <span>
         Bind Value
@@ -79,6 +80,7 @@ exports[`should render demo and match snapshot 1`] = `
         >
       </div>
     </div>
+  </div>
 </div>
 <transition-stub>
   <div class="van-number-keyboard">

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,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render demo and match snapshot 1`] = `
-<div class="van-cell van-cell--center">
+<div>
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Basic Usage
@@ -27,8 +28,8 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
-</div>
+  </div>
-<div class="van-cell van-cell--center">
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Step
@@ -54,8 +55,8 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
-</div>
+  </div>
-<div class="van-cell van-cell--center">
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Range
@@ -81,8 +82,8 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
-</div>
+  </div>
-<div class="van-cell van-cell--center">
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Integer
@@ -108,8 +109,8 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
-</div>
+  </div>
-<div class="van-cell van-cell--center">
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Disabled
@@ -136,8 +137,8 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
-</div>
+  </div>
-<div class="van-cell van-cell--center">
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Disable Input
@@ -164,8 +165,8 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
-</div>
+  </div>
-<div class="van-cell van-cell--center">
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Decimal Length
@@ -191,8 +192,8 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
-</div>
+  </div>
-<div class="van-cell van-cell--center">
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Custom Size
@@ -221,8 +222,8 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
-</div>
+  </div>
-<div class="van-cell van-cell--center">
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Before Change
@@ -248,8 +249,8 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
-</div>
+  </div>
-<div class="van-cell van-cell--center">
+  <div class="van-cell van-cell--center">
     <div class="van-cell__title">
       <span>
         Round Theme
@@ -279,5 +280,6 @@ exports[`should render demo and match snapshot 1`] = `
         </button>
       </div>
     </div>
+  </div>
 </div>
 `;