bitboss-ui 2.1.0 → 2.1.1

package/dist/index248.js

@@ -1,7 +1,102 @@
-import o from "./index310.js";
-/* empty css         */
-import t from "./index281.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-8c6b13bd"]]);
+import { defineComponent as F, ref as H, computed as L, watch as N, createElementBlock as d, openBlock as v, Fragment as S, renderList as A, withModifiers as O, normalizeClass as P, toDisplayString as V } from "vue";
+import { hash as f } from "./index229.js";
+import { isNil as i } from "./index262.js";
+const z = ["text", "onClick:clear"], j = /* @__PURE__ */ F({
+  __name: "CommaBox",
+  props: {
+    options: {}
+  },
+  emits: ["option:unselected"],
+  setup(m, { expose: h, emit: x }) {
+    const t = m, a = x, n = H(null), l = L(() => t.options.some((e) => !e.disabled)), u = (e = 1) => {
+      const s = i(n.value) ? -1 : n.value;
+      let o = (s + e) % t.options.length;
+      for (; t.options[o].disabled && o !== s; )
+        o = u(e + 1);
+      return o;
+    }, b = () => {
+      if (!l.value) return;
+      const e = u();
+      n.value = e;
+    }, c = (e = 1) => {
+      const s = i(n.value) ? 0 : n.value;
+      let o = (s - e + t.options.length) % t.options.length;
+      for (; t.options[o].disabled && o !== s; )
+        o = c(e + 1);
+      return o;
+    }, w = async () => {
+      if (!l.value) return;
+      const e = c();
+      n.value = e;
+    }, I = () => {
+      if (!l.value) return;
+      let e = 0;
+      for (; t.options[e].disabled; )
+        e++;
+      n.value = e;
+    }, g = () => {
+      if (!l.value) return;
+      let e = t.options.length - 1;
+      for (; t.options[e].disabled && e !== 0; )
+        e--;
+      n.value = e;
+    }, k = () => {
+      if (!l.value) return;
+      let e = 0;
+      for (; !t.options[e].selected && t.options.length !== e; )
+        e++;
+      n.value = e;
+    }, _ = () => {
+      if (!l.value) return;
+      let e = t.options.length - 1;
+      for (; t.options[e].selected && e !== 0; )
+        e--;
+      n.value = e;
+    }, C = (e) => {
+      if (!l.value) return;
+      const s = t.options.findIndex(
+        (o) => o.valueHash === e
+      );
+      s >= 0 && (n.value = s);
+    }, r = () => {
+      n.value = null;
+    }, y = () => {
+      if (i(n.value)) return;
+      const e = t.options[n.value];
+      e.selected && a("option:unselected", e);
+    }, B = () => i(n.value) ? void 0 : t.options[n.value];
+    return N(
+      () => t.options,
+      (e, s) => {
+        f(e) !== f(s) && r();
+      },
+      {
+        flush: "post"
+      }
+    ), h({
+      focusNext: b,
+      focusPrevious: w,
+      focusFirst: I,
+      focusFirstSelected: k,
+      focusLast: g,
+      focusLastSelected: _,
+      blur: r,
+      confirmOption: y,
+      focusByHash: C,
+      getHighlighted: B
+    }), (e, s) => (v(!0), d(S, null, A(e.options, (o, p) => (v(), d("span", {
+      key: o.valueHash,
+      class: P({
+        "bb-commabox-item": !0,
+        "bb-commabox-item--focused": p === n.value,
+        "bb-commabox-item--has-comma": p !== e.options.length - 1
+      }),
+      clearable: !0,
+      text: o.text,
+      "onClick:clear": O((D) => a("option:unselected", o), ["stop"])
+    }, V(o.text), 43, z))), 128));
+  }
+});
 export {
-  m as default
+  j as default
 };

package/dist/index25.js

