@tuya-miniapp/smart-ui 2.6.4-beta-7 → 2.6.4-beta-8

package/dist/calendar/calendar.wxml

@@ -4,7 +4,7 @@
   <header
     title="{{ title }}"
     showTitle="{{ showTitle }}"
-    subtitle="{{ type === 'year' ? '' : type === 'month' ? computed.formatYearTitle(originCurrentDateMonthly, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], locale.subFormatter) }}"
+    subtitle="{{ type === 'year' ? '' : type === 'month' ? computed.formatYearTitle(originCurrentDateMonthly, visibleIndex, locale.yearFormatter) : computed.formatMonthTitle(months[visibleIndex], subFormatter) }}"
     subFormatter="{{locale.subFormatter || 'YYYY-MM'}}"
     showSubtitle="{{ showSubtitle }}"
     firstDayOfWeek="{{ firstDayOfWeek }}"

package/dist/common/style/clearfix.css

@@ -0,0 +1 @@
+.smart-clearfix:after{clear:both;content:"";display:table}

package/dist/common/style/clearfix.wxss

@@ -0,0 +1 @@
+.smart-clearfix:after{clear:both;content:"";display:table}

package/dist/common/style/ellipsis.css

@@ -0,0 +1 @@
+.smart-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smart-multi-ellipsis--l2{-webkit-line-clamp:2}.smart-multi-ellipsis--l2,.smart-multi-ellipsis--l3{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.smart-multi-ellipsis--l3{-webkit-line-clamp:3}

package/dist/common/style/ellipsis.wxss

@@ -0,0 +1 @@
+.smart-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smart-multi-ellipsis--l2{-webkit-line-clamp:2}.smart-multi-ellipsis--l2,.smart-multi-ellipsis--l3{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.smart-multi-ellipsis--l3{-webkit-line-clamp:3}

package/dist/common/style/hairline.css

@@ -0,0 +1 @@
+:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-hairline,.smart-hairline--bottom,.smart-hairline--left,.smart-hairline--right,.smart-hairline--surround,.smart-hairline--top,.smart-hairline--top-bottom{position:relative}.smart-hairline--bottom:after,.smart-hairline--left:after,.smart-hairline--right:after,.smart-hairline--surround:after,.smart-hairline--top-bottom:after,.smart-hairline--top:after,.smart-hairline:after{border:0 solid var(--hairline-color,var(--app-B6-N7,rgba(0,0,0,.1)));bottom:-50%;box-sizing:border-box;content:" ";left:-50%;pointer-events:none;position:absolute;right:-50%;top:-50%;transform:scale(.5);transform-origin:center}.smart-hairline--top:after{border-top-width:var(--hairline-top-width,1px)}.smart-hairline--left:after{border-left-width:var(--hairline-left-width,1px)}.smart-hairline--right:after{border-right-width:var(--hairline-right-width,1px)}.smart-hairline--bottom:after{border-bottom-width:var(--hairline-bottom-width,1px)}.smart-hairline--top-bottom:after{border-width:var(--hairline-top-bottom-width,1px 0)}.smart-hairline--surround:after{border-width:var(--hairline-surround-width,1px)}

package/dist/common/style/hairline.wxss

@@ -0,0 +1 @@
+:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-hairline,.smart-hairline--bottom,.smart-hairline--left,.smart-hairline--right,.smart-hairline--surround,.smart-hairline--top,.smart-hairline--top-bottom{position:relative}.smart-hairline--bottom:after,.smart-hairline--left:after,.smart-hairline--right:after,.smart-hairline--surround:after,.smart-hairline--top-bottom:after,.smart-hairline--top:after,.smart-hairline:after{border:0 solid var(--hairline-color,var(--app-B6-N7,rgba(0,0,0,.1)));bottom:-50%;box-sizing:border-box;content:" ";left:-50%;pointer-events:none;position:absolute;right:-50%;top:-50%;transform:scale(.5);transform-origin:center}.smart-hairline--top:after{border-top-width:var(--hairline-top-width,1px)}.smart-hairline--left:after{border-left-width:var(--hairline-left-width,1px)}.smart-hairline--right:after{border-right-width:var(--hairline-right-width,1px)}.smart-hairline--bottom:after{border-bottom-width:var(--hairline-bottom-width,1px)}.smart-hairline--top-bottom:after{border-width:var(--hairline-top-bottom-width,1px 0)}.smart-hairline--surround:after{border-width:var(--hairline-surround-width,1px)}

package/dist/common/style/mixins/hairline.css

@@ -0,0 +1 @@
+:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}

package/dist/common/style/mixins/hairline.wxss

@@ -0,0 +1 @@
+:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}

