bitboss-ui 2.1.32 → 2.1.34

package/dist/index79.js

@@ -1,248 +1,272 @@
-import { defineComponent as N, computed as R, ref as E, watch as W, createBlock as h, openBlock as k, unref as f, normalizeClass as G, withCtx as D, createElementVNode as I, normalizeStyle as J, renderSlot as m, createElementBlock as q, Fragment as F, renderList as Q, createVNode as X, mergeProps as Y, createCommentVNode as A, toDisplayString as Z, normalizeProps as x, guardReactiveProps as ee } from "vue";
-import { findRightIndex as T } from "./index271.js";
-import { useId as te } from "./index8.js";
-import { useUntil as ne } from "./index217.js";
-import { wait as oe } from "./index138.js";
-import ae from "./index13.js";
+import { defineComponent as ee, ref as q, computed as g, useTemplateRef as te, watch as oe, createElementBlock as D, openBlock as w, Fragment as L, renderSlot as p, createVNode as F, normalizeProps as ne, guardReactiveProps as ae, unref as m, mergeProps as B, withCtx as O, createElementVNode as V, normalizeStyle as ie, renderList as se, createBlock as K, createCommentVNode as P, toDisplayString as re } from "vue";
+import { findRightIndex as T } from "./index273.js";
+import { useId as le } from "./index8.js";
+import { useUntil as de } from "./index247.js";
+import { wait as ue } from "./index138.js";
+import ce from "./index13.js";
 /* empty css        */
-import B from "./index85.js";
+import R from "./index85.js";
 /* empty css        */
-import le from "./index221.js";
+import fe from "./index242.js";
 /* empty css         */
