@tuya-miniapp/smart-ui 1.3.0-beta-2 → 1.3.1-beta-1

package/dist/nav-bar/index.js

@@ -2,7 +2,7 @@ import Left from '@tuya-miniapp/icons/dist/svg/Left';
 import { SmartComponent } from '../common/component';
 import { getRect, getSystemInfoSync } from '../common/utils';
 SmartComponent({
-    classes: ['title-class'],
+    classes: ['title-class', 'left-icon-class'],
     props: {
         title: String,
         fixed: {
@@ -13,7 +13,16 @@ SmartComponent({
             type: Boolean,
             observer: 'setHeight',
         },
+        leftTextType: {
+            type: String,
+            value: 'back',
+        },
         leftText: String,
+        leftIcon: String,
+        leftIconSize: {
+            type: null,
+            value: 32,
+        },
         rightText: String,
         customStyle: String,
         leftArrow: Boolean,
@@ -51,6 +60,15 @@ SmartComponent({
         onClickRight() {
             this.$emit('click-right');
         },
+        onClickTitle() {
+            this.$emit('click-title');
+        },
+        onClickLeftIcon() {
+            this.$emit('click-left-icon');
+        },
+        onClickLeftText() {
+            this.$emit('click-left-text');
+        },
         setHeight() {
             if (!this.data.fixed || !this.data.placeholder) {
                 return;

package/dist/nav-bar/index.wxml

@@ -9,23 +9,33 @@
 >
   <view class="smart-nav-bar__content">
     <view class="smart-nav-bar__left" bind:tap="onClickLeft">
-      <block wx:if="{{ leftArrow || leftText }}">
+      <block wx:if="{{ leftArrow || leftText || leftIcon }}">
         <smart-icon
           wx:if="{{ leftArrow }}"
-          size="16px"
-          name="{{ leftArrowIcon }}"
+          size="32px"
+          name="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBmaWxsPSJub25lIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48ZGVmcz48Y2xpcFBhdGggaWQ9Im1hc3Rlcl9zdmcwXzQ1Ml8yODM5NC8wXzgwODgiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgcng9IjAiLz48L2NsaXBQYXRoPjwvZGVmcz48ZyBjbGlwLXBhdGg9InVybCgjbWFzdGVyX3N2ZzBfNDUyXzI4Mzk0LzBfODA4OCkiPjxnIHN0eWxlPSJvcGFjaXR5OjAuNjk5OTk5OTg4MDc5MDcxOyI+PHBhdGggZD0iTTYuMDkxOTYsMTYuNDk5ODJDNi4wOTE5NiwxNi40OTk4MiwxMy4zMjA4MSwyMy41Mzk3LDEzLjMyMDgxLDIzLjUzOTdDMTMuNDgzOCwyMy43MTU3LDEzLjU2NDgsMjMuOTE5NywxMy41NjQ4LDI0LjE0OTdDMTMuNTY0OCwyNC4zNzk3LDEzLjQ3ODgsMjQuNTc5NiwxMy4zMDY4MSwyNC43NDc2QzEzLjIyNzEyLDI0LjgyODUsMTMuMTMxOTUsMjQuODkyNiwxMy4wMjY5NywyNC45MzU5QzEyLjkyMiwyNC45NzkyLDEyLjgwOTM3LDI1LjAwMDgsMTIuNjk1ODIsMjQuOTk5NkMxMi40NjQ3MywyNS4wMDExLDEyLjI0MTU4LDI0LjkxNTQsMTIuMDcwODMsMjQuNzU5NkMxMi4wNzA4MywyNC43NTk2LDQuMjQ0OTk4LDE3LjEwOTgxLDQuMjQ0OTk4LDE3LjEwOTgxQzQuMDg3MjQ2NCwxNi45NDU5OTAwMDAwMDAwMDIsMy45OTkzODg5MzUsMTYuNzI3MjQwMDAwMDAwMDAyLDQuMDAwMDAzMTk5NDMsMTYuNDk5ODJDNC4wMDAwMDMxOTk0MywxNi4yNjk4Myw0LjA4MjAwMTUsMTYuMDY1ODMsNC4yNDQ5OTgsMTUuODg5ODNDNC4yNDQ5OTgsMTUuODg5ODMsMTIuMDY5ODMsOC4yMzk5OTUsMTIuMDY5ODMsOC4yMzk5OTVDMTIuMjQ5ODMsOC4wNzk5OTgzLDEyLjQ1OTgyLDgsMTIuNjk0ODIsOEMxMi45Mjk4MSw4LDEzLjEzMzgxLDguMDgzOTk4MiwxMy4zMDU4MSw4LjI1MTk5NUMxMy4zODc5NSw4LjMyODMxMywxMy40NTMzMSw4LjQyMDg5MiwxMy40OTc3Miw4LjUyMzg0M0MxMy41NDIxNCw4LjYyNjc5NCwxMy41NjQ2NCw4LjczNzg2MiwxMy41NjM4LDguODQ5OTgyQzEzLjU2MzgsOS4wNzk5Nzk5OTk5OTk5OTksMTMuNDgyOCw5LjI4Mzk3LDEzLjMxOTgxLDkuNDU5OTdDMTMuMzE5ODEsOS40NTk5Nyw2LjA5MTk2LDE2LjQ5OTgyLDYuMDkxOTYsMTYuNDk5ODJaIiBmaWxsPSIjMDAwMDAwIiBmaWxsLW9wYWNpdHk9IjAuODk5OTk5OTc2MTU4MTQyMSIvPjwvZz48L2c+PC9zdmc+"
+          data-type="leftArrow"
           custom-class="smart-nav-bar__arrow"
         />
+        <view
+          wx:if="{{ leftIcon }}"
+          data-type="leftIcon"
+          class="smart-nav-bar__icon-wrap"
+          catch:tap="onClickLeftIcon"
+        >
+          <smart-icon class="left-icon-class" size="{{ leftIconSize }}" name="{{ leftIcon }}" />
+        </view>
         <view
           wx:if="{{ leftText }}"
-          class="smart-nav-bar__text"
-          hover-class="smart-nav-bar__text--hover"
+          class="{{ utils.bem('nav-bar__text', { home: leftTextType === 'home', title: leftTextType === 'title' }) }}"
+          catch:tap="onClickLeftText"
+          hover-class="{{ leftTextType === 'back' ? 'smart-nav-bar__text--hover' : '' }}"
           hover-stay-time="70"
         >{{ leftText }}</view>
       </block>
       <slot wx:else name="left" />
     </view>
-    <view class="smart-nav-bar__title title-class smart-ellipsis">
+    <view class="smart-nav-bar__title title-class smart-ellipsis" bind:tap="onClickTitle">
       <block wx:if="{{ title }}">{{ title }}</block>
 
       <slot wx:else name="title" />

package/dist/nav-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,46px);line-height:var(--nav-bar-height,46px);position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B6-N1,#000));display:inline-block;margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{background-color:#f2f3f5}.smart-nav-bar__arrow{color:var(--nav-bar-icon-color,var(--app-B6-N1,#000))!important;font-size:var(--nav-bar-arrow-size,16px)!important;vertical-align:middle}.smart-nav-bar__arrow+.smart-nav-bar__text{margin-left:-20px;padding-left:25px}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B6-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--font-weight-bold,500);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;font-size:var(--font-size-md,14px);position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}
+@import '../common/index.wxss';.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,46px);line-height:var(--nav-bar-height,46px);position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N1,#000));display:inline-block;margin:0 calc(var(--padding-md, 16px)*-1);padding:0 var(--padding-md,16px);vertical-align:middle}.smart-nav-bar__text--hover{background-color:#f2f3f5}.smart-nav-bar__text--home{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__text--title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600)}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__arrow+.smart-nav-bar__text{margin-left:-20px;padding-left:25px}.smart-nav-bar__icon-wrap{align-items:center;display:flex;height:var(--nav-bar-icon-size,32px);justify-content:center;margin:var(--nav-bar-icon-margin,0);width:var(--nav-bar-icon-size,32px)}.smart-nav-bar__icon-wrap>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-title-font-size,16px);font-weight:var(--nav-bar-title-font-weight,600);margin:0 auto;max-width:60%}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;bottom:0;display:flex;font-size:var(--font-size-md,14px);position:absolute;top:0}.smart-nav-bar__left{left:var(--padding-md,16px)}.smart-nav-bar__right{right:var(--padding-md,16px)}

package/dist/normal-slider/index.css

@@ -1 +1 @@
-@import '../common/index.css';.contain{--thumb-active-color:var(var(--app-B3,#fff),#fff)}
+@import '../common/index.css';.contain{--thumb-active-color:var(--app-B3,#fff)}

package/dist/normal-slider/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.contain{--thumb-active-color:var(var(--app-B3,#fff),#fff)}
+@import '../common/index.wxss';.contain{--thumb-active-color:var(--app-B3,#fff)}

package/dist/notice-bar/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-notice-bar{align-items:center;background-color:var(--notice-bar-background-color,#fffbe8);color:var(--notice-bar-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;font-size:var(--notice-bar-font-size,14px);height:var(--notice-bar-height,40px);line-height:var(--notice-bar-line-height,24px);padding:var(--notice-bar-padding,0 16px)}.smart-notice-bar--withicon{padding-right:40px;position:relative}.smart-notice-bar--wrapable{height:auto;padding:var(--notice-bar-wrapable-padding,8px 16px)}.smart-notice-bar--wrapable .smart-notice-bar__wrap{height:auto}.smart-notice-bar--wrapable .smart-notice-bar__content{position:relative;white-space:normal}.smart-notice-bar__left-icon{align-items:center;display:flex;margin-right:4px;vertical-align:middle}.smart-notice-bar__left-icon,.smart-notice-bar__right-icon{font-size:var(--notice-bar-icon-size,16px);min-width:var(--notice-bar-icon-min-width,22px)}.smart-notice-bar__right-icon{position:absolute;right:15px;top:10px}.smart-notice-bar__wrap{flex:1;height:var(--notice-bar-line-height,24px);overflow:hidden;position:relative}.smart-notice-bar__content{position:absolute;white-space:nowrap}.smart-notice-bar__content.smart-ellipsis{max-width:100%}
+@import '../common/index.css';.smart-notice-bar{--notice-bar-info-color:#1989fa;--notice-bar-warning-color:#ffa000;--notice-bar-error-color:#f04c4c;--notice-bar-right-icon-color:rgba(0,0,0,.2);align-items:center;background-color:var(--notice-bar-background-color,rgba(25,137,250,.1));color:var(--notice-bar-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;font-size:var(--notice-bar-font-size,12px);height:var(--notice-bar-height,40px);line-height:var(--notice-bar-line-height,14px);padding:var(--notice-bar-padding,0 16px)}.smart-notice-bar--warning{background-color:var(--notice-bar-background-warning-color,rgba(255,160,0,.1))}.smart-notice-bar--error{background-color:var(--notice-bar-background-error-color,rgba(240,76,76,.1))}.smart-notice-bar--hover{opacity:.6}.smart-notice-bar--wrapable{height:auto;padding:var(--notice-bar-wrapable-padding,8px 16px)}.smart-notice-bar--wrapable .smart-notice-bar__wrap{height:auto}.smart-notice-bar--wrapable .smart-notice-bar__content{position:relative;white-space:normal}.smart-notice-bar__left-icon{align-items:center;display:flex;font-size:var(--notice-bar-icon-size,16px);margin-right:var(--notice-bar-left-icon-margin-right,8px);vertical-align:middle}.smart-notice-bar__right-icon{font-size:var(--notice-bar-icon-size,16px);margin-left:var(--notice-bar-right-icon-margin-left,8px)}.smart-notice-bar__wrap{flex:1;height:var(--notice-bar-line-height,14px);overflow:hidden;position:relative}.smart-notice-bar__content{position:absolute;white-space:nowrap}.smart-notice-bar__content.smart-ellipsis{max-width:100%}.smart-notice-bar__content__btn{color:#1989fa;display:inline-block}

package/dist/notice-bar/index.js

@@ -1,5 +1,7 @@
 import { SmartComponent } from '../common/component';
 import { getRect, requestAnimationFrame } from '../common/utils';
+import Xmark from '@tuya-miniapp/icons/dist/svg/Xmark';
+import Right from '@tuya-miniapp/icons/dist/svg/Right';
 SmartComponent({
     props: {
         text: {
@@ -7,22 +9,60 @@ SmartComponent({
             value: '',
             observer: 'init',
         },
+        btnText: {
+            type: String,
+            value: '',
+            observer: 'init',
+        },
+        btnTextColor: {
+            type: String,
+            value: '',
+            observer: 'init',
+        },
         mode: {
             type: String,
             value: '',
         },
+        type: {
+            type: String,
+            value: 'info'
+        },
         url: {
             type: String,
             value: '',
         },
         openType: {
             type: String,
-            value: 'navigate',
+            value: 'navigateTo',
+        },
+        rightIconColor: {
+            type: String,
+            value: 'var(--notice-bar-right-icon-color)',
+        },
+        leftIconColor: {
+            type: String,
+            value: '',
         },
         delay: {
             type: Number,
             value: 1,
         },
+        customStyle: {
+            type: String,
+            value: '',
+        },
+        customHoverClass: {
+            type: String,
+            value: '',
+        },
+        rightIconStyle: {
+            type: String,
+            value: '',
+        },
+        leftIconStyle: {
+            type: String,
+            value: '',
+        },
         speed: {
             type: Number,
             value: 60,
@@ -34,11 +74,12 @@ SmartComponent({
             value: '',
         },
         color: String,
-        backgroundColor: String,
         background: String,
         wrapable: Boolean,
     },
     data: {
+        Xmark,
+        Right,
         show: true,
     },
     created() {
@@ -113,7 +154,19 @@ SmartComponent({
                 this.$emit('close', event.detail);
             }
         },
+        onClickBtnText(event) {
+            this.$emit('btnClick', event);
+        },
         onClick(event) {
+            const { url, mode, openType } = this.data;
+            if (mode === 'link' && url) {
+                if (openType === 'redirectTo') {
+                    wx.redirectTo({ url });
+                }
+                else if (openType === 'navigateTo') {
+                    wx.navigateTo({ url });
+                }
+            }
             this.$emit('click', event);
         },
     },

package/dist/notice-bar/index.wxml

@@ -3,20 +3,36 @@
 
 <view
   wx:if="{{ show }}"
-  class="custom-class {{ utils.bem('notice-bar', { withicon: mode, wrapable }) }}"
-  style="{{ computed.rootStyle({ color, backgroundColor, background }) }}"
+  class="custom-class {{ utils.bem('notice-bar', { 
+    wrapable,
+    warning: type === 'warning',
+    error: type === 'error'
+  }) }}"
+  hover-class="{{ mode === 'link' ? 'smart-notice-bar--hover' : ''}} {{ customHoverClass }}"
+  style="{{ computed.rootStyle([{ color, background }, customStyle]) }}"
   bind:tap="onClick"
 >
   <smart-icon
     wx:if="{{ leftIcon }}"
     name="{{ leftIcon }}"
     class="smart-notice-bar__left-icon"
+    style="{{ computed.rootStyle(leftIconStyle) }}"
+    color="{{ leftIconColor || (type === 'info' ? 'var(--notice-bar-info-color)' : type === 'warning' ? 'var(--notice-bar-warning-color)' : type === 'error' ? 'var(--notice-bar-error-color)' : '') }}"
   />
   <slot wx:else name="left-icon" />
 
   <view class="smart-notice-bar__wrap">
     <view class="smart-notice-bar__content {{ scrollable === false && !wrapable ? 'smart-ellipsis' : '' }}" animation="{{ animationData }}">
       {{ text }}
+      <view 
+        wx:if="{{ btnText }}" 
+        class="smart-notice-bar__content__btn" 
+        hover-class="smart-notice-bar--hover"
+        catch:tap="onClickBtnText"
+        style="{{ btnTextColor ? 'color: ' + btnTextColor : ''}}"
+      >
+        {{ btnText }}
+      </view>
       <slot wx:if="{{ !text }}"></slot>
     </view>
   </view>
@@ -24,15 +40,17 @@
   <smart-icon
     wx:if="{{ mode === 'closeable' }}"
     class="smart-notice-bar__right-icon"
-    name="cross"
+    name="{{ Xmark }}"
+    style="{{ computed.rootStyle(rightIconStyle) }}"
+    color=" {{ rightIconColor }} "
     catch:tap="onClickIcon"
   />
-  <navigator
-    wx:elif="{{ mode === 'link' }}"
-    url="{{ url }}"
-    open-type="{{ openType }}"
-  >
-    <smart-icon class="smart-notice-bar__right-icon" name="arrow" />
-  </navigator>
+  <smart-icon 
+    wx:elif="{{ mode === 'link' }}" 
+    color=" {{ rightIconColor }} " 
+    class="smart-notice-bar__right-icon" 
+    name="{{ Right }}" 
+    style="{{ computed.rootStyle(rightIconStyle) }}"
+  />
   <slot wx:else name="right-icon" />
 </view>

package/dist/notice-bar/index.wxs

@@ -3,11 +3,7 @@ var style = require('../wxs/style.wxs');
 var addUnit = require('../wxs/add-unit.wxs');
 
 function rootStyle(data) {
-  return style({
-    color: data.color,
-    'background-color': data.backgroundColor,
-    background: data.background,
-  });
+  return style(data);
 }
 
 module.exports = {

package/dist/notice-bar/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-notice-bar{align-items:center;background-color:var(--notice-bar-background-color,#fffbe8);color:var(--notice-bar-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;font-size:var(--notice-bar-font-size,14px);height:var(--notice-bar-height,40px);line-height:var(--notice-bar-line-height,24px);padding:var(--notice-bar-padding,0 16px)}.smart-notice-bar--withicon{padding-right:40px;position:relative}.smart-notice-bar--wrapable{height:auto;padding:var(--notice-bar-wrapable-padding,8px 16px)}.smart-notice-bar--wrapable .smart-notice-bar__wrap{height:auto}.smart-notice-bar--wrapable .smart-notice-bar__content{position:relative;white-space:normal}.smart-notice-bar__left-icon{align-items:center;display:flex;margin-right:4px;vertical-align:middle}.smart-notice-bar__left-icon,.smart-notice-bar__right-icon{font-size:var(--notice-bar-icon-size,16px);min-width:var(--notice-bar-icon-min-width,22px)}.smart-notice-bar__right-icon{position:absolute;right:15px;top:10px}.smart-notice-bar__wrap{flex:1;height:var(--notice-bar-line-height,24px);overflow:hidden;position:relative}.smart-notice-bar__content{position:absolute;white-space:nowrap}.smart-notice-bar__content.smart-ellipsis{max-width:100%}
+@import '../common/index.wxss';.smart-notice-bar{--notice-bar-info-color:#1989fa;--notice-bar-warning-color:#ffa000;--notice-bar-error-color:#f04c4c;--notice-bar-right-icon-color:rgba(0,0,0,.2);align-items:center;background-color:var(--notice-bar-background-color,rgba(25,137,250,.1));color:var(--notice-bar-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;font-size:var(--notice-bar-font-size,12px);height:var(--notice-bar-height,40px);line-height:var(--notice-bar-line-height,14px);padding:var(--notice-bar-padding,0 16px)}.smart-notice-bar--warning{background-color:var(--notice-bar-background-warning-color,rgba(255,160,0,.1))}.smart-notice-bar--error{background-color:var(--notice-bar-background-error-color,rgba(240,76,76,.1))}.smart-notice-bar--hover{opacity:.6}.smart-notice-bar--wrapable{height:auto;padding:var(--notice-bar-wrapable-padding,8px 16px)}.smart-notice-bar--wrapable .smart-notice-bar__wrap{height:auto}.smart-notice-bar--wrapable .smart-notice-bar__content{position:relative;white-space:normal}.smart-notice-bar__left-icon{align-items:center;display:flex;font-size:var(--notice-bar-icon-size,16px);margin-right:var(--notice-bar-left-icon-margin-right,8px);vertical-align:middle}.smart-notice-bar__right-icon{font-size:var(--notice-bar-icon-size,16px);margin-left:var(--notice-bar-right-icon-margin-left,8px)}.smart-notice-bar__wrap{flex:1;height:var(--notice-bar-line-height,14px);overflow:hidden;position:relative}.smart-notice-bar__content{position:absolute;white-space:nowrap}.smart-notice-bar__content.smart-ellipsis{max-width:100%}.smart-notice-bar__content__btn{color:#1989fa;display:inline-block}

package/dist/picker-column/index.js

@@ -174,7 +174,14 @@ SmartComponent({
                             animate: true,
                             duration: DEFAULT_DURATION,
                         }).then(() => {
-                            userAction && (this.fireChange = true);
+                            if (!userAction)
+                                return;
+                            if ([0, data.optionsV.length - 1].includes(index)) {
+                                this.$emit('change', index);
+                                return;
+                            }
+                            ;
+                            this.fireChange = true;
                         });
                     });
                 }

package/dist/radio/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-radio{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.smart-radio__icon-wrap{flex:none}.smart-radio--horizontal{margin-right:var(--padding-sm,12px)}.smart-radio__icon{align-items:center;border:1px solid var(--radio-border-color,#c8c9cc);box-sizing:border-box;color:transparent;display:flex;font-size:var(--radio-size,20px);height:1em;justify-content:center;text-align:center;transition-duration:var(--radio-transition-duration,.2s);transition-property:color,border-color,background-color;width:1em}.smart-radio__icon--round{border-radius:100%}.smart-radio__icon--checked{background-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));border-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));color:#fff}.smart-radio__icon--disabled{background-color:var(--radio-disabled-background-color,var(--app-B6-N6,rgba(0,0,0,.2)));border-color:var(--radio-disabled-icon-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__icon--disabled.smart-radio__icon--checked{color:var(--radio-disabled-icon-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__label{word-wrap:break-word;color:var(--radio-label-color,var(--app-B6-N1,#000));line-height:var(--radio-size,20px);padding-left:var(--radio-label-margin,10px)}.smart-radio__label--left{float:left;margin:0 var(--radio-label-margin,10px) 0 0}.smart-radio__label--disabled{color:var(--radio-disabled-label-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__label:empty{margin:0}
+@import '../common/index.css';.smart-radio{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.smart-radio__icon-wrap{display:flex;flex:none}.smart-radio--horizontal{margin-right:var(--padding-sm,12px)}.smart-radio__icon{align-items:center;border:2px solid var(--radio-border-color,var(--app-B6-N6,rgba(0,0,0,.2)));border-radius:var(--radio-border-radius,4px);box-sizing:border-box;color:transparent;display:flex;font-size:var(--radio-size,24px);height:1em;justify-content:center;text-align:center;transition-duration:var(--radio-transition-duration,.2s);transition-property:color,border,background-color;width:1em}.smart-radio__icon--round{border-radius:100%}.smart-radio__icon--checked{background-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));border-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));color:#fff}.smart-radio__icon--disabled{opacity:.3}.smart-radio__label{word-wrap:break-word;color:var(--radio-label-color,var(--app-B6-N1,#000));font-size:var(--radio-label-size,12px);padding-left:var(--radio-label-margin,10px)}.smart-radio__label--left{float:left;margin:0 var(--radio-label-margin,10px) 0 0}.smart-radio__label--disabled{color:var(--radio-disabled-label-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__label:empty{margin:0}

package/dist/radio/index.js

@@ -25,7 +25,7 @@ SmartComponent({
         },
         iconSize: {
             type: null,
-            value: 20,
+            value: 24,
         },
     },
     data: {

package/dist/radio/index.wxml

@@ -14,7 +14,8 @@
     <smart-icon
       wx:else
       name="{{ icon }}"
-      color="{{ value ? '#fff' : 'none'}}"
+      size="1em"
+      color="{{ value === name ? '#fff' : 'none'}}"
       class="{{ utils.bem('radio__icon', [shape, { disabled: disabled || parentDisabled, checked: value === name }]) }}"
       style="{{ computed.iconStyle({ iconSize, checkedColor, disabled, parentDisabled, value, name }) }}"
       custom-class="icon-class"

package/dist/radio/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-radio{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.smart-radio__icon-wrap{flex:none}.smart-radio--horizontal{margin-right:var(--padding-sm,12px)}.smart-radio__icon{align-items:center;border:1px solid var(--radio-border-color,#c8c9cc);box-sizing:border-box;color:transparent;display:flex;font-size:var(--radio-size,20px);height:1em;justify-content:center;text-align:center;transition-duration:var(--radio-transition-duration,.2s);transition-property:color,border-color,background-color;width:1em}.smart-radio__icon--round{border-radius:100%}.smart-radio__icon--checked{background-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));border-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));color:#fff}.smart-radio__icon--disabled{background-color:var(--radio-disabled-background-color,var(--app-B6-N6,rgba(0,0,0,.2)));border-color:var(--radio-disabled-icon-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__icon--disabled.smart-radio__icon--checked{color:var(--radio-disabled-icon-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__label{word-wrap:break-word;color:var(--radio-label-color,var(--app-B6-N1,#000));line-height:var(--radio-size,20px);padding-left:var(--radio-label-margin,10px)}.smart-radio__label--left{float:left;margin:0 var(--radio-label-margin,10px) 0 0}.smart-radio__label--disabled{color:var(--radio-disabled-label-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__label:empty{margin:0}
+@import '../common/index.wxss';.smart-radio{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.smart-radio__icon-wrap{display:flex;flex:none}.smart-radio--horizontal{margin-right:var(--padding-sm,12px)}.smart-radio__icon{align-items:center;border:2px solid var(--radio-border-color,var(--app-B6-N6,rgba(0,0,0,.2)));border-radius:var(--radio-border-radius,4px);box-sizing:border-box;color:transparent;display:flex;font-size:var(--radio-size,24px);height:1em;justify-content:center;text-align:center;transition-duration:var(--radio-transition-duration,.2s);transition-property:color,border,background-color;width:1em}.smart-radio__icon--round{border-radius:100%}.smart-radio__icon--checked{background-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));border-color:var(--radio-checked-icon-color,var(--app-M4,#1989fa));color:#fff}.smart-radio__icon--disabled{opacity:.3}.smart-radio__label{word-wrap:break-word;color:var(--radio-label-color,var(--app-B6-N1,#000));font-size:var(--radio-label-size,12px);padding-left:var(--radio-label-margin,10px)}.smart-radio__label--left{float:left;margin:0 var(--radio-label-margin,10px) 0 0}.smart-radio__label--disabled{color:var(--radio-disabled-label-color,var(--app-B6-N5,rgba(0,0,0,.3)))}.smart-radio__label:empty{margin:0}

package/dist/search/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-search{align-items:center;box-sizing:border-box;display:flex;padding:var(--search-padding,10px 12px)}.smart-search__content{background-color:var(--search-background-color,#f7f8fa);border-radius:2px;display:flex;flex:1;padding-left:var(--padding-sm,12px)}.smart-search__content--round{border-radius:999px}.smart-search__label{color:var(--search-label-color,#323233);font-size:var(--search-label-font-size,14px);line-height:var(--search-input-height,34px);padding:var(--search-label-padding,0 5px)}.smart-search__field{flex:1}.smart-search__field__left-icon{color:var(--search-left-icon-color,#969799)}.smart-search--withaction{padding-right:0}.smart-search__action{color:var(--search-action-text-color,#323233);font-size:var(--search-action-font-size,14px);line-height:var(--search-input-height,34px)}.smart-search__action--hover{background-color:#f2f3f5}.smart-search__action-button{padding:var(--search-action-padding,0 8px)}
+@import '../common/index.css';.smart-search{align-items:center;background-color:var(--search-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;padding:var(--search-padding,12px 16px)}.smart-search__content{align-items:center;background-color:var(--search-body-background-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:flex;flex:1;flex-direction:row;padding:12px 16px}.smart-search__content--round{border-radius:999px}.smart-search__label{color:var(--search-label-color,var(--app-B4-N1,#000));font-size:var(--search-label-font-size,14px);line-height:var(--search-input-height,24px);padding:var(--search-label-padding,0 5px)}.smart-search__field{flex:1}.smart-search__field__left-icon{--icon-color:var(--search-left-icon-color,var(--app-B4-N4,rgba(0,0,0,.4)));margin-left:2px}.smart-search__input{font-size:var(--search-value-font-size,14px)}.smart-search--withaction{padding-right:0}.smart-search__action{color:var(--search-action-text-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--search-action-font-size,14px);line-height:var(--search-input-height,24px)}.smart-search__action--hover{background-color:var(--app-B4-N9,rgba(0,0,0,.05));opacity:.4}.smart-search__action-button{padding:var(--search-action-padding,0 16px 0 12px)}.smart-search__hover{background-color:var(--app-B4-N9,rgba(0,0,0,.05));opacity:.4}.smart-search__submit{align-items:center;color:var(--search-submit-color,var(--app-M1,#3678e3));display:flex;flex-direction:row;font-size:var(--search-submit-font-size,14px)}.smart-search__submit:before{background-color:var(--search-submit-color,var(--app-M1,#3678e3));content:"";display:block;height:12px;margin-right:12px;width:1px}

package/dist/search/index.js

@@ -1,5 +1,7 @@
 import { SmartComponent } from '../common/component';
 import { canIUseModel } from '../common/version';
+import SearchIcon from '@tuya-miniapp/icons/dist/svg/Search';
+import CloseIcon from '@tuya-miniapp/icons/dist/svg/Close';
 SmartComponent({
     field: true,
     classes: ['field-class', 'input-class', 'cancel-class'],
@@ -20,18 +22,20 @@ SmartComponent({
         useRightIconSlot: Boolean,
         leftIcon: {
             type: String,
-            value: 'search',
+            value: SearchIcon,
         },
         rightIcon: String,
         placeholder: String,
         placeholderStyle: String,
-        actionText: {
+        searchText: {
             type: String,
-            value: '取消',
+            value: 'Search',
         },
-        background: {
+        showSearchButton: Boolean,
+        background: String,
+        actionText: {
             type: String,
-            value: '#ffffff',
+            value: 'Cancel',
         },
         maxlength: {
             type: Number,
@@ -51,7 +55,7 @@ SmartComponent({
         },
         clearIcon: {
             type: String,
-            value: 'clear',
+            value: CloseIcon,
         },
         cursorSpacing: {
             type: Number,
@@ -60,9 +64,7 @@ SmartComponent({
     },
     methods: {
         onChange(event) {
-            if (canIUseModel()) {
-                this.setData({ value: event.detail });
-            }
+            this.setData({ value: event.detail });
             this.$emit('change', event.detail);
         },
         onCancel() {
@@ -80,6 +82,9 @@ SmartComponent({
         onSearch(event) {
             this.$emit('search', event.detail);
         },
+        goSearch() {
+            this.$emit('search', this.data.value);
+        },
         onFocus(event) {
             this.$emit('focus', event.detail);
         },

package/dist/search/index.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "smart-field": "../field/index"
+    "smart-field": "../field/index",
+    "smart-icon": "../icon/index"
   }
 }

package/dist/search/index.wxml

@@ -3,14 +3,14 @@
 <view
   class="{{ utils.bem('search', { withaction: showAction || useActionSlot }) }} custom-class"
   style="background: {{ background }}"
->
+>  
+
   <view class="{{ utils.bem('search__content', [shape]) }}">
     <view class="smart-search__label" wx:if="{{ label }}">{{ label }}</view>
     <slot wx:else name="label" />
 
     <smart-field
       type="search"
-      left-icon="{{ !useLeftIconSlot ? leftIcon : '' }}"
       right-icon="{{ !useRightIconSlot ? rightIcon : '' }}"
       focus="{{ focus }}"
       error="{{ error }}"
@@ -25,11 +25,11 @@
       clear-icon="{{ clearIcon }}"
       maxlength="{{ maxlength }}"
       input-align="{{ inputAlign }}"
-      input-class="input-class"
+      input-class="smart-search__input input-class"
       placeholder="{{ placeholder }}"
       placeholder-style="{{ placeholderStyle }}"
       cursor-spacing="{{ cursorSpacing }}"
-      custom-style="padding: 5px 10px 5px 0; background-color: transparent;"
+      custom-style="padding: 0; background-color: transparent;"
       bind:blur="onBlur"
       bind:focus="onFocus"
       bind:change="onChange"
@@ -37,8 +37,11 @@
       bind:clear="onClear"
       bind:click-input="onClickInput"
     >
+      <smart-icon wx:if="{{ !useLeftIconSlot && leftIcon }}" size="18" name="{{ leftIcon }}" custom-class="smart-search__field__left-icon" slot="left-icon" />
       <slot wx:if="{{ useLeftIconSlot }}" name="left-icon" slot="left-icon" />
       <slot wx:if="{{ useRightIconSlot }}" name="right-icon" slot="right-icon" />
+      <view wx:if="{{ showSearchButton && searchText }}" hover-class="smart-search__hover" bind:tap="goSearch" class="smart-search__submit" slot="button" >{{ searchText }}</view>
+      <slot name="search-button" slot="button" />
     </smart-field>
   </view>
 

package/dist/search/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-search{align-items:center;box-sizing:border-box;display:flex;padding:var(--search-padding,10px 12px)}.smart-search__content{background-color:var(--search-background-color,#f7f8fa);border-radius:2px;display:flex;flex:1;padding-left:var(--padding-sm,12px)}.smart-search__content--round{border-radius:999px}.smart-search__label{color:var(--search-label-color,#323233);font-size:var(--search-label-font-size,14px);line-height:var(--search-input-height,34px);padding:var(--search-label-padding,0 5px)}.smart-search__field{flex:1}.smart-search__field__left-icon{color:var(--search-left-icon-color,#969799)}.smart-search--withaction{padding-right:0}.smart-search__action{color:var(--search-action-text-color,#323233);font-size:var(--search-action-font-size,14px);line-height:var(--search-input-height,34px)}.smart-search__action--hover{background-color:#f2f3f5}.smart-search__action-button{padding:var(--search-action-padding,0 8px)}
+@import '../common/index.wxss';.smart-search{align-items:center;background-color:var(--search-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;padding:var(--search-padding,12px 16px)}.smart-search__content{align-items:center;background-color:var(--search-body-background-color,var(--app-B4-N9,rgba(0,0,0,.05)));display:flex;flex:1;flex-direction:row;padding:12px 16px}.smart-search__content--round{border-radius:999px}.smart-search__label{color:var(--search-label-color,var(--app-B4-N1,#000));font-size:var(--search-label-font-size,14px);line-height:var(--search-input-height,24px);padding:var(--search-label-padding,0 5px)}.smart-search__field{flex:1}.smart-search__field__left-icon{--icon-color:var(--search-left-icon-color,var(--app-B4-N4,rgba(0,0,0,.4)));margin-left:2px}.smart-search__input{font-size:var(--search-value-font-size,14px)}.smart-search--withaction{padding-right:0}.smart-search__action{color:var(--search-action-text-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--search-action-font-size,14px);line-height:var(--search-input-height,24px)}.smart-search__action--hover{background-color:var(--app-B4-N9,rgba(0,0,0,.05));opacity:.4}.smart-search__action-button{padding:var(--search-action-padding,0 16px 0 12px)}.smart-search__hover{background-color:var(--app-B4-N9,rgba(0,0,0,.05));opacity:.4}.smart-search__submit{align-items:center;color:var(--search-submit-color,var(--app-M1,#3678e3));display:flex;flex-direction:row;font-size:var(--search-submit-font-size,14px)}.smart-search__submit:before{background-color:var(--search-submit-color,var(--app-M1,#3678e3));content:"";display:block;height:12px;margin-right:12px;width:1px}

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-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{height:50%;left:25%;position:absolute!important;top:25%;width: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-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)}

package/dist/switch/index.wxml

@@ -27,6 +27,7 @@
         wx:if="{{ loading }}"
         color="{{ computed.loadingColor({ checked, activeColor, inactiveColor, activeValue }) }}"
         custom-class="smart-switch__loading"
+        size="{{size}}"
       />
     </view>
   </view>

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-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{height:50%;left:25%;position:absolute!important;top:25%;width: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-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)}

package/dist/tabs/index.css

@@ -1 +1 @@
-@import '../common/index.css';:root{--tabs-card-background-color:rgba(0,0,0,.08)}:root[theme=dark]{--tabs-card-background-color:hsla(0,0%,100%,.12)}.smart-tabs{-webkit-tap-highlight-color:transparent;position:relative}.smart-tabs__wrap{display:flex;overflow:hidden}.smart-tabs__wrap--scrollable .smart-tab{flex:0 0 22%}.smart-tabs__wrap--scrollable .smart-tab--complete{flex:1 0 auto!important;padding:0 12px}.smart-tabs__wrap--scrollable .smart-tabs__nav--complete{padding-left:8px;padding-right:8px}.smart-tabs__scroll{background-color:var(--tabs-background-color,var(--app-B3,#fff));overflow:auto}.smart-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.smart-tabs__scroll--card{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;margin:0 var(--padding-md,16px);width:calc(100% - var(--padding-md, 16px)*2)}.smart-tabs__scroll::-webkit-scrollbar{display:none}.smart-tabs__nav{display:flex;position:relative;-webkit-user-select:none;user-select:none}.smart-tabs__nav--card{background-color:var(--tabs-card-background-color);border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:var(--tabs-card-height,30px);padding:2px}.smart-tabs__nav--card .smart-tab{border-radius:6px;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));line-height:calc(var(--tabs-card-height, 30px) - 2px)}.smart-tabs__nav--card .smart-tab:last-child{border-right:none}.smart-tabs__nav--card .smart-tab.smart-tab--active{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000))}.smart-tabs__nav--card .smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tabs__line{background-color:var(--tabs-bottom-bar-color,var(--app-M4,#1989fa));border-radius:var(--tabs-bottom-bar-height,3px);bottom:0;height:var(--tabs-bottom-bar-height,3px);left:0;opacity:0;position:absolute;z-index:1}.smart-tabs__track{height:100%;position:relative;width:100%}.smart-tabs__track--animated{display:flex;transition-property:left}.smart-tabs__content{overflow:hidden}.smart-tabs--line{height:var(--tabs-line-height,32px)}.smart-tabs--card{height:var(--tabs-card-height,30px)}.smart-tab{box-sizing:border-box;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));cursor:pointer;flex:1;font-size:var(--tab-font-size,13px);line-height:var(--tabs-line-height,32px);min-width:0;padding:0 5px;position:relative;text-align:center}.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tab__title__info{position:relative!important;top:-1px!important;transform:translateX(0)!important}
+@import '../common/index.css';:root{--tabs-card-background-color:rgba(0,0,0,.08)}:root[theme=dark]{--tabs-card-background-color:hsla(0,0%,100%,.12)}.smart-tabs{-webkit-tap-highlight-color:transparent;position:relative}.smart-tabs__wrap{display:flex;overflow:hidden}.smart-tabs__wrap--scrollable .smart-tab{flex:0 0 22%}.smart-tabs__wrap--scrollable .smart-tab--complete{flex:1 0 auto!important;padding:0 12px}.smart-tabs__wrap--scrollable .smart-tabs__nav--complete{padding-left:8px;padding-right:8px}.smart-tabs__scroll{background-color:var(--tabs-background-color,var(--app-B3,#fff));overflow:auto}.smart-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.smart-tabs__scroll--card{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;margin:0 var(--padding-md,16px);width:calc(100% - var(--padding-md, 16px)*2)}.smart-tabs__scroll::-webkit-scrollbar{display:none}.smart-tabs__nav{display:flex;position:relative;-webkit-user-select:none;user-select:none}.smart-tabs__nav--card{background-color:var(--tabs-card-background-color);border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:var(--tabs-card-height,32px);padding:2px}.smart-tabs__nav--card .smart-tab{color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));line-height:calc(var(--tabs-card-height, 32px) - 2px)}.smart-tabs__nav--card .smart-tab:last-child{border-right:none}.smart-tabs__nav--card .smart-tab.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000))}.smart-tabs__nav--card .smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tabs__line{background-color:var(--tabs-bottom-bar-color,var(--app-M4,#1989fa));border-radius:var(--tabs-bottom-bar-height,3px);bottom:0;height:var(--tabs-bottom-bar-height,3px);left:0;opacity:0;position:absolute;z-index:1}.smart-tabs__card{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));border-radius:6px;left:0;opacity:0;position:absolute;top:0;z-index:0}.smart-tabs__track{height:100%;position:relative;width:100%}.smart-tabs__track--animated{display:flex;transition-property:left}.smart-tabs__content{overflow:hidden}.smart-tabs--line{height:var(--tabs-line-height,32px)}.smart-tabs--card{height:var(--tabs-card-height,32px)}.smart-tab{box-sizing:border-box;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));cursor:pointer;flex:1;font-size:var(--tab-font-size,13px);line-height:var(--tabs-line-height,32px);min-width:0;padding:0 5px;position:relative;text-align:center}.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tab__title__info{position:relative!important;top:-1px!important;transform:translateX(0)!important}

package/dist/tabs/index.js

@@ -185,10 +185,7 @@ SmartComponent({
             }
         },
         resize() {
-            if (this.data.type !== 'line') {
-                return;
-            }
-            const { currentIndex, ellipsis, skipTransition } = this.data;
+            const { currentIndex, ellipsis, skipTransition, type } = this.data;
             Promise.all([
                 getAllRect(this, '.smart-tab'),
                 getRect(this, '.smart-tabs__line'),
@@ -197,12 +194,18 @@ SmartComponent({
                 if (rect == null) {
                     return;
                 }
+                const { width: cardWidth, height: cardHeight } = rects[currentIndex];
                 let lineOffsetLeft = rects
                     .slice(0, currentIndex)
                     .reduce((prev, curr) => prev + curr.width, 0);
-                lineOffsetLeft +=
-                    (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
-                this.setData({ lineOffsetLeft, inited: true });
+                if (type === 'line') {
+                    lineOffsetLeft +=
+                        (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
+                }
+                else if (type === 'card') {
+                    lineOffsetLeft += 2;
+                }
+                this.setData({ lineOffsetLeft, inited: true, cardWidth, cardHeight });
                 this.swiping = true;
                 if (skipTransition) {
                     // waiting transition end

package/dist/tabs/index.wxml

@@ -21,6 +21,7 @@
       >
         <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}">
           <view wx:if="{{ type === 'line' }}" class="smart-tabs__line" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth, inited }) }}" />
+          <view wx:if="{{ type === 'card' }}" class="smart-tabs__card" style="{{ computed.cardStyle({ color, lineOffsetLeft, cardHeight, skipTransition, duration, cardWidth, inited }) }}" />
           <view
             wx:for="{{ tabs }}"
             wx:key="index"

package/dist/tabs/index.wxs

@@ -74,10 +74,27 @@ function lineStyle(data) {
   });
 }
 
+function cardStyle(data) {
+  return style({
+    width: utils.addUnit(data.cardWidth),
+    opacity: data.inited ? 1 : 0,
+    transform: 'translateX(' + data.lineOffsetLeft + 'px)',
+    '-webkit-transform': 'translate(' + data.lineOffsetLeft + 'px, 2px)',
+    'background-color': data.color,
+    height: utils.addUnit(data.cardHeight),
+    'transition-duration': !data.skipTransition ? data.duration + 's' : null,
+    '-webkit-transition-duration': !data.skipTransition
+      ? data.duration + 's'
+      : null,
+  });
+}
+
+
 module.exports = {
   tabClass: tabClass,
   tabStyle: tabStyle,
   trackStyle: trackStyle,
   lineStyle: lineStyle,
   navStyle: navStyle,
+  cardStyle: cardStyle,
 };

package/dist/tabs/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';:root{--tabs-card-background-color:rgba(0,0,0,.08)}:root[theme=dark]{--tabs-card-background-color:hsla(0,0%,100%,.12)}.smart-tabs{-webkit-tap-highlight-color:transparent;position:relative}.smart-tabs__wrap{display:flex;overflow:hidden}.smart-tabs__wrap--scrollable .smart-tab{flex:0 0 22%}.smart-tabs__wrap--scrollable .smart-tab--complete{flex:1 0 auto!important;padding:0 12px}.smart-tabs__wrap--scrollable .smart-tabs__nav--complete{padding-left:8px;padding-right:8px}.smart-tabs__scroll{background-color:var(--tabs-background-color,var(--app-B3,#fff));overflow:auto}.smart-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.smart-tabs__scroll--card{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;margin:0 var(--padding-md,16px);width:calc(100% - var(--padding-md, 16px)*2)}.smart-tabs__scroll::-webkit-scrollbar{display:none}.smart-tabs__nav{display:flex;position:relative;-webkit-user-select:none;user-select:none}.smart-tabs__nav--card{background-color:var(--tabs-card-background-color);border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:var(--tabs-card-height,30px);padding:2px}.smart-tabs__nav--card .smart-tab{border-radius:6px;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));line-height:calc(var(--tabs-card-height, 30px) - 2px)}.smart-tabs__nav--card .smart-tab:last-child{border-right:none}.smart-tabs__nav--card .smart-tab.smart-tab--active{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000))}.smart-tabs__nav--card .smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tabs__line{background-color:var(--tabs-bottom-bar-color,var(--app-M4,#1989fa));border-radius:var(--tabs-bottom-bar-height,3px);bottom:0;height:var(--tabs-bottom-bar-height,3px);left:0;opacity:0;position:absolute;z-index:1}.smart-tabs__track{height:100%;position:relative;width:100%}.smart-tabs__track--animated{display:flex;transition-property:left}.smart-tabs__content{overflow:hidden}.smart-tabs--line{height:var(--tabs-line-height,32px)}.smart-tabs--card{height:var(--tabs-card-height,30px)}.smart-tab{box-sizing:border-box;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));cursor:pointer;flex:1;font-size:var(--tab-font-size,13px);line-height:var(--tabs-line-height,32px);min-width:0;padding:0 5px;position:relative;text-align:center}.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tab__title__info{position:relative!important;top:-1px!important;transform:translateX(0)!important}
+@import '../common/index.wxss';:root{--tabs-card-background-color:rgba(0,0,0,.08)}:root[theme=dark]{--tabs-card-background-color:hsla(0,0%,100%,.12)}.smart-tabs{-webkit-tap-highlight-color:transparent;position:relative}.smart-tabs__wrap{display:flex;overflow:hidden}.smart-tabs__wrap--scrollable .smart-tab{flex:0 0 22%}.smart-tabs__wrap--scrollable .smart-tab--complete{flex:1 0 auto!important;padding:0 12px}.smart-tabs__wrap--scrollable .smart-tabs__nav--complete{padding-left:8px;padding-right:8px}.smart-tabs__scroll{background-color:var(--tabs-background-color,var(--app-B3,#fff));overflow:auto}.smart-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.smart-tabs__scroll--card{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;margin:0 var(--padding-md,16px);width:calc(100% - var(--padding-md, 16px)*2)}.smart-tabs__scroll::-webkit-scrollbar{display:none}.smart-tabs__nav{display:flex;position:relative;-webkit-user-select:none;user-select:none}.smart-tabs__nav--card{background-color:var(--tabs-card-background-color);border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:var(--tabs-card-height,32px);padding:2px}.smart-tabs__nav--card .smart-tab{color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));line-height:calc(var(--tabs-card-height, 32px) - 2px)}.smart-tabs__nav--card .smart-tab:last-child{border-right:none}.smart-tabs__nav--card .smart-tab.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000))}.smart-tabs__nav--card .smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tabs__line{background-color:var(--tabs-bottom-bar-color,var(--app-M4,#1989fa));border-radius:var(--tabs-bottom-bar-height,3px);bottom:0;height:var(--tabs-bottom-bar-height,3px);left:0;opacity:0;position:absolute;z-index:1}.smart-tabs__card{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));border-radius:6px;left:0;opacity:0;position:absolute;top:0;z-index:0}.smart-tabs__track{height:100%;position:relative;width:100%}.smart-tabs__track--animated{display:flex;transition-property:left}.smart-tabs__content{overflow:hidden}.smart-tabs--line{height:var(--tabs-line-height,32px)}.smart-tabs--card{height:var(--tabs-card-height,32px)}.smart-tab{box-sizing:border-box;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));cursor:pointer;flex:1;font-size:var(--tab-font-size,13px);line-height:var(--tabs-line-height,32px);min-width:0;padding:0 5px;position:relative;text-align:center}.smart-tab--active{color:var(--tabs-card-text-active-color,var(--app-B6-N1,#000));font-weight:var(--font-weight-bold,500)}.smart-tab--disabled{color:var(--tab-disabled-text-color,var(--app-B6-N7,rgba(0,0,0,.1)))}.smart-tab__title__info{position:relative!important;top:-1px!important;transform:translateX(0)!important}