bitboss-ui 2.1.88 → 2.1.89

package/dist/index252.js

@@ -1,231 +1,22 @@
-import { defineComponent as Z, useTemplateRef as $, computed as c, ref as w, watch as E, createElementBlock as r, openBlock as p, withModifiers as ee, normalizeStyle as h, normalizeClass as z, createElementVNode as v, renderSlot as m, createTextVNode as D, toDisplayString as g, unref as L, Fragment as te, renderList as oe } from "vue";
-import { isNil as b } from "./index275.js";
-import { useVirtualizer as ne } from "./index349.js";
-import { isNotNil as le } from "./index144.js";
-import { hash as N } from "./index237.js";
-import { useLocale as ie } from "./index223.js";
-const se = { class: "bb-listbox__outer-container scrollbar-border" }, ae = {
-  ref: "inner",
-  class: "bb-listbox__inner-container",
-  tabindex: "-1"
-}, ue = {
-  key: 0,
-  class: "bb-listbox__loading"
-}, re = {
-  key: 1,
-  class: "bb-listbox__no-data"
-}, pe = ["aria-selected", "data-index"], de = { class: "autocomplete-option__label" }, he = /* @__PURE__ */ Z({
-  __name: "ListBox",
-  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(V, { expose: R, emit: F }) {
-    const o = V, _ = F, { t: y } = ie(), u = $("inner"), O = $("listbox"), C = (e) => "option_" + JSON.stringify(e).replace(/\W/g, "_"), i = c(
-      () => o.options.map((e) => ({ ...e, id: C(e.value) }))
-    ), x = c(() => o.optionHeight ? o.optionHeight : o.compact ? 32 : 40), d = ne({
-      get count() {
-        return o.options.length;
-      },
-      getScrollElement: () => u.value ? u.value : null,
-      estimateSize: () => x.value,
-      overscan: 5,
-      measureElement: () => x.value,
-      useAnimationFrameWithResizeObserver: !0
-    }), A = (e) => {
-      e && d.value.measureElement(e);
-    }, M = c(() => d.value.getVirtualItems()), P = c(() => d.value.getTotalSize()), n = w(null), s = c(
-      () => 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;
-    }, W = () => {
-      if (!s.value) return;
-      const e = I();
-      n.value = e, a();
-    }, 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;
-    }, J = async () => {
-      if (!s.value) return;
-      const e = S();
-      n.value = e, a();
-    }, Y = () => {
-      if (!s.value) return;
-      let e = 0;
-      for (; o.options[e].disabled; )
-        e++;
-      n.value = e, a();
-    }, j = () => {
-      if (!s.value) return;
-      let e = o.options.length - 1;
-      for (; o.options[e].disabled && e !== 0; )
-        e--;
-      n.value = e, a();
-    }, q = () => {
-      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();
-    }, G = () => {
-      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();
-    }, K = (e) => {
-      if (!s.value) return;
-      const l = o.options.findIndex(
-        (t) => t.valueHash === e
-      );
-      l >= 0 && (n.value = l), a();
-    }, k = () => {
-      n.value = null;
-    }, a = () => {
-      u.value && le(n.value) && d.value.scrollToIndex(n.value, {
-        align: "center",
-        behavior: "smooth"
-      });
-    }, H = () => {
-      if (b(n.value) || !o.open) return;
-      const e = o.options[n.value];
-      e.selected ? _("option:unselected", e) : _("option:selected", e);
-    }, T = w(0), B = () => {
-      u.value && (T.value = u.value.scrollHeight);
-    }, Q = (e) => !e.disabled, U = (e) => {
-      if (e.preventDefault(), u.value && e.target && e.target instanceof HTMLElement && O.value) {
-        let l = e.target, t = l.dataset.index;
-        for (; b(t) && l.parentElement; )
-          l = l.parentElement, t = l.dataset.index;
-        if (t) {
-          const f = o.options[+t];
-          f && Q(f) && (n.value = +t, H());
-        }
-      }
-    }, X = () => b(n.value) ? void 0 : o.options[n.value];
-    return E(
-      () => o.open,
-      () => {
-        B();
-      },
-      { flush: "post" }
-    ), E(
-      () => o.options,
-      (e, l) => {
-        N(e.map((t) => t.valueHash)) !== N(l.map((t) => t.valueHash)) && (d.value.calculateRange(), B(), k());
-      },
-      {
-        flush: "post"
-      }
-    ), R({
-      focusNext: W,
-      focusPrevious: J,
-      focusFirst: Y,
-      focusFirstSelected: q,
-      focusLast: j,
-      focusLastSelected: G,
-      blur: k,
-      confirmOption: H,
-      focusByHash: K,
-      getHighlighted: X
-    }), (e, l) => (p(), 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: h({
-        "--transition-duration": `${e.transitionDuration}ms`,
-        "--overlay-min-height": `${T.value}px`,
-        "--option-height": `${x.value}px`
-      }),
-      onClick: ee(U, ["stop"])
-    }, [
-      v("span", se, [
-        v("span", ae, [
-          m(e.$slots, "options:prepend"),
-          e.loading && !e.options.length ? (p(), r("span", ue, [
-            m(e.$slots, "loading", {}, () => [
-              D(g(e.loadingText || L(y)("common.loadingText").value), 1)
-            ])
-          ])) : e.options.length ? (p(), r("span", {
-            key: 2,
-            role: "listbox",
-            ref: "listbox",
-            style: h({
-              height: `${P.value}px`
-            }),
-            tabindex: "-1"
-          }, [
-            (p(!0), r(te, null, oe(M.value, (t, f) => (p(), r("span", {
-              key: i.value[t.index].value,
-              ref_for: !0,
-              ref: A,
-              "aria-selected": n.value === f ? !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: h({
-                transform: `translateY(${t.start}px)`
-              })
-            }, [
-              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] = 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, g(i.value[t.index].text), 1)
-              ])
-            ], 14, pe))), 128))
-          ], 4)) : (p(), r("span", re, [
-            m(e.$slots, "no-data", {}, () => [
-              D(g(e.noDataText || L(y)("common.noDataText").value), 1)
-            ])
-          ])),
-          m(e.$slots, "options:append")
-        ], 512)
-      ])
-    ], 6));
+import { MaskInput as r } from "./index275.js";
+const u = /* @__PURE__ */ new WeakMap(), p = (a, n) => {
+  if (a.arg == null || a.instance == null) return;
+  const s = "setup" in a.instance.$.type;
+  a.arg in a.instance ? a.instance[a.arg] = n : s && console.warn("Maska: please expose `%s` using defineExpose", a.arg);
+}, k = (a, n) => {
+  var s;
+  const t = a instanceof HTMLInputElement ? a : a.querySelector("input");
+  if (t == null || t?.type === "file") return;
+  let e = {};
+  if (n.value != null && (e = typeof n.value == "string" ? { mask: n.value } : { ...n.value }), n.arg != null) {
+    const l = (o) => {
+      const i = n.modifiers.unmasked ? o.unmasked : n.modifiers.completed ? o.completed : o.masked;
+      p(n, i);
+    };
+    e.onMaska = e.onMaska == null ? l : Array.isArray(e.onMaska) ? [...e.onMaska, l] : [e.onMaska, l];
   }
-});
+  u.has(t) ? (s = u.get(t)) == null || s.update(e) : u.set(t, new r(t, e));
+};
 export {
-  he as default
+  k as vMaska
 };