-import K from "./index272.js";
-const se = ["id", "aria-labelledby", "inert"], ie = { class: "item__content" }, Ee = /* @__PURE__ */ N({
+import U from "./index274.js";
+import { extractDomContainer as S } from "./index271.js";
+import { useIntersectionObserver as pe, useElementSize as me } from "./index140.js";
+import { parseWidthString as ve } from "./index272.js";
+const be = ["id", "aria-labelledby", "inert"], ye = { class: "item__content" }, _e = /* @__PURE__ */ ee({
+  inheritAttrs: !1,
   __name: "BbDropdown",
   props: {
     arrowPadding: { default: 10 },
-    block: { type: Boolean },
     disabled: { type: Boolean },
     eager: { type: Boolean },
     id: {},
     offset: { default: 3 },
     padding: { default: 6 },
     placement: { default: "bottom" },
-    theme: { default: "default" },
     transitionDuration: { default: 300 },
     items: {},
+    theme: { default: "default" },
     width: { default: 200 }
   },
-  setup(O) {
-    const u = O, d = u.id ?? `bb_${te().id.value}`, c = R(() => {
-      let e = u.items.findIndex((n) => !n.disabled), o = T(
-        u.items,
+  setup(W) {
+    const l = W, u = l.id ?? `bb_${le().id.value}`, h = q(), k = g(() => S(h.value)), j = te("popover"), s = g(() => S(j.value)), i = q(!1), I = de(i, { initialValue: l.eager }), z = (e) => {
+      const o = S(e);
+      o && (h.value = o);
+    }, { resume: N, pause: G } = pe(
+      k,
+      async ([{ intersectionRatio: e }]) => {
+        e !== 1 && i.value && await f();
+      },
+      { threshold: [0, 1], immediate: !1 }
+    ), c = g(() => {
+      let e = l.items.findIndex((n) => !n.disabled), o = T(
+        l.items,
         (n) => !n.disabled
       );
-      return u.items.map((n, t) => {
-        const a = `${d}-item-${n.key}`, { onClick: _, ...C } = n, j = async () => {
-          await p();
-          const s = document.querySelector(`#${d}`);
-          if (s) s instanceof HTMLElement && s.focus();
+      return l.items.map((n, t) => {
+        const a = `${u}-item-${n.key}`, { onClick: C, ..._ } = n, Z = async () => {
+          await f();
+          const r = document.querySelector(`#${u}`);
+          if (r) r instanceof HTMLElement && r.focus();
           else return;
-          _ && _();
-        }, z = (s) => {
-          if (s.target instanceof HTMLElement && s.target.dataset.dropdownItem) {
-            if (!i.value) return;
-            if (s.key === "ArrowDown") {
-              if (s.preventDefault(), i.value && t !== o) {
-                const r = i.value.querySelector(
-                  K.map((v) => `#${a} ~ ${v}`).join(",")
+          C && C();
+        }, x = (r) => {
+          if (r.target instanceof HTMLElement && r.target.dataset.dropdownItem) {
+            if (!s.value) return;
+            if (r.key === "ArrowDown") {
+              if (r.preventDefault(), s.value && t !== o) {
+                const d = s.value.querySelector(
+                  U.map((v) => `#${a} ~ ${v}`).join(",")
                 );
-                r && r instanceof HTMLElement && r.focus();
+                d && d instanceof HTMLElement && d.focus();
               }
-            } else if (s.key === "ArrowUp") {
-              if (s.preventDefault(), i.value && t !== e) {
-                const r = T(u.items, (w, L) => L < t && !w.disabled), y = Array.from(
-                  i.value.querySelectorAll(".bb-dropdown__item")
-                )[r];
-                y && y instanceof HTMLElement && y.focus();
+            } else if (r.key === "ArrowUp") {
+              if (r.preventDefault(), s.value && t !== e) {
+                const d = T(l.items, (y, $) => $ < t && !y.disabled), b = Array.from(
+                  s.value.querySelectorAll(".bb-dropdown__item")
+                )[d];
+                b && b instanceof HTMLElement && b.focus();
               }
-            } else if (s.key === "Tab") {
-              if (t === o && !s.shiftKey) {
-                const r = K.join(","), v = Array.from(
-                  document.querySelectorAll(r)
-                ), y = v.findIndex(
-                  (L) => L.id === d
-                ), w = v[y + 1];
-                if (w) w instanceof HTMLElement && (s.preventDefault(), p(), w.focus());
+            } else if (r.key === "Tab") {
+              if (t === o && !r.shiftKey) {
+                const d = U.join(","), v = Array.from(
+                  document.querySelectorAll(d)
+                ), b = v.findIndex(
+                  ($) => $.id === u
+                ), y = v[b + 1];
+                if (y) y instanceof HTMLElement && (r.preventDefault(), f(), y.focus());
                 else return;
-              } else if (t === e && s.shiftKey) {
-                const r = document.querySelector(`#${d}`);
-                if (r) r instanceof HTMLElement && (s.preventDefault(), r.focus());
+              } else if (t === e && r.shiftKey) {
+                const d = document.querySelector(`#${u}`);
+                if (d) d instanceof HTMLElement && (r.preventDefault(), d.focus());
                 else return;
               }
             }
           }
         };
         return {
-          ...C,
+          ..._,
           original: n,
           key: n.key.split(/\W+/g).join("_").toLowerCase(),
-          disabled: C.disabled || u.disabled,
+          disabled: _.disabled || l.disabled,
           id: a,
-          onClick: j,
-          onKeydown: z
+          onClick: Z,
+          onKeydown: x
         };
       });
-    }), b = E(), i = E(), l = E(!1), g = ne(l), P = () => {
-      l.value ? p() : $();
-    }, V = async (e) => {
-      let o = u.items.findIndex((t) => !t.disabled), n = T(
-        u.items,
+    }), J = () => {
+      i.value ? f() : E();
+    }, Q = async (e) => {
+      let o = l.items.findIndex((t) => !t.disabled), n = T(
+        l.items,
         (t) => !t.disabled
       );
       if (e.key === "ArrowDown") {
-        if (e.preventDefault(), l.value || await $(), i.value && c.value.length && o !== -1) {
-          const t = c.value[o].id, a = i.value.querySelector(`#${t}`);
+        if (e.preventDefault(), i.value || await E(), s.value && c.value.length && o !== -1) {
+          const t = c.value[o].id, a = s.value.querySelector(`#${t}`);
           a && a instanceof HTMLElement && a.focus();
         }
       } else if (e.key === "ArrowUp") {
-        if (e.preventDefault(), l.value || await $(), i.value && c.value.length && n !== -1) {
-          const t = c.value[n].id, a = i.value.querySelector(`#${t}`);
+        if (e.preventDefault(), i.value || await E(), s.value && c.value.length && n !== -1) {
+          const t = c.value[n].id, a = s.value.querySelector(`#${t}`);
           a && a instanceof HTMLElement && a.focus();
         }
-      } else if (e.key === "Tab" && l.value && !e.shiftKey && (e.preventDefault(), i.value && c.value.length && o !== -1)) {
-        const t = c.value[o].id, a = i.value.querySelector(`#${t}`);
+      } else if (e.key === "Tab" && i.value && !e.shiftKey && (e.preventDefault(), s.value && c.value.length && o !== -1)) {
+        const t = c.value[o].id, a = s.value.querySelector(`#${t}`);
         a && a instanceof HTMLElement && a.focus();
       }
     }, H = (e) => {
       const o = e.target;
       if (o && o instanceof HTMLElement) {
         let n = !0;
-        b.value && b.value.$el.contains(o) && (n = !1), i.value && i.value.contains(o) && (n = !1), n && p();
+        s.value && s.value.contains(o) && (n = !1), n && f();
       }
     }, M = (e) => {
       const o = e.target;
       if (o && o instanceof HTMLElement) {
         let n = !0;
-        b.value && b.value.$el.contains(o) && (n = !1), n && p();
+        s.value && s.value.contains(o) && (n = !1), n && f();
       }
-    }, S = (e) => {
+    }, A = (e) => {
       var o;
-      if (l.value && e.key === "Escape") {
-        if (((o = document.activeElement) == null ? void 0 : o.id) !== d) {
-          const n = document.querySelector(`#${d}`);
-          n instanceof HTMLElement && n.focus();
+      if (i.value && e.key === "Escape") {
+        if (((o = document.activeElement) == null ? void 0 : o.id) !== u) {
+          const n = document.querySelector(`#${u}`);
+          n && n.focus();
         }
-        p();
+        f();
       }
-    }, U = E(!1), $ = async () => {
-      U.value = !0, await oe(50), l.value = !0, document.addEventListener("click", H, { passive: !0 }), document.addEventListener("focusin", M, { passive: !0 }), document.addEventListener("keydown", S, { passive: !0 });
-    }, p = async () => {
-      l.value = !1;
+    }, E = async () => {
+      N(), await ue(50), i.value = !0, document.addEventListener("click", H, { passive: !0 }), document.addEventListener("focusin", M, { passive: !0 }), document.addEventListener("keydown", A, { passive: !0 });
+    }, f = async () => {
+      i.value = !1, G();
     };
-    return W(l, (e) => {
-      e || (document.removeEventListener("click", H), document.removeEventListener("focusin", M), document.removeEventListener("keydown", S));
-    }), (e, o) => (k(), h(le, {
-      ref_key: "wrapper",
-      ref: b,
-      modelValue: l.value,
-      "onUpdate:modelValue": o[0] || (o[0] = (n) => l.value = n),
-      "arrow-padding": e.arrowPadding,
-      block: e.block,
-      class: G(["bb-dropdown", {
-        [`bb-dropdown--${e.theme}`]: !0
-      }]),
-      offset: e.offset,
-      padding: e.padding,
-      placement: e.placement,
-      "render-content": f(g),
-      "transition-duration": e.transitionDuration
-    }, {
-      activator: D(() => [
-        m(e.$slots, "activator", x(ee({
-          props: {
-            "aria-expanded": f(g) ? l.value : !1,
-            "aria-controls": f(g) ? `menu_${f(d)}` : void 0,
-            id: f(d),
-            onClick: P,
-            onKeydown: V,
-            disabled: e.disabled
-          },
+    oe(i, (e) => {
+      e || (document.removeEventListener("click", H), document.removeEventListener("focusin", M), document.removeEventListener("keydown", A));
+    });
+    const { width: X } = me(
+      k,
+      { width: 0, height: 0 },
+      {
+        box: "border-box"
+      }
+    ), Y = g(() => {
+      if (l.width) {
+        const { value: e, unit: o } = ve(l.width);
+        return o === "%" ? k.value ? `${X.value * (e / 100)}px` : "0px" : `${e}px`;
+      }
+      return "0px";
+    });
+    return (e, o) => (w(), D(L, null, [
+      p(e.$slots, "activator", ne(ae({
+        props: {
+          "aria-expanded": m(I) ? i.value : !1,
+          "aria-controls": m(I) ? `menu_${m(u)}` : void 0,
+          id: m(u),
+          onClick: J,
+          onKeydown: Q,
           disabled: e.disabled,
-          open: l.value,
-          placement: e.placement
-        })))
-      ]),
-      default: D(() => [
-        I("span", {
-          id: `menu_${f(d)}`,
-          ref_key: "content",
-          ref: i,
-          "aria-labelledby": f(d),
-          "aria-role": "menu",
-          class: "bb-dropdown__items-container",
-          inert: !l.value,
-          style: J({ width: `${e.width}px` })
-        }, [
-          m(e.$slots, "prepend", {
-            disabled: e.disabled,
-            open: l.value,
-            placement: e.placement
-          }),
-          (k(!0), q(F, null, Q(c.value, ({ original: n, ...t }, a) => (k(), q(F, {
-            key: t.key
+          ref: z
+        },
+        disabled: e.disabled,
+        open: i.value,
+        placement: e.placement
+      }))),
+      F(fe, B({
+        ref: "popover",
+        modelValue: i.value,
+        "onUpdate:modelValue": o[0] || (o[0] = (n) => i.value = n),
+        anchor: h.value,
+        "arrow-padding": e.arrowPadding,
+        class: ["bb-dropdown", {
+          [`bb-dropdown--${e.theme}`]: !0
+        }],
+        eager: e.eager,
+        offset: e.offset,
+        padding: e.padding,
+        placement: e.placement,
+        "transition-duration": e.transitionDuration
+      }, e.$attrs), {
+        default: O(() => [
+          V("span", {
+            id: `menu_${m(u)}`,
+            "aria-labelledby": m(u),
+            "aria-role": "menu",
+            class: "bb-dropdown__items-container",
+            inert: !i.value,
+            style: ie({ width: Y.value })
           }, [
-            m(e.$slots, "item:prepend", {
-              disabled: t.disabled,
-              index: a,
-              item: e.items[a],
-              open: l.value,
-              placement: e.placement,
-              text: t.text
+            p(e.$slots, "prepend", {
+              disabled: e.disabled,
+              open: i.value,
+              placement: e.placement
             }),
-            X(ae, Y({
-              "aria-role": "menuitem",
-              class: ["bb-dropdown__item", {
-                "bb-dropdown__item--first": a === 0,
-                "bb-dropdown__item--last": a === e.items.length - 1
-              }],
-              "data-dropdown-item": !0,
-              ref_for: !0
-            }, t), {
-              default: D(() => [
-                m(e.$slots, t.key, {
-                  disabled: t.disabled,
-                  index: a,
-                  item: n,
-                  open: l.value,
-                  placement: e.placement,
-                  text: t.text
-                }, () => [
-                  t["prepend:icon"] ? (k(), h(B, {
-                    key: 0,
-                    class: "item__prepend-icon",
-                    type: t["prepend:icon"]
-                  }, null, 8, ["type"])) : A("", !0),
-                  I("span", ie, Z(t.text), 1),
-                  t["append:icon"] ? (k(), h(B, {
-                    key: 1,
-                    class: "item__append-icon",
-                    type: t["append:icon"]
-                  }, null, 8, ["type"])) : A("", !0)
-                ])
-              ]),
-              _: 2
-            }, 1040, ["class"]),
-            m(e.$slots, "item:append", {
-              disabled: t.disabled,
-              index: a,
-              item: e.items[a],
-              open: l.value,
-              placement: e.placement,
-              text: t.text
+            (w(!0), D(L, null, se(c.value, ({ original: n, ...t }, a) => (w(), D(L, {
+              key: t.key
+            }, [
+              p(e.$slots, "item:prepend", {
+                disabled: t.disabled,
+                index: a,
+                item: e.items[a],
+                open: i.value,
+                placement: e.placement,
+                text: t.text
+              }),
+              F(ce, B({
+                "aria-role": "menuitem",
+                class: ["bb-dropdown__item", {
+                  "bb-dropdown__item--first": a === 0,
+                  "bb-dropdown__item--last": a === e.items.length - 1
+                }],
+                "data-dropdown-item": !0,
+                ref_for: !0
+              }, t), {
+                default: O(() => [
+                  p(e.$slots, t.key, {
+                    disabled: t.disabled,
+                    index: a,
+                    item: n,
+                    open: i.value,
+                    placement: e.placement,
+                    text: t.text
+                  }, () => [
+                    t["prepend:icon"] ? (w(), K(R, {
+                      key: 0,
+                      class: "item__prepend-icon",
+                      type: t["prepend:icon"]
+                    }, null, 8, ["type"])) : P("", !0),
+                    V("span", ye, re(t.text), 1),
+                    t["append:icon"] ? (w(), K(R, {
+                      key: 1,
+                      class: "item__append-icon",
+                      type: t["append:icon"]
+                    }, null, 8, ["type"])) : P("", !0)
+                  ])
+                ]),
+                _: 2
+              }, 1040, ["class"]),
+              p(e.$slots, "item:append", {
+                disabled: t.disabled,
+                index: a,
+                item: e.items[a],
+                open: i.value,
+                placement: e.placement,
+                text: t.text
+              })
+            ], 64))), 128)),
+            p(e.$slots, "append", {
+              disabled: e.disabled,
+              open: i.value,
+              placement: e.placement
             })
-          ], 64))), 128)),
-          m(e.$slots, "append", {
-            disabled: e.disabled,
-            open: l.value,
-            placement: e.placement
-          })
-        ], 12, se)
-      ]),
-      _: 3
-    }, 8, ["modelValue", "arrow-padding", "block", "class", "offset", "padding", "placement", "render-content", "transition-duration"]));
+          ], 12, be)
+        ]),
+        _: 3
+      }, 16, ["modelValue", "anchor", "arrow-padding", "class", "eager", "offset", "padding", "placement", "transition-duration"])
+    ], 64));
   }
 });
 export {
-  Ee as default
+  _e as default
 };

package/dist/index81.js

@@ -9,7 +9,7 @@ import z from "./index85.js";
 /* empty css        */
 import I from "./index113.js";
 /* empty css         */
-import { useLocale as M } from "./index216.js";
+import { useLocale as M } from "./index240.js";
 const O = { class: "bb-dropdown-button__content" }, R = {
   key: 1,
   class: "bb-dropdown-button__loading-label sr-only"
@@ -17,7 +17,6 @@ const O = { class: "bb-dropdown-button__content" }, R = {
   __name: "BbDropdownButton",
   props: {
     arrowPadding: {},
-    block: { type: Boolean },
     disabled: { type: Boolean },
     eager: { type: Boolean },
     id: {},
@@ -30,6 +29,7 @@ const O = { class: "bb-dropdown-button__content" }, R = {
     width: {},
     autoLoading: { type: Boolean, default: !0 },
     "append:icon": {},
+    block: { type: Boolean },
     disabledWhileLoading: { type: Boolean, default: !0 },
     loading: { type: Boolean },
     "prepend:icon": {},

package/dist/index83.js

@@ -1,5 +1,5 @@
 import { defineComponent as j, ref as g, watch as x, computed as m, createBlock as G, openBlock as V, resolveDynamicComponent as K, normalizeClass as O, withCtx as M, createElementVNode as c, withModifiers as y, renderSlot as U, normalizeProps as Y, guardReactiveProps as Z, createTextVNode as J, unref as Q, createVNode as W, createElementBlock as F, Fragment as X, renderList as ee, toDisplayString as te } from "vue";
-import { findInTree as ae } from "./index276.js";
+import { findInTree as ae } from "./index269.js";
 import { useId as re } from "./index8.js";
 import oe from "./index111.js";
 /* empty css         */
@@ -53,7 +53,7 @@ const le = ["accept", "autofocus", "disabled", "multiple"], se = { class: "bb-dr
             const r = a.accept[t];
             if (r.includes("/")) e.push(r);
             else {
-              b || (b = (await import("./index275.js")).default);
+              b || (b = (await import("./index268.js")).default);
               const o = b.getType(r);
               if (!o)
                 throw new Error(

package/dist/index85.js

@@ -1,11 +1,11 @@
 import { defineComponent as v, ref as p, getCurrentInstance as c, onServerPrefetch as w, onBeforeMount as z, inject as _, watch as b, computed as f, createElementBlock as h, openBlock as $, mergeProps as g } from "vue";
-import { isCssColor as I } from "./index235.js";
+import { isCssColor as I } from "./index224.js";
 const B = ["innerHTML"], k = /* @__PURE__ */ v({
   __name: "BbIcon",
   props: {
-    size: { default: "md" },
     color: {},
-    type: {}
+    type: {},
+    size: { default: "md" }
   },
   setup(m) {
     var l, a;

package/dist/index87.js

@@ -1,5 +1,5 @@
 import { defineComponent as h, ref as t, onMounted as m, onBeforeUnmount as p, createBlock as g, openBlock as b, resolveDynamicComponent as w, withCtx as _, renderSlot as I } from "vue";
-import { throttle as c } from "./index273.js";
+import { throttle as c } from "./index277.js";
 const M = /* @__PURE__ */ h({
   __name: "BbIntersection",
   props: {

package/dist/index90.js

@@ -1,9 +1,9 @@
 import { defineComponent as P, mergeModels as T, useModel as q, computed as v, ref as z, watch as A, onMounted as H, createElementBlock as r, openBlock as d, withModifiers as K, normalizeStyle as R, normalizeClass as U, unref as p, createCommentVNode as y, Fragment as j, createElementVNode as t, renderSlot as l, createTextVNode as G, toDisplayString as D, nextTick as J } from "vue";
-import { parseSize as Q } from "./index252.js";
+import { parseSize as Q } from "./index259.js";
 import { useId as S } from "./index8.js";
-import { useLocale as X } from "./index216.js";
+import { useLocale as X } from "./index240.js";
 import { useMobile as Y } from "./index9.js";
-import { useUntil as Z } from "./index217.js";
+import { useUntil as Z } from "./index247.js";
 import { wait as h } from "./index138.js";
 const x = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], ee = {
   ref: "header",

package/dist/index92.js

@@ -3,8 +3,8 @@ import { defineComponent as V, mergeModels as W, useModel as U, computed as d, r
 /* empty css       */
 import P from "./index13.js";
 /* empty css        */
-import { debounce as X } from "./index274.js";
-import { useLocale as H } from "./index216.js";
+import { debounce as X } from "./index270.js";
+import { useLocale as H } from "./index240.js";
 import { useRoute as J } from "./index145.js";
 const K = ["aria-label"], Q = { class: "bb-pagination__page-label sr-only" }, Y = { class: "bb-pagination__page-label" }, Z = { class: "bb-pagination__page-label" }, ee = { class: "bb-pagination__page-label sr-only" }, ue = /* @__PURE__ */ V({
   __name: "BbPagination",