@tuya-miniapp/smart-ui 1.3.1-beta-3 → 1.3.1-beta-5

package/dist/notify/demo/index.js

@@ -0,0 +1,45 @@
+import { SmartComponent } from '../../common/component';
+import Notify from '../../notify/notify';
+SmartComponent({
+    methods: {
+        showNotify() {
+            Notify({
+                context: this,
+                message: I18n.t('notificationContent'),
+                duration: 0,
+                transition: 'fade',
+            });
+        },
+        showCustomColor() {
+            Notify({
+                context: this,
+                message: I18n.t('customColor'),
+                color: '#ad0000',
+                background: '#ffe1e1',
+            });
+            Notify.clear();
+        },
+        showCustomDuration() {
+            Notify({
+                context: this,
+                duration: 1000,
+                message: I18n.t('customDuration'),
+            });
+        },
+        showNotifyByType(event) {
+            const { type } = event.currentTarget.dataset;
+            Notify({
+                type,
+                context: this,
+                message: I18n.t('notificationContent'),
+            });
+        },
+        showSafe() {
+            Notify({
+                context: this,
+                message: I18n.t('notificationContent'),
+                safeAreaInsetTop: true,
+            });
+        },
+    },
+});

package/dist/overlay/demo/index.d.ts

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

package/dist/overlay/demo/index.js

@@ -0,0 +1,22 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        show: false,
+        showEmbedded: false,
+    },
+    methods: {
+        onClickShow() {
+            this.setData({ show: true });
+        },
+        onClickHide() {
+            this.setData({ show: false });
+        },
+        onClickShowEmbedded() {
+            this.setData({ showEmbedded: true });
+        },
+        onClickHideEmbedded() {
+            this.setData({ showEmbedded: false });
+        },
+        noop() { },
+    },
+});

package/dist/picker/demo/index.d.ts

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

package/dist/picker/demo/index.js

