@tuya-miniapp/smart-ui 2.3.3-beta-4 → 2.3.3-beta-6

package/dist/circle/index.js

@@ -95,6 +95,20 @@ SmartComponent({
                     });
                 },
             });
+            const sizeVal = this.parseSize();
+            const params = {
+                canvasWidth: +sizeVal,
+                canvasHeight: +sizeVal,
+                width: +sizeVal,
+                height: +sizeVal,
+                lineWidth: this.data.trackWidth,
+                trackColor: this.data.trackColor,
+                fillColor: this.data.fillColor,
+                fillColorStops: this.data.fillColorStops,
+                maskColor: this.data.maskColor,
+                dpr: this.data.dpr,
+            };
+            this.setData(params);
         },
         renderAll(canvas, ctx, progress, ops = {
             lineCap: 'round',
@@ -245,28 +259,14 @@ SmartComponent({
         render(val, canvasId) {
             // @ts-ignore
             const context = ty.createCanvasContext(canvasId);
-            const sizeVal = this.parseSize();
-            const params = {
-                canvasWidth: +sizeVal,
-                canvasHeight: +sizeVal,
-                width: +sizeVal,
-                height: +sizeVal,
-                lineWidth: this.data.trackWidth,
-                trackColor: this.data.trackColor,
-                fillColor: this.data.fillColor,
-                fillColorStops: this.data.fillColorStops,
-                maskColor: this.data.maskColor,
-                dpr: this.data.dpr,
-            };
-            this.setData(params);
             if (this.data.mode === 'basic') {
-                this.renderAll(params, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
+                this.renderAll(this.data, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }
             if (this.data.mode === 'angle') {
-                this.renderHalf(params, context, val / 200, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
+                this.renderHalf(this.data, context, val / 200, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }
             if (this.data.mode === 'angle2') {
-                this.renderHalf2(params, context, val / 150, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
+                this.renderHalf2(this.data, context, val / 150, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }
         },
     },

package/dist/circle/index.wxml

@@ -5,5 +5,5 @@
   width="{{ canvasWidth * dpr }}"
   height="{{ canvasHeight * dpr }}"
   canvas-id="{{canvasId}}" 
-  style="width: {{width}}px; height:{{height}}px;"
+  style="width: {{width}}px; height:{{height}}px; {{customStyle}}"
 ></canvas>

package/dist/image/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
+@import '../common/index.css';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image__tint-color{display:inline-block;height:100%;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;position:absolute;top:0;width:100%}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}

package/dist/image/index.js

@@ -38,6 +38,10 @@ SmartComponent({
             type: Boolean,
             value: true,
         },
+        tintColor: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         error: false,

package/dist/image/index.wxml

@@ -11,13 +11,18 @@
     src="{{ src }}"
     mode="{{ computed.mode(fit) }}"
     lazy-load="{{ lazyLoad }}"
+    style="visibility:{{ tintColor ? 'hidden' : '' }};"
     webp="{{ webp }}"
     class="image-class smart-image__img"
     show-menu-by-longpress="{{ showMenuByLongpress }}"
     bind:load="onLoad"
     bind:error="onError"
   />
-
+  <view 
+    wx:if="{{ tintColor }}" 
+    class="image-class smart-image__img smart-image__tint-color"
+    style="{{ computed.maskStyle(src, tintColor) }}"
+  ></view>
   <view
     wx:if="{{ loading && showLoading }}"
     class="loading-class smart-image__loading"

package/dist/image/index.wxs

@@ -28,8 +28,14 @@ function mode(fit) {
   return FIT_MODE_MAP[fit];
 }
 
+
+function maskStyle(url, color) {
+  return `mask-image: url(${url});-webkit-mask-image: url(${url});background: ${color};`
+}
+
 module.exports = {
   rootStyle: rootStyle,
   mode: mode,
   defaultErrorImg: defaultErrorImg,
+  maskStyle: maskStyle
 };

package/dist/image/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
+@import '../common/index.wxss';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image__tint-color{display:inline-block;height:100%;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;position:absolute;top:0;width:100%}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}

package/dist/switch/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border:var(--switch-border,1px solid rgba(0,0,0,.1));border-color:transparent;border-radius:var(--switch-node-size,1em);box-sizing:initial;display:inline-block;height:var(--switch-height,1em);position:relative;transition:background-color var(--switch-transition-duration,.3s);width:var(--switch-width,1.667em)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,1em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,1em);z-index:var(--switch-node-z-index,1)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{transform:translateX(calc(var(--switch-width, 1.667em) - var(--switch-node-size, 1em)))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}
+@import '../common/index.css';.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border:var(--switch-border,1px solid rgba(0,0,0,.1));border-color:transparent;border-radius:var(--switch-node-size,1em);box-sizing:initial;display:inline-block;height:var(--switch-height,1em);position:relative;transition:background-color var(--switch-transition-duration,.3s);vertical-align:middle;width:var(--switch-width,1.667em)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,1em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,1em);z-index:var(--switch-node-z-index,1)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{transform:translateX(calc(var(--switch-width, 1.667em) - var(--switch-node-size, 1em)))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}

package/dist/switch/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border:var(--switch-border,1px solid rgba(0,0,0,.1));border-color:transparent;border-radius:var(--switch-node-size,1em);box-sizing:initial;display:inline-block;height:var(--switch-height,1em);position:relative;transition:background-color var(--switch-transition-duration,.3s);width:var(--switch-width,1.667em)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,1em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,1em);z-index:var(--switch-node-z-index,1)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{transform:translateX(calc(var(--switch-width, 1.667em) - var(--switch-node-size, 1em)))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}
+@import '../common/index.wxss';.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border:var(--switch-border,1px solid rgba(0,0,0,.1));border-color:transparent;border-radius:var(--switch-node-size,1em);box-sizing:initial;display:inline-block;height:var(--switch-height,1em);position:relative;transition:background-color var(--switch-transition-duration,.3s);vertical-align:middle;width:var(--switch-width,1.667em)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,1em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,1em);z-index:var(--switch-node-z-index,1)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{transform:translateX(calc(var(--switch-width, 1.667em) - var(--switch-node-size, 1em)))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}

package/lib/circle/index.js

@@ -99,6 +99,20 @@ var idListRef = {
                     });
                 },
             });
