@tuya/miniapp-smart-ui 2.13.5-beta-0

package/lib/slider/index.wxml

@@ -0,0 +1,68 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="../wxs/style.wxs" module="style" />
+
+<view
+  class="custom-class {{ utils.bem('slider', { disabled, vertical }) }}"
+  style="{{ wrapperStyle }}"
+  bind:tap="onClick"
+>
+  <view
+    class="{{ utils.bem('slider__bar') }}"
+    style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}"
+  >
+    <view
+      wx:if="{{ range }}"
+      class="{{ utils.bem('slider__button-wrapper-left') }}"
+      data-index="{{ 0 }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="left-button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+    <view
+      wx:if="{{ range }}"
+      class="{{ utils.bem('slider__button-wrapper-right') }}"
+      data-index="{{ 1 }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="right-button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+
+    <view
+      wx:if="{{ !range }}"
+      class="{{ utils.bem('slider__button-wrapper') }}"
+      bind:touchstart="onTouchStart"
+      catch:touchmove="onTouchMove"
+      bind:touchend="onTouchEnd"
+      bind:touchcancel="onTouchEnd"
+    >
+      <slot
+        wx:if="{{ useButtonSlot }}"
+        name="button"
+      />
+      <view
+        wx:else
+        class="{{ utils.bem('slider__button') }}"
+      />
+    </view>
+  </view>
+</view>

package/lib/slider/index.wxs

@@ -0,0 +1,14 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function barStyle(barHeight, activeColor) {
+  return style({
+    height: addUnit(barHeight),
+    background: activeColor,
+  });
+}
+
+module.exports = {
+  barStyle: barStyle,
+};