package/dist/common/style/var.css

@@ -0,0 +1 @@
+:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}

package/dist/common/style/var.wxss

@@ -0,0 +1 @@
+:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}

package/dist/common/utils.d.ts

@@ -22,3 +22,4 @@ export declare function replacePlaceholders(template: any, values: any): any;
 export declare const getSafeAreaInsetMin: () => number;
 export declare function getSafeBottomOffset(): number;
 export declare const getDateString: (date: Date) => string | undefined;
+export declare function generateRangeArray(start: number, end: number): number[];

package/dist/common/utils.js

@@ -111,3 +111,10 @@ export const getDateString = (date) => {
     const formattedDate = `${year}/${month}/${day}`;
     return formattedDate;
 };
+export function generateRangeArray(start, end) {
+    const resultArray = [];
+    for (let i = start; i < end; i++) {
+        resultArray.push(i);
+    }
+    return resultArray;
+}

package/dist/loading/index.css

@@ -1 +1 @@
-@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{font-size:0;line-height:1}.smart-loading{align-items:center;color:var(--loading-spinner-color,#1989fa);display:inline-flex;justify-content:center}.smart-loading__spinner{animation:smart-rotate var(--loading-spinner-animation-duration,.8s) linear infinite;background:var(--loading-spinner-color,#1989fa);box-sizing:border-box;height:var(--loading-spinner-size,30px);max-height:100%;max-width:100%;position:relative;width:var(--loading-spinner-size,30px)}.smart-loading__spinner--spinner{animation-timing-function:steps(8)}.smart-loading__text{color:var(--loading-text-color,#969799);font-size:var(--loading-text-font-size,14px);line-height:var(--loading-text-line-height,20px);margin-left:var(--padding-xs,8px)}.smart-loading__text:empty{display:none}.smart-loading--vertical{flex-direction:column}.smart-loading--vertical .smart-loading__text{margin:var(--padding-xs,8px) 0 0}@keyframes smart-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{font-size:0;line-height:1}.smart-loading{align-items:center;color:var(--loading-spinner-color,#c8c9cc);display:inline-flex;justify-content:center}.smart-loading__spinner{animation:smart-rotate var(--loading-spinner-animation-duration,.8s) linear infinite;box-sizing:border-box;height:var(--loading-spinner-size,30px);max-height:100%;max-width:100%;position:relative;width:var(--loading-spinner-size,30px)}.smart-loading__spinner--spinner{animation-timing-function:steps(8)}.smart-loading__text{color:var(--loading-text-color,#969799);font-size:var(--loading-text-font-size,14px);line-height:var(--loading-text-line-height,20px);margin-left:var(--padding-xs,8px)}.smart-loading__text:empty{display:none}.smart-loading--vertical{flex-direction:column}.smart-loading--vertical .smart-loading__text{margin:var(--padding-xs,8px) 0 0}@keyframes smart-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/dist/loading/index.js

@@ -3,7 +3,7 @@ SmartComponent({
     props: {
         color: {
             type: String,
-            value: 'var(--loading-spinner-color, #1989FA)',
+            value: '#1989FA'
         },
         vertical: Boolean,
         type: {
@@ -18,12 +18,12 @@ SmartComponent({
     },
     data: {
         spinner: '',
-        circular: '',
+        circular: ''
     },
     created() {
         this.setData({
             spinner: this.SpinnerLoading({ color: this.data.color }),
-            circular: this.CircularLoading({ color: this.data.color }),
+            circular: this.CircularLoading({ color: this.data.color })
         });
     },
     methods: {
@@ -35,6 +35,6 @@ SmartComponent({
         },
         SpinnerLoading({ color = '#3678E3' }) {
             return this.createSvgIcon(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><defs><clipPath id="master_svg0_1695_29273"><rect x="0" y="0" width="32" height="32" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_1695_29273)"><g><path d="M14.73077392578125,8.807690000000001L14.73077392578125,6.26923C14.73077392578125,5.568254,15.29902692578125,5,16.00000392578125,5C16.70097392578125,5,17.26923392578125,5.568254,17.26923392578125,6.26923L17.26923392578125,8.807690000000001C17.26923392578125,9.50867,16.70097392578125,10.07693,16.00000392578125,10.07693C15.29902692578125,10.07693,14.73077392578125,9.50867,14.73077392578125,8.807690000000001Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,11.880707750418878,-14.033822285849965)" style="opacity:0.05000000074505806;"><path d="M22.88067626953125,11.132061337890626L22.88067626953125,8.593601337890625C22.88067626953125,7.892624337890625,23.44892926953125,7.324371337890625,24.14990626953125,7.324371337890625C24.85088626953125,7.324371337890625,25.41913626953125,7.892624337890625,25.41913626953125,8.593601337890625L25.41913626953125,11.132061337890626C25.41913626953125,11.833041337890625,24.85088626953125,12.401291337890626,24.14990626953125,12.401291337890626C23.44892926953125,12.401291337890626,22.88067626953125,11.833041337890625,22.88067626953125,11.132061337890626Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(0,1,-1,0,41.73081970214844,-12.269180297851562)" style="opacity:0.10000000149011612;"><path d="M27,18.53850970214844L27,16.000049702148438C27,15.299072702148438,27.568253,14.730819702148438,28.26923,14.730819702148438C28.97021,14.730819702148438,29.53846,15.299072702148438,29.53846,16.000049702148438L29.53846,18.53850970214844C29.53846,19.23948970214844,28.97021,19.80773970214844,28.26923,19.80773970214844C27.568253,19.80773970214844,27,19.23948970214844,27,18.53850970214844Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(-0.7071067690849304,0.7071067690849304,-0.7071067690849304,-0.7071067690849304,58.30294381839121,21.611726407169044)" style="opacity:0.15000000596046448;"><path d="M24.675537109375,26.68848833984375L24.675537109375,24.15002833984375C24.675537109375,23.44905133984375,25.243790109375,22.88079833984375,25.944767109375,22.88079833984375C26.645747109375,22.88079833984375,27.213997109375,23.44905133984375,27.213997109375,24.15002833984375L27.213997109375,26.68848833984375C27.213997109375,27.389468339843752,26.645747109375,27.95771833984375,25.944767109375,27.95771833984375C25.243790109375,27.95771833984375,24.675537109375,27.389468339843752,24.675537109375,26.68848833984375Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(-1,0,0,-1,34.5384521484375,54)" style="opacity:0.30000001192092896;"><path d="M17.26922607421875,30.80769L17.26922607421875,28.26923C17.26922607421875,27.568254,17.83747907421875,27,18.53845607421875,27C19.23942607421875,27,19.80768607421875,27.568254,19.80768607421875,28.26923L19.80768607421875,30.80769C19.80768607421875,31.508670000000002,19.23942607421875,32.07693,18.53845607421875,32.07693C17.83747907421875,32.07693,17.26922607421875,31.508670000000002,17.26922607421875,30.80769Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(-0.7071068286895752,-0.7071067094802856,0.7071067094802856,-0.7071068286895752,-1.8805817391439632,48.572416538932885)" style="opacity:0.550000011920929;"><path d="M9.119384765625,28.483379697265626L9.119384765625,25.944919697265625C9.119384765625,25.243942697265624,9.687637765625,24.675689697265625,10.388614765625,24.675689697265625C11.089594765625,24.675689697265625,11.657844765625,25.243942697265624,11.657844765625,25.944919697265625L11.657844765625,28.483379697265626C11.657844765625,29.184359697265627,11.089594765625,29.752609697265626,10.388614765625,29.752609697265626C9.687637765625,29.752609697265626,9.119384765625,29.184359697265627,9.119384765625,28.483379697265626Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(0,-1,1,0,-12.269241333007812,22.269241333007812)" style="opacity:0.699999988079071;"><path d="M5,21.076931333007813L5,18.538471333007813C5,17.83749433300781,5.568253,17.269241333007812,6.26923,17.269241333007812C6.97021,17.269241333007812,7.538460000000001,17.83749433300781,7.538460000000001,18.538471333007813L7.538460000000001,21.076931333007813C7.538460000000001,21.777911333007815,6.97021,22.346161333007814,6.26923,22.346161333007814C5.568253,22.346161333007814,5,21.777911333007815,5,21.076931333007813Z" fill="${color}" fill-opacity="1"/></g><g transform="matrix(0.7071066498756409,-0.70710688829422,0.70710688829422,0.7071066498756409,-4.303046450104375,7.850115344526785)" style="opacity:0.8500000238418579;"><path d="M7.32440185546875,12.926983212890626L7.32440185546875,10.388523212890625C7.32440185546875,9.687546212890625,7.89265485546875,9.119293212890625,8.59363185546875,9.119293212890625C9.29461185546875,9.119293212890625,9.86286185546875,9.687546212890625,9.86286185546875,10.388523212890625L9.86286185546875,12.926983212890626C9.86286185546875,13.627963212890625,9.29461185546875,14.196213212890626,8.59363185546875,14.196213212890626C7.89265485546875,14.196213212890626,7.32440185546875,13.627963212890625,7.32440185546875,12.926983212890626Z" fill="${color}" fill-opacity="1"/></g></g></svg>`);
-        },
-    },
+        }
+    }
 });

package/dist/loading/index.wxs

@@ -12,21 +12,21 @@ function textStyle(data) {
 }
 
 function loadingStyle(data) {
-  var iconSrc = '';
+  var iconSrc = ''
 
   if (data.type === 'spinner') {
-    iconSrc = data.spinner;
+    iconSrc = data.spinner
   }
 
   if (data.type === 'circular') {
-    iconSrc = data.circular;
+    iconSrc = data.circular
   }
 
   var ret = style({
-    'mask-image': "url('".concat(iconSrc, "')"),
+    'background-image': "url('".concat(iconSrc, "')"),
     width: addUnit(data.size),
     height: addUnit(data.size),
-    'mask-size': addUnit(data.size),
+    'background-size': addUnit(data.size)
   });
 
   return ret;

package/dist/loading/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{font-size:0;line-height:1}.smart-loading{align-items:center;color:var(--loading-spinner-color,#1989fa);display:inline-flex;justify-content:center}.smart-loading__spinner{animation:smart-rotate var(--loading-spinner-animation-duration,.8s) linear infinite;background:var(--loading-spinner-color,#1989fa);box-sizing:border-box;height:var(--loading-spinner-size,30px);max-height:100%;max-width:100%;position:relative;width:var(--loading-spinner-size,30px)}.smart-loading__spinner--spinner{animation-timing-function:steps(8)}.smart-loading__text{color:var(--loading-text-color,#969799);font-size:var(--loading-text-font-size,14px);line-height:var(--loading-text-line-height,20px);margin-left:var(--padding-xs,8px)}.smart-loading__text:empty{display:none}.smart-loading--vertical{flex-direction:column}.smart-loading--vertical .smart-loading__text{margin:var(--padding-xs,8px) 0 0}@keyframes smart-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{font-size:0;line-height:1}.smart-loading{align-items:center;color:var(--loading-spinner-color,#c8c9cc);display:inline-flex;justify-content:center}.smart-loading__spinner{animation:smart-rotate var(--loading-spinner-animation-duration,.8s) linear infinite;box-sizing:border-box;height:var(--loading-spinner-size,30px);max-height:100%;max-width:100%;position:relative;width:var(--loading-spinner-size,30px)}.smart-loading__spinner--spinner{animation-timing-function:steps(8)}.smart-loading__text{color:var(--loading-text-color,#969799);font-size:var(--loading-text-font-size,14px);line-height:var(--loading-text-line-height,20px);margin-left:var(--padding-xs,8px)}.smart-loading__text:empty{display:none}.smart-loading--vertical{flex-direction:column}.smart-loading--vertical .smart-loading__text{margin:var(--padding-xs,8px) 0 0}@keyframes smart-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}

package/dist/picker-column/index.css

@@ -1 +1 @@
-@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.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(--picker-option-selected-font-weight-bold,var(--font-weight-bold,700))}.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);left:100%;margin-left:var(--picker-option-unit-mid-size,4px);position:absolute;text-align:left;top:50%;transform:translateY(-50%);white-space:nowrap}.smart-picker-column__max-text{color:transparent;font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);position:relative}.smart-picker-column--disabled{opacity:var(--picker-option-disabled-opacity,.3)}
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.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--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--picker-option-selected-font-weight-bold,var(--font-weight-bold,700))}.smart-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3);pointer-events:none}.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);left:100%;margin-left:var(--picker-option-unit-mid-size,4px);position:absolute;text-align:left;top:50%;transform:translateY(-50%);white-space:nowrap}.smart-picker-column__max-text{color:transparent;font-size:var(--picker-option-font-size,16px);font-weight:var(--font-weight-bold,500);position:relative}.smart-picker-column--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.smart-picker-column__item_0 .smart-picker-column__item__text:after{content:var(--picker-item-content_0,"")}.smart-picker-column__item_1 .smart-picker-column__item__text:after{content:var(--picker-item-content_1,"")}.smart-picker-column__item_2 .smart-picker-column__item__text:after{content:var(--picker-item-content_2,"")}.smart-picker-column__item_3 .smart-picker-column__item__text:after{content:var(--picker-item-content_3,"")}.smart-picker-column__item_4 .smart-picker-column__item__text:after{content:var(--picker-item-content_4,"")}.smart-picker-column__item_5 .smart-picker-column__item__text:after{content:var(--picker-item-content_5,"")}.smart-picker-column__item_6 .smart-picker-column__item__text:after{content:var(--picker-item-content_6,"")}.smart-picker-column__item_7 .smart-picker-column__item__text:after{content:var(--picker-item-content_7,"")}.smart-picker-column__item_8 .smart-picker-column__item__text:after{content:var(--picker-item-content_8,"")}.smart-picker-column__item_9 .smart-picker-column__item__text:after{content:var(--picker-item-content_9,"")}.smart-picker-column__item_10 .smart-picker-column__item__text:after{content:var(--picker-item-content_10,"")}.smart-picker-column__item_11 .smart-picker-column__item__text:after{content:var(--picker-item-content_11,"")}.smart-picker-column__item_12 .smart-picker-column__item__text:after{content:var(--picker-item-content_12,"")}.smart-picker-column__item_13 .smart-picker-column__item__text:after{content:var(--picker-item-content_13,"")}.smart-picker-column__item_14 .smart-picker-column__item__text:after{content:var(--picker-item-content_14,"")}.smart-picker-column__item_15 .smart-picker-column__item__text:after{content:var(--picker-item-content_15,"")}.smart-picker-column__item_16 .smart-picker-column__item__text:after{content:var(--picker-item-content_16,"")}.smart-picker-column__item_17 .smart-picker-column__item__text:after{content:var(--picker-item-content_17,"")}.smart-picker-column__item_18 .smart-picker-column__item__text:after{content:var(--picker-item-content_18,"")}.smart-picker-column__item_19 .smart-picker-column__item__text:after{content:var(--picker-item-content_19,"")}.smart-picker-column__item_20 .smart-picker-column__item__text:after{content:var(--picker-item-content_20,"")}

