bitboss-ui 1.0.38 → 1.0.40

package/dist/components/BbTable/BbTable.vue.d.ts

@@ -1,4 +1,4 @@
-import type { BbTableProps, MappedCell, TableColumn } from './types';
+import type { BbTableProps, MappedCell, BbTableColumn } from './types';
 import type { Classes } from '../../types/Classes';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BbTableProps>, {
     align: string;
@@ -14,7 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     matchStrategy: string;
     multiple: boolean;
     noDataText: string;
-    selectAllText: string;
+    selectAllLabel: string;
     selectText: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "click:row": (event: MouseEvent, item: any, selected: boolean) => void;
@@ -36,7 +36,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     matchStrategy: string;
     multiple: boolean;
     noDataText: string;
-    selectAllText: string;
+    selectAllLabel: string;
     selectText: string;
 }>>> & {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
@@ -56,22 +56,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     accessibleLabel: (columns: MappedCell[], item: any) => string;
     actionsText: string;
     allowSelectAll: boolean;
-    columns: TableColumn[];
+    columns: BbTableColumn[];
     fixedColumns: (number | {
         index: number;
         position: "left" | "right";
     })[];
-    selectAllText: string;
+    selectAllLabel: string;
     selectText: string;
 }, {}>, Readonly<{
     thead?: ((props: object) => any) | undefined;
     tbody?: ((props: object) => any) | undefined;
     tfoot?: ((props: object) => any) | undefined;
-    header_select?: ((props: {
+    'header:select'?: ((props: {
         multiple: boolean;
         selectAll: boolean;
+        text: string;
     }) => any) | undefined;
-    header_actions?: ((props: {
+    'header:actions'?: ((props: {
         text: string;
     }) => any) | undefined;
     loading?: ((props: {
@@ -103,11 +104,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     thead?: ((props: object) => any) | undefined;
     tbody?: ((props: object) => any) | undefined;
     tfoot?: ((props: object) => any) | undefined;
-    header_select?: ((props: {
+    'header:select'?: ((props: {
         multiple: boolean;
         selectAll: boolean;
+        text: string;
     }) => any) | undefined;
-    header_actions?: ((props: {
+    'header:actions'?: ((props: {
         text: string;
     }) => any) | undefined;
     loading?: ((props: {

package/dist/components/BbTable/types.d.ts

@@ -1,9 +1,9 @@
 import type { Classes } from '../../types/Classes';
 import type { InputHTMLAttributes } from 'vue';
 /**
- * Column as defined from outside
+ * Type used to infer the bahaviour of a single column. You can either extract data or provide elements useful for styling.
  */
-export type TableColumn = {
+export type BbTableColumn = {
     /**
      * Text alignment of the column.
      */
@@ -71,8 +71,9 @@ export type BbTableProps = {
     caption?: string;
     /**
      * Array of definitions of how the columns should be rendered.
+     *
      */
-    columns: TableColumn[];
+    columns: BbTableColumn[];
     /**
      * Adds a CSS class that applies a compact style to the component.
      */
@@ -109,9 +110,9 @@ export type BbTableProps = {
         position: 'left' | 'right';
     })[];
     /**
-     * Boolean that sets the headers as sticky top the top of the table.
+     * Boolean that sets the headers as sticky to the top of the table.
      */
-    fixedHeader?: boolean;
+    fixedHeaders?: boolean;
     items: any[] | ((prefill: boolean, modelValue?: any[]) => Promise<any[]>) | ((prefill: boolean, modelValue?: any[]) => any[]);
     itemValue?: string | ((item: any) => any);
     /**
@@ -155,7 +156,7 @@ export type BbTableProps = {
     /**
      * Defines whether the table is selectable.
      * Can be a global boolean that affects all rows or a function
-     * that accepts an otem and returns a boolean that only affects that item.
+     * that accepts an item and returns a boolean that only affects that item.
      */
     selectable?: boolean | ((item: any) => boolean);
     /**
@@ -165,7 +166,7 @@ export type BbTableProps = {
     /**
      * Text of the label used by the "Select all" boolean.
      */
-    selectAllText?: string;
+    selectAllLabel?: string;
     /**
      * Text of the header used for the radio inputs when the table is not `multiple`.
      */
@@ -236,11 +237,12 @@ export type BbTableSlots = {
     thead?: (props: object) => any;
     tbody?: (props: object) => any;
     tfoot?: (props: object) => any;
-    header_select?: (props: {
+    'header:select'?: (props: {
         multiple: boolean;
         selectAll: boolean;
+        text: string;
     }) => any;
-    header_actions?: (props: {
+    'header:actions'?: (props: {
         text: string;
     }) => any;
     loading?: (props: {

package/dist/index.d.ts

@@ -115,7 +115,11 @@ export type { BbSmoothHeightProps, BbSmoothHeightSlots, } from './components/BbS
 export type { BbSpinnerProps, Size as BbSpinnerSizes, } from './components/BbSpinner/BbSpinner.vue';
 export type { BbSwitchGroupEvents, BbSwitchGroupProps, } from './components/BbSwitchGroup/BbSwitchGroup.vue';
 export type { BbSwitchProps, BbSwitchEvents, } from './components/BbSwitch/BbSwitch.vue';
-export type { BbTableProps, TableColumn, BbTableEvents, BbTableSlots, } from './components/BbTable/types';
+export type { BbTableProps, 
+/**
+ * @deprecated
+ */
+BbTableColumn as TableColumn, BbTableColumn, BbTableEvents, BbTableSlots, } from './components/BbTable/types';
 export type { BbTabProps, BbTabEvents, BbTabItem, } from './components/BbTab/BbTab.vue';
 export type { BbTagProps, BbTagEvents } from './components/BbTag/BbTag.vue';
 export type { BbTextareaProps, BbTextareaEvents, } from './components/BbTextarea/BbTextarea.vue';

package/dist/index101.js

@@ -1,9 +1,9 @@
-import { defineComponent as M, ref as _, computed as k, getCurrentInstance as Q, watch as w, nextTick as W, openBlock as u, createElementBlock as d, unref as X, normalizeClass as $, createElementVNode as c, renderSlot as y, normalizeProps as U, guardReactiveProps as z, Fragment as q, renderList as D, createVNode as Y, withCtx as Z, toDisplayString as ee, createCommentVNode as ae } from "vue";
-import { useId as le } from "./index8.js";
-import { useRoute as te } from "./index131.js";
+import { defineComponent as M, ref as w, computed as k, getCurrentInstance as Q, watch as $, nextTick as W, openBlock as d, createElementBlock as c, unref as X, normalizeClass as q, createElementVNode as b, renderSlot as f, normalizeProps as U, guardReactiveProps as z, Fragment as S, renderList as D, createVNode as Y, withCtx as Z, toDisplayString as ee, createCommentVNode as le } from "vue";
+import { useId as te } from "./index8.js";
+import { useRoute as ae } from "./index131.js";
 import { useRouter as se } from "./index132.js";
-import { wait as re } from "./index124.js";
-import { useScroll as ie } from "./index133.js";
+import { wait as ie } from "./index124.js";
+import { useScroll as re } from "./index133.js";
 import oe from "./index10.js";
 import "./index11.js";
 const ne = ["id"], ue = { class: "bb-tab__label-boundary" }, de = { class: "bb-tab__label" }, ce = { class: "bb-tab__panes-container" }, be = ["id", "aria-labelledby"], _e = /* @__PURE__ */ M({
@@ -20,106 +20,114 @@ const ne = ["id"], ue = { class: "bb-tab__label-boundary" }, de = { class: "bb-t
   },
   emits: ["update:modelValue"],
   setup(K, { expose: H, emit: J }) {
-    var L, C, R, E, B, P, F;
-    const l = K, O = J, o = te(), h = se(), p = _(), S = l.id ?? le().id.value, f = `bb-tab_${S}`, T = _(), { isScrolling: j, arrivedState: I } = ie(T), V = k(() => ({
+    var C, R, E, B, P, F, N;
+    const l = K, O = J, n = ae(), p = se(), g = w(), T = l.id ?? te().id.value, m = `bb-tab_${T}`, I = w(), { isScrolling: j, arrivedState: V } = re(I), x = k(() => ({
       isScrolling: j.value,
-      left: I.left,
-      right: I.right
-    })), x = !!((C = (L = Q()) == null ? void 0 : L.proxy) != null && C.$inertia), t = _(null), r = k(
-      () => l.items.findIndex((e) => e.key === t.value)
-    ), v = k(() => r.value === 0), m = k(() => r.value === l.items.length - 1);
+      left: V.left,
+      right: V.right
+    })), L = !!((R = (C = Q()) == null ? void 0 : C.proxy) != null && R.$inertia), s = w(null), r = k(
+      () => l.items.findIndex((e) => e.key === s.value)
+    ), h = k(() => r.value === 0), v = k(() => r.value === l.items.length - 1);
     if (l.items.forEach((e) => {
       if (!e.key)
         throw console.error("A tab item has no key", e), new Error("A tab item has no key " + JSON.stringify(e));
-    }), l.navigation && ((E = (R = o.value) == null ? void 0 : R.query) != null && E[l.querykey]))
-      t.value = (P = (B = o.value) == null ? void 0 : B.query) == null ? void 0 : P[l.querykey];
-    else if (l.navigation && x && ((F = globalThis == null ? void 0 : globalThis.location) != null && F.href) && new URL(globalThis.location.href).searchParams.get(l.querykey))
-      t.value = new URL(globalThis.location.href).searchParams.get(
+    }), l.navigation && ((B = (E = n.value) == null ? void 0 : E.query) != null && B[l.querykey]))
+      s.value = (F = (P = n.value) == null ? void 0 : P.query) == null ? void 0 : F[l.querykey];
+    else if (l.navigation && L && ((N = globalThis == null ? void 0 : globalThis.location) != null && N.href) && new URL(globalThis.location.href).searchParams.get(l.querykey))
+      s.value = new URL(globalThis.location.href).searchParams.get(
         l.querykey
       );
     else if (l.modelValue)
-      t.value = l.modelValue;
+      s.value = l.modelValue;
     else if (l.items[0]) {
-      const e = l.items.find((a) => !a.disabled);
+      const e = l.items.find((t) => !t.disabled);
       if (!e)
         throw new Error(
           "No tab has been selected so it defaulted to the first available. Still, all the tabs are disabled so no tab can be selected."
         );
-      const s = e.key;
-      t.value = s;
+      const a = e.key;
+      s.value = a;
     }
-    const b = async (e, s = !1) => {
-      var a, n, N, A;
-      if (l.navigation && o.value && ((n = (a = o.value) == null ? void 0 : a.query) == null ? void 0 : n[l.querykey]) !== e)
-        h == null || h.push({
-          ...o,
-          query: { ...(N = o.value) == null ? void 0 : N.query, [l.querykey]: e },
-          replace: s
+    const y = async (e, a = !1) => {
+      var t, u, i, A;
+      if (l.navigation && n.value && ((u = (t = n.value) == null ? void 0 : t.query) == null ? void 0 : u[l.querykey]) !== e)
+        p == null || p.push({
+          ...n,
+          query: { ...(i = n.value) == null ? void 0 : i.query, [l.querykey]: e },
+          replace: a
         });
-      else if (l.navigation && x && ((A = globalThis == null ? void 0 : globalThis.location) != null && A.href) && new URL(globalThis.location.href).searchParams.get(l.querykey) !== e) {
-        const g = new URL(globalThis.location.href);
-        g.searchParams.set(l.querykey, e), re(0).then(() => {
-          s ? history.replaceState({}, "", g.toString()) : history.pushState({}, "", g.toString());
+      else if (l.navigation && L && ((A = globalThis == null ? void 0 : globalThis.location) != null && A.href) && new URL(globalThis.location.href).searchParams.get(l.querykey) !== e) {
+        const _ = new URL(globalThis.location.href);
+        _.searchParams.set(l.querykey, e), ie(0).then(() => {
+          a ? history.replaceState({}, "", _.toString()) : history.pushState({}, "", _.toString());
         });
       }
-      l.modelValue !== e && O("update:modelValue", e), t.value = e;
+      l.modelValue !== e && O("update:modelValue", e), s.value = e;
     };
-    t.value && b(t.value, !0);
-    const i = (e) => {
-      var s = null;
+    s.value && y(s.value, !0);
+    const o = (e) => {
+      var a = null;
       switch (e) {
         case "first":
-          s = 0;
+          for (a = 0; a < l.items.length - 1 && l.items[a].disabled; )
+            a++;
           break;
-        case "previous":
-          s = (r.value + l.items.length - 1) % l.items.length;
+        case "previous": {
+          let i = 1;
+          for (; i < l.items.length && (a = (r.value + l.items.length - i) % l.items.length, l.items[a].disabled); )
+            i++;
           break;
-        case "next":
-          s = (r.value + 1) % l.items.length;
+        }
+        case "next": {
+          let i = 1;
+          for (; i < l.items.length && (a = (r.value + i) % l.items.length, l.items[a].disabled); )
+            i++;
           break;
+        }
         case "last":
-          s = l.items.length - 1;
+          for (a = l.items.length - 1; a >= 0 && l.items[a].disabled; )
+            a--;
           break;
       }
-      if (s === null)
+      if (a === null)
         throw new Error("Could not navigate to next tab");
-      if (l.items[s].disabled)
+      if (l.items[a].disabled)
         return;
-      const a = l.items[s].key, n = document.querySelector(
-        `#${f}_tab_${a}`
+      const t = l.items[a].key, u = document.querySelector(
+        `#${m}_tab_${t}`
       );
-      n == null || n.focus(), b(a);
+      u == null || u.focus(), y(t);
     }, G = (e) => {
       if (!l.disabled)
         if (e.key === "ArrowRight")
-          i("next");
+          o("next");
         else if (e.key === "ArrowLeft")
-          i("previous");
+          o("previous");
         else if (e.key === "Home")
-          e.preventDefault(), i("first");
+          e.preventDefault(), o("first");
         else if (e.key === "End")
-          e.preventDefault(), i("last");
+          e.preventDefault(), o("last");
         else
           return;
     };
-    return w(
+    return $(
       () => l.modelValue,
       (e) => {
-        e && b(e);
+        e && y(e);
       }
-    ), w(
+    ), $(
       () => {
-        var e, s;
-        return (s = (e = o.value) == null ? void 0 : e.query) == null ? void 0 : s[l.querykey];
+        var e, a;
+        return (a = (e = n.value) == null ? void 0 : e.query) == null ? void 0 : a[l.querykey];
       },
       (e) => {
-        e && typeof e == "string" && b(e);
+        e && typeof e == "string" && y(e);
       }
-    ), w(
-      t,
+    ), $(
+      s,
       async () => {
-        if (p.value) {
-          const e = p.value.querySelector(
+        if (g.value) {
+          const e = g.value.querySelector(
             "[role=tablist] .bb-tab__btn--active"
           );
           e && (await W(), e.scrollIntoView({
@@ -131,68 +139,68 @@ const ne = ["id"], ue = { class: "bb-tab__label-boundary" }, de = { class: "bb-t
       },
       { flush: "post" }
     ), H({
-      isFirst: v,
-      isLast: m,
-      current: t,
+      isFirst: h,
+      isLast: v,
+      current: s,
       currentIndex: r,
-      goTo: i
-    }), (e, s) => (u(), d("div", {
-      id: X(S),
+      goTo: o
+    }), (e, a) => (d(), c("div", {
+      id: X(T),
       ref_key: "tabs",
-      ref: p,
-      class: $(["bb-tab", {
+      ref: g,
+      class: q(["bb-tab", {
         [`bb-tab--${e.direction}`]: !0,
         "bb-tab--disabled": !0
       }])
     }, [
-      c("div", ue, [
-        c("span", null, [
-          y(e.$slots, "header:prepend", U(z(V.value)))
+      b("div", ue, [
+        b("span", null, [
+          f(e.$slots, "header:prepend", U(z(x.value)))
         ]),
-        c("ul", {
-          class: "bb-tab__label-container",
-          role: "tablist",
+        b("ul", {
           ref_key: "tablist",
-          ref: T
+          ref: I,
+          class: "bb-tab__label-container",
+          role: "tablist"
         }, [
-          (u(!0), d(q, null, D(e.items, (a) => (u(), d("li", {
-            key: a.key,
+          (d(!0), c(S, null, D(e.items, (t) => (d(), c("li", {
+            key: t.key,
             role: "presentation"
           }, [
             Y(oe, {
-              id: `${f}_tab_${a.key}`,
-              "aria-selected": t.value === a.key,
-              class: $(["bb-tab__btn", { "bb-tab__btn--active": t.value === a.key }]),
-              disabled: a.disabled || e.disabled,
+              id: `${m}_tab_${t.key}`,
+              "aria-selected": s.value === t.key,
+              class: q(["bb-tab__btn", { "bb-tab__btn--active": s.value === t.key }]),
+              disabled: t.disabled || e.disabled,
               role: "tab",
-              tabindex: t.value === a.key ? 0 : -1,
-              onClick: (n) => b(a.key),
+              tabindex: s.value === t.key ? 0 : -1,
+              onClick: (u) => y(t.key),
               onKeydown: G
             }, {
               default: Z(() => [
-                y(e.$slots, `label-${a.key}`, {
-                  current: t.value,
+                f(e.$slots, `label-${t.key}`, {
+                  current: s.value,
                   currentIndex: r.value,
-                  disabled: !!(a.disabled || e.disabled),
-                  goTo: i,
-                  isFirst: v.value,
-                  isLast: m.value,
-                  selected: t.value === a.key,
-                  text: a.label,
-                  value: a.key
+                  disabled: !!(t.disabled || e.disabled),
+                  goTo: o,
+                  isFirst: h.value,
+                  isLast: v.value,
+                  selected: s.value === t.key,
+                  text: t.label,
+                  value: t.key
                 }, () => [
-                  y(e.$slots, "label", {
-                    current: t.value,
+                  f(e.$slots, "label", {
+                    current: s.value,
                     currentIndex: r.value,
-                    disabled: !!(a.disabled || e.disabled),
-                    goTo: i,
-                    isFirst: v.value,
-                    isLast: m.value,
-                    selected: t.value === a.key,
-                    text: a.label,
-                    value: a.key
+                    disabled: !!(t.disabled || e.disabled),
+                    goTo: o,
+                    isFirst: h.value,
+                    isLast: v.value,
+                    selected: s.value === t.key,
+                    text: t.label,
+                    value: t.key
                   }, () => [
-                    c("span", de, ee(a.label), 1)
+                    b("span", de, ee(t.label), 1)
                   ])
                 ])
               ]),
@@ -200,36 +208,36 @@ const ne = ["id"], ue = { class: "bb-tab__label-boundary" }, de = { class: "bb-t
             }, 1032, ["id", "aria-selected", "class", "disabled", "tabindex", "onClick"])
           ]))), 128))
         ], 512),
-        c("span", null, [
-          y(e.$slots, "header:append", U(z(V.value)))
+        b("span", null, [
+          f(e.$slots, "header:append", U(z(x.value)))
         ])
       ]),
-      c("div", ce, [
-        (u(!0), d(q, null, D(e.items, (a) => (u(), d(q, {
-          key: a.key
+      b("div", ce, [
+        (d(!0), c(S, null, D(e.items, (t) => (d(), c(S, {
+          key: t.key
         }, [
-          t.value === a.key || e.eager || a.eager ? (u(), d("section", {
+          s.value === t.key || e.eager || t.eager ? (d(), c("section", {
             key: 0,
-            id: `${f}_tabpanel_${a.key}`,
-            "aria-labelledby": `${f}_tab_${a.key}`,
-            class: $(["bb-tab__pane", {
-              "bb-tab__pane--shown": t.value === a.key
+            id: `${m}_tabpanel_${t.key}`,
+            "aria-labelledby": `${m}_tab_${t.key}`,
+            class: q(["bb-tab__pane", {
+              "bb-tab__pane--shown": s.value === t.key
             }]),
             role: "tabpanel",
             tabindex: "0"
           }, [
-            y(e.$slots, a.key, {
-              current: t.value,
+            f(e.$slots, t.key, {
+              current: s.value,
               currentIndex: r.value,
-              disabled: !!(a.disabled || e.disabled),
-              goTo: i,
-              isFirst: v.value,
-              isLast: m.value,
-              selected: t.value === a.key,
-              text: a.label,
-              value: a.key
+              disabled: !!(t.disabled || e.disabled),
+              goTo: o,
+              isFirst: h.value,
+              isLast: v.value,
+              selected: s.value === t.key,
+              text: t.label,
+              value: t.key
             })
-          ], 10, be)) : ae("", !0)
+          ], 10, be)) : le("", !0)
         ], 64))), 128))
       ])
     ], 10, ne));

package/dist/index101.js.map

@@ -1 +1 @@
-{"version":3,"file":"index101.js","sources":["../src/components/BbTab/BbTab.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:id=\"id\"\n\t\tref=\"tabs\"\n\t\tclass=\"bb-tab\"\n\t\t:class=\"{\n\t\t\t[`bb-tab--${direction}`]: true,\n\t\t\t'bb-tab--disabled': true,\n\t\t}\"\n\t>\n\t\t<div class=\"bb-tab__label-boundary\">\n\t\t\t<span><slot name=\"header:prepend\" v-bind=\"scrollStatus\"></slot></span>\n\t\t\t<ul class=\"bb-tab__label-container\" role=\"tablist\" ref=\"tablist\">\n\t\t\t\t<li v-for=\"tab in items\" :key=\"tab.key\" role=\"presentation\">\n\t\t\t\t\t<BaseButton\n\t\t\t\t\t\t:id=\"`${instanceid}_tab_${tab.key}`\"\n\t\t\t\t\t\t:aria-selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\tclass=\"bb-tab__btn\"\n\t\t\t\t\t\t:class=\"{ 'bb-tab__btn--active': selectedTab === tab.key }\"\n\t\t\t\t\t\t:disabled=\"tab.disabled || disabled\"\n\t\t\t\t\t\t:role=\"'tab'\"\n\t\t\t\t\t\t:tabindex=\"selectedTab === tab.key ? 0 : -1\"\n\t\t\t\t\t\t@click=\"onTabSelected(tab.key)\"\n\t\t\t\t\t\t@keydown=\"onKeydown\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t\t:name=\"`label-${tab.key}`\"\n\t\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t\t\tname=\"label\"\n\t\t\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"bb-tab__label\">{{ tab.label }}</span>\n\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</BaseButton>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t\t<span><slot name=\"header:append\" v-bind=\"scrollStatus\"></slot></span>\n\t\t</div>\n\t\t<div class=\"bb-tab__panes-container\">\n\t\t\t<template v-for=\"tab in items\" :key=\"tab.key\">\n\t\t\t\t<section\n\t\t\t\t\tv-if=\"selectedTab === tab.key || eager || tab.eager\"\n\t\t\t\t\t:id=\"`${instanceid}_tabpanel_${tab.key}`\"\n\t\t\t\t\t:aria-labelledby=\"`${instanceid}_tab_${tab.key}`\"\n\t\t\t\t\tclass=\"bb-tab__pane\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'bb-tab__pane--shown': selectedTab === tab.key,\n\t\t\t\t\t}\"\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t:name=\"tab.key\"\n\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t></slot>\n\t\t\t\t</section>\n\t\t\t</template>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, getCurrentInstance, computed, nextTick } from 'vue';\nimport { useId } from '@/composables/useId';\nimport { useRoute } from '@/composables/useRoute';\nimport { useRouter } from '@/composables/useRouter';\nimport { wait } from '@/utilities/functions/wait';\nimport { useScroll } from '@vueuse/core';\nimport BaseButton from '../BaseButton/BaseButton.vue';\nimport type { CommonProps } from '@/types/CommonProps';\n\nexport type BbTabItem = Pick<CommonProps, 'disabled'> & {\n\t/**\n\t * Used to render a tab even when not visible.\n\t * It's useful if you want the content of a tab in the DOM\n\t * immediately rendered\n\t * even when not visible for SEO purposes.\n\t */\n\teager?: boolean;\n\t/**\n\t * String that identifies the tab.\n\t */\n\tkey: string;\n\t/**\n\t * Label to use as the tab text.\n\t */\n\tlabel?: string;\n};\n\nexport type BbTabProps = Pick<CommonProps, 'disabled' | 'eager' | 'id'> & {\n\t/**\n\t * Direction of the tabs component\n\t */\n\tdirection?: 'horizontal' | 'vertical';\n\t/**\n\t * Array of items that define the tabs in the component.\n\t */\n\titems: BbTabItem[];\n\t/**\n\t * The current tab. Used by v-model.\n\t */\n\tmodelValue?: null | BbTabItem['key'];\n\t/**\n\t * Synchronizes the current tab with the url.\n\t */\n\tnavigation?: boolean;\n\t/**\n\t * Defines the query key to reference for maintaining navigation\n\t */\n\tquerykey?: string;\n};\n\nconst props = withDefaults(defineProps<BbTabProps>(), {\n\tdirection: 'horizontal',\n\tquerykey: 'tab',\n});\n\nexport type BbTabEvents = {\n\t(e: 'update:modelValue', value: (typeof props.items)[number]['key']): void;\n};\nconst emit = defineEmits<BbTabEvents>();\n\ntype BbStepSlots = {\n\t'header:prepend'?: (props: {\n\t\tisScrolling: boolean;\n\t\tleft: boolean;\n\t\tright: boolean;\n\t}) => any;\n\t'header:append'?: (props: {\n\t\tisScrolling: boolean;\n\t\tleft: boolean;\n\t\tright: boolean;\n\t}) => any;\n\tlabel?: (props: {\n\t\tcurrent: string | null;\n\t\tcurrentIndex: number;\n\t\tdisabled: boolean;\n\t\tisFirst: boolean;\n\t\tisLast: boolean;\n\t\tselected: boolean;\n\t\ttext: BbTabItem['label'];\n\t\tvalue: string;\n\t\tgoTo: typeof goTo;\n\t}) => any;\n} & {\n\t[key: string]: (props: {\n\t\tcurrent: string | null;\n\t\tcurrentIndex: number;\n\t\tdisabled: boolean;\n\t\tisFirst: boolean;\n\t\tisLast: boolean;\n\t\tselected: boolean;\n\t\ttext: BbTabItem['label'];\n\t\tvalue: string;\n\t\tgoTo: typeof goTo;\n\t}) => any;\n};\n\ndefineSlots<BbStepSlots>();\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst tabs = ref();\n\nconst id = props.id ?? useId().id.value;\nconst instanceid = `bb-tab_${id}`;\n\nconst tablist = ref();\nconst { isScrolling, arrivedState } = useScroll(tablist);\nconst scrollStatus = computed(() => ({\n\tisScrolling: isScrolling.value,\n\tleft: arrivedState.left,\n\tright: arrivedState.right,\n}));\n\n/* Ignore because possibly undefined */\n// @ts-expect-error possibly undef\nconst isInertia = !!getCurrentInstance()?.proxy?.$inertia;\n\nconst selectedTab = ref<BbTabItem['key'] | null>(null);\n\nconst currentTabIndex = computed(() =>\n\tprops.items.findIndex((el) => el.key === selectedTab.value)\n);\nconst isFirst = computed(() => currentTabIndex.value === 0);\nconst isLast = computed(() => currentTabIndex.value === props.items.length - 1);\n\nprops.items.forEach((item) => {\n\tif (!item.key) {\n\t\tconsole.error(`A tab item has no key`, item);\n\t\tthrow new Error('A tab item has no key ' + JSON.stringify(item));\n\t}\n});\n\n/* \nThis section retrieves the current tab that should be selected\n*/\n// Retrieve tab from url on load for vue apps\nif (props.navigation && route.value?.query?.[props.querykey]) {\n\tselectedTab.value = route.value?.query?.[props.querykey] as string;\n\t// Retrieve tab from url on load for inertia app\n} else if (\n\tprops.navigation &&\n\tisInertia &&\n\tglobalThis?.location?.href &&\n\tnew URL(globalThis.location.href).searchParams.get(props.querykey)\n) {\n\tselectedTab.value = new URL(globalThis.location.href).searchParams.get(\n\t\tprops.querykey\n\t) as string;\n\t// Else whatever tab is passed first\n} else if (props.modelValue) {\n\tselectedTab.value = props.modelValue;\n\t// Else whatever tab is passed first\n} else if (props.items[0]) {\n\tconst firstSelectableTab = props.items.find((item) => !item.disabled);\n\tif (!firstSelectableTab) {\n\t\tthrow new Error(\n\t\t\t'No tab has been selected so it defaulted to the first available. Still, all the tabs are disabled so no tab can be selected.'\n\t\t);\n\t}\n\tconst key = firstSelectableTab.key;\n\tselectedTab.value = key;\n}\n/* \nOnce the current tab is found update external variables\n*/\n\nconst onTabSelected = async (tab: BbTabItem['key'], replace = false) => {\n\t/* For Vue or Nuxt context */\n\tif (\n\t\tprops.navigation &&\n\t\troute.value &&\n\t\troute.value?.query?.[props.querykey] !== tab\n\t) {\n\t\trouter?.push({\n\t\t\t...route,\n\t\t\tquery: { ...route.value?.query, [props.querykey]: tab },\n\t\t\treplace,\n\t\t});\n\t\t/* Inertia context */\n\t} else if (\n\t\tprops.navigation &&\n\t\tisInertia &&\n\t\tglobalThis?.location?.href &&\n\t\tnew URL(globalThis.location.href).searchParams.get(props.querykey) !== tab\n\t) {\n\t\tconst url = new URL(globalThis.location.href);\n\t\turl.searchParams.set(props.querykey, tab);\n\t\twait(0).then(() => {\n\t\t\tif (replace) {\n\t\t\t\thistory.replaceState({}, '', url.toString());\n\t\t\t} else {\n\t\t\t\thistory.pushState({}, '', url.toString());\n\t\t\t}\n\t\t});\n\t}\n\tif (props.modelValue !== tab) {\n\t\temit('update:modelValue', tab);\n\t}\n\tselectedTab.value = tab;\n};\n\nif (selectedTab.value) {\n\tonTabSelected(selectedTab.value, true);\n}\n\nconst goTo = (target: 'first' | 'previous' | 'next' | 'last') => {\n\tvar nextTabIndex: number | null = null;\n\tswitch (target) {\n\t\tcase 'first':\n\t\t\tnextTabIndex = 0;\n\t\t\tbreak;\n\t\tcase 'previous':\n\t\t\tnextTabIndex =\n\t\t\t\t(currentTabIndex.value + props.items.length - 1) % props.items.length;\n\t\t\tbreak;\n\t\tcase 'next':\n\t\t\tnextTabIndex = (currentTabIndex.value + 1) % props.items.length;\n\t\t\tbreak;\n\t\tcase 'last':\n\t\t\tnextTabIndex = props.items.length - 1;\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tbreak;\n\t}\n\tif (nextTabIndex === null) {\n\t\tthrow new Error('Could not navigate to next tab');\n\t}\n\tif (props.items[nextTabIndex].disabled) return;\n\tconst targetKey = props.items[nextTabIndex].key;\n\tconst button: HTMLButtonElement | null = document.querySelector(\n\t\t`#${instanceid}_tab_${targetKey}`\n\t);\n\tbutton?.focus();\n\tonTabSelected(targetKey);\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n\tif (props.disabled) return;\n\tif (event.key === 'ArrowRight') {\n\t\tgoTo('next');\n\t} else if (event.key === 'ArrowLeft') {\n\t\tgoTo('previous');\n\t} else if (event.key === 'Home') {\n\t\tevent.preventDefault();\n\t\tgoTo('first');\n\t} else if (event.key === 'End') {\n\t\tevent.preventDefault();\n\t\tgoTo('last');\n\t} else {\n\t\treturn;\n\t}\n};\n\nwatch(\n\t() => props.modelValue,\n\t(value) => {\n\t\tif (value) {\n\t\t\tonTabSelected(value);\n\t\t}\n\t}\n);\n\nwatch(\n\t() => route.value?.query?.[props.querykey],\n\t(value) => {\n\t\tif (value && typeof value === 'string') {\n\t\t\tonTabSelected(value);\n\t\t}\n\t}\n);\n\nwatch(\n\tselectedTab,\n\tasync () => {\n\t\tif (tabs.value) {\n\t\t\tconst element = tabs.value.querySelector(\n\t\t\t\t`[role=tablist] .bb-tab__btn--active`\n\t\t\t);\n\t\t\tif (element) {\n\t\t\t\tawait nextTick();\n\t\t\t\telement.scrollIntoView({\n\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\tinline: 'nearest',\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t},\n\t{ flush: 'post' }\n);\n\ndefineExpose({\n\tisFirst,\n\tisLast,\n\tcurrent: selectedTab,\n\tcurrentIndex: currentTabIndex,\n\tgoTo,\n});\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbTab';\n</style>\n"],"names":["props","__props","emit","__emit","route","useRoute","router","useRouter","tabs","ref","id","useId","instanceid","tablist","isScrolling","arrivedState","useScroll","scrollStatus","computed","isInertia","_b","_a","getCurrentInstance","selectedTab","currentTabIndex","el","isFirst","isLast","item","_d","_c","_f","_e","_g","firstSelectableTab","key","onTabSelected","tab","replace","url","wait","goTo","target","nextTabIndex","targetKey","button","onKeydown","event","watch","value","element","nextTick","__expose"],"mappings":"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"}
+{"version":3,"file":"index101.js","sources":["../src/components/BbTab/BbTab.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:id=\"id\"\n\t\tref=\"tabs\"\n\t\tclass=\"bb-tab\"\n\t\t:class=\"{\n\t\t\t[`bb-tab--${direction}`]: true,\n\t\t\t'bb-tab--disabled': true,\n\t\t}\"\n\t>\n\t\t<div class=\"bb-tab__label-boundary\">\n\t\t\t<span><slot name=\"header:prepend\" v-bind=\"scrollStatus\"></slot></span>\n\t\t\t<ul ref=\"tablist\" class=\"bb-tab__label-container\" role=\"tablist\">\n\t\t\t\t<li v-for=\"tab in items\" :key=\"tab.key\" role=\"presentation\">\n\t\t\t\t\t<BaseButton\n\t\t\t\t\t\t:id=\"`${instanceid}_tab_${tab.key}`\"\n\t\t\t\t\t\t:aria-selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\tclass=\"bb-tab__btn\"\n\t\t\t\t\t\t:class=\"{ 'bb-tab__btn--active': selectedTab === tab.key }\"\n\t\t\t\t\t\t:disabled=\"tab.disabled || disabled\"\n\t\t\t\t\t\t:role=\"'tab'\"\n\t\t\t\t\t\t:tabindex=\"selectedTab === tab.key ? 0 : -1\"\n\t\t\t\t\t\t@click=\"onTabSelected(tab.key)\"\n\t\t\t\t\t\t@keydown=\"onKeydown\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t\t:name=\"`label-${tab.key}`\"\n\t\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot\n\t\t\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t\t\tname=\"label\"\n\t\t\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span class=\"bb-tab__label\">{{ tab.label }}</span>\n\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</BaseButton>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t\t<span><slot name=\"header:append\" v-bind=\"scrollStatus\"></slot></span>\n\t\t</div>\n\t\t<div class=\"bb-tab__panes-container\">\n\t\t\t<template v-for=\"tab in items\" :key=\"tab.key\">\n\t\t\t\t<section\n\t\t\t\t\tv-if=\"selectedTab === tab.key || eager || tab.eager\"\n\t\t\t\t\t:id=\"`${instanceid}_tabpanel_${tab.key}`\"\n\t\t\t\t\t:aria-labelledby=\"`${instanceid}_tab_${tab.key}`\"\n\t\t\t\t\tclass=\"bb-tab__pane\"\n\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t'bb-tab__pane--shown': selectedTab === tab.key,\n\t\t\t\t\t}\"\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t>\n\t\t\t\t\t<slot\n\t\t\t\t\t\t:current=\"selectedTab\"\n\t\t\t\t\t\t:current-index=\"currentTabIndex\"\n\t\t\t\t\t\t:disabled=\"!!(tab.disabled || disabled)\"\n\t\t\t\t\t\t:go-to=\"goTo\"\n\t\t\t\t\t\t:is-first=\"isFirst\"\n\t\t\t\t\t\t:is-last=\"isLast\"\n\t\t\t\t\t\t:name=\"tab.key\"\n\t\t\t\t\t\t:selected=\"selectedTab === tab.key\"\n\t\t\t\t\t\t:text=\"tab.label\"\n\t\t\t\t\t\t:value=\"tab.key\"\n\t\t\t\t\t></slot>\n\t\t\t\t</section>\n\t\t\t</template>\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, watch, getCurrentInstance, computed, nextTick } from 'vue';\nimport { useId } from '@/composables/useId';\nimport { useRoute } from '@/composables/useRoute';\nimport { useRouter } from '@/composables/useRouter';\nimport { wait } from '@/utilities/functions/wait';\nimport { useScroll } from '@vueuse/core';\nimport BaseButton from '../BaseButton/BaseButton.vue';\nimport type { CommonProps } from '@/types/CommonProps';\n\nexport type BbTabItem = Pick<CommonProps, 'disabled'> & {\n\t/**\n\t * Used to render a tab even when not visible.\n\t * It's useful if you want the content of a tab in the DOM\n\t * immediately rendered\n\t * even when not visible for SEO purposes.\n\t */\n\teager?: boolean;\n\t/**\n\t * String that identifies the tab.\n\t */\n\tkey: string;\n\t/**\n\t * Label to use as the tab text.\n\t */\n\tlabel?: string;\n};\n\nexport type BbTabProps = Pick<CommonProps, 'disabled' | 'eager' | 'id'> & {\n\t/**\n\t * Direction of the tabs component\n\t */\n\tdirection?: 'horizontal' | 'vertical';\n\t/**\n\t * Array of items that define the tabs in the component.\n\t */\n\titems: BbTabItem[];\n\t/**\n\t * The current tab. Used by v-model.\n\t */\n\tmodelValue?: null | BbTabItem['key'];\n\t/**\n\t * Synchronizes the current tab with the url.\n\t */\n\tnavigation?: boolean;\n\t/**\n\t * Defines the query key to reference for maintaining navigation\n\t */\n\tquerykey?: string;\n};\n\nconst props = withDefaults(defineProps<BbTabProps>(), {\n\tdirection: 'horizontal',\n\tquerykey: 'tab',\n});\n\nexport type BbTabEvents = {\n\t(e: 'update:modelValue', value: (typeof props.items)[number]['key']): void;\n};\nconst emit = defineEmits<BbTabEvents>();\n\ntype BbStepSlots = {\n\t'header:prepend'?: (props: {\n\t\tisScrolling: boolean;\n\t\tleft: boolean;\n\t\tright: boolean;\n\t}) => any;\n\t'header:append'?: (props: {\n\t\tisScrolling: boolean;\n\t\tleft: boolean;\n\t\tright: boolean;\n\t}) => any;\n\tlabel?: (props: {\n\t\tcurrent: string | null;\n\t\tcurrentIndex: number;\n\t\tdisabled: boolean;\n\t\tisFirst: boolean;\n\t\tisLast: boolean;\n\t\tselected: boolean;\n\t\ttext: BbTabItem['label'];\n\t\tvalue: string;\n\t\tgoTo: typeof goTo;\n\t}) => any;\n} & {\n\t[key: string]: (props: {\n\t\tcurrent: string | null;\n\t\tcurrentIndex: number;\n\t\tdisabled: boolean;\n\t\tisFirst: boolean;\n\t\tisLast: boolean;\n\t\tselected: boolean;\n\t\ttext: BbTabItem['label'];\n\t\tvalue: string;\n\t\tgoTo: typeof goTo;\n\t}) => any;\n};\n\ndefineSlots<BbStepSlots>();\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst tabs = ref();\n\nconst id = props.id ?? useId().id.value;\nconst instanceid = `bb-tab_${id}`;\n\nconst tablist = ref();\nconst { isScrolling, arrivedState } = useScroll(tablist);\nconst scrollStatus = computed(() => ({\n\tisScrolling: isScrolling.value,\n\tleft: arrivedState.left,\n\tright: arrivedState.right,\n}));\n\n/* Ignore because possibly undefined */\n// @ts-expect-error possibly undef\nconst isInertia = !!getCurrentInstance()?.proxy?.$inertia;\n\nconst selectedTab = ref<BbTabItem['key'] | null>(null);\n\nconst currentTabIndex = computed(() =>\n\tprops.items.findIndex((el) => el.key === selectedTab.value)\n);\nconst isFirst = computed(() => currentTabIndex.value === 0);\nconst isLast = computed(() => currentTabIndex.value === props.items.length - 1);\n\nprops.items.forEach((item) => {\n\tif (!item.key) {\n\t\tconsole.error(`A tab item has no key`, item);\n\t\tthrow new Error('A tab item has no key ' + JSON.stringify(item));\n\t}\n});\n\n/* \nThis section retrieves the current tab that should be selected\n*/\n// Retrieve tab from url on load for vue apps\nif (props.navigation && route.value?.query?.[props.querykey]) {\n\tselectedTab.value = route.value?.query?.[props.querykey] as string;\n\t// Retrieve tab from url on load for inertia app\n} else if (\n\tprops.navigation &&\n\tisInertia &&\n\tglobalThis?.location?.href &&\n\tnew URL(globalThis.location.href).searchParams.get(props.querykey)\n) {\n\tselectedTab.value = new URL(globalThis.location.href).searchParams.get(\n\t\tprops.querykey\n\t) as string;\n\t// Else whatever tab is passed first\n} else if (props.modelValue) {\n\tselectedTab.value = props.modelValue;\n\t// Else whatever tab is passed first\n} else if (props.items[0]) {\n\tconst firstSelectableTab = props.items.find((item) => !item.disabled);\n\tif (!firstSelectableTab) {\n\t\tthrow new Error(\n\t\t\t'No tab has been selected so it defaulted to the first available. Still, all the tabs are disabled so no tab can be selected.'\n\t\t);\n\t}\n\tconst key = firstSelectableTab.key;\n\tselectedTab.value = key;\n}\n/* \nOnce the current tab is found update external variables\n*/\n\nconst onTabSelected = async (tab: BbTabItem['key'], replace = false) => {\n\t/* For Vue or Nuxt context */\n\tif (\n\t\tprops.navigation &&\n\t\troute.value &&\n\t\troute.value?.query?.[props.querykey] !== tab\n\t) {\n\t\trouter?.push({\n\t\t\t...route,\n\t\t\tquery: { ...route.value?.query, [props.querykey]: tab },\n\t\t\treplace,\n\t\t});\n\t\t/* Inertia context */\n\t} else if (\n\t\tprops.navigation &&\n\t\tisInertia &&\n\t\tglobalThis?.location?.href &&\n\t\tnew URL(globalThis.location.href).searchParams.get(props.querykey) !== tab\n\t) {\n\t\tconst url = new URL(globalThis.location.href);\n\t\turl.searchParams.set(props.querykey, tab);\n\t\twait(0).then(() => {\n\t\t\tif (replace) {\n\t\t\t\thistory.replaceState({}, '', url.toString());\n\t\t\t} else {\n\t\t\t\thistory.pushState({}, '', url.toString());\n\t\t\t}\n\t\t});\n\t}\n\tif (props.modelValue !== tab) {\n\t\temit('update:modelValue', tab);\n\t}\n\tselectedTab.value = tab;\n};\n\nif (selectedTab.value) {\n\tonTabSelected(selectedTab.value, true);\n}\n\nconst goTo = (target: 'first' | 'previous' | 'next' | 'last') => {\n\tvar nextTabIndex: number | null = null;\n\tswitch (target) {\n\t\tcase 'first':\n\t\t\tnextTabIndex = 0;\n\t\t\twhile (nextTabIndex < props.items.length - 1) {\n\t\t\t\tif (props.items[nextTabIndex].disabled) {\n\t\t\t\t\tnextTabIndex++;\n\t\t\t\t} else break;\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'previous': {\n\t\t\tlet offset = 1;\n\t\t\twhile (offset < props.items.length) {\n\t\t\t\tnextTabIndex =\n\t\t\t\t\t(currentTabIndex.value + props.items.length - offset) %\n\t\t\t\t\tprops.items.length;\n\t\t\t\tif (props.items[nextTabIndex].disabled) {\n\t\t\t\t\toffset++;\n\t\t\t\t} else break;\n\t\t\t}\n\t\t\tbreak;\n\t\t}\n\t\tcase 'next': {\n\t\t\tlet offset = 1;\n\t\t\twhile (offset < props.items.length) {\n\t\t\t\tnextTabIndex = (currentTabIndex.value + offset) % props.items.length;\n\t\t\t\tif (props.items[nextTabIndex].disabled) {\n\t\t\t\t\toffset++;\n\t\t\t\t} else break;\n\t\t\t}\n\t\t\tbreak;\n\t\t}\n\n\t\tcase 'last':\n\t\t\tnextTabIndex = props.items.length - 1;\n\t\t\twhile (nextTabIndex >= 0) {\n\t\t\t\tif (props.items[nextTabIndex].disabled) {\n\t\t\t\t\tnextTabIndex--;\n\t\t\t\t} else break;\n\t\t\t}\n\t\t\tbreak;\n\t\tdefault:\n\t\t\tbreak;\n\t}\n\tif (nextTabIndex === null) {\n\t\tthrow new Error('Could not navigate to next tab');\n\t}\n\tif (props.items[nextTabIndex].disabled) return;\n\tconst targetKey = props.items[nextTabIndex].key;\n\tconst button: HTMLButtonElement | null = document.querySelector(\n\t\t`#${instanceid}_tab_${targetKey}`\n\t);\n\tbutton?.focus();\n\tonTabSelected(targetKey);\n};\n\nconst onKeydown = (event: KeyboardEvent) => {\n\tif (props.disabled) return;\n\tif (event.key === 'ArrowRight') {\n\t\tgoTo('next');\n\t} else if (event.key === 'ArrowLeft') {\n\t\tgoTo('previous');\n\t} else if (event.key === 'Home') {\n\t\tevent.preventDefault();\n\t\tgoTo('first');\n\t} else if (event.key === 'End') {\n\t\tevent.preventDefault();\n\t\tgoTo('last');\n\t} else {\n\t\treturn;\n\t}\n};\n\nwatch(\n\t() => props.modelValue,\n\t(value) => {\n\t\tif (value) {\n\t\t\tonTabSelected(value);\n\t\t}\n\t}\n);\n\nwatch(\n\t() => route.value?.query?.[props.querykey],\n\t(value) => {\n\t\tif (value && typeof value === 'string') {\n\t\t\tonTabSelected(value);\n\t\t}\n\t}\n);\n\nwatch(\n\tselectedTab,\n\tasync () => {\n\t\tif (tabs.value) {\n\t\t\tconst element = tabs.value.querySelector(\n\t\t\t\t`[role=tablist] .bb-tab__btn--active`\n\t\t\t);\n\t\t\tif (element) {\n\t\t\t\tawait nextTick();\n\t\t\t\telement.scrollIntoView({\n\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\tinline: 'nearest',\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t},\n\t{ flush: 'post' }\n);\n\ndefineExpose({\n\tisFirst,\n\tisLast,\n\tcurrent: selectedTab,\n\tcurrentIndex: currentTabIndex,\n\tgoTo,\n});\n</script>\n\n<style lang=\"postcss\">\n@import '@/assets/css/BbTab';\n</style>\n"],"names":["props","__props","emit","__emit","route","useRoute","router","useRouter","tabs","ref","id","useId","instanceid","tablist","isScrolling","arrivedState","useScroll","scrollStatus","computed","isInertia","_b","_a","getCurrentInstance","selectedTab","currentTabIndex","el","isFirst","isLast","item","_d","_c","_f","_e","_g","firstSelectableTab","key","onTabSelected","tab","replace","url","wait","goTo","target","nextTabIndex","offset","targetKey","button","onKeydown","event","watch","value","element","nextTick","__expose"],"mappings":"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"}