@tuya-miniapp/smart-ui 2.7.1-beta-13 → 2.7.2-beta-0

package/lib/swipe-cell/index.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var touch_1 = require("../mixins/touch");
+var utils_1 = require("../common/utils");
+var THRESHOLD = 0.3;
+var ARRAY = [];
+(0, component_1.SmartComponent)({
+    props: {
+        disabled: Boolean,
+        leftWidth: {
+            type: Number,
+            value: 0,
+            observer: function (leftWidth) {
+                if (leftWidth === void 0) { leftWidth = 0; }
+                if (this.offset > 0) {
+                    this.swipeMove(leftWidth);
+                }
+            },
+        },
+        rightWidth: {
+            type: Number,
+            value: 0,
+            observer: function (rightWidth) {
+                if (rightWidth === void 0) { rightWidth = 0; }
+                if (this.offset < 0) {
+                    this.swipeMove(-rightWidth);
+                }
+            },
+        },
+        asyncClose: Boolean,
+        name: {
+            type: null,
+            value: '',
+        },
+    },
+    mixins: [touch_1.touch],
+    data: {
+        catchMove: false,
+        wrapperStyle: '',
+        position: 'close',
+    },
+    created: function () {
+        this.offset = 0;
+        ARRAY.push(this);
+    },
+    destroyed: function () {
+        var _this = this;
+        ARRAY = ARRAY.filter(function (item) { return item !== _this; });
+    },
+    methods: {
+        open: function (position) {
+            var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
+            var offset = position === 'left' ? leftWidth : -rightWidth;
+            this.swipeMove(offset);
+            if (position !== this.data.position && this.data.position !== 'close') {
+                this.$emit('tab-close', this.data.position);
+            }
+            this.setData({ position: position });
+            this.$emit('open', {
+                position: position,
+                name: this.data.name,
+            });
+        },
+        close: function () {
+            if (this.data.position !== 'close') {
+                this.$emit('tab-close', this.data.position);
+            }
+            this.swipeMove(0);
+            this.setData({ position: 'close' });
+        },
+        swipeMove: function (offset) {
+            if (offset === void 0) { offset = 0; }
+            this.offset = (0, utils_1.range)(offset, -this.data.rightWidth, this.data.leftWidth);
+            var transform = "translate3d(".concat(this.offset, "px, 0, 0)");
+            var transition = this.dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
+            this.setData({
+                wrapperStyle: "\n        -webkit-transform: ".concat(transform, ";\n        -webkit-transition: ").concat(transition, ";\n        transform: ").concat(transform, ";\n        transition: ").concat(transition, ";\n      "),
+            });
+        },
+        swipeLeaveTransition: function () {
+            var _a = this.data, leftWidth = _a.leftWidth, rightWidth = _a.rightWidth;
+            var offset = this.offset;
+            if (rightWidth > 0 && -offset > rightWidth * THRESHOLD) {
+                this.open('right');
+            }
+            else if (leftWidth > 0 && offset > leftWidth * THRESHOLD) {
+                this.open('left');
+            }
+            else {
+                this.close();
+            }
+            this.setData({ catchMove: false });
+        },
+        startDrag: function (event) {
+            if (this.data.disabled) {
+                return;
+            }
+            this.startOffset = this.offset;
+            this.touchStart(event);
+        },
+        noop: function () { },
+        onDrag: function (event) {
+            var _this = this;
+            if (this.data.disabled) {
+                return;
+            }
+            this.touchMove(event);
+            if (this.direction !== 'horizontal') {
+                return;
+            }
+            this.dragging = true;
+            ARRAY.filter(function (item) { return item !== _this && item.offset !== 0; }).forEach(function (item) { return item.close(); });
+            this.setData({ catchMove: true });
+            this.swipeMove(this.startOffset + this.deltaX);
+        },
+        endDrag: function () {
+            if (this.data.disabled || !this.dragging) {
+                return;
+            }
+            this.dragging = false;
+            this.swipeLeaveTransition();
+        },
+        onClick: function (event) {
+            var _a = event.currentTarget.dataset.key, position = _a === void 0 ? 'outside' : _a;
+            this.$emit('click', position);
+            if (!this.offset) {
+                return;
+            }
+            if (this.data.asyncClose) {
+                this.$emit('close', {
+                    position: position,
+                    instance: this,
+                    name: this.data.name,
+                });
+            }
+            else {
+                this.close();
+            }
+        },
+    },
+});

