@pantograph/vue 0.9.0 → 0.10.0

package/dist/ColorPicker.vue_vue_type_style_index_0_lang-CROQzfNe.js

@@ -0,0 +1,944 @@
+import { onUnmounted as Xe, defineComponent as fe, useSlots as Je, computed as S, useAttrs as Qe, shallowRef as Ze, ref as J, createBlock as W, openBlock as x, unref as p, normalizeClass as R, withCtx as ge, createElementBlock as $, createCommentVNode as F, withDirectives as je, renderSlot as te, createTextVNode as ve, toDisplayString as pe, createElementVNode as N, mergeProps as en, isRef as nn, vModelDynamic as tn, Fragment as Ne, createVNode as ie, onMounted as $e, onBeforeUnmount as rn, watch as sn, reactive as on, renderList as an } from "vue";
+import { _ as ln } from "./ActionButton.vue_vue_type_script_setup_true_lang-ClxZJxTh.js";
+import { useVModel as ue } from "@vueuse/core";
+import { P as un } from "./Primitive-nOVjbfuc.js";
+import { g as De, a as re, b as _, c as he } from "./class-DziTeW9B.js";
+import { cva as cn } from "class-variance-authority";
+import { h as fn, b as dn, p as mn } from "./pick-BHVX8oMF.js";
+import { r as gn, U as be, s as ye, m as we, k as Ae, u as Q, l as vn, i as pn, v as hn, w as Ve, t as Fe, a as bn, x as yn, y as wn, z as An } from "./omit-BHZMfUBv.js";
+import { S as Cn, c as Tn, s as En, g as Pn } from "./get-CdoyK4GU.js";
+import { S as Ce, i as Te } from "./isObjectLike-BatpeCIi.js";
+import { i as ce } from "./isArray-WzO_os3q.js";
+import { _ as He } from "./Icon.vue_vue_type_style_index_0_lang-BfPcw6PU.js";
+import { _ as xn } from "./Divider.vue_vue_type_style_index_0_lang-B_4XMyuu.js";
+import { createContext as Rn } from "radix-vue";
+function K(e, n, r) {
+  return Math.max(n, Math.min(e, r));
+}
+function Sn(e, n) {
+  if (typeof e == "string" || typeof n == "string")
+    return e === n;
+  if (e) {
+    if (!n) return !1;
+    for (const r in e)
+      if (e[r] !== n[r])
+        return !1;
+  }
+  return !0;
+}
+function k(e) {
+  const n = [], r = e.length > 5 ? 2 : 1;
+  for (let t = 1; t < e.length; t += r) {
+    const o = e.substring(t, t + r).repeat(r % 2 + 1), s = parseInt(o, 16);
+    n.push(t === 3 * r + 1 ? s / 255 : s);
+  }
+  return n.length === 3 && n.push(1), {
+    r: n[0],
+    g: n[1],
+    b: n[2],
+    a: n[3]
+  };
+}
+function Be(e) {
+  const n = e.l / 100, r = n + e.s / 100 * Math.min(n, 1 - n), t = r === 0 ? 0 : 200 * (1 - n / r);
+  return {
+    h: e.h,
+    s: t,
+    v: r * 100,
+    a: e.a
+  };
+}
+function Z(e) {
+  let n = e.h % 360;
+  n < 0 && (n += 360);
+  const r = e.s / 100, t = e.l / 100;
+  return {
+    r: se(0, n, r, t) * 255,
+    g: se(8, n, r, t) * 255,
+    b: se(4, n, r, t) * 255,
+    a: e.a
+  };
+}
+function se(e, n, r, t) {
+  const o = (e + n / 30) % 12, s = r * Math.min(t, 1 - t);
+  return t - s * Math.max(-1, Math.min(o - 3, 9 - o, 1));
+}
+function Ue(e) {
+  const n = e.s / 100, r = e.v / 100, t = r * (1 - n / 2);
+  return {
+    h: e.h,
+    s: t === 0 || t === 1 ? 0 : (r - t) / Math.min(t, 1 - t) * 100,
+    l: t * 100,
+    a: e.a
+  };
+}
+function ze(e) {
+  return {
+    h: e.h,
+    w: e.v * (100 - e.s) / 100,
+    b: 100 - e.v,
+    a: e.a
+  };
+}
+function z(e) {
+  return Z(Ue(e));
+}
+function V(e) {
+  const n = e.w / 100, r = e.b / 100;
+  let t, o;
+  const s = n + r;
+  return s >= 1 ? (t = 0, o = n / s) : (o = 1 - r, t = (1 - n / o) * 100), {
+    h: e.h,
+    s: t,
+    v: o * 100,
+    a: e.a
+  };
+}
+function j(e) {
+  const { r: n, g: r, b: t, a: o } = e, s = Math.min(n, r, t), a = Math.max(n, r, t), l = a - s, f = (a + s) / 2;
+  let i = 0;
+  l !== 0 && (a === n ? i = (r - t) / l + (r < t ? 6 : 0) : a === r ? i = (t - n) / l + 2 : a === t && (i = (n - r) / l + 4), i *= 60);
+  let b = 0;
+  return f !== 0 && f !== 255 && (b = (a - f) / Math.min(f, 255 - f)), {
+    h: i,
+    s: b * 100,
+    l: f / 255 * 100,
+    a: o
+  };
+}
+function q(e) {
+  return "#" + Object.values(e).map(
+    (n, r) => Math.round(r === 3 ? n * 255 : n).toString(16).padStart(2, "0")
+  ).join("");
+}
+function G(e) {
+  return ze(Be(j(e)));
+}
+const _n = {
+  hex: {
+    hex: (e) => e,
+    hsl: (e) => j(k(e)),
+    hsv: (e) => V(G(k(e))),
+    hwb: (e) => G(k(e)),
+    rgb: k
+  },
+  hsl: {
+    hex: (e) => q(Z(e)),
+    hsl: (e) => e,
+    hsv: Be,
+    hwb: (e) => G(Z(e)),
+    rgb: Z
+  },
+  hsv: {
+    hex: (e) => q(z(e)),
+    hsl: Ue,
+    hsv: (e) => e,
+    hwb: ze,
+    rgb: z
+  },
+  hwb: {
+    hex: (e) => q(z(V(e))),
+    hsl: (e) => j(z(V(e))),
+    hsv: V,
+    hwb: (e) => e,
+    rgb: (e) => z(V(e))
+  },
+  rgb: {
+    hex: q,
+    hsl: j,
+    hsv: (e) => V(G(e)),
+    hwb: G,
+    rgb: (e) => e
+  }
+};
+function Ee(e, n, r) {
+  return _n[e][n](r);
+}
+function Ln(e, n) {
+  const r = e.toFixed(n);
+  return r.includes(".") ? r.replace(/\.?0+$/, "") : r;
+}
+const Mn = {
+  deg: 1,
+  grad: 0.9,
+  rad: 180 / Math.PI,
+  turn: 360
+}, ee = {
+  from(e) {
+    return e.endsWith("%") ? H.from(e, { referenceValue: 1 }) : M.from(e, { min: 0, max: 1 });
+  },
+  to(e) {
+    return M.to(e);
+  }
+}, Pe = {
+  from(e) {
+    const n = e.match(/deg|g?rad|turn$/);
+    if (n === null)
+      return M.from(e);
+    const r = n[0];
+    return M.from(e.slice(0, -r.length)) * Mn[r];
+  },
+  to(e) {
+    return M.to(e);
+  }
+}, M = {
+  from(e, { min: n = Number.NEGATIVE_INFINITY, max: r = Number.POSITIVE_INFINITY } = {}) {
+    return e.endsWith(".") ? NaN : K(Number(e), n, r);
+  },
+  to(e) {
+    return Ln(e, 2);
+  }
+}, H = {
+  from(e, { referenceValue: n = 100, min: r = 0, max: t = 100 } = {}) {
+    return e.endsWith("%") ? M.from(e.slice(0, -1), { min: r, max: t }) * n / 100 : NaN;
+  },
+  to(e) {
+    return M.to(e) + "%";
+  }
+}, oe = {
+  from(e) {
+    return e.endsWith("%") ? H.from(e, { referenceValue: 255 }) : M.from(e, { min: 0, max: 255 });
+  },
+  to(e) {
+    return M.to(e);
+  }
+}, On = {
+  hsl: {
+    h: Pe,
+    s: H,
+    l: H
+  },
+  hwb: {
+    h: Pe,
+    w: H,
+    b: H
+  },
+  rgb: {
+    r: oe,
+    g: oe,
+    b: oe
+  }
+};
+function ne(e, n) {
+  return On[e][n];
+}
+function ae({ format: e, color: n }, r) {
+  if (e === "hex")
+    return r && [5, 9].includes(n.length) ? n.substring(0, n.length - (n.length - 1) / 4) : n;
+  const t = Object.entries(n).slice(0, r ? 3 : 4).map(([o, s]) => {
+    const a = o === "a" ? ee : ne(e, o);
+    return (o === "a" ? "/ " : "") + a.to(s);
+  });
+  return `${e}(${t.join(" ")})`;
+}
+function Ge(e) {
+  return /^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e);
+}
+function In(e) {
+  return "r" in e ? "rgb" : "w" in e ? "hwb" : "v" in e ? "hsv" : "s" in e ? "hsl" : null;
+}
+const xe = {
+  hsl: ["h", "s", "l", "a"],
+  hwb: ["h", "w", "b", "a"],
+  rgb: ["r", "g", "b", "a"]
+};
+function Re(e) {
+  if (!e) return null;
+  if (typeof e != "string") {
+    const l = In(e);
+    return l === null ? null : { format: l, color: e };
+  }
+  if (e.startsWith("#"))
+    return Ge(e) ? { format: "hex", color: e } : null;
+  if (!e.includes("(")) {
+    const l = document.createElement("canvas").getContext("2d");
+    l.fillStyle = e;
+    const f = l.fillStyle;
+    return f === "#000000" && e !== "black" ? null : { format: "hex", color: f };
+  }
+  const [n, r] = e.split("("), t = n.substring(0, 3);
+  if (!(t in xe))
+    return null;
+  const o = r.replace(/[,/)]/g, " ").replace(/\s+/g, " ").trim().split(" ");
+  o.length === 3 && o.push("1");
+  const s = xe[t], a = Object.fromEntries(
+    s.map((l, f) => {
+      const i = l === "a" ? ee : ne(t, l);
+      return [l, i.from(o[f])];
+    })
+  );
+  return { format: t, color: a };
+}
+const Nn = typeof window < "u", We = Nn && "EyeDropper" in window, $n = (e) => {
+  const n = new AbortController();
+  Xe(() => n.abort());
+  async function r() {
+    if (!We) return;
+    const t = new window.EyeDropper();
+    try {
+      let s = (await t.open({ signal: n.signal })).sRGBHex;
+      if (s.startsWith("rgba")) {
+        const a = s.match(/rgba?\((?<r>\d+), (?<g>\d+), (?<b>\d+), (?<a>[\d.]+)\)/);
+        if (a) {
+          const [l, f, i, b, u] = a;
+          s = `rgba(${f}, ${i}, ${b}, ${parseFloat(u) === 0 ? "1" : u})`;
+        }
+      }
+      e(s);
+    } catch (o) {
+      console.log("e ===>", o);
+    }
+  }
+  return {
+    openEyeDropper: r,
+    abortController: n
+  };
+};
+function Dn(e) {
+  return e === void 0;
+}
+function Vn(e, n) {
+  for (var r = -1, t = e == null ? 0 : e.length; ++r < t; )
+    if (n(e[r], r, e))
+      return !0;
+  return !1;
+}
+var Fn = 1, Hn = 2;
+function Ke(e, n, r, t, o, s) {
+  var a = r & Fn, l = e.length, f = n.length;
+  if (l != f && !(a && f > l))
+    return !1;
+  var i = s.get(e), b = s.get(n);
+  if (i && b)
+    return i == n && b == e;
+  var u = -1, h = !0, C = r & Hn ? new Cn() : void 0;
+  for (s.set(e, n), s.set(n, e); ++u < l; ) {
+    var y = e[u], d = n[u];
+    if (t)
+      var w = a ? t(d, y, u, n, e, s) : t(y, d, u, e, n, s);
+    if (w !== void 0) {
+      if (w)
+        continue;
+      h = !1;
+      break;
+    }
+    if (C) {
+      if (!Vn(n, function(E, T) {
+        if (!Tn(C, T) && (y === E || o(y, E, r, t, s)))
+          return C.push(T);
+      })) {
+        h = !1;
+        break;
+      }
+    } else if (!(y === d || o(y, d, r, t, s))) {
+      h = !1;
+      break;
+    }
+  }
+  return s.delete(e), s.delete(n), h;
+}
+function Bn(e) {
+  var n = -1, r = Array(e.size);
+  return e.forEach(function(t, o) {
+    r[++n] = [o, t];
+  }), r;
+}
+var Un = 1, zn = 2, Gn = "[object Boolean]", Wn = "[object Date]", Kn = "[object Error]", Yn = "[object Map]", kn = "[object Number]", qn = "[object RegExp]", Xn = "[object Set]", Jn = "[object String]", Qn = "[object Symbol]", Zn = "[object ArrayBuffer]", jn = "[object DataView]", Se = Ce ? Ce.prototype : void 0, le = Se ? Se.valueOf : void 0;
+function et(e, n, r, t, o, s, a) {
+  switch (r) {
+    case jn:
+      if (e.byteLength != n.byteLength || e.byteOffset != n.byteOffset)
+        return !1;
+      e = e.buffer, n = n.buffer;
+    case Zn:
+      return !(e.byteLength != n.byteLength || !s(new be(e), new be(n)));
+    case Gn:
+    case Wn:
+    case kn:
+      return gn(+e, +n);
+    case Kn:
+      return e.name == n.name && e.message == n.message;
+    case qn:
+    case Jn:
+      return e == n + "";
+    case Yn:
+      var l = Bn;
+    case Xn:
+      var f = t & Un;
+      if (l || (l = En), e.size != n.size && !f)
+        return !1;
+      var i = a.get(e);
+      if (i)
+        return i == n;
+      t |= zn, a.set(e, n);
+      var b = Ke(l(e), l(n), t, o, s, a);
+      return a.delete(e), b;
+    case Qn:
+      if (le)
+        return le.call(e) == le.call(n);
+  }
+  return !1;
+}
+var nt = 1, tt = Object.prototype, rt = tt.hasOwnProperty;
+function st(e, n, r, t, o, s) {
+  var a = r & nt, l = ye(e), f = l.length, i = ye(n), b = i.length;
+  if (f != b && !a)
+    return !1;
+  for (var u = f; u--; ) {
+    var h = l[u];
+    if (!(a ? h in n : rt.call(n, h)))
+      return !1;
+  }
+  var C = s.get(e), y = s.get(n);
+  if (C && y)
+    return C == n && y == e;
+  var d = !0;
+  s.set(e, n), s.set(n, e);
+  for (var w = a; ++u < f; ) {
+    h = l[u];
+    var E = e[h], T = n[h];
+    if (t)
+      var D = a ? t(T, E, h, n, e, s) : t(E, T, h, e, n, s);
+    if (!(D === void 0 ? E === T || o(E, T, r, t, s) : D)) {
+      d = !1;
+      break;
+    }
+    w || (w = h == "constructor");
+  }
+  if (d && !w) {
+    var O = e.constructor, I = n.constructor;
+    O != I && "constructor" in e && "constructor" in n && !(typeof O == "function" && O instanceof O && typeof I == "function" && I instanceof I) && (d = !1);
+  }
+  return s.delete(e), s.delete(n), d;
+}
+var ot = 1, _e = "[object Arguments]", Le = "[object Array]", X = "[object Object]", at = Object.prototype, Me = at.hasOwnProperty;
+function lt(e, n, r, t, o, s) {
+  var a = ce(e), l = ce(n), f = a ? Le : we(e), i = l ? Le : we(n);
+  f = f == _e ? X : f, i = i == _e ? X : i;
+  var b = f == X, u = i == X, h = f == i;
+  if (h && Ae(e)) {
+    if (!Ae(n))
+      return !1;
+    a = !0, b = !1;
+  }
+  if (h && !b)
+    return s || (s = new Q()), a || vn(e) ? Ke(e, n, r, t, o, s) : et(e, n, f, r, t, o, s);
+  if (!(r & ot)) {
+    var C = b && Me.call(e, "__wrapped__"), y = u && Me.call(n, "__wrapped__");
+    if (C || y) {
+      var d = C ? e.value() : e, w = y ? n.value() : n;
+      return s || (s = new Q()), o(d, w, r, t, s);
+    }
+  }
+  return h ? (s || (s = new Q()), st(e, n, r, t, o, s)) : !1;
+}
+function de(e, n, r, t, o) {
+  return e === n ? !0 : e == null || n == null || !Te(e) && !Te(n) ? e !== e && n !== n : lt(e, n, r, t, de, o);
+}
+var it = 1, ut = 2;
+function ct(e, n, r, t) {
+  var o = r.length, s = o;
+  if (e == null)
+    return !s;
+  for (e = Object(e); o--; ) {
+    var a = r[o];
+    if (a[2] ? a[1] !== e[a[0]] : !(a[0] in e))
+      return !1;
+  }
+  for (; ++o < s; ) {
+    a = r[o];
+    var l = a[0], f = e[l], i = a[1];
+    if (a[2]) {
+      if (f === void 0 && !(l in e))
+        return !1;
+    } else {
+      var b = new Q(), u;
+      if (!(u === void 0 ? de(i, f, it | ut, t, b) : u))
+        return !1;
+    }
+  }
+  return !0;
+}
+function Ye(e) {
+  return e === e && !pn(e);
+}
+function ft(e) {
+  for (var n = hn(e), r = n.length; r--; ) {
+    var t = n[r], o = e[t];
+    n[r] = [t, o, Ye(o)];
+  }
+  return n;
+}
+function ke(e, n) {
+  return function(r) {
+    return r == null ? !1 : r[e] === n && (n !== void 0 || e in Object(r));
+  };
+}
+function dt(e) {
+  var n = ft(e);
+  return n.length == 1 && n[0][2] ? ke(n[0][0], n[0][1]) : function(r) {
+    return r === e || ct(r, e, n);
+  };
+}
+var mt = 1, gt = 2;
+function vt(e, n) {
+  return Ve(e) && Ye(n) ? ke(Fe(e), n) : function(r) {
+    var t = Pn(r, e);
+    return t === void 0 && t === n ? fn(r, e) : de(n, t, mt | gt);
+  };
+}
+function pt(e) {
+  return function(n) {
+    return n == null ? void 0 : n[e];
+  };
+}
+function ht(e) {
+  return function(n) {
+    return bn(n, e);
+  };
+}
+function bt(e) {
+  return Ve(e) ? pt(Fe(e)) : ht(e);
+}
+function qe(e) {
+  return typeof e == "function" ? e : e == null ? yn : typeof e == "object" ? ce(e) ? vt(e[0], e[1]) : dt(e) : bt(e);
+}
+var yt = "Expected a function";
+function wt(e) {
+  if (typeof e != "function")
+    throw new TypeError(yt);
+  return function() {
+    var n = arguments;
+    switch (n.length) {
+      case 0:
+        return !e.call(this);
+      case 1:
+        return !e.call(this, n[0]);
+      case 2:
+        return !e.call(this, n[0], n[1]);
+      case 3:
+        return !e.call(this, n[0], n[1], n[2]);
+    }
+    return !e.apply(this, n);
+  };
+}
+function At(e, n) {
+  if (e == null)
+    return {};
+  var r = wn(An(e), function(t) {
+    return [t];
+  });
+  return n = qe(n), dn(e, r, function(t, o) {
+    return n(t, o[0]);
+  });
+}
+function Ct(e, n) {
+  return At(e, wt(qe(n)));
+}
+const Oe = ["sm", "md", "lg"], Tt = ["error", "warning"], Ie = /* @__PURE__ */ fe({
+  __name: "Input",
+  props: {
+    id: {},
+    maxlength: {},
+    type: {},
+    placeholder: {},
+    disabled: { type: Boolean, default: void 0 },
+    required: { type: Boolean },
+    modelValue: {},
+    defaultValue: {},
+    leading: {},
+    trailing: {},
+    clearIcon: { default: "tabler:circle-x" },
+    trailingCls: {},
+    clearIconCls: {},
+    dividerCls: {},
+    leadingCls: {},
+    class: {},
+    allowClear: { type: Boolean },
+    bordered: { type: Boolean, default: !0 },
+    size: {},
+    status: {}
+  },
+  emits: ["update:modelValue", "clear", "blur", "focus"],
+  setup(e, { expose: n, emit: r }) {
+    const t = e, o = Je(), s = r, a = ue(t, "modelValue", s, {
+      defaultValue: t.defaultValue,
+      passive: t.modelValue === void 0
+    }), l = S(
+      () => !(o.leading || o.trailing || t.leading || t.trailing || t.allowClear || o.clearIcon)
+    ), f = S(() => l.value ? "template" : "div"), i = De("input"), b = cn(i, {
+      variants: {
+        size: re(Oe, i),
+        status: re(Tt, i),
+        bordered: re("bordered", i)
+      }
+    }), u = S(() => t.size && Oe.includes(t.size) ? t.size : "md"), h = Qe(), C = Ze(), y = S(
+      () => Ct(
+        {
+          ...mn(t, "id", "maxlength", "type", "disabled", "required", "placeholder"),
+          ...h,
+          onBlur: (v) => {
+            var P;
+            (P = v.target) != null && P.value && (v.target.value = a.value), l.value || (C.value = !1), s("blur", v);
+          },
+          onFocus: (v) => {
+            l.value || (C.value = !0), s("focus", v);
+          }
+        },
+        Dn
+      )
+    ), d = S(() => {
+      switch (u.value) {
+        case "sm":
+          return "2xsm";
+        default:
+          return "xsm";
+      }
+    }), w = S(() => {
+      switch (u.value) {
+        case "sm":
+          return "2xsm";
+        case "md":
+          return "xsm";
+        default:
+          return "sm";
+      }
+    }), E = () => {
+      a.value = "", s("clear");
+    }, T = J();
+    return n({
+      input: T,
+      focus: (v) => {
+        var P;
+        return (P = T.value) == null ? void 0 : P.focus(v);
+      },
+      blur: () => {
+        var v;
+        return (v = T.value) == null ? void 0 : v.blur();
+      },
+      select: () => {
+        var v;
+        return (v = T.value.input) == null ? void 0 : v.select();
+      },
+      setSelectionRange: (v, P, L) => {
+        var g;
+        return (g = T.value.input) == null ? void 0 : g.setSelectionRange(v, P, L);
+      }
+    }), (v, P) => (x(), W(p(un), {
+      as: f.value,
+      asChild: l.value,
+      class: R([
+        p(b)({
+          size: u.value,
+          status: v.status,
+          bordered: v.bordered
+        }),
+        t.class
+      ]),
+      "data-disabled": l.value ? void 0 : v.disabled,
+      "data-focus": C.value
+    }, {
+      default: ge(() => {
+        var L;
+        return [
+          o.leading || t.leading ? (x(), $("div", {
+            key: 0,
+            class: R([p(_)(p(i), "leading"), v.leadingCls])
+          }, [
+            te(v.$slots, "leading", { iconSize: w.value }, () => [
+              ve(pe(v.leading), 1)
+            ])
+          ], 2)) : F("", !0),
+          je(N("input", en({
+            ref_key: "inputRef",
+            ref: T,
+            "onUpdate:modelValue": P[0] || (P[0] = (g) => nn(a) ? a.value = g : null)
+          }, y.value, {
+            class: [!l.value && p(_)(p(i), "input")]
+          }), null, 16), [
+            [tn, p(a)]
+          ]),
+          o.trailing || t.trailing || v.allowClear ? (x(), $("div", {
+            key: 1,
+            class: R([p(_)(p(i), "trailing"), v.trailingCls])
+          }, [
+            !v.disabled && v.allowClear && ((L = p(a)) != null && L.length) ? (x(), $(Ne, { key: 0 }, [
+              ie(He, {
+                icon: v.clearIcon,
+                size: d.value,
+                onClick: E,
+                class: R([p(_)(p(i), "clear_icon"), v.clearIconCls])
+              }, {
+                default: ge(() => [
+                  te(v.$slots, "clearIcon")
+                ]),
+                _: 3
+              }, 8, ["icon", "size", "class"]),
+              o.trailing || t.trailing ? (x(), W(xn, {
+                key: 0,
+                type: "vertical",
+                class: R([p(_)(p(i), "divider"), v.dividerCls])
+              }, null, 8, ["class"])) : F("", !0)
+            ], 64)) : F("", !0),
+            te(v.$slots, "trailing", { iconSize: w.value }, () => [
+              ve(pe(v.trailing), 1)
+            ])
+          ], 2)) : F("", !0)
+        ];
+      }),
+      _: 3
+    }, 8, ["as", "asChild", "class", "data-disabled", "data-focus"]));
+  }
+});
+function Et(e, n, r) {
+  const t = e.getBoundingClientRect(), o = n - t.left, s = r - t.top;
+  return {
+    x: t.width === 0 ? 0 : K(o / t.width * 100, 0, 100),
+    y: t.height === 0 ? 0 : K((1 - s / t.height) * 100, 0, 100)
+  };
+}
+const Pt = /* @__PURE__ */ fe({
+  __name: "ColorPickerSpace",
+  setup(e) {
+    const n = St();
+    let r = !1, t;
+    function o(u) {
+      t = document.body.style.userSelect, document.body.style.userSelect = "none", r = !0, l(u);
+    }
+    function s(u) {
+      r = !0, f(u);
+    }
+    function a() {
+      document.body.style.userSelect = t, r = !1;
+    }
+    function l(u) {
+      u.buttons !== 1 || !r || !(n.colorSpace.value instanceof HTMLElement) || i(n.colorSpace.value, u.clientX, u.clientY);
+    }
+    function f(u) {
+      if (!r || !(n.colorSpace.value instanceof HTMLElement))
+        return;
+      u.preventDefault();
+      const h = u.touches[0];
+      i(n.colorSpace.value, h.clientX, h.clientY);
+    }
+    function i(u, h, C) {
+      const y = Et(u, h, C), d = { ...n.colors.hsv };
+      d.s = y.x, d.v = y.y, n.setColor("hsv", d);
+    }
+    function b(u) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(u.key))
+        return;
+      u.preventDefault();
+      const h = ["ArrowLeft", "ArrowDown"].includes(u.key) ? -1 : 1, C = ["ArrowLeft", "ArrowRight"].includes(u.key) ? "s" : "v", y = u.shiftKey ? 10 : 1, d = n.colors.hsv[C] + h * y, w = { ...n.colors.hsv };
+      w[C] = K(d, 0, 100), n.setColor("hsv", w);
+    }
+    return $e(() => {
+      document.addEventListener("mousemove", l, { passive: !1 }), document.addEventListener("touchmove", f, { passive: !1 }), document.addEventListener("mouseup", a), document.addEventListener("touchend", a);
+    }), rn(() => {
+      document.removeEventListener("mousemove", l), document.removeEventListener("touchmove", f), document.removeEventListener("mouseup", a), document.removeEventListener("touchend", a);
+    }), (u, h) => (x(), $("div", {
+      ref: p(n).colorSpace,
+      class: R([p(_)(p(B), "space")]),
+      onMousedown: o,
+      onTouchstart: s
+    }, [
+      N("button", {
+        ref: p(n).thumb,
+        class: R([p(_)(p(B), "thumb")]),
+        tabindex: "0",
+        "aria-label": "Color space thumb",
+        onKeydown: b
+      }, null, 34)
+    ], 34));
+  }
+}), xt = ["value"], Rt = ["value"], [St, _t] = Rn("ColorPicker"), B = De("color_picker"), Wt = /* @__PURE__ */ fe({
+  __name: "ColorPicker",
+  props: {
+    class: {},
+    color: {},
+    defaultColor: { default: "#ffffffff" },
+    format: {},
+    defaultFormat: { default: "hex" },
+    hideAlpha: { type: Boolean }
+  },
+  emits: ["update:color", "update:format", "change"],
+  setup(e, { emit: n }) {
+    const r = ["hex", "hsl", "hsv", "hwb", "rgb"], t = e, o = n, s = J(null), a = J(null), l = J(null), f = ue(t, "format", o, {
+      defaultValue: t.defaultFormat,
+      passive: t.format === void 0
+    }), i = S(
+      () => f.value && r.includes(f.value) ? f.value : "hex"
+    ), b = ue(t, "color", o, {
+      defaultValue: t.defaultColor,
+      passive: t.color === void 0
+    }), u = "#ffffffff", h = S(() => b.value ?? t.defaultColor ?? u);
+    sn(h, E);
+    const C = S(() => {
+      const g = i.value, c = d[g];
+      return g.split("").map((m) => {
+        const A = c[m];
+        return {
+          value: ne(g, m).to(A),
+          channel: m,
+          label: m.toUpperCase()
+        };
+      }).concat(
+        t.hideAlpha ? [] : [
+          {
+            value: ee.to(c.a),
+            channel: "a",
+            label: "Alpha"
+          }
+        ]
+      );
+    }), y = S({
+      get() {
+        return t.hideAlpha && [5, 9].includes(d.hex.length) ? d.hex.substring(0, d.hex.length - (d.hex.length - 1) / 4) : d.hex;
+      },
+      set(g) {
+        Ge(g) && w("hex", g);
+      }
+    }), d = on({
+      hex: u,
+      hsl: { h: 0, s: 0, l: 100, a: 1 },
+      hsv: { h: 0, s: 0, v: 100, a: 1 },
+      hwb: { h: 0, w: 100, b: 0, a: 1 },
+      rgb: { r: 255, g: 255, b: 255, a: 1 }
+    });
+    function w(g, c) {
+      let m = c;
+      if (t.hideAlpha)
+        if (typeof c != "string")
+          c.a = 1, m = c;
+        else if ([5, 9].includes(c.length)) {
+          const A = (c.length - 1) / 4;
+          m = c.substring(0, c.length - A) + "f".repeat(A);
+        } else [4, 7].includes(c.length) && (m = c + "f".repeat((c.length - 1) / 3));
+      if (!Sn(d[g], m)) {
+        d[g] = m;
+        for (const A of r)
+          A !== g && (d[A] = Ee(g, A, m));
+        b.value = ae(
+          { color: Ee(g, i.value, m), format: i.value },
+          t.hideAlpha
+        ), o("change", me());
+      }
+      s.value instanceof HTMLElement && a.value instanceof HTMLElement && l.value instanceof HTMLElement && I(s.value, a.value, l.value);
+    }
+    function E(g) {
+      const c = Re(g);
+      if (c !== null)
+        w(c.format, c.color);
+      else {
+        const m = Re(u);
+        m !== null && w(m.format, m.color);
+      }
+    }
+    function T(g) {
+      f.value = g;
+    }
+    function D(g, c) {
+      const m = g.currentTarget, A = { ...d.hsv };
+      A[c] = Number(m.value), w("hsv", A);
+    }
+    function O(g, c) {
+      const m = i.value, A = { ...d[m] }, Y = (c === "a" ? ee : ne(m, c)).from(g);
+      Number.isNaN(g) || g === void 0 || (A[c] = Y, w(m, A));
+    }
+    function I(g, c, m) {
+      const A = ae({ format: "hsl", color: d.hsl }, !0);
+      g.style.setProperty("--vacp-color", A), c.style.position = "relative", c.style.backgroundColor = `hsl(${d.hsl.h} 100% 50%)`, c.style.backgroundImage = "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)", m.style.boxSizing = "border-box", m.style.position = "absolute", m.style.left = `${d.hsv.s}%`, m.style.bottom = `${d.hsv.v}%`;
+    }
+    function me() {
+      const g = ae(
+        { color: d[i.value], format: i.value },
+        t.hideAlpha
+      );
+      return {
+        colors: d,
+        cssColor: g
+      };
+    }
+    function v(g) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(g.key) || !g.shiftKey)
+        return;
+      const c = g.currentTarget, m = Number(c.step), A = ["ArrowLeft", "ArrowDown"].includes(g.key) ? -1 : 1, U = Number(c.value) + A * m * 10, Y = K(U, Number(c.min), Number(c.max));
+      c.value = String(Y - A * m);
+    }
+    const { openEyeDropper: P } = $n(E);
+    $e(() => E(h.value)), _t({ colorSpace: a, thumb: l, colors: d, setColor: w });
+    const L = _(B, "slider");
+    return (g, c) => (x(), $("div", {
+      ref_key: "colorPicker",
+      ref: s,
+      class: R([p(B), t.class])
+    }, [
+      ie(Pt),
+      N("div", {
+        class: R(p(_)(p(B), "sliders"))
+      }, [
+        N("input", {
+          class: R([p(L), p(he)(p(L), "hue")]),
+          value: d.hsv.h,
+          type: "range",
+          min: "0",
+          max: "360",
+          step: "1",
+          onKeydownPassive: v,
+          onInput: c[0] || (c[0] = (m) => D(m, "h"))
+        }, null, 42, xt),
+        g.hideAlpha ? F("", !0) : (x(), $("input", {
+          key: 0,
+          class: R([p(L), p(he)(p(L), "alpha")]),
+          value: d.hsv.a,
+          type: "range",
+          min: "0",
+          max: "1",
+          step: "0.01",
+          onKeydownPassive: v,
+          onInput: c[1] || (c[1] = (m) => D(m, "a"))
+        }, null, 42, Rt))
+      ], 2),
+      N("div", {
+        class: R(p(_)(p(B), "inputs"))
+      }, [
+        N("button", {
+          disabled: !0,
+          class: "fake-select",
+          onClick: c[2] || (c[2] = (m) => T("rgb"))
+        }, [
+          c[4] || (c[4] = N("div", null, "Hex", -1)),
+          ie(He, {
+            icon: "tabler:chevron-down",
+            size: "2xsm",
+            class: "fake-select-icon"
+          })
+        ]),
+        i.value === "hex" ? (x(), W(Ie, {
+          key: 0,
+          class: "flex-1",
+          size: "sm",
+          modelValue: y.value,
+          "onUpdate:modelValue": c[3] || (c[3] = (m) => y.value = m)
+        }, null, 8, ["modelValue"])) : (x(!0), $(Ne, { key: 1 }, an(C.value, ({ value: m, channel: A }) => (x(), W(Ie, {
+          modelValue: m,
+          "onUpdate:modelValue": (U) => O(U, A),
+          size: "sm"
+        }, null, 8, ["modelValue", "onUpdate:modelValue"]))), 256)),
+        p(We) ? (x(), W(ln, {
+          key: 2,
+          onClick: p(P),
+          icon: "tabler:color-picker",
+          size: "sm",
+          type: "outline",
+          variant: "icon"
+        }, null, 8, ["onClick"])) : F("", !0)
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  Wt as _,
+  St as i,
+  _t as p
+};