project init

components/tab-bar/README.en-US.md

@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### TabBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bordered | Boolean | true | \- | N
+external-classes | Array | - | `['t-class']` | N
+fixed | Boolean | true | \- | N
+safe-area-inset-bottom | Boolean | true | \- | N
+split | Boolean | true | \- | N
+value | String / Number / Array | undefined | Typescript：`string | number | Array<string | number>` | N
+default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`string | number | Array<string | number>` | N
+
+### TabBar Events
+
+name | params | description
+-- | -- | --
+change | `(value: string | number)` | \-
+
+### TabBarItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+icon | String / Slot | - | \- | N
+sub-tab-bar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+value | String / Number | - | \- | N

components/tab-bar/README.md

@@ -0,0 +1,85 @@
+---
+title: TabBar 标签栏
+description: 用于在不同功能模块之间进行快速切换，位于页面底部。
+spline: navigation
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-93%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-tab-bar": "/components/tab-bar/tab-bar",
+  "t-tab-bar-item": "/components/tab-bar/tab-bar-item"
+}
+```
+
+### 主题定制
+
+CSS 变量名|说明
+--|--
+--td-tab-bar-border-color|顶部边框颜色
+--td-tab-bar-bg-color|背景色
+--td-tab-bar-hover-color|hover 时背景色
+--td-tab-bar-item-color | 字体颜色
+--td-tab-bar-item-active-color | 激活时字体颜色
+## 代码演示
+
+
+
+### 基础标签栏
+
+文本标签栏，分为单层双层，可以自定义标签栏内容
+
+{{ base }}
+
+### 带徽章标签栏
+
+{{ badge }}
+
+### 纯文本标签栏
+
+{{ text-only }}
+
+### 纯图标标签栏
+
+{{ icon-only }}
+
+### 双层级纯文本标签栏
+
+{{ sub }}
+
+### 自定义主题
+
+{{ custom }}
+
+## API
+### TabBar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+bordered | Boolean | true | 是否显示外边框 | N
+external-classes | Array | - | 组件类名，用于设置外层元素类名。`['t-class']` | N
+fixed | Boolean | true | 是否固定在底部 | N
+safe-area-inset-bottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N
+split | Boolean | true | 是否需要分割线 | N
+value | String / Number / Array | undefined | 当前选中标签的索引。TS 类型：`string | number | Array<string | number>` | N
+default-value | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string | number | Array<string | number>` | N
+
+### TabBar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: string | number)` | 选中标签切换时触发
+
+### TabBarItem Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+badge-props | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+icon | String / Slot | - | 图标名称 | N
+sub-tab-bar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+value | String / Number | - | 标识符 | N

components/tab-bar/props.d.ts

@@ -0,0 +1,3 @@
+import { TdTabBarProps } from './type';
+declare const props: TdTabBarProps;
+export default props;

components/tab-bar/props.js

