bitboss-ui 2.0.37 → 2.0.39

package/dist/index108.js

@@ -1,117 +1,295 @@
-import { defineComponent as v, ref as y, computed as B, openBlock as g, createBlock as k, withCtx as l, renderSlot as r, normalizeProps as n, guardReactiveProps as i, createVNode as $, mergeProps as w } from "vue";
-import V from "./index25.js";
+import { defineComponent as se, ref as n, computed as _, getCurrentInstance as re, watch as y, nextTick as ne, onMounted as oe, openBlock as b, createElementBlock as m, unref as ue, normalizeClass as x, createElementVNode as c, renderSlot as v, normalizeProps as M, guardReactiveProps as O, normalizeStyle as j, Fragment as G, renderList as Q, createVNode as X, withCtx as T, toDisplayString as de, createBlock as ce, Transition as be, createCommentVNode as he } from "vue";
+import { useId as fe } from "./index8.js";
+import { useRoute as ye } from "./index136.js";
+import { useRouter as me } from "./index137.js";
+import { wait as ve } from "./index131.js";
+import { useScroll as pe, useWindowSize as ke } from "./index132.js";
+import ge from "./index13.js";
 /* empty css        */
-import P from "./index43.js";
-/* empty css        */
-const K = /* @__PURE__ */ v({
-  __name: "BbTag",
+import _e from "./index127.js";
+/* empty css         */
+import { throttledWatch as we } from "./index205.js";
+const $e = ["id"], Se = { class: "bb-tab__label-boundary" }, qe = { class: "bb-tab__label" }, xe = { class: "bb-tab__panes-container" }, Te = ["id", "aria-labelledby"], Fe = /* @__PURE__ */ se({
+  __name: "BbTab",
   props: {
-    "append:icon": {},
-    autocomplete: {},
-    autofocus: {},
-    comma: { type: Boolean },
-    direction: {},
     disabled: { type: Boolean },
-    divider: {},
-    errors: {},
-    hasErrors: { type: Boolean },
-    hideLabel: { type: Boolean },
-    hint: {},
+    eager: { type: Boolean },
     id: {},
-    label: {},
-    labelPosition: {},
-    loading: { type: Boolean },
+    animate: { type: Boolean, default: !0 },
+    direction: { default: "horizontal" },
+    items: {},
     modelValue: {},
-    multiple: { type: Boolean, default: !0 },
-    name: {},
-    persistentHint: { type: Boolean },
-    placeholder: {},
-    "prepend:icon": {},
-    readonly: {},
-    required: { type: Boolean },
-    reverse: { type: Boolean }
+    navigation: { type: Boolean },
+    querykey: { default: "tab" },
+    replace: { type: Boolean }
   },
-  emits: ["blur", "change", "click", "duplicate", "focus", "inactive", "input", "keydown", "keyup", "update:modelValue"],
-  setup(t, { emit: u }) {
-    const d = t, a = u, p = y(!1), m = B(() => d.persistentHint || p.value), c = {
-      onBlur: (e) => a("blur", e),
-      onChange: (e) => a("change", e),
-      onClick: (e) => a("click", e),
-      onDuplicate: (e) => a("duplicate", e),
-      onFocus: (e) => {
-        p.value = !0, a("focus", e);
+  emits: ["update:modelValue"],
+  setup(Y, { expose: Z, emit: ee }) {
+    var D, F, N, A, H, U, K;
+    const t = Y, te = ee, d = ye(), w = me(), $ = n(), I = t.id ?? fe().id.value, p = `bb-tab_${I}`, h = n(), { isScrolling: le, arrivedState: L } = pe(h), V = _(() => ({
+      isScrolling: le.value,
+      left: L.left,
+      right: L.right
+    })), B = !!((F = (D = re()) == null ? void 0 : D.proxy) != null && F.$inertia), i = n(null), o = _(
+      () => t.items.findIndex((e) => e.key === i.value)
+    ), k = _(() => o.value === 0), g = _(() => o.value === t.items.length - 1);
+    if (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));
+    }), t.navigation && ((A = (N = d.value) == null ? void 0 : N.query) != null && A[t.querykey]))
+      i.value = (U = (H = d.value) == null ? void 0 : H.query) == null ? void 0 : U[t.querykey];
+    else if (t.navigation && B && ((K = globalThis == null ? void 0 : globalThis.location) != null && K.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 e = t.items.find((l) => !l.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 a = e.key;
+      i.value = a;
+    }
+    const f = async (e, a = !1) => {
+      var l, r, s, J;
+      if (t.navigation && d.value && ((r = (l = d.value) == null ? void 0 : l.query) == null ? void 0 : r[t.querykey]) !== e)
+        w == null || w.push({
+          ...d,
+          query: { ...(s = d.value) == null ? void 0 : s.query, [t.querykey]: e },
+          replace: a
+        });
+      else if (t.navigation && B && ((J = globalThis == null ? void 0 : globalThis.location) != null && J.href) && new URL(globalThis.location.href).searchParams.get(t.querykey) !== e) {
+        const q = new URL(globalThis.location.href);
+        q.searchParams.set(t.querykey, e), ve(0).then(() => {
+          a ? history.replaceState({}, "", q.toString()) : history.pushState({}, "", q.toString());
+        });
+      }
+      t.modelValue !== e && te("update:modelValue", e), i.value = e;
+    };
+    i.value && f(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(
+        `#${p}_tab_${l}`
+      );
+      r == null || r.focus(), f(l, t.replace);
+    }, ae = (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;
+    };
+    y(
+      () => t.modelValue,
+      (e) => {
+        e && f(e, t.replace);
+      }
+    ), y(
+      () => {
+        var e, a;
+        return (a = (e = d.value) == null ? void 0 : e.query) == null ? void 0 : a[t.querykey];
       },
-      onInactive: () => {
-        p.value = !1, a("inactive");
+      (e) => {
+        e && typeof e == "string" && f(e, t.replace);
+      }
+    ), y(
+      i,
+      async () => {
+        if ($.value) {
+          const e = $.value.querySelector(
+            "[role=tablist] .bb-tab__btn--active"
+          );
+          e && (await ne(), e.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "nearest"
+          }));
+        }
       },
-      onInput: (e) => a("input", e),
-      onKeydown: (e) => a("keydown", e),
-      onKeyup: (e) => a("keyup", e),
-      "onUpdate:modelValue": (e) => a("update:modelValue", e)
+      { flush: "post" }
+    );
+    const C = n("right");
+    y(
+      i,
+      (e, a) => {
+        if (e && a) {
+          const l = t.items.findIndex((s) => s.key === e), r = t.items.findIndex((s) => s.key === a);
+          C.value = l > r ? "right" : "left";
+        }
+      },
+      { flush: "sync" }
+    );
+    const R = n(0), E = n(0), P = n(0), W = n(0), z = n(0), S = () => {
+      if (!h.value) return;
+      const e = h.value.querySelector(
+        ".bb-tab__btn--active"
+      );
+      e && (P.value = e.offsetLeft, W.value = e.offsetTop, R.value = e.clientWidth, E.value = e.clientHeight, z.value = h.value.scrollWidth);
     };
-    return (e, q) => (g(), k(V, {
-      id: e.id,
-      class: "bb-tag",
-      direction: e.direction,
-      errors: e.errors,
-      "has-errors": e.hasErrors,
-      "hide-label": e.hideLabel,
-      hint: e.hint,
-      label: e.label,
-      "label-position": e.labelPosition,
-      "model-value": e.modelValue,
-      name: e.name,
-      reverse: e.reverse,
-      "show-hint": m.value
-    }, {
-      label: l((s) => [
-        r(e.$slots, "label", n(i(s)))
+    oe(S), y(i, S, { flush: "post" });
+    const { width: ie } = ke();
+    return we(ie, S, { throttle: 100 }), Z({
+      isFirst: k,
+      isLast: g,
+      current: i,
+      currentIndex: o,
+      goTo: u
+    }), (e, a) => (b(), m("div", {
+      id: ue(I),
+      ref_key: "tabs",
+      ref: $,
+      class: x(["bb-tab", {
+        [`bb-tab--${e.direction}`]: !0,
+        "bb-tab--disabled": !0
+      }])
+    }, [
+      c("div", Se, [
+        c("span", null, [
+          v(e.$slots, "header:prepend", M(O(V.value)))
+        ]),
+        c("ul", {
+          ref_key: "tablist",
+          ref: h,
+          class: "bb-tab__label-container",
+          role: "tablist",
+          style: j({
+            "--inner-width": `${z.value}px`
+          })
+        }, [
+          c("span", {
+            class: "bb-tab__highlight",
+            style: j({
+              "--width": `${R.value}px`,
+              "--height": `${E.value}px`,
+              "--left": `${P.value}px`,
+              "--top": `${W.value}px`
+            })
+          }, null, 4),
+          (b(!0), m(G, null, Q(e.items, (l) => (b(), m("li", {
+            key: l.key,
+            role: "presentation"
+          }, [
+            X(ge, {
+              id: `${p}_tab_${l.key}`,
+              "aria-selected": i.value === l.key,
+              class: x(["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) => f(l.key, t.replace),
+              onKeydown: ae
+            }, {
+              default: T(() => [
+                v(e.$slots, `label-${l.key}`, {
+                  current: i.value,
+                  currentIndex: o.value,
+                  disabled: !!(l.disabled || e.disabled),
+                  goTo: u,
+                  isFirst: k.value,
+                  isLast: g.value,
+                  selected: i.value === l.key,
+                  text: l.label,
+                  value: l.key
+                }, () => [
+                  v(e.$slots, "label", {
+                    current: i.value,
+                    currentIndex: o.value,
+                    disabled: !!(l.disabled || e.disabled),
+                    goTo: u,
+                    isFirst: k.value,
+                    isLast: g.value,
+                    selected: i.value === l.key,
+                    text: l.label,
+                    value: l.key
+                  }, () => [
+                    c("span", qe, de(l.label), 1)
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1032, ["id", "aria-selected", "class", "disabled", "tabindex", "onClick"])
+          ]))), 128))
+        ], 4),
+        c("span", null, [
+          v(e.$slots, "header:append", M(O(V.value)))
+        ])
       ]),
-      input: l(({ id: s, name: h, hasErrors: b, ariaDescribedby: f }) => [
-        $(P, w({
-          id: s,
-          "append:icon": d["append:icon"],
-          "aria-describedby": f,
-          autocomplete: e.autocomplete,
-          autofocus: e.autofocus,
-          comma: e.comma,
-          disabled: e.disabled,
-          divider: e.divider,
-          "has-errors": b,
-          loading: e.loading,
-          "model-value": e.modelValue,
-          multiple: e.multiple,
-          name: h,
-          placeholder: e.placeholder,
-          "prepend:icon": d["prepend:icon"],
-          readonly: e.readonly,
-          required: e.required
-        }, c), {
-          "prepend-outer": l((o) => [
-            r(e.$slots, "prepend-outer", n(i(o)))
-          ]),
-          prepend: l((o) => [
-            r(e.$slots, "prepend", n(i(o)))
+      c("div", xe, [
+        X(_e, null, {
+          default: T(() => [
+            (b(!0), m(G, null, Q(e.items, (l) => (b(), ce(be, {
+              key: l.key,
+              css: e.animate,
+              name: `tab-slide-${C.value}`
+            }, {
+              default: T(() => [
+                i.value === l.key || e.eager || l.eager ? (b(), m("section", {
+                  key: 0,
+                  id: `${p}_tabpanel_${l.key}`,
+                  "aria-labelledby": `${p}_tab_${l.key}`,
+                  class: x(["bb-tab__pane", {
+                    "bb-tab__pane--shown": i.value === l.key
+                  }]),
+                  role: "tabpanel",
+                  tabindex: "0"
+                }, [
+                  v(e.$slots, l.key, {
+                    current: i.value,
+                    currentIndex: o.value,
+                    disabled: !!(l.disabled || e.disabled),
+                    goTo: u,
+                    isFirst: k.value,
+                    isLast: g.value,
+                    selected: i.value === l.key,
+                    text: l.label,
+                    value: l.key
+                  })
+                ], 10, Te)) : he("", !0)
+              ]),
+              _: 2
+            }, 1032, ["css", "name"]))), 128))
           ]),
-          prefix: l((o) => [
-            r(e.$slots, "prefix", n(i(o)))
-          ]),
-          append: l((o) => [
-            r(e.$slots, "append", n(i(o)))
-          ]),
-          suffix: l((o) => [
-            r(e.$slots, "suffix", n(i(o)))
-          ]),
-          "append-outer": l((o) => [
-            r(e.$slots, "append-outer", n(i(o)))
-          ]),
-          _: 2
-        }, 1040, ["id", "append:icon", "aria-describedby", "autocomplete", "autofocus", "comma", "disabled", "divider", "has-errors", "loading", "model-value", "multiple", "name", "placeholder", "prepend:icon", "readonly", "required"])
-      ]),
-      _: 3
-    }, 8, ["id", "direction", "errors", "has-errors", "hide-label", "hint", "label", "label-position", "model-value", "name", "reverse", "show-hint"]));
+          _: 3
+        })
+      ])
+    ], 10, $e));
   }
 });
 export {
-  K as default
+  Fe as default
 };

package/dist/index11.js

@@ -1,4 +1,4 @@
-import { wait as p } from "./index127.js";
+import { wait as p } from "./index131.js";
 import { reactive as d } from "vue";
 import { useId as h } from "./index8.js";
 const i = d({