bitboss-ui 2.1.23 → 2.1.25

package/dist/index25.js

@@ -1,9 +1,9 @@
-import { defineComponent as P, mergeModels as D, useModel as q, computed as p, ref as E, watch as A, onMounted as H, createElementBlock as d, openBlock as u, withModifiers as K, normalizeStyle as O, normalizeClass as R, unref as v, createCommentVNode as g, Fragment as U, createElementVNode as l, renderSlot as s, createTextVNode as j, toDisplayString as T, nextTick as G } from "vue";
-import { parseSize as J } from "./index217.js";
+import { defineComponent as P, mergeModels as D, useModel as q, computed as p, ref as E, watch as A, onMounted as H, createElementBlock as d, openBlock as u, withModifiers as K, normalizeStyle as O, normalizeClass as R, unref as v, createCommentVNode as g, Fragment as U, createElementVNode as t, renderSlot as s, createTextVNode as j, toDisplayString as T, nextTick as G } from "vue";
+import { parseSize as J } from "./index236.js";
 import { useId as V } from "./index8.js";
-import { useLocale as Q } from "./index216.js";
+import { useLocale as Q } from "./index228.js";
 import { useMobile as X } from "./index9.js";
-import { useUntil as Y } from "./index218.js";
+import { useUntil as Y } from "./index229.js";
 import { wait as y } from "./index135.js";
 const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
   ref: "header",