@@ -0,0 +1,30 @@
+const props = {
+    bordered: {
+        type: Boolean,
+        value: true,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    fixed: {
+        type: Boolean,
+        value: true,
+    },
+    safeAreaInsetBottom: {
+        type: Boolean,
+        value: true,
+    },
+    split: {
+        type: Boolean,
+        value: true,
+    },
+    value: {
+        type: null,
+        value: null,
+    },
+    defaultValue: {
+        type: null,
+        value: null,
+    },
+};
+export default props;

components/tab-bar/tab-bar-item-props.d.ts

@@ -0,0 +1,3 @@
+import { TdTabBarItemProps } from './type';
+declare const props: TdTabBarItemProps;
+export default props;

components/tab-bar/tab-bar-item-props.js

@@ -0,0 +1,16 @@
+const props = {
+    badgeProps: {
+        type: Object,
+    },
+    icon: {
+        type: String,
+    },
+    subTabBar: {
+        type: Array,
+    },
+    value: {
+        type: null,
+        value: null,
+    },
+};
+export default props;

components/tab-bar/tab-bar-item.d.ts

@@ -0,0 +1,28 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class TabbarItem extends SuperComponent {
+    parent: any;
+    relations: RelationsOptions;
+    options: {
+        multipleSlots: boolean;
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        isSpread: boolean;
+        isChecked: boolean;
+        hasChildren: boolean;
+        currentName: string;
+        split: boolean;
+    };
+    properties: import("./type").TdTabBarItemProps;
+    observers: {
+        subTabBar(value: Record<string, any>[]): void;
+    };
+    methods: {
+        showSpread(): void;
+        toggle(): void;
+        selectChild(event: any): void;
+        checkActive(value: any): void;
+        closeSpread(): void;
+    };
+}

components/tab-bar/tab-bar-item.js

@@ -0,0 +1,92 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './tab-bar-item-props';
+const { prefix } = config;
+const classPrefix = `${prefix}-tab-bar-item`;
+let TabbarItem = class TabbarItem extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.parent = null;
+        this.relations = {
+            './tab-bar': {
+                type: 'ancestor',
+                linked(parent) {
+                    this.parent = parent;
+                    this.setData({
+                        split: parent.data.split,
+                        currentName: this.properties.value ? this.properties.value : parent.initName(),
+                    });
+                    parent.updateChildren();
+                },
+            },
+        };
+        this.options = {
+            multipleSlots: true,
+        };
+        this.data = {
+            prefix,
+            classPrefix,
+            isSpread: false,
+            isChecked: false,
+            hasChildren: false,
+            currentName: '',
+            split: true,
+        };
+        this.properties = props;
+        this.observers = {
+            subTabBar(value) {
+                this.setData({
+                    hasChildren: value.length > 0,
+                });
+            },
+        };
+        this.methods = {
+            showSpread() {
+                this.setData({
+                    isSpread: true,
+                });
+            },
+            toggle() {
+                const { parent } = this;
+                const { currentName, hasChildren, isSpread } = this.data;
+                if (hasChildren) {
+                    this.setData({
+                        isSpread: !isSpread,
+                    });
+                }
+                parent.updateValue(currentName);
+                parent.changeOtherSpread(currentName);
+            },
+            selectChild(event) {
+                const { parent } = this;
+                const { value } = event.target.dataset;
+                parent.updateValue(value);
+                this.setData({
+                    isSpread: false,
+                });
+            },
+            checkActive(value) {
+                const { currentName, subTabBar } = this.data;
+                const isChecked = (subTabBar === null || subTabBar === void 0 ? void 0 : subTabBar.some((item) => item.value === value)) || currentName === value;
+                this.setData({
+                    isChecked,
+                });
+            },
+            closeSpread() {
+                this.setData({
+                    isSpread: false,
+                });
+            },
+        };
+    }
+};
+TabbarItem = __decorate([
+    wxComponent()
+], TabbarItem);
+export default TabbarItem;

components/tab-bar/tab-bar-item.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-badge": "../badge/badge"
+  }
+}

components/tab-bar/tab-bar-item.wxml

@@ -0,0 +1,44 @@
+<view
+  class="{{classPrefix}} {{icon ? '' : prefix + '-is-bordered'}} {{split ? prefix + '-is-split' : ''}}"
+  hover-class="{{classPrefix}}--active"
+  hover-stay-time="{{200}}"
+>
+  <view class="{{classPrefix}}__content {{isChecked ? prefix + '-is-checked' : ''}}" bindtap="toggle">
+    <view class="{{classPrefix}}__icon" wx:if="{{icon}}">
+      <t-badge
+        wx:if="{{badgeProps.dot || badgeProps.count}}"
+        count="{{badgeProps.count}}"
+        max-count="{{badgeProps.maxCount || 99}}"
+        dot="{{badgeProps.dot}}"
+        content="{{badgeProps.content}}"
+        size="{{badgeProps.size}}"
+        visible="{{badgeProps.visible}}"
+        offset="{{badgeProps.offset || [0,0]}}"
+        t-class-count="{{prefix + '-badge-class'}}"
+      >
+        <t-icon name="{{icon}}" size="24px" />
+      </t-badge>
+      <t-icon wx:else name="{{icon}}" size="24px" />
+      <slot name="icon" />
+    </view>
+    <view class="{{classPrefix}}__text {{icon ? prefix + '-size-s' : ''}}">
+      <view class="{{classPrefix}}__icon-menu" wx:if="{{hasChildren}}" />
+      <slot />
+    </view>
+  </view>
+
+  <view class="{{classPrefix}}__spread" wx:if="{{hasChildren && isSpread}}">
+    <view
+      class="{{classPrefix}}__spread-item"
+      hover-class="{{classPrefix}}__spread-item--active"
+      hover-stay-time="{{200}}"
+      wx:for="{{subTabBar}}"
+      wx:for-item="child"
+      wx:for-index="index"
+      wx:key="index"
+      bind:tap="selectChild"
+      data-value="{{child.value || index}}"
+      >{{ child.label }}
+    </view>
+  </view>
+</view>

