@tuya/miniapp-smart-ui 2.13.5-beta-0

package/dist/tabbar/README.md

@@ -0,0 +1,333 @@
+---
+category: 导航
+---
+
+# Tabbar 标签栏
+
+### 介绍
+
+底部导航栏，用于在不同页面之间进行切换。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-tabbar": "@tuya/miniapp-smart-ui/lib/tabbar/index",
+  "smart-tabbar-item": "@tuya/miniapp-smart-ui/lib/tabbar-item/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+  },
+  onChange(event) {
+    // event.detail 的值为当前选中项的索引
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 通过名称匹配
+
+在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name`。
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item name="home" icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item name="search" icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item name="friends" icon="friendsmart-o">标签</smart-tabbar-item>
+  <smart-tabbar-item name="setting" icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 'home',
+  },
+  onChange(event) {
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 显示徽标
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="search" dot>标签</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o" info="5">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o" info="20">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+### 自定义图标
+
+可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item info="3">
+    <image
+      slot="icon"
+      src="{{ icon.normal }}"
+      mode="aspectFit"
+      style="width: 30px; height: 18px;"
+    />
+    <image
+      slot="icon-active"
+      src="{{ icon.active }}"
+      mode="aspectFit"
+      style="width: 30px; height: 18px;"
+    />
+    自定义
+  </smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+    icon: {
+      normal:
+        'https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png',
+      active:
+        'https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png',
+    },
+  },
+  onChange(event) {
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 自定义颜色
+
+```html
+<smart-tabbar
+  active="{{ active }}"
+  active-color="#07c160"
+  inactive-color="#000"
+  bind:change="onChange"
+>
+  <smart-tabbar-item icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+  },
+  onChange(event) {
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 切换标签事件
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item icon="home-o">标签1</smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签2</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o">标签3</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签4</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+  },
+  onClick(event) {
+    ty.showToast({
+      title: `点击标签 ${event.detail + 1}`,
+      icon: 'none',
+    });
+  },
+});
+```
+
+### 使用插槽
+
+```html
+<smart-tabbar
+  active="{{ active }}"
+  data-key="active"
+  custom-class="tabbar-position"
+  safe-area-inset-bottom="{{ false }}"
+  bind:change="onChange"
+>
+  <image style="height: 40px;width:40px;margin: 6px 10px;" src="{{icon.left}}" slot="left" />
+  <smart-tabbar-item>
+    <smart-icon name="{{defaultIcon1}}" slot="icon" />
+    <smart-icon name="{{defaultIcon1}}" color="red" slot="icon-active" />
+    标签1
+  </smart-tabbar-item>
+  <smart-tabbar-item>
+    <smart-icon name="{{defaultIcon2}}" slot="icon" />
+    <smart-icon name="{{defaultIcon2}}" color="red" slot="icon-active" />
+    标签2
+  </smart-tabbar-item>
+  <smart-tabbar-item>
+    <smart-icon name="{{defaultIcon3}}" slot="icon" />
+    <smart-icon name="{{defaultIcon3}}" color="red" slot="icon-active" />
+    标签3
+  </smart-tabbar-item>
+  <smart-tabbar-item>
+    <smart-icon name="{{defaultIcon4}}" slot="icon" />
+    <smart-icon name="{{defaultIcon4}}" color="red" slot="icon-active" />
+    标签4
+  </smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
+import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
+import TorSnownado from '@tuya-miniapp/icons/dist/svg/Snow';
+import Connect from '@tuya-miniapp/icons/dist/svg/Connect';
+
+Page({
+  data: {
+    active: 0,
+    icon: {
+      left: 'https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png',
+    },
+    defaultIcon1: Tornado,
+    defaultIcon2: Timer,
+    defaultIcon3: TorSnownado,
+    defaultIcon4: Connect,
+  },
+  onChange(event) {
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 上下颠倒 `v2.5.1`
+
+`upside-down` 属性可以实现组件的上下样式颠倒，让标题在图标的上方。
+
+```html
+<smart-tabbar upside-down active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+  },
+  onChange(event) {
+    // event.detail 的值为当前选中项的索引
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 结合自定义 tabBar
+
+请参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html) 与 [代码片段](https://developers.weixin.qq.com/s/vaXgTsmQ7hnm)。
+
+## API
+
+### Tabbar Props
+
+| 参数                   | 说明                                               | 类型      | 默认值                                                  |
+| ---------------------- | -------------------------------------------------- | --------- | ------------------------------------------------------- |
+| active                 | 当前选中标签的索引                                 | _number_  | -                                                       |
+| active-color           | 选中标签的颜色                                     | _string_  | `--tabbar-item-active-color` \| `--app-M1` \| `#3678e3` |
+| border                 | 是否展示外边框                                     | _boolean_ | `true`                                                  |
+| fixed                  | 是否固定在底部                                     | _boolean_ | `true`                                                  |
+| inactive-color         | 未选中标签的颜色                                   | _string_  | `#7d7e80`                                               |
+| placeholder            | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false`                                                 |
+| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离                    | _boolean_ | `true`                                                  |
+| z-index                | 元素 z-index                                       | _number_  | `1`                                                     |
+| upside-down `v2.5.1`   | 上下颠倒                                           | _boolean_ | `false`                                                 |
+
+### Tabbar Slot
+
+| 名称           | 说明                    |
+| -------------- | ----------------------- |
+| -              | 默认插槽，插入子 tab 页 |
+| left `v2.2.0`  | tab 左侧的插槽          |
+| right `v2.2.0` | tab 右侧的插槽          |
+
+### Tabbar Event
+
+| 事件名      | 说明           | 参数                                     |
+| ----------- | -------------- | ---------------------------------------- |
+| bind:change | 切换标签时触发 | event.detail: 当前选中标签的名称或索引值 |
+
+### TabbarItem Props
+
+| 参数                 | 说明                                                                                                                                         | 类型               | 默认值           |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ---------------- |
+| dot                  | 是否显示小红点                                                                                                                               | _boolean_          | -                |
+| icon                 | 图标 svg 值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp)                                                    | _string_           | -                |
+| icon-prefix          | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](/material/smartui?comId=icon&appType=miniapp#Props)                                         | _string_           | `smart-icon`     |
+| info                 | 图标右上角提示信息                                                                                                                           | _string \| number_ | -                |
+| link-type `v1.10.13` | 链接跳转类型，可选值为 `redirectTo`、[`switchTab`](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html)、`reLaunch` | _string_           | `redirectTo`     |
+| name                 | 标签名称，作为匹配的标识符                                                                                                                   | _string \| number_ | 当前标签的索引值 |
+| url `v1.10.13`       | 点击后跳转的链接地址, 需要以 `/` 开头                                                                                                        | _string_           | -                |
+| disabled `v2.3.5`    | 是否禁用                                                                                                                                     | _boolean_          | -                |
+
+### TabbarItem Slot
+
+| 名称        | 说明           |
+| ----------- | -------------- |
+| icon        | 未选中时的图标 |
+| icon-active | 选中时的图标   |
+
+### TabbarItem Event
+
+| 名称  | 说明                                 |
+| ----- | ------------------------------------ |
+| click | 点击事件，设置 disabled 时也会有回调 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                        | 默认值                                 | 描述             |
+| --------------------------- | -------------------------------------- | ---------------- |
+| --tabbar-height             | _55px_                                 | 标签栏高度       |
+| --tabbar-background-color   | _var(--app-B5, #f6f7fb)_               | 标签栏背景颜色   |
+| --tabbar-border-color       | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_ | 标签栏边框颜色   |
+| --tabbar-item-font-size     | _12px_                                 | 标签项字体大小   |
+| --tabbar-item-text-color    | _var(--app-B6-N5, rgba(0, 0, 0, 0.3))_ | 标签项文本颜色   |
+| --tabbar-item-active-color  | _var(--app-M1, #3678e3)_               | 活动状态项目颜色 |
+| --tabbar-item-line-height   | _1_                                    | 标签项行高       |
+| --tabbar-item-icon-size     | _22px_                                 | 标签项图标大小   |
+| --tabbar-item-margin-bottom | _4px_                                  | 标签项下边距     |

package/dist/tabbar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.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/dist/tabbar/index.d.ts

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

package/dist/tabbar/index.js

@@ -0,0 +1,70 @@
+import { SmartComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+import { getRect } from '../common/utils';
+SmartComponent({
+    relation: 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() {
+            const { children } = this;
+            if (!Array.isArray(children) || !children.length) {
+                return;
+            }
+            children.forEach((child) => child.updateFromParent());
+        },
+        setHeight() {
+            if (!this.data.fixed || !this.data.placeholder) {
+                return;
+            }
+            wx.nextTick(() => {
+                getRect(this, '.smart-tabbar').then(res => {
+                    this.setData({ height: res.height });
+                });
+            });
+        },
+    },
+});

package/dist/tabbar/index.json

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

package/dist/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/dist/tabbar/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.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/dist/tabbar-item/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}: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__icon-slot--hidden{display:none}.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/dist/tabbar-item/index.d.ts

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

package/dist/tabbar-item/index.js

@@ -0,0 +1,79 @@
+import tyApi from '../common/ty';
+import { SmartComponent } from '../common/component';
+import { useParent } from '../common/relation';
+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: useParent('tabbar'),
+    data: {
+        active: false,
+        activeColor: '',
+        inactiveColor: '',
+        upsideDown: false,
+    },
+    methods: {
+        onClick() {
+            const { parent } = this;
+            if (this.data.disabled) {
+                this.$emit('click');
+                return;
+            }
+            if (parent) {
+                const index = parent.children.indexOf(this);
+                const active = this.data.name || index;
+                if (active !== this.data.active) {
+                    parent.$emit('change', active);
+                    tyApi.selectionVibrate();
+                }
+            }
+            const { url, linkType } = this.data;
+            if (url && wx[linkType]) {
+                return wx[linkType]({ url });
+            }
+            this.$emit('click');
+        },
+        updateFromParent() {
+            const { parent } = this;
+            if (!parent) {
+                return;
+            }
+            const index = parent.children.indexOf(this);
+            const parentData = parent.data;
+            const { data } = this;
+            const active = (data.name || index) === parentData.active;
+            const 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/dist/tabbar-item/index.json

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

package/dist/tabbar-item/index.wxml

@@ -0,0 +1,36 @@
+<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 wx:if="{{upsideDown}}" class="smart-tabbar-item__text smart-tabbar-item__text-up">
+    <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>
+      <view class="smart-tabbar-item__icon-slot {{active ? 'smart-tabbar-item__icon-slot--hidden': ''}}">
+        <slot name="icon" />
+      </view>
+      <view class="smart-tabbar-item__icon-slot {{active ? '' : 'smart-tabbar-item__icon-slot--hidden'}}">
+        <slot name="icon-active" />
+      </view>
+    </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/dist/tabbar-item/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}: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__icon-slot--hidden{display:none}.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/dist/tabs/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.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;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{background-color:var(--tabs-card-background-color,var(--app-B6-N9,rgba(0,0,0,.05)));border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;padding:var(--tabs-card-padding,2px);width:100%}.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{border-radius:var(--tabs-card-border-radius,8px);box-sizing:border-box;height:100%}.smart-tabs__nav--card .smart-tab{align-items:center;color:var(--tabs-card-text-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;justify-content:center}.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-box{background-color:initial;height:100%;pointer-events:none;position:relative;width:100%}.smart-tabs__card{background-color:var(--tabs-card-active-background-color,var(--app-B3,#fff));border-radius:var(--tabs-card-active-border-radius,6px);height:100%;left:var(--tabs-card-active-left,0);opacity:0;position:absolute;top:var(--tabs-card-active-top,0);z-index:0}.smart-tabs__track{height:100%;position:relative;width:100%;z-index:1}.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--line_subtitle{height:var(--tabs-sub-line-height,64px)}.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;position:relative;text-align:center;transition:font-size .5s,color .5s,opacity .5s,text-shadow .5s}.smart-tab-content{margin:0 auto;max-width:100%;position:relative;width:-webkit-fit-content;width:fit-content}.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{right:0;transform:translateX(100%)}

package/dist/tabs/index.d.ts

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