@fiscozen/tab 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Fiscozen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,17 @@
+# @fiscozen/tab
+
+Tabs are used to display multiple views in a single window. Users can switch between them by clicking on a tab.
+
+Internally, FzTabs uses the API provide/inject to communicate with FzTab and other components.
+This choice is made to avoid the use of global variables to manage the state of the tabs and to make the component uncontrolled: all
+the logic is handled by the FzTabs and FzTab components.
+
+If necessary, all components inside FzTabs can use the following code    
+
+```typescript
+import { inject, Ref } from 'vue';
+
+const selectedTab = inject<Ref<string>>('selectedTab');
+```
+
+to manage the state of the tabs. This should be done with caution, as it can lead to unexpected behavior.

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@fiscozen/tab",
+  "version": "0.1.0",
+  "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"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.13"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitest/coverage-v8": "^1.2.1",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.0",
+    "vite-plugin-dts": "^3.8.3",
+    "eslint": "^8.49.0",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "vitest": "^1.2.0",
+    "vue-tsc": "^1.8.25",
+    "@awesome.me/kit-8137893ad3": "^1.0.65",
+    "@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/tsconfig": "^0.1.0",
+    "@fiscozen/icons": "^0.1.1"
+  },
+  "license": "MIT",
+  "scripts": {
+    "coverage": "vitest run --coverage",
+    "format": "prettier --write src/",
+    "test:unit": "vitest run",
+    "build": "vue-tsc && vite build"
+  }
+}

package/src/FzTab.vue

@@ -0,0 +1,23 @@
+<template>
+  <slot v-if="isActive"></slot>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, Ref, computed } from "vue";
+import { FzTabProps } from "./types";
+
+const props = defineProps<FzTabProps>();
+
+const selectedTab = inject<Ref<string>>("selectedTab");
+const isActive = computed(() => selectedTab?.value === props.title);
+
+onMounted(() => {
+  if (selectedTab === undefined) {
+    console.error(
+      "[Fiscozen Design System]: FzTab must be used inside a FzTabs component"
+    );
+  } else if (props.initialSelected) {
+    selectedTab.value = props.title;
+  }
+});
+</script>

package/src/FzTabs.vue

