@fiscozen/tab 3.0.0 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @fiscozen/tab
 
+## 3.0.2
+
+### Patch Changes
+
+- Updated dependencies [34a7934]
+  - @fiscozen/composables@1.0.3
+
+## 3.0.1
+
+### Patch Changes
+
+- 51aba38: Fix FzTab componenent identification
+
 ## 3.0.0
 
 ### Patch Changes

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@fiscozen/tab",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Design System Tab component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/composables": "1.0.2",
-    "@fiscozen/style": "0.3.0",
     "@fiscozen/action": "3.0.0",
-    "@fiscozen/badge": "3.0.0"
+    "@fiscozen/style": "0.3.0",
+    "@fiscozen/badge": "3.0.0",
+    "@fiscozen/composables": "1.0.3"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -33,9 +33,9 @@
     "vite-plugin-dts": "^3.8.3",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
+    "@fiscozen/prettier-config": "^0.1.0",
     "@fiscozen/tsconfig": "^0.1.0",
-    "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0"
+    "@fiscozen/eslint-config": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzTab.vue

@@ -6,6 +6,8 @@
 import { inject, onMounted, Ref, computed, onBeforeUnmount } from "vue";
 import { FzTabProps } from "./types";
 
+defineOptions({ _isFzTab: true });
+
 const props = defineProps<FzTabProps>();
 
 const selectedTab = inject<Ref<string>>("selectedTab");

package/src/FzTabs.vue

@@ -40,9 +40,15 @@ import { computed, ref, onMounted, provide, useSlots, watch, VNode } from "vue";
 import { FzTabsProps, FzTabProps, FzTabStyle } from "./types";
 import FzTabPicker from "./components/FzTabPicker.vue";
 import FzTabButton from "./components/FzTabButton.vue";
-import FzTab from "./FzTab.vue";
 import { debugWarn, mapSizeToEnvironment } from "./common";
 
+/**
+ * Identifies FzTab vnodes via marker instead of reference identity.
+ * Avoids module deduplication issues when the package is excluded from Vite's optimizeDeps.
+ */
+const isFzTab = (vnode: VNode): boolean =>
+  (vnode.type as any)?._isFzTab === true;
+
 const props = withDefaults(defineProps<FzTabsProps>(), {
   vertical: false,
   horizontalOverflow: undefined,
@@ -64,17 +70,17 @@ const tabs = computed(() => {
   return slots
     .default()
     .filter((tab) => {
-      return tab.type === FzTab || typeof tab.type === "symbol";
+      return isFzTab(tab) || typeof tab.type === "symbol";
     })
     .map((tab) => {
-      if (tab.type === FzTab) return tab.props as FzTabProps;
+      if (isFzTab(tab)) return tab.props as FzTabProps;
 
       if (typeof tab.type === "symbol") {
         const children = tab.children as VNode[] | "v-if";
         if (!children || children === "v-if") return null;
 
         return children
-          .filter((child) => child.type === FzTab)
+          .filter((child) => isFzTab(child))
           .map((child) => child.props as FzTabProps);
       }
     })

package/src/__tests__/FzTabs.spec.ts

@@ -1,6 +1,6 @@
 import { mount } from "@vue/test-utils";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import { h } from "vue";
+import { defineComponent, h } from "vue";
 import { FzTab, FzTabs } from "..";
 import { FzTabProps, FzTabsProps } from "../types";
 
@@ -932,6 +932,37 @@ describe("FzTabs", () => {
     });
   });
 
+  // ============================================
+  // TAB IDENTIFICATION (marker-based)
+  // ============================================
+  describe("Tab identification", () => {
+    it("should have _isFzTab marker on FzTab component", () => {
+      expect((FzTab as any)._isFzTab).toBe(true);
+    });
+
+    it("should not render non-FzTab components as tabs", async () => {
+      const FakeTab = defineComponent({
+        props: { title: String },
+        template: "<div>Fake</div>",
+      });
+
+      const wrapper = mount(FzTabs, {
+        props: { isDebug: true } as FzTabsProps,
+        slots: {
+          default: () => [
+            h(FzTab, { title: "real" }, "Real content"),
+            h(FakeTab, { title: "fake" }, "Fake content"),
+          ],
+        },
+      });
+
+      await wrapper.vm.$nextTick();
+      const buttons = wrapper.findAll("button[title]");
+      expect(buttons).toHaveLength(1);
+      expect(buttons[0].attributes("title")).toBe("real");
+    });
+  });
+
   // ============================================
   // EDGE CASES
   // ============================================