components/tab-bar/tab-bar-item.wxss

@@ -0,0 +1,158 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+page {
+  --td-tab-bar-bg-color: #fff;
+  --td-tab-bar-hover-color: rgba(0, 0, 0, 0.05);
+  --td-tab-bar-item-color: rgba(0, 0, 0, 0.6);
+  --td-tab-bar-item-active-color: #0052d9;
+}
+:host {
+  flex: 1;
+}
+.t-tab-bar-item {
+  height: 48px;
+  box-sizing: border-box;
+  user-select: none;
+  position: relative;
+  background-color: var(--td-tab-bar-bg-color, #fff);
+}
+.t-tab-bar-item--active {
+  background-color: var(--td-tab-bar-hover-color, rgba(0, 0, 0, 0.05));
+}
+.t-tab-bar-item.t-is-split:before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid #e6e6e6;
+  transform: scaleX(0.5);
+  top: 8px;
+  bottom: 8px;
+}
+.t-tab-bar-item__content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--td-tab-bar-item-color, rgba(0, 0, 0, 0.6));
+}
+.t-tab-bar-item__content.t-is-checked {
+  color: var(--td-tab-bar-item-active-color, #0052d9);
+}
+.t-tab-bar-item__content.t-is-checked .t-tab-bar-item__icon-menu {
+  background-color: var(--td-tab-bar-item-active-color, #0052d9);
+}
+.t-tab-bar-item .t-badge-class {
+  transform: translate(50%, -10%) !important;
+}
+.t-tab-bar-item__text {
+  display: flex;
+  align-items: center;
+}
+.t-tab-bar-item__text.t-size-s {
+  font-size: 10px;
+  line-height: 18px;
+}
+.t-tab-bar-item__icon {
+  height: 24px;
+}
+.t-tab-bar-item__icon-menu {
+  width: 8px;
+  height: 1px;
+  background-color: #666;
+  position: relative;
+  margin-right: 4px;
+}
+.t-tab-bar-item__icon-menu::before,
+.t-tab-bar-item__icon-menu::after {
+  display: block;
+  content: '';
+  position: absolute;
+  left: 0;
+  background-color: inherit;
+  width: inherit;
+  height: inherit;
+}
+.t-tab-bar-item__icon-menu::before {
+  top: -4px;
+}
+.t-tab-bar-item__icon-menu::after {
+  bottom: -4px;
+}
+.t-tab-bar-item__spread {
+  position: absolute;
+  top: 0;
+  left: 7%;
+  width: 86%;
+  background-color: #fff;
+  transform: translate3d(0, calc(-100% - 16px), 0);
+  z-index: 1;
+}
+.t-tab-bar-item__spread::before {
+  display: block;
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border: 8px solid transparent;
+  border-top: 8px solid #fff;
+  transform: translate3d(-50%, 16px, 0);
+}
+.t-tab-bar-item__spread-item {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-tab-bar-item__spread-item--active {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.t-tab-bar-item__spread-item + .t-tab-bar-item__spread-item {
+  position: relative;
+}
+.t-tab-bar-item__spread-item + .t-tab-bar-item__spread-item:before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: 0;
+  border-top: 1px solid #e6e6e6;
+  transform: scaleY(0.5);
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: #e6e6e6;
+  width: 80%;
+}

components/tab-bar/tab-bar.d.ts

@@ -0,0 +1,26 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Tabbar extends SuperComponent {
+    relations: RelationsOptions;
+    externalClasses: string[];
+    backupValue: number;
+    data: {
+        prefix: string;
+        classPrefix: string;
+    };
+    properties: import("./type").TdTabBarProps;
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    observers: {
+        value(): void;
+    };
+    ready(): void;
+    methods: {
+        showChildren(): void;
+        updateChildren(): void;
+        updateValue(value: any): void;
+        changeOtherSpread(value: any): void;
+        initName(): any;
+    };
+}

components/tab-bar/tab-bar.js

@@ -0,0 +1,84 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const classPrefix = `${prefix}-tab-bar`;
+let Tabbar = class Tabbar extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.relations = {
+            './tab-bar-item': {
+                type: 'descendant',
+            },
+        };
+        this.externalClasses = [`${prefix}-class`];
+        this.backupValue = -1;
+        this.data = {
+            prefix,
+            classPrefix,
+        };
+        this.properties = props;
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.observers = {
+            value() {
+                this.updateChildren();
+            },
+        };
+        this.methods = {
+            showChildren() {
+                const items = this.getRelationNodes('./tab-bar-item');
+                const len = items.length;
+                const { value } = this.data;
+                if (len > 0) {
+                    items.forEach((child) => {
+                        if (child.properties.value === value) {
+                            child.showSpread();
+                        }
+                    });
+                }
+            },
+            updateChildren() {
+                const items = this.getRelationNodes('./tab-bar-item');
+                const len = items.length;
+                const { value } = this.data;
+                if (len > 0) {
+                    items.forEach((child) => {
+                        child.checkActive(value);
+                    });
+                }
+            },
+            updateValue(value) {
+                this._trigger('change', { value });
+            },
+            changeOtherSpread(value) {
+                const items = this.getRelationNodes('./tab-bar-item');
+                items.forEach((child) => {
+                    if (child.properties.value !== value) {
+                        child.closeSpread();
+                    }
+                });
+            },
+            initName() {
+                return (this.backupValue += 1);
+            },
+        };
+    }
+    ready() {
+        this.showChildren();
+    }
+};
+Tabbar = __decorate([
+    wxComponent()
+], Tabbar);
+export default Tabbar;

components/tab-bar/tab-bar.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tab-bar-item": "./tab-bar-item"
+  }
+}

