bitboss-ui 2.1.135 → 2.1.136

package/dist/index82.js

@@ -1,5 +1,339 @@
-import { hash as e } from "./index81.js";
-//#region src/utilities/functions/isEqual.ts
-var t = (t, n) => e(t) === e(n);
-//#endregion
-export { t as isEqual };
+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 "./index293.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 oe from "./index88.js";
+/* empty css        */
+import _e from "./index253.js";
+/* empty css         */
+import ne from "./index294.js";
+import { extractDomContainer as F } from "./index275.js";
+import { useIntersectionObserver as Pe, useElementSize as Te } from "./index148.js";
+import { parseWidthString as Oe } from "./index289.js";
+import { normalizeItemGroups as Ce } from "./index295.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: {
+    arrowPadding: { default: 10 },
+    disabled: { type: Boolean },
+    eager: { type: Boolean },
+    id: {},
+    offset: { default: 3 },
+    padding: { default: 10 },
+    transitionDuration: { default: 300 },
+    placement: { default: "bottom" },
+    activator: {},
+    boundary: {},
+    items: {},
+    theme: { default: "default" },
+    trigger: { default: "click" },
+    width: { default: "auto" }
+  },
+  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]);
+    }), O = (e, t) => ({
+      getBoundingClientRect: () => ({
+        x: e,
+        y: t,
+        width: 0,
+        height: 0,
+        top: t,
+        left: e,
+        right: e,
+        bottom: t,
+        toJSON() {
+          return this;
+        }
+      })
+    }), 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 && r.value && await f();
+      },
+      { threshold: [0, 1], immediate: !1 }
+    ), 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 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(), u?.(s);
+        }, ve = (s) => {
+          if (!(!(s.target instanceof HTMLElement) || !s.target.dataset.dropdownItem || !v.value)) {
+            if (s.key === "ArrowDown") {
+              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(), i !== e) {
+                const l = H(
+                  p.value,
+                  (V, be) => be < i && !V.disabled
+                ), L = Array.from(
+                  v.value.querySelectorAll(".bb-dropdown__item")
+                )[l];
+                L instanceof HTMLElement && L.focus();
+              }
+            } else if (s.key === "Tab") {
+              if (i === t && !s.shiftKey) {
+                const l = Array.from(
+                  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());
+              }
+            }
+          }
+        };
+        return {
+          ...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
+        };
+      });
+    }), G = (e) => {
+      if (!a.disabled) {
+        if (A) {
+          A = !1, e.preventDefault(), e.stopPropagation();
+          return;
+        }
+        e.stopPropagation(), a.placement === "cursor" && (h.value = O(e.clientX, e.clientY)), r.value ? f() : E();
+      }
+    }, 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 z, m = null, A = !1;
+    const M = () => {
+      clearTimeout(z), m = 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 (!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 (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(), 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;
+      !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", b, { passive: !0 }), document.addEventListener("keydown", x, { capture: !0 });
+    }, f = async () => {
+      r.value = !1, ce();
+    };
+    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 && N(e);
+      },
+      { immediate: !0 }
+    );
+    let k = null;
+    I(
+      [g, le],
+      ([e, t]) => {
+        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 }
+    ), 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 }
+    ), ge(() => {
+      k?.();
+    });
+    const { width: me } = Te(
+      T,
+      { width: 0, height: 0 },
+      {
+        box: "border-box"
+      }
+    ), 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) => (y(), _(q, null, [
+      ae.value ? P("", !0) : w(e.$slots, "activator", he(R({ key: 0 }, {
+        props: {
+          ref: N
+        },
+        disabled: e.disabled,
+        open: r.value,
+        placement: e.placement
+      }))),
+      Q(_e, R({
+        ref: "popover",
+        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", {
+          [`bb-dropdown--${e.theme}`]: !0
+        }],
+        eager: e.eager,
+        offset: e.offset,
+        "hide-arrow": e.placement === "cursor",
+        padding: e.padding,
+        placement: e.placement === "cursor" ? "bottom-start" : e.placement,
+        "transition-duration": e.transitionDuration
+      }, e.$attrs), {
+        default: Z(() => [
+          ee("span", {
+            id: `menu_${ke(d)}`,
+            "aria-labelledby": K.value,
+            role: "menu",
+            class: "bb-dropdown__items-container",
+            inert: !r.value,
+            style: Ee(J.value ? { width: J.value } : void 0)
+          }, [
+            w(e.$slots, "prepend", {
+              disabled: e.disabled,
+              open: r.value,
+              placement: e.placement
+            }),
+            (y(!0), _(q, null, Le(C.value, ({ original: o, isGroupStart: i, ...n }, u) => (y(), _(q, {
+              key: n.key
+            }, [
+              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: n.text
+              }),
+              Q(Ie, R({
+                role: "menuitem",
+                class: ["bb-dropdown__item", {
+                  "bb-dropdown__item--first": u === 0,
+                  "bb-dropdown__item--last": u === p.value.length - 1
+                }],
+                "data-dropdown-item": !0,
+                ref_for: !0
+              }, n), {
+                default: Z(() => [
+                  w(e.$slots, n.key, {
+                    disabled: n.disabled,
+                    index: u,
+                    item: o,
+                    open: r.value,
+                    placement: e.placement,
+                    text: n.text
+                  }, () => [
+                    n["prepend:icon"] ? (y(), te(oe, {
+                      key: 0,
+                      class: "item__prepend-icon",
+                      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: n["append:icon"]
+                    }, null, 8, ["type"])) : P("", !0)
+                  ])
+                ]),
+                _: 2
+              }, 1040, ["class"]),
+              w(e.$slots, "item:append", {
+                disabled: n.disabled,
+                index: u,
+                item: p.value[u],
+                open: r.value,
+                placement: e.placement,
+                text: n.text
+              })
+            ], 64))), 128)),
+            w(e.$slots, "append", {
+              disabled: e.disabled,
+              open: r.value,
+              placement: e.placement
+            })
+          ], 12, Me)
+        ]),
+        _: 3
+      }, 16, ["modelValue", "anchor", "arrow-padding", "boundary", "class", "eager", "offset", "hide-arrow", "padding", "placement", "transition-duration"])
+    ], 64));
+  }
+});
+export {
+  tt as default
+};

