@fiscozen/tab 0.1.6 → 0.1.7-beta

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@fiscozen/tab",
-  "version": "0.1.6",
+  "version": "0.1.7-beta",
   "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.8"
+    "@fiscozen/badge": "^0.1.1",
+    "@fiscozen/composables": "^0.1.25"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -34,9 +34,9 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/icons": "^0.1.4",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/icons": "^0.1.10",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzTabs.vue

@@ -27,7 +27,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, provide, useSlots, watch, VNode } from "vue";
+import {
+  computed,
+  ref,
+  onMounted,
+  provide,
+  useSlots,
+  watch,
+  VNode,
+  onUnmounted,
+  onBeforeUnmount,
+} from "vue";
 import { FzTabsProps, FzTabProps } from "./types";
 import FzTabPicker from "./components/FzTabPicker.vue";
 import FzTabName from "./components/FzTabName.vue";
@@ -42,7 +52,8 @@ const emit = defineEmits(["change"]);
 
 const slots = useSlots();
 
-const tabContainer = ref<HTMLElement | null>(null);
+const tabContainer = ref<HTMLElement>();
+const isOverflowing = ref(false);
 const selectedTab = ref("");
 provide("selectedTab", selectedTab);
 
@@ -58,8 +69,8 @@ const tabs = computed(() => {
       if (tab.type === FzTab) return tab.props as FzTabProps;
 
       if (typeof tab.type === "symbol") {
-        const children = tab.children as VNode[];
-        if (!children) return null;
+        const children = tab.children as VNode[] | "v-if";
+        if (!children || children === "v-if") return null;
 
         return children
           .filter((child) => child.type === FzTab)
@@ -70,13 +81,6 @@ const tabs = computed(() => {
     .filter((el): el is FzTabProps => el != null);
 });
 
-const isOverflowing = computed(() => {
-  if (!tabContainer.value) return false;
-
-  const parent = tabContainer.value.parentElement ?? document.body;
-  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";
 
@@ -96,30 +100,43 @@ function onWheel(e: WheelEvent) {
   else tabContainer.value!.scrollLeft -= 100;
 }
 
+function updateIsOverflowing() {
+  if (!tabContainer.value) return false;
+
+  const parent = tabContainer.value.parentElement ?? document.body;
+  isOverflowing.value = tabContainer.value.scrollWidth > parent.clientWidth;
+}
+
 onMounted(() => {
   if (tabs.value.length === 0) {
-    console.error(
+    console.warn(
       "[Fiscozen Design System]: FzTabs must have at least one FzTab child",
     );
-    return;
-  }
-
-  const findSelected = tabs.value.find((tab) => tab.initialSelected);
-  if (findSelected) {
-    selectedTab.value = findSelected.title;
   } else {
-    selectedTab.value = tabs.value[0].title;
-  }
+    const findSelected = tabs.value.find((tab) => tab.initialSelected);
+    if (findSelected) {
+      selectedTab.value = findSelected.title;
+    } else {
+      selectedTab.value = tabs.value[0].title;
+    }
 
-  const duplicateTitles = tabs.value
-    .map((tab) => tab.title)
-    .filter((title, index, self) => self.indexOf(title) !== index);
+    const duplicateTitles = tabs.value
+      .map((tab) => tab.title)
+      .filter((title, index, self) => self.indexOf(title) !== index);
 
-  if (duplicateTitles.length) {
-    console.warn(
-      `[Fiscozen Design System]: FzTabs has duplicate titles: ${duplicateTitles.join(", ")}, this may cause unexpected behavior.`,
-    );
+    if (duplicateTitles.length) {
+      console.warn(
+        `[Fiscozen Design System]: FzTabs has duplicate titles: ${duplicateTitles.join(", ")}, this may cause unexpected behavior.`,
+      );
+    }
   }
+
+  updateIsOverflowing();
+  window.addEventListener("resize", updateIsOverflowing);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateIsOverflowing);
 });
 
 watch(
@@ -136,7 +153,7 @@ watch(
       `button[title="${selectedTab.value}"]`,
     );
 
-    if (selectedTabElement) {
+    if (selectedTabElement && isOverflowing.value) {
       selectedTabElement.scrollIntoView({
         behavior: "smooth",
         block: "nearest",

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

@@ -20,7 +20,7 @@ exports[`FzTabs > renders with badgeContent on tab1 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-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 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>
+        <div class="flex items-center justify-center font-medium text-xs px-8 h-16 w-16 bg-blue-500 text-core-white rounded-full !px-0">1</div>
       </button><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 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-->
@@ -50,7 +50,7 @@ exports[`FzTabs > renders with icon on tab1 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-row"><button data-v-97c498eb="" class="w-auto flex font-medium items-center max-w-[136px] rounded-md text-sm h-40 gap-6 py-8 px-12 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>
+            <path class="" fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.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 416l400 0c9.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.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 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] rounded-md text-sm h-40 gap-6 py-8 px-12 text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500 cursor-pointer" title="tab2">

package/src/components/FzTabPicker.vue

@@ -1,5 +1,10 @@
 <template>
-  <FzFloating position="bottom" :isOpen class="w-full overflow-hidden" contentClass="bg-transparent">
+  <FzFloating
+    position="bottom"
+    :isOpen
+    class="w-full overflow-hidden"
+    contentClass="bg-transparent"
+  >
     <template #opener>
       <button
         @click="isOpen = !isOpen"