@@ -1,22 +1,20 @@
-import { defineComponent as P, mergeModels as D, useModel as q, computed as p, ref as E, watch as A, onMounted as H, createElementBlock as d, openBlock as u, withModifiers as K, normalizeStyle as O, normalizeClass as R, unref as v, createCommentVNode as g, Fragment as U, createElementVNode as l, renderSlot as s, createTextVNode as j, toDisplayString as T, createVNode as G, withCtx as J, nextTick as Q } from "vue";
-import { parseSize as X } from "./index215.js";
+import { defineComponent as P, mergeModels as D, useModel as q, computed as p, ref as E, watch as A, onMounted as H, createElementBlock as d, openBlock as u, withModifiers as K, normalizeStyle as O, normalizeClass as R, unref as v, createCommentVNode as g, Fragment as U, createElementVNode as l, renderSlot as s, createTextVNode as j, toDisplayString as T, nextTick as G } from "vue";
+import { parseSize as J } from "./index209.js";
 import { useId as V } from "./index8.js";
-import { useLocale as Y } from "./index216.js";
-import { useMobile as Z } from "./index9.js";
-import { useUntil as x } from "./index217.js";
-import { wait as h } from "./index135.js";
-import ee from "./index111.js";
-/* empty css         */
-const oe = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], te = {
+import { useLocale as Q } from "./index210.js";
+import { useMobile as X } from "./index9.js";
+import { useUntil as Y } from "./index211.js";
+import { wait as y } from "./index135.js";
+const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
   ref: "header",
   class: "bb-base-dialog__header"
-}, le = { class: "bb-base-dialog__close" }, se = ["aria-label", "disabled"], ae = {
+}, ee = { class: "bb-base-dialog__close" }, oe = ["aria-label", "disabled"], te = {
   ref: "body",
   class: "bb-base-dialog__body scrollbar-border"
-}, ie = {
+}, le = {
   ref: "footer",
   class: "bb-base-dialog__footer"
-}, ve = /* @__PURE__ */ P({
+}, ce = /* @__PURE__ */ P({
   __name: "BaseDialog",
   props: /* @__PURE__ */ D({
     closeLabel: {},
@@ -38,44 +36,44 @@ const oe = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], te = {
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ D(["shown", "hidden"], ["update:modelValue"]),
-  setup(y, { emit: S }) {
-    const o = y, w = S, t = q(y, "modelValue"), { t: z } = Y(), N = p(
+  setup(h, { emit: S }) {
+    const o = h, w = S, t = q(h, "modelValue"), { t: z } = Q(), W = p(
       () => o.closeLabel || z("dialog.closeLabel").value
-    ), n = E(null), c = x(
+    ), n = E(null), c = Y(
       () => t.value || o.eager,
       {
         initialValue: t.value || o.eager
       }
-    ), b = `title_${V().id.value}`, f = `description_${V().id.value}`, C = (e) => {
+    ), b = `title_${V().id.value}`, f = `description_${V().id.value}`, k = (e) => {
       if (e.key === "Escape" && (o.disabled || o.persistent))
-        return e.preventDefault(), a.value = !0, h(200).then(() => {
+        return e.preventDefault(), a.value = !0, y(200).then(() => {
           a.value = !1;
         }), !1;
-    }, _ = async (e) => {
+    }, C = async (e) => {
       var i, B, L, M;
       e ? ((i = window.globalThis) != null && i.document && !document.documentElement.style.getPropertyValue("--scrollbar-width") && (document.documentElement.style.setProperty(
         "--scrollbar-width",
-        `${I()}px`
-      ), document.addEventListener("keydown", C)), (B = n.value) == null || B.showModal(), o.focusTarget && Q(() => {
+        `${N()}px`
+      ), document.addEventListener("keydown", k)), (B = n.value) == null || B.showModal(), o.focusTarget && G(() => {
         var $;
         const m = ($ = n.value) == null ? void 0 : $.querySelector(o.focusTarget);
         m && m instanceof HTMLElement && m.focus();
-      }), w("shown")) : (await h(o.transitionDuration), (L = window.globalThis) != null && L.document && document.removeEventListener("keydown", C), (M = n.value) == null || M.close(), w("hidden"));
+      }), w("shown")) : (await y(o.transitionDuration), (L = window.globalThis) != null && L.document && document.removeEventListener("keydown", k), (M = n.value) == null || M.close(), w("hidden"));
     };
-    A(t, _), H(() => {
-      t.value && _(!0);
+    A(t, C), H(() => {
+      t.value && C(!0);
     });
-    const W = p(() => k.value ? "100%" : X(o.size, {
+    const I = p(() => _.value ? "100%" : J(o.size, {
       sm: 384,
       md: 652,
       lg: 896
     })), r = (e) => {
       if (e.preventDefault(), o.disabled || o.persistent)
-        return a.value = !0, h(300).then(() => {
+        return a.value = !0, y(300).then(() => {
           a.value = !1;
         }), !1;
       t.value = !1;
-    }, a = E(!1), I = () => globalThis.document ? window.innerWidth - document.documentElement.clientWidth : 0, { isMobile: F } = Z(), k = p(
+    }, a = E(!1), N = () => globalThis.document ? window.innerWidth - document.documentElement.clientWidth : 0, { isMobile: F } = X(), _ = p(
       () => o.fullscreen === !0 || o.fullscreen === "mobile" && F.value
     );
     return (e, i) => (u(), d("dialog", {
@@ -89,7 +87,7 @@ const oe = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], te = {
         [
           {
             "bb-base-dialog--open": t.value,
-            "bb-base-dialog--fullscreen": k.value,
+            "bb-base-dialog--fullscreen": _.value,
             "bb-base-dialog--compact": e.compact,
             "bb-base-dialog--deny-close": a.value
           },
@@ -99,14 +97,14 @@ const oe = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], te = {
       ]),
       inert: !t.value,
       style: O({
-        "--max-width": W.value,
+        "--max-width": I.value,
         "--transition-duration": `${o.transitionDuration}ms`
       }),
       onCancel: r,
       onClick: K(r, ["self"])
     }, [
       v(c) ? (u(), d(U, { key: 0 }, [
-        l("div", te, [
+        l("div", x, [
           s(e.$slots, "header", {
             close: r,
             title: e.title,
@@ -120,10 +118,10 @@ const oe = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], te = {
                 j(T(e.title), 1)
               ])
             ]),
-            l("span", le, [
+            l("span", ee, [
               e.showClose ? (u(), d("button", {
                 key: 0,
-                "aria-label": N.value,
+                "aria-label": W.value,
                 disabled: o.disabled,
                 type: "button",
                 onClick: r
@@ -145,11 +143,11 @@ const oe = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], te = {
                     ])
                   ], -1))
                 ])
-              ], 8, se)) : g("", !0)
+              ], 8, oe)) : g("", !0)
             ])
           ])
         ], 512),
-        l("div", ae, [
+        l("div", te, [
           s(e.$slots, "description", {
             descriptionId: f,
             text: e.description
@@ -160,20 +158,15 @@ const oe = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], te = {
               class: "bb-base-dialog__description sr-only"
             }, T(e.description), 1)) : g("", !0)
           ]),
-          G(ee, { "transition-duration": 500 }, {
-            default: J(() => [
-              s(e.$slots, "default")
-            ]),
-            _: 3
-          })
+          s(e.$slots, "default")
         ], 512),
-        l("div", ie, [
+        l("div", le, [
           s(e.$slots, "footer")
         ], 512)
       ], 64)) : g("", !0)
-    ], 46, oe));
+    ], 46, Z));
   }
 });
 export {
-  ve as default
+  ce as default
 };

