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

@@ -211,10 +211,11 @@ export default {
 
 ### Slots
 
-| Name        | Description        |
-| ----------- | ------------------ |
-| default     | Custom content     |
-| description | Custom description |
+| Name             | Description                          |
+| ---------------- | ------------------------------------ |
+| default          | Custom content                       |
+| 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

@@ -227,10 +227,11 @@ export default {
 
 ### Slots
 
-| 名称        | 说明                 |
-| ----------- | -------------------- |
-| default     | 自定义面板的展示内容 |
-| description | 自定义描述文案       |
+| 名称             | 说明                 |
+| ---------------- | -------------------- |
+| 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,30 +1,32 @@
 <template>
-  <van-cell is-link @touchstart.stop="keyboard = 'default'">
-    {{ t('button1') }}
-  </van-cell>
-  <van-cell is-link @touchstart.stop="keyboard = 'custom'">
-    {{ t('button2') }}
-  </van-cell>
-  <van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
-    {{ t('button3') }}
-  </van-cell>
-  <van-cell is-link @touchstart.stop="keyboard = 'title'">
-    {{ t('button4') }}
-  </van-cell>
-  <van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
-    {{ t('button5') }}
-  </van-cell>
-  <van-cell is-link @touchstart.stop="keyboard = 'randomKeyOrder'">
-    {{ t('button6') }}
-  </van-cell>
-  <van-field
-    v-model="value"
-    readonly
-    clickable
-    :label="t('bindValue')"
-    :placeholder="t('clickToInput')"
-    @touchstart.stop="keyboard = 'bindValue'"
-  />
+  <demo-block card>
+    <van-cell is-link @touchstart.stop="keyboard = 'default'">
+      {{ t('button1') }}
+    </van-cell>
+    <van-cell is-link @touchstart.stop="keyboard = 'custom'">
+      {{ t('button2') }}
+    </van-cell>
+    <van-cell is-link @touchstart.stop="keyboard = 'extraKey'">
+      {{ t('button3') }}
+    </van-cell>
+    <van-cell is-link @touchstart.stop="keyboard = 'title'">
+      {{ t('button4') }}
+    </van-cell>
+    <van-cell is-link @touchstart.stop="keyboard = 'multiExtraKey'">
+      {{ t('button5') }}
+    </van-cell>
+    <van-cell is-link @touchstart.stop="keyboard = 'randomKeyOrder'">
+      {{ t('button6') }}
+    </van-cell>
+    <van-field
+      v-model="value"
+      readonly
+      clickable
+      :label="t('bindValue')"
+      :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,82 +1,84 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render demo and match snapshot 1`] = `
-<div class="van-cell van-cell--clickable"
-     role="button"
-     tabindex="0"
->
-  <div class="van-cell__value van-cell__value--alone">
-    Show Default Keyboard
+<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>
-  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-  </i>
-</div>
-<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 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>
-  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-  </i>
-</div>
-<div class="van-cell van-cell--clickable"
-     role="button"
-     tabindex="0"
->
-  <div class="van-cell__value van-cell__value--alone">
-    Show IdNumber Keyboard
+  <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>
-  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-  </i>
-</div>
-<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 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>
-  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-  </i>
-</div>
-<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 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>
-  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-  </i>
-</div>
-<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 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>
-  <i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
-  </i>
-</div>
-<div class="van-cell van-cell--clickable van-field"
-     role="button"
-     tabindex="0"
->
-  <div class="van-cell__title van-field__label">
-    <span>
-      Bind Value
-    </span>
-  </div>
-  <div class="van-cell__value van-field__value">
-    <div class="van-field__body">
-      <input type="text"
-             class="van-field__control"
-             readonly
-             placeholder="Click To Input"
-      >
+  <div class="van-cell van-cell--clickable van-field"
+       role="button"
+       tabindex="0"
+  >
+    <div class="van-cell__title van-field__label">
+      <span>
+        Bind Value
+      </span>
+    </div>
+    <div class="van-cell__value van-field__value">
+      <div class="van-field__body">
+        <input type="text"
+               class="van-field__control"
+               readonly
+               placeholder="Click To Input"
+        >
+      </div>
     </div>
   </div>
 </div>

src/stepper/demo/index.vue

@@ -1,48 +1,50 @@
 <template>
-  <van-cell center :title="t('basicUsage')">
-    <van-stepper v-model="stepper1" />
-  </van-cell>
+  <demo-block card>
+    <van-cell center :title="t('basicUsage')">
+      <van-stepper v-model="stepper1" />
+    </van-cell>
 
-  <van-cell center :title="t('step')">
-    <van-stepper v-model="stepper2" step="2" />
-  </van-cell>
+    <van-cell center :title="t('step')">
+      <van-stepper v-model="stepper2" step="2" />
+    </van-cell>
 
-  <van-cell center :title="t('range')">
-    <van-stepper v-model="stepper3" :min="5" :max="8" />
-  </van-cell>
+    <van-cell center :title="t('range')">
+      <van-stepper v-model="stepper3" :min="5" :max="8" />
+    </van-cell>
 
-  <van-cell center :title="t('integer')">
-    <van-stepper v-model="stepper4" integer />
-  </van-cell>
+    <van-cell center :title="t('integer')">
+      <van-stepper v-model="stepper4" integer />
+    </van-cell>
 
-  <van-cell center :title="t('disabled')">
-    <van-stepper v-model="stepper5" disabled />
-  </van-cell>
+    <van-cell center :title="t('disabled')">
+      <van-stepper v-model="stepper5" disabled />
+    </van-cell>
 
-  <van-cell center :title="t('disableInput')">
-    <van-stepper v-model="disabledInput" disable-input />
-  </van-cell>
+    <van-cell center :title="t('disableInput')">
+      <van-stepper v-model="disabledInput" disable-input />
+    </van-cell>
 
-  <van-cell center :title="t('decimalLength')">
-    <van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
-  </van-cell>
+    <van-cell center :title="t('decimalLength')">
+      <van-stepper v-model="stepper8" :decimal-length="1" step="0.2" />
+    </van-cell>
 
-  <van-cell center :title="t('customSize')">
-    <van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
-  </van-cell>
+    <van-cell center :title="t('customSize')">
+      <van-stepper v-model="stepper7" button-size="32px" input-width="40px" />
+    </van-cell>
 
-  <van-cell center :title="t('beforeChange')">
-    <van-stepper v-model="stepper6" :before-change="beforeChange" />
-  </van-cell>
+    <van-cell center :title="t('beforeChange')">
+      <van-stepper v-model="stepper6" :before-change="beforeChange" />
+    </van-cell>
 
-  <van-cell v-if="!isWeapp" center :title="t('roundTheme')">
-    <van-stepper
-      v-model="stepperRound"
-      theme="round"
-      button-size="22"
-      disable-input
-    />
-  </van-cell>
+    <van-cell v-if="!isWeapp" center :title="t('roundTheme')">
+      <van-stepper
+        v-model="stepperRound"
+        theme="round"
+        button-size="22"
+        disable-input
+      />
+    </van-cell>
+  </demo-block>
 </template>
 
 <script lang="ts">

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

@@ -1,282 +1,284 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render demo and match snapshot 1`] = `
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Basic Usage
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper">
-      <button type="button"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="text"
-             role="spinbutton"
-             class="van-stepper__input"
-             inputmode="decimal"
-             aria-valuemax="Infinity"
-             aria-valuemin="1"
-             aria-valuenow="1"
-      >
-      <button type="button"
-              class="van-stepper__plus"
-      >
-      </button>
+<div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Basic Usage
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper">
+        <button type="button"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="text"
+               role="spinbutton"
+               class="van-stepper__input"
+               inputmode="decimal"
+               aria-valuemax="Infinity"
+               aria-valuemin="1"
+               aria-valuenow="1"
+        >
+        <button type="button"
+                class="van-stepper__plus"
+        >
+        </button>
+      </div>
     </div>
   </div>
-</div>
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Step
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper">
-      <button type="button"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="text"
-             role="spinbutton"
-             class="van-stepper__input"
-             inputmode="decimal"
-             aria-valuemax="Infinity"
-             aria-valuemin="1"
-             aria-valuenow="1"
-      >
-      <button type="button"
-              class="van-stepper__plus"
-      >
-      </button>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Step
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper">
+        <button type="button"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="text"
+               role="spinbutton"
+               class="van-stepper__input"
+               inputmode="decimal"
+               aria-valuemax="Infinity"
+               aria-valuemin="1"
+               aria-valuenow="1"
+        >
+        <button type="button"
+                class="van-stepper__plus"
+        >
+        </button>
+      </div>
     </div>
   </div>
-</div>
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Range
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper">
-      <button type="button"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="text"
-             role="spinbutton"
-             class="van-stepper__input"
-             inputmode="decimal"
-             aria-valuemax="8"
-             aria-valuemin="5"
-             aria-valuenow="5"
-      >
-      <button type="button"
-              class="van-stepper__plus"
-      >
-      </button>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Range
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper">
+        <button type="button"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="text"
+               role="spinbutton"
+               class="van-stepper__input"
+               inputmode="decimal"
+               aria-valuemax="8"
+               aria-valuemin="5"
+               aria-valuenow="5"
+        >
+        <button type="button"
+                class="van-stepper__plus"
+        >
+        </button>
+      </div>
     </div>
   </div>
-</div>
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Integer
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper">
-      <button type="button"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="tel"
-             role="spinbutton"
-             class="van-stepper__input"
-             inputmode="numeric"
-             aria-valuemax="Infinity"
-             aria-valuemin="1"
-             aria-valuenow="1"
-      >
-      <button type="button"
-              class="van-stepper__plus"
-      >
-      </button>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Integer
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper">
+        <button type="button"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="tel"
+               role="spinbutton"
+               class="van-stepper__input"
+               inputmode="numeric"
+               aria-valuemax="Infinity"
+               aria-valuemin="1"
+               aria-valuenow="1"
+        >
+        <button type="button"
+                class="van-stepper__plus"
+        >
+        </button>
+      </div>
     </div>
   </div>
-</div>
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Disabled
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper">
-      <button type="button"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="text"
-             role="spinbutton"
-             class="van-stepper__input"
-             disabled
-             inputmode="decimal"
-             aria-valuemax="Infinity"
-             aria-valuemin="1"
-             aria-valuenow="1"
-      >
-      <button type="button"
-              class="van-stepper__plus van-stepper__plus--disabled"
-      >
-      </button>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Disabled
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper">
+        <button type="button"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="text"
+               role="spinbutton"
+               class="van-stepper__input"
+               disabled
+               inputmode="decimal"
+               aria-valuemax="Infinity"
+               aria-valuemin="1"
+               aria-valuenow="1"
+        >
+        <button type="button"
+                class="van-stepper__plus van-stepper__plus--disabled"
+        >
+        </button>
+      </div>
     </div>
   </div>
-</div>
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Disable Input
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper">
-      <button type="button"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="text"
-             role="spinbutton"
-             class="van-stepper__input"
-             readonly
-             inputmode="decimal"
-             aria-valuemax="Infinity"
-             aria-valuemin="1"
-             aria-valuenow="1"
-      >
-      <button type="button"
-              class="van-stepper__plus"
-      >
-      </button>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Disable Input
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper">
+        <button type="button"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="text"
+               role="spinbutton"
+               class="van-stepper__input"
+               readonly
+               inputmode="decimal"
+               aria-valuemax="Infinity"
+               aria-valuemin="1"
+               aria-valuenow="1"
+        >
+        <button type="button"
+                class="van-stepper__plus"
+        >
+        </button>
+      </div>
     </div>
   </div>
-</div>
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Decimal Length
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper">
-      <button type="button"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="text"
-             role="spinbutton"
-             class="van-stepper__input"
-             inputmode="decimal"
-             aria-valuemax="Infinity"
-             aria-valuemin="1"
-             aria-valuenow="1"
-      >
-      <button type="button"
-              class="van-stepper__plus"
-      >
-      </button>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Decimal Length
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper">
+        <button type="button"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="text"
+               role="spinbutton"
+               class="van-stepper__input"
+               inputmode="decimal"
+               aria-valuemax="Infinity"
+               aria-valuemin="1"
+               aria-valuenow="1"
+        >
+        <button type="button"
+                class="van-stepper__plus"
+        >
+        </button>
+      </div>
     </div>
   </div>
-</div>
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Custom Size
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper">
-      <button type="button"
-              style="width: 32px; height: 32px;"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="text"
-             role="spinbutton"
-             class="van-stepper__input"
-             style="width: 40px; height: 32px;"
-             inputmode="decimal"
-             aria-valuemax="Infinity"
-             aria-valuemin="1"
-             aria-valuenow="1"
-      >
-      <button type="button"
-              style="width: 32px; height: 32px;"
-              class="van-stepper__plus"
-      >
-      </button>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Custom Size
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper">
+        <button type="button"
+                style="width: 32px; height: 32px;"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="text"
+               role="spinbutton"
+               class="van-stepper__input"
+               style="width: 40px; height: 32px;"
+               inputmode="decimal"
+               aria-valuemax="Infinity"
+               aria-valuemin="1"
+               aria-valuenow="1"
+        >
+        <button type="button"
+                style="width: 32px; height: 32px;"
+                class="van-stepper__plus"
+        >
+        </button>
+      </div>
     </div>
   </div>
-</div>
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Before Change
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper">
-      <button type="button"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="text"
-             role="spinbutton"
-             class="van-stepper__input"
-             inputmode="decimal"
-             aria-valuemax="Infinity"
-             aria-valuemin="1"
-             aria-valuenow="1"
-      >
-      <button type="button"
-              class="van-stepper__plus"
-      >
-      </button>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Before Change
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper">
+        <button type="button"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="text"
+               role="spinbutton"
+               class="van-stepper__input"
+               inputmode="decimal"
+               aria-valuemax="Infinity"
+               aria-valuemin="1"
+               aria-valuenow="1"
+        >
+        <button type="button"
+                class="van-stepper__plus"
+        >
+        </button>
+      </div>
     </div>
   </div>
-</div>
-<div class="van-cell van-cell--center">
-  <div class="van-cell__title">
-    <span>
-      Round Theme
-    </span>
-  </div>
-  <div class="van-cell__value">
-    <div class="van-stepper van-stepper--round">
-      <button type="button"
-              style="width: 22px; height: 22px;"
-              class="van-stepper__minus van-stepper__minus--disabled"
-      >
-      </button>
-      <input type="text"
-             role="spinbutton"
-             class="van-stepper__input"
-             style="height: 22px;"
-             readonly
-             inputmode="decimal"
-             aria-valuemax="Infinity"
-             aria-valuemin="1"
-             aria-valuenow="1"
-      >
-      <button type="button"
-              style="width: 22px; height: 22px;"
-              class="van-stepper__plus"
-      >
-      </button>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title">
+      <span>
+        Round Theme
+      </span>
+    </div>
+    <div class="van-cell__value">
+      <div class="van-stepper van-stepper--round">
+        <button type="button"
+                style="width: 22px; height: 22px;"
+                class="van-stepper__minus van-stepper__minus--disabled"
+        >
+        </button>
+        <input type="text"
+               role="spinbutton"
+               class="van-stepper__input"
+               style="height: 22px;"
+               readonly
+               inputmode="decimal"
+               aria-valuemax="Infinity"
+               aria-valuemin="1"
+               aria-valuenow="1"
+        >
+        <button type="button"
+                style="width: 22px; height: 22px;"
+                class="van-stepper__plus"
+        >
+        </button>
+      </div>
     </div>
   </div>
 </div>