bitboss-ui 2.1.129 → 2.1.130

package/dist/index82.js

@@ -1,5 +1,324 @@
-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 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 "./index271.js";
+import { useId as Le } from "./index8.js";
+import { useUntil as ke } from "./index270.js";
+import { wait as Ae } from "./index147.js";
+import De from "./index14.js";
+/* empty css        */
+import ee from "./index88.js";
+/* empty css        */
+import $e from "./index253.js";
+/* empty css         */
+import te from "./index272.js";
+import { extractDomContainer as H } from "./index263.js";
+import { useIntersectionObserver as Se, useElementSize as Pe } from "./index148.js";
+import { parseWidthString as Ie } from "./index273.js";
+const Te = ["id", "aria-labelledby", "inert"], Oe = { class: "item__content" }, _e = 500, Ce = 10, Ge = /* @__PURE__ */ fe({
+  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(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;
+      return new Set(Array.isArray(e) ? e : [e]);
+    }), P = (e, t) => ({
+      getBoundingClientRect: () => ({
+        x: e,
+        y: t,
+        width: 0,
+        height: 0,
+        top: t,
+        left: e,
+        right: e,
+        bottom: t,
+        toJSON() {
+          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,
+      async ([{ intersectionRatio: e }]) => {
+        e !== 1 && a.value && await c();
+      },
+      { threshold: [0, 1], immediate: !1 }
+    ), I = p(() => {
+      let e = r.items.findIndex((n) => !n.disabled), t = R(
+        r.items,
+        (n) => !n.disabled
+      );
+      return r.items.map((n, o) => {
+        const i = `${d}-item-${n.key}`, { onClick: O, ..._ } = n, ce = async (s) => {
+          s.stopPropagation(), await c();
+          const l = document.querySelector(`#${d}`);
+          l && l.focus(), O?.(s);
+        }, pe = (s) => {
+          if (!(!(s.target instanceof HTMLElement) || !s.target.dataset.dropdownItem || !m.value)) {
+            if (s.key === "ArrowDown") {
+              if (s.preventDefault(), o !== t) {
+                const l = m.value.querySelector(
+                  te.map((A) => `#${i} ~ ${A}`).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")
+                )[l];
+                h instanceof HTMLElement && h.focus();
+              }
+            } else if (s.key === "Tab") {
+              if (o === 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) {
+                const l = document.querySelector(`#${d}`);
+                l && (s.preventDefault(), l.focus());
+              }
+            }
+          }
+        };
+        return {
+          ..._,
+          original: n,
+          key: n.key.split(/\W+/g).join("_").toLowerCase(),
+          disabled: _.disabled || r.disabled,
+          id: i,
+          onClick: ce,
+          onKeydown: pe
+        };
+      });
+    }), N = (e) => {
+      if (!r.disabled) {
+        if (L) {
+          L = !1, e.preventDefault(), e.stopPropagation();
+          return;
+        }
+        e.stopPropagation(), r.placement === "cursor" && (y.value = P(e.clientX, e.clientY)), a.value ? c() : w();
+      }
+    }, U = (e) => {
+      r.disabled || (e.preventDefault(), e.stopPropagation(), !(r.placement === "cursor" && (y.value = P(e.clientX, e.clientY), a.value)) && (a.value ? c() : w()));
+    };
+    let Y, u = null, L = !1;
+    const T = () => {
+      clearTimeout(Y), u = 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));
+    }, 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();
+    }, 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();
+      };
+      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) => {
+      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, {
+        passive: !0
+      }), document.addEventListener("focusin", f, { passive: !0 }), document.addEventListener("keydown", z, { capture: !0 });
+    }, c = async () => {
+      a.value = !1, de();
+    };
+    $(a, (e) => {
+      e || (document.removeEventListener("click", f), document.removeEventListener("contextmenu", f), document.removeEventListener("focusin", f), document.removeEventListener("keydown", z, { capture: !0 }));
+    }), $(
+      () => r.activator,
+      (e) => {
+        e && K(e);
+      },
+      { immediate: !0 }
+    );
+    let g = null;
+    $(
+      [b, ie],
+      ([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");
+        };
+      },
+      { 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"));
+      },
+      { immediate: !0 }
+    ), be(() => {
+      g?.();
+    });
+    const { width: ue } = Pe(
+      S,
+      { 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`;
+        }
+        return "0px";
+      }
+    });
+    return (e, t) => (E(), M(B, null, [
+      ne.value ? V("", !0) : v(e.$slots, "activator", ye(q({ key: 0 }, {
+        props: {
+          ref: K
+        },
+        disabled: e.disabled,
+        open: a.value,
+        placement: e.placement
+      }))),
+      x($e, q({
+        ref: "popover",
+        modelValue: a.value,
+        "onUpdate:modelValue": t[0] || (t[0] = (n) => a.value = n),
+        anchor: se.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: J(() => [
+          Q("span", {
+            id: `menu_${ge(d)}`,
+            "aria-labelledby": F.value,
+            role: "menu",
+            class: "bb-dropdown__items-container",
+            inert: !a.value,
+            style: we(G.value ? { width: G.value } : void 0)
+          }, [
+            v(e.$slots, "prepend", {
+              disabled: e.disabled,
+              open: a.value,
+              placement: e.placement
+            }),
+            (E(!0), M(B, null, he(I.value, ({ original: n, ...o }, i) => (E(), M(B, {
+              key: o.key
+            }, [
+              v(e.$slots, "item:prepend", {
+                disabled: o.disabled,
+                index: i,
+                item: e.items[i],
+                open: a.value,
+                placement: e.placement,
+                text: o.text
+              }),
+              x(De, q({
+                role: "menuitem",
+                class: ["bb-dropdown__item", {
+                  "bb-dropdown__item--first": i === 0,
+                  "bb-dropdown__item--last": i === e.items.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,
+                    placement: e.placement,
+                    text: o.text
+                  }, () => [
+                    o["prepend:icon"] ? (E(), Z(ee, {
+                      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, {
+                      key: 1,
+                      class: "item__append-icon",
+                      type: o["append:icon"]
+                    }, null, 8, ["type"])) : V("", !0)
+                  ])
+                ]),
+                _: 2
+              }, 1040, ["class"]),
+              v(e.$slots, "item:append", {
+                disabled: o.disabled,
+                index: i,
+                item: e.items[i],
+                open: a.value,
+                placement: e.placement,
+                text: o.text
+              })
+            ], 64))), 128)),
+            v(e.$slots, "append", {
+              disabled: e.disabled,
+              open: a.value,
+              placement: e.placement
+            })
+          ], 12, Te)
+        ]),
+        _: 3
+      }, 16, ["modelValue", "anchor", "arrow-padding", "boundary", "class", "eager", "offset", "hide-arrow", "padding", "placement", "transition-duration"])
+    ], 64));
+  }
+});
+export {
+  Ge as default
+};

package/dist/index84.js

@@ -0,0 +1,154 @@
+import { defineComponent as j, ref as N, computed as g, createElementBlock as $, openBlock as l, mergeProps as y, unref as d, createVNode as u, withCtx as n, createBlock as L, createCommentVNode as _, createElementVNode as b, toDisplayString as v, createSlots as V, renderSlot as r, normalizeProps as s, guardReactiveProps as p, renderList as E } from "vue";
+import C from "./index14.js";
+/* empty css        */
+import A from "./index82.js";
+/* empty css        */
+/* empty css       */
+/* empty css       */
+import z from "./index88.js";
+/* empty css        */
+import I from "./index118.js";
+/* empty css         */
+import { useLocale as M } from "./index235.js";
+const O = { class: "bb-dropdown-button__content" }, R = {
+  key: 1,
+  class: "bb-dropdown-button__loading-label sr-only"
+}, T = { class: "bb-dropdown-button__dropdown-label sr-only" }, ee = /* @__PURE__ */ j({
+  __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(P) {
+    const t = P, { t: m } = M(), c = N(0), f = g(
+      () => t.loading || !!c.value && t.autoLoading
+    ), D = (e) => async (...a) => {
+      f.value && t.disabledWhileLoading || (c.value++, await e(...a), c.value--);
+    }, w = g(
+      () => t.items.map((e) => e.onClick ? {
+        ...e,
+        key: e.key.split(/\W+/g).join("_").toLowerCase(),
+        onClick: D(e.onClick)
+      } : {
+        ...e,
+        key: e.key.split(/\W+/g).join("_").toLowerCase()
+      })
+    ), h = g(() => {
+      const e = { ...w.value[0] };
+      return e.disabled = e.disabled || t.disabled, e;
+    }), S = typeof t.size == "string" ? { default: t.size } : { default: "md", ...t.size }, W = Object.entries(S).reduce(
+      (e, [a, o]) => (a === "default" ? e[`data-${o}`] = "" : e[`data-${a}:${o}`] = "", e),
+      {}
+    );
+    return (e, a) => (l(), $("span", y({
+      class: ["bb-dropdown-button", {
+        "bb-dropdown-button--block": e.block,
+        "bb-dropdown-button--loading": f.value,
+        [`bb-dropdown-button--${e.theme}`]: !0
+      }]
+    }, d(W)), [
+      u(C, y(h.value, { class: "bb-dropdown-button__main-btn" }), {
+        default: n(() => [
+          u(d(I), { class: "bb-dropdown-button__spinner" }),
+          t["prepend:icon"] ? (l(), L(d(z), {
+            key: 0,
+            class: "bb-dropdown-button__prepend-icon",
+            type: t["prepend:icon"]
+          }, null, 8, ["type"])) : _("", !0),
+          b("span", O, v(h.value.text), 1),
+          f.value ? (l(), $("span", R, v(d(m)("common.loadingText").value), 1)) : _("", !0),
+          t["append:icon"] ? (l(), L(d(z), {
+            key: 2,
+            class: "bb-dropdown-button__append-icon",
+            type: t["append:icon"]
+          }, null, 8, ["type"])) : _("", !0)
+        ]),
+        _: 1
+      }, 16),
+      u(A, {
+        id: e.id,
+        "arrow-padding": e.arrowPadding,
+        disabled: e.disabled,
+        eager: e.eager,
+        items: w.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: k, placement: B }) => [
+          r(e.$slots, "activator", {
+            disabled: k,
+            open: i,
+            placement: B,
+            props: o
+          }, () => [
+            u(C, y(o, { class: "bb-dropdown-button__dropdown-btn" }), {
+              default: n(() => [
+                b("span", T, v(i ? d(m)("dropdownButton.close").value : d(m)("dropdownButton.open").value), 1),
+                r(e.$slots, "right-btn", {
+                  disabled: k,
+                  open: i,
+                  placement: B
+                }, () => [
+                  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(w.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 {
+  ee as default
+};