@tuya-miniapp/smart-ui 0.0.1-beta-3 → 0.0.1-beta-4

package/dist/picker-column/index.css

@@ -1 +1 @@
-@import '../common/index.css';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{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:50%;position:absolute;top:50%;transform:translate(100%,-50%)}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
+@import '../common/index.css';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.van-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)}.van-picker-column__unit_hidden{opacity:0}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}

package/dist/picker-column/index.js

@@ -128,7 +128,11 @@ VantComponent({
                 const optionsV = options.slice(renderStart, renderEnd);
                 return this.set({ optionsV, renderStart, renderNum });
             }
-            return this.set({ optionsV: options });
+            return this.set({
+                optionsV: options,
+                renderStart: 0,
+                renderNum: options.length,
+            });
         },
         adjustIndex(index) {
             const { data } = this;

package/dist/picker-column/index.wxml

@@ -8,10 +8,8 @@
   catch:touchmove="onTouchMove"
   bind:touchend="onTouchEnd"
   bind:touchcancel="onTouchEnd"
-  maxtext="{{ maxText }}"
-  change:maxtext="{{ computed.unitStyle }}"
 >
-  <view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart }) }}"
+  <view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit }) }}"
   bind:transitionend="onTransitionEnd"
   id="options">
     <view
@@ -24,9 +22,10 @@
       bindtap="onClickItem"
     >{{ computed.optionText(option, valueKey) }}</view>
   </view>
-  <view wx:if="{{unit}}" >
+  <view wx:if="{{unit}}" class="van-picker-column__unit" style="height: {{ itemHeight }}px">
+    <view class="van-picker-column__unit_text van-picker-column__unit_hidden" >{{unit}}</view>
     <text class="van-picker-column__max-text">{{ maxText }}</text>
-    <view class="van-picker-column__unit" >{{unit}}</view>
+    <view class="van-picker-column__unit_text" >{{unit}}</view>
   </view>
   
 </view>

package/dist/picker-column/index.wxs

@@ -17,19 +17,6 @@ function rootStyle(data) {
   });
 }
 
-function unitStyle(value, oldValue, ownerInstance) {
-  var maxTextDom = ownerInstance.selectComponent('.van-picker-column__max-text');
-  var optionsDom = ownerInstance.selectComponent('#options');
-  var unitDom = ownerInstance.selectComponent('.van-picker-column__unit');
-  if (unitDom && maxTextDom) {
-    var maxWidth = maxTextDom.getBoundingClientRect().width;
-    optionsDom.setStyle({ 'text-indent': '-8rpx' });
-    unitDom.setStyle({
-      transform: 'translate(' + maxWidth / 2 + 'px,-50%)',
-    });
-  }
-}
-
 function wrapperStyle(data) {
   var offset =
     data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2;
@@ -40,12 +27,14 @@ function wrapperStyle(data) {
   offset = addUnit(offset);
   if (data.animate) {
     return style({
+      'text-indent': data.unit ? '-8rpx' : '0',
       transition: 'transform ' + data.duration + 'ms',
       'line-height': addUnit(data.itemHeight),
       transform: 'translate3d(0, ' + offset + ', 0)',
     });
   }
   return style({
+    'text-indent': data.unit ? '-8rpx' : '0',
     'line-height': addUnit(data.itemHeight),
     transform: 'translate3d(0, ' + offset + ', 0)',
   });
@@ -55,5 +44,4 @@ module.exports = {
   optionText: optionText,
   rootStyle: rootStyle,
   wrapperStyle: wrapperStyle,
-  unitStyle: unitStyle,
 };

package/dist/picker-column/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{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:50%;position:absolute;top:50%;transform:translate(100%,-50%)}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
+@import '../common/index.wxss';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.van-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)}.van-picker-column__unit_hidden{opacity:0}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}

package/lib/picker-column/index.css

@@ -1 +1 @@
-@import '../common/index.css';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{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:50%;position:absolute;top:50%;transform:translate(100%,-50%)}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
+@import '../common/index.css';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.van-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)}.van-picker-column__unit_hidden{opacity:0}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}