package/dist/index253.js

@@ -1,15 +1,203 @@
-import { ref as c, watch as f, toValue as u } from "vue";
-const p = (e, { initialValue: r = !1, nextValue: o = !0 } = {}) => {
-  const t = c(r);
-  if (r) return t;
-  const n = f(
-    () => u(e),
-    (s) => {
-      s && (t.value = o, n());
+import { defineComponent as j, ref as s, onMounted as J, watch as Q, createElementBlock as M, openBlock as S, createElementVNode as x, createTextVNode as L, createCommentVNode as B, toDisplayString as y, unref as w } from "vue";
+import { hexToRgb as K } from "./index343.js";
+import { getHueFromRGB as F } from "./index344.js";
+import { hslToHex as b } from "./index345.js";
+import { useLocale as Z } from "./index235.js";
+const ee = {
+  id: "mainCanvasDesc",
+  "aria-live": "polite",
+  class: "sr-only"
+}, te = { key: 0 }, ae = {
+  id: "hueCanvasDesc",
+  "aria-live": "polite",
+  class: "sr-only"
+}, ne = { key: 0 }, ue = /* @__PURE__ */ j({
+  __name: "ColorPallette",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(N, { emit: O }) {
+    const _ = N, f = O, { t: h } = Z(), o = s(_.modelValue), d = s(
+      b(F(...K(o.value ?? "#ff0000")), 100, 50)
+    ), T = s(null), i = s(null), r = s(null), l = s({ x: 0, y: 0 }), u = s({ x: 0 }), p = s(!1), P = s(!1), q = () => {
+      const e = i.value, t = r.value;
+      !e || !t || (e.width = e.offsetWidth, e.height = e.offsetHeight, t.width = t.offsetWidth, t.height = t.offsetHeight, v(), g());
+    }, R = () => {
+      const e = i.value;
+      return e ? e.getContext("2d", { willReadFrequently: !0 }) : null;
+    }, v = () => {
+      const e = i.value;
+      if (!e) return;
+      const t = R();
+      if (!t) return;
+      t.clearRect(0, 0, e.width, e.height);
+      const a = t.createLinearGradient(0, 0, e.width, 0);
+      a.addColorStop(0, d.value), a.addColorStop(1, "#ffffff");
+      const n = t.createLinearGradient(0, 0, 0, e.height);
+      n.addColorStop(0, "transparent"), n.addColorStop(1, "#000000"), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height), t.fillStyle = n, t.globalCompositeOperation = "multiply", t.fillRect(0, 0, e.width, e.height), t.globalCompositeOperation = "source-over", t.fillStyle = "#000000", t.strokeStyle = "#000000", t.lineWidth = 1;
+    }, m = () => {
+      const e = R();
+      e && (e.beginPath(), e.arc(
+        l.value.x,
+        l.value.y,
+        8,
+        0,
+        2 * Math.PI
+      ), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), e.beginPath(), e.arc(
+        l.value.x,
+        l.value.y,
+        7,
+        0,
+        2 * Math.PI
+      ), e.strokeStyle = "#000000", e.lineWidth = 1, e.stroke(), e.globalCompositeOperation = "source-over");
+    }, D = () => {
+      const e = r.value;
+      return e ? e.getContext("2d", { willReadFrequently: !0 }) : null;
+    }, g = () => {
+      const e = r.value;
+      if (!e) return;
+      const t = D();
+      if (!t) return;
+      const a = t.createLinearGradient(0, 0, e.width, 0);
+      for (let n = 0; n <= 360; n += 60)
+        a.addColorStop(n / 360, `hsl(${n}, 100%, 50%)`);
+      a.addColorStop(1, "hsl(360, 100%, 50%)"), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height), H(), t.fillStyle = "#000000", t.strokeStyle = "#000000", t.lineWidth = 1;
+    }, H = () => {
+      const e = r.value;
+      if (!e) return;
+      const t = D();
+      if (!t) return;
+      const a = 10, n = 16, c = u.value.x - a / 2, k = e.height / 2 - n / 2;
+      t.beginPath(), t.roundRect(c, k, a, n, 2), t.strokeStyle = "lightgray", t.stroke(), t.fillStyle = "#ffffff", t.fill();
+    }, E = (e) => {
+      const t = i.value;
+      t && (t.setPointerCapture(e.pointerId), p.value = !0, I(e));
+    }, U = (e) => {
+      const t = r.value;
+      t && (t.setPointerCapture(e.pointerId), P.value = !0, V(e));
+    }, I = (e) => {
+      const t = i.value;
+      if (!t) return;
+      const a = t.getBoundingClientRect(), n = Math.max(0, Math.min(t.width - 1, e.clientX - a.left)), c = Math.max(0, Math.min(t.height - 1, e.clientY - a.top));
+      l.value = { x: n, y: c }, v(), m(), o.value = C(), f("update:modelValue", o.value);
+    }, V = (e) => {
+      const t = r.value;
+      if (!t) return;
+      const a = t.getBoundingClientRect(), n = Math.max(0, Math.min(t.width - 1, e.clientX - a.left));
+      u.value = { x: n };
+      const c = n / t.width * 360;
+      d.value = b(c, 100, 50), g(), v(), m(), o.value = C(), f("update:modelValue", o.value);
+    }, G = (e) => {
+      p.value ? I(e) : P.value && V(e);
+    }, W = (e) => {
+      const t = p.value ? i.value : r.value;
+      t && t.releasePointerCapture(e.pointerId), p.value = !1, P.value = !1;
+    }, X = (e) => {
+      switch (e.key) {
+        case "ArrowUp":
+          l.value.y = Math.max(0, l.value.y - 5);
+          break;
+        case "ArrowDown":
+          l.value.y = Math.min(
+            i.value?.height ?? 0,
+            l.value.y + 5
+          );
+          break;
+        case "ArrowLeft":
+          l.value.x = Math.max(0, l.value.x - 5);
+          break;
+        case "ArrowRight":
+          l.value.x = Math.min(
+            i.value?.width ?? 0,
+            l.value.x + 5
+          );
+          break;
+        default:
+          return;
+      }
+      v(), m(), o.value = C(), f("update:modelValue", o.value), e.preventDefault();
+    }, $ = (e) => {
+      switch (e.key) {
+        case "ArrowLeft":
+          u.value.x = Math.max(0, u.value.x - 5);
+          break;
+        case "ArrowRight":
+          u.value.x = Math.min(
+            r.value?.width ?? 0,
+            u.value.x + 5
+          );
+          break;
+        default:
+          return;
+      }
+      const a = u.value.x / (r.value?.width ?? 1) * 360;
+      d.value = b(a, 100, 50), g(), H(), v(), m(), o.value = C(), f("update:modelValue", o.value), e.preventDefault();
+    };
+    J(() => {
+      q(), A(o.value ?? "#ff0000");
+    }), Q(
+      () => _.modelValue,
+      (e) => {
+        !e || e === o.value || (o.value = e, A(e), g(), v());
+      }
+    );
+    const C = () => {
+      const e = i.value;
+      if (!e) return "#ffffff";
+      const t = e.getContext("2d");
+      if (!t) return "#ffffff";
+      const { x: a, y: n } = l.value, c = t.getImageData(a, n, 1, 1).data, [k, z, Y] = c;
+      return `#${((1 << 24) + (k << 16) + (z << 8) + Y).toString(16).slice(1)}`;
+    };
+    function A(e) {
+      const t = F(...K(e));
+      d.value = b(t, 100, 50), u.value.x = t / 360 * (r.value?.width ?? 0);
     }
-  );
-  return t;
-};
+    return (e, t) => (S(), M("span", {
+      ref_key: "paletteRef",
+      ref: T,
+      "aria-label": "Color Picker",
+      class: "bb-color-palette",
+      role: "application"
+    }, [
+      x("canvas", {
+        ref_key: "mainCanvasRef",
+        ref: i,
+        "aria-describedby": "mainCanvasDesc",
+        "aria-label": "Main Color Selection",
+        class: "bb-color-palette__canvas",
+        role: "application",
+        tabindex: "0",
+        onKeydown: X,
+        onPointerdown: E,
+        onPointermove: G,
+        onPointerup: W
+      }, null, 544),
+      x("span", ee, [
+        L(y(w(h)("colorInput.mainCanvasDesc")) + " ", 1),
+        o.value ? (S(), M("span", te, y(w(h)("colorInput.mainCanvasSelectedColor", o.value)), 1)) : B("", !0)
+      ]),
+      x("canvas", {
+        ref_key: "hueCanvasRef",
+        ref: r,
+        "aria-describedby": "hueCanvasDesc",
+        "aria-label": "Hue Selection",
+        class: "bb-color-palette__hue-canvas",
+        role: "application",
+        tabindex: "0",
+        onKeydown: $,
+        onPointerdown: U,
+        onPointermove: G,
+        onPointerup: W
+      }, null, 544),
+      x("span", ae, [
+        L(y(w(h)("colorInput.hueCanvasDesc")) + " ", 1),
+        d.value ? (S(), M("span", ne, y(w(h)("colorInput.hueCanvasSelectedHue", d.value)), 1)) : B("", !0)
+      ])
+    ], 512));
+  }
+});
 export {
-  p as useUntil
+  ue as default
 };

