bitboss-ui 2.1.34 → 2.1.35

package/dist/index242.js

@@ -1,123 +1,199 @@
-import { defineComponent as $, mergeModels as D, useModel as E, ref as p, computed as i, watch as V, onMounted as L, createBlock as T, openBlock as w, resolveDynamicComponent as F, mergeProps as g, unref as h, withModifiers as A, withCtx as N, createElementVNode as S, createElementBlock as U, createCommentVNode as I, renderSlot as X, nextTick as j } from "vue";
-import { useCancelableFunction as q } from "./index332.js";
-import { useUntil as z } from "./index247.js";
-import { extractDomContainer as G } from "./index271.js";
-import { waitFor as H } from "./index333.js";
-import { useFloating as J, arrow as K } from "./index334.js";
-import { flip as O, offset as Q, shift as R, hide as W, autoUpdate as Y } from "./index335.js";
-const Z = {
-  key: 0,
-  class: "bb-common-popover-2__bubble"
-}, se = /* @__PURE__ */ $({
-  __name: "CommonPopover2",
-  props: /* @__PURE__ */ D({
-    arrowPadding: {},
-    eager: { type: Boolean },
-    offset: {},
-    padding: { default: 0 },
-    placement: {},
-    transitionDuration: { default: 250 },
-    anchor: {},
-    dialog: { type: Boolean },
-    tag: { default: "span" },
-    flip: { type: Boolean, default: !0 }
-  }, {
-    modelValue: { type: Boolean, default: !1 },
-    modelModifiers: {}
-  }),
+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 "./index340.js";
+import { getHueFromRGB as K } from "./index341.js";
+import { hslToHex as y } from "./index342.js";
+import { useLocale as Z } from "./index230.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(c) {
-    const e = c, a = E(c, "modelValue"), u = p(a.value), x = i(() => e.dialog ? "dialog" : "span"), t = p(), m = p(), y = i(() => G(e.anchor)), _ = z(a, { initialValue: e.eager }), { floatingStyles: C, placement: P, middlewareData: d, update: f } = J(
-      y,
-      t,
-      {
-        placement: e.placement,
-        whileElementsMounted: Y,
-        middleware: [
-          ...e.flip ? [O()] : [],
-          Q(e.offset),
-          R({ padding: e.padding }),
-          W(),
-          K({
-            element: m,
-            padding: e.arrowPadding
-          })
-        ],
-        strategy: "fixed"
+  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;
       }
-    ), { execute: v } = q(
-      ({ signal: o }, r) => new Promise((l) => {
-        let s;
-        const n = () => {
-          s && clearTimeout(s);
-        };
-        o.addEventListener("abort", n), r ? (k(), f(), H(() => !!t.value).then(() => {
-          u.value = !0, o.removeEventListener("abort", n), l(void 0);
-        })) : (u.value = !1, s = setTimeout(() => {
-          j(() => {
-            t.value && (e.dialog ? t.value.close() : t.value.hidePopover()), o.removeEventListener("abort", n), f(), l(void 0);
-          });
-        }, e.transitionDuration));
-      })
-    ), k = () => {
-      if (!t.value) return;
-      if (!e.dialog) return t.value.showPopover();
-      t.value.showModal();
+      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();
     };
-    V(a, v), L(() => {
-      a.value && v(a.value);
-    });
-    const M = i(() => {
-      var n;
-      const o = a.value ? void 0 : -1, r = Math.round(((n = d.value.arrow) == null ? void 0 : n.x) ?? 0), l = e.dialog ? void 0 : "manual";
-      return {
-        style: {
-          ...C.value,
-          "--transition-duration": `${e.transitionDuration}ms`,
-          "--page-padding": `${e.padding}px`,
-          "--arrow-offset-x": `${r}px`
-        },
-        popover: l,
-        tabindex: o
-      };
-    }), B = i(() => {
-      if (d.value.arrow) {
-        const { x: o, y: r } = d.value.arrow;
-        return {
-          style: {
-            left: `${o}px`,
-            top: `${r}px`
-          }
-        };
+    J(() => {
+      T(), W(o.value ?? "#ff0000");
+    }), Q(
+      () => R.modelValue,
+      (e) => {
+        !e || e === o.value || (o.value = e, W(e), m(), v());
       }
-    }), b = () => {
-      a.value = !1;
+    );
+    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)}`;
     };
-    return (o, r) => (w(), T(F(x.value), g({
-      ref_key: "wrapper",
-      ref: t,
-      class: ["bb-common-popover-2", {
-        "bb-common-popover-2--open": u.value,
-        [`bb-common-popover-2--${h(P)}`]: !0
-      }]
-    }, M.value, {
-      onClick: A(b, ["self"]),
-      onClose: b
-    }), {
-      default: N(() => [
-        S("span", g({
-          ref_key: "bubblearrow",
-          ref: m,
-          class: "bb-common-popover-2__arrow"
-        }, B.value), null, 16),
-        h(_) ? (w(), U("span", Z, [
-          X(o.$slots, "default")
-        ])) : I("", !0)
+    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("span", {
+      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("span", ee, [
+        A(C(x(h)("colorInput.mainCanvasDesc")) + " ", 1),
+        o.value ? (_(), S("span", te, C(x(h)("colorInput.mainCanvasSelectedColor", o.value)), 1)) : E("", !0)
       ]),
-      _: 3
-    }, 16, ["class"]));
+      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("span", 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 {
-  se as default
+  ce as default
 };

package/dist/index244.js

@@ -1,20 +1,123 @@
-import { isNil as c } from "./index225.js";
-const a = (t, r) => {
-  if (!Object.prototype.hasOwnProperty.call(t, r))
-    throw new Error(
-      `Object ${JSON.stringify(t, null, 2)} has no property named "${r.toString()}"`
-    );
-}, l = (t) => typeof t == "string" ? t.toLocaleLowerCase() : JSON.stringify(t).toLowerCase(), y = (t, r, s) => {
-  const i = s.toLocaleLowerCase();
-  for (let e = 0; e < r.length; e++) {
-    const n = r[e];
-    a(t, n);
-    const o = t[n];
-    if (c(o)) continue;
-    if (l(o).includes(i)) return !0;
+import { defineComponent as $, mergeModels as D, useModel as E, ref as p, computed as i, watch as V, onMounted as L, createBlock as T, openBlock as w, resolveDynamicComponent as F, mergeProps as g, unref as h, withModifiers as A, withCtx as N, createElementVNode as S, createElementBlock as U, createCommentVNode as I, renderSlot as X, nextTick as j } from "vue";
+import { useCancelableFunction as q } from "./index335.js";
+import { useUntil as z } from "./index250.js";
+import { extractDomContainer as G } from "./index272.js";
+import { waitFor as H } from "./index336.js";
+import { useFloating as J, arrow as K } from "./index337.js";
+import { flip as O, offset as Q, shift as R, hide as W, autoUpdate as Y } from "./index338.js";
+const Z = {
+  key: 0,
+  class: "bb-common-popover-2__bubble"
+}, se = /* @__PURE__ */ $({
+  __name: "CommonPopover2",
+  props: /* @__PURE__ */ D({
+    arrowPadding: {},
+    eager: { type: Boolean },
+    offset: {},
+    padding: { default: 0 },
+    placement: {},
+    transitionDuration: { default: 250 },
+    anchor: {},
+    dialog: { type: Boolean },
+    tag: { default: "span" },
+    flip: { type: Boolean, default: !0 }
+  }, {
+    modelValue: { type: Boolean, default: !1 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(c) {
+    const e = c, a = E(c, "modelValue"), u = p(a.value), x = i(() => e.dialog ? "dialog" : "span"), t = p(), m = p(), y = i(() => G(e.anchor)), _ = z(a, { initialValue: e.eager }), { floatingStyles: C, placement: P, middlewareData: d, update: f } = J(
+      y,
+      t,
+      {
+        placement: e.placement,
+        whileElementsMounted: Y,
+        middleware: [
+          ...e.flip ? [O()] : [],
+          Q(e.offset),
+          R({ padding: e.padding }),
+          W(),
+          K({
+            element: m,
+            padding: e.arrowPadding
+          })
+        ],
+        strategy: "fixed"
+      }
+    ), { execute: v } = q(
+      ({ signal: o }, r) => new Promise((l) => {
+        let s;
+        const n = () => {
+          s && clearTimeout(s);
+        };
+        o.addEventListener("abort", n), r ? (k(), f(), H(() => !!t.value).then(() => {
+          u.value = !0, o.removeEventListener("abort", n), l(void 0);
+        })) : (u.value = !1, s = setTimeout(() => {
+          j(() => {
+            t.value && (e.dialog ? t.value.close() : t.value.hidePopover()), o.removeEventListener("abort", n), f(), l(void 0);
+          });
+        }, e.transitionDuration));
+      })
+    ), k = () => {
+      if (!t.value) return;
+      if (!e.dialog) return t.value.showPopover();
+      t.value.showModal();
+    };
+    V(a, v), L(() => {
+      a.value && v(a.value);
+    });
+    const M = i(() => {
+      var n;
+      const o = a.value ? void 0 : -1, r = Math.round(((n = d.value.arrow) == null ? void 0 : n.x) ?? 0), l = e.dialog ? void 0 : "manual";
+      return {
+        style: {
+          ...C.value,
+          "--transition-duration": `${e.transitionDuration}ms`,
+          "--page-padding": `${e.padding}px`,
+          "--arrow-offset-x": `${r}px`
+        },
+        popover: l,
+        tabindex: o
+      };
+    }), B = i(() => {
+      if (d.value.arrow) {
+        const { x: o, y: r } = d.value.arrow;
+        return {
+          style: {
+            left: `${o}px`,
+            top: `${r}px`
+          }
+        };
+      }
+    }), b = () => {
+      a.value = !1;
+    };
+    return (o, r) => (w(), T(F(x.value), g({
+      ref_key: "wrapper",
+      ref: t,
+      class: ["bb-common-popover-2", {
+        "bb-common-popover-2--open": u.value,
+        [`bb-common-popover-2--${h(P)}`]: !0
+      }]
+    }, M.value, {
+      onClick: A(b, ["self"]),
+      onClose: b
+    }), {
+      default: N(() => [
+        S("span", g({
+          ref_key: "bubblearrow",
+          ref: m,
+          class: "bb-common-popover-2__arrow"
+        }, B.value), null, 16),
+        h(_) ? (w(), U("span", Z, [
+          X(o.$slots, "default")
+        ])) : I("", !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
   }
-  return !1;
-};
+});
 export {
-  y as matchAnyKey
+  se as default
 };