bitboss-ui 2.0.38 → 2.0.40

package/dist/index84.js

@@ -1,187 +1,238 @@
-import { defineComponent as F, defineAsyncComponent as S, ref as n, computed as w, openBlock as v, createElementBlock as H, mergeProps as q, createElementVNode as c, renderSlot as k, normalizeProps as A, guardReactiveProps as I, createBlock as y, unref as V, withCtx as _, createCommentVNode as C, nextTick as W } from "vue";
-import { useFocusTrap as z } from "./index201.js";
-import { useId as R } from "./index8.js";
-import { useIntersectionObserver as j } from "./index128.js";
-import { waitFor as G } from "./index202.js";
-import J from "./index13.js";
-/* empty css        */
-const K = /* @__PURE__ */ c("span", { class: "bb-popover__close-label sr-only" }, "Chiudi", -1), Q = /* @__PURE__ */ c("svg", {
-  fill: "none",
-  viewBox: "0 0 24 24",
-  xmlns: "http://www.w3.org/2000/svg"
-}, [
-  /* @__PURE__ */ c("path", {
-    d: "M23 23L1 1M23 1L1 23",
-    stroke: "currentColor",
-    "stroke-linecap": "round",
-    "stroke-width": "2"
-  })
-], -1), oe = /* @__PURE__ */ F({
-  __name: "BbPopover",
+import { defineComponent as te, ref as s, useAttrs as oe, getCurrentInstance as se, computed as v, nextTick as le, onBeforeUnmount as x, onMounted as ae, watch as ne, openBlock as g, createBlock as ie, Teleport as re, createElementVNode as l, mergeProps as O, createElementBlock as V, renderSlot as n, createTextVNode as ue, toDisplayString as S, createCommentVNode as z } from "vue";
+import { useFocusTrap as ce } from "./index215.js";
+import { useId as A } from "./index8.js";
+import { wait as E } from "./index131.js";
+import { useModalsState as p } from "./index217.js";
+const de = ["inert"], fe = { class: "bb-offcanvas-close" }, ve = ["aria-label"], ge = /* @__PURE__ */ te({
+  __name: "BbOffCanvas",
   props: {
-    arrowPadding: { default: 10 },
-    block: { type: Boolean },
+    closeLabel: { default: "Chiudi" },
+    compact: { type: Boolean },
     disabled: { type: Boolean },
     eager: { type: Boolean },
-    offset: { default: 3 },
-    padding: { default: 10 },
-    placement: { default: "bottom" },
+    panelClasses: { default: () => [] },
+    overlayClasses: { default: () => [] },
+    persistent: { type: Boolean },
     showClose: { type: Boolean, default: !0 },
-    theme: { default: "default" },
-    transitionDuration: { default: 150 },
+    title: {},
+    transition: { default: "fade" },
+    transitionDuration: { default: 350 },
+    size: { default: "sm" },
+    description: {},
     focusTarget: {},
-    width: {}
+    fullscreen: { type: Boolean },
+    modelValue: { type: [Boolean, null] },
+    direction: { default: "left" }
   },
-  emits: ["shown", "hidden"],
-  setup($, { emit: T }) {
-    const B = S(
-      () => import("./index252.js")
-    ), t = $, s = T, { id: P } = R(), p = `bbp_${P.value}`, r = n(), i = n(), { activate: N, deactivate: D } = z(i, {
-      /**
-       * This traps all clicks outside so we are pressing
-       * the trigger we just allow and process that in its
-       * own click handler.
-       * If we are pressing anything random on the page
-       * close the popover and be done
-       */
-      clickOutsideDeactivates: (e) => {
-        var h;
-        const o = e.target;
-        return o instanceof HTMLElement && (h = r.value) != null && h.contains(o) || (l(), s("hidden")), !0;
-      },
-      escapeDeactivates: () => (W(async () => {
-        await l(), f(), s("hidden");
-      }), !0),
-      /* We don't return focus so that when
-       * we press a button on tyhe page we can focus
-       * THAT button and not the current trigger
-       */
-      returnFocusOnDeactivate: !1
-    });
-    j(
-      r,
-      ([{ intersectionRatio: e }]) => {
-        e !== 1 && a.value && l();
-      },
-      { threshold: [0, 1] }
-    );
-    const E = w(() => ({
-      class: {
-        "bb-popover--block": t.block,
-        [`bb-popover--${t.theme}`]: !0
+  emits: ["shown", "hidden", "update:modelValue"],
+  setup(H, { emit: I }) {
+    var L, N;
+    const e = H, u = I, k = `title_${A().id.value}`, _ = `description_${A().id.value}`, b = s(null), T = s(null), W = s(null), F = s(null), R = s(null), K = s(null), P = oe(), $ = !!((N = (L = se()) == null ? void 0 : L.proxy) != null && N.$nuxt), c = s(0), U = v(() => {
+      const { openedModals: t } = p();
+      return !t.value || t.value === c.value;
+    }), { activate: j, deactivate: q } = ce(T, {
+      initialFocus: e.focusTarget ?? void 0,
+      clickOutsideDeactivates: !0,
+      /* On esc deactivate the trap, return focus and then close the modal */
+      escapeDeactivates: () => (le(() => {
+        u("update:modelValue", !1);
+      }), !0)
+    }), G = v(() => e.closeLabel), C = s(!1), d = s(!1), m = s(!0), f = s(!1), i = s(e.eager || e.modelValue), D = s(null), J = v(() => d.value || f.value), Q = () => {
+      if (!globalThis.document) return;
+      const t = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden", document.body.style.paddingRight = `${t}px`;
+    }, w = () => {
+      globalThis.document && (document.body.style.overflow = "auto", document.body.style.paddingRight = "0px");
+    };
+    x(() => {
+      if (e.modelValue) {
+        const { openedModals: t, modalHasClosed: o } = p();
+        t.value && (o(), c.value = 0, w());
       }
-    })), d = n(!1), u = n(!1), a = n(!1), m = n(!1), b = n(!0), L = async () => {
-      d.value = !0, await G(() => !!i.value), a.value = !0;
-    }, l = async () => {
-      a.value = !1;
-    }, M = async () => {
-      if (a.value) {
-        await l(), f(), s("hidden");
-        return;
+    }), ae(() => {
+      !e.modelValue && !i.value || $ && !globalThis.document || M();
+    }), x(() => {
+      if (e.modelValue) {
+        const { openedModals: t, modalHasClosed: o } = p();
+        t.value && (o(), c.value = 0, w());
       }
-      if (u.value || t.disabled) return;
-      d.value = !0, await L();
-      let e = t.focusTarget ?? ".bb-popover__close";
-      N({
-        onPostActivate: () => {
-          if (i.value) {
-            const o = i.value.querySelector(e);
-            o instanceof HTMLElement && (o.focus(), s("shown"));
-          }
-        }
-      });
-    }, f = () => {
-      var o;
-      const e = (o = r.value) == null ? void 0 : o.querySelector(`[aria-controls=popover_${p}]`);
-      e instanceof HTMLElement && e.focus({ preventScroll: !0 });
-    }, g = async () => {
-      D(), await l(), f(), s("hidden");
-    }, O = w(() => {
-      if (t.width) {
-        let e;
-        if (typeof t.width == "string" && Number.isNaN(Number(t.width)))
-          if (t.width.includes("%")) {
-            if (!r.value) return;
-            e = `${r.value.clientWidth * (+t.width.replace("%", "") / 100)}`;
-          } else
-            e = t.width;
-        else
-          e = `${t.width}`;
-        return `${e}px`;
+    }), ne(
+      () => e.modelValue,
+      () => {
+        !e.modelValue && !i.value || $ && !globalThis.document || M();
+      },
+      { flush: "post" }
+    );
+    const M = async () => {
+      if (e.modelValue) {
+        i.value || (i.value = !0), m.value = !1, f.value = !1, d.value = !0;
+        const { modalHasOpened: t, openedModals: o } = p();
+        t(), c.value = o.value, Q(), await E(e.transitionDuration), d.value = !1, C.value = !0, u("shown"), j();
+      } else {
+        q(), d.value = !1, C.value = !1, f.value = !0;
+        const { modalHasClosed: t, openedModals: o } = p();
+        t(), c.value = 0, o.value || w(), await E(e.transitionDuration), f.value = !1, m.value = !0, u("hidden"), D.value instanceof HTMLElement && D.value.focus();
       }
-    });
-    return (e, o) => (v(), H("span", q({ class: "bb-popover" }, E.value), [
-      c("span", {
-        ref_key: "wrapper",
-        ref: r,
-        class: "bb-popover__wrapper"
-      }, [
-        k(e.$slots, "activator", A(I({
-          props: {
-            "aria-controls": `popover_${p}`,
-            "aria-expanded": a.value,
-            onClick: M,
-            id: p,
-            disabled: !!e.disabled
-          },
-          closed: b.value,
-          closing: m.value,
-          disabled: !!e.disabled,
-          open: a.value,
-          opening: u.value,
-          placement: e.placement
-        })))
-      ], 512),
-      d.value || e.eager ? (v(), y(V(B), {
-        key: 0,
-        "arrow-padding": e.arrowPadding,
-        "base-class": "bb-popover",
-        "container-attributes": {
-          id: `popover_${p}`,
-          style: { width: O.value }
+    }, y = (t) => {
+      t.target === b.value && t.preventDefault();
+    }, X = (t) => {
+      e.disabled || J.value || b.value && t.target === b.value && (e.persistent || u("update:modelValue", !1));
+    }, B = () => {
+      e.disabled || u("update:modelValue", !1);
+    }, Y = v(() => {
+      const t = [
+        {
+          "bb-offcanvas bb-offcanvas__overlay": !0,
+          "bb-offcanvas--fullscreen": e.fullscreen,
+          "bb-offcanvas--faded": !U.value,
+          "bb-offcanvas--open": C.value,
+          "bb-offcanvas--opening": d.value,
+          "bb-offcanvas--closed": m.value,
+          "bb-offcanvas--closing": f.value,
+          [`bb-offcanvas--transition-${e.transition}`]: !0,
+          [`bb-offcanvas--${e.direction}`]: !0
         },
-        eager: e.eager,
-        offset: e.offset,
-        open: a.value,
-        padding: e.padding,
-        placement: e.placement,
-        theme: e.theme,
-        "transition-duration": e.transitionDuration,
-        wrapper: r.value
-      }, {
-        default: _(() => [
-          c("div", {
+        e.overlayClasses
+      ].flat(), o = {
+        onClick: X,
+        onScroll: y,
+        onTouchmove: y,
+        onWheel: y,
+        onKeydown: y
+      }, a = {
+        transitionDuration: e.transitionDuration / 1e3 + "s"
+      };
+      return {
+        class: t,
+        style: a,
+        ...o,
+        ...P
+      };
+    }), Z = v(() => {
+      const t = [
+        {
+          "bb-offcanvas__panel": !0,
+          "bb-offcanvas__panel--compact": e.compact
+        },
+        e.panelClasses
+      ].flat(), o = {
+        role: "dialog",
+        "aria-modal": !0
+      };
+      i.value && (o["aria-labelledby"] = k, e.description && (o["aria-describedby"] = _));
+      let a, r;
+      const h = {
+        sm: 384,
+        md: 652,
+        lg: 896
+      };
+      e.direction === "left" || e.direction === "right" ? e.fullscreen ? a = "100%" : typeof e.size == "number" ? a = e.size + "px" : e.size in h ? a = h[e.size] + "px" : a = e.size + "px" : e.fullscreen ? r = "100%" : typeof e.size == "number" ? r = e.size + "px" : e.size in h ? r = h[e.size] + "px" : Number.isNaN(Number(e.size)) ? e.size === "auto" && (r = "auto") : r = e.size + "px";
+      const ee = {
+        maxWidth: a,
+        height: r,
+        transitionDuration: e.transitionDuration / 1e3 + "s"
+      };
+      return {
+        class: t,
+        style: ee,
+        ...o
+      };
+    });
+    return (t, o) => (g(), ie(re, { to: "body" }, [
+      l("div", O(Y.value, {
+        ref_key: "overlay",
+        ref: b,
+        inert: m.value
+      }), [
+        l("div", O(Z.value, {
+          ref_key: "panel",
+          ref: T
+        }), [
+          i.value ? (g(), V("div", {
+            key: 0,
             ref_key: "content",
-            ref: i,
-            class: "bb-popover__content"
+            ref: W,
+            class: "bb-offcanvas__content"
           }, [
-            e.showClose ? (v(), y(J, {
-              key: 0,
-              class: "bb-popover__close",
-              onClick: g
-            }, {
-              default: _(() => [
-                K,
-                Q
-              ]),
-              _: 1
-            })) : C("", !0),
-            k(e.$slots, "default", {
-              close: g,
-              closed: b.value,
-              closing: m.value,
-              disabled: !!e.disabled,
-              open: a.value,
-              opening: u.value,
-              placement: e.placement
-            })
-          ], 512)
-        ]),
-        _: 3
-      }, 8, ["arrow-padding", "container-attributes", "eager", "offset", "open", "padding", "placement", "theme", "transition-duration", "wrapper"])) : C("", !0)
-    ], 16));
+            n(t.$slots, "content", { close: B }, () => [
+              l("div", {
+                ref_key: "header",
+                ref: F,
+                class: "bb-offcanvas__header"
+              }, [
+                n(t.$slots, "header", {
+                  close: B,
+                  title: t.title,
+                  titleId: k
+                }, () => [
+                  l("span", {
+                    id: k,
+                    class: "bb-offcanvas__title"
+                  }, [
+                    n(t.$slots, "title", { text: t.title }, () => [
+                      ue(S(t.title), 1)
+                    ])
+                  ]),
+                  l("span", fe, [
+                    t.showClose ? (g(), V("button", {
+                      key: 0,
+                      "aria-label": G.value,
+                      type: "button",
+                      onClick: B
+                    }, [
+                      n(t.$slots, "close", {}, () => [
+                        o[0] || (o[0] = l("span", { class: "bb-offcanvas-close__icon" }, [
+                          l("svg", {
+                            "aria-hidden": "true",
+                            fill: "none",
+                            viewBox: "0 0 24 24",
+                            xmlns: "http://www.w3.org/2000/svg"
+                          }, [
+                            l("path", {
+                              d: "M23 23L1 1M23 1L1 23",
+                              stroke: "currentColor",
+                              "stroke-linecap": "round",
+                              "stroke-width": "2"
+                            })
+                          ])
+                        ], -1))
+                      ])
+                    ], 8, ve)) : z("", !0)
+                  ])
+                ])
+              ], 512),
+              l("div", {
+                ref_key: "body",
+                ref: R,
+                class: "bb-offcanvas__body scrollbar-border"
+              }, [
+                n(t.$slots, "description", {
+                  descriptionId: _,
+                  text: t.description
+                }, () => [
+                  t.description ? (g(), V("div", {
+                    key: 0,
+                    id: _,
+                    class: "bb-offcanvas__description sr-only"
+                  }, S(t.description), 1)) : z("", !0)
+                ]),
+                n(t.$slots, "default")
+              ], 512),
+              o[1] || (o[1] = l("div", { style: { flex: "10000 10000 0%" } }, null, -1)),
+              l("div", {
+                ref_key: "footer",
+                ref: K,
+                class: "bb-offcanvas__footer"
+              }, [
+                n(t.$slots, "footer")
+              ], 512)
+            ])
+          ], 512)) : z("", !0)
+        ], 16)
+      ], 16, de)
+    ]));
   }
 });
 export {
-  oe as default
+  ge as default
 };

package/dist/index86.js

@@ -1,33 +1,179 @@
-import { defineComponent as r, computed as a, openBlock as l, createElementBlock as s, normalizeClass as m, createElementVNode as n, normalizeStyle as c } from "vue";
-import { clamp as p } from "./index199.js";
-import { getAsPercentageBetween as i } from "./index126.js";
-const _ = /* @__PURE__ */ r({
-  __name: "BbProgress",
+import { defineComponent as A, computed as _, ref as g, onMounted as E, onBeforeUnmount as P, openBlock as y, createElementBlock as k, normalizeClass as C, createElementVNode as i, createVNode as V, unref as S, withCtx as h, renderSlot as b, Fragment as W, renderList as R, toDisplayString as M, nextTick as $ } from "vue";
+import { debounce as F } from "./index262.js";
+/* empty css       */
+/* empty css       */
+import w from "./index13.js";
+/* empty css        */
+const T = { "aria-label": "Navigazione" }, D = { class: "bb-pagination__page-label" }, G = { class: "bb-pagination__page-label" }, H = /* @__PURE__ */ A({
+  __name: "BbPagination",
   props: {
-    modelValue: { default: 0 },
-    min: { default: 0 },
-    max: { default: 100 }
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    align: { default: "right" },
+    ellipsis: { default: "..." },
+    maxSize: { default: 6 },
+    modelValue: { default: 1 },
+    totalPages: { default: 1 }
   },
-  setup(t) {
-    const e = t, o = a(
-      () => p(
-        i(e.modelValue || e.min, e.min, e.max),
-        0,
-        100
-      )
-    );
-    return (d, u) => (l(), s("div", {
-      class: m(["bb-progress", {
-        "bb-progress--horizontal": !0
+  emits: ["update:modelValue"],
+  setup(x, { emit: B }) {
+    const l = x, c = B, s = _(() => +l.totalPages), u = g(1), t = g(+l.maxSize), r = g(), d = g(), z = g(1 / 0), m = () => {
+      r.value && d.value && (r.value.clientWidth < d.value.clientWidth ? t.value - 1 > 3 ? (t.value--, $(m)) : t.value = 3 : t.value < +l.maxSize && /* If there is enough space to fit one */
+      r.value.clientWidth - d.value.clientWidth > z.value && (t.value = Math.min(t.value + 1, +l.maxSize), $(m)));
+    };
+    if (globalThis.ResizeObserver) {
+      const e = new ResizeObserver(F(m, 200));
+      E(() => {
+        if (r.value && d.value) {
+          const a = r.value.querySelectorAll(
+            ".bb-pagination__page"
+          )[1];
+          if (a) {
+            const p = getComputedStyle(d.value).columnGap.replaceAll(/\D/g, ""), o = Number(p);
+            z.value = a.clientWidth + o;
+          }
+          e.observe(r.value);
+        }
+      }), P(() => {
+        e.disconnect();
+      });
+    }
+    const N = _(() => {
+      if (s.value <= 0 || isNaN(s.value) || s.value > Number.MAX_SAFE_INTEGER)
+        return [];
+      if (t.value <= 1) return [l.modelValue];
+      if (s.value <= t.value)
+        return v(s.value, u.value);
+      const e = t.value % 2 === 0, a = e ? t.value / 2 : Math.floor(t.value / 2), n = e ? a : a + 1, p = s.value - a;
+      if (n - l.modelValue >= 0)
+        return [
+          ...v(Math.max(1, t.value - 1), u.value),
+          l.ellipsis,
+          s.value
+        ];
+      if (l.modelValue - p >= (e ? 1 : 0)) {
+        const o = t.value - 1, f = s.value - o + u.value;
+        return [
+          u.value,
+          l.ellipsis,
+          ...v(o, f)
+        ];
+      } else {
+        const o = Math.max(1, t.value - 3), f = o === 1 ? l.modelValue : l.modelValue - Math.ceil(o / 2) + u.value;
+        return [
+          u.value,
+          l.ellipsis,
+          ...v(o, f),
+          l.ellipsis,
+          s.value
+        ];
+      }
+    }), L = _(() => N.value.map((e, a) => typeof e == "string" ? {
+      active: !1,
+      key: `ellipsis-${a}`,
+      page: e,
+      ellipsis: !0,
+      disabled: !0
+    } : {
+      active: e === l.modelValue,
+      key: e,
+      page: e,
+      ellipsis: !1,
+      disabled: !!l.disabled || +l.totalPages < 2 || l.loading
+    })), v = (e, a = 0) => Array.from({ length: e }, (n, p) => a + p);
+    return (e, a) => (y(), k("div", {
+      ref_key: "outercontainer",
+      ref: r,
+      class: C(["bb-pagination", {
+        [`bb-pagination--${e.align}`]: !0,
+        "bb-pagination--disabled": e.disabled
       }])
     }, [
-      n("div", {
-        class: "bb-progress-bar",
-        style: c({ width: o.value + "%" })
-      }, null, 4)
-    ]));
+      i("nav", T, [
+        i("ul", {
+          ref_key: "innercontainer",
+          ref: d,
+          class: "bb-pagination__pages"
+        }, [
+          i("li", null, [
+            V(S(w), {
+              class: "bb-pagination__page bb-pagination__page--previous",
+              disabled: l.modelValue <= 1 || e.loading || e.disabled,
+              onClick: a[0] || (a[0] = (n) => c("update:modelValue", l.modelValue - 1))
+            }, {
+              default: h(() => [
+                b(e.$slots, "previous", {}, () => [
+                  a[2] || (a[2] = i("span", { class: "bb-pagination__page-label sr-only" }, "Precedente", -1)),
+                  a[3] || (a[3] = i("svg", {
+                    class: "bb-pagination__page-chevron",
+                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg"
+                  }, [
+                    i("path", {
+                      d: "M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z",
+                      fill: "currentColor"
+                    })
+                  ], -1))
+                ])
+              ]),
+              _: 3
+            }, 8, ["disabled"])
+          ]),
+          (y(!0), k(W, null, R(L.value, (n) => (y(), k("li", {
+            key: n.key
+          }, [
+            V(S(w), {
+              class: C(["bb-pagination__page", {
+                "bb-pagination__page--active": n.active,
+                "bb-pagination__page--ellipsis": n.ellipsis
+              }]),
+              disabled: n.disabled,
+              onClick: (p) => c("update:modelValue", n.key)
+            }, {
+              default: h(() => [
+                n.ellipsis === !0 ? b(e.$slots, "ellipsis", { key: 0 }, () => [
+                  i("span", D, M(l.ellipsis), 1)
+                ]) : b(e.$slots, "item", {
+                  key: 1,
+                  active: n.active,
+                  disabled: n.disabled,
+                  item: n.key
+                }, () => [
+                  i("span", G, M(n.key), 1)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["class", "disabled", "onClick"])
+          ]))), 128)),
+          i("li", null, [
+            V(S(w), {
+              class: "bb-pagination__page bb-pagination__page--next",
+              disabled: l.modelValue >= +s.value || e.loading || e.disabled,
+              onClick: a[1] || (a[1] = (n) => c("update:modelValue", l.modelValue + 1))
+            }, {
+              default: h(() => [
+                b(e.$slots, "next", {}, () => [
+                  a[4] || (a[4] = i("span", { class: "bb-pagination__page-label sr-only" }, "Successivo", -1)),
+                  a[5] || (a[5] = i("svg", {
+                    class: "bb-pagination__page-chevron",
+                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg"
+                  }, [
+                    i("path", {
+                      d: "M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z",
+                      fill: "currentColor"
+                    })
+                  ], -1))
+                ])
+              ]),
+              _: 3
+            }, 8, ["disabled"])
+          ])
+        ], 512)
+      ])
+    ], 2));
   }
 });
 export {
-  _ as default
+  H as default
 };