@fiscozen/tab 0.1.7 → 0.1.8

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@fiscozen/tab",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Design System Tab component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/badge": "^0.1.1",
-    "@fiscozen/composables": "^0.1.25"
+    "@fiscozen/composables": "^0.1.34",
+    "@fiscozen/badge": "^0.1.2"
   },
   "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/tsconfig": "^0.1.0",
     "@fiscozen/prettier-config": "^0.1.0",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/icons": "^0.1.10"
+    "@fiscozen/icons": "^0.1.15"
   },
   "license": "MIT",
   "scripts": {

package/src/FzTabs.vue

@@ -6,18 +6,17 @@
         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"
-        />
+        <template v-if="!horizontalOverflow && isOverflowing">
+          <FzTabPicker :tabs="tabs" :size="size" />
+        </template>
+        <template v-else>
+          <FzTabButton
+            v-for="tab in tabs"
+            :tab="tab"
+            :key="tab.title"
+            :size="size"
+          />
+        </template>
         <slot name="tabs-container-end" />
       </div>
       <slot name="tabs-end" />
@@ -35,12 +34,11 @@ import {
   useSlots,
   watch,
   VNode,
-  onUnmounted,
   onBeforeUnmount,
 } from "vue";
 import { FzTabsProps, FzTabProps } from "./types";
 import FzTabPicker from "./components/FzTabPicker.vue";
-import FzTabName from "./components/FzTabName.vue";
+import FzTabButton from "./components/FzTabButton.vue";
 import FzTab from "./FzTab.vue";
 
 const props = withDefaults(defineProps<FzTabsProps>(), {

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="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>
+        <div class="flex items-center justify-center font-medium text-xs px-8 size-20 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-->

package/src/common.ts

@@ -2,3 +2,14 @@ export const mapSizeToClasses = {
   sm: "text-sm h-40 gap-6 py-8 px-12",
   md: "text-md h-40 gap-8 py-12 px-14",
 };
+
+export const mapSelectedTabToClasses = {
+  picker: "bg-background-alice-blue text-blue-500",
+  tab: "bg-white text-blue-500",
+};
+
+export const mapUnselectedTabToClasses = {
+  picker:
+    "bg-white hover:bg-background-alice-blue text-black hover:text-blue-500",
+  tab: "text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500",
+};

package/src/components/{FzTabName.vue → FzTabButton.vue}

@@ -1,16 +1,17 @@
 <template>
   <button :class="classes" @click="onClickTab" v-bind="tab">
     <FzIcon v-if="tab.icon" :name="tab.icon" :size="size" />
-    <span class="text-ellipsis whitespace-nowrap overflow-hidden">{{
+    <span class="text-ellipsis flex-1 whitespace-nowrap overflow-hidden">{{
       tab.title
     }}</span>
     <FzBadge
-      v-if="tab.badgeContent"
+      v-if="tab.badgeContent != null"
       :color="selectedTab === tab.title ? 'blue' : 'black'"
       :size="size"
     >
       {{ tab.badgeContent }}
     </FzBadge>
+    <slot />
   </button>
 </template>
 <script setup lang="ts">
@@ -18,27 +19,42 @@ import { inject, computed, Ref } from "vue";
 import { FzBadge } from "@fiscozen/badge";
 import { FzIcon } from "@fiscozen/icons";
 import { FzTabProps } from "../types";
-import { mapSizeToClasses } from "../common";
+import {
+  mapSelectedTabToClasses,
+  mapSizeToClasses,
+  mapUnselectedTabToClasses,
+} from "../common";
 
-const props = defineProps<{
-  tab: FzTabProps;
-  size: "sm" | "md";
-}>();
+const props = withDefaults(
+  defineProps<{
+    tab: FzTabProps;
+    size: "sm" | "md";
+    type: "picker" | "tab";
+    readonly: boolean;
+  }>(),
+  {
+    type: "tab",
+    readonly: false,
+  },
+);
 
 const selectedTab = inject<Ref<string>>("selectedTab");
+const emit = defineEmits(["click"]);
 
 const classes = computed(() => [
   "w-auto flex font-medium items-center max-w-[136px] rounded-md",
   mapSizeToClasses[props.size],
+  props.type === "picker" ? "text-left" : "",
   selectedTab?.value === props.tab.title
-    ? "bg-white text-blue-500"
-    : "text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500",
+    ? mapSelectedTabToClasses[props.type]
+    : mapUnselectedTabToClasses[props.type],
   props.tab.disabled ? "cursor-not-allowed" : "cursor-pointer",
 ]);
 
 const onClickTab = () => {
   if (!props.tab.disabled) {
-    selectedTab!.value = props.tab.title;
+    if (!props.readonly) selectedTab!.value = props.tab.title;
+    emit("click");
   }
 };
 </script>

package/src/components/FzTabPicker.vue

@@ -3,29 +3,28 @@
     position="bottom"
     :isOpen
     class="w-full overflow-hidden"
-    contentClass="bg-transparent"
+    contentClass="bg-transparent z-70"
   >
     <template #opener>
-      <button
-        @click="isOpen = !isOpen"
+      <FzTabButton
+        :tab="selectedTabProps!"
         :size="size"
-        :class="computedClasses"
-        ref="opener"
+        type="tab"
+        readonly
+        @click="isOpen = !isOpen"
       >
-        <span class="overflow-hidden text-ellipsis whitespace-nowrap">
-          {{ selectedTab }}
-        </span>
         <FzIcon :name="isOpen ? 'chevron-up' : 'chevron-down'" :size="size" />
-      </button>
+      </FzTabButton>
     </template>
     <div
       class="flex flex-col p-4 rounded shadow overflow-hidden bg-core-white z-10"
       :style="{ width: containerWidth }"
     >
-      <FzTabPickerValue
+      <FzTabButton
         v-for="tab in tabs"
         :tab="tab"
         :size="size"
+        type="picker"
         @click="closePicker"
       />
     </div>
@@ -33,12 +32,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, computed } from "vue";
+import { ref, inject, computed, Ref } from "vue";
 import { FzFloating } from "@fiscozen/composables";
 import { FzIcon } from "@fiscozen/icons";
+import { FzBadge } from "@fiscozen/badge";
 import { FzTabProps } from "../types";
 import { mapSizeToClasses } from "../common";
-import FzTabPickerValue from "./FzTabPickerValue.vue";
+import FzTabButton from "./FzTabButton.vue";
 
 const isOpen = ref(false);
 const props = defineProps<{
@@ -47,7 +47,10 @@ const props = defineProps<{
 }>();
 const opener = ref<HTMLElement>();
 
-const selectedTab = inject("selectedTab");
+const selectedTab = inject<Ref<string>>("selectedTab");
+const selectedTabProps = computed(() => {
+  return props.tabs.find((tab) => tab.title === selectedTab?.value);
+});
 
 const computedClasses = computed(() => [
   "flex items-center text-left max-w-[136px] rounded-md h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",

package/src/types.ts

@@ -34,9 +34,4 @@ export type FzTabProps = {
    * Show the tab content
    */
   initialSelected?: boolean;
-
-  /**
-   * custom property not handled by the component but maybe useful for the user (e.g. aria-label, class, etc.)
-   */
-  [key: string]: unknown;
 };

package/src/components/FzTabPickerValue.vue

@@ -1,40 +0,0 @@
-<template>
-  <button
-    :key="tab.title"
-    @click="onPickerValueClick"
-    :class="computedClasses"
-    :disabled="tab.disabled"
-  >
-    {{ tab.title }}
-  </button>
-</template>
-
-<script setup lang="ts">
-import { Ref, inject, computed } from "vue";
-import { FzTabProps } from "../types";
-import { mapSizeToClasses } from "../common";
-
-const props = defineProps<{
-  tab: FzTabProps;
-  size: "sm" | "md";
-}>();
-
-const emit = defineEmits(["click"]);
-
-const selectedTab = inject<Ref<string>>("selectedTab");
-const computedClasses = computed(() => [
-  mapSizeToClasses[props.size],
-  "flex items-center text-left max-w-[136px] h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize rounded",
-  selectedTab?.value === props.tab.title
-    ? "!bg-background-alice-blue"
-    : "hover:!bg-background-alice-blue !text-black hover:!text-blue-500",
-  props.tab.disabled ? "cursor-not-allowed" : "cursor-pointer",
-]);
-
-const onPickerValueClick = () => {
-  if (!props.tab.disabled) {
-    selectedTab!.value = props.tab.title;
-    emit("click");
-  }
-};
-</script>