package/lib/swipe-cell/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/swipe-cell/index.wxml

@@ -0,0 +1,21 @@
+<view catch:touchmove="{{ catchMove ? 'noop' : '' }}">
+  <view
+    class="smart-swipe-cell custom-class"
+    data-key="cell"
+    catchtap="onClick"
+    bind:touchstart="startDrag"
+    bind:touchmove="onDrag"
+    bind:touchend="endDrag"
+    bind:touchcancel="endDrag"
+  >
+    <view style="{{ wrapperStyle }}">
+      <view wx:if="{{ leftWidth }}" class="smart-swipe-cell__left" data-key="left" catch:tap="onClick">
+        <slot name="left" />
+      </view>
+      <slot />
+      <view wx:if="{{ rightWidth }}" class="smart-swipe-cell__right" data-key="right" catch:tap="onClick">
+        <slot name="right" />
+      </view>
+    </view>
+  </view>
+</view>

package/lib/swipe-cell/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-swipe-cell{overflow:hidden;position:relative}.smart-swipe-cell__left,.smart-swipe-cell__right{height:100%;position:absolute;top:0}.smart-swipe-cell__left{left:0;transform:translate3d(-100%,0,0)}.smart-swipe-cell__right{right:0;transform:translate3d(100%,0,0)}

package/lib/switch/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{display:inline-flex}.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border-radius:var(--switch-node-size,.867em);box-sizing:initial;display:inline-block;height:var(--switch-height,.867em);padding:var(--switch-border,var(--switch-padding,.067em));position:relative;transition:background-color var(--switch-transition-duration,.3s);vertical-align:middle;width:var(--switch-width,1.5338em)}.smart-switch--label{width:var(--switch-label-width,2em)}.smart-switch__center{box-sizing:initial;height:100%;position:relative;width:100%}.smart-switch__label_active{align-items:center;color:var(--switch-label-active-color,var(--app-B3,#fff));display:flex;height:100%;justify-content:center;left:0;padding-left:var(--switch-border,var(--switch-padding,.067em));position:absolute;text-align:center;top:0;width:calc(100% - var(--switch-node-size, .867em))}.smart-switch__label_active .smart-switch__label_text{font-size:var(--switch-label-font-size,13px)}.smart-switch__label_inactive{align-items:center;color:var(--switch-label-inactive-color,var(--app-B3,#fff));display:flex;height:100%;justify-content:center;padding-right:var(--switch-border,var(--switch-padding,.067em));position:absolute;right:0;text-align:center;top:0;width:calc(100% - var(--switch-node-size, .867em))}.smart-switch__label_inactive .smart-switch__label_text{font-size:var(--switch-label-font-size,13px)}.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,.867em);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,.867em);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{background-color:var(--switch-node-on-background-color,var(--switch-node-background-color,#fff));left:calc(100% - var(--switch-node-size, .867em))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}

package/lib/switch/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/switch/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    field: true,
+    classes: ['node-class'],
+    props: {
+        checked: null,
+        loading: Boolean,
+        disabled: Boolean,
+        activeColor: String,
+        inactiveColor: String,
+        activeText: String,
+        inactiveText: String,
+        stopClickPropagation: {
+            type: Boolean,
+            value: false,
+        },
+        size: {
+            type: String,
+            value: '30',
+        },
+        activeValue: {
+            type: null,
+            value: true,
+        },
+        inactiveValue: {
+            type: null,
+            value: false,
+        },
+    },
+    methods: {
+        onClick: function () {
+            var _a = this.data, activeValue = _a.activeValue, inactiveValue = _a.inactiveValue, disabled = _a.disabled, loading = _a.loading;
+            if (disabled || loading) {
+                return;
+            }
+            var checked = this.data.checked === activeValue;
+            var value = checked ? inactiveValue : activeValue;
+            this.$emit('input', value);
+            this.$emit('change', value);
+        },
+    },
+});

package/lib/switch/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-loading": "../loading/index"
+  }
+}