package/dist/index250.js

@@ -1,20 +1,230 @@
-import { isNil as c } from "./index259.js";
-const a = (t, r) => {
-  if (!Object.prototype.hasOwnProperty.call(t, r))
-    throw new Error(
-      `Object ${JSON.stringify(t, null, 2)} has no property named "${r.toString()}"`
-    );
-}, l = (t) => typeof t == "string" ? t.toLocaleLowerCase() : JSON.stringify(t).toLowerCase(), y = (t, r, s) => {
-  const i = s.toLocaleLowerCase();
-  for (let e = 0; e < r.length; e++) {
-    const n = r[e];
-    a(t, n);
-    const o = t[n];
-    if (c(o)) continue;
-    if (l(o).includes(i)) return !0;
+import { defineComponent as U, ref as f, computed as x, watch as E, createElementBlock as d, openBlock as p, withModifiers as X, normalizeStyle as h, normalizeClass as $, createElementVNode as c, renderSlot as m, createTextVNode as H, toDisplayString as g, unref as L, Fragment as Z, renderList as ee } from "vue";
+import { isNil as b } from "./index262.js";
+import { useVirtualizer as te } from "./index335.js";
+import { isNotNil as oe } from "./index140.js";
+import { hash as N } from "./index229.js";
+import { useLocale as ne } from "./index210.js";
+const le = { class: "bb-listbox__outer-container scrollbar-border" }, ie = {
+  key: 0,
+  class: "bb-listbox__loading"
+}, se = {
+  key: 1,
+  class: "bb-listbox__no-data"
+}, ae = ["aria-selected", "data-index"], ue = { class: "autocomplete-option__content" }, re = { class: "autocomplete-option__label" }, xe = /* @__PURE__ */ U({
+  __name: "ListBox",
+  props: {
+    compact: { type: Boolean },
+    options: {},
+    open: { type: Boolean },
+    loading: { type: Boolean },
+    multiple: { type: Boolean },
+    transitionDuration: { default: 250 },
+    loadingText: {},
+    noDataText: {}
+  },
+  emits: ["option:selected", "option:unselected"],
+  setup(V, { expose: z, emit: C }) {
+    const o = V, _ = C, { t: y } = ne(), s = f(null), O = (e) => "option_" + JSON.stringify(e).replace(/\W/g, "_"), i = x(
+      () => o.options.map((e) => ({ ...e, id: O(e.value) }))
+    ), v = te({
+      get count() {
+        return o.options.length;
+      },
+      getScrollElement: () => s.value,
+      estimateSize: () => 42,
+      overscan: 5
+    }), F = (e) => {
+      e && v.value.measureElement(e);
+    }, M = x(() => v.value.getVirtualItems()), A = x(() => v.value.getTotalSize()), n = f(null), a = x(
+      () => o.open && o.options.some((e) => !e.disabled)
+    ), I = (e = 1) => {
+      const l = b(n.value) ? -1 : n.value;
+      let t = (l + e) % o.options.length;
+      for (; o.options[t].disabled && t !== l; )
+        t = I(e + 1);
+      return t;
+    }, P = () => {
+      if (!a.value) return;
+      const e = I();
+      n.value = e, u();
+    }, S = (e = 1) => {
+      const l = b(n.value) ? 0 : n.value;
+      let t = (l - e + o.options.length) % o.options.length;
+      for (; o.options[t].disabled && t !== l; )
+        t = S(e + 1);
+      return t;
+    }, R = async () => {
+      if (!a.value) return;
+      const e = S();
+      n.value = e, u();
+    }, q = () => {
+      if (!a.value) return;
+      let e = 0;
+      for (; o.options[e].disabled; )
+        e++;
+      n.value = e, u();
+    }, J = () => {
+      if (!a.value) return;
+      let e = o.options.length - 1;
+      for (; o.options[e].disabled && e !== 0; )
+        e--;
+      n.value = e, u();
+    }, W = () => {
+      if (!a.value) return;
+      let e = 0;
+      for (; o.options[e] && !o.options[e].selected && o.options.length !== e; )
+        e++;
+      n.value = e % o.options.length, u();
+    }, Y = () => {
+      if (!a.value) return;
+      let e = o.options.length - 1;
+      for (; o.options[e].selected && e > 0; )
+        e--;
+      n.value = e === -1 ? o.options.length - 1 : e, u();
+    }, j = (e) => {
+      if (!a.value) return;
+      const l = o.options.findIndex(
+        (t) => t.valueHash === e
+      );
+      l >= 0 && (n.value = l), u();
+    }, k = () => {
+      n.value = null;
+    }, u = () => {
+      s.value && oe(n.value) && v.value.scrollToIndex(n.value, {
+        align: "center",
+        behavior: "smooth"
+      });
+    }, w = () => {
+      if (b(n.value) || !o.open) return;
+      const e = o.options[n.value];
+      e.selected ? _("option:unselected", e) : _("option:selected", e);
+    }, B = f(0), T = () => {
+      s.value && (B.value = s.value.scrollHeight);
+    }, G = (e) => !e.disabled, K = (e) => {
+      if (e.preventDefault(), s.value && e.target && e.target instanceof HTMLElement) {
+        if (!s.value.querySelector('[role="listbox"]'))
+          throw new Error("Could not find listbox in DOM tree.");
+        let t = e.target, r = t.dataset.index;
+        for (; b(r) && t.parentElement; )
+          t = t.parentElement, r = t.dataset.index;
+        if (r) {
+          const D = o.options[+r];
+          D && G(D) && (n.value = +r, w());
+        }
+      }
+    }, Q = () => b(n.value) ? void 0 : o.options[n.value];
+    return E(
+      () => o.open,
+      () => {
+        T();
+      },
+      { flush: "post" }
+    ), E(
+      () => o.options,
+      (e, l) => {
+        N(e.map((t) => t.valueHash)) !== N(l.map((t) => t.valueHash)) && (v.value.calculateRange(), T(), k());
+      },
+      {
+        flush: "post"
+      }
+    ), z({
+      focusNext: P,
+      focusPrevious: R,
+      focusFirst: q,
+      focusFirstSelected: W,
+      focusLast: J,
+      focusLastSelected: Y,
+      blur: k,
+      confirmOption: w,
+      focusByHash: j,
+      getHighlighted: Q
+    }), (e, l) => (p(), d("span", {
+      class: $(["bb-listbox", {
+        "bb-listbox--compact": e.compact,
+        "bb-listbox--loading": e.loading,
+        "bb-listbox--multiple": e.multiple,
+        "bb-listbox--no-data": !i.value.length,
+        "bb-listbox--open": e.open
+      }]),
+      style: h({
+        "--transition-duration": `${e.transitionDuration}ms`,
+        "--overlay-min-height": `${B.value}px`
+      }),
+      onClick: X(K, ["stop"])
+    }, [
+      c("span", le, [
+        c("span", {
+          ref_key: "inner",
+          ref: s,
+          class: "bb-listbox__inner-container"
+        }, [
+          m(e.$slots, "options:prepend"),
+          e.loading && !e.options.length ? (p(), d("span", ie, [
+            m(e.$slots, "loading", {}, () => [
+              H(g(e.loadingText || L(y)("common.loadingText").value), 1)
+            ])
+          ])) : e.options.length ? (p(), d("span", {
+            key: 2,
+            role: "listbox",
+            style: h({
+              height: `${A.value}px`
+            }),
+            tabindex: "-1"
+          }, [
+            (p(!0), d(Z, null, ee(M.value, (t, r) => (p(), d("span", {
+              key: i.value[t.index].value,
+              ref_for: !0,
+              ref: F,
+              "aria-selected": n.value === r ? !0 : void 0,
+              class: $({
+                "bb-listbox__option autocomplete-option": !0,
+                "autocomplete-option--focused": n.value === t.index,
+                "autocomplete-option--selected": i.value[t.index].selected,
+                "autocomplete-option--disabled": i.value[t.index].disabled
+              }),
+              "data-index": t.index,
+              role: "option",
+              style: h({
+                transform: `translateY(${t.start}px)`
+              })
+            }, [
+              c("span", ue, [
+                m(e.$slots, "option", {
+                  disabled: !!i.value[t.index].disabled,
+                  focused: n.value === t.index,
+                  index: t.index,
+                  item: i.value[t.index].item,
+                  selected: !!i.value[t.index].selected,
+                  text: i.value[t.index].text,
+                  value: i.value[t.index].value
+                }, () => [
+                  l[0] || (l[0] = c("svg", {
+                    class: "autocomplete-option__checkbox",
+                    role: "presentation",
+                    viewBox: "276.411 158.834 114.971 114.97"
+                  }, [
+                    c("path", {
+                      d: "M 297.574 224.786 L 318.309 243.134 L 371.568 189.232",
+                      fill: "none",
+                      "stroke-linecap": "round",
+                      "stroke-width": "14px"
+                    })
+                  ], -1)),
+                  c("span", re, g(i.value[t.index].text), 1)
+                ])
+              ])
+            ], 14, ae))), 128))
+          ], 4)) : (p(), d("span", se, [
+            m(e.$slots, "no-data", {}, () => [
+              H(g(e.noDataText || L(y)("common.noDataText").value), 1)
+            ])
+          ])),
+          m(e.$slots, "options:append")
+        ], 512)
+      ])
+    ], 6));
   }
-  return !1;
-};
+});
 export {
-  y as matchAnyKey
+  xe as default
 };