package/dist/picker-column/index.js

@@ -1,17 +1,13 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { SmartComponent } from '../common/component';
-import { range } from '../common/utils';
+import { generateRangeArray, range } from '../common/utils';
 import { isObj } from '../common/validator';
 import ty from '../common/ty';
-const DEFAULT_DURATION = 400;
+const compIdList = [];
+const getId = () => {
+    const id = 'smart-picker-column-' + compIdList.length;
+    compIdList.push(id);
+    return id;
+};
 SmartComponent({
     classes: ['active-class'],
     props: {
@@ -30,8 +26,8 @@ SmartComponent({
             observer(value) {
                 if (!this.data.isInit)
                     return;
+                this.updateViewOptions();
                 this.updateUint(value);
-                this.updateVisibleOptions(this.data.currentIndex);
             },
         },
         defaultIndex: {
@@ -49,10 +45,10 @@ SmartComponent({
         activeIndex: {
             type: Number,
             value: -1,
-            observer(index) {
+            observer() {
                 if (!this.data.isInit)
                     return;
-                this.setIndex(index, false, this.data.changeAnimation, this.data.animationTime);
+                this.updateViewOptions();
             },
         },
         unit: {
@@ -63,6 +59,10 @@ SmartComponent({
             type: Number,
             value: 300,
         },
+        loop: {
+            type: Boolean,
+            value: false,
+        },
     },
     data: {
         startY: 0,
@@ -77,158 +77,73 @@ SmartComponent({
         playing: false,
         isInit: false,
         maxText: '',
+        instanceId: '',
         timer: null,
         preOffsetList: [],
+        viewOptions: [],
     },
     created() {
-        const { defaultIndex, activeIndex, options } = this.data;
+        this.setData({
+            instanceId: getId(),
+        });
+        this.checkIndex();
+        this.updateViewOptions();
+        const { options } = this.data;
         this.updateUint(options);
-        this.setIndex(activeIndex !== -1 ? activeIndex : defaultIndex, false, this.data.changeAnimation, this.data.animationTime);
         this.setData({
             isInit: true,
         });
     },
     methods: {
-        getCount() {
-            return this.data.options.length;
-        },
-        onTouchStart(event) {
-            if (this.data.disabled) {
+        checkIndex() {
+            const { activeIndex } = this.data;
+            const index = this.adjustIndex(activeIndex);
+            if (activeIndex === index)
                 return;
-            }
-            if (this.data.timer) {
-                clearTimeout(this.data.timer);
-                this.setData({
-                    timer: null,
-                });
-            }
-            if (!this.data.playing) {
-                this.$emit('animation-start');
-            }
             this.setData({
-                startY: event.touches[0].clientY,
-                startOffset: this.data.offset,
-                duration: 100,
-                playing: true,
-                timer: null,
-                preOffsetList: [this.data.offset],
+                activeIndex: index,
             });
         },
-        onTouchMove(event) {
-            if (this.data.disabled) {
-                return;
-            }
+        adjustIndex(index) {
             const { data } = this;
-            const { preOffsetList } = data;
-            const deltaY = event.touches[0].clientY - data.startY;
-            const offset = range(data.startOffset + deltaY, -(this.getCount() * data.itemHeight), data.itemHeight);
-            const direction = this.checkIsDown(offset);
-            // 上一次滚动的索引
-            const preIndex = range(Math.round(-preOffsetList[preOffsetList.length - 1] / data.itemHeight), 0, this.getCount() - 1);
-            // 最终定位索引
-            const index = range(Math.round(-offset / data.itemHeight), 0, this.getCount() - 1);
-            if ((direction === 'up' && index < data.renderStart + 8) ||
-                (direction === 'down' && index > data.renderStart + data.renderNum - 8)) {
-                this.updateVisibleOptions(index);
+            const count = this.data.options.length;
+            index = range(index, 0, count);
+            for (let i = index; i < count; i++) {
+                if (!this.isDisabled(data.options[i]))
+                    return i;
             }
-            // 索引变化时 粗发震动反馈
-            if (index !== preIndex) {
-                // @ts-ignore
-                this.vibrateShort();
+            for (let i = index - 1; i >= 0; i--) {
+                if (!this.isDisabled(data.options[i]))
+                    return i;
             }
-            const animationIndex = Math.abs(-offset / data.itemHeight);
-            this.setData({
-                offset,
-                animationIndex: animationIndex,
-                preOffsetList: [...data.preOffsetList, offset],
-                animate: false,
-            });
         },
-        onTouchEnd() {
-            return __awaiter(this, void 0, void 0, function* () {
-                const { data } = this;
-                if (data.disabled) {
-                    return;
-                }
-                const { preOffsetList } = data;
-                let preOffset = Math.max(Math.abs(preOffsetList[preOffsetList.length - 3] - preOffsetList[preOffsetList.length - 4]), Math.abs(preOffsetList[preOffsetList.length - 2] - preOffsetList[preOffsetList.length - 3]), Math.abs(preOffsetList[preOffsetList.length - 1] - preOffsetList[preOffsetList.length - 2]));
-                if (isNaN(preOffset))
-                    preOffset = 0;
-                preOffset = Math.min(preOffset, 40);
-                // 三次同样的距离 说明用户一直在顶部或者底部滑动  或在move途中已经是上下边缘了
-                const isSameTouch = (preOffsetList[preOffsetList.length - 1] === preOffsetList[preOffsetList.length - 2] &&
-                    preOffsetList[preOffsetList.length - 2] === preOffsetList[preOffsetList.length - 3]) ||
-                    preOffsetList[preOffsetList.length - 1] === -(this.getCount() * data.itemHeight) ||
-                    preOffsetList[preOffsetList.length - 1] === data.itemHeight;
-                // 是否是向下滚动
-                const direction = this.checkIsDown();
-                // 当滚动速度比较慢时(<3) 不增加惯性滚动距离
-                const offset = Math.abs(preOffset) < 3 || isSameTouch || !direction
-                    ? data.offset
-                    : data.offset + (direction === 'down' ? -preOffset : preOffset) * 10;
-                // 有数字的最大滚动距离
-                const countHeight = (this.getCount() - 1) * data.itemHeight;
-                // 动画最大滚动距离 上下各加一个 data.itemHeight 的滚动空间
-                const animationOffset = range(offset, -(this.getCount() * data.itemHeight), data.itemHeight);
-                // 最终定位滚动位置
-                const finOffset = animationOffset < -countHeight ? -countHeight : animationOffset > 0 ? 0 : animationOffset;
-                // 获取索引
-                const index = range(Math.round(-finOffset / data.itemHeight), 0, this.getCount() - 1);
-                // 获取索引的标准距离
-                const offsetData = -index * data.itemHeight;
-                // 增加惯性音效
-                if (Math.abs(offsetData - data.offset) > data.itemHeight && !isSameTouch) {
-                    const countVibrate = Math.abs(offsetData - data.offset) / data.itemHeight;
-                    // @ts-ignore
-                    this.vibrateShort(Math.floor(countVibrate), data.animationTime);
-                }
-                // 最终定位索引
-                this.setData({
-                    duration: isSameTouch ? 150 : data.animationTime,
-                    animationIndex: index,
-                    offset: offsetData,
-                    animate: true,
-                });
-                // 更新列表
-                if ((direction === 'up' && index < data.renderStart + 8) ||
-                    (direction === 'down' && index > data.renderStart + data.renderNum - 8)) {
-                    yield this.updateVisibleOptions(index);
-                }
-                // 更新索引
-                if (index !== data.currentIndex) {
-                    const time = isSameTouch ? 150 : data.animationTime;
-                    // if (!isSameTouch) {
-                    //   this.timer = setInterval(() => {
-                    //     if (Math.abs(this.data.animationIndex - index) < 0.5) return clearInterval(this.timer);
-                    //     this.setData({
-                    //       animationIndex: this.data.animationIndex + (index - data.currentIndex > 0 ? 1 : -1),
-                    //     });
-                    //   }, data.animationTime / Math.abs(index - data.currentIndex));
-                    // }
-                    return this.setData({
-                        timer: setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-                            this.setIndex(index, true, false, this.data.animationTime);
-                        }), time),
-                    });
-                }
-                this.setData({
-                    playing: false,
-                });
-                this.$emit('animation-end');
-            });
+        isDisabled(option) {
+            return isObj(option) && option.disabled;
         },
-        checkIsDown(curr) {
-            const { data } = this;
-            const { preOffsetList } = data;
-            const currOffset = curr === undefined ? preOffsetList[preOffsetList.length - 1] : curr;
-            const preOffset = curr === undefined
-                ? preOffsetList[preOffsetList.length - 2]
-                : preOffsetList[preOffsetList.length - 1];
-            if (currOffset === undefined || preOffset === undefined || currOffset === preOffset)
-                return;
-            return currOffset < preOffset ? 'down' : 'up';
+        updateViewOptions() {
+            const currActiveIndex = this.data.activeIndex < 0 ? 0 : this.data.activeIndex;
+            let partNum = Math.floor(currActiveIndex / 10);
+            const lastNum = this.data.activeIndex - partNum * 10;
+            if (lastNum < 5 && partNum > 0) {
+                partNum -= 1;
+            }
+            const part2Times = Math.floor(partNum / 2);
+            const part2Percent = partNum % 2;
+            const onePartOffset = part2Percent + part2Times;
+            const twoPartOffset = part2Times;
+            const isReverse = onePartOffset > twoPartOffset;
+            const startPart = twoPartOffset + onePartOffset;
+            const viewIndexList = !isReverse
+                ? generateRangeArray(startPart * 10, startPart * 10 + 20)
+                : [
+                    ...generateRangeArray(startPart * 10 + 10, startPart * 10 + 20),
+                    ...generateRangeArray(startPart * 10, startPart * 10 + 10),
+                ];
+            this.setData({
+                viewOptions: viewIndexList,
+            });
         },
-        vibrateShort(count, time = DEFAULT_DURATION) {
+        vibrateShort(count, time) {
             if (!count) {
                 ty.vibrateShort({ type: 'light' });
                 return;
@@ -241,17 +156,7 @@ SmartComponent({
                 }
                 has++;
                 this.vibrateShort();
-            }, time / count - 20);
-        },
-        onClickItem(event) {
-            if (this.data.disabled)
-                return;
-            const { index } = event.currentTarget.dataset;
-            if (index === this.data.currentIndex || index < 0 || index > this.data.options.length - 1) {
-                return;
-            }
-            this.vibrateShort(Math.abs(index - this.data.currentIndex), DEFAULT_DURATION);
-            this.setIndex(index, true, true, this.data.animationTime);
+            }, (time || this.data.animationTime) / count - 20);
         },
         updateUint(options) {
             const { unit, valueKey } = this.data;
@@ -267,127 +172,43 @@ SmartComponent({
                 this.setData({ maxText });
             }
         },
-        updateVisibleOptions(targetIndex) {
-            const { options, visibleItemCount, currentIndex } = this.data;
-            if (visibleItemCount < 20 && options.length > visibleItemCount) {
-                let renderNum = 0;
-                let renderStart = 0;
-                // 选项多于 20 个时，进行列表优化
-                renderNum = Math.max(visibleItemCount * 2, 20);
-                renderStart = Math.max(0, targetIndex - renderNum / 2);
-                const renderEnd = Math.min(options.length, renderStart + renderNum);
-                if (currentIndex >= 0) {
-                    if (currentIndex < targetIndex) {
-                        renderStart = Math.max(0, currentIndex - renderNum / 2);
-                    }
-                }
-                renderNum = renderEnd - renderStart;
-                const optionsV = options.slice(renderStart, renderEnd);
-                return this.set({ optionsV, renderStart, renderNum });
-            }
-            return this.set({
-                optionsV: options,
-                renderStart: 0,
-                renderNum: options.length,
-            });
-        },
-        adjustIndex(index) {
-            const { data } = this;
-            const count = this.getCount();
-            index = range(index, 0, count);
-            for (let i = index; i < count; i++) {
-                if (!this.isDisabled(data.options[i]))
-                    return i;
-            }
-            for (let i = index - 1; i >= 0; i--) {
-                if (!this.isDisabled(data.options[i]))
-                    return i;
-            }
-        },
-        isDisabled(option) {
-            return isObj(option) && option.disabled;
-        },
         getOptionText(option) {
             const { data } = this;
             return isObj(option) && data.valueKey in option ? option[data.valueKey] : option;
         },
-        setIndex(index, userAction, animate, time = DEFAULT_DURATION) {
-            const { data } = this;
-            index = this.adjustIndex(index) || 0;
-            const offset = -index * data.itemHeight;
-            if (this.timer) {
-                clearTimeout(this.timer);
-                this.timer = null;
-            }
-            if (!data.playing) {
-                this.$emit('animation-start');
-                this.setData({
-                    playing: true,
-                });
-            }
-            if (index !== data.currentIndex) {
-                // 需要动画的情况下，保持最大的截取
-                this.updateVisibleOptions(index);
-                if (animate) {
-                    return this.set({
-                        currentIndex: index,
-                        animationIndex: index,
-                        offset,
-                        animate: true,
-                        duration: time,
-                    }).then(() => {
-                        if (!userAction) {
-                            this.setData({
-                                playing: false,
-                            });
-                            this.$emit('animation-end');
-                            return;
-                        }
-                        this.$emit('change', index);
-                        this.setData({
-                            playing: false,
-                        });
-                        this.$emit('animation-end');
-                    });
-                }
-                return this.set({
-                    offset,
-                    currentIndex: index,
-                    animationIndex: index,
-                    animate: !!animate,
-                }).then(() => {
-                    if (!userAction) {
-                        this.setData({
-                            playing: false,
-                        });
-                        this.$emit('animation-end');
-                        return;
-                    }
-                    this.$emit('change', index);
-                    this.setData({
-                        playing: false,
-                    });
-                    this.$emit('animation-end');
-                });
-            }
-            this.setData({
-                playing: false,
-            });
-            this.$emit('animation-end');
-            return this.set({ offset });
-        },
         setValue(value) {
             const { options } = this.data;
             for (let i = 0; i < options.length; i++) {
                 if (this.getOptionText(options[i]) === value) {
-                    return this.setIndex(i, false, this.data.changeAnimation, this.data.animationTime);
+                    return this.setIndex(i);
                 }
             }
             return Promise.resolve();
         },
+        setIndex(index) {
+            this.setData({
+                activeIndex: index,
+            });
+        },
         getValue() {
             const { data } = this;
-            return data.options[data.currentIndex];
+            return data.options[data.activeIndex < 0 ? 0 : data.activeIndex];
+        },
+        viewOptionsChange(list) {
+            this.setData({
+                viewOptions: list,
+            });
+        },
+        activeIndexChange(index) {
+            this.setData({
+                activeIndex: index,
+            });
+            this.$emit('change', index);
+        },
+        animationIndexChange(index) {
+            this.setData({
+                animationIndex: index,
+            });
         },
     },
 });