hys-ui 0.1.1 → 0.3.0

package/dist/composables/useColorPicker.js

@@ -0,0 +1,402 @@
+import { useAttrs as Re, inject as N, ref as A, useId as se, shallowRef as Ve, computed as b, watch as O, onMounted as He, onActivated as Oe, onDeactivated as Se, onBeforeUnmount as Ke, nextTick as J } from "vue";
+import { fieldKey as Me, formKey as Fe, useHysControlState as ze } from "./formContext.js";
+import { useChoiceModel as Ge, useChoiceNativeReset as Ue } from "./choiceModel.js";
+import { useFloating as We } from "./useFloating.js";
+import { overlayOwnerKey as je } from "./overlayManager.js";
+import { formatColor as pe, colorCss as fe, parseColor as T, sameColor as Be, colorClamp as S } from "./color.js";
+function _e(t, s) {
+  const ce = Re(), i = N(Me, void 0), k = N(Fe, void 0), G = N(je, void 0), E = ze(t), U = A(), W = A(), Q = A(), D = A(), u = A(!0), h = A(""), d = A({ h: 0, s: 0, v: 0, a: 1 }), y = A(!1), q = A(!1), ve = se(), de = se();
+  let C = 0, he = t.defaultValue ?? "", P = 0, K, j = 0, p = 0;
+  const f = Ve(), R = Ge(
+    t,
+    () => he,
+    Object.is,
+    () => {
+      C++, m(!1), v();
+    }
+  ), c = b(() => R.current.value ?? ""), g = b(() => E.disabled.value || !!t.readonly), Z = b(() => t.format ?? (t.showAlpha ? "rgb" : "hex")), L = b(
+    () => y.value ? pe(d.value, Z.value, !!t.showAlpha) : ""
+  ), me = b(() => fe(d.value)), V = b(
+    () => !!T(h.value) || !h.value.trim() && (!c.value || !!t.clearable)
+  ), M = b(
+    () => !Be(
+      y.value ? d.value : void 0,
+      T(c.value)
+    )
+  ), ye = b(
+    () => {
+      var e, a;
+      return t.error || !V.value || (e = i == null ? void 0 : i.invalid) != null && e.value ? "error" : t.status ?? ((a = i == null ? void 0 : i.status) == null ? void 0 : a.value);
+    }
+  ), r = We(W, D, {
+    get placement() {
+      return t.placement ?? "bottom-start";
+    },
+    get strategy() {
+      return t.appendTo === !1 || _.value !== document.body ? "absolute" : "fixed";
+    },
+    width: () => t.popupWidth ?? 288,
+    closeOnTab: !0,
+    requestOpen(e, a) {
+      return !e && a && f.value ? (m(!0), !1) : (s("update:open", e), t.open === void 0);
+    }
+  }), we = b(
+    () => u.value && (t.inline || r.open.value)
+  ), _ = b(() => {
+    const e = t.appendTo;
+    if (e === !1 || !e) return document.body;
+    if (e instanceof HTMLElement) return e;
+    try {
+      return document.querySelector(e) ?? document.body;
+    } catch {
+      return document.body;
+    }
+  }), be = [
+    "#3867f5",
+    "#8955ea",
+    "#ec4899",
+    "#ef4444",
+    "#f59e0b",
+    "#22a06b",
+    "#06b6d4",
+    "#172a4d",
+    "#ffffff",
+    "#000000"
+  ], ge = b(
+    () => (t.presets ?? be).flatMap((e, a) => {
+      const l = T(e);
+      return l ? [
+        {
+          value: e,
+          color: fe(l),
+          parsed: l,
+          key: a + ":" + e
+        }
+      ] : [];
+    })
+  );
+  function v() {
+    const e = T(c.value);
+    y.value = !!e, e && (d.value = { ...e }), h.value = c.value;
+  }
+  v();
+  function B(e) {
+    var a;
+    e === "change" && (k != null && k.model.value) && !p || t.validateEvent !== !1 && !(k != null && k.resetting.value) && ((a = i == null ? void 0 : i.validate) == null || a.call(i, e));
+  }
+  async function x(e = !1) {
+    if (!u.value || g.value) return !1;
+    const a = L.value, l = ++j, n = C;
+    if (!a && !t.clearable && c.value) return !1;
+    if (a === c.value)
+      return e && B("change"), !0;
+    f.value && (f.value.lastRequest = a);
+    const o = await R.commit(
+      a,
+      (w) => s("update:modelValue", w),
+      (w) => s("change", w)
+    );
+    return !u.value || l !== j || n !== C ? !1 : !o && !f.value ? (v(), !1) : (o && e && B("change"), o);
+  }
+  async function X(e) {
+    if (!u.value || g.value) return !1;
+    const a = T(e);
+    return a ? (d.value = { ...a }, y.value = !0, h.value = L.value, s("activeChange", L.value), t.immediate === !1 ? !0 : x(!0)) : !e.trim() && t.clearable ? F() : (s("invalid", e), !1);
+  }
+  async function Ce() {
+    if (!u.value || g.value) return !1;
+    const e = h.value.trim();
+    return e ? X(e) : t.clearable ? F() : (v(), !1);
+  }
+  function $(e, a = !1) {
+    !u.value || g.value || (d.value = e, y.value = !0, h.value = L.value, s("activeChange", L.value), t.immediate !== !1 && x(a));
+  }
+  async function ee() {
+    if (!u.value || g.value || !V.value)
+      return V.value || s("invalid", h.value), !1;
+    const e = T(h.value);
+    e ? (d.value = { ...e }, y.value = !0) : y.value = !1;
+    const a = await x(!0);
+    return a && (s("confirm", c.value), await z(!1)), a;
+  }
+  async function F() {
+    if (!u.value || g.value || !t.clearable) return !1;
+    C++, m(!1), y.value = !1, h.value = "";
+    const e = await x(!0);
+    return e && s("clear"), e;
+  }
+  function ae() {
+    u.value && (C++, m(!1), v(), s("cancel"), z(!1));
+  }
+  async function Y() {
+    var e, a;
+    return !u.value || E.disabled.value || (G == null ? void 0 : G.value) === !1 ? !1 : t.inline ? !0 : (await r.show(), await J(), r.open.value ? ((a = (e = D.value) == null ? void 0 : e.querySelector("[role=slider]")) == null || a.focus({ preventScroll: !0 }), !0) : !1);
+  }
+  async function z(e = !0) {
+    return t.inline ? !1 : (r.close(e), await J(), !r.open.value);
+  }
+  function te(e) {
+    var a;
+    if (u.value && !E.disabled.value) {
+      const l = t.inline ? (a = D.value) == null ? void 0 : a.querySelector('[role="slider"]') : Q.value ?? W.value;
+      l == null || l.focus(e);
+    }
+  }
+  function ke() {
+    const e = document.activeElement;
+    le(e) && (e == null || e.blur());
+  }
+  function le(e) {
+    var a, l;
+    return !!e && (!!((a = U.value) != null && a.contains(e)) || !!((l = D.value) != null && l.contains(e)));
+  }
+  function Ae(e) {
+    q.value || (q.value = !0, s("focus", e));
+  }
+  function Ee(e) {
+    J(() => {
+      !u.value || le(document.activeElement) || q.value && (q.value = !1, s("blur", e), B("blur"));
+    });
+  }
+  function ue(e, a) {
+    const l = f.value;
+    if (!l || g.value || !u.value) return;
+    const n = S((e - l.rect.left) / l.rect.width), o = { ...d.value };
+    l.kind === "palette" ? (o.s = n, o.v = 1 - S((a - l.rect.top) / l.rect.height)) : l.kind === "hue" ? o.h = n * 359 : o.a = n, !(["h", "s", "v", "a"].every(
+      (w) => Math.abs(
+        o[w] - d.value[w]
+      ) < 1e-7
+    ) && y.value) && $(o);
+  }
+  function ne() {
+    P && cancelAnimationFrame(P), P = 0;
+    const e = K;
+    K = void 0, e && ue(e.x, e.y);
+  }
+  function I() {
+    m(!1), v();
+  }
+  function Pe() {
+    document.addEventListener("keydown", re, !0), window.addEventListener("resize", I), window.addEventListener("scroll", I, !0), window.addEventListener("blur", I);
+  }
+  function ie() {
+    document.removeEventListener("keydown", re, !0), window.removeEventListener("resize", I), window.removeEventListener("scroll", I, !0), window.removeEventListener("blur", I);
+  }
+  function re(e) {
+    e.key === "Escape" && f.value && (e.preventDefault(), e.stopPropagation(), m(!0));
+  }
+  function Le(e, a) {
+    var H;
+    if (!u.value || g.value || e.button !== 0 || e.isPrimary === !1)
+      return;
+    const l = e.currentTarget, n = l.getBoundingClientRect();
+    if (!n.width || !n.height) return;
+    e.preventDefault(), m(!1), l.focus({ preventScroll: !0 });
+    const o = (H = i == null ? void 0 : i.deferChangeValidation) == null ? void 0 : H.call(i);
+    let w = !1;
+    o && p++, f.value = {
+      node: l,
+      id: e.pointerId,
+      kind: a,
+      rect: n,
+      value: c.value,
+      color: { ...d.value },
+      hasColor: y.value,
+      lastRequest: c.value,
+      releaseValidation() {
+        !w && o && (p--, o()), w = !0;
+      }
+    };
+    try {
+      l.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    Pe(), ue(e.clientX, e.clientY);
+  }
+  function qe(e) {
+    !f.value || f.value.id !== e.pointerId || (K = { x: e.clientX, y: e.clientY }, P || (P = requestAnimationFrame(ne)));
+  }
+  async function xe(e) {
+    const a = f.value;
+    if (!(!a || a.id !== e.pointerId)) {
+      ne(), f.value = void 0, ie();
+      try {
+        a.node.hasPointerCapture(a.id) && a.node.releasePointerCapture(a.id);
+      } catch {
+      }
+      try {
+        t.immediate !== !1 && await x(!0);
+      } finally {
+        a.releaseValidation();
+      }
+    }
+  }
+  async function m(e) {
+    const a = f.value;
+    if (P && cancelAnimationFrame(P), P = 0, K = void 0, f.value = void 0, ie(), !!a) {
+      try {
+        a.node.hasPointerCapture(a.id) && a.node.releasePointerCapture(a.id);
+      } catch {
+      }
+      try {
+        e && u.value && !g.value && (d.value = { ...a.color }, y.value = a.hasColor, h.value = a.value, s("activeChange", L.value), t.immediate !== !1 && (c.value === a.lastRequest || c.value === a.value) && !await R.commit(
+          a.value,
+          (n) => s("update:modelValue", n),
+          (n) => s("change", n)
+        ) && c.value !== a.value && v());
+      } finally {
+        a.releaseValidation();
+      }
+    }
+  }
+  function Ie(e) {
+    var a;
+    ((a = f.value) == null ? void 0 : a.id) === e.pointerId && m(!0);
+  }
+  function Te(e, a) {
+    if (g.value || !u.value || e.isComposing || ![
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+      "Home",
+      "End",
+      "PageUp",
+      "PageDown"
+    ].includes(e.key))
+      return;
+    e.preventDefault();
+    const l = { ...d.value }, n = e.shiftKey || e.key.startsWith("Page") ? 10 : 1, o = ["ArrowLeft", "ArrowDown", "PageDown"].includes(e.key);
+    if (a === "palette")
+      e.key === "Home" ? l.s = 0 : e.key === "End" ? l.s = 1 : ["ArrowLeft", "ArrowRight"].includes(e.key) ? l.s = S(
+        l.s + (e.key === "ArrowLeft" ? -n : n) / 100
+      ) : l.v = S(l.v + (o ? -n : n) / 100);
+    else {
+      const w = a === "hue" ? "h" : "a", H = a === "hue" ? 359 : 1;
+      l[w] = e.key === "Home" ? 0 : e.key === "End" ? H : S(
+        l[w] + (o ? -n : n) * (a === "hue" ? 1 : 0.01),
+        0,
+        H
+      );
+    }
+    $(l, !0);
+  }
+  O(
+    () => t.open,
+    async (e) => {
+      !u.value || t.inline || (e && !E.disabled.value ? await r.show(!0) : e === !1 && r.close(!1, !0));
+    },
+    { flush: "post" }
+  ), O(r.open, (e) => {
+    e ? (t.immediate !== !1 || !M.value && h.value === c.value) && v() : (C++, m(!1), v()), s("visibleChange", e);
+  }), O(
+    c,
+    () => {
+      !f.value && !M.value && v();
+    },
+    { flush: "post" }
+  ), O(
+    () => [
+      E.disabled.value,
+      t.readonly,
+      t.inline,
+      t.appendTo,
+      t.showAlpha,
+      t.format,
+      t.immediate,
+      t.placement,
+      t.popupWidth
+    ],
+    () => {
+      C++, m(!1), v(), E.disabled.value && r.close(!1, !0), t.inline ? r.close(!1, !0) : r.open.value && r.schedule();
+    },
+    { flush: "sync" }
+  ), Ue(
+    U,
+    () => {
+      C++, m(!1), R.reset(), v(), r.close(!1, !0);
+    },
+    void 0,
+    () => t.form
+  ), O(
+    () => k == null ? void 0 : k.resetting.value,
+    (e) => {
+      e && (C++, m(!1), R.reset(), v(), r.close(!1, !0));
+    },
+    { flush: "sync" }
+  );
+  function oe() {
+    u.value = !1, C++, j++, m(!1), r.close(!1, !0), q.value = !1;
+  }
+  He(() => {
+    t.autofocus && te(), t.inline || (t.open ? r.show(!0) : t.defaultOpen && t.open === void 0 && Y());
+  }), Oe(() => {
+    u.value = !0, v();
+  }), Se(oe), Ke(oe);
+  const De = b(() => ({
+    value: c.value,
+    draft: h.value,
+    color: { ...d.value },
+    disabled: E.disabled.value,
+    readonly: !!t.readonly,
+    valid: V.value,
+    dirty: M.value,
+    setColor: X,
+    confirm: ee,
+    cancel: ae,
+    clear: F,
+    show: Y,
+    hide: z
+  }));
+  return {
+    attrs: ce,
+    field: i,
+    control: E,
+    element: U,
+    trigger: W,
+    input: Q,
+    panel: D,
+    live: u,
+    draft: h,
+    working: d,
+    hasColor: y,
+    focused: q,
+    errorId: ve,
+    panelId: de,
+    value: c,
+    locked: g,
+    format: Z,
+    serialized: L,
+    css: me,
+    valid: V,
+    dirty: M,
+    status: ye,
+    floating: r,
+    open: we,
+    teleportTo: _,
+    presets: ge,
+    context: De,
+    gesture: f,
+    sync: v,
+    publish: x,
+    setColor: X,
+    commitText: Ce,
+    confirm: ee,
+    clear: F,
+    cancel: ae,
+    show: Y,
+    hide: z,
+    focus: te,
+    blur: ke,
+    focusIn: Ae,
+    focusOut: Ee,
+    start: Le,
+    move: qe,
+    end: xe,
+    pointerCancel: Ie,
+    keyboard: Te
+  };
+}
+export {
+  _e as useColorPicker
+};