components/tab-bar/tab-bar.wxml

@@ -0,0 +1,5 @@
+<view
+  class="{{classPrefix}} {{bordered ? classPrefix + '--border' : ''}} {{fixed ? classPrefix + '--fixed' : ''}} {{safeAreaInsetBottom ? classPrefix + '--safe' : ''}} {{prefix}}-class"
+>
+  <slot />
+</view>

components/tab-bar/tab-bar.wxss

@@ -0,0 +1,60 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+page {
+  --td-tab-bar-border-color: #e6e6e6;
+}
+.t-tab-bar {
+  width: 100%;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  position: relative;
+  font-size: 16px;
+  background-color: var(--td-tab-bar-bg-color, #fff);
+}
+.t-tab-bar--border::before {
+  z-index: 1;
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  top: 0;
+  border-top: 1px solid var(--td-tab-bar-border-color);
+  transform: scaleY(0.5);
+}
+.t-tab-bar--fixed {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+}
+.t-tab-bar--safe {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}

components/tab-bar/type.d.ts

@@ -0,0 +1,53 @@
+import { BadgeProps } from '../badge/index';
+export interface TdTabBarProps {
+    bordered?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class'];
+    };
+    fixed?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    safeAreaInsetBottom?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    split?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    value?: {
+        type: null;
+        value?: string | number | Array<string | number>;
+    };
+    defaultValue?: {
+        type: null;
+        value?: string | number | Array<string | number>;
+    };
+}
+export interface TdTabBarItemProps {
+    badgeProps?: {
+        type: ObjectConstructor;
+        value?: BadgeProps;
+    };
+    icon?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    subTabBar?: {
+        type: ArrayConstructor;
+        value?: SubTabBarItem[];
+    };
+    value?: {
+        type: null;
+        value?: string | number;
+    };
+}
+export interface SubTabBarItem {
+    value: string;
+    label: string;
+}

components/tab-bar/type.js

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