refactor(tabbar): move to script setup (#2989)

jd-opensource · Mar 25, 2024 · ccc7b26 · ccc7b26
1 parent 0671a3b
commit ccc7b26
Show file tree

Hide file tree

Showing 33 changed files with 599 additions and 487 deletions.
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/basic.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/basic.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar v-model="active" @tab-switch="tabSwitch">
     <nut-tabbar-item tab-title="Home">
       <template #icon>
         <Home></Home>
@@ -29,7 +29,11 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
+const active = ref(0);
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };

diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/check.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/check.vue
@@ -7,34 +7,36 @@
 <script lang="ts" setup>
 import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
 const active = ref(2);
 const List = [
   {
-    title: 'label',
+    title: 'Home',
     icon: h(Home),
     name: 'home'
   },
   {
-    title: 'label',
+    title: 'Category',
     icon: h(Category),
     name: 'category'
   },
   {
-    title: 'label',
+    title: 'Find',
     icon: h(Find),
     name: 'find'
   },
   {
-    title: 'label',
+    title: 'Cart',
     icon: h(Cart),
     name: 'cart'
   },
   {
-    title: 'label',
+    title: 'My',
     icon: h(My),
     name: 'my'
   }
 ];
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };

diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/color.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/color.vue
@@ -1,37 +1,39 @@
 <template>
-  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
+  <nut-tabbar v-model="active" unactive-color="#7d7e80" active-color="#1989fa">
     <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon">
     </nut-tabbar-item>
   </nut-tabbar>
 </template>
 <script setup>
-import { h } from 'vue';
+import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
 const List = [
   {
-    title: 'label',
+    title: 'Home',
     icon: h(Home),
     name: 'home'
   },
   {
-    title: 'label',
+    title: 'Category',
     icon: h(Category),
     name: 'category'
   },
   {
-    title: 'label',
+    title: 'Find',
     icon: h(Find),
     name: 'find'
   },
   {
-    title: 'label',
+    title: 'Cart',
     icon: h(Cart),
     name: 'cart'
   },
   {
-    title: 'label',
+    title: 'My',
     icon: h(My),
     name: 'my'
   }
 ];
+const active = ref(0);
 </script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/fixed.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/fixed.vue
@@ -1,12 +1,13 @@
 <template>
-  <nut-tabbar bottom safe-area-inset-bottom placeholder>
+  <nut-tabbar v-model="active" bottom safe-area-inset-bottom placeholder>
     <nut-tabbar-item v-for="(item, index) in List" :key="index" :tab-title="item.title" :icon="item.icon">
     </nut-tabbar-item>
   </nut-tabbar>
 </template>
 <script setup>
-import { h } from 'vue';
+import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
 const List = [
   {
     title: 'Home',
@@ -29,4 +30,5 @@ const List = [
     icon: h(My)
   }
 ];
+const active = ref(0);
 </script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/icon.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar v-model="active" @tab-switch="tabSwitch">
     <nut-tabbar-item tab-title="Home">
       <template #icon="props">
         <img :src="props.active ? icon.active : icon.unactive" alt="" />
@@ -18,10 +18,14 @@
   </nut-tabbar>
 </template>
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 const icon = {
   active: 'https://img11.360buyimg.com/imagetools/jfs/t1/70423/4/20553/3652/62e74629E23ba550e/aeeed0e3b9f43ae6.png',
   unactive: 'https://img13.360buyimg.com/imagetools/jfs/t1/23319/19/18329/3084/62e7c346E957c54ef/6c3e8a49e52b76f2.png'
 };
+const active = ref(0);
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };

diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/name.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/name.vue
@@ -8,34 +8,36 @@
 <script lang="ts" setup>
 import { h, ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue-taro';
+
 const activeName = ref('category');
 const List = [
   {
-    title: 'label',
+    title: 'Home',
     icon: h(Home),
     name: 'home'
   },
   {
-    title: 'label',
+    title: 'Category',
     icon: h(Category),
     name: 'category'
   },
   {
-    title: 'label',
+    title: 'Find',
     icon: h(Find),
     name: 'find'
   },
   {
-    title: 'label',
+    title: 'Cart',
     icon: Cart,
     name: 'cart'
   },
   {
-    title: 'label',
+    title: 'My',
     icon: h(My),
     name: 'my'
   }
 ];
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };

