@fiscozen/tab 1.0.0 → 2.0.0

package/dist/tab.js

@@ -0,0 +1,1108 @@
+import { defineComponent as w, inject as _, computed as v, createElementBlock as h, openBlock as f, mergeProps as P, createBlock as d, createCommentVNode as T, createElementVNode as z, renderSlot as b, unref as x, toDisplayString as $, withCtx as m, createTextVNode as U, ref as g, Fragment as H, renderList as B, createVNode as E, onMounted as R, onBeforeUnmount as j, useSlots as q, provide as G, watch as Q, normalizeClass as C } from "vue";
+import { useMediaQuery as Y, FzFloating as J } from "@fiscozen/composables";
+import { FzIcon as L } from "@fiscozen/icons";
+import { FzBadge as K } from "@fiscozen/badge";
+const V = {
+  sm: "text-sm h-40 gap-6 py-8 px-12",
+  md: "text-md h-40 gap-8 py-12 px-14"
+}, X = {
+  picker: "bg-background-alice-blue text-blue-500",
+  tab: "bg-white text-blue-500"
+}, Z = {
+  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"
+}, ee = {
+  blue: {
+    50: {
+      value: "#eff1ff",
+      type: "color"
+    },
+    100: {
+      value: "#dee2ff",
+      type: "color"
+    },
+    200: {
+      value: "#bdc5ff",
+      type: "color"
+    },
+    300: {
+      value: "#9ca8ff",
+      type: "color"
+    },
+    400: {
+      value: "#7b8bff",
+      type: "color"
+    },
+    500: {
+      value: "#5a6eff",
+      type: "color"
+    },
+    600: {
+      value: "#4858cc",
+      type: "color"
+    },
+    700: {
+      value: "#364299",
+      type: "color"
+    },
+    800: {
+      value: "#242c66",
+      type: "color"
+    },
+    900: {
+      value: "#1b214c",
+      type: "color"
+    }
+  },
+  purple: {
+    50: {
+      value: "#f8f4ff",
+      type: "color"
+    },
+    100: {
+      value: "#f0e9ff",
+      type: "color"
+    },
+    200: {
+      value: "#e1d3ff",
+      type: "color"
+    },
+    300: {
+      value: "#d2bdff",
+      type: "color"
+    },
+    400: {
+      value: "#c3a7ff",
+      type: "color"
+    },
+    500: {
+      value: "#b491ff",
+      type: "color"
+    },
+    600: {
+      value: "#9074cc",
+      type: "color"
+    },
+    700: {
+      value: "#6c5799",
+      type: "color"
+    },
+    800: {
+      value: "#483a66",
+      type: "color"
+    },
+    900: {
+      value: "#241d33",
+      type: "color"
+    }
+  },
+  orange: {
+    50: {
+      value: "#fff2ef",
+      type: "color"
+    },
+    100: {
+      value: "#ffe4de",
+      type: "color"
+    },
+    200: {
+      value: "#ffc9bd",
+      type: "color"
+    },
+    300: {
+      value: "#ffae9c",
+      type: "color"
+    },
+    400: {
+      value: "#ff937b",
+      type: "color"
+    },
+    500: {
+      value: "#ff785a",
+      type: "color"
+    },
+    600: {
+      value: "#cc6048",
+      type: "color"
+    },
+    700: {
+      value: "#994836",
+      type: "color"
+    },
+    800: {
+      value: "#663024",
+      type: "color"
+    },
+    900: {
+      value: "#331812",
+      type: "color"
+    }
+  },
+  pink: {
+    50: {
+      value: "#fff5f5",
+      type: "color"
+    },
+    100: {
+      value: "#ffe0e0",
+      type: "color"
+    },
+    200: {
+      value: "#ffcbcb",
+      type: "color"
+    },
+    300: {
+      value: "#ffc0c0",
+      type: "color"
+    },
+    400: {
+      value: "#ffabab",
+      type: "color"
+    },
+    500: {
+      value: "#ff9696",
+      type: "color"
+    },
+    600: {
+      value: "#cc7878",
+      type: "color"
+    },
+    700: {
+      value: "#995a5a",
+      type: "color"
+    },
+    800: {
+      value: "#663c3c",
+      type: "color"
+    },
+    900: {
+      value: "#331e1e",
+      type: "color"
+    }
+  },
+  yellow: {
+    50: {
+      value: "#fffbf4",
+      type: "color"
+    },
+    100: {
+      value: "#fff3de",
+      type: "color"
+    },
+    200: {
+      value: "#ffebc8",
+      type: "color"
+    },
+    300: {
+      value: "#ffe7bd",
+      type: "color"
+    },
+    400: {
+      value: "#ffdfa7",
+      type: "color"
+    },
+    500: {
+      value: "#ffd791",
+      type: "color"
+    },
+    600: {
+      value: "#ccac74",
+      type: "color"
+    },
+    700: {
+      value: "#998157",
+      type: "color"
+    },
+    800: {
+      value: "#806c49",
+      type: "color"
+    },
+    900: {
+      value: "#4c402b",
+      type: "color"
+    }
+  },
+  semantic: {
+    error: {
+      50: {
+        value: "#fef3f3",
+        type: "color"
+      },
+      100: {
+        value: "#f8baba",
+        type: "color"
+      },
+      200: {
+        value: "#f04242",
+        type: "color"
+      },
+      300: {
+        value: "#aa2f2f",
+        type: "color"
+      }
+    },
+    warning: {
+      50: {
+        value: "#fff8f3",
+        type: "color"
+      },
+      100: {
+        value: "#ffdabd",
+        type: "color"
+      },
+      200: {
+        value: "#ffae4f",
+        type: "color"
+      },
+      300: {
+        value: "#b47b38",
+        type: "color"
+      }
+    },
+    success: {
+      50: {
+        value: "#f2f8f6",
+        type: "color"
+      },
+      100: {
+        value: "#b5d8ce",
+        type: "color"
+      },
+      200: {
+        value: "#0fa88c",
+        type: "color"
+      },
+      300: {
+        value: "#0b7763",
+        type: "color"
+      }
+    },
+    info: {
+      50: {
+        value: "#f3f7ff",
+        type: "color"
+      },
+      100: {
+        value: "#b4c8e1",
+        type: "color"
+      },
+      200: {
+        value: "#4e9fff",
+        type: "color"
+      },
+      300: {
+        value: "#3770b4",
+        type: "color"
+      }
+    }
+  },
+  background: {
+    "white-smoke": {
+      value: "#f7f6f3",
+      type: "color"
+    },
+    seashell: {
+      value: "#f8ece7",
+      type: "color"
+    },
+    "pale-purple": {
+      value: "#f2e6ff",
+      type: "color"
+    },
+    "alice-blue": {
+      value: "#ecf2fc",
+      type: "color"
+    }
+  },
+  grey: {
+    100: {
+      value: "#e9edf0",
+      type: "color"
+    },
+    200: {
+      value: "#d1dde6",
+      type: "color"
+    },
+    300: {
+      value: "#9da9b2",
+      type: "color"
+    },
+    400: {
+      value: "#6e777e",
+      type: "color"
+    },
+    500: {
+      value: "#596167",
+      type: "color"
+    }
+  },
+  core: {
+    white: {
+      value: "#ffffff",
+      type: "color"
+    },
+    black: {
+      value: "#2c282f",
+      type: "color"
+    }
+  },
+  "font-sans": {
+    "sharp-grotesk": {
+      value: '"Sharp Grotesk", sans-serif',
+      type: "fontFamilies"
+    },
+    inter: {
+      value: '"Inter", sans-serif',
+      type: "fontFamilies"
+    }
+  },
+  font: {
+    light: {
+      value: "300",
+      type: "fontWeights"
+    },
+    normal: {
+      value: "400",
+      type: "fontWeights"
+    },
+    medium: {
+      value: "500",
+      type: "fontWeights"
+    }
+  },
+  spacing: {
+    0: {
+      value: "0px",
+      type: "spacing"
+    },
+    1: {
+      value: "1px",
+      type: "spacing"
+    },
+    2: {
+      value: "2px",
+      type: "spacing"
+    },
+    4: {
+      value: "4px",
+      type: "spacing"
+    },
+    6: {
+      value: "6px",
+      type: "spacing"
+    },
+    8: {
+      value: "8px",
+      type: "spacing"
+    },
+    10: {
+      value: "10px",
+      type: "spacing"
+    },
+    12: {
+      value: "12px",
+      type: "spacing"
+    },
+    14: {
+      value: "14px",
+      type: "spacing"
+    },
+    16: {
+      value: "16px",
+      type: "spacing"
+    },
+    20: {
+      value: "20px",
+      type: "spacing"
+    },
+    24: {
+      value: "24px",
+      type: "spacing"
+    },
+    28: {
+      value: "28px",
+      type: "spacing"
+    },
+    32: {
+      value: "32px",
+      type: "spacing"
+    },
+    36: {
+      value: "36px",
+      type: "spacing"
+    },
+    40: {
+      value: "40px",
+      type: "spacing"
+    },
+    44: {
+      value: "44px",
+      type: "spacing"
+    },
+    48: {
+      value: "48px",
+      type: "spacing"
+    },
+    56: {
+      value: "56px",
+      type: "spacing"
+    },
+    64: {
+      value: "64px",
+      type: "spacing"
+    },
+    80: {
+      value: "80px",
+      type: "spacing"
+    },
+    96: {
+      value: "96px",
+      type: "spacing"
+    },
+    112: {
+      value: "112px",
+      type: "spacing"
+    },
+    128: {
+      value: "128px",
+      type: "spacing"
+    },
+    144: {
+      value: "144px",
+      type: "spacing"
+    },
+    160: {
+      value: "160px",
+      type: "spacing"
+    },
+    176: {
+      value: "176px",
+      type: "spacing"
+    },
+    192: {
+      value: "192px",
+      type: "spacing"
+    },
+    208: {
+      value: "208px",
+      type: "spacing"
+    },
+    224: {
+      value: "224px",
+      type: "spacing"
+    },
+    240: {
+      value: "240px",
+      type: "spacing"
+    },
+    256: {
+      value: "256px",
+      type: "spacing"
+    },
+    288: {
+      value: "288px",
+      type: "spacing"
+    },
+    320: {
+      value: "320px",
+      type: "spacing"
+    },
+    384: {
+      value: "384px",
+      type: "spacing"
+    }
+  },
+  border: {
+    0: {
+      value: "0px",
+      type: "borderWidth"
+    },
+    1: {
+      value: "1px",
+      type: "borderWidth"
+    },
+    2: {
+      value: "2px",
+      type: "borderWidth"
+    },
+    4: {
+      value: "4px",
+      type: "borderWidth"
+    },
+    8: {
+      value: "8px",
+      type: "borderWidth"
+    }
+  },
+  rounded: {
+    none: {
+      value: "0px",
+      type: "borderRadius"
+    },
+    sm: {
+      value: "2px",
+      type: "borderRadius"
+    },
+    base: {
+      value: "4px",
+      type: "borderRadius"
+    },
+    md: {
+      value: "6px",
+      type: "borderRadius"
+    },
+    lg: {
+      value: "8px",
+      type: "borderRadius"
+    },
+    xl: {
+      value: "12px",
+      type: "borderRadius"
+    },
+    "2xl": {
+      value: "16px",
+      type: "borderRadius"
+    },
+    "3xl": {
+      value: "24px",
+      type: "borderRadius"
+    },
+    full: {
+      value: "9999px",
+      type: "borderRadius"
+    }
+  },
+  breakpoint: {
+    xs: {
+      value: "376px",
+      type: "sizing"
+    },
+    sm: {
+      value: "640px",
+      type: "sizing"
+    },
+    md: {
+      value: "768px",
+      type: "sizing"
+    },
+    lg: {
+      value: "1024px",
+      type: "sizing"
+    },
+    xl: {
+      value: "1280px",
+      type: "sizing"
+    },
+    "2xl": {
+      value: "1440px",
+      type: "sizing"
+    },
+    "3xl": {
+      value: "1536px",
+      type: "sizing"
+    }
+  },
+  shadow: {
+    none: {
+      value: {
+        color: "#000000",
+        type: "dropShadow",
+        x: "0",
+        y: "0",
+        blur: "0",
+        spread: "0"
+      },
+      type: "boxShadow"
+    },
+    sm: {
+      value: {
+        color: "#0000000d",
+        type: "dropShadow",
+        x: "0",
+        y: "1",
+        blur: "2",
+        spread: "0"
+      },
+      type: "boxShadow"
+    },
+    base: {
+      value: [
+        {
+          color: "#0000000f",
+          type: "dropShadow",
+          x: "0",
+          y: "1",
+          blur: "2",
+          spread: "0"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "1",
+          blur: "3",
+          spread: "0"
+        }
+      ],
+      type: "boxShadow"
+    },
+    md: {
+      value: [
+        {
+          color: "#0000000f",
+          type: "dropShadow",
+          x: "0",
+          y: "2",
+          blur: "4",
+          spread: "-1"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "4",
+          blur: "6",
+          spread: "-1"
+        }
+      ],
+      type: "boxShadow"
+    },
+    lg: {
+      value: [
+        {
+          color: "#0000000d",
+          type: "dropShadow",
+          x: "0",
+          y: "4",
+          blur: "6",
+          spread: "-2"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "10",
+          blur: "15",
+          spread: "-3"
+        }
+      ],
+      type: "boxShadow"
+    },
+    xl: {
+      value: [
+        {
+          color: "#0000000a",
+          type: "dropShadow",
+          x: "0",
+          y: "10",
+          blur: "10",
+          spread: "-5"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "20",
+          blur: "25",
+          spread: "-5"
+        }
+      ],
+      type: "boxShadow"
+    },
+    "2xl": {
+      value: {
+        color: "#00000040",
+        type: "dropShadow",
+        x: "0",
+        y: "25",
+        blur: "50",
+        spread: "-12"
+      },
+      type: "boxShadow"
+    },
+    inner: {
+      value: {
+        color: "#0000000f",
+        type: "innerShadow",
+        x: "0",
+        y: "2",
+        blur: "4",
+        spread: "0"
+      },
+      type: "boxShadow"
+    }
+  },
+  underline: {
+    value: "underline",
+    type: "textDecoration"
+  },
+  text: {
+    xs: {
+      value: "12px",
+      type: "fontSizes"
+    },
+    sm: {
+      value: "14px",
+      type: "fontSizes"
+    },
+    base: {
+      value: "16px",
+      type: "fontSizes"
+    },
+    lg: {
+      value: "18px",
+      type: "fontSizes"
+    },
+    xl: {
+      value: "20px",
+      type: "fontSizes"
+    },
+    "2xl": {
+      value: "24px",
+      type: "fontSizes"
+    },
+    "3xl": {
+      value: "30px",
+      type: "fontSizes"
+    },
+    "4xl": {
+      value: "36px",
+      type: "fontSizes"
+    },
+    "5xl": {
+      value: "48px",
+      type: "fontSizes"
+    },
+    "6xl": {
+      value: "60px",
+      type: "fontSizes"
+    },
+    "7xl": {
+      value: "72px",
+      type: "fontSizes"
+    },
+    "8xl": {
+      value: "96px",
+      type: "fontSizes"
+    },
+    "9xl": {
+      value: "128px",
+      type: "fontSizes"
+    }
+  },
+  leading: {
+    xs: {
+      value: "16px",
+      type: "lineHeights"
+    },
+    sm: {
+      value: "18px",
+      type: "lineHeights"
+    },
+    base: {
+      value: "20px",
+      type: "lineHeights"
+    },
+    lg: {
+      value: "24px",
+      type: "lineHeights"
+    },
+    xl: {
+      value: "28px",
+      type: "lineHeights"
+    },
+    "2xl": {
+      value: "32px",
+      type: "lineHeights"
+    },
+    "3xl": {
+      value: "36px",
+      type: "lineHeights"
+    },
+    "4xl": {
+      value: "40px",
+      type: "lineHeights"
+    },
+    "5xl": {
+      value: "48px",
+      type: "lineHeights"
+    },
+    "6xl": {
+      value: "60px",
+      type: "lineHeights"
+    },
+    "7xl": {
+      value: "72px",
+      type: "lineHeights"
+    },
+    "8xl": {
+      value: "96px",
+      type: "lineHeights"
+    },
+    "9xl": {
+      value: "128px",
+      type: "lineHeights"
+    }
+  }
+}, O = {
+  global: ee
+}, le = [
+  "blue",
+  "purple",
+  "orange",
+  "pink",
+  "yellow",
+  "grey",
+  "core"
+], te = {
+  safeColorNames: le
+}, ae = [
+  "error",
+  "warning",
+  "success",
+  "info"
+], oe = {
+  semanticColorNames: ae
+}, pe = te.safeColorNames, se = oe.semanticColorNames, y = {};
+pe.forEach((p) => {
+  const t = O.global[p];
+  t && Object.keys(t).forEach((e) => {
+    var s;
+    const a = (s = t[e]) == null ? void 0 : s.value;
+    a && (y[p] || (y[p] = {}), y[p][e] = a);
+  });
+});
+const N = O.global.semantic;
+N && se.forEach((p) => {
+  const t = N[p];
+  t && typeof t == "object" && Object.keys(t).forEach((e) => {
+    var s;
+    const a = (s = t[e]) == null ? void 0 : s.value;
+    if (a) {
+      const r = `semantic-${p}`;
+      y[r] || (y[r] = {}), y[r][e] = a;
+    }
+  });
+});
+const re = Object.entries(O.global.breakpoint).reduce(
+  (p, [t, e]) => (p[t] = e.value, p),
+  {}
+), ue = { class: "text-ellipsis flex-1 whitespace-nowrap overflow-hidden" }, W = /* @__PURE__ */ w({
+  __name: "FzTabButton",
+  props: {
+    tab: {},
+    size: {},
+    type: { default: "tab" },
+    readonly: { type: Boolean, default: !1 },
+    maxWidth: { default: "136px" }
+  },
+  emits: ["click"],
+  setup(p, { emit: t }) {
+    const e = Y(`(max-width: ${re.xs})`), a = p, s = _("selectedTab"), r = t, i = v(() => [
+      "w-auto flex font-medium items-center  rounded-md",
+      V[a.size],
+      a.type === "picker" ? "text-left" : "",
+      (s == null ? void 0 : s.value) === a.tab.title ? X[a.type] : Z[a.type],
+      a.tab.disabled ? "cursor-not-allowed" : "cursor-pointer",
+      a.maxWidth && !e.value ? `max-w-[${a.maxWidth}]` : "",
+      e.value ? "!max-w-full !w-full" : ""
+    ]), n = () => {
+      a.tab.disabled || (a.readonly || (s.value = a.tab.title), r("click"));
+    };
+    return (o, S) => (f(), h("button", P({
+      class: i.value,
+      onClick: n
+    }, o.tab), [
+      o.tab.icon ? (f(), d(x(L), {
+        key: 0,
+        name: o.tab.icon,
+        size: o.size
+      }, null, 8, ["name", "size"])) : T("", !0),
+      z("span", ue, $(o.tab.title), 1),
+      o.tab.badgeContent != null ? (f(), d(x(K), {
+        key: 1,
+        color: x(s) === o.tab.title ? "blue" : "black",
+        size: o.size
+      }, {
+        default: m(() => [
+          U($(o.tab.badgeContent), 1)
+        ]),
+        _: 1
+      }, 8, ["color", "size"])) : T("", !0),
+      b(o.$slots, "default")
+    ], 16));
+  }
+}), ne = { class: "flex flex-col p-4 rounded shadow overflow-hidden bg-core-white z-10 w-full" }, ie = /* @__PURE__ */ w({
+  __name: "FzTabPicker",
+  props: {
+    tabs: {},
+    size: {}
+  },
+  setup(p) {
+    const t = g(!1), e = p;
+    g();
+    const a = _("selectedTab"), s = v(() => e.tabs.find((i) => i.title === (a == null ? void 0 : a.value)));
+    v(() => [
+      "flex items-center text-left max-w-[136px] rounded-md h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",
+      V[e.size]
+    ]);
+    const r = () => {
+      t.value = !1;
+    };
+    return (i, n) => (f(), d(x(J), {
+      position: "bottom",
+      isOpen: t.value,
+      class: "w-full overflow-hidden",
+      contentClass: "bg-transparent z-70"
+    }, {
+      opener: m(() => [
+        E(W, {
+          tab: s.value,
+          size: i.size,
+          class: "w-full sm:w-auto",
+          type: "tab",
+          readonly: "",
+          onClick: n[0] || (n[0] = (o) => t.value = !t.value)
+        }, {
+          default: m(() => [
+            E(x(L), {
+              name: t.value ? "chevron-up" : "chevron-down",
+              size: i.size
+            }, null, 8, ["name", "size"])
+          ]),
+          _: 1
+        }, 8, ["tab", "size"])
+      ]),
+      default: m(() => [
+        z("div", ne, [
+          (f(!0), h(H, null, B(i.tabs, (o) => (f(), d(W, {
+            tab: o,
+            size: i.size,
+            type: "picker",
+            onClick: r
+          }, null, 8, ["tab", "size"]))), 256))
+        ])
+      ]),
+      _: 1
+    }, 8, ["isOpen"]));
+  }
+}), F = /* @__PURE__ */ w({
+  __name: "FzTab",
+  props: {
+    title: {},
+    icon: {},
+    badgeContent: {},
+    disabled: { type: Boolean },
+    initialSelected: { type: Boolean },
+    maxWidth: {}
+  },
+  setup(p) {
+    const t = p, e = _("selectedTab"), a = v(() => (e == null ? void 0 : e.value) === t.title);
+    return R(() => {
+      e === void 0 ? console.error(
+        "[Fiscozen Design System]: FzTab must be used inside a FzTabs component"
+      ) : t.initialSelected && (e.value = t.title);
+    }), j(() => {
+      (e == null ? void 0 : e.value) === t.title && (e.value = "");
+    }), (s, r) => a.value ? b(s.$slots, "default", { key: 0 }) : T("", !0);
+  }
+}), ce = "tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto w-full sm:w-auto", fe = /* @__PURE__ */ w({
+  __name: "FzTabs",
+  props: {
+    size: { default: "sm" },
+    horizontalOverflow: { type: Boolean },
+    vertical: { type: Boolean, default: !1 }
+  },
+  emits: ["change"],
+  setup(p, { emit: t }) {
+    const e = p, a = t, s = q(), r = g(), i = g(!1), n = g("");
+    G("selectedTab", n);
+    const o = v(() => s.default ? s.default().filter((l) => l.type === F || typeof l.type == "symbol").map((l) => {
+      if (l.type === F) return l.props;
+      if (typeof l.type == "symbol") {
+        const c = l.children;
+        return !c || c === "v-if" ? null : c.filter((u) => u.type === F).map((u) => u.props);
+      }
+    }).flat().filter((l) => l != null) : []), S = v(() => [
+      e.vertical ? "flex-col" : "flex-row"
+    ]), D = v(() => [
+      "flex",
+      e.vertical ? "flex-row" : "flex-col"
+    ]);
+    function I(l) {
+      l.preventDefault(), l.stopPropagation(), l.deltaY > 0 ? r.value.scrollLeft += 100 : r.value.scrollLeft -= 100;
+    }
+    function k() {
+      if (!r.value) return !1;
+      const l = r.value.parentElement ?? document.body;
+      i.value = r.value.scrollWidth > l.clientWidth;
+    }
+    return R(() => {
+      if (o.value.length === 0)
+        console.warn(
+          "[Fiscozen Design System]: FzTabs must have at least one FzTab child"
+        );
+      else {
+        const l = o.value.find((u) => u.initialSelected);
+        l ? n.value = l.title : n.value = o.value[0].title;
+        const c = o.value.map((u) => u.title).filter((u, A, M) => M.indexOf(u) !== A);
+        c.length && console.warn(
+          `[Fiscozen Design System]: FzTabs has duplicate titles: ${c.join(", ")}, this may cause unexpected behavior.`
+        );
+      }
+      k(), window.addEventListener("resize", k);
+    }), j(() => {
+      window.removeEventListener("resize", k);
+    }), Q(
+      () => n.value,
+      () => {
+        var c;
+        n.value === "" && o.value.length > 0 && (n.value = ((c = o.value.find((u) => u.initialSelected)) == null ? void 0 : c.title) ?? o.value[0].title);
+        const l = r.value.querySelector(
+          `button[title="${n.value}"]`
+        );
+        l && i.value && l.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center"
+        }), a("change", n.value);
+      }
+    ), (l, c) => (f(), h("div", {
+      class: C(D.value)
+    }, [
+      z("div", {
+        class: C(["flex", S.value])
+      }, [
+        z("div", {
+          class: C([ce, S.value]),
+          ref_key: "tabContainer",
+          ref: r,
+          onWheel: I
+        }, [
+          !l.horizontalOverflow && i.value ? (f(), d(ie, {
+            key: 0,
+            tabs: o.value,
+            size: l.size
+          }, null, 8, ["tabs", "size"])) : (f(!0), h(H, { key: 1 }, B(o.value, (u) => (f(), d(W, {
+            tab: u,
+            key: u.title,
+            size: l.size,
+            maxWidth: u.maxWidth
+          }, null, 8, ["tab", "size", "maxWidth"]))), 128)),
+          b(l.$slots, "tabs-container-end", {}, void 0, !0)
+        ], 34),
+        b(l.$slots, "tabs-end", {}, void 0, !0)
+      ], 2),
+      b(l.$slots, "default", { selected: n.value }, void 0, !0)
+    ], 2));
+  }
+}), ve = (p, t) => {
+  const e = p.__vccOpts || p;
+  for (const [a, s] of t)
+    e[a] = s;
+  return e;
+}, ge = /* @__PURE__ */ ve(fe, [["__scopeId", "data-v-f9fcb49a"]]);
+export {
+  F as FzTab,
+  ge as FzTabs
+};