@@ -0,0 +1,76 @@
+import { SmartComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+SmartComponent({
+    data: {
+        activeIndex: 3,
+        column1: [I18n.t('hangzhou'), I18n.t('ningbo'), I18n.t('wenzhou'), I18n.t('jiaxing'), I18n.t('huzhou')],
+        column2: [
+            { text: I18n.t('hangzhou'), disabled: true },
+            { text: I18n.t('ningbo') },
+            { text: I18n.t('wenzhou') },
+        ],
+        column3: {
+            [I18n.t('zhejiang')]: [I18n.t('hangzhou'), I18n.t('ningbo'), I18n.t('wenzhou'), I18n.t('jiaxing'), I18n.t('huzhou')],
+            [I18n.t('fujian')]: [I18n.t('fuzhou'), I18n.t('xiamen'), I18n.t('putian'), I18n.t('sanming'), I18n.t('quanzhou')],
+        },
+        column4: [
+            {
+                values: [I18n.t('zhejiang'), I18n.t('fujian')],
+                className: 'column1',
+                unit: I18n.t('province'),
+            },
+            {
+                values: [I18n.t('hangzhou'), I18n.t('ningbo'), I18n.t('wenzhou'), I18n.t('jiaxing'), I18n.t('huzhou')],
+                className: 'column2',
+                defaultIndex: 2,
+                unit: I18n.t('city'),
+            },
+        ],
+        column5: [
+            {
+                values: new Array(100).fill(1).map((x, i) => i),
+                style: 'flex: none;width: auto;min-width: 61px;'
+            },
+            {
+                values: ['.'],
+                style: 'flex: none;width: 8px;display:flex;justify-content: center;'
+            },
+            {
+                values: new Array(20).fill(1).map((x, i) => i),
+                style: 'flex: none;width: auto;min-width: 61px;',
+                unit: 'Kg',
+            },
+        ],
+    },
+    methods: {
+        onChange1(event) {
+            const { value, index } = event.detail;
+            Toast({
+                context: this,
+                message: `Value: ${value}, Index：${index}`,
+            });
+            // this.setData({
+            //   column1: new Array(200).fill(1).map((v, i) => `杭州${i}`),
+            //   activeIndex: 50,
+            // });
+        },
+        onConfirm(event) {
+            const { value, index } = event.detail;
+            Toast({
+                context: this,
+                message: `Value: ${value}, Index：${index}`,
+            });
+        },
+        onCancel() {
+            Toast({
+                context: this,
+                message: I18n.t('cancel'),
+            });
+        },
+        onChange2(event) {
+            const { picker, value } = event.detail;
+            picker.setColumnValues(1, this.data.column3[value[0]]);
+            getApp().picker = picker;
+        },
+    },
+});

package/dist/picker/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-picker{-webkit-text-size-adjust:100%;background-color:var(--picker-background-color,var(--app-B4,#fff));overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.smart-picker__toolbar{display:flex;height:var(--picker-toolbar-height,44px);justify-content:space-between;line-height:var(--picker-toolbar-height,44px)}.smart-picker__cancel,.smart-picker__confirm{font-size:var(--picker-action-font-size,14px);padding:var(--picker-action-padding,0 16px)}.smart-picker__cancel--hover,.smart-picker__confirm--hover{opacity:.7}.smart-picker__confirm{color:var(--picker-confirm-action-color,#576b95)}.smart-picker__cancel{color:var(--picker-cancel-action-color,#969799)}.smart-picker__title{font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bolder,700);max-width:50%;text-align:center}.smart-picker__columns{display:flex;-webkit-mask-image:linear-gradient(0deg,transparent,#000 50%,transparent);mask-image:linear-gradient(0deg,transparent,#000 50%,transparent);-webkit-mask-position:top,bottom;mask-position:top,bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;overflow:hidden;padding:0 var(--picker-padding,16px);position:relative}.smart-picker__column{flex:1 1;width:0}.smart-picker__loading{align-items:center;background-color:var(--picker-loading-mask-color,var(--app-B4,#fff));bottom:0;display:flex;justify-content:center;left:0;opacity:.9;position:absolute;right:0;top:0;z-index:4}.smart-picker__frame{left:var(--picker-padding,16px);pointer-events:none;position:absolute;right:var(--picker-padding,16px);top:50%;transform:translateY(-50%);z-index:1}
+@import '../common/index.css';.smart-picker{-webkit-text-size-adjust:100%;background-color:var(--picker-background-color,var(--app-B4,#fff));overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.smart-picker__toolbar{display:flex;height:var(--picker-toolbar-height,44px);justify-content:space-between;line-height:var(--picker-toolbar-height,44px)}.smart-picker__cancel,.smart-picker__confirm{font-size:var(--picker-action-font-size,14px);padding:var(--picker-action-padding,0 16px)}.smart-picker__cancel--hover,.smart-picker__confirm--hover{opacity:.7}.smart-picker__confirm{color:var(--picker-confirm-action-color,#576b95)}.smart-picker__cancel{color:var(--picker-cancel-action-color,#969799)}.smart-picker__title{font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bolder,700);max-width:50%;text-align:center}.smart-picker__columns{display:flex;justify-content:center;-webkit-mask-image:linear-gradient(0deg,transparent,#000 50%,transparent);mask-image:linear-gradient(0deg,transparent,#000 50%,transparent);-webkit-mask-position:top,bottom;mask-position:top,bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;overflow:hidden;padding:0 var(--picker-padding,16px);position:relative}.smart-picker__column{flex:1 1;width:0}.smart-picker__loading{align-items:center;background-color:var(--picker-loading-mask-color,var(--app-B4,#fff));bottom:0;display:flex;justify-content:center;left:0;opacity:.9;position:absolute;right:0;top:0;z-index:4}.smart-picker__frame{left:var(--picker-padding,16px);pointer-events:none;position:absolute;right:var(--picker-padding,16px);top:50%;transform:translateY(-50%);z-index:1}

package/dist/picker/index.js

@@ -122,7 +122,7 @@ SmartComponent({
         },
         // get values of all columns
         getValues() {
-            return this.children.map((child) => child.getValue());
+            return this.children.map(child => child.getValue());
         },
         // set values of all columns
         setValues(values) {
@@ -131,7 +131,7 @@ SmartComponent({
         },
         // get indexes of all columns
         getIndexes() {
-            return this.children.map((child) => child.data.currentIndex);
+            return this.children.map(child => child.data.currentIndex);
         },
         // set indexes of all columns
         setIndexes(indexes) {

package/dist/picker/index.wxml

@@ -19,6 +19,7 @@
       data-index="{{ index }}"
       custom-class="column-class"
       value-key="{{ valueKey }}"
+      style="{{ item.style }}"
       options="{{ item.values }}"
       unit="{{ item.unit || unit }}"
       default-index="{{ item.defaultIndex || defaultIndex }}"

package/dist/picker/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-picker{-webkit-text-size-adjust:100%;background-color:var(--picker-background-color,var(--app-B4,#fff));overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.smart-picker__toolbar{display:flex;height:var(--picker-toolbar-height,44px);justify-content:space-between;line-height:var(--picker-toolbar-height,44px)}.smart-picker__cancel,.smart-picker__confirm{font-size:var(--picker-action-font-size,14px);padding:var(--picker-action-padding,0 16px)}.smart-picker__cancel--hover,.smart-picker__confirm--hover{opacity:.7}.smart-picker__confirm{color:var(--picker-confirm-action-color,#576b95)}.smart-picker__cancel{color:var(--picker-cancel-action-color,#969799)}.smart-picker__title{font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bolder,700);max-width:50%;text-align:center}.smart-picker__columns{display:flex;-webkit-mask-image:linear-gradient(0deg,transparent,#000 50%,transparent);mask-image:linear-gradient(0deg,transparent,#000 50%,transparent);-webkit-mask-position:top,bottom;mask-position:top,bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;overflow:hidden;padding:0 var(--picker-padding,16px);position:relative}.smart-picker__column{flex:1 1;width:0}.smart-picker__loading{align-items:center;background-color:var(--picker-loading-mask-color,var(--app-B4,#fff));bottom:0;display:flex;justify-content:center;left:0;opacity:.9;position:absolute;right:0;top:0;z-index:4}.smart-picker__frame{left:var(--picker-padding,16px);pointer-events:none;position:absolute;right:var(--picker-padding,16px);top:50%;transform:translateY(-50%);z-index:1}
+@import '../common/index.wxss';.smart-picker{-webkit-text-size-adjust:100%;background-color:var(--picker-background-color,var(--app-B4,#fff));overflow:hidden;position:relative;-webkit-user-select:none;user-select:none}.smart-picker__toolbar{display:flex;height:var(--picker-toolbar-height,44px);justify-content:space-between;line-height:var(--picker-toolbar-height,44px)}.smart-picker__cancel,.smart-picker__confirm{font-size:var(--picker-action-font-size,14px);padding:var(--picker-action-padding,0 16px)}.smart-picker__cancel--hover,.smart-picker__confirm--hover{opacity:.7}.smart-picker__confirm{color:var(--picker-confirm-action-color,#576b95)}.smart-picker__cancel{color:var(--picker-cancel-action-color,#969799)}.smart-picker__title{font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bolder,700);max-width:50%;text-align:center}.smart-picker__columns{display:flex;justify-content:center;-webkit-mask-image:linear-gradient(0deg,transparent,#000 50%,transparent);mask-image:linear-gradient(0deg,transparent,#000 50%,transparent);-webkit-mask-position:top,bottom;mask-position:top,bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;overflow:hidden;padding:0 var(--picker-padding,16px);position:relative}.smart-picker__column{flex:1 1;width:0}.smart-picker__loading{align-items:center;background-color:var(--picker-loading-mask-color,var(--app-B4,#fff));bottom:0;display:flex;justify-content:center;left:0;opacity:.9;position:absolute;right:0;top:0;z-index:4}.smart-picker__frame{left:var(--picker-padding,16px);pointer-events:none;position:absolute;right:var(--picker-padding,16px);top:50%;transform:translateY(-50%);z-index:1}

package/dist/picker-column/index.js

@@ -101,11 +101,9 @@ SmartComponent({
             const { unit, valueKey } = this.data;
             if (unit) {
                 let maxText = '';
-                options.forEach((option) => {
+                options.forEach(option => {
                     var _a;
-                    const value = isObj(option)
-                        ? (_a = option[valueKey]) === null || _a === void 0 ? void 0 : _a.toString()
-                        : option === null || option === void 0 ? void 0 : option.toString();
+                    const value = isObj(option) ? (_a = option[valueKey]) === null || _a === void 0 ? void 0 : _a.toString() : option === null || option === void 0 ? void 0 : option.toString();
                     if (maxText.length < value.length) {
                         maxText = value;
                     }
@@ -155,9 +153,7 @@ SmartComponent({
         },
         getOptionText(option) {
             const { data } = this;
-            return isObj(option) && data.valueKey in option
-                ? option[data.valueKey]
-                : option;
+            return isObj(option) && data.valueKey in option ? option[data.valueKey] : option;
         },
         setIndex(index, userAction, animate) {
             const { data } = this;
@@ -180,7 +176,6 @@ SmartComponent({
                                 this.$emit('change', index);
                                 return;
                             }
-                            ;
                             this.fireChange = true;
                         });
                     });

package/dist/popup/demo/index.d.ts

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

package/dist/popup/demo/index.js

@@ -0,0 +1,79 @@
+import rightIcon from '@tuya-miniapp/icons/dist/svg/Right';
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        show: {
+            basic: false,
+            top: false,
+            bottom: false,
+            left: false,
+            right: false,
+            round: false,
+            closeIcon: false,
+            customCloseIcon: false,
+            customIconPosition: false,
+        },
+        rightIcon,
+    },
+    methods: {
+        toggle(type, show) {
+            this.setData({
+                [`show.${type}`]: show,
+            });
+        },
+        showBasic() {
+            this.toggle('basic', true);
+        },
+        hideBasic() {
+            this.toggle('basic', false);
+        },
+        showTop() {
+            this.toggle('top', true);
+        },
+        hideTop() {
+            this.toggle('top', false);
+        },
+        showLeft() {
+            this.toggle('left', true);
+        },
+        hideLeft() {
+            this.toggle('left', false);
+        },
+        showRight() {
+            this.toggle('right', true);
+        },
+        hideRight() {
+            this.toggle('right', false);
+        },
+        showBottom() {
+            this.toggle('bottom', true);
+        },
+        hideBottom() {
+            this.toggle('bottom', false);
+        },
+        showRound() {
+            this.toggle('round', true);
+        },
+        hideRound() {
+            this.toggle('round', false);
+        },
+        showCloseIcon() {
+            this.toggle('closeIcon', true);
+        },
+        hideCloseIcon() {
+            this.toggle('closeIcon', false);
+        },
+        showCustomCloseIcon() {
+            this.toggle('customCloseIcon', true);
+        },
+        hideCustomCloseIcon() {
+            this.toggle('customCloseIcon', false);
+        },
+        showCustomIconPosition() {
+            this.toggle('customIconPosition', true);
+        },
+        hideCustomIconPosition() {
+            this.toggle('customIconPosition', false);
+        },
+    },
+});

package/dist/progress/demo/index.d.ts

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

package/dist/progress/demo/index.js

@@ -0,0 +1,4 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {},
+});

package/dist/progress/index.js

@@ -36,10 +36,7 @@ SmartComponent({
     },
     methods: {
         setLeft() {
-            Promise.all([
-                getRect(this, '.smart-progress'),
-                getRect(this, '.smart-progress__pivot'),
-            ]).then(([portion, pivot]) => {
+            Promise.all([getRect(this, '.smart-progress'), getRect(this, '.smart-progress__pivot')]).then(([portion, pivot]) => {
                 if (portion && pivot) {
                     this.setData({
                         right: (pivot.width * (this.data.percentage - 100)) / 100,

package/dist/radio/demo/index.d.ts

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

package/dist/radio/demo/index.js

@@ -0,0 +1,31 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        radioBasic: '1',
+        radioDisabled: '2',
+        radioColor: '1',
+        radioText: '1',
+        radioHoriz: '1',
+        radioIcon: '1',
+        radioSize: '1',
+        radioLabel: '1',
+        radioShape: '1',
+        radioCell: '1',
+        icon: {
+            normal: 'https://images.tuyacn.com/content-platform/hestia/1729664215ebd89f13e54.png',
+            active: 'https://images.tuyacn.com/content-platform/hestia/1730877912e76cbdb7563.png',
+        },
+    },
+    methods: {
+        onChange(event) {
+            const { key } = event.currentTarget.dataset;
+            this.setData({ [key]: event.detail });
+        },
+        onClick(event) {
+            const { name } = event.currentTarget.dataset;
+            this.setData({
+                radioCell: name,
+            });
+        },
+    },
+});

package/dist/radio/index.js

@@ -1,4 +1,4 @@
-import CheckMarkIcon from '@tuya-miniapp/icons/dist/svg/Checkmark';
+import CheckIcon from '@tuya-miniapp/icons/dist/svg/Check';
 import { canIUseModel } from '../common/version';
 import { SmartComponent } from '../common/component';
 import { useParent } from '../common/relation';
@@ -31,7 +31,7 @@ SmartComponent({
     data: {
         direction: '',
         parentDisabled: false,
-        icon: CheckMarkIcon,
+        icon: CheckIcon,
     },
     methods: {
         updateFromParent() {

package/dist/radio-group/index.js

@@ -16,7 +16,7 @@ SmartComponent({
     },
     methods: {
         updateChildren() {
-            this.children.forEach((child) => child.updateFromParent());
+            this.children.forEach(child => child.updateFromParent());
         },
     },
 });

package/dist/rate/demo/index.d.ts

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

package/dist/rate/demo/index.js

@@ -0,0 +1,25 @@
+import Icloud from '@tuya-miniapp/icons/dist/svg/Icloud';
+import XmarkIcloud from '@tuya-miniapp/icons/dist/svg/XmarkIcloud';
+import { SmartComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+SmartComponent({
+    data: {
+        value1: 3,
+        value2: 3,
+        value3: 3,
+        value4: 2.5,
+        value5: 4,
+        value6: 3,
+        value8: 2,
+        icon: Icloud,
+        voidIcon: XmarkIcloud,
+    },
+    methods: {
+        onChange(event) {
+            Toast({
+                context: this,
+                message: I18n.t('currentValue') + event.detail,
+            });
+        },
+    },
+});

package/dist/rate/index.js

@@ -76,10 +76,10 @@ SmartComponent({
             if (!touchable)
                 return;
             const { clientX } = event.touches[0];
-            getAllRect(this, '.smart-rate__icon').then((list) => {
+            getAllRect(this, '.smart-rate__icon').then(list => {
                 const target = list
                     .sort((cur, next) => cur.dataset.score - next.dataset.score)
-                    .find((item) => clientX >= item.left && clientX <= item.right);
+                    .find(item => clientX >= item.left && clientX <= item.right);
                 if (target != null) {
                     this.onSelect(Object.assign(Object.assign({}, event), { currentTarget: target }));
                 }

package/dist/row/index.js

@@ -15,7 +15,7 @@ SmartComponent({
     },
     methods: {
         setGutter() {
-            this.children.forEach((col) => {
+            this.children.forEach(col => {
                 col.setData(this.data);
             });
         },

package/dist/search/demo/index.d.ts

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

package/dist/search/demo/index.js

@@ -0,0 +1,43 @@
+import { SmartComponent } from '../../common/component';
+import TriangleDown from '@tuya-miniapp/icons/dist/svg/TriangleDown';
+SmartComponent({
+    data: {
+        value: '',
+        icon: TriangleDown,
+    },
+    methods: {
+        onChange(e) {
+            this.setData({
+                value: e.detail,
+            });
+        },
+        onSearch(event) {
+            if (event.detail) {
+                wx.showToast({
+                    title: I18n.t('searchText') + ': ' + event.detail,
+                    icon: 'none',
+                });
+            }
+        },
+        onClick() {
+            if (this.data.value) {
+                wx.showToast({
+                    title: I18n.t('searchText') + ': ' + this.data.value,
+                    icon: 'none',
+                });
+            }
+        },
+        onCancel() {
+            wx.showToast({
+                title: I18n.t('cancel'),
+                icon: 'none',
+            });
+        },
+        onClear() {
+            wx.showToast({
+                title: I18n.t('clear'),
+                icon: 'none',
+            });
+        },
+    },
+});

package/dist/sidebar/demo/index.d.ts

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

package/dist/sidebar/demo/index.js

@@ -0,0 +1,9 @@
+import { SmartComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+SmartComponent({
+    methods: {
+        onChange(event) {
+            Toast({ context: this, message: `${I18n.t('switchTo')}${event.detail}${I18n.t('item')}` });
+        },
+    },
+});

package/dist/skeleton/demo/index.d.ts

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

package/dist/skeleton/demo/index.js

@@ -0,0 +1,11 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        show: false,
+    },
+    methods: {
+        onChange({ detail }) {
+            this.setData({ show: detail });
+        },
+    },
+});

package/dist/slider/demo/index.d.ts

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

package/dist/slider/demo/index.js

@@ -0,0 +1,19 @@
+import { SmartComponent } from '../../common/component';
+SmartComponent({
+    data: {
+        currentValue: 50,
+    },
+    methods: {
+        onChange(event) {
+            wx.showToast({
+                icon: 'none',
+                title: `${I18n.t('currentValue')}${event.detail}`,
+            });
+        },
+        onDrag(event) {
+            this.setData({
+                currentValue: event.detail.value,
+            });
+        },
+    },
+});

package/dist/slider/index.js

@@ -57,7 +57,7 @@ SmartComponent({
             this.startValue = this.format(this.value);
             this.newValue = this.value;
             if (this.isRange(this.newValue)) {
-                this.startValue = this.newValue.map((val) => this.format(val));
+                this.startValue = this.newValue.map(val => this.format(val));
             }
             else {
                 this.startValue = this.format(this.newValue);
@@ -72,7 +72,7 @@ SmartComponent({
             }
             this.touchMove(event);
             this.dragStatus = DRAG_STATUS.MOVING;
-            getRect(this, '.smart-slider').then((rect) => {
+            getRect(this, '.smart-slider').then(rect => {
                 const { vertical } = this.data;
                 const delta = vertical ? this.deltaY : this.deltaX;
                 const total = vertical ? rect.height : rect.width;
@@ -102,12 +102,10 @@ SmartComponent({
             if (this.data.disabled)
                 return;
             const { min } = this.data;
-            getRect(this, '.smart-slider').then((rect) => {
+            getRect(this, '.smart-slider').then(rect => {
                 const { vertical } = this.data;
                 const touch = event.touches[0];
-                const delta = vertical
-                    ? touch.clientY - rect.top
-                    : touch.clientX - rect.left;
+                const delta = vertical ? touch.clientY - rect.top : touch.clientX - rect.left;
                 const total = vertical ? rect.height : rect.width;
                 const value = Number(min) + (delta / total) * this.getRange();
                 if (this.isRange(this.value)) {
@@ -137,7 +135,7 @@ SmartComponent({
         },
         updateValue(value, end, drag) {
             if (this.isRange(value)) {
-                value = this.handleOverlap(value).map((val) => this.format(val));
+                value = this.handleOverlap(value).map(val => this.format(val));
             }
             else {
                 value = this.format(value);

package/dist/stepper/demo/index.d.ts

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

package/dist/stepper/demo/index.js

@@ -0,0 +1,19 @@
+import { SmartComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+SmartComponent({
+    data: {
+        value: 1,
+    },
+    methods: {
+        onChange(event) {
+            Toast.loading({
+                context: this,
+                forbidClick: true,
+            });
+            setTimeout(() => {
+                Toast.clear();
+                this.setData({ value: event.detail });
+            }, 500);
+        },
+    },
+});

package/dist/steps/demo/index.d.ts

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

package/dist/steps/demo/index.js

@@ -0,0 +1,42 @@
+import { CheckmarkCircle, Right } from '@tuya-miniapp/icons';
+import { SmartComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+const steps = [
+    {
+        text: I18n.t('step1'),
+        desc: I18n.t('descriptionInformation'),
+    },
+    {
+        text: I18n.t('stepTwo'),
+        desc: I18n.t('descriptionInformation'),
+    },
+    {
+        text: I18n.t('stepThree'),
+        desc: I18n.t('descriptionInformation'),
+    },
+    {
+        text: I18n.t('stepFour'),
+        desc: I18n.t('descriptionInformation'),
+    },
+];
+SmartComponent({
+    data: {
+        active: 1,
+        steps,
+        customIcon: CheckmarkCircle,
+        inActiveIcon: Right,
+    },
+    methods: {
+        nextStep() {
+            this.setData({
+                active: ++this.data.active % 4,
+            });
+        },
+        onClick(event) {
+            Toast({
+                context: this,
+                message: `Index: ${event.detail}`,
+            });
+        },
+    },
+});