diff --git a/packages/nutui-taro-demo/src/nav/pages/tabbar/quantity.vue b/packages/nutui-taro-demo/src/nav/pages/tabbar/quantity.vue
@@ -1,22 +1,25 @@
 <template>
-  <nut-tabbar unactive-color="#7d7e80" active-color="#1989fa">
-    <nut-tabbar-item tab-title="label" :value="11">
+  <nut-tabbar v-model="active" unactive-color="#7d7e80" active-color="#1989fa">
+    <nut-tabbar-item tab-title="Home" :value="11">
       <template #icon>
         <Home></Home>
       </template>
     </nut-tabbar-item>
-    <nut-tabbar-item tab-title="label" :dot="true">
+    <nut-tabbar-item tab-title="Category" :dot="true">
       <template #icon>
-        <Home></Home>
+        <Category></Category>
       </template>
     </nut-tabbar-item>
-    <nut-tabbar-item tab-title="label" :value="110">
+    <nut-tabbar-item tab-title="Find" :value="110">
       <template #icon>
-        <Home></Home>
+        <Find></Find>
       </template>
     </nut-tabbar-item>
   </nut-tabbar>
 </template>
 <script setup>
-import { Home } from '@nutui/icons-vue-taro';
+import { ref } from 'vue';
+import { Home, Category, Find } from '@nutui/icons-vue-taro';
+
+const active = ref(0);
 </script>
diff --git a/src/config.json b/src/config.json
@@ -239,13 +239,15 @@
           "version": "3.0.0",
           "name": "Tabbar",
           "cName": "标签栏",
