feat(Stepper): add theme prop (#6282)

* feat(Stepper): add theme prop

* docs: add round theme doc

src/stepper/README.md

@@ -97,6 +97,12 @@ export default {
 };
 ```
 
+### Round Theme
+
+```html
+<van-stepper v-model="value" theme="round" button-size="22" disable-input />
+```
+
 ## API
 
 ### Props
@@ -112,6 +118,7 @@ export default {
 | input-width | Input width | _number \| string_ | `32px` |
 | button-size `v2.0.5` | Button size | _number \| string_ | `28px` |
 | decimal-length `v2.2.1` | Decimal length | _number \| string_ | - |
+| theme `v2.8.2` | Theme, can be set to `round` | _string_ | - |
 | integer | Whether to allow only integers | _boolean_ | `false` |
 | disabled | Disable value change | _boolean_ | `false` |
 | disable-plus `v2.2.16` | Whether to disable plus button | _boolean_ | `false` |

src/stepper/README.zh-CN.md

@@ -121,6 +121,14 @@ export default {
 };
 ```
 
+### 圆角风格
+
+将 theme 设置为 `round` 来展示圆角风格的步进器
+
+```html
+<van-stepper v-model="value" theme="round" button-size="22" disable-input />
+```
+
 ## API
 
 ### Props
@@ -136,6 +144,7 @@ export default {
 | input-width | 输入框宽度，默认单位为`px` | _number \| string_ | `32px` |
 | button-size `v2.0.5` | 按钮大小以及输入框高度，默认单位为`px` | _number \| string_ | `28px` |
 | decimal-length `v2.2.1` | 固定显示的小数位数 | _number \| string_ | - |
+| theme `v2.8.2` | 样式风格，可选值为 `round` | _string_ | - |
 | integer | 是否只允许输入整数 | _boolean_ | `false` |
 | disabled | 是否禁用步进器 | _boolean_ | `false` |
 | disable-plus `v2.2.16` | 是否禁用增加按钮 | _boolean_ | `false` |

src/stepper/demo/index.vue

@@ -35,6 +35,15 @@
     <van-cell center :title="t('asyncChange')">
       <van-stepper :value="stepper6" async-change @change="onChange" />
     </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-section>
 </template>
 
@@ -45,6 +54,7 @@ export default {
       step: '步长设置',
       range: '限制输入范围',
       integer: '限制输入整数',
+      roundTheme: '圆角风格',
       asyncChange: '异步变更',
       customSize: '自定义大小',
       disableInput: '禁用输入框',
@@ -54,6 +64,7 @@ export default {
       step: 'Step',
       range: 'Range',
       integer: 'Integer',
+      roundTheme: 'Round Theme',
       asyncChange: 'Async Change',
       customSize: 'Custom Size',
       disableInput: 'Disable Input',
@@ -71,6 +82,7 @@ export default {
       stepper6: 1,
       stepper7: 1,
       stepper8: 1,
+      stepperRound: 1,
       disabledInput: 1,
     };
   },

src/stepper/index.js

@@ -25,6 +25,7 @@ export default createComponent({
 
   props: {
     value: null,
+    theme: String,
     integer: Boolean,
     disabled: Boolean,
     inputWidth: [Number, String],
@@ -278,7 +279,7 @@ export default createComponent({
     });
 
     return (
-      <div class={bem()}>
+      <div class={bem([this.theme])}>
         <button
           vShow={this.showMinus}
           type="button"

src/stepper/index.less

@@ -11,7 +11,7 @@
     width: @stepper-input-height;
     height: @stepper-input-height;
     margin: 0;
-    padding: @padding-base;
+    padding: 0;
     color: @stepper-button-icon-color;
     vertical-align: middle;
     background-color: @stepper-background-color;
@@ -19,24 +19,22 @@
     cursor: pointer;
 
     &::before {
-      width: 13px;
+      width: 50%;
       height: 1px;
     }
 
     &::after {
       width: 1px;
-      height: 13px;
+      height: 50%;
     }
 
     &::before,
     &::after {
       position: absolute;
-      top: 0;
+      top: 50%;
-      right: 0;
+      left: 50%;
-      bottom: 0;
-      left: 0;
-      margin: auto;
       background-color: currentColor;
+      transform: translate(-50%, -50%);
       content: '';
     }
 
@@ -75,6 +73,7 @@
     padding: 0;
     color: @stepper-input-text-color;
     font-size: @stepper-input-font-size;
+    line-height: @stepper-input-line-height;
     text-align: center;
     vertical-align: middle;
     background-color: @stepper-background-color;
@@ -94,4 +93,37 @@
       cursor: default;
     }
   }
+
+  &--round {
+    .van-stepper__input {
+      background-color: transparent;
+    }
+
+    .van-stepper__plus,
+    .van-stepper__minus {
+      border-radius: 100%;
+
+      &:active {
+        opacity: @active-opacity;
+      }
+
+      &--disabled {
+        &,
+        &:active {
+          opacity: 0.3;
+        }
+      }
+    }
+
+    .van-stepper__plus {
+      color: @white;
+      background-color: @stepper-button-round-theme-color;
+    }
+
+    .van-stepper__minus {
+      color: @stepper-button-round-theme-color;
+      background-color: @white;
+      border: 1px solid @stepper-button-round-theme-color;
+    }
+  }
 }

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

@@ -56,5 +56,11 @@ exports[`renders demo correctly 1`] = `
       <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="text" role="spinbutton" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
     </div>
   </div>
+  <div class="van-cell van-cell--center">
+    <div class="van-cell__title"><span>圆角风格</span></div>
+    <div class="van-cell__value">
+      <div class="van-stepper van-stepper--round"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 22px; height: 22px;"></button><input type="text" role="spinbutton" readonly="readonly" inputmode="decimal" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="height: 22px;"><button type="button" class="van-stepper__plus" style="width: 22px; height: 22px;"></button></div>
+    </div>
+  </div>
 </div>
 `;

src/style/var.less

@@ -674,9 +674,11 @@
 @stepper-button-icon-color: @text-color;
 @stepper-button-disabled-color: @background-color;
 @stepper-button-disabled-icon-color: @gray-5;
+@stepper-button-round-theme-color: @red;
 @stepper-input-width: 32px;
 @stepper-input-height: 28px;
 @stepper-input-font-size: @font-size-md;
+@stepper-input-line-height: normal;
 @stepper-input-text-color: @text-color;
 @stepper-input-disabled-text-color: @gray-5;
 @stepper-input-disabled-background-color: @active-color;