@fiscozen/tab 0.1.11 → 1.0.0

package/dist/tab.js

@@ -1,1108 +0,0 @@
-import { defineComponent as w, inject as O, computed as v, createElementBlock as h, openBlock as c, mergeProps as _, createBlock as d, createCommentVNode as T, createElementVNode as z, renderSlot as x, unref as b, toDisplayString as E, withCtx as m, createTextVNode as U, ref as g, Fragment as B, renderList as R, createVNode as N, onMounted as j, onBeforeUnmount as L, 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 V } from "@fiscozen/icons";
-import { FzBadge as K } from "@fiscozen/badge";
-const D = {
-  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"
-    }
-  }
-}, $ = {
-  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((e) => {
-  const t = $.global[e];
-  t && Object.keys(t).forEach((l) => {
-    var p;
-    const a = (p = t[l]) == null ? void 0 : p.value;
-    a && (y[e] || (y[e] = {}), y[e][l] = a);
-  });
-});
-const H = $.global.semantic;
-H && se.forEach((e) => {
-  const t = H[e];
-  t && typeof t == "object" && Object.keys(t).forEach((l) => {
-    var p;
-    const a = (p = t[l]) == null ? void 0 : p.value;
-    if (a) {
-      const s = `semantic-${e}`;
-      y[s] || (y[s] = {}), y[s][l] = a;
-    }
-  });
-});
-const re = Object.entries($.global.breakpoint).reduce(
-  (e, [t, l]) => (e[t] = l.value, e),
-  {}
-), 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(e, { emit: t }) {
-    const l = Y(`(max-width: ${re.xs})`), a = e, p = O("selectedTab"), s = t, f = v(() => [
-      "w-auto flex font-medium items-center  rounded-md",
-      D[a.size],
-      a.type === "picker" ? "text-left" : "",
-      (p == null ? void 0 : p.value) === a.tab.title ? X[a.type] : Z[a.type],
-      a.tab.disabled ? "cursor-not-allowed" : "cursor-pointer",
-      a.maxWidth && !l.value ? `max-w-[${a.maxWidth}]` : "",
-      l.value ? "!max-w-full !w-full" : ""
-    ]), u = () => {
-      a.tab.disabled || (a.readonly || (p.value = a.tab.title), s("click"));
-    };
-    return (n, S) => (c(), h("button", _({
-      class: f.value,
-      onClick: u
-    }, e.tab), [
-      e.tab.icon ? (c(), d(b(V), {
-        key: 0,
-        name: e.tab.icon,
-        size: e.size
-      }, null, 8, ["name", "size"])) : T("", !0),
-      z("span", ue, E(e.tab.title), 1),
-      e.tab.badgeContent != null ? (c(), d(b(K), {
-        key: 1,
-        color: b(p) === e.tab.title ? "blue" : "black",
-        size: e.size
-      }, {
-        default: m(() => [
-          U(E(e.tab.badgeContent), 1)
-        ]),
-        _: 1
-      }, 8, ["color", "size"])) : T("", !0),
-      x(n.$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(e) {
-    const t = g(!1), l = e;
-    g();
-    const a = O("selectedTab"), p = v(() => l.tabs.find((f) => f.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 ",
-      D[l.size]
-    ]);
-    const s = () => {
-      t.value = !1;
-    };
-    return (f, u) => (c(), d(b(J), {
-      position: "bottom",
-      isOpen: t.value,
-      class: "w-full overflow-hidden",
-      contentClass: "bg-transparent z-70"
-    }, {
-      opener: m(() => [
-        N(W, {
-          tab: p.value,
-          size: e.size,
-          class: "w-full sm:w-auto",
-          type: "tab",
-          readonly: "",
-          onClick: u[0] || (u[0] = (n) => t.value = !t.value)
-        }, {
-          default: m(() => [
-            N(b(V), {
-              name: t.value ? "chevron-up" : "chevron-down",
-              size: e.size
-            }, null, 8, ["name", "size"])
-          ]),
-          _: 1
-        }, 8, ["tab", "size"])
-      ]),
-      default: m(() => [
-        z("div", ne, [
-          (c(!0), h(B, null, R(e.tabs, (n) => (c(), d(W, {
-            tab: n,
-            size: e.size,
-            type: "picker",
-            onClick: s
-          }, 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(e) {
-    const t = e, l = O("selectedTab"), a = v(() => (l == null ? void 0 : l.value) === t.title);
-    return j(() => {
-      l === void 0 ? console.error(
-        "[Fiscozen Design System]: FzTab must be used inside a FzTabs component"
-      ) : t.initialSelected && (l.value = t.title);
-    }), L(() => {
-      (l == null ? void 0 : l.value) === t.title && (l.value = "");
-    }), (p, s) => a.value ? x(p.$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(e, { emit: t }) {
-    const l = e, a = t, p = q(), s = g(), f = g(!1), u = g("");
-    G("selectedTab", u);
-    const n = v(() => p.default ? p.default().filter((o) => o.type === F || typeof o.type == "symbol").map((o) => {
-      if (o.type === F) return o.props;
-      if (typeof o.type == "symbol") {
-        const i = o.children;
-        return !i || i === "v-if" ? null : i.filter((r) => r.type === F).map((r) => r.props);
-      }
-    }).flat().filter((o) => o != null) : []), S = v(() => [
-      l.vertical ? "flex-col" : "flex-row"
-    ]), I = v(() => [
-      "flex",
-      l.vertical ? "flex-row" : "flex-col"
-    ]);
-    function A(o) {
-      o.preventDefault(), o.stopPropagation(), o.deltaY > 0 ? s.value.scrollLeft += 100 : s.value.scrollLeft -= 100;
-    }
-    function k() {
-      if (!s.value) return !1;
-      const o = s.value.parentElement ?? document.body;
-      f.value = s.value.scrollWidth > o.clientWidth;
-    }
-    return j(() => {
-      if (n.value.length === 0)
-        console.warn(
-          "[Fiscozen Design System]: FzTabs must have at least one FzTab child"
-        );
-      else {
-        const o = n.value.find((r) => r.initialSelected);
-        o ? u.value = o.title : u.value = n.value[0].title;
-        const i = n.value.map((r) => r.title).filter((r, M, P) => P.indexOf(r) !== M);
-        i.length && console.warn(
-          `[Fiscozen Design System]: FzTabs has duplicate titles: ${i.join(", ")}, this may cause unexpected behavior.`
-        );
-      }
-      k(), window.addEventListener("resize", k);
-    }), L(() => {
-      window.removeEventListener("resize", k);
-    }), Q(
-      () => u.value,
-      () => {
-        var i;
-        u.value === "" && n.value.length > 0 && (u.value = ((i = n.value.find((r) => r.initialSelected)) == null ? void 0 : i.title) ?? n.value[0].title);
-        const o = s.value.querySelector(
-          `button[title="${u.value}"]`
-        );
-        o && f.value && o.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest",
-          inline: "center"
-        }), a("change", u.value);
-      }
-    ), (o, i) => (c(), h("div", {
-      class: C(I.value)
-    }, [
-      z("div", {
-        class: C(["flex", S.value])
-      }, [
-        z("div", {
-          class: C([ce, S.value]),
-          ref_key: "tabContainer",
-          ref: s,
-          onWheel: A
-        }, [
-          !e.horizontalOverflow && f.value ? (c(), d(ie, {
-            key: 0,
-            tabs: n.value,
-            size: e.size
-          }, null, 8, ["tabs", "size"])) : (c(!0), h(B, { key: 1 }, R(n.value, (r) => (c(), d(W, {
-            tab: r,
-            key: r.title,
-            size: e.size,
-            maxWidth: r.maxWidth
-          }, null, 8, ["tab", "size", "maxWidth"]))), 128)),
-          x(o.$slots, "tabs-container-end", {}, void 0, !0)
-        ], 34),
-        x(o.$slots, "tabs-end", {}, void 0, !0)
-      ], 2),
-      x(o.$slots, "default", { selected: u.value }, void 0, !0)
-    ], 2));
-  }
-}), ve = (e, t) => {
-  const l = e.__vccOpts || e;
-  for (const [a, p] of t)
-    l[a] = p;
-  return l;
-}, ge = /* @__PURE__ */ ve(fe, [["__scopeId", "data-v-f9fcb49a"]]);
-export {
-  F as FzTab,
-  ge as FzTabs
-};