@@ -11,10 +11,10 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
 }, ee = { class: "bb-base-dialog__close" }, oe = ["aria-label", "disabled"], te = {
   ref: "body",
   class: "bb-base-dialog__body scrollbar-border"
-}, le = {
+}, le = { class: "bb-base-dialog__body-content" }, se = {
   ref: "footer",
   class: "bb-base-dialog__footer"
-}, ce = /* @__PURE__ */ P({
+}, be = /* @__PURE__ */ P({
   __name: "BaseDialog",
   props: /* @__PURE__ */ D({
     closeLabel: {},
@@ -37,33 +37,33 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
   }),
   emits: /* @__PURE__ */ D(["shown", "hidden"], ["update:modelValue"]),
   setup(h, { emit: S }) {
-    const o = h, w = S, t = q(h, "modelValue"), { t: z } = Q(), W = p(
+    const o = h, w = S, l = q(h, "modelValue"), { t: z } = Q(), W = p(
       () => o.closeLabel || z("dialog.closeLabel").value
     ), n = E(null), c = Y(
-      () => t.value || o.eager,
+      () => l.value || o.eager,
       {
-        initialValue: t.value || o.eager
+        initialValue: l.value || o.eager
       }
-    ), b = `title_${V().id.value}`, f = `description_${V().id.value}`, k = (e) => {
+    ), b = `title_${V().id.value}`, f = `description_${V().id.value}`, _ = (e) => {
       if (e.key === "Escape" && (o.disabled || o.persistent))
         return e.preventDefault(), a.value = !0, y(200).then(() => {
           a.value = !1;
         }), !1;
-    }, C = async (e) => {
+    }, k = async (e) => {
       var i, B, L, M;
       e ? ((i = window.globalThis) != null && i.document && !document.documentElement.style.getPropertyValue("--scrollbar-width") && (document.documentElement.style.setProperty(
         "--scrollbar-width",
         `${N()}px`
-      ), document.addEventListener("keydown", k)), (B = n.value) == null || B.showModal(), o.focusTarget && G(() => {
+      ), document.addEventListener("keydown", _)), (B = n.value) == null || B.showModal(), o.focusTarget && G(() => {
         var $;
         const m = ($ = n.value) == null ? void 0 : $.querySelector(o.focusTarget);
         m && m instanceof HTMLElement && m.focus();
-      }), w("shown")) : (await y(o.transitionDuration), (L = window.globalThis) != null && L.document && document.removeEventListener("keydown", k), (M = n.value) == null || M.close(), w("hidden"));
+      }), w("shown")) : (await y(o.transitionDuration), (L = window.globalThis) != null && L.document && document.removeEventListener("keydown", _), (M = n.value) == null || M.close(), w("hidden"));
     };
-    A(t, C), H(() => {
-      t.value && C(!0);
+    A(l, k), H(() => {
+      l.value && k(!0);
     });
-    const I = p(() => _.value ? "100%" : J(o.size, {
+    const I = p(() => C.value ? "100%" : J(o.size, {
       sm: 384,
       md: 652,
       lg: 896
@@ -72,8 +72,8 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
         return a.value = !0, y(300).then(() => {
           a.value = !1;
         }), !1;
-      t.value = !1;
-    }, a = E(!1), N = () => globalThis.document ? window.innerWidth - document.documentElement.clientWidth : 0, { isMobile: F } = X(), _ = p(
+      l.value = !1;
+    }, a = E(!1), N = () => globalThis.document ? window.innerWidth - document.documentElement.clientWidth : 0, { isMobile: F } = X(), C = p(
       () => o.fullscreen === !0 || o.fullscreen === "mobile" && F.value
     );
     return (e, i) => (u(), d("dialog", {
@@ -81,13 +81,13 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
       ref: n,
       "aria-describedby": v(c) && e.description ? f : void 0,
       "aria-labelledby": v(c) && e.title ? b : void 0,
-      "aria-live": t.value ? "polite" : "off",
+      "aria-live": l.value ? "polite" : "off",
       class: R([
         "bb-base-dialog",
         [
           {
-            "bb-base-dialog--open": t.value,
-            "bb-base-dialog--fullscreen": _.value,
+            "bb-base-dialog--open": l.value,
+            "bb-base-dialog--fullscreen": C.value,
             "bb-base-dialog--compact": e.compact,
             "bb-base-dialog--deny-close": a.value
           },
@@ -95,7 +95,7 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
           e.panelClasses
         ].flat()
       ]),
-      inert: !t.value,
+      inert: !l.value,
       style: O({
         "--max-width": I.value,
         "--transition-duration": `${o.transitionDuration}ms`
@@ -104,13 +104,13 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
       onClick: K(r, ["self"])
     }, [
       v(c) ? (u(), d(U, { key: 0 }, [
-        l("div", x, [
+        t("div", x, [
           s(e.$slots, "header", {
             close: r,
             title: e.title,
             titleId: b
           }, () => [
-            l("span", {
+            t("span", {
               id: b,
               class: "bb-base-dialog__title"
             }, [
@@ -118,7 +118,7 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
                 j(T(e.title), 1)
               ])
             ]),
-            l("span", ee, [
+            t("span", ee, [
               e.showClose ? (u(), d("button", {
                 key: 0,
                 "aria-label": W.value,
@@ -127,14 +127,14 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
                 onClick: r
               }, [
                 s(e.$slots, "close", {}, () => [
-                  i[0] || (i[0] = l("span", { class: "bb-base-dialog__close-icon" }, [
-                    l("svg", {
+                  i[0] || (i[0] = t("span", { class: "bb-base-dialog__close-icon" }, [
+                    t("svg", {
                       "aria-hidden": "true",
                       fill: "none",
                       viewBox: "0 0 24 24",
                       xmlns: "http://www.w3.org/2000/svg"
                     }, [
-                      l("path", {
+                      t("path", {
                         d: "M23 23L1 1M23 1L1 23",
                         stroke: "currentColor",
                         "stroke-linecap": "round",
@@ -147,20 +147,22 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
             ])
           ])
         ], 512),
-        l("div", te, [
-          s(e.$slots, "description", {
-            descriptionId: f,
-            text: e.description
-          }, () => [
-            e.description ? (u(), d("div", {
-              key: 0,
-              id: f,
-              class: "bb-base-dialog__description sr-only"
-            }, T(e.description), 1)) : g("", !0)
-          ]),
-          s(e.$slots, "default")
+        t("div", te, [
+          t("div", le, [
+            s(e.$slots, "description", {
+              descriptionId: f,
+              text: e.description
+            }, () => [
+              e.description ? (u(), d("div", {
+                key: 0,
+                id: f,
+                class: "bb-base-dialog__description sr-only"
+              }, T(e.description), 1)) : g("", !0)
+            ]),
+            s(e.$slots, "default")
+          ])
         ], 512),
-        l("div", le, [
+        t("div", se, [
           s(e.$slots, "footer")
         ], 512)
       ], 64)) : g("", !0)
@@ -168,5 +170,5 @@ const Z = ["aria-describedby", "aria-labelledby", "aria-live", "inert"], x = {
   }
 });
 export {
-  ce as default
+  be as default
 };

package/dist/index250.js

@@ -1,7 +1,199 @@
-import { getDefaultExportFromCjs as r } from "./index315.js";
-import { __require as e } from "./index299.js";
-var o = e();
-const m = /* @__PURE__ */ r(o);
+import { defineComponent as j, ref as c, onMounted as J, watch as Q, createElementBlock as S, openBlock as _, createElementVNode as w, createTextVNode as A, createCommentVNode as E, toDisplayString as C, unref as x } from "vue";
+import { hexToRgb as B } from "./index337.js";
+import { getHueFromRGB as K } from "./index338.js";
+import { hslToHex as y } from "./index339.js";
+import { useLocale as Z } from "./index228.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 }, ce = /* @__PURE__ */ j({
+  __name: "ColorPallette",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(F, { emit: N }) {
+    const R = F, f = N, { t: h } = Z(), o = c(R.modelValue), d = c(
+      y(K(...B(o.value ?? "#ff0000")), 100, 50)
+    ), O = c(null), s = c(null), r = c(null), l = c({ x: 0, y: 0 }), u = c({ x: 0 }), b = c(!1), k = c(!1), T = () => {
+      const e = s.value, t = r.value;
+      !e || !t || (e.width = e.offsetWidth, e.height = e.offsetHeight, t.width = t.offsetWidth, t.height = t.offsetHeight, v(), m());
+    }, D = () => {
+      const e = s.value;
+      return e ? e.getContext("2d", { willReadFrequently: !0 }) : null;
+    }, v = () => {
+      const e = s.value;
+      if (!e) return;
+      const t = D();
+      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;
+    }, p = () => {
+      const e = D();
+      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");
+    }, P = () => {
+      const e = r.value;
+      return e ? e.getContext("2d", { willReadFrequently: !0 }) : null;
+    }, m = () => {
+      const e = r.value;
+      if (!e) return;
+      const t = P();
+      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 = P();
+      if (!t) return;
+      const a = 10, n = 16, i = u.value.x - a / 2, M = e.height / 2 - n / 2;
+      t.beginPath(), t.roundRect(i, M, a, n, 2), t.strokeStyle = "lightgray", t.stroke(), t.fillStyle = "#ffffff", t.fill();
+    }, q = (e) => {
+      s.value && (window.addEventListener("pointermove", L), window.addEventListener("pointerup", G), b.value = !0, I(e));
+    }, U = (e) => {
+      r.value && (window.addEventListener("pointermove", L), window.addEventListener("pointerup", G), k.value = !0, V(e));
+    }, I = (e) => {
+      const t = s.value;
+      if (!t) return;
+      const a = t.getBoundingClientRect(), n = Math.max(0, Math.min(t.width, e.clientX - a.left)), i = Math.max(0, Math.min(t.height, e.clientY - a.top));
+      l.value = { x: n, y: i }, v(), p(), o.value = g(), 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, e.clientX - a.left));
+      u.value = { x: n };
+      const i = n / t.width * 360;
+      d.value = y(i, 100, 50), m(), v(), p(), o.value = g(), f("update:modelValue", o.value);
+    }, L = (e) => {
+      b.value ? I(e) : k.value && V(e);
+    }, G = () => {
+      b.value = !1, k.value = !1;
+    }, X = (e) => {
+      var a, n;
+      switch (e.key) {
+        case "ArrowUp":
+          l.value.y = Math.max(0, l.value.y - 5);
+          break;
+        case "ArrowDown":
+          l.value.y = Math.min(
+            ((a = s.value) == null ? void 0 : a.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(
+            ((n = s.value) == null ? void 0 : n.width) ?? 0,
+            l.value.x + 5
+          );
+          break;
+        default:
+          return;
+      }
+      v(), p(), o.value = g(), f("update:modelValue", o.value), e.preventDefault();
+    }, $ = (e) => {
+      var n, i;
+      switch (e.key) {
+        case "ArrowLeft":
+          u.value.x = Math.max(0, u.value.x - 5);
+          break;
+        case "ArrowRight":
+          u.value.x = Math.min(
+            ((n = r.value) == null ? void 0 : n.width) ?? 0,
+            u.value.x + 5
+          );
+          break;
+        default:
+          return;
+      }
+      const a = u.value.x / (((i = r.value) == null ? void 0 : i.width) ?? 1) * 360;
+      d.value = y(a, 100, 50), m(), H(), v(), p(), o.value = g(), f("update:modelValue", o.value), e.preventDefault();
+    };
+    J(() => {
+      T(), W(o.value ?? "#ff0000");
+    }), Q(
+      () => R.modelValue,
+      (e) => {
+        !e || e === o.value || (o.value = e, W(e), m(), v());
+      }
+    );
+    const g = () => {
+      const e = s.value;
+      if (!e) return "#ffffff";
+      const t = e.getContext("2d");
+      if (!t) return "#ffffff";
+      const { x: a, y: n } = l.value, i = t.getImageData(a, n, 1, 1).data, [M, z, Y] = i;
+      return `#${((1 << 24) + (M << 16) + (z << 8) + Y).toString(16).slice(1)}`;
+    };
+    function W(e) {
+      var a;
+      const t = K(...B(e));
+      d.value = y(t, 100, 50), u.value.x = t / 360 * (((a = r.value) == null ? void 0 : a.width) ?? 0);
+    }
+    return (e, t) => (_(), S("div", {
+      ref_key: "paletteRef",
+      ref: O,
+      "aria-label": "Color Picker",
+      class: "bb-color-palette",
+      role: "application"
+    }, [
+      w("canvas", {
+        ref_key: "mainCanvasRef",
+        ref: s,
+        "aria-describedby": "mainCanvasDesc",
+        "aria-label": "Main Color Selection",
+        class: "bb-color-palette__canvas",
+        role: "application",
+        tabindex: "0",
+        onKeydown: X,
+        onPointerdown: q
+      }, null, 544),
+      w("p", ee, [
+        A(C(x(h)("colorInput.mainCanvasDesc")) + " ", 1),
+        o.value ? (_(), S("span", te, C(x(h)("colorInput.mainCanvasSelectedColor", o.value)), 1)) : E("", !0)
+      ]),
+      w("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
+      }, null, 544),
+      w("p", ae, [
+        A(C(x(h)("colorInput.hueCanvasDesc")) + " ", 1),
+        d.value ? (_(), S("span", ne, C(x(h)("colorInput.hueCanvasSelectedHue", d.value)), 1)) : E("", !0)
+      ])
+    ], 512));
+  }
+});
 export {
-  m as default
+  ce as default
 };

package/dist/index252.js

@@ -1,7 +1,7 @@
-import { getDefaultExportFromCjs as r } from "./index315.js";
-import { __require as e } from "./index303.js";
-var o = e();
-const m = /* @__PURE__ */ r(o);
+import { getDefaultExportFromCjs as e } from "./index303.js";
+import { __require as r } from "./index310.js";
+var o = r();
+const p = /* @__PURE__ */ e(o);
 export {
-  m as default
+  p as default
 };

package/dist/index253.js

@@ -1,7 +1,7 @@
-import { getDefaultExportFromCjs as e } from "./index315.js";
-import { __require as r } from "./index305.js";
+import { getDefaultExportFromCjs as e } from "./index303.js";
+import { __require as r } from "./index312.js";
 var o = r();
-const p = /* @__PURE__ */ e(o);
+const f = /* @__PURE__ */ e(o);
 export {
-  p as default
+  f as default
 };

package/dist/index254.js

@@ -1,7 +1,10 @@
-import { getDefaultExportFromCjs as e } from "./index315.js";
-import { __require as r } from "./index307.js";
-var o = r();
-const f = /* @__PURE__ */ e(o);
+const o = "bitboss-ui | ", e = () => ({
+  warn: (r) => console.warn(`${o}${r}`),
+  error: (r) => console.error(`${o}${r}`),
+  throw: (r) => {
+    throw new Error(`${o}${r}`);
+  }
+});
 export {
-  f as default
+  e as useLogger
 };