@fiscozen/tab 0.1.3 → 0.1.4

package/coverage/.tmp/coverage-0.json

@@ -0,0 +1 @@
+{"result":[{"scriptId":"1197","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/src/__test__/FzTabs.test.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":9137,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":9137,"count":1}],"isBlockCoverage":true},{"functionName":"createWrapper","ranges":[{"startOffset":1180,"endOffset":1594,"count":6}],"isBlockCoverage":true},{"functionName":"default","ranges":[{"startOffset":1338,"endOffset":1530,"count":19}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":1637,"endOffset":3495,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":1680,"endOffset":1760,"count":6}],"isBlockCoverage":true},{"functionName":"globalThis.HTMLElement.scrollIntoView","ranges":[{"startOffset":1742,"endOffset":1755,"count":7}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":1816,"endOffset":2062,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":2116,"endOffset":2320,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":2387,"endOffset":2610,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":2669,"endOffset":2887,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":2931,"endOffset":3206,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":3271,"endOffset":3491,"count":1}],"isBlockCoverage":true}]},{"scriptId":"1234","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/src/index.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":1087,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":1087,"count":1}],"isBlockCoverage":true},{"functionName":"get","ranges":[{"startOffset":387,"endOffset":432,"count":6}],"isBlockCoverage":true},{"functionName":"get","ranges":[{"startOffset":635,"endOffset":680,"count":38}],"isBlockCoverage":true}]},{"scriptId":"1235","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/src/FzTabs.vue","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":16424,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":16424,"count":1}],"isBlockCoverage":true},{"functionName":"setup","ranges":[{"startOffset":2090,"endOffset":5464,"count":6}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":2487,"endOffset":3099,"count":6},{"startOffset":2529,"endOffset":2539,"count":0}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":2576,"endOffset":2685,"count":12},{"startOffset":2645,"endOffset":2676,"count":0}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":2691,"endOffset":3057,"count":12},{"startOffset":2785,"endOffset":3049,"count":0}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":2954,"endOffset":3009,"count":0}],"isBlockCoverage":false},{"functionName":"","ranges":[{"startOffset":3015,"endOffset":3037,"count":0}],"isBlockCoverage":false},{"functionName":"","ranges":[{"startOffset":3073,"endOffset":3091,"count":12}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":3159,"endOffset":3363,"count":12},{"startOffset":3206,"endOffset":3274,"count":6},{"startOffset":3274,"endOffset":3290,"count":0}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":3423,"endOffset":3483,"count":6},{"startOffset":3452,"endOffset":3464,"count":1},{"startOffset":3465,"endOffset":3477,"count":5}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":3550,"endOffset":3625,"count":6},{"startOffset":3594,"endOffset":3606,"count":5},{"startOffset":3607,"endOffset":3619,"count":1}],"isBlockCoverage":true},{"functionName":"onWheel","ranges":[{"startOffset":3632,"endOffset":3839,"count":0}],"isBlockCoverage":false},{"functionName":"","ranges":[{"startOffset":3876,"endOffset":4623,"count":6},{"startOffset":3919,"endOffset":4058,"count":0},{"startOffset":4157,"endOffset":4214,"count":0},{"startOffset":4441,"endOffset":4617,"count":0}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":4102,"endOffset":4130,"count":12}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":4324,"endOffset":4342,"count":12}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":4351,"endOffset":4404,"count":12}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":4665,"endOffset":4688,"count":13}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":4696,"endOffset":5078,"count":7}],"isBlockCoverage":true},{"functionName":"_sfc_render","ranges":[{"startOffset":5470,"endOffset":7574,"count":13},{"startOffset":6282,"endOffset":6516,"count":0}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":6739,"endOffset":7031,"count":26}],"isBlockCoverage":true}]},{"scriptId":"1236","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/src/components/FzTabPicker.vue","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":9407,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":9407,"count":1}],"isBlockCoverage":true},{"functionName":"setup","ranges":[{"startOffset":1996,"endOffset":3157,"count":0}],"isBlockCoverage":false},{"functionName":"_sfc_render","ranges":[{"startOffset":3273,"endOffset":5280,"count":0}],"isBlockCoverage":false}]},{"scriptId":"1237","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/composables/src/index.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":1445,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":1445,"count":1}],"isBlockCoverage":true},{"functionName":"get","ranges":[{"startOffset":470,"endOffset":515,"count":0}],"isBlockCoverage":false}]},{"scriptId":"1238","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/composables/src/FzFloating.vue","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":8012,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":8012,"count":1}],"isBlockCoverage":true},{"functionName":"setup","ranges":[{"startOffset":1716,"endOffset":3041,"count":0}],"isBlockCoverage":false},{"functionName":"_sfc_render","ranges":[{"startOffset":3111,"endOffset":4117,"count":0}],"isBlockCoverage":false}]},{"scriptId":"1239","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/composables/src/composables/index.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":806,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":806,"count":1}],"isBlockCoverage":true}]},{"scriptId":"1240","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/composables/src/composables/useFloating.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":26829,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":26829,"count":1}],"isBlockCoverage":true},{"functionName":"useFloating","ranges":[{"startOffset":690,"endOffset":8698,"count":0}],"isBlockCoverage":false},{"functionName":"get","ranges":[{"startOffset":8799,"endOffset":8826,"count":0}],"isBlockCoverage":false}]},{"scriptId":"1241","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/composables/src/utils/index.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":7224,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":7224,"count":1}],"isBlockCoverage":true},{"functionName":"getHighestAvailableSpacePos","ranges":[{"startOffset":221,"endOffset":1791,"count":0}],"isBlockCoverage":false},{"functionName":"get","ranges":[{"startOffset":1908,"endOffset":1951,"count":0}],"isBlockCoverage":false},{"functionName":"calcRealPos","ranges":[{"startOffset":1975,"endOffset":2125,"count":0}],"isBlockCoverage":false},{"functionName":"get","ranges":[{"startOffset":2226,"endOffset":2253,"count":0}],"isBlockCoverage":false}]},{"scriptId":"1242","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/%00plugin-vue:export-helper","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":1367,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":1367,"count":1}],"isBlockCoverage":true},{"functionName":"__vite_ssr_exports__.default","ranges":[{"startOffset":217,"endOffset":355,"count":8},{"startOffset":308,"endOffset":336,"count":17}],"isBlockCoverage":true}]},{"scriptId":"1243","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/composables/src/types.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":401,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":401,"count":1}],"isBlockCoverage":true}]},{"scriptId":"1244","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/icons/src/index.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":2417,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":2417,"count":1}],"isBlockCoverage":true},{"functionName":"install","ranges":[{"startOffset":930,"endOffset":1078,"count":0}],"isBlockCoverage":false},{"functionName":"get","ranges":[{"startOffset":1177,"endOffset":1222,"count":2}],"isBlockCoverage":true},{"functionName":"get","ranges":[{"startOffset":1324,"endOffset":1350,"count":0}],"isBlockCoverage":false}]},{"scriptId":"1252","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/icons/src/FzIcon.vue","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":6218,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":6218,"count":1}],"isBlockCoverage":true},{"functionName":"setup","ranges":[{"startOffset":1749,"endOffset":2666,"count":1}],"isBlockCoverage":true},{"functionName":"get FontAwesomeIcon","ranges":[{"startOffset":2374,"endOffset":2455,"count":1}],"isBlockCoverage":true},{"functionName":"get byPrefixAndName","ranges":[{"startOffset":2457,"endOffset":2538,"count":1}],"isBlockCoverage":true},{"functionName":"_sfc_render","ranges":[{"startOffset":2672,"endOffset":3397,"count":1},{"startOffset":3244,"endOffset":3257,"count":0},{"startOffset":3308,"endOffset":3316,"count":0}],"isBlockCoverage":true}]},{"scriptId":"1255","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/src/common.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":974,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":974,"count":1}],"isBlockCoverage":true},{"functionName":"get","ranges":[{"startOffset":419,"endOffset":451,"count":26}],"isBlockCoverage":true}]},{"scriptId":"1256","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/src/components/FzTabPickerValue.vue","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":5606,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":5606,"count":1}],"isBlockCoverage":true},{"functionName":"setup","ranges":[{"startOffset":1428,"endOffset":2454,"count":0}],"isBlockCoverage":false},{"functionName":"_sfc_render","ranges":[{"startOffset":2493,"endOffset":2914,"count":0}],"isBlockCoverage":false}]},{"scriptId":"1257","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/src/components/FzTabName.vue","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":7744,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":7744,"count":1}],"isBlockCoverage":true},{"functionName":"setup","ranges":[{"startOffset":1830,"endOffset":2854,"count":12}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":2032,"endOffset":2401,"count":26},{"startOffset":2203,"endOffset":2229,"count":7},{"startOffset":2230,"endOffset":2327,"count":19},{"startOffset":2354,"endOffset":2376,"count":0}],"isBlockCoverage":true},{"functionName":"onClickTab","ranges":[{"startOffset":2427,"endOffset":2526,"count":1}],"isBlockCoverage":true},{"functionName":"get FzBadge","ranges":[{"startOffset":2596,"endOffset":2661,"count":2}],"isBlockCoverage":true},{"functionName":"get FzIcon","ranges":[{"startOffset":2663,"endOffset":2726,"count":2}],"isBlockCoverage":true},{"functionName":"_sfc_render","ranges":[{"startOffset":2941,"endOffset":4363,"count":26},{"startOffset":3260,"endOffset":3461,"count":2},{"startOffset":3462,"endOffset":3518,"count":24},{"startOffset":3737,"endOffset":4264,"count":2},{"startOffset":3901,"endOffset":3909,"count":1},{"startOffset":3910,"endOffset":3919,"count":1},{"startOffset":4265,"endOffset":4321,"count":24}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":4005,"endOffset":4196,"count":2}],"isBlockCoverage":true}]},{"scriptId":"1258","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/badge/src/index.ts","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":922,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":922,"count":1}],"isBlockCoverage":true},{"functionName":"get","ranges":[{"startOffset":458,"endOffset":503,"count":2}],"isBlockCoverage":true}]},{"scriptId":"1259","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/badge/src/FzBadge.vue","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":4449,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":4449,"count":1}],"isBlockCoverage":true},{"functionName":"setup","ranges":[{"startOffset":1245,"endOffset":2011,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":1695,"endOffset":1820,"count":2}],"isBlockCoverage":true},{"functionName":"_sfc_render","ranges":[{"startOffset":2017,"endOffset":2367,"count":2}],"isBlockCoverage":true}]},{"scriptId":"1260","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/src/FzTab.vue","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":4064,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":4064,"count":1}],"isBlockCoverage":true},{"functionName":"setup","ranges":[{"startOffset":1422,"endOffset":2147,"count":12}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":1625,"endOffset":1665,"count":26}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":1704,"endOffset":1961,"count":12},{"startOffset":1746,"endOffset":1872,"count":0},{"startOffset":1905,"endOffset":1955,"count":0}],"isBlockCoverage":true},{"functionName":"_sfc_render","ranges":[{"startOffset":2153,"endOffset":2378,"count":26},{"startOffset":2248,"endOffset":2318,"count":7},{"startOffset":2319,"endOffset":2375,"count":19}],"isBlockCoverage":true}]},{"scriptId":"1261","url":"file:///Users/fiscozen/Documents/repository/design_system/packages/tab/src/FzTabs.vue","functions":[{"functionName":"","ranges":[{"startOffset":0,"endOffset":554,"count":1}],"isBlockCoverage":true},{"functionName":"","ranges":[{"startOffset":13,"endOffset":554,"count":1}],"isBlockCoverage":true}]}]}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@fiscozen/tab",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Design System Tab component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/badge": "^0.1.0",
-    "@fiscozen/composables": "^0.1.0"
+    "@fiscozen/composables": "^0.1.5",
+    "@fiscozen/badge": "^0.1.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -33,10 +33,10 @@
     "@awesome.me/kit-8137893ad3": "^1.0.65",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@fiscozen/icons": "^0.1.1",
     "@fiscozen/eslint-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/icons": "^0.1.3"
   },
   "license": "MIT",
   "scripts": {

package/src/FzTabs.vue

@@ -1,18 +1,25 @@
 <template>
   <div :class="computedClassWrapper">
-    <div :class="computedClass" ref="tabContainer" @wheel="onWheel">
-      <FzTabPicker
-        v-if="!horizontalOverflow && isOverflowing"
-        :tabs="tabs"
-        :size="size"
-      />
-      <FzTabName
-        v-else
-        v-for="tab in tabs"
-        :tab="tab"
-        :key="tab.title"
-        :size="size"
-      />
+    <div :class="['flex', computedClass]">
+      <div
+        :class="[staticTabContainerClass, computedClass]"
+        ref="tabContainer"
+        @wheel="onWheel"
+      >
+        <FzTabPicker
+          v-if="!horizontalOverflow && isOverflowing"
+          :tabs="tabs"
+          :size="size"
+        />
+        <FzTabName
+          v-else
+          v-for="tab in tabs"
+          :tab="tab"
+          :key="tab.title"
+          :size="size"
+        />
+        <slot name="tabs-container-end" />
+      </div>
       <slot name="tabs-end" />
     </div>
     <slot :selected="selectedTab"></slot>
@@ -48,18 +55,19 @@ const tabs = computed(() => {
       return tab.type === FzTab || typeof tab.type === "symbol";
     })
     .map((tab) => {
-      if(tab.type === FzTab) 
-        return (tab.props as FzTabProps)
+      if (tab.type === FzTab) return tab.props as FzTabProps;
 
-      if(typeof tab.type === "symbol") {
+      if (typeof tab.type === "symbol") {
         const children = tab.children as VNode[];
         if (!children) return null;
-      
-        return children.filter(child => child.type === FzTab).map((child) => child.props as FzTabProps);
+
+        return children
+          .filter((child) => child.type === FzTab)
+          .map((child) => child.props as FzTabProps);
       }
     })
     .flat()
-    .filter(el => el != null);
+    .filter((el) => el != null);
 });
 
 const isOverflowing = computed(() => {
@@ -69,8 +77,10 @@ const isOverflowing = computed(() => {
   return tabContainer.value.scrollWidth > parent.clientWidth;
 });
 
+const staticTabContainerClass =
+  "tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto";
+
 const computedClass = computed(() => [
-  "tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto",
   props.vertical ? "flex-col" : "flex-row",
 ]);
 

package/src/__test__/__snapshots__/FzTabs.test.ts.snap

@@ -2,80 +2,92 @@
 
 exports[`FzTabs > change tab 1`] = `
 "<div data-v-97c498eb="" class="flex flex-col">
-  <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab1">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
-      <!--v-if-->
-    </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab2">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
-      <!--v-if-->
-    </button></div>
+  <div data-v-97c498eb="" class="flex flex-row">
+    <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab1">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
+        <!--v-if-->
+      </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab2">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
+        <!--v-if-->
+      </button></div>
+  </div>
   <!--v-if-->Content tab2
 </div>"
 `;
 
 exports[`FzTabs > renders with badgeContent on tab1 1`] = `
 "<div data-v-97c498eb="" class="flex flex-col">
-  <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1" badgecontent="1">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
-      <div class="text-xs px-12 rounded-xl w-fit h-20 flex items-center font-medium bg-blue-500 text-core-white" size="sm">1</div>
-    </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
-      <!--v-if-->
-    </button></div>Content tab1
+  <div data-v-97c498eb="" class="flex flex-row">
+    <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1" badgecontent="1">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
+        <div class="text-xs px-12 rounded-xl w-fit h-20 flex items-center font-medium bg-blue-500 text-core-white" size="sm">1</div>
+      </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
+        <!--v-if-->
+      </button></div>
+  </div>Content tab1
   <!--v-if-->
 </div>"
 `;
 
 exports[`FzTabs > renders with base case 1`] = `
 "<div data-v-97c498eb="" class="flex flex-col">
-  <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
-      <!--v-if-->
-    </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
-      <!--v-if-->
-    </button></div>Content tab1
+  <div data-v-97c498eb="" class="flex flex-row">
+    <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
+        <!--v-if-->
+      </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
+        <!--v-if-->
+      </button></div>
+  </div>Content tab1
   <!--v-if-->
 </div>"
 `;
 
 exports[`FzTabs > renders with icon on tab1 1`] = `
 "<div data-v-97c498eb="" class="flex flex-col">
-  <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1" icon="bell">
-      <div class="flex items-center justify-center w-[15px] h-[15px]"><svg class="svg-inline--fa fa-bell fa-sm h-[12px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bell" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-          <path class="" fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path>
-        </svg></div><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
-      <!--v-if-->
-    </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
-      <!--v-if-->
-    </button></div>Content tab1
+  <div data-v-97c498eb="" class="flex flex-row">
+    <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1" icon="bell">
+        <div class="flex items-center justify-center w-[15px] h-[15px]"><svg class="svg-inline--fa fa-bell fa-sm h-[12px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bell" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path class="" fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path>
+          </svg></div><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
+        <!--v-if-->
+      </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
+        <!--v-if-->
+      </button></div>
+  </div>Content tab1
   <!--v-if-->
 </div>"
 `;
 
 exports[`FzTabs > renders with md size 1`] = `
 "<div data-v-97c498eb="" class="flex flex-col">
-  <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-md h-40 gap-8 py-12 px-14 rounded-lg bg-white text-blue-500 cursor-pointer" title="tab1">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
-      <!--v-if-->
-    </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-md h-40 gap-8 py-12 px-14 rounded-lg text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
-      <!--v-if-->
-    </button></div>Content tab1
+  <div data-v-97c498eb="" class="flex flex-row">
+    <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-md h-40 gap-8 py-12 px-14 rounded-lg bg-white text-blue-500 cursor-pointer" title="tab1">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
+        <!--v-if-->
+      </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-md h-40 gap-8 py-12 px-14 rounded-lg text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
+        <!--v-if-->
+      </button></div>
+  </div>Content tab1
   <!--v-if-->
 </div>"
 `;
 
 exports[`FzTabs > renders with vertical direction 1`] = `
 "<div data-v-97c498eb="" class="flex flex-row">
-  <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-col"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
-      <!--v-if-->
-    </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
-      <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
-      <!--v-if-->
-    </button></div>Content tab1
+  <div data-v-97c498eb="" class="flex flex-col">
+    <div data-v-97c498eb="" class="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto flex-col"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md bg-white text-blue-500 cursor-pointer" title="tab1">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab1</span>
+        <!--v-if-->
+      </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] text-sm h-40 gap-6 py-8 px-12 rounded-md text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">
+        <!--v-if--><span class="text-ellipsis whitespace-nowrap overflow-hidden">tab2</span>
+        <!--v-if-->
+      </button></div>
+  </div>Content tab1
   <!--v-if-->
 </div>"
 `;