refactor(tabBar): new tabBar (#633)

* refactor(tabBar): update api

* refactor(tabBar): finish (#633)

* fix(tabBar): fix ts type error (#633)

* fix(tabBar): update snap (#633)

* fix(tabBar): update font-size and snap (#633)

src/tab-bar/__test__/demo.test.jsx

@@ -5,16 +5,20 @@
 import { mount } from '@vue/test-utils';
 import badgePropsVue from '@/tab-bar/demos/badge-props.vue';
 import baseVue from '@/tab-bar/demos/base.vue';
+import customVue from '@/tab-bar/demos/custom.vue';
 import mobileVue from '@/tab-bar/demos/mobile.vue';
 import pureIconVue from '@/tab-bar/demos/pure-icon.vue';
+import roundVue from '@/tab-bar/demos/round.vue';
 import textSpreadVue from '@/tab-bar/demos/text-spread.vue';
 import textVue from '@/tab-bar/demos/text.vue';
 
 const mapper = {
   badgePropsVue,
   baseVue,
+  customVue,
   mobileVue,
   pureIconVue,
+  roundVue,
   textSpreadVue,
   textVue,
 };

src/tab-bar/__test__/index.test.jsx

@@ -79,7 +79,12 @@ describe('TabBar', () => {
       });
 
       expect(wrapper.findAll('.t-tab-bar-item')).toHaveLength(list.length);
-      expect(wrapper.find('[aria-selected="true"]').attributes('text')).toEqual('标签二');
+      expect(
+        wrapper
+          .findAllComponents(TabBarItem)
+          .find((item) => item.vm.isChecked)
+          .text(),
+      ).toEqual('标签二');
     });
 
     // it('snapshot', () => {

src/tab-bar/demos/badge-props.vue

@@ -1,33 +1,29 @@
 <template>
-  <t-tab-bar v-model="value" @change="change">
-    <t-tab-bar-item v-for="(item, i) in list" :key="item.name || i" :value="item.name" :badge-props="item.badgeProps">
+  <t-tab-bar v-model="value" :split="false">
+    <t-tab-bar-item
+      v-for="item in list"
+      :key="item.name"
+      :value="item.name"
+      :badge-props="item.badgeProps"
+      :aria-label="item.ariaLabel"
+    >
       {{ item.text }}
       <template #icon>
-        <icon :name="item.icon" />
+        <t-icon :name="item.icon" />
       </template>
     </t-tab-bar-item>
   </t-tab-bar>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { Icon } from 'tdesign-icons-vue-next';
+import { ref } from 'vue';
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
 
 const value = ref('label_1');
 const list = ref([
-  { name: 'label_1', text: '文字', icon: 'app', badgeProps: { count: 16 } },
-  { name: 'label_2', text: '文字', icon: 'app', badgeProps: { dot: true } },
-  { name: 'label_3', text: '文字', icon: 'app', badgeProps: { count: 'New' } },
-  { name: 'label_4', text: '文字', icon: 'app', badgeProps: { count: '···' } },
+  { name: 'label_1', text: '首页', icon: 'home', badgeProps: { count: 16 }, ariaLabel: '首页，有16条消息' },
+  { name: 'label_2', text: '软件', icon: 'app', badgeProps: { dot: true }, ariaLabel: '软件，有新的消息' },
+  { name: 'label_3', text: '聊天', icon: 'chat', badgeProps: { count: 'New' }, ariaLabel: '聊天，New' },
+  { name: 'label_4', text: '我的', icon: 'user', badgeProps: { count: '···' }, ariaLabel: '我的，有很多消息' },
 ]);
-
-watch(
-  () => value.value,
-  (newValue) => {
-    console.log('当前值改变为：', newValue);
-  },
-);
-const change = (changeValue: number | string) => {
-  console.log('TabBar 值改变为：', changeValue);
-};
 </script>

src/tab-bar/demos/base.vue

@@ -1,33 +1,23 @@
 <template>
-  <t-tab-bar v-model="value" @change="change">
-    <t-tab-bar-item v-for="(item, i) in list" :key="item.name || i" :value="item.name">
-      {{ item.text }}
+  <t-tab-bar v-model="value" theme="tag" :split="false">
+    <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value">
+      {{ item.label }}
       <template #icon>
-        <icon :name="item.icon" />
+        <t-icon :name="item.icon" />
       </template>
     </t-tab-bar-item>
   </t-tab-bar>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { Icon } from 'tdesign-icons-vue-next';
+import { ref } from 'vue';
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
 
 const value = ref('label_1');
 const list = ref([
-  { name: 'label_1', text: '文字', icon: 'app' },
-  { name: 'label_2', text: '文字', icon: 'app' },
-  { name: 'label_3', text: '文字', icon: 'app' },
-  { name: 'label_4', text: '文字', icon: 'app' },
+  { value: 'label_1', label: '首页', icon: 'home' },
+  { value: 'label_2', label: '应用', icon: 'app' },
+  { value: 'label_3', label: '聊天', icon: 'chat' },
+  { value: 'label_4', label: '我的', icon: 'user' },
 ]);
-
-watch(
-  () => value.value,
-  (newValue) => {
-    console.log('当前值改变为：', newValue);
-  },
-);
-const change = (changeValue: number | string) => {
-  console.log('TabBar 值改变为：', changeValue);
-};
 </script>

src/tab-bar/demos/custom.vue

@@ -0,0 +1,32 @@
+<template>
+  <t-tab-bar v-model="value" class="wrapper">
+    <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value">
+      <template #icon>
+        <t-icon :name="item.icon" />
+      </template>
+    </t-tab-bar-item>
+  </t-tab-bar>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+
+const value = ref('label_1');
+const list = ref([
+  { value: 'label_1', label: '首页', icon: 'home' },
+  { value: 'label_2', label: '应用', icon: 'app' },
+  { value: 'label_3', label: '聊天', icon: 'chat' },
+  { value: 'label_4', label: '我的', icon: 'user' },
+]);
+</script>
+
+<style lang="less" scoped>
+.wrapper {
+  --td-tab-bar-border-color: #e7e7e7;
+  --td-tab-bar-bg-color: #eee;
+  --td-tab-bar-hover-color: #ddd;
+  --td-tab-bar-item-color: #bbb;
+  --td-tab-bar-item-active-color: #333;
+}
+</style>

src/tab-bar/demos/mobile.vue

@@ -1,31 +1,39 @@
 <template>
   <div class="tdesign-mobile-demo">
     <h1 class="title">TabBar 标签栏</h1>
-    <p class="summary">移动端的主导航，用做功能模块之间的切换</p>
-    <tdesign-demo-block title="01 类型" summary="基础标签栏">
-      <baseDemo />
+    <p class="summary">用于在不同功能模块之间进行快速切换，位于页面底部。</p>
+    <tdesign-demo-block title="01 组件类型" summary="纯文本标签栏">
+      <TextDemo />
     </tdesign-demo-block>
-    <tdesign-demo-block summary="带徽章标签栏">
-      <badgePropsDemo />
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="纯文本标签栏">
-      <textDemo />
+    <tdesign-demo-block summary="图标加文字标签栏">
+      <BaseDemo />
     </tdesign-demo-block>
     <tdesign-demo-block summary="纯图标标签栏">
-      <pureIconDemo />
+      <PureIconDemo />
     </tdesign-demo-block>
     <tdesign-demo-block summary="双层级纯文本标签栏">
-      <textSpreadDemo />
+      <TextSpreadDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block title="01 组件样式" summary="弱选中标签栏">
+      <BadgePropsDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block summary="悬浮胶囊标签栏">
+      <RoundPropsDemo />
+    </tdesign-demo-block>
+    <tdesign-demo-block title="03 自定义" summary="自定义样式">
+      <CustomPropsDemo />
     </tdesign-demo-block>
   </div>
 </template>
 
 <script setup lang="ts">
-import baseDemo from './base.vue';
-import badgePropsDemo from './badge-props.vue';
-import textDemo from './text.vue';
-import pureIconDemo from './pure-icon.vue';
-import textSpreadDemo from './text-spread.vue';
+import TextDemo from './text.vue';
+import BaseDemo from './base.vue';
+import PureIconDemo from './pure-icon.vue';
+import TextSpreadDemo from './text-spread.vue';
+import BadgePropsDemo from './badge-props.vue';
+import RoundPropsDemo from './round.vue';
+import CustomPropsDemo from './custom.vue';
 </script>
 
 <style lang="less" scoped>
@@ -37,4 +45,7 @@ import textSpreadDemo from './text-spread.vue';
     margin-top: 16px;
   }
 }
+.t-icon {
+  vertical-align: top;
+}
 </style>

src/tab-bar/demos/pure-icon.vue

@@ -1,27 +1,22 @@
 <template>
-  <t-tab-bar v-model="value" @change="change">
-    <t-tab-bar-item v-for="(item, i) in list" :key="item.name || i" :value="item.name">
+  <t-tab-bar v-model="value" theme="tag" :split="false">
+    <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value">
       <template #icon>
-        <app-icon />
+        <t-icon :name="item.icon" />
       </template>
     </t-tab-bar-item>
   </t-tab-bar>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { AppIcon } from 'tdesign-icons-vue-next';
+import { ref } from 'vue';
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
 
 const value = ref('label_1');
-const list = ref([{ name: 'label_1' }, { name: 'label_2' }, { name: 'label_3' }, { name: 'label_4' }]);
-
-watch(
-  () => value.value,
-  (newValue) => {
-    console.log('当前值改变为：', newValue);
-  },
-);
-const change = (changeValue: number | string) => {
-  console.log('TabBar 值改变为：', changeValue);
-};
+const list = ref([
+  { value: 'label_1', icon: 'home', ariaLabel: '首页' },
+  { value: 'label_2', icon: 'app', ariaLabel: '软件' },
+  { value: 'label_3', icon: 'chat', ariaLabel: '聊天' },
+  { value: 'label_4', icon: 'user', ariaLabel: '我的' },
+]);
 </script>

src/tab-bar/demos/round.vue

@@ -0,0 +1,22 @@
+<template>
+  <t-tab-bar v-model="value" shape="round" theme="tag" :split="false">
+    <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value">
+      <template #icon>
+        <t-icon :name="item.icon" />
+      </template>
+    </t-tab-bar-item>
+  </t-tab-bar>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon as TIcon } from 'tdesign-icons-vue-next';
+
+const value = ref('label_1');
+const list = ref([
+  { value: 'label_1', label: '首页', icon: 'home' },
+  { value: 'label_2', label: '应用', icon: 'app' },
+  { value: 'label_3', label: '聊天', icon: 'chat' },
+  { value: 'label_4', label: '我的', icon: 'user' },
+]);
+</script>