package/lib/switch/index.wxml

@@ -0,0 +1,51 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<block wx:if="{{stopClickPropagation}}">
+  <view
+    class="{{ utils.bem('switch', { on: checked === activeValue, disabled, label: activeText || inactiveText }) }} custom-class"
+    style="{{ computed.rootStyle({ size, checked, activeColor, inactiveColor, activeValue }) }}"
+    catch:tap="onClick"
+  >
+    <view class="smart-switch__center">
+      <view wx:if="{{ activeText }}" style="opacity: {{checked ? '1' : '0'}}" class="smart-switch__label_active">
+        <text class="smart-switch__label_text">{{ activeText }}</text>
+      </view>
+      <view wx:if="{{ inactiveText }}" style="opacity: {{!checked ? '1' : '0'}}" class="smart-switch__label_inactive">
+        <text class="smart-switch__label_text">{{ inactiveText }}</text>
+      </view>
+      <view class="smart-switch__node node-class">
+        <smart-loading
+          wx:if="{{ loading }}"
+          color="{{ computed.loadingColor({ checked, activeColor, inactiveColor, activeValue }) }}"
+          custom-class="smart-switch__loading"
+        />
+      </view>
+    </view>
+  </view>
+</block>
+<block wx:else>
+  <view
+    class="{{ utils.bem('switch', { on: checked === activeValue, disabled, label: activeText || inactiveText }) }} custom-class"
+    style="{{ computed.rootStyle({ size, checked, activeColor, inactiveColor, activeValue }) }}"
+    bind:tap="onClick"
+  >
+    <view class="smart-switch__center">
+      <view wx:if="{{ activeText }}" style="opacity: {{checked ? '1' : '0'}}" class="smart-switch__label_active">
+        <text class="smart-switch__label_text">{{ activeText }}</text>
+      </view>
+      <view wx:if="{{ inactiveText }}" style="opacity: {{!checked ? '1' : '0'}}" class="smart-switch__label_inactive">
+        <text class="smart-switch__label_text">{{ inactiveText }}</text>
+      </view>
+      <view class="smart-switch__node node-class">
+        <smart-loading
+          wx:if="{{ loading }}"
+          color="{{ computed.loadingColor({ checked, activeColor, inactiveColor, activeValue }) }}"
+          custom-class="smart-switch__loading"
+          size="{{size}}"
+        />
+      </view>
+    </view>
+  </view>
+</block>
+

package/lib/switch/index.wxs

@@ -0,0 +1,26 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  var currentColor = data.checked === data.activeValue ? data.activeColor : data.inactiveColor;
+
+  return style({
+    'font-size': addUnit(data.size),
+    'background': currentColor,
+  });
+}
+
+var BLUE = '#1989fa';
+var GRAY_DARK = '#969799';
+
+function loadingColor(data) {
+  return data.checked === data.activeValue
+    ? data.activeColor || BLUE
+    : data.inactiveColor || GRAY_DARK;
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  loadingColor: loadingColor,
+};

