bitboss-ui 2.1.95 → 2.1.96

package/dist/index354.js

@@ -1,136 +1,195 @@
-function c() {
-  return typeof window < "u";
-}
-function u(t) {
-  return p(t) ? (t.nodeName || "").toLowerCase() : "#document";
-}
-function i(t) {
-  var e;
-  return (t == null || (e = t.ownerDocument) == null ? void 0 : e.defaultView) || window;
-}
-function N(t) {
-  var e;
-  return (e = (p(t) ? t.ownerDocument : t.document) || window.document) == null ? void 0 : e.documentElement;
-}
-function p(t) {
-  return c() ? t instanceof Node || t instanceof i(t).Node : !1;
-}
-function m(t) {
-  return c() ? t instanceof Element || t instanceof i(t).Element : !1;
-}
-function w(t) {
-  return c() ? t instanceof HTMLElement || t instanceof i(t).HTMLElement : !1;
-}
-function f(t) {
-  return !c() || typeof ShadowRoot > "u" ? !1 : t instanceof ShadowRoot || t instanceof i(t).ShadowRoot;
-}
-const E = /* @__PURE__ */ new Set(["inline", "contents"]);
-function y(t) {
-  const {
-    overflow: e,
-    overflowX: n,
-    overflowY: o,
-    display: r
-  } = S(t);
-  return /auto|scroll|overlay|hidden|clip/.test(e + o + n) && !E.has(r);
-}
-const T = /* @__PURE__ */ new Set(["table", "td", "th"]);
-function A(t) {
-  return T.has(u(t));
-}
-const v = [":popover-open", ":modal"];
-function L(t) {
-  return v.some((e) => {
-    try {
-      return t.matches(e);
-    } catch {
-      return !1;
-    }
-  });
-}
-const D = ["transform", "translate", "scale", "rotate", "perspective"], C = ["transform", "translate", "scale", "rotate", "perspective", "filter"], k = ["paint", "layout", "strict", "content"];
-function V(t) {
-  const e = O(), n = m(t) ? S(t) : t;
-  return D.some((o) => n[o] ? n[o] !== "none" : !1) || (n.containerType ? n.containerType !== "normal" : !1) || !e && (n.backdropFilter ? n.backdropFilter !== "none" : !1) || !e && (n.filter ? n.filter !== "none" : !1) || C.some((o) => (n.willChange || "").includes(o)) || k.some((o) => (n.contain || "").includes(o));
-}
-function B(t) {
-  let e = s(t);
-  for (; w(e) && !h(e); ) {
-    if (V(e))
-      return e;
-    if (L(e))
-      return null;
-    e = s(e);
+import { defineComponent as K, useTemplateRef as $, computed as a, watch as v, ref as Q, createElementBlock as s, openBlock as i, withModifiers as U, normalizeStyle as b, normalizeClass as L, createElementVNode as p, renderSlot as r, createTextVNode as z, toDisplayString as f, unref as D, Fragment as W, renderList as X } from "vue";
+import { isNil as E } from "./index245.js";
+import { isNotNil as Z } from "./index146.js";
+import { useVirtualizer as w } from "./index362.js";
+import { hash as N } from "./index225.js";
+import { useLocale as ee } from "./index234.js";
+import { useListboxFocus as te } from "./index363.js";
+import { indexBy as oe } from "./index291.js";
+const le = { class: "bb-listbox__outer-container scrollbar-border" }, ne = {
+  ref: "inner",
+  class: "bb-listbox__inner-container",
+  tabindex: "-1"
+}, ae = {
+  key: 0,
+  class: "bb-listbox__loading"
+}, se = {
+  key: 1,
+  class: "bb-listbox__no-data"
+}, ie = ["aria-selected", "data-index"], ue = { class: "autocomplete-option__label" }, xe = /* @__PURE__ */ K({
+  __name: "FlatListBox",
+  props: {
+    compact: { type: Boolean },
+    options: {},
+    open: { type: Boolean },
+    loading: { type: Boolean },
+    multiple: { type: Boolean },
+    transitionDuration: { default: 250 },
+    loadingText: {},
+    noDataText: {},
+    optionHeight: {}
+  },
+  emits: ["option:selected", "option:unselected"],
+  setup(F, { expose: M, emit: R }) {
+    const n = F, x = R, { t: h } = ee(), u = $("inner"), V = $("listbox"), g = a(() => n.optionHeight ? n.optionHeight : n.compact ? 32 : 40), c = w({
+      get count() {
+        return n.options.length;
+      },
+      getScrollElement: () => u.value ?? null,
+      estimateSize: () => g.value,
+      overscan: 5
+    }), y = a(() => c.value.getVirtualItems()), C = a(() => c.value.getTotalSize());
+    console.log(y.value);
+    const _ = a(
+      () => n.options.map((e, l) => ({
+        index: l,
+        text: e.text,
+        value: e.value,
+        valueHash: e.valueHash,
+        item: e.item,
+        selected: !!e.selected,
+        disabled: !!e.disabled,
+        focused: l === d.value
+      }))
+    ), o = a(() => oe(_.value, "index")), m = a(() => _.value.length > 0), {
+      focusedIndex: d,
+      focusNext: I,
+      focusPrevious: O,
+      focusFirst: P,
+      focusLast: Y,
+      focusFirstSelected: j,
+      focusLastSelected: q,
+      focusByHash: A,
+      blur: H,
+      getHighlighted: G
+    } = te(() => n.options, { disabled: () => !n.open });
+    v(d, (e) => {
+      u.value && Z(e) && c.value.scrollToIndex(e, {
+        align: "center",
+        behavior: "smooth"
+      });
+    });
+    const k = () => {
+      if (E(d.value) || !n.open) return;
+      const e = o.value[d.value];
+      e.disabled || (e.selected ? x("option:unselected", e) : x("option:selected", e));
+    }, B = Q(0), T = () => {
+      u.value && (B.value = u.value.scrollHeight);
+    }, J = (e) => {
+      if (e.preventDefault(), u.value && e.target instanceof HTMLElement && V.value) {
+        let l = e.target, t = l.dataset.index;
+        for (; E(t) && l.parentElement; )
+          l = l.parentElement, t = l.dataset.index;
+        if (t) {
+          const S = o.value[+t];
+          S && !S.disabled && (d.value = +t, k());
+        }
+      }
+    };
+    return v(
+      () => n.open,
+      () => {
+        T();
+      },
+      { flush: "post" }
+    ), v(
+      () => n.options,
+      (e, l) => {
+        N(e.map((t) => t.valueHash)) !== N(l.map((t) => t.valueHash)) && (c.value.calculateRange(), T(), H());
+      },
+      { flush: "post" }
+    ), M({
+      focusNext: I,
+      focusPrevious: O,
+      focusFirst: P,
+      focusFirstSelected: j,
+      focusLast: Y,
+      focusLastSelected: q,
+      blur: H,
+      confirmOption: k,
+      focusByHash: A,
+      getHighlighted: G
+    }), (e, l) => (i(), s("span", {
+      class: L(["bb-listbox", {
+        "bb-listbox--compact": e.compact,
+        "bb-listbox--loading": e.loading,
+        "bb-listbox--multiple": e.multiple,
+        "bb-listbox--no-data": !m.value,
+        "bb-listbox--open": e.open
+      }]),
+      style: b({
+        "--transition-duration": `${e.transitionDuration}ms`,
+        "--overlay-min-height": `${B.value}px`,
+        "--option-height": `${g.value}px`
+      }),
+      onClick: U(J, ["stop"])
+    }, [
+      p("span", le, [
+        p("span", ne, [
+          r(e.$slots, "options:prepend"),
+          e.loading && !m.value ? (i(), s("span", ae, [
+            r(e.$slots, "loading", {}, () => [
+              z(f(e.loadingText || D(h)("common.loadingText").value), 1)
+            ])
+          ])) : m.value ? (i(), s("span", {
+            key: 2,
+            role: "listbox",
+            ref: "listbox",
+            style: b({
+              height: `${C.value}px`
+            }),
+            tabindex: "-1"
+          }, [
+            (i(!0), s(W, null, X(y.value, (t) => (i(), s("span", {
+              key: o.value[t.index].valueHash,
+              "aria-selected": o.value[t.index].focused ? !0 : void 0,
+              class: L({
+                "bb-listbox__option autocomplete-option": !0,
+                "autocomplete-option--focused": o.value[t.index].focused,
+                "autocomplete-option--selected": o.value[t.index].selected,
+                "autocomplete-option--disabled": o.value[t.index].disabled
+              }),
+              "data-index": t.index,
+              role: "option",
+              style: b({
+                transform: `translateY(${t.start}px)`
+              })
+            }, [
+              r(e.$slots, "option", {
+                disabled: o.value[t.index].disabled,
+                focused: o.value[t.index].focused,
+                index: t.index,
+                item: o.value[t.index].item,
+                selected: o.value[t.index].selected,
+                text: o.value[t.index].text,
+                value: o.value[t.index].value
+              }, () => [
+                l[0] || (l[0] = p("svg", {
+                  class: "autocomplete-option__checkbox",
+                  role: "presentation",
+                  viewBox: "276.411 158.834 114.971 114.97"
+                }, [
+                  p("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)),
+                p("span", ue, f(o.value[t.index].text), 1)
+              ])
+            ], 14, ie))), 128))
+          ], 4)) : (i(), s("span", se, [
+            r(e.$slots, "no-data", {}, () => [
+              z(f(e.noDataText || D(h)("common.noDataText").value), 1)
+            ])
+          ])),
+          r(e.$slots, "options:append")
+        ], 512)
+      ])
+    ], 6));
   }
-  return null;
-}
-function O() {
-  return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
-}
-const R = /* @__PURE__ */ new Set(["html", "body", "#document"]);
-function h(t) {
-  return R.has(u(t));
-}
-function S(t) {
-  return i(t).getComputedStyle(t);
-}
-function F(t) {
-  return m(t) ? {
-    scrollLeft: t.scrollLeft,
-    scrollTop: t.scrollTop
-  } : {
-    scrollLeft: t.scrollX,
-    scrollTop: t.scrollY
-  };
-}
-function s(t) {
-  if (u(t) === "html")
-    return t;
-  const e = (
-    // Step into the shadow DOM of the parent of a slotted node.
-    t.assignedSlot || // DOM Element detected.
-    t.parentNode || // ShadowRoot detected.
-    f(t) && t.host || // Fallback.
-    N(t)
-  );
-  return f(e) ? e.host : e;
-}
-function b(t) {
-  const e = s(t);
-  return h(e) ? t.ownerDocument ? t.ownerDocument.body : t.body : w(e) && y(e) ? e : b(e);
-}
-function d(t, e, n) {
-  var o;
-  e === void 0 && (e = []), n === void 0 && (n = !0);
-  const r = b(t), g = r === ((o = t.ownerDocument) == null ? void 0 : o.body), l = i(r);
-  if (g) {
-    const a = _(l);
-    return e.concat(l, l.visualViewport || [], y(r) ? r : [], a && n ? d(a) : []);
-  }
-  return e.concat(r, d(r, [], n));
-}
-function _(t) {
-  return t.parent && Object.getPrototypeOf(t.parent) ? t.frameElement : null;
-}
+});
 export {
-  S as getComputedStyle,
-  B as getContainingBlock,
-  N as getDocumentElement,
-  _ as getFrameElement,
-  b as getNearestOverflowAncestor,
-  u as getNodeName,
-  F as getNodeScroll,
-  d as getOverflowAncestors,
-  s as getParentNode,
-  i as getWindow,
-  V as isContainingBlock,
-  m as isElement,
-  w as isHTMLElement,
-  h as isLastTraversableNode,
-  p as isNode,
-  y as isOverflowElement,
-  f as isShadowRoot,
-  A as isTableElement,
-  L as isTopLayer,
-  O as isWebKit
+  xe as default
 };

package/dist/index355.js

@@ -1,49 +1,260 @@
-import { elementScroll as f, observeElementOffset as s, observeElementRect as d, Virtualizer as p } from "./index359.js";
-import { defaultKeyExtractor as S, defaultRangeExtractor as V, measureElement as b } from "./index359.js";
-import { computed as g, unref as l, shallowRef as E, watch as o, triggerRef as i, onScopeDispose as v } from "vue";
-function w(e) {
-  const t = new p(l(e)), a = E(t), u = t._didMount();
-  return o(
-    () => l(e).getScrollElement(),
-    (r) => {
-      r && t._willUpdate();
-    },
-    {
-      immediate: !0
-    }
-  ), o(
-    () => l(e),
-    (r) => {
-      t.setOptions({
-        ...r,
-        onChange: (c, m) => {
-          var n;
-          i(a), (n = r.onChange) == null || n.call(r, c, m);
+import { defineComponent as pe, useTemplateRef as q, computed as i, watch as L, ref as ve, createElementBlock as r, openBlock as c, withModifiers as be, normalizeStyle as O, normalizeClass as G, createElementVNode as v, renderSlot as h, createTextVNode as J, toDisplayString as x, unref as g, Fragment as P, renderList as Y } from "vue";
+import { isNil as f } from "./index245.js";
+import { useVirtualizer as he } from "./index362.js";
+import { useLocale as me } from "./index234.js";
+import { useListboxFocus as xe } from "./index363.js";
+import { indexBy as E } from "./index291.js";
+const ge = { class: "bb-listbox__outer-container scrollbar-border" }, fe = {
+  ref: "inner",
+  class: "bb-listbox__inner-container",
+  tabindex: "-1"
+}, He = {
+  key: 0,
+  class: "bb-listbox__loading"
+}, _e = {
+  key: 1,
+  class: "bb-listbox__no-data"
+}, ye = ["aria-activedescendant", "aria-multiselectable"], Ie = ["aria-labelledby", "aria-disabled"], $e = ["id"], ke = { class: "bb-listbox__group-header-label" }, Be = ["aria-selected", "aria-setsize", "aria-posinset", "id", "data-index"], Me = { class: "autocomplete-option__label" }, Ee = /* @__PURE__ */ pe({
+  __name: "GroupedListBox",
+  props: {
+    compact: { type: Boolean },
+    groups: {},
+    headerHeight: {},
+    loading: { type: Boolean },
+    loadingText: {},
+    multiple: { type: Boolean },
+    noDataText: {},
+    open: { type: Boolean },
+    optionHeight: {},
+    transitionDuration: { default: 250 }
+  },
+  emits: ["option:selected", "option:unselected"],
+  setup(K, { expose: Q, emit: U }) {
+    const s = K, V = U, { t: F } = me(), b = q("inner"), W = q("listbox"), H = i(() => s.optionHeight ? s.optionHeight : s.compact ? 32 : 40), _ = i(() => s.headerHeight ? s.headerHeight : s.compact ? 24 : 32), X = i(() => {
+      let e = 0;
+      return s.groups.map((a, t) => {
+        const l = a.id, p = e, d = a.options.length, k = _.value + d * H.value, B = `group-header-${a.id}`, M = typeof a.data == "string" ? a.data : JSON.stringify(a.data), S = a.options.every((z) => z.disabled), D = a.data, T = a.options;
+        return e += d, {
+          offset: p,
+          length: d,
+          height: k,
+          id: l,
+          headerId: B,
+          label: M,
+          index: t,
+          allOptionsAreDisabled: S,
+          data: D,
+          options: T
+        };
+      });
+    }), n = i(
+      () => E(X.value, "index")
+    ), m = i(() => s.groups.flatMap(
+      (e, a) => e.options.map((t, l) => {
+        const p = t.valueHash, d = n.value[a].offset + l, k = e.id, B = !!t.selected, M = !!t.disabled, S = t.item, D = t.text, T = t.value, z = d === u.value;
+        return {
+          id: p,
+          globalIndex: d,
+          groupIndex: a,
+          groupId: k,
+          indexInGroup: l,
+          selected: B,
+          disabled: M,
+          item: S,
+          text: D,
+          value: T,
+          valueHash: t.valueHash,
+          focused: z
+        };
+      })
+    )), o = i(() => E(m.value, "id")), y = i(
+      () => E(m.value, "globalIndex")
+    ), N = (e) => `listbox-option-${e}`, Z = i(() => {
+      if (f(u.value)) return;
+      const e = y.value[u.value];
+      if (e)
+        return N(e.valueHash);
+    }), I = i(() => m.value.length > 0), w = (e) => _.value + s.groups[e].options.length * H.value, $ = he({
+      get count() {
+        return s.groups.length;
+      },
+      getScrollElement: () => b.value ?? null,
+      estimateSize: (e) => w(e),
+      overscan: 2
+    }), ee = i(() => $.value.getVirtualItems()), te = i(() => $.value.getTotalSize()), {
+      focusedIndex: u,
+      focusNext: ae,
+      focusPrevious: le,
+      focusFirst: se,
+      focusLast: oe,
+      focusFirstSelected: ne,
+      focusLastSelected: ie,
+      focusByHash: ue,
+      blur: A,
+      getHighlighted: de
+    } = xe(
+      i(() => m.value),
+      { disabled: () => !s.open }
+    ), re = () => {
+      if (!b.value || f(u.value)) return;
+      const e = b.value.querySelector(
+        `[data-index="${u.value}"]`
+      );
+      e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    };
+    L(u, () => {
+      re();
+    });
+    const C = () => {
+      if (f(u.value) || !s.open) return;
+      const e = y.value[u.value];
+      if (!e || e.disabled) return;
+      const a = {
+        text: e.text,
+        value: e.value,
+        item: e.item,
+        valueHash: e.valueHash,
+        selected: e.selected,
+        disabled: e.disabled
+      };
+      e.selected ? V("option:unselected", a) : V("option:selected", a);
+    }, R = ve(0), j = () => {
+      b.value && (R.value = b.value.scrollHeight);
+    }, ce = (e) => {
+      if (e.preventDefault(), b.value && e.target instanceof HTMLElement && W.value) {
+        let a = e.target, t = a.dataset.index;
+        for (; f(t) && a.parentElement; )
+          a = a.parentElement, t = a.dataset.index;
+        if (t) {
+          const l = y.value[+t];
+          l && !l.disabled && (u.value = +t, C());
         }
-      }), t._willUpdate(), i(a);
-    },
-    {
-      immediate: !0
-    }
-  ), v(u), a;
-}
-function z(e) {
-  return w(
-    g(() => ({
-      observeElementRect: d,
-      observeElementOffset: s,
-      scrollToFn: f,
-      ...l(e)
-    }))
-  );
-}
+      }
+    };
+    return L(() => s.open, j, { flush: "post" }), L(
+      () => s.groups,
+      (e, a) => {
+        const t = e.flatMap((p) => p.options.map((d) => d.valueHash)).join(","), l = a.flatMap((p) => p.options.map((d) => d.valueHash)).join(",");
+        t !== l && ($.value.measure(), j(), A());
+      },
+      { flush: "post" }
+    ), Q({
+      focusNext: ae,
+      focusPrevious: le,
+      focusFirst: se,
+      focusFirstSelected: ne,
+      focusLast: oe,
+      focusLastSelected: ie,
+      blur: A,
+      confirmOption: C,
+      focusByHash: ue,
+      getHighlighted: de
+    }), (e, a) => (c(), r("span", {
+      class: G(["bb-listbox bb-listbox--grouped", {
+        "bb-listbox--compact": e.compact,
+        "bb-listbox--loading": e.loading,
+        "bb-listbox--multiple": e.multiple,
+        "bb-listbox--no-data": !I.value,
+        "bb-listbox--open": e.open
+      }]),
+      style: O({
+        "--transition-duration": `${e.transitionDuration}ms`,
+        "--overlay-min-height": `${R.value}px`,
+        "--option-height": `${H.value}px`,
+        "--group-header-height": `${_.value}px`
+      }),
+      onClick: be(ce, ["stop"])
+    }, [
+      v("span", ge, [
+        v("span", fe, [
+          h(e.$slots, "options:prepend"),
+          e.loading && !I.value ? (c(), r("span", He, [
+            h(e.$slots, "loading", {}, () => [
+              J(x(e.loadingText || g(F)("common.loadingText").value), 1)
+            ])
+          ])) : I.value ? (c(), r("span", {
+            key: 2,
+            role: "listbox",
+            ref: "listbox",
+            style: O({ height: `${te.value}px` }),
+            "aria-activedescendant": Z.value,
+            "aria-multiselectable": e.multiple ? !0 : void 0,
+            tabindex: "-1"
+          }, [
+            (c(!0), r(P, null, Y(ee.value, (t) => (c(), r("span", {
+              key: n.value[t.index].id,
+              style: O({ transform: `translateY(${t.start}px)` }),
+              role: "group",
+              "aria-labelledby": n.value[t.index].headerId,
+              "aria-disabled": n.value[t.index].allOptionsAreDisabled,
+              class: "bb-listbox__group"
+            }, [
+              v("span", {
+                class: "bb-listbox__group-header",
+                role: "presentation",
+                id: n.value[t.index].headerId
+              }, [
+                h(e.$slots, "group", {
+                  text: n.value[t.index].label,
+                  item: n.value[t.index].data,
+                  index: t.index,
+                  length: n.value[t.index].length,
+                  disabled: n.value[t.index].allOptionsAreDisabled
+                }, () => [
+                  v("span", ke, x(n.value[t.index].label), 1)
+                ])
+              ], 8, $e),
+              (c(!0), r(P, null, Y(n.value[t.index].options, (l) => (c(), r("span", {
+                key: l.valueHash,
+                "aria-selected": o.value[l.valueHash].selected ? !0 : void 0,
+                "aria-setsize": n.value[t.index].length,
+                "aria-posinset": o.value[l.valueHash].indexInGroup + 1,
+                id: N(l.valueHash),
+                class: G({
+                  "bb-listbox__option autocomplete-option": !0,
+                  "autocomplete-option--focused": g(u) === o.value[l.valueHash].globalIndex,
+                  "autocomplete-option--selected": o.value[l.valueHash].selected,
+                  "autocomplete-option--disabled": o.value[l.valueHash].disabled
+                }),
+                "data-index": o.value[l.valueHash].globalIndex,
+                role: "option"
+              }, [
+                h(e.$slots, "option", {
+                  disabled: !!o.value[l.valueHash].disabled,
+                  focused: g(u) === o.value[l.valueHash].globalIndex,
+                  index: o.value[l.valueHash].globalIndex,
+                  item: o.value[l.valueHash].item,
+                  selected: !!o.value[l.valueHash].selected,
+                  text: o.value[l.valueHash].text,
+                  value: o.value[l.valueHash].value
+                }, () => [
+                  a[0] || (a[0] = v("svg", {
+                    class: "autocomplete-option__checkbox",
+                    role: "presentation",
+                    viewBox: "276.411 158.834 114.971 114.97"
+                  }, [
+                    v("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)),
+                  v("span", Me, x(o.value[l.valueHash].text), 1)
+                ])
+              ], 10, Be))), 128))
+            ], 12, Ie))), 128))
+          ], 12, ye)) : (c(), r("span", _e, [
+            h(e.$slots, "no-data", {}, () => [
+              J(x(e.noDataText || g(F)("common.noDataText").value), 1)
+            ])
+          ])),
+          h(e.$slots, "options:append")
+        ], 512)
+      ])
+    ], 6));
+  }
+});
 export {
-  p as Virtualizer,
-  S as defaultKeyExtractor,
-  V as defaultRangeExtractor,
-  f as elementScroll,
-  b as measureElement,
-  s as observeElementOffset,
-  d as observeElementRect,
-  z as useVirtualizer
+  Ee as default
 };

package/dist/index356.js

@@ -1,4 +1,4 @@
-import { commonjsGlobal as y } from "./index331.js";
+import { commonjsGlobal as y } from "./index343.js";
 var p, _;
 function Z() {
   if (_) return p;