bitboss-ui 2.1.112 → 2.1.113

package/dist/index347.js

@@ -1,69 +1,202 @@
-const e = {
-  common: {
-    closeLabel: "Chiudi",
-    loadingText: "Caricamento...",
-    noDataText: "Nessun elemento da visualizzare",
-    clearLabel: "Reset valore selezionato"
+import { defineComponent as U, useTemplateRef as L, computed as n, watch as f, ref as W, createElementBlock as s, openBlock as u, withModifiers as X, normalizeStyle as x, normalizeClass as z, createElementVNode as c, renderSlot as r, createTextVNode as I, toDisplayString as h, unref as E, Fragment as Z, renderList as w } from "vue";
+import { isNil as g } from "./index231.js";
+import { isNotNil as ee } from "./index150.js";
+import { useVirtualizer as te } from "./index366.js";
+import { hash as N } from "./index238.js";
+import { useLocale as oe } from "./index233.js";
+import { useListboxFocus as ae } from "./index367.js";
+import { indexBy as ie } from "./index295.js";
+const le = { class: "bb-listbox__outer-container scrollbar-border" }, ne = {
+  ref: "inner",
+  class: "bb-listbox__inner-container",
+  tabindex: "-1"
+}, se = {
+  key: 0,
+  class: "bb-listbox__loading"
+}, ue = {
+  key: 1,
+  class: "bb-listbox__no-data"
+}, de = ["aria-activedescendant", "aria-multiselectable"], ce = ["aria-selected", "data-index", "id"], re = { class: "autocomplete-option__label" }, _e = /* @__PURE__ */ U({
+  __name: "FlatListBox",
+  props: {
+    compact: { type: Boolean },
+    options: {},
+    open: { type: Boolean },
+    loading: { type: Boolean },
+    multiple: { type: Boolean },
+    transitionDuration: { default: 250 },
+    loadingText: {},
+    noDataText: {},
+    optionHeight: {}
   },
-  colorInput: {
-    dialogLabel: "Selettore colore",
-    openPicker: "Apri il selettore colore",
-    openPickerSelected: "Apri il selettore colore, colore corrente: {0}",
-    paletteLabel: "Seleziona un colore dalla tavolozza",
-    mainCanvasDesc: "Usa le frecce per selezionare un colore",
-    mainCanvasSelectedColor: "Colore selezionato: {0}",
-    hueCanvasDesc: "Usa le frecce per selezionare una tonalità",
-    hueCanvasSelectedHue: "Tonalità selezionata: {0}",
-    alphaSliderDesc: "Usa le frecce per regolare l'opacità",
-    eyeDropper: "Seleziona colore dallo schermo"
-  },
-  datePicker: {
-    monthLabel: "Seleziona un mese",
-    yearLabel: "Seleziona un anno",
-    previousMonthLabel: "Vai indietro di un mese",
-    nextMonthLabel: "Vai avanti di un mese"
-  },
-  baseDatePickerInput: {
-    dateFormat: "Formato della data",
-    dateFormatSingle: "GG/MM/AAAA",
-    dateFormatRange: "GG/MM/AAAA - GG/MM/AAAA",
-    emptyRange: "Seleziona un range",
-    changeSelectionRange: "Cambia selezione, da {0} a {1}",
-    changeSelection: "Cambia selezione, {0}",
-    emptySelection: "Seleziona una data"
-  },
-  dialog: {
-    closeLabel: "Chiudi modale"
-  },
-  dropdownButton: {
-    open: "Apri menu",
-    close: "Chiudi menu"
-  },
-  rating: {
-    singleStar: "{0} su {1}",
-    multipleStars: "{0} su {1}"
-  },
-  select: {
-    multipleMaxReached: "{0} elementi selezionati"
-  },
-  chip: {
-    clearLabel: "Elimina"
-  },
-  breadcrumbs: {
-    label: "Breadcrumb",
-    openHiddenLabelCount: "Mostra {0} breadcrumb nascoste"
-  },
-  pagination: {
-    previous: "Precedente",
-    next: "Successivo"
-  },
-  table: {
-    noDataText: "Non ci sono elementi da visualizzare",
-    selectAllLabel: "Seleziona tutti gli elementi di questa pagina",
-    selectText: "Seleziona un elemento",
-    select: "Seleziona"
+  emits: ["option:selected", "option:unselected", "focused:change"],
+  setup(F, { expose: M, emit: R }) {
+    const i = F, v = R, { t: _ } = oe(), d = L("inner"), V = L("listbox"), y = n(() => i.optionHeight ? i.optionHeight : i.compact ? 32 : 40), p = te({
+      get count() {
+        return i.options.length;
+      },
+      getScrollElement: () => d.value ?? null,
+      estimateSize: () => y.value,
+      overscan: 5
+    }), C = n(() => p.value.getVirtualItems()), O = n(() => p.value.getTotalSize()), H = n(
+      () => i.options.map((e, a) => ({
+        index: a,
+        text: e.text,
+        value: e.value,
+        valueHash: e.valueHash,
+        item: e.item,
+        selected: !!e.selected,
+        disabled: !!e.disabled,
+        focused: a === l.value
+      }))
+    ), o = n(() => ie(H.value, "index")), k = (e) => `listbox-option-${e}`, m = n(() => {
+      if (g(l.value)) return;
+      const e = o.value[l.value];
+      if (e)
+        return k(e.valueHash);
+    }), b = n(() => H.value.length > 0), {
+      focusedIndex: l,
+      focusNext: A,
+      focusPrevious: P,
+      focusFirst: Y,
+      focusLast: j,
+      focusFirstSelected: q,
+      focusLastSelected: G,
+      focusByHash: J,
+      blur: B,
+      getHighlighted: K
+    } = ae(() => i.options, { disabled: () => !i.open });
+    f(l, (e) => {
+      d.value && ee(e) && p.value.scrollToIndex(e, {
+        align: "center",
+        behavior: "smooth"
+      }), v("focused:change", m.value);
+    });
+    const T = () => {
+      if (g(l.value) || !i.open) return;
+      const e = o.value[l.value];
+      e.disabled || (e.selected ? v("option:unselected", e) : v("option:selected", e));
+    }, $ = W(0), S = () => {
+      d.value && ($.value = d.value.scrollHeight);
+    }, Q = (e) => {
+      if (e.preventDefault(), d.value && e.target instanceof HTMLElement && V.value) {
+        let a = e.target, t = a.dataset.index;
+        for (; g(t) && a.parentElement; )
+          a = a.parentElement, t = a.dataset.index;
+        if (t) {
+          const D = o.value[+t];
+          D && !D.disabled && (l.value = +t, T());
+        }
+      }
+    };
+    return f(
+      () => i.open,
+      () => {
+        S();
+      },
+      { flush: "post" }
+    ), f(
+      () => i.options,
+      (e, a) => {
+        N(e.map((t) => t.valueHash)) !== N(a.map((t) => t.valueHash)) && (p.value.calculateRange(), S(), B());
+      },
+      { flush: "post" }
+    ), M({
+      focusNext: A,
+      focusPrevious: P,
+      focusFirst: Y,
+      focusFirstSelected: q,
+      focusLast: j,
+      focusLastSelected: G,
+      blur: B,
+      confirmOption: T,
+      focusByHash: J,
+      getHighlighted: K,
+      getActiveDescendantId: () => m.value
+    }), (e, a) => (u(), s("span", {
+      class: z(["bb-listbox", {
+        "bb-listbox--compact": e.compact,
+        "bb-listbox--loading": e.loading,
+        "bb-listbox--multiple": e.multiple,
+        "bb-listbox--no-data": !b.value,
+        "bb-listbox--open": e.open
+      }]),
+      style: x({
+        "--transition-duration": `${e.transitionDuration}ms`,
+        "--overlay-min-height": `${$.value}px`,
+        "--option-height": `${y.value}px`
+      }),
+      onClick: X(Q, ["stop"])
+    }, [
+      c("span", le, [
+        c("span", ne, [
+          r(e.$slots, "options:prepend"),
+          e.loading && !b.value ? (u(), s("span", se, [
+            r(e.$slots, "loading", {}, () => [
+              I(h(e.loadingText || E(_)("common.loadingText").value), 1)
+            ])
+          ])) : b.value ? (u(), s("span", {
+            key: 2,
+            role: "listbox",
+            ref: "listbox",
+            style: x({
+              height: `${O.value}px`
+            }),
+            "aria-activedescendant": m.value,
+            "aria-multiselectable": e.multiple ? !0 : void 0,
+            tabindex: "-1"
+          }, [
+            (u(!0), s(Z, null, w(C.value, (t) => (u(), s("span", {
+              key: o.value[t.index].valueHash,
+              "aria-selected": o.value[t.index].focused ? !0 : void 0,
+              class: z({
+                "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,
+              id: k(o.value[t.index].valueHash),
+              role: "option",
+              style: x({
+                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
+              }, () => [
+                a[0] || (a[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, h(o.value[t.index].text), 1)
+              ])
+            ], 14, ce))), 128))
+          ], 12, de)) : (u(), s("span", ue, [
+            r(e.$slots, "no-data", {}, () => [
+              I(h(e.noDataText || E(_)("common.noDataText").value), 1)
+            ])
+          ])),
+          r(e.$slots, "options:append")
+        ], 512)
+      ])
+    ], 6));
   }
-};
+});
 export {
-  e as default
+  _e as default
 };

package/dist/index348.js

@@ -1,69 +1,261 @@
-const e = {
-  common: {
-    closeLabel: "Close",
-    loadingText: "Loading...",
-    noDataText: "No data to display",
-    clearLabel: "Reset selected value"
+import { defineComponent as pe, useTemplateRef as G, computed as i, watch as E, ref as ve, createElementBlock as r, openBlock as c, withModifiers as he, normalizeStyle as V, normalizeClass as J, createElementVNode as v, renderSlot as b, createTextVNode as P, toDisplayString as x, unref as g, Fragment as Y, renderList as K } from "vue";
+import { isNil as f } from "./index231.js";
+import { useVirtualizer as be } from "./index366.js";
+import { useLocale as me } from "./index233.js";
+import { useListboxFocus as xe } from "./index367.js";
+import { indexBy as A } from "./index295.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"], De = { 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 }
   },
-  colorInput: {
-    dialogLabel: "Color picker",
-    openPicker: "Open color picker",
-    openPickerSelected: "Open color picker, current color: {0}",
-    paletteLabel: "Select a color from the palette",
-    mainCanvasDesc: "Use the arrows to select a color",
-    mainCanvasSelectedColor: "Selected color: {0}",
-    hueCanvasDesc: "Use the arrows to select a hue",
-    hueCanvasSelectedHue: "Selected hue: {0}",
-    alphaSliderDesc: "Use the arrows to adjust opacity",
-    eyeDropper: "Pick color from screen"
-  },
-  datePicker: {
-    monthLabel: "Select a month",
-    yearLabel: "Select a year",
-    previousMonthLabel: "Go to previous month",
-    nextMonthLabel: "Go to next month"
-  },
-  baseDatePickerInput: {
-    dateFormat: "Date format",
-    dateFormatSingle: "DD/MM/YYYY",
-    dateFormatRange: "DD/MM/YYYY - DD/MM/YYYY",
-    emptyRange: "Select a range",
-    changeSelectionRange: "Change selection, from {0} to {1}",
-    changeSelection: "Change selection, {0}",
-    emptySelection: "Select a date"
-  },
-  dialog: {
-    closeLabel: "Close dialog"
-  },
-  dropdownButton: {
-    open: "Open menu",
-    close: "Close menu"
-  },
-  rating: {
-    singleStar: "{0} out of {1}",
-    multipleStars: "{0} out of {1}"
-  },
-  select: {
-    multipleMaxReached: "{0} items selected"
-  },
-  chip: {
-    clearLabel: "Remove"
-  },
-  breadcrumbs: {
-    label: "Breadcrumbs",
-    openHiddenLabelCount: "Show {0} hidden breadcrumbs"
-  },
-  pagination: {
-    previous: "Previous",
-    next: "Next"
-  },
-  table: {
-    noDataText: "No data to display",
-    selectAllLabel: "Select all items on this page",
-    selectText: "Select an item",
-    select: "Select"
+  emits: ["option:selected", "option:unselected", "focused:change"],
+  setup(Q, { expose: U, emit: W }) {
+    const s = Q, H = W, { t: F } = me(), h = G("inner"), X = G("listbox"), _ = i(() => s.optionHeight ? s.optionHeight : s.compact ? 32 : 40), y = i(() => s.headerHeight ? s.headerHeight : s.compact ? 24 : 32), Z = i(() => {
+      let e = 0;
+      return s.groups.map((a, t) => {
+        const l = a.id, p = e, d = a.options.length, D = y.value + d * _.value, M = `group-header-${a.id}`, S = typeof a.data == "string" ? a.data : JSON.stringify(a.data), T = a.options.every((O) => O.disabled), z = a.data, L = a.options;
+        return e += d, {
+          offset: p,
+          length: d,
+          height: D,
+          id: l,
+          headerId: M,
+          label: S,
+          index: t,
+          allOptionsAreDisabled: T,
+          data: z,
+          options: L
+        };
+      });
+    }), n = i(
+      () => A(Z.value, "index")
+    ), m = i(() => s.groups.flatMap(
+      (e, a) => e.options.map((t, l) => {
+        const p = t.valueHash, d = n.value[a].offset + l, D = e.id, M = !!t.selected, S = !!t.disabled, T = t.item, z = t.text, L = t.value, O = d === u.value;
+        return {
+          id: p,
+          globalIndex: d,
+          groupIndex: a,
+          groupId: D,
+          indexInGroup: l,
+          selected: M,
+          disabled: S,
+          item: T,
+          text: z,
+          value: L,
+          valueHash: t.valueHash,
+          focused: O
+        };
+      })
+    )), o = i(() => A(m.value, "id")), I = i(
+      () => A(m.value, "globalIndex")
+    ), N = (e) => `listbox-option-${e}`, $ = i(() => {
+      if (f(u.value)) return;
+      const e = I.value[u.value];
+      if (e)
+        return N(e.valueHash);
+    }), k = i(() => m.value.length > 0), w = (e) => y.value + s.groups[e].options.length * _.value, B = be({
+      get count() {
+        return s.groups.length;
+      },
+      getScrollElement: () => h.value ?? null,
+      estimateSize: (e) => w(e),
+      overscan: 2
+    }), ee = i(() => B.value.getVirtualItems()), te = i(() => B.value.getTotalSize()), {
+      focusedIndex: u,
+      focusNext: ae,
+      focusPrevious: le,
+      focusFirst: se,
+      focusLast: oe,
+      focusFirstSelected: ne,
+      focusLastSelected: ie,
+      focusByHash: ue,
+      blur: C,
+      getHighlighted: de
+    } = xe(
+      i(() => m.value),
+      { disabled: () => !s.open }
+    ), re = () => {
+      if (!h.value || f(u.value)) return;
+      const e = h.value.querySelector(
+        `[data-index="${u.value}"]`
+      );
+      e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    };
+    E(u, () => {
+      re(), H("focused:change", $.value);
+    });
+    const R = () => {
+      if (f(u.value) || !s.open) return;
+      const e = I.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 ? H("option:unselected", a) : H("option:selected", a);
+    }, j = ve(0), q = () => {
+      h.value && (j.value = h.value.scrollHeight);
+    }, ce = (e) => {
+      if (e.preventDefault(), h.value && e.target instanceof HTMLElement && X.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 = I.value[+t];
+          l && !l.disabled && (u.value = +t, R());
+        }
+      }
+    };
+    return E(() => s.open, q, { flush: "post" }), E(
+      () => 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 && (B.value.measure(), q(), C());
+      },
+      { flush: "post" }
+    ), U({
+      focusNext: ae,
+      focusPrevious: le,
+      focusFirst: se,
+      focusFirstSelected: ne,
+      focusLast: oe,
+      focusLastSelected: ie,
+      blur: C,
+      confirmOption: R,
+      focusByHash: ue,
+      getHighlighted: de,
+      getActiveDescendantId: () => $.value
+    }), (e, a) => (c(), r("span", {
+      class: J(["bb-listbox bb-listbox--grouped", {
+        "bb-listbox--compact": e.compact,
+        "bb-listbox--loading": e.loading,
+        "bb-listbox--multiple": e.multiple,
+        "bb-listbox--no-data": !k.value,
+        "bb-listbox--open": e.open
+      }]),
+      style: V({
+        "--transition-duration": `${e.transitionDuration}ms`,
+        "--overlay-min-height": `${j.value}px`,
+        "--option-height": `${_.value}px`,
+        "--group-header-height": `${y.value}px`
+      }),
+      onClick: he(ce, ["stop"])
+    }, [
+      v("span", ge, [
+        v("span", fe, [
+          b(e.$slots, "options:prepend"),
+          e.loading && !k.value ? (c(), r("span", He, [
+            b(e.$slots, "loading", {}, () => [
+              P(x(e.loadingText || g(F)("common.loadingText").value), 1)
+            ])
+          ])) : k.value ? (c(), r("span", {
+            key: 2,
+            role: "listbox",
+            ref: "listbox",
+            style: V({ height: `${te.value}px` }),
+            "aria-activedescendant": $.value,
+            "aria-multiselectable": e.multiple ? !0 : void 0,
+            tabindex: "-1"
+          }, [
+            (c(!0), r(Y, null, K(ee.value, (t) => (c(), r("span", {
+              key: n.value[t.index].id,
+              style: V({ 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
+              }, [
+                b(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(Y, null, K(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: J({
+                  "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"
+              }, [
+                b(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", De, x(o.value[l.valueHash].text), 1)
+                ])
+              ], 10, Be))), 128))
+            ], 12, Ie))), 128))
+          ], 12, ye)) : (c(), r("span", _e, [
+            b(e.$slots, "no-data", {}, () => [
+              P(x(e.noDataText || g(F)("common.noDataText").value), 1)
+            ])
+          ])),
+          b(e.$slots, "options:append")
+        ], 512)
+      ])
+    ], 6));
   }
-};
+});
 export {
-  e as default
+  Ee as default
 };

package/dist/index349.js

@@ -1,4 +1,4 @@
-import { commonjsGlobal as r } from "./index341.js";
+import { commonjsGlobal as r } from "./index342.js";
 var o, c;
 function C() {
   if (c) return o;