package/lib/switch/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{display:inline-flex}.smart-switch{background-color:var(--switch-background-color,var(--app-B4-N6,rgba(0,0,0,.2)));border-radius:var(--switch-node-size,.867em);box-sizing:initial;display:inline-block;height:var(--switch-height,.867em);padding:var(--switch-border,var(--switch-padding,.067em));position:relative;transition:background-color var(--switch-transition-duration,.3s);vertical-align:middle;width:var(--switch-width,1.5338em)}.smart-switch--label{width:var(--switch-label-width,2em)}.smart-switch__center{box-sizing:initial;height:100%;position:relative;width:100%}.smart-switch__label_active{align-items:center;color:var(--switch-label-active-color,var(--app-B3,#fff));display:flex;height:100%;justify-content:center;left:0;padding-left:var(--switch-border,var(--switch-padding,.067em));position:absolute;text-align:center;top:0;width:calc(100% - var(--switch-node-size, .867em))}.smart-switch__label_active .smart-switch__label_text{font-size:var(--switch-label-font-size,13px)}.smart-switch__label_inactive{align-items:center;color:var(--switch-label-inactive-color,var(--app-B3,#fff));display:flex;height:100%;justify-content:center;padding-right:var(--switch-border,var(--switch-padding,.067em));position:absolute;right:0;text-align:center;top:0;width:calc(100% - var(--switch-node-size, .867em))}.smart-switch__label_inactive .smart-switch__label_text{font-size:var(--switch-label-font-size,13px)}.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,.867em);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,.867em);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{background-color:var(--switch-node-on-background-color,var(--switch-node-background-color,#fff));left:calc(100% - var(--switch-node-size, .867em))}.smart-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}

package/lib/tab/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{box-sizing:border-box;flex-shrink:0;width:100%}.smart-tab__pane{-webkit-overflow-scrolling:touch;background-color:var(--tab-panel-background-color,var(--app-B3));box-sizing:border-box;color:var(--tab-panel-text-color,var(--app-B3-N1));overflow-y:auto}.smart-tab__pane--active{height:auto}.smart-tab__pane--inactive{height:0;overflow:visible}

package/lib/tab/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tab/index.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var relation_1 = require("../common/relation");
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.useParent)('tabs'),
+    props: {
+        dot: {
+            type: Boolean,
+            observer: 'update',
+        },
+        info: {
+            type: null,
+            observer: 'update',
+        },
+        title: {
+            type: String,
+            observer: 'update',
+        },
+        subtitle: {
+            type: String,
+            observer: 'update',
+        },
+        titleStyle: {
+            type: String,
+            observer: 'update',
+        },
+        subtitleStyle: {
+            type: String,
+            observer: 'update',
+        },
+        disabled: {
+            type: Boolean,
+            observer: 'update',
+        },
+        name: {
+            type: null,
+            value: '',
+        },
+    },
+    data: {
+        active: false,
+    },
+    methods: {
+        getComputedName: function () {
+            if (this.data.name !== '') {
+                return this.data.name;
+            }
+            return this.index;
+        },
+        updateRender: function (active, parent) {
+            var parentData = parent.data;
+            this.inited = this.inited || active;
+            this.setData({
+                active: active,
+                shouldRender: parentData.inactiveDestroy ? active : this.inited || !parentData.lazyRender,
+                shouldShow: active || parentData.animated,
+            });
+        },
+        update: function () {
+            if (this.parent) {
+                this.parent.updateTabs();
+            }
+        },
+    },
+});

package/lib/tab/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/tab/index.wxml

@@ -0,0 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}"
+  style="{{ shouldShow ? '' : 'display: none;' }}"
+>
+  <slot wx:if="{{ shouldRender }}" />
+</view>

package/lib/tab/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{box-sizing:border-box;flex-shrink:0;width:100%}.smart-tab__pane{-webkit-overflow-scrolling:touch;background-color:var(--tab-panel-background-color,var(--app-B3));box-sizing:border-box;color:var(--tab-panel-text-color,var(--app-B3-N1));overflow-y:auto}.smart-tab__pane--active{height:auto}.smart-tab__pane--inactive{height:0;overflow:visible}

