bitboss-ui 2.1.84 → 2.1.86

package/dist/index256.js

@@ -1,270 +1,102 @@
-import { defineComponent as pe, ref as T, computed as v, watch as be, createElementBlock as c, openBlock as u, withKeys as f, normalizeClass as O, withModifiers as m, createVNode as ge, withCtx as he, createElementVNode as E, Fragment as w, renderList as S, toDisplayString as x, renderSlot as C, nextTick as ye } from "vue";
-import { chunk as _e } from "./index338.js";
-import { identity as L } from "./index228.js";
-import { isNotNil as ke } from "./index144.js";
-import { last as ve } from "./index253.js";
-import { sort as N } from "./index339.js";
-import { validateDateFormat as R } from "./index254.js";
-import { toInnerValue as Oe, toOuterValue as p } from "./index340.js";
-import { isDateDisabled as we } from "./index341.js";
-import g from "./index222.js";
-import Se from "./index342.js";
-const Ve = ["onKeydown"], De = { class: "bb-base-date-picker__header-container" }, Me = ["abbr"], Be = ["id", "aria-current", "aria-label", "aria-selected", "disabled", "tabindex"], Pe = /* @__PURE__ */ pe({
-  __name: "BaseDatePickerInputDaySelector",
+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 "./index241.js";
+import { isNil as i } from "./index234.js";
+const z = ["text", "onClick:clear"], j = /* @__PURE__ */ F({
+  __name: "CommaBox",
   props: {
-    cursor: {},
-    current: { type: Boolean },
-    disabled: { type: Boolean },
-    firstDayOfWeek: {},
-    id: {},
-    floating: { type: Boolean },
-    modelValue: {},
-    max: {},
-    min: {},
-    selectable: { type: Function },
-    range: { type: Boolean },
-    multiple: { type: Boolean },
-    readonly: { type: Boolean }
+    options: {}
   },
-  emits: ["update:modelValue", "update:cursor"],
-  setup(F, { emit: K }) {
-    const a = F, n = K, h = T(null), H = g().startOf("day");
-    a.min && R(a.min, "Min"), a.max && R(a.max, "Max");
-    const P = v(() => {
-      let e = 1 / 0, r = -1 / 0, s = {};
-      return a.modelValue && [].concat(a.modelValue).filter(L).map((i) => Oe(i, a.floating)).map((i) => i.valueOf()).forEach((i, y) => {
-        i < e && (e = i), i > r && (r = i), s[i] = y;
-      }), {
-        min: e,
-        max: r,
-        index: (t) => s[t.valueOf()],
-        selected: (t) => ke(s[t.valueOf()]),
-        isFirstOfRange: (t) => t.valueOf() === e,
-        isLastOfRange: (t) => t.valueOf() === r,
-        isBetween: (t) => t.valueOf() > e && t.valueOf() < r
-      };
-    }), Y = v(() => new Array(7).fill("").map((e, r) => g().day((r + a.firstDayOfWeek) % 7)).map((e) => ({
-      accessibleLabel: e.format("dddd"),
-      label: e.format("dd").slice(0, 1).toUpperCase(),
-      id: e.toISOString(),
-      original: e
-    }))), V = v(() => {
-      const e = a.cursor.year().toString(), r = a.cursor.month().toString(), t = a.cursor.clone().startOf("month").clone().startOf("week"), y = a.cursor.clone().endOf("month").clone().endOf("week"), re = g(a.cursor).startOf("day"), b = P.value, _ = a.range, oe = a.id, B = [];
-      for (let o = t; o.isBefore(y); o = o.add(1, "day"))
-        B.push(o.clone());
-      const ne = B.map((o) => {
-        const k = o.toISOString(), se = o.week().toString(), ie = b.selected(o), A = _ && b.isFirstOfRange(o), I = _ && b.isLastOfRange(o), de = _ && !A && !I && b.isBetween(o), le = o.month().toString() === r && o.year().toString() === e, ce = o.isSame(H), ue = o.isSame(re), fe = d(o), me = o.get("D").toString();
-        return {
-          buttonId: [oe, k].filter(L).join("_"),
-          current: ue,
-          disabled: fe,
-          first: A,
-          highlighted: le,
-          id: k,
-          label: me,
-          last: I,
-          middle: de,
-          original: o,
-          selected: ie,
-          slotName: k,
-          today: ce,
-          week: se
-        };
-      });
-      return _e(ne, 7);
-    }), d = (e) => we(e, {
-      min: a.min,
-      max: a.max,
-      selectable: a.selectable,
-      floating: a.floating
-    }), D = T("left"), $ = (e, r) => {
-      e && r && (D.value = e.isBefore(r) ? "left" : "right");
-    };
-    be(
-      () => a.cursor,
-      (e, r) => {
-        $(e, r);
+  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"
       }
-    );
-    const M = (e) => n("update:cursor", e), l = async () => {
-      if (!h.value) return;
-      await ye();
-      const e = ve([
-        ...h.value.querySelectorAll(
-          ".bb-base-date-picker__date--current button"
-        )
-      ]);
-      e instanceof HTMLElement && e.focus();
-    }, U = (e) => {
-      if (!a.readonly && e.target instanceof HTMLButtonElement) {
-        const [, r] = e.target.id.split("_"), s = g(r);
-        if (a.cursor.month() !== s.month()) {
-          M(s);
-          return;
-        }
-        const t = V.value.flat().find((i) => i.id === r);
-        if (!t || t.disabled) return;
-        M(s), j(t);
-      }
-    }, j = (e) => {
-      a.range ? W(e) : a.multiple ? q(e) : z(e);
-    }, W = (e) => {
-      if (Array.isArray(a.modelValue))
-        if (a.modelValue.length !== 1) {
-          const r = [p(e.original, a.floating)];
-          n("update:modelValue", r);
-        } else {
-          const r = N([
-            a.modelValue[0],
-            p(e.original, a.floating)
-          ]);
-          n("update:modelValue", r);
-        }
-    }, q = (e) => {
-      if (Array.isArray(a.modelValue))
-        if (e.selected) {
-          const r = p(e.original, a.floating), s = a.modelValue.filter((t) => t !== r);
-          n("update:modelValue", s);
-        } else {
-          const r = N([
-            ...a.modelValue,
-            p(e.original, a.floating)
-          ]);
-          n("update:modelValue", r);
-        }
-    }, z = (e) => {
-      e.selected ? n("update:modelValue", null) : n("update:modelValue", p(e.original, a.floating));
-    }, G = () => {
-      const e = a.cursor.clone().add(1, "day");
-      d(e) || (n("update:cursor", e), l());
-    }, J = () => {
-      const e = a.cursor.clone().subtract(1, "day");
-      d(e) || (n("update:cursor", e), l());
-    }, Q = () => {
-      const e = a.cursor.clone().subtract(1, "week");
-      d(e) || (n("update:cursor", e), l());
-    }, X = () => {
-      const e = a.cursor.clone().add(1, "week");
-      d(e) || (n("update:cursor", e), l());
-    }, Z = () => {
-      const e = a.cursor.clone().endOf("week");
-      d(e) || (n("update:cursor", e), l());
-    }, ee = () => {
-      const e = a.cursor.clone().startOf("week");
-      d(e) || (n("update:cursor", e), l());
-    }, te = (e) => {
-      if (e.shiftKey) {
-        const r = a.cursor.clone().subtract(1, "year");
-        if (d(r)) return;
-        n("update:cursor", r);
-      } else {
-        const r = a.cursor.clone().subtract(1, "month");
-        if (d(r)) return;
-        n("update:cursor", r);
-      }
-      l();
-    }, ae = (e) => {
-      if (e.shiftKey) {
-        const r = a.cursor.clone().add(1, "year");
-        if (d(r)) return;
-        n("update:cursor", r);
-      } else {
-        const r = a.cursor.clone().add(1, "month");
-        if (d(r)) return;
-        n("update:cursor", r);
-      }
-      l();
-    };
-    return (e, r) => (u(), c("div", {
-      ref_key: "calendar",
-      ref: h,
-      "aria-label": "Calendar dates",
-      class: O(["bb-base-date-picker__days-selector", { "bb-base-date-picker__days-selector--hidden": !e.current }]),
-      role: "grid",
-      onKeydown: [
-        f(m(X, ["prevent"]), ["down"]),
-        f(m(Z, ["prevent"]), ["end"]),
-        f(m(ee, ["prevent"]), ["home"]),
-        f(m(J, ["prevent"]), ["left"]),
-        f(m(ae, ["prevent"]), ["page-down"]),
-        f(m(te, ["prevent"]), ["page-up"]),
-        f(m(G, ["prevent"]), ["right"]),
-        f(m(Q, ["prevent"]), ["up"])
-      ]
-    }, [
-      ge(Se, {
-        direction: D.value,
-        gap: 30
-      }, {
-        default: he(() => [
-          (u(), c("div", {
-            key: e.cursor.month().toString(),
-            class: "bb-base-date-picker__month"
-          }, [
-            E("div", De, [
-              (u(!0), c(w, null, S(Y.value, (s) => (u(), c("div", {
-                key: s.id,
-                abbr: s.accessibleLabel,
-                class: "bb-base-date-picker__header-cell"
-              }, x(s.label), 9, Me))), 128))
-            ]),
-            (u(!0), c(w, null, S(V.value, (s) => (u(), c("div", {
-              key: s[0].id,
-              class: "bb-base-date-picker__week"
-            }, [
-              (u(!0), c(w, null, S(s, (t) => (u(), c("div", {
-                key: t.id,
-                class: O({
-                  "bb-base-date-picker__date--current": t.current,
-                  "bb-base-date-picker__date--disabled": e.disabled || t.disabled,
-                  "bb-base-date-picker__date--first": t.first,
-                  "bb-base-date-picker__date--highlighted": t.highlighted,
-                  "bb-base-date-picker__date--last": t.last,
-                  "bb-base-date-picker__date--middle": t.middle,
-                  "bb-base-date-picker__date--selected": t.selected,
-                  "bb-base-date-picker__date--today": t.today,
-                  "bb-base-date-picker__date": !0
-                })
-              }, [
-                E("button", {
-                  id: t.buttonId,
-                  "aria-current": t.today ? "date" : void 0,
-                  "aria-label": `${t.original.format("dddd, MMMM D, YYYY")}${t.selected ? ", selected" : ""}`,
-                  "aria-selected": t.selected,
-                  class: O("bb-base-date-picker__date-button"),
-                  disabled: e.disabled || t.disabled,
-                  tabindex: Number(t.current) - 1,
-                  type: "button",
-                  role: "gridcell",
-                  onClick: U
-                }, x(t.label), 9, Be),
-                C(e.$slots, "day", {
-                  first: t.first,
-                  highlighted: t.highlighted,
-                  item: t.original,
-                  label: t.label,
-                  last: t.last,
-                  middle: t.middle,
-                  selected: t.selected
-                }),
-                C(e.$slots, t.slotName, {
-                  first: t.first,
-                  highlighted: t.highlighted,
-                  item: t.original,
-                  label: t.label,
-                  last: t.last,
-                  middle: t.middle,
-                  selected: t.selected
-                })
-              ], 2))), 128))
-            ]))), 128))
-          ]))
-        ]),
-        _: 3
-      }, 8, ["direction"])
-    ], 42, Ve));
+    ), 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 {
-  Pe as default
+  j as default
 };

package/dist/index258.js

@@ -1,54 +1,229 @@
-import { defineComponent as b, computed as c, createElementBlock as l, openBlock as a, createElementVNode as h, Fragment as p, renderList as k, createBlock as f, normalizeClass as y, withCtx as M, createTextVNode as x, toDisplayString as B } from "vue";
-import C from "./index13.js";
-/* empty css        */
-const v = {
-  "aria-label": "Month selector",
-  class: "bb-base-date-picker__button-menu bb-base-date-picker__month-selector",
-  role: "listbox"
-}, g = { class: "content" }, N = /* @__PURE__ */ b({
-  __name: "BaseDatePickerMonthSelector",
+import { defineComponent as X, useTemplateRef as w, computed as x, ref as E, watch as $, createElementBlock as r, openBlock as d, withModifiers as Z, normalizeStyle as f, normalizeClass as z, createElementVNode as c, renderSlot as v, createTextVNode as D, toDisplayString as h, unref as H, Fragment as ee, renderList as te } from "vue";
+import { isNil as m } from "./index234.js";
+import { useVirtualizer as oe } from "./index344.js";
+import { isNotNil as ne } from "./index144.js";
+import { hash as L } from "./index241.js";
+import { useLocale as le } from "./index220.js";
+const ie = { class: "bb-listbox__outer-container scrollbar-border" }, se = {
+  ref: "inner",
+  class: "bb-listbox__inner-container",
+  tabindex: "-1"
+}, ae = {
+  key: 0,
+  class: "bb-listbox__loading"
+}, ue = {
+  key: 1,
+  class: "bb-listbox__no-data"
+}, re = ["aria-selected", "data-index"], de = { class: "autocomplete-option__label" }, fe = /* @__PURE__ */ X({
+  __name: "ListBox",
   props: {
-    cursor: {},
-    disabled: { type: Boolean }
+    compact: { type: Boolean },
+    options: {},
+    open: { type: Boolean },
+    loading: { type: Boolean },
+    multiple: { type: Boolean },
+    transitionDuration: { default: 250 },
+    loadingText: {},
+    noDataText: {}
   },
-  emits: ["update:month"],
-  setup(d, { emit: i }) {
-    const o = d, m = i, u = c(() => o.cursor.month()), _ = c(() => {
-      const t = o.cursor.clone().startOf("year"), n = u.value;
-      return Array.from({ length: 12 }, (e, r) => {
-        const s = t.add(r, "month");
-        return {
-          text: s.format("MMMM"),
-          key: s.unix(),
-          selected: r === n,
-          handler: () => m("update:month", r)
-        };
+  emits: ["option:selected", "option:unselected"],
+  setup(N, { expose: V, emit: R }) {
+    const o = N, g = R, { t: _ } = le(), u = w("inner"), F = w("listbox"), O = (e) => "option_" + JSON.stringify(e).replace(/\W/g, "_"), i = x(
+      () => o.options.map((e) => ({ ...e, id: O(e.value) }))
+    ), p = oe({
+      get count() {
+        return o.options.length;
+      },
+      getScrollElement: () => u.value ? u.value : null,
+      estimateSize: () => o.compact ? 32 : 40,
+      overscan: 5,
+      measureElement: () => o.compact ? 32 : 40,
+      useAnimationFrameWithResizeObserver: !0
+    }), C = (e) => {
+      e && p.value.measureElement(e);
+    }, A = x(() => p.value.getVirtualItems()), M = x(() => p.value.getTotalSize()), n = E(null), s = x(
+      () => o.open && o.options.some((e) => !e.disabled)
+    ), y = (e = 1) => {
+      const l = m(n.value) ? -1 : n.value;
+      let t = (l + e) % o.options.length;
+      for (; o.options[t].disabled && t !== l; )
+        t = y(e + 1);
+      return t;
+    }, P = () => {
+      if (!s.value) return;
+      const e = y();
+      n.value = e, a();
+    }, I = (e = 1) => {
+      const l = m(n.value) ? 0 : n.value;
+      let t = (l - e + o.options.length) % o.options.length;
+      for (; o.options[t].disabled && t !== l; )
+        t = I(e + 1);
+      return t;
+    }, W = async () => {
+      if (!s.value) return;
+      const e = I();
+      n.value = e, a();
+    }, J = () => {
+      if (!s.value) return;
+      let e = 0;
+      for (; o.options[e].disabled; )
+        e++;
+      n.value = e, a();
+    }, Y = () => {
+      if (!s.value) return;
+      let e = o.options.length - 1;
+      for (; o.options[e].disabled && e !== 0; )
+        e--;
+      n.value = e, a();
+    }, j = () => {
+      if (!s.value) return;
+      let e = 0;
+      for (; o.options[e] && !o.options[e].selected && o.options.length !== e; )
+        e++;
+      n.value = e % o.options.length, a();
+    }, q = () => {
+      if (!s.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, a();
+    }, G = (e) => {
+      if (!s.value) return;
+      const l = o.options.findIndex(
+        (t) => t.valueHash === e
+      );
+      l >= 0 && (n.value = l), a();
+    }, S = () => {
+      n.value = null;
+    }, a = () => {
+      u.value && ne(n.value) && p.value.scrollToIndex(n.value, {
+        align: "center",
+        behavior: "smooth"
       });
-    });
-    return (t, n) => (a(), l("div", v, [
-      h("div", g, [
-        (a(!0), l(p, null, k(_.value, (e) => (a(), f(C, {
-          key: e.key,
-          "aria-label": e.text,
-          "aria-selected": e.selected,
-          class: y({
-            content__btn: !0,
-            "content__btn--selected": e.selected
-          }),
-          disabled: t.disabled,
-          role: "option",
-          type: "button",
-          onClick: e.handler
-        }, {
-          default: M(() => [
-            x(B(e.text), 1)
-          ]),
-          _: 2
-        }, 1032, ["aria-label", "aria-selected", "class", "disabled", "onClick"]))), 128))
+    }, k = () => {
+      if (m(n.value) || !o.open) return;
+      const e = o.options[n.value];
+      e.selected ? g("option:unselected", e) : g("option:selected", e);
+    }, T = E(0), B = () => {
+      u.value && (T.value = u.value.scrollHeight);
+    }, K = (e) => !e.disabled, Q = (e) => {
+      if (e.preventDefault(), u.value && e.target && e.target instanceof HTMLElement && F.value) {
+        let l = e.target, t = l.dataset.index;
+        for (; m(t) && l.parentElement; )
+          l = l.parentElement, t = l.dataset.index;
+        if (t) {
+          const b = o.options[+t];
+          b && K(b) && (n.value = +t, k());
+        }
+      }
+    }, U = () => m(n.value) ? void 0 : o.options[n.value];
+    return $(
+      () => o.open,
+      () => {
+        B();
+      },
+      { flush: "post" }
+    ), $(
+      () => o.options,
+      (e, l) => {
+        L(e.map((t) => t.valueHash)) !== L(l.map((t) => t.valueHash)) && (p.value.calculateRange(), B(), S());
+      },
+      {
+        flush: "post"
+      }
+    ), V({
+      focusNext: P,
+      focusPrevious: W,
+      focusFirst: J,
+      focusFirstSelected: j,
+      focusLast: Y,
+      focusLastSelected: q,
+      blur: S,
+      confirmOption: k,
+      focusByHash: G,
+      getHighlighted: U
+    }), (e, l) => (d(), r("span", {
+      class: z(["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: f({
+        "--transition-duration": `${e.transitionDuration}ms`,
+        "--overlay-min-height": `${T.value}px`
+      }),
+      onClick: Z(Q, ["stop"])
+    }, [
+      c("span", ie, [
+        c("span", se, [
+          v(e.$slots, "options:prepend"),
+          e.loading && !e.options.length ? (d(), r("span", ae, [
+            v(e.$slots, "loading", {}, () => [
+              D(h(e.loadingText || H(_)("common.loadingText").value), 1)
+            ])
+          ])) : e.options.length ? (d(), r("span", {
+            key: 2,
+            role: "listbox",
+            ref: "listbox",
+            style: f({
+              height: `${M.value}px`
+            }),
+            tabindex: "-1"
+          }, [
+            (d(!0), r(ee, null, te(A.value, (t, b) => (d(), r("span", {
+              key: i.value[t.index].value,
+              ref_for: !0,
+              ref: C,
+              "aria-selected": n.value === b ? !0 : void 0,
+              class: z({
+                "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: f({
+                transform: `translateY(${t.start}px)`
+              })
+            }, [
+              v(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", de, h(i.value[t.index].text), 1)
+              ])
+            ], 14, re))), 128))
+          ], 4)) : (d(), r("span", ue, [
+            v(e.$slots, "no-data", {}, () => [
+              D(h(e.noDataText || H(_)("common.noDataText").value), 1)
+            ])
+          ])),
+          v(e.$slots, "options:append")
+        ], 512)
       ])
-    ]));
+    ], 6));
   }
 });
 export {
-  N as default
+  fe as default
 };