@@ -0,0 +1,127 @@
+<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"
+      />
+      <slot name="tabs-end" />
+    </div>
+    <slot :selected="selectedTab"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, provide, useSlots, watch } from "vue";
+import { FzTabsProps, FzTabProps } from "./types";
+import FzTabPicker from "./components/FzTabPicker.vue";
+import FzTabName from "./components/FzTabName.vue";
+import FzTab from "./FzTab.vue";
+
+const props = withDefaults(defineProps<FzTabsProps>(), {
+  size: "sm",
+  vertical: false,
+});
+
+const emit = defineEmits(["change"]);
+
+const slots = useSlots();
+
+const tabContainer = ref<HTMLElement | null>(null);
+const selectedTab = ref("");
+provide("selectedTab", selectedTab);
+
+const tabs = computed(() => {
+  if (!slots.default) return [];
+
+  return slots
+    .default()
+    .filter((tab) => {
+      return tab.type === FzTab;
+    })
+    .map((tab) => tab.props as FzTabProps);
+});
+
+const isOverflowing = computed(() => {
+  if (!tabContainer.value) return false;
+
+  const parent = tabContainer.value.parentElement ?? document.body;
+  return tabContainer.value.scrollWidth > parent.clientWidth;
+});
+
+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",
+]);
+
+const computedClassWrapper = computed(() => [
+  "flex",
+  !props.vertical ? "flex-col" : "flex-row",
+]);
+
+function onWheel(e: WheelEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+  if (e.deltaY > 0) tabContainer.value!.scrollLeft += 100;
+  else tabContainer.value!.scrollLeft -= 100;
+}
+
+onMounted(() => {
+  if (tabs.value.length === 0) {
+    console.error(
+      "[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 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.`,
+    );
+  }
+});
+
+watch(
+  () => selectedTab.value,
+  () => {
+    const selectedTabElement = tabContainer.value!.querySelector(
+      `button[title="${selectedTab.value}"]`,
+    );
+
+    if (selectedTabElement) {
+      selectedTabElement.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+
+    emit("change", selectedTab.value);
+  },
+);
+</script>
+<style scoped>
+.tab-container::-webkit-scrollbar {
+  width: 0em;
+  height: 0em;
+}
+</style>

package/src/__test__/FzTabs.test.ts

@@ -0,0 +1,97 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect, beforeEach } from "vitest";
+import { FzTab, FzTabs } from "..";
+import { h } from "vue";
+import { FzTabProps, FzTabsProps } from "../types";
+
+const createWrapper = async (
+  props: FzTabsProps,
+  tab1Props: FzTabProps,
+  tab2Props: FzTabProps,
+) => {
+  const content = mount(FzTabs, {
+    props,
+    slots: {
+      default: () => [
+        h(FzTab, tab1Props, "Content tab1"),
+        h(FzTab, tab2Props, "Content tab2"),
+      ],
+    },
+  });
+
+  await content.vm.$nextTick();
+  return content;
+};
+
+describe("FzTabs", () => {
+  beforeEach(() => {
+    globalThis.HTMLElement.prototype.scrollIntoView = () => {};
+  });
+  it("renders with base case", async () => {
+    const wrapper = await createWrapper(
+      {
+        size: "sm",
+      },
+      {
+        title: "tab1",
+      },
+      {
+        title: "tab2",
+      },
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders with md size", async () => {
+    const wrapper = await createWrapper(
+      { size: "md" },
+      { title: "tab1" },
+      { title: "tab2" },
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders with badgeContent on tab1", async () => {
+    const wrapper = await createWrapper(
+      { size: "sm" },
+      { title: "tab1", badgeContent: "1" },
+      { title: "tab2" },
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders with icon on tab1", async () => {
+    const wrapper = await createWrapper(
+      { size: "sm" },
+      { title: "tab1", icon: "bell" },
+      { title: "tab2" },
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("change tab", async () => {
+    const wrapper = await createWrapper(
+      { size: "sm" },
+      { title: "tab1" },
+      { title: "tab2" },
+    );
+
+    await wrapper.findAll("button[title='tab2']")[0].trigger("click");
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders with vertical direction", async () => {
+    const wrapper = await createWrapper(
+      { size: "sm", vertical: true },
+      { title: "tab1" },
+      { title: "tab2" },
+    );
+
+    expect(wrapper.html()).toMatchSnapshot();
+  })
+});

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

@@ -0,0 +1,81 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+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>
+  <!--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
+  <!--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
+  <!--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
+  <!--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
+  <!--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
+  <!--v-if-->
+</div>"
+`;

package/src/common.ts

@@ -0,0 +1,4 @@
+export const mapSizeToClasses = {
+  sm: "text-sm h-40 gap-6 py-8 px-12 rounded-md",
+  md: "text-md h-40 gap-8 py-12 px-14 rounded-lg",
+};

package/src/components/FzTabName.vue

@@ -0,0 +1,44 @@
+<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">{{
+      tab.title
+    }}</span>
+    <FzBadge
+      v-if="tab.badgeContent"
+      :color="selectedTab === tab.title ? 'blue' : 'black'"
+      :size="size"
+    >
+      {{ tab.badgeContent }}
+    </FzBadge>
+  </button>
+</template>
+<script setup lang="ts">
+import { inject, computed, Ref } from "vue";
+import { FzBadge } from "@fiscozen/badge";
+import { FzIcon } from "@fiscozen/icons";
+import { FzTabProps } from "../types";
+import { mapSizeToClasses } from "../common";
+
+const props = defineProps<{
+  tab: FzTabProps;
+  size: "sm" | "md";
+}>();
+
+const selectedTab = inject<Ref<string>>("selectedTab");
+
+const classes = computed(() => [
+  "w-auto flex font-medium items-center max-w-[136px]",
+  mapSizeToClasses[props.size],
+  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",
+  props.tab.disabled ? "cursor-not-allowed" : "cursor-pointer",
+]);
+
+const onClickTab = () => {
+  if (!props.tab.disabled) {
+    selectedTab!.value = props.tab.title;
+  }
+};
+</script>

package/src/components/FzTabPicker.vue

@@ -0,0 +1,60 @@
+<template>
+  <FzFloating position="bottom" :isOpen class="w-full overflow-hidden">
+    <template #opener>
+      <button
+        @click="isOpen = !isOpen"
+        :size="size"
+        :class="computedClasses"
+        ref="opener"
+      >
+        <span class="overflow-hidden text-ellipsis whitespace-nowrap">
+          {{ selectedTab }}
+        </span>
+        <FzIcon :name="isOpen ? 'chevron-up' : 'chevron-down'" :size="size" />
+      </button>
+    </template>
+    <div
+      class="flex flex-col p-4 rounded-[4px] shadow overflow-hidden"
+      :style="{ width: containerWidth }"
+    >
+      <FzTabPickerValue
+        v-for="tab in tabs"
+        :tab="tab"
+        :size="size"
+        @click="closePicker"
+      />
+    </div>
+  </FzFloating>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, computed } from "vue";
+import { FzFloating } from "@fiscozen/composables";
+import { FzIcon } from "@fiscozen/icons";
+import { FzTabProps } from "../types";
+import { mapSizeToClasses } from "../common";
+import FzTabPickerValue from "./FzTabPickerValue.vue";
+
+const isOpen = ref(false);
+const props = defineProps<{
+  tabs: FzTabProps[];
+  size: "sm" | "md";
+}>();
+const opener = ref<HTMLElement>();
+
+const selectedTab = inject("selectedTab");
+
+const computedClasses = computed(() => [
+  "flex items-center text-left max-w-[136px] h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",
+  mapSizeToClasses[props.size],
+]);
+
+const containerWidth = computed(() => {
+  if (!opener.value) return "auto";
+  return `${opener.value.offsetWidth}px`;
+});
+
+const closePicker = () => {
+  isOpen.value = false;
+};
+</script>

package/src/components/FzTabPickerValue.vue

@@ -0,0 +1,40 @@
+<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(() => [
+  "flex items-center text-left max-w-[136px] h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",
+  mapSizeToClasses[props.size],
+  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>

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as FzTabs } from "./FzTabs.vue";
+export { default as FzTab } from "./FzTab.vue";

package/src/types.ts

@@ -0,0 +1,42 @@
+export type FzTabsProps = {
+  /**
+   * Size variant
+   */
+  size: "sm" | "md";
+  /**
+   * Enable horizontal overflow
+   */
+  horizontalOverflow?: boolean;
+  /**
+   * Enable vertical direction
+   */
+  vertical?: boolean;
+};
+
+export type FzTabProps = {
+  /**
+   * Title of the tab
+   */
+  title: string;
+  /**
+   * Icon to display on the tab
+   */
+  icon?: string;
+  /**
+   * Badge text to display on the tab
+   */
+  badgeContent?: string;
+  /**
+   * Disable the tab
+   */
+  disabled?: boolean;
+  /**
+   * 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/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@fiscozen/tsconfig",
+  "exclude": ["src/__tests__", "vite.config.ts", "vitest.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true,
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, './src/index.ts'),
+      name: 'FzTabs',
+    },
+    rollupOptions: {
+      external: ['vue', "@fiscozen/icons", "@fiscozen/badge", "@fiscozen/composables"],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    }
+  }
+})

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      coverage: {
+        provider: 'v8',
+        include: ['**/src/**'],
+        exclude: ['**/index.ts']
+      }
+    }
+  })
+)