package/lib/tabbar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-tabbar{background-color:var(--tabbar-background-color,var(--app-B5,#f6f7fb));box-sizing:initial;display:flex;height:var(--tabbar-height,55px);width:100%}.smart-tabbar--fixed{bottom:0;left:0;position:fixed}.smart-tabbar--safe{padding-bottom:env(safe-area-inset-bottom)}.smart-tabbar--border{box-shadow:0 -.5px 0 0 var(--tabbar-border-color,var(--app-B6-N7,rgba(0,0,0,.1)))}

package/lib/tabbar/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tabbar/index.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+var utils_1 = require("../common/utils");
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.useChildren)('tabbar-item', function () {
+        this.updateChildren();
+    }),
+    props: {
+        active: {
+            type: null,
+            observer: 'updateChildren',
+        },
+        upsideDown: {
+            type: Boolean,
+            value: false,
+        },
+        activeColor: {
+            type: String,
+            observer: 'updateChildren',
+            value: 'var(--tabbar-item-active-color, var(--app-M1, #3678e3))',
+        },
+        inactiveColor: {
+            type: String,
+            observer: 'updateChildren',
+        },
+        fixed: {
+            type: Boolean,
+            value: true,
+            observer: 'setHeight',
+        },
+        placeholder: {
+            type: Boolean,
+            observer: 'setHeight',
+        },
+        border: {
+            type: Boolean,
+            value: true,
+        },
+        zIndex: {
+            type: Number,
+            value: 1,
+        },
+        safeAreaInsetBottom: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        height: 50,
+    },
+    methods: {
+        updateChildren: function () {
+            var children = this.children;
+            if (!Array.isArray(children) || !children.length) {
+                return;
+            }
+            children.forEach(function (child) { return child.updateFromParent(); });
+        },
+        setHeight: function () {
+            var _this = this;
+            if (!this.data.fixed || !this.data.placeholder) {
+                return;
+            }
+            wx.nextTick(function () {
+                (0, utils_1.getRect)(_this, '.smart-tabbar').then(function (res) {
+                    _this.setData({ height: res.height });
+                });
+            });
+        },
+    },
+});

package/lib/tabbar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/tabbar/index.wxml

@@ -0,0 +1,12 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="{{ utils.bem('tabbar', { border }) }} {{ utils.bem('tabbar', { fixed, safe: safeAreaInsetBottom }) }} custom-class"
+  style="{{ zIndex ? 'z-index: ' + zIndex : '' }}"
+>
+  <slot name="left" />
+  <slot />
+  <slot name="right" />
+</view>
+
+<view wx:if="{{ fixed && placeholder }}" style="height: {{ height }}px;"></view>