package/lib/slider/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-slider{background-color:var(--slider-inactive-background-color,#ebedf0);border-radius:999px;height:var(--slider-bar-height,2px);position:relative}.smart-slider:before{bottom:calc(var(--padding-xs, 8px)*-1);content:"";left:0;position:absolute;right:0;top:calc(var(--padding-xs, 8px)*-1)}.smart-slider__bar{background-color:var(--slider-active-background-color,#1989fa);border-radius:inherit;height:100%;position:relative;transition:all .2s;width:100%}.smart-slider__button{background-color:var(--slider-button-background-color,#fff);border-radius:var(--slider-button-border-radius,50%);box-shadow:var(--slider-button-box-shadow,0 1px 2px rgba(0,0,0,.5));height:var(--slider-button-height,24px);width:var(--slider-button-width,24px)}.smart-slider__button-wrapper,.smart-slider__button-wrapper-right{position:absolute;right:0;top:50%;transform:translate3d(50%,-50%,0)}.smart-slider__button-wrapper-left{left:0;position:absolute;top:50%;transform:translate3d(-50%,-50%,0)}.smart-slider--disabled{opacity:var(--slider-disabled-opacity,.3)}.smart-slider--vertical{display:inline-block;height:100%;width:var(--slider-bar-height,2px)}.smart-slider--vertical .smart-slider__button-wrapper,.smart-slider--vertical .smart-slider__button-wrapper-right{bottom:0;right:50%;top:auto;transform:translate3d(50%,50%,0)}.smart-slider--vertical .smart-slider__button-wrapper-left{left:auto;right:50%;top:0;transform:translate3d(50%,-50%,0)}.smart-slider--vertical:before{bottom:0;left:-8px;right:-8px;top:0}

package/lib/stepper/README.md

@@ -0,0 +1,208 @@
+---
+category: 数据录入
+---
+
+# Stepper 步进器
+
+### 介绍
+
+步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-stepper": "@tuya/miniapp-smart-ui/lib/stepper/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过`value`设置输入值，可以通过`change`事件监听到输入值的变化。
+
+```html
+<smart-stepper value="{{ 1 }}" bind:change="onChange" />
+```
+
+```js
+Page({
+  onChange(event) {
+    console.log(event.detail);
+  },
+});
+```
+
+### 步长设置
+
+通过`step`属性设置每次点击增加或减少按钮时变化的值，默认为`1`。
+
+```html
+<smart-stepper value="{{ 1 }}" step="2" />
+```
+
+### 限制输入范围
+
+通过`min`和`max`属性限制输入值的范围。
+
+```html
+<smart-stepper value="{{ 5 }}" min="5" max="8" />
+```
+
+### 支持负数输入 `v2.13.2`
+
+当`min`小于`0`时，输入框支持手动输入负数，适合温度、偏移量等允许负值的场景。
+
+```html
+<smart-stepper value="{{ -3 }}" min="{{ -10 }}" max="{{ 10 }}" />
+```
+
+### 限制输入整数
+
+设置`integer`属性后，输入框将限制只能输入整数。
+
+```html
+<smart-stepper value="{{ 1 }}" integer />
+```
+
+### 禁用状态
+
+通过设置`disabled`属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。
+
+```html
+<smart-stepper value="{{ 1 }}" disabled />
+```
+
+### 关闭长按
+
+通过设置`long-press`属性决定步进器是否开启长按手势。
+
+```html
+<smart-stepper value="{{ 1 }}" long-press="{{ false }}" />
+```
+
+### 固定小数位数
+
+通过设置`decimal-length`属性可以保留固定的小数位数。
+
+```html
+<smart-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />
+```
+
+### 异步变更
+
+如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`。
+
+```html
+<smart-stepper value="{{ value }}" async-change bind:change="onChange" />
+```
+
+```js
+Page({
+  data: {
+    value: 1,
+  },
+
+  onChange(value) {
+    Toast.loading({ forbidClick: true });
+
+    setTimeout(() => {
+      Toast.clear();
+      this.setData({ value });
+    }, 500);
+  },
+});
+```
+
+### 自定义大小
+
+通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度。
+
+```html
+<smart-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
+```
+
+## API
+
+### Props
+
+| 参数                  | 说明                                                                            | 类型               | 默认值  |
+| --------------------- | ------------------------------------------------------------------------------- | ------------------ | ------- |
+| always-embed `v1.9.3` | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | _boolean_          | `false` |
+| async-change          | 是否开启异步变更，开启后需要手动控制输入值                                      | _boolean_          | `false` |
+| button-size           | 按钮大小，默认单位为 `px`，输入框高度会和按钮大小保持一致                       | _string \| number_ | `28px`  |
+| decimal-length        | 固定显示的小数位数                                                              | _number_           | -       |
+| disable-input         | 是否禁用输入框                                                                  | _boolean_          | `false` |
+| disable-minus         | 是否禁用减少按钮                                                                | _boolean_          | -       |
+| disable-plus          | 是否禁用增加按钮                                                                | _boolean_          | -       |
+| disabled              | 是否禁用                                                                        | _boolean_          | `false` |
+| input-width           | 输入框宽度，默认单位为 `px`                                                     | _string \| number_ | `32px`  |
+| integer               | 是否只允许输入整数                                                              | _boolean_          | `false` |
+| long-press            | 是否开启长按手势                                                                | _boolean_          | `true`  |
+| max                   | 最大值                                                                          | _string \| number_ | -       |
+| min                   | 最小值                                                                          | _string \| number_ | `1`     |
+| minus-aria-label `v2.13.0` | 减少按钮的无障碍读屏文案                                                   | _string_           | -       |
+| name                  | 在表单内提交时的标识符                                                          | _string_           | -       |
+| plus-aria-label `v2.13.0` | 增加按钮的无障碍读屏文案                                                    | _string_           | -       |
+| show-minus            | 是否显示减少按钮                                                                | _boolean_          | `true`  |
+| show-plus             | 是否显示增加按钮                                                                | _boolean_          | `true`  |
+| step                  | 步长                                                                            | _string \| number_ | `1`     |
+| theme                 | 样式风格，可选值为 `round`                                                      | _string_           | -       |
+| value                 | 输入值                                                                          | _string \| number_ | 最小值  |
+
+### Events
+
+| 事件名         | 说明                     | 回调参数                   |
+| -------------- | ------------------------ | -------------------------- |
+| bind:blur      | 输入框失焦时触发         | -                          |
+| bind:change    | 当绑定值变化时触发的事件 | event.detail: 当前输入的值 |
+| bind:focus     | 输入框聚焦时触发         | -                          |
+| bind:minus     | 点击减少按钮时触发       | -                          |
+| bind:overlimit | 点击不可用的按钮时触发   | -                          |
+| bind:plus      | 点击增加按钮时触发       | -                          |
+
+### Slot
+
+| 名称  | 说明     |
+| ----- | -------- |
+| minus | 减号按钮 |
+| plus  | 加号按钮 |
+
+### 外部样式类
+
+| 类名            | 说明           |
+| --------------- | -------------- |
+| custom-class    | 根节点样式类   |
+| input-class     | 输入框样式类   |
+| minusmart-class | 减号按钮样式类 |
+| plusmart-class  | 加号按钮样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --stepper-container-background-color | _var(--app-B6-N9, rgba(0, 0, 0, 0.05))_ | 背景色 |
+| --stepper-background-border-radius | _10px_ | 背景圆角 |
+| --stepper-padding | _2px_ | 外部合作内边距 |
+| --stepper-active-color | _#e8e8e8_ | 按钮点击后颜色 |
+| --stepper-background-color | _var(--app-B6, #fff)_ | 按钮背景色 |
+| --stepper-button-icon-color | _var(--app-B6-N3, rgba(0, 0, 0, 0.5))_ | 按钮内部图标颜色 |
+| --stepper-button-disabled-color | _none_ `v2.1.7`  _var(--app-B6, #ffffff)_ `v2.6.1` | 按钮禁用颜色 |
+| --stepper-button-disabled-icon-color | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_ | 按钮禁用图标颜色 |
+| --stepper-button-round-theme-color | _#ee0a24_ | 圆角样式按钮颜色 |
+| --stepper-btn-width | _44px_ | 按钮宽度 |
+| --stepper-btn-height | _28px_ | 按钮高度 |
+| --stepper-input-width | _50px_ | 中间数组输入框宽度 |
+| --stepper-input-height | _28px_ | 中间数组输入框高度 |
+| --stepper-input-font-size | _16px_ | 中间数组输入框字体大小 |
+| --stepper-input-line-height | _normal_ | 中间数组输入框字体高度 |
+| --stepper-input-text-color | _var(--app-B6-N1, rgba(0, 0, 0, 1))_ | 中间数组输入框字体颜色 |
+| --stepper-input-disabled-text-color | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_ | 中间数组输入框禁用模式字体颜色 |
+| --stepper-border-radius | _8px_ | 按钮圆角 |
+| --stepper-button-border `v2.2.0` | _0_ | 按钮边框 |
+| --stepper-button-icon-font-size `v2.2.0` | _22px_ | 按钮内部图标的字体大小 |

package/lib/stepper/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-stepper{background:var(--stepper-container-background-color,var(--app-B6-N9,rgba(0,0,0,.05)));border-radius:var(--stepper-background-border-radius,10px);display:inline-flex;font-size:0;padding:var(--stepper-padding,2px)}.smart-stepper__minus,.smart-stepper__plus{--icon-color:currentColor;align-items:center;background-color:var(--stepper-background-color,var(--app-B6,#fff));border:var(--stepper-button-border,0);border-radius:var(--stepper-border-radius,8px);box-sizing:border-box;color:var(--stepper-button-icon-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:inline-flex;font-size:var(--stepper-button-icon-font-size,27px);height:var(--stepper-input-height,28px);justify-content:center;padding:var(--padding-base,4px);position:relative;vertical-align:middle;width:var(--stepper-input-height,44px)}.smart-stepper__minus-icon,.smart-stepper__plus-icon{display:none}.smart-stepper__minus>.smart-stepper__minus-icon:first-child,.smart-stepper__minus>.smart-stepper__plus-icon:first-child,.smart-stepper__plus>.smart-stepper__minus-icon:first-child,.smart-stepper__plus>.smart-stepper__plus-icon:first-child{display:inline-flex}.smart-stepper__minus--hover,.smart-stepper__plus--hover{background-color:var(--stepper-active-color,#e8e8e8)}.smart-stepper__minus--disabled,.smart-stepper__plus--disabled{color:var(--stepper-button-disabled-icon-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-stepper__minus--disabled,.smart-stepper__minus--disabled.smart-stepper__minus--hover,.smart-stepper__minus--disabled.smart-stepper__plus--hover,.smart-stepper__plus--disabled,.smart-stepper__plus--disabled.smart-stepper__minus--hover,.smart-stepper__plus--disabled.smart-stepper__plus--hover{background-color:var(--stepper-button-disabled-color,var(--app-B6,#fff))}.smart-stepper--round .smart-stepper__input{background-color:initial!important}.smart-stepper--round .smart-stepper__minus,.smart-stepper--round .smart-stepper__plus{border-radius:100%}.smart-stepper--round .smart-stepper__minus:active,.smart-stepper--round .smart-stepper__plus:active{opacity:.7}.smart-stepper--round .smart-stepper__minus--disabled,.smart-stepper--round .smart-stepper__minus--disabled:active,.smart-stepper--round .smart-stepper__plus--disabled,.smart-stepper--round .smart-stepper__plus--disabled:active{opacity:.3}.smart-stepper--round .smart-stepper__plus{background-color:var(--stepper-button-round-theme-color,#ee0a24);color:#fff}.smart-stepper--round .smart-stepper__minus{background-color:#fff;border:1px solid var(--stepper-button-round-theme-color,#ee0a24);color:var(--stepper-button-round-theme-color,#ee0a24)}.smart-stepper__input{-webkit-appearance:none;border:0;border-radius:0;border-width:1px 0;box-sizing:border-box;color:var(--stepper-input-text-color,var(--app-B6-N1,#000));display:inline-block;font-size:var(--stepper-input-font-size,16px);height:var(--stepper-input-height,28px);min-height:0;padding:1px;text-align:center;vertical-align:middle;width:var(--stepper-input-width,50px)}.smart-stepper__input--disabled{color:var(--stepper-input-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}

package/lib/stepper/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/stepper/index.js

@@ -0,0 +1,256 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var validator_1 = require("../common/validator");
+var Minus_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Minus"));
+var Plus_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Plus"));
+var ty_1 = __importDefault(require("../common/ty"));
+var LONG_PRESS_START_TIME = 600;
+var LONG_PRESS_INTERVAL = 200;
+// add num and avoid float number
+function add(num1, num2) {
+    var cardinal = Math.pow(10, 10);
+    return Math.round((num1 + num2) * cardinal) / cardinal;
+}
+function equal(value1, value2) {
+    return String(value1) === String(value2);
+}
+(0, component_1.SmartComponent)({
+    field: true,
+    classes: ['input-class', 'plus-class', 'minus-class'],
+    props: {
+        value: {
+            type: null,
+        },
+        integer: {
+            type: Boolean,
+            observer: 'check',
+        },
+        disabled: Boolean,
+        inputWidth: String,
+        buttonSize: String,
+        asyncChange: Boolean,
+        disableInput: Boolean,
+        decimalLength: {
+            type: Number,
+            value: null,
+            observer: 'check',
+        },
+        min: {
+            type: null,
+            value: 1,
+            observer: 'check',
+        },
+        max: {
+            type: null,
+            value: Number.MAX_SAFE_INTEGER,
+            observer: 'check',
+        },
+        step: {
+            type: null,
+            value: 1,
+        },
+        showPlus: {
+            type: Boolean,
+            value: true,
+        },
+        showMinus: {
+            type: Boolean,
+            value: true,
+        },
+        disablePlus: Boolean,
+        disableMinus: Boolean,
+        longPress: {
+            type: Boolean,
+            value: true,
+        },
+        theme: String,
+        alwaysEmbed: Boolean,
+        minusAriaLabel: {
+            type: String,
+            value: '',
+        },
+        plusAriaLabel: {
+            type: String,
+            value: '',
+        },
+    },
+    data: {
+        currentValue: '',
+        Minus: Minus_1.default,
+        Plus: Plus_1.default,
+        focus: false,
+        isInit: false,
+    },
+    watch: {
+        value: function () {
+            this.observeValue();
+        },
+    },
+    created: function () {
+        var currentValue = this.format(this.data.value, true);
+        if (currentValue !== this.data.value) {
+            this.$emit('change', currentValue);
+        }
+        this.setData({
+            currentValue: currentValue,
+            isInit: true,
+        });
+    },
+    methods: {
+        observeValue: function () {
+            var _a = this.data, value = _a.value, isInit = _a.isInit, focus = _a.focus;
+            if (!isInit || "".concat(value) === "".concat(this.data.currentValue) || focus)
+                return;
+            var currentValue = this.format(value, !this.data.focus);
+            if (currentValue !== value) {
+                this.$emit('change', currentValue);
+            }
+            this.setData({ currentValue: currentValue });
+        },
+        check: function () {
+            var val = this.format(this.data.currentValue, true);
+            if (!equal(val, this.data.currentValue)) {
+                this.setData({ currentValue: val });
+            }
+        },
+        isDisabled: function (type) {
+            var _a = this.data, disabled = _a.disabled, disablePlus = _a.disablePlus, disableMinus = _a.disableMinus, currentValue = _a.currentValue, max = _a.max, min = _a.min;
+            if (type === 'plus') {
+                return disabled || disablePlus || +currentValue >= +max;
+            }
+            return disabled || disableMinus || +currentValue <= +min;
+        },
+        onFocus: function (event) {
+            ty_1.default.selectionVibrate();
+            this.$emit('focus', event.detail);
+            this.setData({ focus: true });
+        },
+        onBlur: function (event) {
+            var value = this.format(event.detail.value, true);
+            var stepValue = Math.round((value - this.data.min) / this.data.step) * this.data.step +
+                Number(this.data.min);
+            var strStepValue = (0, validator_1.isDef)(this.data.decimalLength)
+                ? stepValue.toFixed(this.data.decimalLength)
+                : stepValue.toString();
+            this.setData({ currentValue: strStepValue, focus: false });
+            this.emitChange(strStepValue);
+            this.$emit('blur', __assign(__assign({}, event.detail), { value: strStepValue }));
+        },
+        // limit value range
+        format: function (value, isFormatAll) {
+            if (isFormatAll === void 0) { isFormatAll = false; }
+            value = String(value).replace(/[^0-9.-]/g, '');
+            // handle negative sign: only allow at the beginning, and only one
+            var isNegative = value.charAt(0) === '-';
+            value = value.replace(/-/g, '');
+            if (isNegative && this.data.min < 0) {
+                value = '-' + value;
+            }
+            if (this.data.integer && value.indexOf('.') !== -1) {
+                value = value.split('.')[0];
+            }
+            // 当有多个.号时，只保留第一个
+            var firstDotIndex = value.indexOf('.');
+            if (firstDotIndex !== -1) {
+                value =
+                    value.substring(0, firstDotIndex + 1) +
+                        value.substring(firstDotIndex + 1).replace(/\./g, '');
+            }
+            // allow typing a lone minus sign without clamping
+            if (value === '-' && !isFormatAll) {
+                return value;
+            }
+            // format range
+            if (isFormatAll) {
+                value = value === '' || value === '-' ? 0 : +value;
+                value = Math.min(this.data.max, value);
+                value = Math.max(value, this.data.min);
+            }
+            // format decimal
+            if ((0, validator_1.isDef)(this.data.decimalLength) && isFormatAll) {
+                value = value.toFixed(this.data.decimalLength);
+            }
+            return value;
+        },
+        onInput: function (event) {
+            var _a = (event.detail || {}).value, value = _a === void 0 ? '' : _a;
+            // allow input to be empty
+            if (value === '') {
+                return;
+            }
+            var formatted = this.format(value);
+            // allow typing a lone minus sign without triggering change
+            if (formatted === '-') {
+                this.setData({ currentValue: formatted });
+                return;
+            }
+            this.emitChange(formatted);
+        },
+        emitChange: function (value) {
+            if (!this.data.asyncChange) {
+                this.setData({ currentValue: value });
+            }
+            this.$emit('change', value);
+        },
+        onChange: function () {
+            var type = this.type;
+            if (this.isDisabled(type)) {
+                this.$emit('overlimit', type);
+                return;
+            }
+            var diff = type === 'minus' ? -this.data.step : +this.data.step;
+            var value = this.format(add(+this.data.currentValue, diff), true);
+            this.emitChange(value);
+            this.$emit(type, value);
+            ty_1.default.vibrateShort({ type: 'light' });
+        },
+        longPressStep: function () {
+            var _this = this;
+            this.longPressTimer = setTimeout(function () {
+                _this.onChange();
+                _this.longPressStep();
+            }, LONG_PRESS_INTERVAL);
+        },
+        onTap: function (event) {
+            var type = event.currentTarget.dataset.type;
+            this.type = type;
+            this.onChange();
+        },
+        onTouchStart: function (event) {
+            var _this = this;
+            if (!this.data.longPress) {
+                return;
+            }
+            clearTimeout(this.longPressTimer);
+            var type = event.currentTarget.dataset.type;
+            this.type = type;
+            this.isLongPress = false;
+            this.longPressTimer = setTimeout(function () {
+                _this.isLongPress = true;
+                _this.onChange();
+                _this.longPressStep();
+            }, LONG_PRESS_START_TIME);
+        },
+        onTouchEnd: function () {
+            if (!this.data.longPress) {
+                return;
+            }
+            clearTimeout(this.longPressTimer);
+        },
+    },
+});

package/lib/stepper/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index"
+  }
+}

package/lib/stepper/index.wxml

@@ -0,0 +1,50 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="{{ utils.bem('stepper', [theme]) }} custom-class">
+  <view
+    wx:if="{{ showMinus }}"
+    data-type="minus"
+    style="{{ computed.buttonStyle({ buttonSize }) }}"
+    class="minus-class {{ utils.bem('stepper__minus', { disabled: computed.checkMin({ min, currentValue, disabled, disableMinus }) }) }}"
+    hover-class="smart-stepper__minus--hover"
+    hover-stay-time="70"
+    aria-role="button"
+    role="button"
+    aria-label="{{ minusAriaLabel }}"
+    bind:tap="onTap"
+    bind:touchstart="onTouchStart"
+    bind:touchend="onTouchEnd"
+  >
+    <slot name="minus" />
+    <smart-icon name="{{ Minus }}" class="{{ utils.bem('stepper__minus-icon') }}" />
+  </view>
+  <input
+    type="{{ min < 0 ? 'text' : (integer ? 'number' : 'digit') }}"
+    class="smart-manrope input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
+    style="{{ computed.inputStyle({ buttonSize, inputWidth }) }}"
+    value="{{ currentValue }}"
+    disabled="{{ disabled || disableInput }}"
+    always-embed="{{ alwaysEmbed }}"
+    bindinput="onInput"
+    bind:focus="onFocus"
+    bind:blur="onBlur"
+  />
+  <view
+    wx:if="{{ showPlus }}"
+    data-type="plus"
+    style="{{ computed.buttonStyle({ buttonSize }) }}"
+    class="plus-class {{ utils.bem('stepper__plus', { disabled: computed.checkMax({ max, currentValue, disabled, disablePlus }) }) }}"
+    hover-class="smart-stepper__plus--hover"
+    hover-stay-time="70"
+    aria-role="button"
+    role="button"
+    aria-label="{{ plusAriaLabel }}"
+    bind:tap="onTap"
+    bind:touchstart="onTouchStart"
+    bind:touchend="onTouchEnd"
+  >
+    <slot name="plus" />
+    <smart-icon name="{{ Plus }}" class="{{ utils.bem('stepper__plus-icon') }}" />
+  </view>
+</view>

package/lib/stepper/index.wxs

@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function buttonStyle(data) {
+  return style({
+    width: addUnit(data.buttonSize),
+    height: addUnit(data.buttonSize),
+  });
+}
+
+function inputStyle(data) {
+  return style({
+    width: addUnit(data.inputWidth),
+    height: addUnit(data.buttonSize),
+  });
+}
+
+function checkMin(data) {
+  return data.currentValue <= Number(data.min) || data.disabled || data.disableMinus
+}
+
+function checkMax(data) {
+  return data.currentValue >= Number(data.max) || data.disabled || data.disablePlus
+}
+
+module.exports = {
+  buttonStyle: buttonStyle,
+  inputStyle: inputStyle,
+  checkMin: checkMin,
+  checkMax: checkMax,
+};

package/lib/stepper/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-stepper{background:var(--stepper-container-background-color,var(--app-B6-N9,rgba(0,0,0,.05)));border-radius:var(--stepper-background-border-radius,10px);display:inline-flex;font-size:0;padding:var(--stepper-padding,2px)}.smart-stepper__minus,.smart-stepper__plus{--icon-color:currentColor;align-items:center;background-color:var(--stepper-background-color,var(--app-B6,#fff));border:var(--stepper-button-border,0);border-radius:var(--stepper-border-radius,8px);box-sizing:border-box;color:var(--stepper-button-icon-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:inline-flex;font-size:var(--stepper-button-icon-font-size,27px);height:var(--stepper-input-height,28px);justify-content:center;padding:var(--padding-base,4px);position:relative;vertical-align:middle;width:var(--stepper-input-height,44px)}.smart-stepper__minus-icon,.smart-stepper__plus-icon{display:none}.smart-stepper__minus>.smart-stepper__minus-icon:first-child,.smart-stepper__minus>.smart-stepper__plus-icon:first-child,.smart-stepper__plus>.smart-stepper__minus-icon:first-child,.smart-stepper__plus>.smart-stepper__plus-icon:first-child{display:inline-flex}.smart-stepper__minus--hover,.smart-stepper__plus--hover{background-color:var(--stepper-active-color,#e8e8e8)}.smart-stepper__minus--disabled,.smart-stepper__plus--disabled{color:var(--stepper-button-disabled-icon-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-stepper__minus--disabled,.smart-stepper__minus--disabled.smart-stepper__minus--hover,.smart-stepper__minus--disabled.smart-stepper__plus--hover,.smart-stepper__plus--disabled,.smart-stepper__plus--disabled.smart-stepper__minus--hover,.smart-stepper__plus--disabled.smart-stepper__plus--hover{background-color:var(--stepper-button-disabled-color,var(--app-B6,#fff))}.smart-stepper--round .smart-stepper__input{background-color:initial!important}.smart-stepper--round .smart-stepper__minus,.smart-stepper--round .smart-stepper__plus{border-radius:100%}.smart-stepper--round .smart-stepper__minus:active,.smart-stepper--round .smart-stepper__plus:active{opacity:.7}.smart-stepper--round .smart-stepper__minus--disabled,.smart-stepper--round .smart-stepper__minus--disabled:active,.smart-stepper--round .smart-stepper__plus--disabled,.smart-stepper--round .smart-stepper__plus--disabled:active{opacity:.3}.smart-stepper--round .smart-stepper__plus{background-color:var(--stepper-button-round-theme-color,#ee0a24);color:#fff}.smart-stepper--round .smart-stepper__minus{background-color:#fff;border:1px solid var(--stepper-button-round-theme-color,#ee0a24);color:var(--stepper-button-round-theme-color,#ee0a24)}.smart-stepper__input{-webkit-appearance:none;border:0;border-radius:0;border-width:1px 0;box-sizing:border-box;color:var(--stepper-input-text-color,var(--app-B6-N1,#000));display:inline-block;font-size:var(--stepper-input-font-size,16px);height:var(--stepper-input-height,28px);min-height:0;padding:1px;text-align:center;vertical-align:middle;width:var(--stepper-input-width,50px)}.smart-stepper__input--disabled{color:var(--stepper-input-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}