package/lib/picker-column/index.js

@@ -130,7 +130,11 @@ var DEFAULT_DURATION = 200;
                 var optionsV = options.slice(renderStart, renderEnd);
                 return this.set({ optionsV: optionsV, renderStart: renderStart, renderNum: renderNum });
             }
-            return this.set({ optionsV: options });
+            return this.set({
+                optionsV: options,
+                renderStart: 0,
+                renderNum: options.length,
+            });
         },
         adjustIndex: function (index) {
             var data = this.data;

package/lib/picker-column/index.wxml

@@ -8,10 +8,8 @@
   catch:touchmove="onTouchMove"
   bind:touchend="onTouchEnd"
   bind:touchcancel="onTouchEnd"
-  maxtext="{{ maxText }}"
-  change:maxtext="{{ computed.unitStyle }}"
 >
-  <view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart }) }}"
+  <view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit }) }}"
   bind:transitionend="onTransitionEnd"
   id="options">
     <view
@@ -24,9 +22,10 @@
       bindtap="onClickItem"
     >{{ computed.optionText(option, valueKey) }}</view>
   </view>
-  <view wx:if="{{unit}}" >
+  <view wx:if="{{unit}}" class="van-picker-column__unit" style="height: {{ itemHeight }}px">
+    <view class="van-picker-column__unit_text van-picker-column__unit_hidden" >{{unit}}</view>
     <text class="van-picker-column__max-text">{{ maxText }}</text>
-    <view class="van-picker-column__unit" >{{unit}}</view>
+    <view class="van-picker-column__unit_text" >{{unit}}</view>
   </view>
   
 </view>

package/lib/picker-column/index.wxs

@@ -17,19 +17,6 @@ function rootStyle(data) {
   });
 }
 
-function unitStyle(value, oldValue, ownerInstance) {
-  var maxTextDom = ownerInstance.selectComponent('.van-picker-column__max-text');
-  var optionsDom = ownerInstance.selectComponent('#options');
-  var unitDom = ownerInstance.selectComponent('.van-picker-column__unit');
-  if (unitDom && maxTextDom) {
-    var maxWidth = maxTextDom.getBoundingClientRect().width;
-    optionsDom.setStyle({ 'text-indent': '-8rpx' });
-    unitDom.setStyle({
-      transform: 'translate(' + maxWidth / 2 + 'px,-50%)',
-    });
-  }
-}
-
 function wrapperStyle(data) {
   var offset =
     data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2;
@@ -40,12 +27,14 @@ function wrapperStyle(data) {
   offset = addUnit(offset);
   if (data.animate) {
     return style({
+      'text-indent': data.unit ? '-8rpx' : '0',
       transition: 'transform ' + data.duration + 'ms',
       'line-height': addUnit(data.itemHeight),
       transform: 'translate3d(0, ' + offset + ', 0)',
     });
   }
   return style({
+    'text-indent': data.unit ? '-8rpx' : '0',
     'line-height': addUnit(data.itemHeight),
     transform: 'translate3d(0, ' + offset + ', 0)',
   });
@@ -55,5 +44,4 @@ module.exports = {
   optionText: optionText,
   rootStyle: rootStyle,
   wrapperStyle: wrapperStyle,
-  unitStyle: unitStyle,
 };

package/lib/picker-column/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{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:50%;position:absolute;top:50%;transform:translate(100%,-50%)}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}
+@import '../common/index.wxss';.van-picker-column{color:var(--picker-option-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--picker-option-font-size,16px);position:relative;text-align:center}.van-picker-column__item{padding:0 5px}.van-picker-column__item--selected{color:var(--picker-option-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.van-picker-column__item--disabled{opacity:var(--picker-option-disabled-opacity,.3)}.van-picker-column__unit{align-items:center;display:flex;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%}.van-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)}.van-picker-column__unit_hidden{opacity:0}.van-picker-column__max-text{font-weight:var(--font-weight-bold,500);opacity:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "0.0.1-beta-3",
+  "version": "0.0.1-beta-4",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",