bitboss-ui 2.1.131 → 2.1.133

package/dist/index82.js

@@ -1,19 +1,24 @@
-import { defineComponent as fe, ref as D, computed as p, useTemplateRef as ve, watch as $, onBeforeUnmount as be, createElementBlock as M, openBlock as E, Fragment as B, renderSlot as v, createCommentVNode as V, createVNode as x, normalizeProps as ye, mergeProps as q, withCtx as J, createElementVNode as Q, normalizeStyle as we, unref as ge, renderList as he, createBlock as Z, toDisplayString as Ee } from "vue";
-import { findRightIndex as R } from "./index274.js";
-import { useId as Le } from "./index8.js";
-import { useUntil as ke } from "./index267.js";
-import { wait as Ae } from "./index147.js";
-import De from "./index14.js";
+import { defineComponent as ye, ref as S, computed as c, useTemplateRef as we, watch as I, onBeforeUnmount as ge, createElementBlock as _, openBlock as y, Fragment as q, renderSlot as w, createCommentVNode as P, createVNode as Q, normalizeProps as he, mergeProps as R, withCtx as Z, createElementVNode as ee, normalizeStyle as Ee, unref as ke, renderList as Le, createBlock as te, toDisplayString as Ae } from "vue";
+import { findRightIndex as H } from "./index299.js";
+import { useId as De } from "./index8.js";
+import { useUntil as $e } from "./index280.js";
+import { wait as Se } from "./index147.js";
+import Ie from "./index14.js";
 /* empty css        */
-import ee from "./index88.js";
+import oe from "./index88.js";
 /* empty css        */
-import $e from "./index233.js";
+import _e from "./index268.js";
 /* empty css         */