+          "setup": true,
           "desc": "标签栏",
           "author": "Drjingfubo"
         },
         {
           "version": "3.0.0",
           "name": "TabbarItem",
           "cName": "标签栏子组件",
+          "setup": true,
           "show": false,
           "desc": "标签栏子组件",
           "author": "Drjingfubo"

diff --git a/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap b/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap
@@ -6,6 +6,12 @@ exports[`should render fixed element when using bottom prop 1`] = `
 </div>"
 `;
 
+exports[`should render placeholder when using placeholder and bottom prop 1`] = `
+"<div class="nut-tabbar__placeholder" style="height: 40px;">
+  <view class="nut-tabbar nut-tabbar-bottom"></view>
+</div>"
+`;
+
 exports[`should render tabbar when default 1`] = `
 "<div class="" style="">
   <view class="nut-tabbar">

diff --git a/src/packages/__VUE/tabbar/__tests__/index.spec.tsx b/src/packages/__VUE/tabbar/__tests__/index.spec.tsx
@@ -1,12 +1,15 @@
 import { mount } from '@vue/test-utils';
 import { Tabbar, TabbarItem } from '@nutui/nutui';
-import { nextTick, h } from 'vue';
+import { nextTick, h, ref } from 'vue';
 import { Home, Category, Find } from '@nutui/icons-vue';
+import { mockGetBoundingClientRect, sleep } from '@/packages/utils/unit';
+import { useRouter } from '@/packages/utils/useRoute';
 
-// 模拟setup导入资源
-vi.mock('vue-router', () => ({
-  useRouter: vi.fn()
-}));
+vi.mock('@/packages/utils/useRoute');
+
+(useRouter as any).mockReturnValue({
+  push: vi.fn()
+});
 
 test('should render tabbar when default', async () => {
   const wrapper = mount(() => {
@@ -85,14 +88,17 @@ test('should render fixed element when using bottom prop', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 test('should match active tabbar by clcik', async () => {
-  const wrapper = mount(() => {
-    return (
-      <Tabbar unactive-color="grey" active-color="blue">
-        <TabbarItem tab-title="首页" icon={h(Home)}></TabbarItem>
-        <TabbarItem tab-title="分类" icon={h(Category)}></TabbarItem>
-        <TabbarItem tab-title="发现" icon={h(Find)}></TabbarItem>
-      </Tabbar>
-    );
+  const wrapper = mount({
+    setup() {
+      const active = ref(0);
+      return () => (
+        <Tabbar unactive-color="grey" active-color="blue" v-model={active.value}>
+          <TabbarItem tab-title="首页" icon={h(Home)}></TabbarItem>
+          <TabbarItem tab-title="分类" icon={h(Category)}></TabbarItem>
+          <TabbarItem tab-title="发现" icon={h(Find)}></TabbarItem>
+        </Tabbar>
+      );
+    }
   });
   const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
 
@@ -120,3 +126,64 @@ test('should show sure emitted when click', async () => {
   await nextTick();
   expect(tabSwitch).toBeCalled();
 });
+
+test('should render placeholder when using placeholder and bottom prop', async () => {
+  const wrapper = mount(Tabbar, {
+    props: {
+      bottom: true,
+      placeholder: true
+    }
+  });
+  mockGetBoundingClientRect({ height: 40 });
+  await sleep(500);
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should redirect when exist router and using to prop', async () => {
+  const wrapper = mount(() => {
+    return (
+      <Tabbar>
+        <TabbarItem tab-title="首页" icon={h(Home)} to="/home"></TabbarItem>
+        <TabbarItem tab-title="分类" icon={h(Category)} to="/category"></TabbarItem>
+        <TabbarItem tab-title="发现" icon={h(Find)} to="/category"></TabbarItem>
+      </Tabbar>
+    );
+  });
+  const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
+  await tabbarItem[1].trigger('click');
+  expect(useRouter().push).toHaveBeenCalledTimes(1);
+  expect(useRouter().push).toHaveBeenCalledWith('/category');
+});
+
+test('should call replace when no router exist and using to prop', async () => {
+  (useRouter as any).mockReturnValue(undefined);
+
+  const wrapper = mount(() => {
+    return (
+      <Tabbar>
+        <TabbarItem tab-title="首页" icon={h(Home)} to="/home"></TabbarItem>
+        <TabbarItem tab-title="分类" icon={h(Category)} to="/category"></TabbarItem>
+        <TabbarItem tab-title="发现" icon={h(Find)} to="/category"></TabbarItem>
+      </Tabbar>
+    );
+  });
+  location.replace = vi.fn();
+  const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
+  await tabbarItem[1].trigger('click');
+  expect(location.replace).toHaveBeenCalledWith('/category');
+});
+
+test('should set window.location.href when using href prop', async () => {
+  const wrapper = mount(() => {
+    return (
+      <Tabbar>
+        <TabbarItem tab-title="首页" icon={h(Home)} href="/home"></TabbarItem>
+        <TabbarItem tab-title="分类" icon={h(Category)} href="/category"></TabbarItem>
+        <TabbarItem tab-title="发现" icon={h(Find)} href="/find"></TabbarItem>
+      </Tabbar>
+    );
+  });
+  const tabbarItem: any = wrapper.findAll('.nut-tabbar-item');
+  await tabbarItem[1].trigger('click');
+  expect(window.location.href).toMatch('/category');
+});
diff --git a/src/packages/__VUE/tabbar/demo/basic.vue b/src/packages/__VUE/tabbar/demo/basic.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-tabbar @tab-switch="tabSwitch">
+  <nut-tabbar v-model="active" @tab-switch="tabSwitch">
     <nut-tabbar-item tab-title="Home">
       <template #icon>
         <Home></Home>
@@ -29,7 +29,11 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue';
 import { Home, Category, Find, Cart, My } from '@nutui/icons-vue';
+
+const active = ref(0);
+
 const tabSwitch = (item: Record<string, unknown>, index: number) => {
   console.log(item, index);
 };