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

package/lib/picker-column/index.wxml

@@ -9,18 +9,29 @@
   bind:touchend="onTouchEnd"
   bind:touchcancel="onTouchEnd"
 >
-  <view style="{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit }) }}"
-  bind:transitionend="onTransitionEnd"
-  id="options">
-    <view
-      wx:for="{{ optionsV }}"
-      wx:for-item="option"
+  <view class="smart-picker-column__offset" style="height: {{ itemHeight * options.length }}px;{{ computed.wrapperStyle({ offset, itemHeight, visibleItemCount, animate, duration, renderStart, unit }) }}" id="options">
+    <view class="smart-picker-column__visual" style="{{ computed.wrapperInterStyle({ offset, itemHeight, visibleItemCount, renderStart }) }}">
+      <view
+        wx:for="{{ optionsV }}"
+        wx:for-item="option"
+        wx:key="index"
+        data-index="{{ renderStart + index }}"
+        style="height: {{ itemHeight }}px;{{renderStart + index === currentIndex ? activeStyle : ''}}"
+        class="smart-ellipsis {{ utils.bem('picker-column__item', { disabled: option && option.disabled, selected: renderStart + index === currentIndex }) }} {{ renderStart + index === currentIndex ? 'active-class' : '' }}"
+      >
+        {{ computed.optionText(option, valueKey) }}
+      </view>
+    </view>
+  </view>
+  <view class="smart-picker-column__mask">
+    <view 
+      wx:for="{{ visibleItemCount }}" 
       wx:key="index"
-      data-index="{{ renderStart + index }}"
-      style="height: {{ itemHeight }}px;{{renderStart + index === currentIndex ? activeStyle : ''}}"
-      class="smart-ellipsis {{ utils.bem('picker-column__item', { disabled: option && option.disabled, selected: renderStart + index === currentIndex }) }} {{ renderStart + index === currentIndex ? 'active-class' : '' }}"
-      bindtap="onClickItem"
-    >{{ computed.optionText(option, valueKey) }}</view>
+      class="smart-picker-column__mask__item" 
+      data-index="{{ currentIndex + index - 2 }}" 
+      bind:tap="onClickItem" 
+    >
+    </view>
   </view>
   <view wx:if="{{unit}}" class="smart-picker-column__unit" style="height: {{ itemHeight }}px">
     <view class="smart-picker-column__unit_text smart-picker-column__unit_hidden" >{{unit}}</view>

package/lib/picker-column/index.wxs

@@ -20,15 +20,11 @@ function rootStyle(data) {
 function wrapperStyle(data) {
   var offset =
     data.offset + (data.itemHeight * (data.visibleItemCount - 1)) / 2;
-  // 长列表优化
-  if (data.renderStart) {
-    offset += data.renderStart * data.itemHeight;
-  }
   offset = addUnit(offset);
   if (data.animate) {
     return style({
       'text-indent': data.unit ? '-8rpx' : '0',
-      transition: 'transform ' + data.duration + 'ms',
+      transition: 'transform ' + data.duration + 'ms ease-out',
       'line-height': addUnit(data.itemHeight),
       transform: 'translate3d(0, ' + offset + ', 0)',
     });
@@ -40,8 +36,29 @@ function wrapperStyle(data) {
   });
 }
 
+function wrapperInterStyle(data) {
+  var offset = data.renderStart * data.itemHeight;
+  offset = addUnit(offset);
+  return style({
+    'padding-top': offset,
+  });
+}
+
+// function wrapperItemStyle(data) {
+//   const { index, animationIndex: currentIndex } = data;
+//   const offsetIndex = currentIndex - index;
+//   const rotateX = offsetIndex * 25 > 0 ? Math.min(offsetIndex * 25, 25 * 2) : Math.max(offsetIndex * 25, -25 * 2)
+//   const scale = Math.min(Math.abs(offsetIndex * 0.05), 0.05 * 2)
+//   return style({
+//     transition: 'transform ' + data.duration + 'ms ease-out',
+//     transform: `rotateX(${rotateX}deg) scale(${1 - scale})`
+//   });
+// }
+
 module.exports = {
   optionText: optionText,
   rootStyle: rootStyle,
   wrapperStyle: wrapperStyle,
+  wrapperInterStyle: wrapperInterStyle,
+  // wrapperItemStyle: wrapperItemStyle
 };

package/lib/picker-column/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.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.wxss';.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}

package/lib/stepper/index.js

@@ -160,6 +160,8 @@ function equal(value1, value2) {
             var value = this.format(add(+this.data.currentValue, diff));
             this.emitChange(value);
             this.$emit(type);
+            // @ts-ignore
+            ty.vibrateShort({ type: 'light' });
         },
         longPressStep: function () {
             var _this = this;

package/lib/tag/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
+var Xmark_js_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark.js"));
 var component_1 = require("../common/component");
 (0, component_1.SmartComponent)({
     props: {
@@ -23,7 +23,7 @@ var component_1 = require("../common/component");
         closeable: Boolean,
     },
     data: {
-        crossIcon: Xmark_1.default,
+        crossIcon: Xmark_js_1.default,
         closeColor: '#fff',
     },
     methods: {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.1.10",
+  "version": "2.1.11-beta-2",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",
   "description": "轻量、可靠的智能小程序 UI 组件库",
   "scripts": {
-    "prepublishOnly": "node ./build/transCSSVar.js",
+    "prepublishOnly": "node ./build/prepublishOnly.js",
     "dev": "NODE_OPTIONS=--no-experimental-fetch node build/dev.mjs",
     "lint": "eslint ./packages --ext .js,.ts --fix",
     "lint:style": "stylelint \"packages/**/*.less\" --fix",
@@ -78,7 +78,7 @@
     "iOS >= 9"
   ],
   "dependencies": {
-    "@ray-js/components-ty-slider": "^0.2.52",
+    "@ray-js/components-ty-slider": "^0.3.1",
     "@tuya-miniapp/icons": "^2.1.7"
   },
   "maintainers": [