package/dist/index84.js

@@ -0,0 +1,156 @@
+import { defineComponent as I, ref as N, computed as l, createElementBlock as C, openBlock as u, mergeProps as g, unref as d, createVNode as m, withCtx as n, createBlock as z, createCommentVNode as y, createElementVNode as b, toDisplayString as _, createSlots as V, renderSlot as r, normalizeProps as s, guardReactiveProps as p, renderList as E } from "vue";
+import P from "./index14.js";
+/* empty css        */
+import M from "./index82.js";
+/* empty css        */
+/* empty css       */
+/* empty css       */
+import D from "./index88.js";
+/* empty css        */
+import O from "./index118.js";
+/* empty css         */
+import { useLocale as R } from "./index240.js";
+const T = { class: "bb-dropdown-button__content" }, Z = {
+  key: 1,
+  class: "bb-dropdown-button__loading-label sr-only"
+}, q = { class: "bb-dropdown-button__dropdown-label sr-only" }, te = /* @__PURE__ */ I({
+  __name: "BbDropdownButton",
+  props: {
+    arrowPadding: {},
+    disabled: { type: Boolean },
+    eager: { type: Boolean },
+    id: {},
+    items: {},
+    offset: {},
+    padding: {},
+    placement: {},
+    theme: { default: "default" },
+    transitionDuration: {},
+    width: {},
+    autoLoading: { type: Boolean, default: !0 },
+    "append:icon": {},
+    block: { type: Boolean },
+    disabledWhileLoading: { type: Boolean, default: !0 },
+    loading: { type: Boolean },
+    "prepend:icon": {},
+    size: {}
+  },
+  setup(S) {
+    const t = S, { t: c } = R(), f = N(0), w = l(
+      () => t.loading || !!f.value && t.autoLoading
+    ), W = (e) => async (...a) => {
+      w.value && t.disabledWhileLoading || (f.value++, await e(...a), f.value--);
+    }, v = (e) => e.onClick ? {
+      ...e,
+      key: e.key.split(/\W+/g).join("_").toLowerCase(),
+      onClick: W(e.onClick)
+    } : {
+      ...e,
+      key: e.key.split(/\W+/g).join("_").toLowerCase()
+    }, h = l(
+      () => t.items.map(
+        (e) => Array.isArray(e) ? e.map(v) : v(e)
+      )
+    ), k = l(() => h.value.flat()), B = l(() => {
+      const e = { ...k.value[0] };
+      return e.disabled = e.disabled || t.disabled, e;
+    }), j = typeof t.size == "string" ? { default: t.size } : { default: "md", ...t.size }, A = Object.entries(j).reduce(
+      (e, [a, o]) => (a === "default" ? e[`data-${o}`] = "" : e[`data-${a}:${o}`] = "", e),
+      {}
+    );
+    return (e, a) => (u(), C("span", g({
+      class: ["bb-dropdown-button", {
+        "bb-dropdown-button--block": e.block,
+        "bb-dropdown-button--loading": w.value,
+        [`bb-dropdown-button--${e.theme}`]: !0
+      }]
+    }, d(A)), [
+      m(P, g(B.value, { class: "bb-dropdown-button__main-btn" }), {
+        default: n(() => [
+          m(d(O), { class: "bb-dropdown-button__spinner" }),
+          t["prepend:icon"] ? (u(), z(d(D), {
+            key: 0,
+            class: "bb-dropdown-button__prepend-icon",
+            type: t["prepend:icon"]
+          }, null, 8, ["type"])) : y("", !0),
+          b("span", T, _(B.value.text), 1),
+          w.value ? (u(), C("span", Z, _(d(c)("common.loadingText").value), 1)) : y("", !0),
+          t["append:icon"] ? (u(), z(d(D), {
+            key: 2,
+            class: "bb-dropdown-button__append-icon",
+            type: t["append:icon"]
+          }, null, 8, ["type"])) : y("", !0)
+        ]),
+        _: 1
+      }, 16),
+      m(M, {
+        id: e.id,
+        "arrow-padding": e.arrowPadding,
+        disabled: e.disabled,
+        eager: e.eager,
+        items: h.value,
+        offset: e.offset,
+        padding: e.padding,
+        placement: e.placement,
+        theme: e.theme,
+        "transition-duration": e.transitionDuration,
+        width: e.width
+      }, V({
+        activator: n(({ props: o, open: i, disabled: $, placement: L }) => [
+          r(e.$slots, "activator", {
+            disabled: $,
+            open: i,
+            placement: L,
+            props: o
+          }, () => [
+            m(P, g(o, { class: "bb-dropdown-button__dropdown-btn" }), {
+              default: n(() => [
+                b("span", q, _(i ? d(c)("dropdownButton.close").value : d(c)("dropdownButton.open").value), 1),
+                r(e.$slots, "right-btn", {
+                  disabled: $,
+                  open: i,
+                  placement: L
+                }, () => [
+                  a[0] || (a[0] = b("svg", {
+                    class: "bb-dropdown-button__dropdown-chevron",
+                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg"
+                  }, [
+                    b("path", {
+                      d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6l1.41 1.41Z",
+                      fill: "currentColor"
+                    })
+                  ], -1))
+                ])
+              ]),
+              _: 2
+            }, 1040)
+          ])
+        ]),
+        prepend: n((o) => [
+          r(e.$slots, "prepend", s(p(o)))
+        ]),
+        "item:prepend": n((o) => [
+          r(e.$slots, "item:prepend", s(p(o)))
+        ]),
+        "item:append": n((o) => [
+          r(e.$slots, "item:append", s(p(o)))
+        ]),
+        append: n((o) => [
+          r(e.$slots, "append", s(p(o)))
+        ]),
+        _: 2
+      }, [
+        E(k.value, (o) => ({
+          name: o.key,
+          fn: n((i) => [
+            r(e.$slots, o.key, s(p(i)))
+          ])
+        }))
+      ]), 1032, ["id", "arrow-padding", "disabled", "eager", "items", "offset", "padding", "placement", "theme", "transition-duration", "width"])
+    ], 16));
+  }
+});
+export {
+  te as default
+};