package/lib/tabbar/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-tabbar{background-color:var(--tabbar-background-color,var(--app-B5,#f6f7fb));box-sizing:initial;display:flex;height:var(--tabbar-height,55px);width:100%}.smart-tabbar--fixed{bottom:0;left:0;position:fixed}.smart-tabbar--safe{padding-bottom:env(safe-area-inset-bottom)}.smart-tabbar--border{box-shadow:0 -.5px 0 0 var(--tabbar-border-color,var(--app-B6-N7,rgba(0,0,0,.1)))}

package/lib/tabbar-item/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);line-height:0;margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item__text-up{margin-bottom:var(--tabbar-item-margin-bottom,4px)}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:var(--tabbar-item-info-margin-top,2px)}.smart-tabbar-item--reverse .smart-tabbar-item__icon{margin-bottom:0}

package/lib/tabbar-item/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/tabbar-item/index.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.SmartComponent)({
+    props: {
+        info: null,
+        name: null,
+        icon: String,
+        dot: Boolean,
+        disabled: Boolean,
+        url: {
+            type: String,
+            value: '',
+        },
+        linkType: {
+            type: String,
+            value: 'redirectTo',
+        },
+        iconPrefix: {
+            type: String,
+            value: 'smart-icon',
+        },
+    },
+    relation: (0, relation_1.useParent)('tabbar'),
+    data: {
+        active: false,
+        activeColor: '',
+        inactiveColor: '',
+        upsideDown: false,
+    },
+    methods: {
+        onClick: function () {
+            var parent = this.parent;
+            if (this.data.disabled) {
+                this.$emit('click');
+                return;
+            }
+            if (parent) {
+                var index = parent.children.indexOf(this);
+                var active = this.data.name || index;
+                if (active !== this.data.active) {
+                    parent.$emit('change', active);
+                }
+            }
+            var _a = this.data, url = _a.url, linkType = _a.linkType;
+            if (url && wx[linkType]) {
+                return wx[linkType]({ url: url });
+            }
+            this.$emit('click');
+        },
+        updateFromParent: function () {
+            var parent = this.parent;
+            if (!parent) {
+                return;
+            }
+            var index = parent.children.indexOf(this);
+            var parentData = parent.data;
+            var data = this.data;
+            var active = (data.name || index) === parentData.active;
+            var patch = {};
+            if (active !== data.active) {
+                patch.active = active;
+            }
+            if (parentData.activeColor !== data.activeColor) {
+                patch.activeColor = parentData.activeColor;
+            }
+            if (parentData.inactiveColor !== data.inactiveColor) {
+                patch.inactiveColor = parentData.inactiveColor;
+            }
+            if (parentData.upsideDown !== data.upsideDown) {
+                patch.upsideDown = parentData.upsideDown;
+            }
+            if (Object.keys(patch).length > 0) {
+                this.setData(patch);
+            }
+        },
+    },
+});

package/lib/tabbar-item/index.json

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

package/lib/tabbar-item/index.wxml

@@ -0,0 +1,32 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="{{ utils.bem('tabbar-item', { active, disabled, reverse: upsideDown }) }} custom-class"
+  style="color: {{ active ? activeColor : inactiveColor }}"
+  bindtap="onClick"
+>
+  <view class="smart-tabbar-item__text smart-tabbar-item__text-up" wx:if="{{upsideDown}}">
+    <slot />
+  </view>
+  <view class="smart-tabbar-item__icon">
+    <smart-icon
+      wx:if="{{ icon }}"
+      name="{{ icon }}"
+      color="{{active ? activeColor : inactiveColor}}"
+      class-prefix="{{ iconPrefix }}"
+      custom-class="smart-tabbar-item__icon__inner"
+    />
+    <block wx:else>
+      <slot wx:if="{{ active }}" name="icon-active" />
+      <slot wx:else name="icon" />
+    </block>
+    <smart-info
+      dot="{{ dot }}"
+      info="{{ info }}"
+      custom-class="smart-tabbar-item__info"
+    />
+  </view>
+  <view class="smart-tabbar-item__text" wx:if="{{!upsideDown}}">
+    <slot />
+  </view>
+</view>

package/lib/tabbar-item/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}:host{flex:1}.smart-tabbar-item{align-items:center;color:var(--tabbar-item-text-color,var(--app-B6-N5,rgba(0,0,0,.3)));display:flex;flex-direction:column;font-size:var(--tabbar-item-font-size,12px);height:100%;justify-content:center;line-height:var(--tabbar-item-line-height,1)}.smart-tabbar-item__icon{font-size:var(--tabbar-item-icon-size,22px);line-height:0;margin-bottom:var(--tabbar-item-margin-bottom,4px);position:relative}.smart-tabbar-item__icon__inner{display:block;min-height:1em;min-width:1em}.smart-tabbar-item__text-up{margin-bottom:var(--tabbar-item-margin-bottom,4px)}.smart-tabbar-item--active{color:var(--tabbar-item-active-color,var(--app-M1,#3678e3))}.smart-tabbar-item--disabled{opacity:var(--tabbar-item-disabled-opacity,.7)}.smart-tabbar-item__info{margin-top:var(--tabbar-item-info-margin-top,2px)}.smart-tabbar-item--reverse .smart-tabbar-item__icon{margin-bottom:0}