-import te from "./index275.js";
-import { extractDomContainer as H } from "./index229.js";
-import { useIntersectionObserver as Se, useElementSize as Pe } from "./index148.js";
-import { parseWidthString as Ie } from "./index276.js";
-const Te = ["id", "aria-labelledby", "inert"], Oe = { class: "item__content" }, _e = 500, Ce = 10, Ge = /* @__PURE__ */ fe({
+import ne from "./index300.js";
+import { extractDomContainer as F } from "./index250.js";
+import { useIntersectionObserver as Pe, useElementSize as Te } from "./index148.js";
+import { parseWidthString as Oe } from "./index283.js";
+import { normalizeItemGroups as Ce } from "./index301.js";
+const Me = ["id", "aria-labelledby", "inert"], Be = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "bb-dropdown__divider"
+}, Ve = { class: "item__content" }, qe = 500, Re = 10, tt = /* @__PURE__ */ ye({
   inheritAttrs: !1,
   __name: "BbDropdown",
   props: {
@@ -32,11 +37,11 @@ const Te = ["id", "aria-labelledby", "inert"], Oe = { class: "item__content" },
     trigger: { default: "click" },
     width: { default: "auto" }
   },
-  setup(oe) {
-    const r = oe, d = r.id ?? `bb_${Le().id.value}`, F = D(d), b = D(), S = p(() => H(b.value)), ne = p(() => r.activator != null), re = ve("popover"), m = p(() => H(re.value)), a = D(!1), ae = ke(a, { initialValue: r.eager }), ie = p(() => {
-      const e = r.trigger;
+  setup(re) {
+    const a = re, d = a.id ?? `bb_${De().id.value}`, K = S(d), g = S(), T = c(() => F(g.value)), ae = c(() => a.activator != null), ie = we("popover"), v = c(() => F(ie.value)), r = S(!1), se = $e(r, { initialValue: a.eager }), le = c(() => {
+      const e = a.trigger;
       return new Set(Array.isArray(e) ? e : [e]);
-    }), P = (e, t) => ({
+    }), O = (e, t) => ({
       getBoundingClientRect: () => ({
         x: e,
         y: t,
@@ -50,55 +55,63 @@ const Te = ["id", "aria-labelledby", "inert"], Oe = { class: "item__content" },
           return this;
         }
       })
-    }), y = D(null), se = p(
-      () => r.placement === "cursor" && y.value ? y.value : b.value
-    ), K = (e) => {
-      const t = H(e);
-      t && (b.value = t);
-    }, { resume: le, pause: de } = Se(
-      S,
+    }), h = S(null), ue = c(
+      () => a.placement === "cursor" && h.value ? h.value : g.value
+    ), N = (e) => {
+      const t = F(e);
+      t && (g.value = t);
+    }, { resume: de, pause: ce } = Pe(
+      T,
       async ([{ intersectionRatio: e }]) => {
-        e !== 1 && a.value && await c();
+        e !== 1 && r.value && await f();
       },
       { threshold: [0, 1], immediate: !1 }
-    ), I = p(() => {
-      let e = r.items.findIndex((n) => !n.disabled), t = R(
-        r.items,
-        (n) => !n.disabled
+    ), U = c(() => Ce(a.items)), p = c(() => U.value.flat()), pe = c(() => {
+      const e = /* @__PURE__ */ new Set();
+      let t = 0;
+      for (const o of U.value)
+        e.add(t), t += o.length;
+      return e;
+    }), C = c(() => {
+      let e = p.value.findIndex(
+        (o) => !o.disabled
+      ), t = H(
+        p.value,
+        (o) => !o.disabled
       );
-      return r.items.map((n, o) => {
-        const i = `${d}-item-${n.key}`, { onClick: O, ..._ } = n, ce = async (s) => {
-          s.stopPropagation(), await c();
+      return p.value.map((o, i) => {
+        const n = `${d}-item-${o.key}`, { onClick: u, ...B } = o, fe = async (s) => {
+          s.stopPropagation(), await f();
           const l = document.querySelector(`#${d}`);
-          l && l.focus(), O?.(s);
-        }, pe = (s) => {
-          if (!(!(s.target instanceof HTMLElement) || !s.target.dataset.dropdownItem || !m.value)) {
+          l && l.focus(), u?.(s);
+        }, ve = (s) => {
+          if (!(!(s.target instanceof HTMLElement) || !s.target.dataset.dropdownItem || !v.value)) {
             if (s.key === "ArrowDown") {
-              if (s.preventDefault(), o !== t) {
-                const l = m.value.querySelector(
-                  te.map((A) => `#${i} ~ ${A}`).join(",")
+              if (s.preventDefault(), i !== t) {
+                const l = v.value.querySelector(
+                  ne.map(($) => `#${n} ~ ${$}`).join(",")
                 );
                 l instanceof HTMLElement && l.focus();
               }
             } else if (s.key === "ArrowUp") {
-              if (s.preventDefault(), o !== e) {
-                const l = R(
-                  r.items,
-                  (C, me) => me < o && !C.disabled
-                ), h = Array.from(
-                  m.value.querySelectorAll(".bb-dropdown__item")
+              if (s.preventDefault(), i !== e) {
+                const l = H(
+                  p.value,
+                  (V, be) => be < i && !V.disabled
+                ), L = Array.from(
+                  v.value.querySelectorAll(".bb-dropdown__item")
                 )[l];
-                h instanceof HTMLElement && h.focus();
+                L instanceof HTMLElement && L.focus();
               }
             } else if (s.key === "Tab") {
-              if (o === t && !s.shiftKey) {
+              if (i === t && !s.shiftKey) {
                 const l = Array.from(
-                  document.querySelectorAll(te.join(","))
-                ), A = l.findIndex(
-                  (C) => C.id === d
-                ), h = l[A + 1];
-                h instanceof HTMLElement && (s.preventDefault(), c(), h.focus());
-              } else if (o === e && s.shiftKey) {
+                  document.querySelectorAll(ne.join(","))
+                ), $ = l.findIndex(
+                  (V) => V.id === d
+                ), L = l[$ + 1];
+                L instanceof HTMLElement && (s.preventDefault(), f(), L.focus());
+              } else if (i === e && s.shiftKey) {
                 const l = document.querySelector(`#${d}`);
                 l && (s.preventDefault(), l.focus());
               }
@@ -106,128 +119,129 @@ const Te = ["id", "aria-labelledby", "inert"], Oe = { class: "item__content" },
           }
         };
         return {
-          ..._,
-          original: n,
-          key: n.key.split(/\W+/g).join("_").toLowerCase(),
-          disabled: _.disabled || r.disabled,
-          id: i,
-          onClick: ce,
-          onKeydown: pe
+          ...B,
+          original: o,
+          key: o.key.split(/\W+/g).join("_").toLowerCase(),
+          disabled: B.disabled || a.disabled,
+          id: n,
+          isGroupStart: pe.value.has(i),
+          onClick: fe,
+          onKeydown: ve
         };
       });
-    }), N = (e) => {
-      if (!r.disabled) {
-        if (L) {
-          L = !1, e.preventDefault(), e.stopPropagation();
+    }), G = (e) => {
+      if (!a.disabled) {
+        if (A) {
+          A = !1, e.preventDefault(), e.stopPropagation();
           return;
         }
-        e.stopPropagation(), r.placement === "cursor" && (y.value = P(e.clientX, e.clientY)), a.value ? c() : w();
+        e.stopPropagation(), a.placement === "cursor" && (h.value = O(e.clientX, e.clientY)), r.value ? f() : E();
       }
-    }, U = (e) => {
-      r.disabled || (e.preventDefault(), e.stopPropagation(), !(r.placement === "cursor" && (y.value = P(e.clientX, e.clientY), a.value)) && (a.value ? c() : w()));
+    }, Y = (e) => {
+      a.disabled || (e.preventDefault(), e.stopPropagation(), !(a.placement === "cursor" && (h.value = O(e.clientX, e.clientY), r.value)) && (r.value ? f() : E()));
     };
-    let Y, u = null, L = !1;
-    const T = () => {
-      clearTimeout(Y), u = null;
+    let z, m = null, A = !1;
+    const M = () => {
+      clearTimeout(z), m = null;
     }, W = (e) => {
-      r.disabled || e.pointerType === "mouse" || (L = !1, u = { x: e.clientX, y: e.clientY }, Y = setTimeout(() => {
-        L = !0, r.placement === "cursor" && u && (y.value = P(
-          u.x,
-          u.y
-        )), u = null, w();
-      }, _e));
+      a.disabled || e.pointerType === "mouse" || (A = !1, m = { x: e.clientX, y: e.clientY }, z = setTimeout(() => {
+        A = !0, a.placement === "cursor" && m && (h.value = O(
+          m.x,
+          m.y
+        )), m = null, E();
+      }, qe));
     }, X = (e) => {
-      if (!u) return;
-      const t = e.clientX - u.x, n = e.clientY - u.y;
-      Math.sqrt(t * t + n * n) > Ce && T();
-    }, k = () => {
-      T();
+      if (!m) return;
+      const t = e.clientX - m.x, o = e.clientY - m.y;
+      Math.sqrt(t * t + o * o) > Re && M();
+    }, D = () => {
+      M();
     }, j = async (e) => {
-      if (r.disabled) return;
-      const t = r.items.findIndex((i) => !i.disabled), n = R(
-        r.items,
-        (i) => !i.disabled
-      ), o = (i) => {
-        if (!m.value || !I.value.length || i === -1) return;
-        const O = I.value[i].id;
-        m.value.querySelector(`#${O}`)?.focus();
+      if (a.disabled) return;
+      const t = p.value.findIndex((n) => !n.disabled), o = H(
+        p.value,
+        (n) => !n.disabled
+      ), i = (n) => {
+        if (!v.value || !C.value.length || n === -1) return;
+        const u = C.value[n].id;
+        v.value.querySelector(`#${u}`)?.focus();
       };
-      e.key === "ArrowDown" ? (e.preventDefault(), a.value || await w(), o(t)) : e.key === "ArrowUp" ? (e.preventDefault(), a.value || await w(), o(n)) : e.key === "Tab" && a.value && !e.shiftKey && (e.preventDefault(), o(t));
-    }, f = (e) => {
+      e.key === "ArrowDown" ? (e.preventDefault(), r.value || await E(), i(t)) : e.key === "ArrowUp" ? (e.preventDefault(), r.value || await E(), i(o)) : e.key === "Tab" && r.value && !e.shiftKey && (e.preventDefault(), i(t));
+    }, b = (e) => {
       const t = e.target;
       if (!(t instanceof HTMLElement)) return;
-      !m.value?.contains(t) && c();
-    }, z = (e) => {
-      !a.value || e.key !== "Escape" || (e.stopImmediatePropagation(), e.preventDefault(), document.activeElement?.id !== d && document.querySelector(`#${d}`)?.focus(), c());
-    }, w = async () => {
-      le(), await Ae(50), a.value = !0, document.addEventListener("click", f, { passive: !0 }), document.addEventListener("contextmenu", f, {
+      !v.value?.contains(t) && f();
+    }, x = (e) => {
+      !r.value || e.key !== "Escape" || (e.stopImmediatePropagation(), e.preventDefault(), document.activeElement?.id !== d && document.querySelector(`#${d}`)?.focus(), f());
+    }, E = async () => {
+      de(), await Se(50), r.value = !0, document.addEventListener("click", b, { passive: !0 }), document.addEventListener("contextmenu", b, {
         passive: !0
-      }), document.addEventListener("focusin", f, { passive: !0 }), document.addEventListener("keydown", z, { capture: !0 });
-    }, c = async () => {
-      a.value = !1, de();
+      }), document.addEventListener("focusin", b, { passive: !0 }), document.addEventListener("keydown", x, { capture: !0 });
+    }, f = async () => {
+      r.value = !1, ce();
     };
-    $(a, (e) => {
-      e || (document.removeEventListener("click", f), document.removeEventListener("contextmenu", f), document.removeEventListener("focusin", f), document.removeEventListener("keydown", z, { capture: !0 }));
-    }), $(
-      () => r.activator,
+    I(r, (e) => {
+      e || (document.removeEventListener("click", b), document.removeEventListener("contextmenu", b), document.removeEventListener("focusin", b), document.removeEventListener("keydown", x, { capture: !0 }));
+    }), I(
+      () => a.activator,
       (e) => {
-        e && K(e);
+        e && N(e);
       },
       { immediate: !0 }
     );
-    let g = null;
-    $(
-      [b, ie],
+    let k = null;
+    I(
+      [g, le],
       ([e, t]) => {
-        if (g && (g(), g = null), !e) return;
-        let n = !1;
-        e.id || (e.id = d, n = !0), F.value = e.id, e.setAttribute("aria-haspopup", "menu");
-        const o = [];
-        t.has("click") && (e.addEventListener("click", N), o.push(() => e.removeEventListener("click", N))), t.has("contextMenu") && (e.addEventListener("contextmenu", U), e.addEventListener("pointerdown", W), e.addEventListener("pointermove", X), e.addEventListener("pointerup", k), e.addEventListener("pointercancel", k), o.push(() => {
-          e.removeEventListener("contextmenu", U), e.removeEventListener("pointerdown", W), e.removeEventListener("pointermove", X), e.removeEventListener("pointerup", k), e.removeEventListener("pointercancel", k), T();
-        })), e.addEventListener("keydown", j), o.push(() => e.removeEventListener("keydown", j)), g = () => {
-          o.forEach((i) => i()), n && e.removeAttribute("id"), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-expanded"), e.removeAttribute("aria-controls");
+        if (k && (k(), k = null), !e) return;
+        let o = !1;
+        e.id || (e.id = d, o = !0), K.value = e.id, e.setAttribute("aria-haspopup", "menu");
+        const i = [];
+        t.has("click") && (e.addEventListener("click", G), i.push(() => e.removeEventListener("click", G))), t.has("contextMenu") && (e.addEventListener("contextmenu", Y), e.addEventListener("pointerdown", W), e.addEventListener("pointermove", X), e.addEventListener("pointerup", D), e.addEventListener("pointercancel", D), i.push(() => {
+          e.removeEventListener("contextmenu", Y), e.removeEventListener("pointerdown", W), e.removeEventListener("pointermove", X), e.removeEventListener("pointerup", D), e.removeEventListener("pointercancel", D), M();
+        })), e.addEventListener("keydown", j), i.push(() => e.removeEventListener("keydown", j)), k = () => {
+          i.forEach((n) => n()), o && e.removeAttribute("id"), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-expanded"), e.removeAttribute("aria-controls");
         };
       },
       { immediate: !0 }
-    ), $(
-      [b, a, ae],
-      ([e, t, n]) => {
-        e && (e.setAttribute("aria-expanded", n ? String(t) : "false"), n ? e.setAttribute("aria-controls", `menu_${d}`) : e.removeAttribute("aria-controls"));
+    ), I(
+      [g, r, se],
+      ([e, t, o]) => {
+        e && (e.setAttribute("aria-expanded", o ? String(t) : "false"), o ? e.setAttribute("aria-controls", `menu_${d}`) : e.removeAttribute("aria-controls"));
       },
       { immediate: !0 }
-    ), be(() => {
-      g?.();
+    ), ge(() => {
+      k?.();
     });
-    const { width: ue } = Pe(
-      S,
+    const { width: me } = Te(
+      T,
       { width: 0, height: 0 },
       {
         box: "border-box"
       }
-    ), G = p(() => {
-      if (r.width !== "auto") {
-        if (r.width) {
-          const { value: e, unit: t } = Ie(r.width);
-          return t === "%" ? S.value ? `${ue.value * (e / 100)}px` : "0px" : `${e}px`;
+    ), J = c(() => {
+      if (a.width !== "auto") {
+        if (a.width) {
+          const { value: e, unit: t } = Oe(a.width);
+          return t === "%" ? T.value ? `${me.value * (e / 100)}px` : "0px" : `${e}px`;
         }
         return "0px";
       }
     });
-    return (e, t) => (E(), M(B, null, [
-      ne.value ? V("", !0) : v(e.$slots, "activator", ye(q({ key: 0 }, {
+    return (e, t) => (y(), _(q, null, [
+      ae.value ? P("", !0) : w(e.$slots, "activator", he(R({ key: 0 }, {
         props: {
-          ref: K
+          ref: N
         },
         disabled: e.disabled,
-        open: a.value,
+        open: r.value,
         placement: e.placement
       }))),
-      x($e, q({
+      Q(_e, R({
         ref: "popover",
-        modelValue: a.value,
-        "onUpdate:modelValue": t[0] || (t[0] = (n) => a.value = n),
-        anchor: se.value,
+        modelValue: r.value,
+        "onUpdate:modelValue": t[0] || (t[0] = (o) => r.value = o),
+        anchor: ue.value,
         "arrow-padding": e.arrowPadding,
         boundary: e.boundary,
         class: ["bb-dropdown", {
@@ -240,79 +254,80 @@ const Te = ["id", "aria-labelledby", "inert"], Oe = { class: "item__content" },
         placement: e.placement === "cursor" ? "bottom-start" : e.placement,
         "transition-duration": e.transitionDuration
       }, e.$attrs), {
-        default: J(() => [
-          Q("span", {
-            id: `menu_${ge(d)}`,
-            "aria-labelledby": F.value,
+        default: Z(() => [
+          ee("span", {
+            id: `menu_${ke(d)}`,
+            "aria-labelledby": K.value,
             role: "menu",
             class: "bb-dropdown__items-container",
-            inert: !a.value,
-            style: we(G.value ? { width: G.value } : void 0)
+            inert: !r.value,
+            style: Ee(J.value ? { width: J.value } : void 0)
           }, [
-            v(e.$slots, "prepend", {
+            w(e.$slots, "prepend", {
               disabled: e.disabled,
-              open: a.value,
+              open: r.value,
               placement: e.placement
             }),
-            (E(!0), M(B, null, he(I.value, ({ original: n, ...o }, i) => (E(), M(B, {
-              key: o.key
+            (y(!0), _(q, null, Le(C.value, ({ original: o, isGroupStart: i, ...n }, u) => (y(), _(q, {
+              key: n.key
             }, [
-              v(e.$slots, "item:prepend", {
-                disabled: o.disabled,
-                index: i,
-                item: e.items[i],
-                open: a.value,
+              i && u > 0 ? (y(), _("hr", Be)) : P("", !0),
+              w(e.$slots, "item:prepend", {
+                disabled: n.disabled,
+                index: u,
+                item: p.value[u],
+                open: r.value,
                 placement: e.placement,
-                text: o.text
+                text: n.text
               }),
-              x(De, q({
+              Q(Ie, R({
                 role: "menuitem",
                 class: ["bb-dropdown__item", {
-                  "bb-dropdown__item--first": i === 0,
-                  "bb-dropdown__item--last": i === e.items.length - 1
+                  "bb-dropdown__item--first": u === 0,
+                  "bb-dropdown__item--last": u === p.value.length - 1
                 }],
                 "data-dropdown-item": !0,
                 ref_for: !0
-              }, o), {
-                default: J(() => [
-                  v(e.$slots, o.key, {
-                    disabled: o.disabled,
-                    index: i,
-                    item: n,
-                    open: a.value,
+              }, n), {
+                default: Z(() => [
+                  w(e.$slots, n.key, {
+                    disabled: n.disabled,
+                    index: u,
+                    item: o,
+                    open: r.value,
                     placement: e.placement,
-                    text: o.text
+                    text: n.text
                   }, () => [
-                    o["prepend:icon"] ? (E(), Z(ee, {
+                    n["prepend:icon"] ? (y(), te(oe, {
                       key: 0,
                       class: "item__prepend-icon",
-                      type: o["prepend:icon"]
-                    }, null, 8, ["type"])) : V("", !0),
-                    Q("span", Oe, Ee(o.text), 1),
-                    o["append:icon"] ? (E(), Z(ee, {
+                      type: n["prepend:icon"]
+                    }, null, 8, ["type"])) : P("", !0),
+                    ee("span", Ve, Ae(n.text), 1),
+                    n["append:icon"] ? (y(), te(oe, {
                       key: 1,
                       class: "item__append-icon",
-                      type: o["append:icon"]
-                    }, null, 8, ["type"])) : V("", !0)
+                      type: n["append:icon"]
+                    }, null, 8, ["type"])) : P("", !0)
                   ])
                 ]),
                 _: 2
               }, 1040, ["class"]),
-              v(e.$slots, "item:append", {
-                disabled: o.disabled,
-                index: i,
-                item: e.items[i],
-                open: a.value,
+              w(e.$slots, "item:append", {
+                disabled: n.disabled,
+                index: u,
+                item: p.value[u],
+                open: r.value,
                 placement: e.placement,
-                text: o.text
+                text: n.text
               })
             ], 64))), 128)),
-            v(e.$slots, "append", {
+            w(e.$slots, "append", {
               disabled: e.disabled,
-              open: a.value,
+              open: r.value,
               placement: e.placement
             })
-          ], 12, Te)
+          ], 12, Me)
         ]),
         _: 3
       }, 16, ["modelValue", "anchor", "arrow-padding", "boundary", "class", "eager", "offset", "hide-arrow", "padding", "placement", "transition-duration"])
@@ -320,5 +335,5 @@ const Te = ["id", "aria-labelledby", "inert"], Oe = { class: "item__content" },
   }
 });
 export {
-  Ge as default
+  tt as default
 };