package/dist/index255.js

@@ -1,11 +1,137 @@
-import { getCurrentInstance as e } from "vue";
-const s = () => {
-  const t = e(), n = !!t?.proxy?.$inertia, r = !!t?.proxy?.$nuxt;
-  return {
-    isInertia: n,
-    isNuxt: r
-  };
-};
+import { defineComponent as A, mergeModels as L, useModel as T, ref as c, computed as a, watch as F, onMounted as S, createBlock as N, openBlock as w, resolveDynamicComponent as U, mergeProps as g, unref as y, withModifiers as h, withCtx as j, createElementVNode as q, createElementBlock as I, createCommentVNode as R, renderSlot as X, nextTick as z } from "vue";
+import { useCancelableFunction as G } from "./index347.js";
+import { useUntil as H } from "./index258.js";
+import { extractDomContainer as x } from "./index259.js";
+import { waitFor as J } from "./index348.js";
+import { arrow as K, useFloating as O } from "./index349.js";
+import { flip as Q, offset as W, shift as Y, hide as Z, autoUpdate as ee } from "./index350.js";
+const oe = {
+  key: 0,
+  class: "bb-common-popover__bubble"
+}, ue = /* @__PURE__ */ A({
+  __name: "CommonPopover",
+  props: /* @__PURE__ */ L({
+    arrowPadding: {},
+    eager: { type: Boolean },
+    offset: {},
+    padding: { default: 0 },
+    placement: {},
+    transitionDuration: { default: 250 },
+    anchor: {},
+    boundary: {},
+    dialog: { type: Boolean },
+    hideArrow: { type: Boolean },
+    tag: { default: "span" },
+    flip: { type: Boolean, default: !0 }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(m) {
+    const o = m, r = T(m, "modelValue"), s = c(r.value), C = a(() => o.dialog ? "dialog" : "span"), t = c(), f = c(), _ = a(() => {
+      const e = o.anchor;
+      return e && typeof e == "object" && "getBoundingClientRect" in e && !(e instanceof Element) ? e : x(e);
+    }), B = H(r, { initialValue: o.eager }), P = a(() => {
+      if (o.boundary)
+        return typeof o.boundary == "string" ? document.querySelector(o.boundary) ?? void 0 : x(o.boundary) ?? void 0;
+    }), k = a(() => {
+      const e = P.value;
+      return [
+        ...o.flip ? [Q(e ? { boundary: e } : void 0)] : [],
+        W(o.offset),
+        Y({ padding: o.padding, ...e ? { boundary: e } : {} }),
+        Z(),
+        ...o.hideArrow ? [] : [
+          K({
+            element: f,
+            padding: o.arrowPadding
+          })
+        ]
+      ];
+    }), { floatingStyles: E, placement: M, middlewareData: u, update: v } = O(
+      _,
+      t,
+      {
+        placement: o.placement,
+        whileElementsMounted: ee,
+        middleware: k,
+        strategy: "fixed"
+      }
+    ), { execute: b } = G(
+      ({ signal: e }, n) => new Promise((l) => {
+        let i;
+        const p = () => {
+          i && clearTimeout(i);
+        };
+        e.addEventListener("abort", p), n ? ($(), v(), J(() => !!t.value).then(() => {
+          s.value = !0, e.removeEventListener("abort", p), l(void 0);
+        })) : (s.value = !1, i = setTimeout(() => {
+          z(() => {
+            t.value && (o.dialog ? t.value.close() : t.value.hidePopover()), e.removeEventListener("abort", p), v(), l(void 0);
+          });
+        }, o.transitionDuration));
+      })
+    ), $ = () => {
+      if (!t.value) return;
+      if (!o.dialog) return t.value.showPopover();
+      t.value.showModal();
+    };
+    F(r, b), S(() => {
+      r.value && b(r.value);
+    });
+    const D = a(() => {
+      const e = r.value ? void 0 : -1, n = Math.round(u.value.arrow?.x ?? 0), l = o.dialog ? void 0 : "manual";
+      return {
+        style: {
+          ...E.value,
+          "--transition-duration": `${o.transitionDuration}ms`,
+          "--page-padding": `${o.padding}px`,
+          "--arrow-offset-x": `${n}px`
+        },
+        popover: l,
+        tabindex: e
+      };
+    }), V = a(() => {
+      if (u.value.arrow) {
+        const { x: e, y: n } = u.value.arrow;
+        return {
+          style: {
+            left: `${e}px`,
+            top: `${n}px`
+          }
+        };
+      }
+    }), d = () => {
+      r.value = !1;
+    };
+    return (e, n) => (w(), N(U(C.value), g({
+      ref_key: "wrapper",
+      ref: t,
+      class: ["bb-common-popover", {
+        "bb-common-popover--open": s.value,
+        "bb-common-popover--no-arrow": e.hideArrow,
+        [`bb-common-popover--${y(M)}`]: !0
+      }]
+    }, D.value, {
+      onClick: h(d, ["self", "stop"]),
+      onContextmenu: h(d, ["self", "stop", "prevent"]),
+      onClose: d
+    }), {
+      default: j(() => [
+        q("span", g({
+          ref_key: "bubblearrow",
+          ref: f,
+          class: "bb-common-popover__arrow"
+        }, V.value), null, 16),
+        y(B) ? (w(), I("span", oe, [
+          X(e.$slots, "default")
+        ])) : R("", !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
 export {
-  s as useFrameworkDetection
+  ue as default
 };