bitboss-ui 2.0.165 → 2.0.166

package/dist/index119.js

@@ -1,34 +1,304 @@
-import { defineComponent as l, openBlock as e, createBlock as o, withCtx as r, createElementVNode as c, normalizeClass as m, createVNode as i, TransitionGroup as u, createElementBlock as p, Fragment as f, renderList as _, unref as n, mergeProps as d } from "vue";
-import { state as k, useToast as b } from "./index11.js";
-import C from "./index252.js";
-import B from "./index315.js";
-const V = /* @__PURE__ */ l({
-  __name: "BbToast",
+import { defineComponent as ee, ref as n, computed as $, getCurrentInstance as te, watch as b, nextTick as le, onMounted as ae, createElementBlock as p, openBlock as f, normalizeClass as T, unref as ie, createElementVNode as h, renderSlot as k, normalizeProps as U, guardReactiveProps as W, normalizeStyle as se, Fragment as K, renderList as O, createVNode as J, withCtx as I, toDisplayString as re, createBlock as ne, Transition as oe, createCommentVNode as ue } from "vue";
+import { useId as de } from "./index8.js";
+import { useRoute as ce } from "./index142.js";
+import { useRouter as be } from "./index143.js";
+import { wait as fe } from "./index135.js";
+import { useScroll as he, useResizeObserver as ye } from "./index137.js";
+import me from "./index13.js";
+/* empty css        */
+import ve from "./index111.js";
+/* empty css         */
+const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-tab__label" }, _e = { class: "bb-tab__panes-container" }, we = ["id", "aria-labelledby"], Re = /* @__PURE__ */ ee({
+  __name: "BbTab",
   props: {
-    placement: { default: "bottom" }
+    disabled: { type: Boolean },
+    eager: { type: Boolean },
+    id: {},
+    animate: { type: Boolean, default: !0 },
+    direction: { default: "horizontal" },
+    items: {},
+    modelValue: {},
+    navigation: { type: Boolean },
+    querykey: { default: "tab" },
+    replace: { type: Boolean }
   },
-  setup(T) {
-    const { dismiss: a } = b();
-    return (s, $) => (e(), o(C, null, {
-      default: r(() => [
-        c("div", {
-          class: m(["bb-toast", { [`bb-toast--${s.placement}`]: !0 }])
-        }, [
-          i(u, { name: "toast" }, {
-            default: r(() => [
-              (e(!0), p(f, null, _(n(k).stack, (t) => (e(), o(B, d({
-                key: t.id,
-                ref_for: !0
-              }, t, { "onClick:close": n(a) }), null, 16, ["onClick:close"]))), 128))
-            ]),
-            _: 1
+  emits: ["update:modelValue"],
+  setup(M, { expose: j, emit: G }) {
+    var A, H;
+    const t = M, Q = G, d = ce(), q = be(), S = n(), L = t.id ?? de().id.value, g = `bb-tab_${L}`, c = n(), { isScrolling: X, arrivedState: V } = he(c), B = $(() => ({
+      isScrolling: X.value,
+      left: V.left,
+      right: V.right
+    })), C = !!((H = (A = te()) == null ? void 0 : A.proxy) != null && H.$inertia), i = n(null), o = $(
+      () => t.items.findIndex((e) => e.key === i.value)
+    ), _ = $(() => o.value === 0), w = $(() => o.value === t.items.length - 1);
+    t.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));
+    });
+    const R = () => {
+      var e, a, l, r, s;
+      if (t.navigation && ((a = (e = d.value) == null ? void 0 : e.query) != null && a[t.querykey]))
+        i.value = (r = (l = d.value) == null ? void 0 : l.query) == null ? void 0 : r[t.querykey];
+      else if (t.navigation && C && ((s = globalThis == null ? void 0 : globalThis.location) != null && s.href) && new URL(globalThis.location.href).searchParams.get(t.querykey))
+        i.value = new URL(globalThis.location.href).searchParams.get(
+          t.querykey
+        );
+      else if (t.modelValue)
+        i.value = t.modelValue;
+      else if (t.items[0]) {
+        const m = t.items.find((Z) => !Z.disabled);
+        if (!m)
+          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 v = m.key;
+        i.value = v;
+      }
+    };
+    R();
+    const y = async (e, a = !1) => {
+      var l, r, s, m;
+      if (t.navigation && d.value && ((r = (l = d.value) == null ? void 0 : l.query) == null ? void 0 : r[t.querykey]) !== e)
+        q == null || q.push({
+          ...d,
+          query: { ...(s = d.value) == null ? void 0 : s.query, [t.querykey]: e },
+          replace: a
+        });
+      else if (t.navigation && C && ((m = globalThis == null ? void 0 : globalThis.location) != null && m.href) && new URL(globalThis.location.href).searchParams.get(t.querykey) !== e) {
+        const v = new URL(globalThis.location.href);
+        v.searchParams.set(t.querykey, e), fe(0).then(() => {
+          a ? history.replaceState({}, "", v.toString()) : history.pushState({}, "", v.toString());
+        });
+      }
+      t.modelValue !== e && Q("update:modelValue", e), i.value = e;
+    };
+    i.value && y(i.value, !0);
+    const u = (e) => {
+      var a = null;
+      switch (e) {
+        case "first":
+          for (a = 0; a < t.items.length - 1 && t.items[a].disabled; )
+            a++;
+          break;
+        case "previous": {
+          let s = 1;
+          for (; s < t.items.length && (a = (o.value + t.items.length - s) % t.items.length, t.items[a].disabled); )
+            s++;
+          break;
+        }
+        case "next": {
+          let s = 1;
+          for (; s < t.items.length && (a = (o.value + s) % t.items.length, t.items[a].disabled); )
+            s++;
+          break;
+        }
+        case "last":
+          for (a = t.items.length - 1; a >= 0 && t.items[a].disabled; )
+            a--;
+          break;
+      }
+      if (a === null)
+        throw new Error("Could not navigate to next tab");
+      if (t.items[a].disabled) return;
+      const l = t.items[a].key, r = document.querySelector(
+        `#${g}_tab_${l}`
+      );
+      r == null || r.focus(), y(l, t.replace);
+    }, Y = (e) => {
+      if (!t.disabled)
+        if (e.key === "ArrowRight")
+          u("next");
+        else if (e.key === "ArrowLeft")
+          u("previous");
+        else if (e.key === "Home")
+          e.preventDefault(), u("first");
+        else if (e.key === "End")
+          e.preventDefault(), u("last");
+        else
+          return;
+    };
+    b(
+      () => t.modelValue,
+      (e) => {
+        e && y(e, t.replace);
+      }
+    ), b(
+      () => {
+        var e, a;
+        return (a = (e = d.value) == null ? void 0 : e.query) == null ? void 0 : a[t.querykey];
+      },
+      (e) => {
+        e && typeof e == "string" && y(e, t.replace);
+      }
+    ), b(
+      i,
+      async () => {
+        if (S.value) {
+          const e = S.value.querySelector(
+            "[role=tablist] .bb-tab__btn--active"
+          );
+          e && (await le(), e.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "nearest"
+          }));
+        }
+      },
+      { flush: "post" }
+    );
+    const P = n("right");
+    b(
+      i,
+      (e, a) => {
+        if (e && a) {
+          const l = t.items.findIndex((s) => s.key === e), r = t.items.findIndex((s) => s.key === a);
+          P.value = l > r ? "right" : "left";
+        }
+      },
+      { flush: "sync" }
+    );
+    const E = n(0), z = n(0), D = n(0), F = n(0), N = n(0), x = () => {
+      if (!c.value)
+        return;
+      const e = c.value.querySelector(
+        ".bb-tab__btn--active"
+      );
+      e && (D.value = e.offsetLeft, F.value = e.offsetTop, E.value = e.clientWidth, z.value = e.clientHeight, N.value = c.value.scrollWidth);
+    };
+    return ae(x), b(i, x, { flush: "post" }), ye(c, () => {
+      x();
+    }), b(
+      () => t.items,
+      () => {
+        i.value && !t.items.find((e) => e.key === i.value) && R();
+      },
+      {
+        immediate: !0,
+        deep: !0
+      }
+    ), j({
+      isFirst: _,
+      isLast: w,
+      current: i,
+      currentIndex: o,
+      goTo: u
+    }), (e, a) => (f(), p("div", {
+      id: ie(L),
+      ref_key: "tabs",
+      ref: S,
+      class: T(["bb-tab", {
+        [`bb-tab--${e.direction}`]: !0,
+        "bb-tab--disabled": !0
+      }])
+    }, [
+      h("div", ke, [
+        h("span", null, [
+          k(e.$slots, "header:prepend", U(W(B.value)))
+        ]),
+        h("ul", {
+          ref_key: "tablist",
+          ref: c,
+          class: "bb-tab__label-container",
+          role: "tablist",
+          style: se({
+            "--inner-width": `${N.value}px`,
+            "--width": `${E.value}px`,
+            "--height": `${z.value}px`,
+            "--left": `${D.value}px`,
+            "--top": `${F.value}px`
           })
-        ], 2)
+        }, [
+          (f(!0), p(K, null, O(e.items, (l) => (f(), p("li", {
+            key: l.key,
+            role: "presentation"
+          }, [
+            J(me, {
+              id: `${g}_tab_${l.key}`,
+              "aria-selected": i.value === l.key,
+              class: T(["bb-tab__btn", { "bb-tab__btn--active": i.value === l.key }]),
+              disabled: l.disabled || e.disabled,
+              role: "tab",
+              tabindex: i.value === l.key ? 0 : -1,
+              onClick: (r) => y(l.key, t.replace),
+              onKeydown: Y
+            }, {
+              default: I(() => [
+                k(e.$slots, `label-${l.key}`, {
+                  current: i.value,
+                  currentIndex: o.value,
+                  disabled: !!(l.disabled || e.disabled),
+                  goTo: u,
+                  isFirst: _.value,
+                  isLast: w.value,
+                  selected: i.value === l.key,
+                  text: l.label,
+                  value: l.key
+                }, () => [
+                  k(e.$slots, "label", {
+                    current: i.value,
+                    currentIndex: o.value,
+                    disabled: !!(l.disabled || e.disabled),
+                    goTo: u,
+                    isFirst: _.value,
+                    isLast: w.value,
+                    selected: i.value === l.key,
+                    text: l.label,
+                    value: l.key
+                  }, () => [
+                    h("span", ge, re(l.label), 1)
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1032, ["id", "aria-selected", "class", "disabled", "tabindex", "onClick"])
+          ]))), 128))
+        ], 4),
+        h("span", null, [
+          k(e.$slots, "header:append", U(W(B.value)))
+        ])
       ]),
-      _: 1
-    }));
+      h("div", _e, [
+        J(ve, null, {
+          default: I(() => [
+            (f(!0), p(K, null, O(e.items, (l) => (f(), ne(oe, {
+              key: l.key,
+              css: e.animate,
+              name: `tab-slide-${P.value}`
+            }, {
+              default: I(() => [
+                i.value === l.key || e.eager || l.eager ? (f(), p("section", {
+                  key: 0,
+                  id: `${g}_tabpanel_${l.key}`,
+                  "aria-labelledby": `${g}_tab_${l.key}`,
+                  class: T(["bb-tab__pane", {
+                    "bb-tab__pane--shown": i.value === l.key
+                  }]),
+                  role: "tabpanel",
+                  tabindex: "0"
+                }, [
+                  k(e.$slots, l.key, {
+                    current: i.value,
+                    currentIndex: o.value,
+                    disabled: !!(l.disabled || e.disabled),
+                    goTo: u,
+                    isFirst: _.value,
+                    isLast: w.value,
+                    selected: i.value === l.key,
+                    text: l.label,
+                    value: l.key
+                  })
+                ], 10, we)) : ue("", !0)
+              ]),
+              _: 2
+            }, 1032, ["css", "name"]))), 128))
+          ]),
+          _: 3
+        })
+      ])
+    ], 10, pe));
   }
 });
 export {
-  V as default
+  Re as default
 };

package/dist/index12.js

@@ -1,10 +1,10 @@
-import { copy as D } from "./index134.js";
+import { copy as D } from "./index139.js";
 import { reactive as G, watch as v, toValue as H, computed as g, provide as Q } from "vue";
-import { isNotNil as a } from "./index135.js";
-import { mapValues as X } from "./index136.js";
-import { useRoute as Z } from "./index137.js";
-import { useRouter as _ } from "./index138.js";
-import { useStepper as ee } from "./index132.js";
+import { isNotNil as a } from "./index140.js";
+import { mapValues as X } from "./index141.js";
+import { useRoute as Z } from "./index142.js";
+import { useRouter as _ } from "./index143.js";
+import { useStepper as ee } from "./index137.js";
 const te = Symbol(), x = /((step\/)(?<step>[\s\S]+?)(?=[/?]))|((step\/)(?<step2>[\s\S]+))/, O = (i) => {
   var r, u;
   const e = i.match(x);