src/tab-bar/demos/text-spread.vue

@@ -1,43 +1,46 @@
 <template>
-  <t-tab-bar default-value="label_3">
-    <t-tab-bar-item
-      v-for="(item, index) in list"
-      :key="item.name || index"
-      :value="item.name"
-      :sub-tab-bar="item.children"
-    >
-      {{ item.text }}
+  <t-tab-bar default-value="home" theme="tag" :split="false" @change="change">
+    <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value" :sub-tab-bar="item.children">
+      {{ item.label }}
     </t-tab-bar-item>
   </t-tab-bar>
 </template>
 
 <script setup lang="ts">
 const list = [
   {
-    name: 'label_1',
-    text: '标签栏一',
+    value: 'home',
+    label: '首页',
+    icon: 'home',
+    children: [],
   },
   {
-    name: 'label_2',
-    text: '标签栏二',
+    value: 'app',
+    label: '应用',
+    icon: 'app',
+    children: [],
   },
   {
-    name: 'label_3',
-    text: '此处展开',
+    value: 'user',
+    label: '我的',
     children: [
       {
-        value: 'spread_3',
-        label: '展开项三',
+        value: 'info',
+        label: '基本信息',
       },
       {
-        value: 'spread_2',
-        label: '展开项二',
+        value: 'home-page',
+        label: '个人主页',
       },
       {
-        value: 'spread_1',
-        label: '展开项一',
+        value: 'setting',
+        label: '设置',
       },
     ],
   },
 ];
+
+const change = (changeValue: number | string) => {
+  console.log('TabBar 值改变为：', changeValue);
+};
 </script>

src/tab-bar/demos/text.vue

@@ -1,20 +1,20 @@
 <template>
-  <t-tab-bar v-model="value" @change="change">
-    <t-tab-bar-item v-for="(item, i) in list" :key="item.name || i" :value="item.name">
-      {{ item.text }}
+  <t-tab-bar v-model="value" theme="tag" :split="false" @change="change">
+    <t-tab-bar-item v-for="item in list" :key="item.value" :value="item.value">
+      {{ item.label }}
     </t-tab-bar-item>
   </t-tab-bar>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
-const value = ref('label_1');
+const value = ref('home');
 const list = ref([
-  { name: 'label_1', text: '标签栏一' },
-  { name: 'label_2', text: '标签栏二' },
-  { name: 'label_3', text: '标签栏三' },
-  { name: 'label_4', text: '标签栏四' },
+  { value: 'home', label: '首页' },
+  { value: 'app', label: '应用' },
+  { value: 'chat', label: '聊天' },
+  { value: 'user', label: '我的' },
 ]);
 
 watch(