+            var sizeVal = this.parseSize();
+            var params = {
+                canvasWidth: +sizeVal,
+                canvasHeight: +sizeVal,
+                width: +sizeVal,
+                height: +sizeVal,
+                lineWidth: this.data.trackWidth,
+                trackColor: this.data.trackColor,
+                fillColor: this.data.fillColor,
+                fillColorStops: this.data.fillColorStops,
+                maskColor: this.data.maskColor,
+                dpr: this.data.dpr,
+            };
+            this.setData(params);
         },
         renderAll: function (canvas, ctx, progress, ops) {
             if (ops === void 0) { ops = {
@@ -252,28 +266,14 @@ var idListRef = {
         render: function (val, canvasId) {
             // @ts-ignore
             var context = ty.createCanvasContext(canvasId);
-            var sizeVal = this.parseSize();
-            var params = {
-                canvasWidth: +sizeVal,
-                canvasHeight: +sizeVal,
-                width: +sizeVal,
-                height: +sizeVal,
-                lineWidth: this.data.trackWidth,
-                trackColor: this.data.trackColor,
-                fillColor: this.data.fillColor,
-                fillColorStops: this.data.fillColorStops,
-                maskColor: this.data.maskColor,
-                dpr: this.data.dpr,
-            };
-            this.setData(params);
             if (this.data.mode === 'basic') {
-                this.renderAll(params, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
+                this.renderAll(this.data, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }
             if (this.data.mode === 'angle') {
-                this.renderHalf(params, context, val / 200, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
+                this.renderHalf(this.data, context, val / 200, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }
             if (this.data.mode === 'angle2') {
-                this.renderHalf2(params, context, val / 150, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
+                this.renderHalf2(this.data, context, val / 150, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }
         },
     },

package/lib/circle/index.wxml

@@ -5,5 +5,5 @@
   width="{{ canvasWidth * dpr }}"
   height="{{ canvasHeight * dpr }}"
   canvas-id="{{canvasId}}" 
-  style="width: {{width}}px; height:{{height}}px;"
+  style="width: {{width}}px; height:{{height}}px; {{customStyle}}"
 ></canvas>

package/lib/image/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
+@import '../common/index.css';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image__tint-color{display:inline-block;height:100%;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;position:absolute;top:0;width:100%}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}

package/lib/image/index.js

@@ -43,6 +43,10 @@ var Loading_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Loading"))
             type: Boolean,
             value: true,
         },
+        tintColor: {
+            type: String,
+            value: '',
+        },
     },
     data: {
         error: false,

package/lib/image/index.wxml

@@ -11,13 +11,18 @@
     src="{{ src }}"
     mode="{{ computed.mode(fit) }}"
     lazy-load="{{ lazyLoad }}"
+    style="visibility:{{ tintColor ? 'hidden' : '' }};"
     webp="{{ webp }}"
     class="image-class smart-image__img"
     show-menu-by-longpress="{{ showMenuByLongpress }}"
     bind:load="onLoad"
     bind:error="onError"
   />
-
+  <view 
+    wx:if="{{ tintColor }}" 
+    class="image-class smart-image__img smart-image__tint-color"
+    style="{{ computed.maskStyle(src, tintColor) }}"
+  ></view>
   <view
     wx:if="{{ loading && showLoading }}"
     class="loading-class smart-image__loading"

package/lib/image/index.wxs

@@ -28,8 +28,14 @@ function mode(fit) {
   return FIT_MODE_MAP[fit];
 }
 
+
+function maskStyle(url, color) {
+  return `mask-image: url(${url});-webkit-mask-image: url(${url});background: ${color};`
+}
+
 module.exports = {
   rootStyle: rootStyle,
   mode: mode,
   defaultErrorImg: defaultErrorImg,
+  maskStyle: maskStyle
 };

package/lib/image/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}
+@import '../common/index.wxss';.smart-image{display:inline-block;position:relative;vertical-align:middle}.smart-image__tint-color{display:inline-block;height:100%;left:0;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;position:absolute;top:0;width:100%}.smart-image--round{border-radius:50%;overflow:hidden}.smart-image--round .smart-image__img{border-radius:inherit}.smart-image__error,.smart-image__img,.smart-image__loading{display:block;height:100%;width:100%}.smart-image__error,.smart-image__loading{align-items:center;background-color:var(--image-placeholder-background-color,#f7f8fa);color:var(--image-placeholder-text-color,#969799);display:flex;flex-direction:column;font-size:var(--image-placeholder-font-size,14px);justify-content:center;left:0;position:absolute;top:0}.smart-image__loading-icon{--icon-color:var(--image-loading-icon-color,#dcdee0);color:var(--image-loading-icon-color,#dcdee0);font-size:var(--image-loading-icon-size,32px)!important}.smart-image__error-img{height:var(--image-error-size,32px);width:var(--image-error-size,32px)}

package/lib/switch/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border:var(--switch-border,1px solid rgba(0,0,0,.1));border-color:transparent;border-radius:var(--switch-node-size,1em);box-sizing:initial;display:inline-block;height:var(--switch-height,1em);position:relative;transition:background-color var(--switch-transition-duration,.3s);width:var(--switch-width,1.667em)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,1em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,1em);z-index:var(--switch-node-z-index,1)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{transform:translateX(calc(var(--switch-width, 1.667em) - var(--switch-node-size, 1em)))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}
+@import '../common/index.css';.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border:var(--switch-border,1px solid rgba(0,0,0,.1));border-color:transparent;border-radius:var(--switch-node-size,1em);box-sizing:initial;display:inline-block;height:var(--switch-height,1em);position:relative;transition:background-color var(--switch-transition-duration,.3s);vertical-align:middle;width:var(--switch-width,1.667em)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,1em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,1em);z-index:var(--switch-node-z-index,1)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{transform:translateX(calc(var(--switch-width, 1.667em) - var(--switch-node-size, 1em)))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}

package/lib/switch/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border:var(--switch-border,1px solid rgba(0,0,0,.1));border-color:transparent;border-radius:var(--switch-node-size,1em);box-sizing:initial;display:inline-block;height:var(--switch-height,1em);position:relative;transition:background-color var(--switch-transition-duration,.3s);width:var(--switch-width,1.667em)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,1em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,1em);z-index:var(--switch-node-z-index,1)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{transform:translateX(calc(var(--switch-width, 1.667em) - var(--switch-node-size, 1em)))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}
+@import '../common/index.wxss';.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border:var(--switch-border,1px solid rgba(0,0,0,.1));border-color:transparent;border-radius:var(--switch-node-size,1em);box-sizing:initial;display:inline-block;height:var(--switch-height,1em);position:relative;transition:background-color var(--switch-transition-duration,.3s);vertical-align:middle;width:var(--switch-width,1.667em)}.smart-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,1em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,1em);z-index:var(--switch-node-z-index,1)}.smart-switch__loading{left:50%;position:absolute!important;top:50%;transform:translate(-50%,-50%)}.smart-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.smart-switch--on .smart-switch__node{transform:translateX(calc(var(--switch-width, 1.667em) - var(--switch-node-size, 1em)))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuya-miniapp/smart-ui",
-  "version": "2.3.3-beta-4",
+  "version": "2.3.3-beta-6",
   "author": "MiniApp Team",
   "license": "MIT",
   "miniprogram": "lib",
@@ -84,7 +84,7 @@
     "iOS >= 9"
   ],
   "dependencies": {
-    "@ray-js/components-ty-slider": "^0.3.1",
+    "@ray-js/components-ty-slider": "^0.3.2",
     "@tuya-miniapp/icons": "^2.1.7"
   },
   "maintainers": [