@tuya-miniapp/smart-ui 2.1.10 → 2.1.11-beta-2

package/dist/action-sheet/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.smart-action-sheet__list{max-height:325px;overflow-y:scroll}.smart-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.smart-action-sheet__item{border-radius:var(--action-sheet-item-border-radius,0);color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.smart-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.smart-action-sheet__cancel,.smart-action-sheet__confirm,.smart-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.smart-action-sheet__cancel--hover,.smart-action-sheet__confirm--hover,.smart-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.smart-action-sheet__cancel:after,.smart-action-sheet__confirm:after,.smart-action-sheet__item:after{border-width:0}.smart-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.smart-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.smart-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.smart-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.smart-action-sheet__item--disabled.smart-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.smart-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.smart-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.smart-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.smart-action-sheet__loading{color:inherit!important;display:flex!important}.smart-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
+@import '../common/index.css';.smart-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.smart-action-sheet__list{max-height:325px;overflow-y:scroll}.smart-action-sheet__icon{--icon-color:var(--action-sheet-active-icon-color,var(--app-M1,#3678e3));font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.smart-action-sheet__item{border-radius:var(--action-sheet-item-border-radius,0);color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.smart-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.smart-action-sheet__cancel,.smart-action-sheet__confirm,.smart-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.smart-action-sheet__cancel--hover,.smart-action-sheet__confirm--hover,.smart-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.smart-action-sheet__cancel:after,.smart-action-sheet__confirm:after,.smart-action-sheet__item:after{border-width:0}.smart-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.smart-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.smart-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.smart-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.smart-action-sheet__item--disabled.smart-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.smart-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.smart-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.smart-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.smart-action-sheet__loading{color:inherit!important;display:flex!important}.smart-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}

package/dist/action-sheet/index.js

@@ -50,14 +50,6 @@ SmartComponent({
     },
     data: {
         checkMarkIcon,
-        checkMarkIconColor: '#3678E3',
-    },
-    mounted() {
-        var _a;
-        // @ts-ignore
-        const themeInfo = (_a = ty === null || ty === void 0 ? void 0 : ty.getThemeInfo()) !== null && _a !== void 0 ? _a : {};
-        const checkMarkIconColor = this.data.activeColor || themeInfo['--app-M1'] || '#3678E3';
-        this.setData({ checkMarkIconColor });
     },
     methods: {
         onSelect(event) {

package/dist/action-sheet/index.wxml

@@ -53,7 +53,7 @@
       <block wx:if="{{ !item.loading }}">
         {{ item.name }}
         <view wx:if="{{ item.subname }}" class="smart-action-sheet__subname" >{{ item.subname }}</view>
-        <smart-icon wx:if="{{ item.checked }}" name="{{ checkMarkIcon }}" class="smart-action-sheet__icon" color="{{ checkMarkIconColor }}" />
+        <smart-icon wx:if="{{ item.checked }}" name="{{ checkMarkIcon }}" class="smart-action-sheet__icon" color="{{ activeColor }}" />
       </block>
       <smart-loading wx:else custom-class="smart-action-sheet__loading" size="22px" />
     </button>

package/dist/action-sheet/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.smart-action-sheet__list{max-height:325px;overflow-y:scroll}.smart-action-sheet__icon{font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.smart-action-sheet__item{border-radius:var(--action-sheet-item-border-radius,0);color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.smart-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.smart-action-sheet__cancel,.smart-action-sheet__confirm,.smart-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.smart-action-sheet__cancel--hover,.smart-action-sheet__confirm--hover,.smart-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.smart-action-sheet__cancel:after,.smart-action-sheet__confirm:after,.smart-action-sheet__item:after{border-width:0}.smart-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.smart-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.smart-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.smart-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.smart-action-sheet__item--disabled.smart-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.smart-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.smart-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.smart-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.smart-action-sheet__loading{color:inherit!important;display:flex!important}.smart-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}
+@import '../common/index.wxss';.smart-action-sheet{border-radius:var(--popup-round-border-radius,var(--popup-round-border-radius,16px))!important;color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000));left:var(--action-sheet-left,16px)!important;margin:var(--action-sheet-margin,0 0 16px);max-height:var(--action-sheet-max-height,90%)!important;width:var(--action-sheet-width,calc(100% - 32px))!important}.smart-action-sheet__list{max-height:325px;overflow-y:scroll}.smart-action-sheet__icon{--icon-color:var(--action-sheet-active-icon-color,var(--app-M1,#3678e3));font-size:var(--action-sheet-item-icon-size,28px);margin:var(--action-sheet-item-icon-margin,16px 16px 0 0);position:absolute;right:0;top:0}.smart-action-sheet__item{border-radius:var(--action-sheet-item-border-radius,0);color:var(--action-sheet-item-text-color,var(--app-B4-N1,#000))}.smart-action-sheet__item:not(:last-child){border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)))}.smart-action-sheet__cancel,.smart-action-sheet__confirm,.smart-action-sheet__item{background-color:var(--action-sheet-item-background,var(--app-B4,#fff));font-size:var(--action-sheet-item-font-size,16px);font-weight:var(--action-sheet-item-font-weight,normal);line-height:var(--action-sheet-item-line-height,24px);padding:16px;text-align:center;width:100%}.smart-action-sheet__cancel--hover,.smart-action-sheet__confirm--hover,.smart-action-sheet__item--hover{background-color:var(--action-sheet-active-color,var(--app-B1,#f6f7fb))}.smart-action-sheet__cancel:after,.smart-action-sheet__confirm:after,.smart-action-sheet__item:after{border-width:0}.smart-action-sheet__cancel{color:var(--action-sheet-cancel-text-color,var(--app-B4-N3,rgba(0,0,0,.5)))}.smart-action-sheet__confirm{color:var(--action-sheet-confirm-text-color,var(--app-B4-N1,#000));font-weight:var(--action-sheet-confirm-font-weight,500)}.smart-action-sheet__gap{background-color:var(--action-sheet-footer-padding-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:block;height:var(--action-sheet-footer-padding-top,8px)}.smart-action-sheet__item--disabled{opacity:var(--action-sheet-item-disabled-opacity,.3)}.smart-action-sheet__item--disabled.smart-action-sheet__item--hover{background-color:var(--action-sheet-item-background,var(--app-B4,#fff))}.smart-action-sheet__subname{color:var(--action-sheet-subname-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-subname-font-size,12px);line-height:var(--action-sheet-subname-line-height,20px);margin-top:var(--padding-xs,8px)}.smart-action-sheet__header{border-bottom:1px solid var(--action-sheet-header-border-color,var(--app-B4-N7,rgba(0,0,0,.1)));color:var(--action-sheet-header-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-header-font-size,16px);font-weight:var(--action-sheet-header-font-weight,normal);line-height:var(--action-sheet-header-height,56px);text-align:center}.smart-action-sheet__description{color:var(--action-sheet-description-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--action-sheet-description-font-size,14px);line-height:var(--action-sheet-description-line-height,20px);padding:20px var(--padding-md,16px);text-align:center}.smart-action-sheet__loading{color:inherit!important;display:flex!important}.smart-action-sheet__footer{align-items:center;background-color:var(--action-sheet-item-background,var(--app-B4,#fff));display:flex;font-size:var(--action-sheet-item-font-size,16px);justify-content:space-around;line-height:var(--action-sheet-item-line-height,22px);text-align:center}

package/dist/cell/index.js

@@ -1,7 +1,13 @@
-import upIcon from '@tuya-miniapp/icons/dist/svg/Up';
-import downIcon from '@tuya-miniapp/icons/dist/svg/Down';
-import leftIcon from '@tuya-miniapp/icons/dist/svg/Left';
-import rightIcon from '@tuya-miniapp/icons/dist/svg/Right';
+import upIcon from '@tuya-miniapp/icons/dist/svg/Up.js';
+import downIcon from '@tuya-miniapp/icons/dist/svg/Down.js';
+import leftIcon from '@tuya-miniapp/icons/dist/svg/Left.js';
+import rightIcon from '@tuya-miniapp/icons/dist/svg/Right.js';
+// import {
+//   Right as rightIcon,
+//   Left as leftIcon,
+//   Down as downIcon,
+//   Up as upIcon,
+// } from '@tuya-miniapp/icons';
 import { link } from '../mixins/link';
 import { SmartComponent } from '../common/component';
 SmartComponent({

package/dist/common/utils.d.ts

@@ -19,3 +19,4 @@ export declare const clamp: (num: any, min: any, max: any) => number;
 export declare function getCurrentPage<T>(): T & WechatMiniprogram.OptionalInterface<WechatMiniprogram.Page.ILifetime> & WechatMiniprogram.Page.InstanceProperties & WechatMiniprogram.Page.InstanceMethods<WechatMiniprogram.IAnyObject> & WechatMiniprogram.Page.Data<WechatMiniprogram.IAnyObject> & WechatMiniprogram.IAnyObject;
 export declare const isPC: boolean;
 export declare const isWxWork: boolean;
+export declare function replacePlaceholders(template: any, values: any): any;

package/dist/common/utils.js

@@ -84,3 +84,9 @@ export function getCurrentPage() {
 export const isPC = ['mac', 'windows'].includes(getSystemInfoSync().platform);
 // 是否企业微信
 export const isWxWork = getSystemInfoSync().environment === 'wxwork';
+export function replacePlaceholders(template, values) {
+    // 使用正则表达式匹配占位符
+    return template.replace(/{{(.*?)}}/g, (match, key) => {
+        return values[key] || match; // 如果在values中找到key对应的值，则替换；否则保留原样
+    });
+}

package/dist/datetime-picker/demo/index.js

@@ -4,13 +4,33 @@ SmartComponent({
     data: {
         minHour: 10,
         maxHour: 20,
+        columnsOrder: [2, 1, 1],
         minDate: new Date(2018, 0, 1).getTime(),
         maxDate: new Date(2019, 10, 1).getTime(),
         currentDate1: new Date(2018, 2, 31).getTime(),
         currentDate2: null,
         currentDate3: new Date(2018, 0, 1),
         currentDate4: '12:00',
+        currentDate5: '11:00',
         loading: false,
+        formatterMap: {
+            year: '{{year}}年',
+            month: {
+                '01': 'January',
+                '02': 'February',
+                '03': 'March',
+                '04': 'April',
+                '05': 'May',
+                '06': 'June',
+                '07': 'July',
+                '08': 'August',
+                '09': 'September',
+                '10': 'October',
+                '11': 'November',
+                '12': 'December',
+            },
+            day: '{{day}}日'
+        },
         formatter(type, value) {
             if (type === 'year') {
                 return `${value}${I18n.t('year')}`;

package/dist/datetime-picker/index.js

@@ -1,13 +1,11 @@
 import { SmartComponent } from '../common/component';
 import { isDef } from '../common/validator';
 import { pickerProps } from '../picker/shared';
+import { range, replacePlaceholders } from '../common/utils';
 const currentYear = new Date().getFullYear();
 function isValidDate(date) {
     return isDef(date) && !isNaN(new Date(date).getTime());
 }
-function range(num, min, max) {
-    return Math.min(Math.max(num, min), max);
-}
 function padZero(val) {
     return `00${val}`.slice(-2);
 }
@@ -49,6 +47,18 @@ SmartComponent({
         }, formatter: {
             type: null,
             value: defaultFormatter,
+        }, AMText: {
+            type: String,
+            value: 'AM',
+        }, PMText: {
+            type: String,
+            value: 'PM',
+        }, columnsOrder: {
+            type: Array,
+            value: [],
+        }, is12HoursTime: {
+            type: Boolean,
+            value: false,
         }, minDate: {
             type: Number,
             value: new Date(currentYear - 10, 0, 1).getTime(),
@@ -73,8 +83,12 @@ SmartComponent({
             type: Number,
             value: 59,
             observer: 'updateValue',
+        }, formatterMap: {
+            type: Object,
+            value: undefined,
         } }),
     data: {
+        part: 0,
         innerValue: Date.now(),
         columns: [],
     },
@@ -98,17 +112,31 @@ SmartComponent({
             }
             return this.picker;
         },
+        formatterFunc(type, value) {
+            var _a;
+            const { formatterMap, formatter = defaultFormatter } = this.data;
+            const mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
+            if (typeof mapDetail === 'string') {
+                return replacePlaceholders(mapDetail, { [type]: value });
+            }
+            if (typeof mapDetail === 'object') {
+                return (_a = mapDetail[value]) !== null && _a !== void 0 ? _a : formatter(type, value);
+            }
+            return formatter(type, value);
+        },
         updateColumns() {
-            const { formatter = defaultFormatter, locale } = this.data;
+            const { locale } = this.data;
             const results = this.getOriginColumns().map(column => ({
-                values: column.values.map(value => formatter(column.type, value)),
+                values: column.values.map(value => this.formatterFunc(column.type, value)),
+                order: column.order,
                 unit: locale === null || locale === void 0 ? void 0 : locale[column.type],
             }));
             return this.set({ columns: results });
         },
         getOriginColumns() {
-            const { filter } = this.data;
-            const results = this.getRanges().map(({ type, range }) => {
+            const { filter, is12HoursTime, type, AMText, PMText, columnsOrder } = this.data;
+            const results = this.getRanges().map(({ type, range }, index) => {
+                const order = columnsOrder[index];
                 let values = times(range[1] - range[0] + 1, index => {
                     const value = range[0] + index;
                     return type === 'year' ? `${value}` : padZero(value);
@@ -116,12 +144,38 @@ SmartComponent({
                 if (filter) {
                     values = filter(type, values);
                 }
-                return { type, values };
+                return { type, values, order };
             });
+            if (is12HoursTime && type === 'time') {
+                return [
+                    {
+                        type: '12hours',
+                        values: [AMText, PMText],
+                        order: columnsOrder[0],
+                    },
+                    ...results.map((item, index) => (Object.assign(Object.assign({}, item), { order: columnsOrder[index + 1] }))),
+                ].filter(Boolean);
+            }
             return results;
         },
         getRanges() {
             const { data } = this;
+            if (data.type === 'time' && data.is12HoursTime) {
+                const { part } = data;
+                return [
+                    {
+                        type: 'hour',
+                        range: [
+                            Math.max(part ? 13 : 1, data.minHour) - (part ? 12 : 0),
+                            Math.min(part ? 24 : 12, data.maxHour) - (part ? 12 : 0),
+                        ],
+                    },
+                    {
+                        type: 'minute',
+                        range: [data.minMinute, data.maxMinute],
+                    },
+                ];
+            }
             if (data.type === 'time') {
                 return [
                     {
@@ -231,12 +285,24 @@ SmartComponent({
             const { data } = this;
             let value;
             const picker = this.getPicker();
-            const originColumns = this.getOriginColumns();
-            if (data.type === 'time') {
-                const indexes = picker.getIndexes();
+            const indexes = picker.getIndexes();
+            if (data.type === 'time' && data.is12HoursTime) {
+                const [part, hour, minute] = indexes;
+                this.setData({
+                    part,
+                });
+                const originColumns = this.getOriginColumns();
+                value = `${(part ? 12 : 0) +
+                    Number(originColumns[1].values[hour > originColumns[1].values.length - 1 ? originColumns[1].values.length - 1 : hour])}:${Number(originColumns[2].values[minute > originColumns[2].values.length - 1
+                    ? originColumns[2].values.length - 1
+                    : minute])}`;
+            }
+            else if (data.type === 'time') {
+                const originColumns = this.getOriginColumns();
                 value = `${+originColumns[0].values[indexes[0]]}:${+originColumns[1].values[indexes[1]]}`;
             }
             else {
+                const originColumns = this.getOriginColumns();
                 const indexes = picker.getIndexes();
                 const values = indexes.map((value, index) => originColumns[index].values[value]);
                 const year = getTrueValue(values[0]);
@@ -263,10 +329,22 @@ SmartComponent({
         },
         updateColumnValue(value) {
             let values = [];
-            const { type } = this.data;
-            const formatter = this.data.formatter || defaultFormatter;
+            const { type, is12HoursTime } = this.data;
+            const formatter = this.formatterFunc;
             const picker = this.getPicker();
-            if (type === 'time') {
+            if (type === 'time' && is12HoursTime) {
+                const [hour, minute] = value.split(':');
+                const part = Number(hour) > 0 && Number(hour) < 13 ? 0 : 1;
+                this.setData({
+                    part,
+                });
+                values = [
+                    part,
+                    formatter('hour', part ? (!hour ? 12 : hour - 12) : hour),
+                    formatter('minute', minute),
+                ];
+            }
+            else if (type === 'time') {
                 const pair = value.split(':');
                 values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
             }

package/dist/datetime-picker/index.wxml

@@ -10,6 +10,7 @@
   visible-item-count="{{ visibleItemCount }}"
   confirm-button-text="{{ confirmButtonText }}"
   cancel-button-text="{{ cancelButtonText }}"
+  change-animation="{{ changeAnimation }}"
   bind:change="onChange"
   bind:confirm="onConfirm"
   bind:cancel="onCancel"

package/dist/field/index.js

@@ -1,7 +1,7 @@
 import { nextTick } from '../common/utils';
 import { SmartComponent } from '../common/component';
 import { commonProps, inputProps, textareaProps } from './props';
-import Xmark from '@tuya-miniapp/icons/dist/svg/Xmark';
+import Xmark from '@tuya-miniapp/icons/dist/svg/Xmark.js';
 SmartComponent({
     field: true,
     classes: ['input-class', 'right-icon-class', 'label-class'],

package/dist/icon/index.wxs

@@ -14,7 +14,7 @@ function rootClass(data) {
   var classes = ['custom-class'];
 
   if (data.classPrefix !== 'smart-icon') {
-    classes.push('smart-icon--custom')
+    classes.push('smart-icon--custom');
   }
 
   if (data.classPrefix != null) {
@@ -54,6 +54,8 @@ function svgStyle(data) {
     {
       '-webkit-mask-image': imageBase64Src,
       '-webkit-mask-size': 'contain',
+      '-webkit-mask-repeat': 'no-repeat',
+      '-webkit-mask-position': 'center',
       'mask-image': imageBase64Src,
       'mask-size': 'contain',
       width: data.size,

package/dist/notice-bar/index.js

@@ -1,6 +1,6 @@
 import { SmartComponent } from '../common/component';
 import { getRect, requestAnimationFrame } from '../common/utils';
-import Xmark from '@tuya-miniapp/icons/dist/svg/Xmark';
+import Xmark from '@tuya-miniapp/icons/dist/svg/Xmark.js';
 import Right from '@tuya-miniapp/icons/dist/svg/Right';
 SmartComponent({
     props: {

package/dist/picker/demo/index.js

@@ -45,6 +45,7 @@ SmartComponent({
     methods: {
         onChange1(event) {
             const { value, index } = event.detail;
+            console.log(`Value: ${value}, Index：${index}`);
             Toast({
                 context: this,
                 message: `Value: ${value}, Index：${index}`,

package/dist/picker/index.wxml

@@ -19,10 +19,11 @@
       data-index="{{ index }}"
       custom-class="column-class"
       value-key="{{ valueKey }}"
-      style="{{ item.style }}"
+      style="order: {{ item.order }}; {{ item.style }}"
       active-style="{{ activeStyle }}"
       options="{{ item.values }}"
       unit="{{ item.unit || unit }}"
+      changeAnimation="{{ changeAnimation }}"
       default-index="{{ item.defaultIndex || defaultIndex }}"
       active-index="{{ item.activeIndex || activeIndex }}"
       item-height="{{ itemHeight }}"

package/dist/picker/shared.d.ts

@@ -18,4 +18,8 @@ export declare const pickerProps: {
         type: NumberConstructor;
         value: number;
     };
+    changeAnimation: {
+        type: BooleanConstructor;
+        value: boolean;
+    };
 };

package/dist/picker/shared.js

@@ -18,4 +18,8 @@ export const pickerProps = {
         type: Number,
         value: 44,
     },
+    changeAnimation: {
+        type: Boolean,
+        value: true,
+    },
 };

package/dist/picker-column/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);position:relative;text-align:center}.smart-picker-column__item{padding:0 5px}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.smart-picker-column__unit_hidden{opacity:0}.smart-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
+@import '../common/index.css';.smart-picker-column{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);text-align:center}.smart-picker-column,.smart-picker-column__offset{position:relative;width:100%}.smart-picker-column__visual{position:absolute;top:0;width:100%}.smart-picker-column__item{pointer-events:none}.smart-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__mask{background:transparent;display:flex;flex-direction:column;height:100%;position:absolute;top:0;width:100%;z-index:10}.smart-picker-column__mask__item{flex:1}.smart-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.smart-picker-column__unit_text{color:var(--picker-option-unit-text-color,var(--app-B6-N4,rgba(0,0,0,.4)));font-size:var(--picker-option-unit-font-size,12px)}.smart-picker-column__unit_hidden{opacity:0}.smart-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}