@orchidui/dashboard 1.8.1-8 → 1.8.1-80

package/dist/OcColorPickerPopup-sjvpeV8l.js

@@ -0,0 +1,1127 @@
+import { ref as k, watch as _, openBlock as $, createBlock as P, unref as U, withKeys as Ue, createElementBlock as C, createVNode as D, withCtx as K, createTextVNode as Z, inject as oe, createElementVNode as w, normalizeClass as J, normalizeStyle as W, onMounted as Ne, createCommentVNode as H, computed as lt, reactive as Le, provide as se, nextTick as at, Fragment as Re, renderList as Be, withDirectives as nt, vShow as rt } from "vue";
+import { Input as ie, Select as st, Icon as ot, Slider as fe } from "@orchidui/core";
+import { hslToRgb as He, hsl2Hex as De, rgb2Hex as Ee, rgbaToHex8 as it, hexToRgb as be, rgbToHue as ce, rgbToHsl as Xe, hex8ToRgba as ut, parseRgba as dt, parseRgb as ct } from "./Dashboard/ColorPicker/components/converters.js";
+const pt = {
+  __name: "InputHex",
+  props: {
+    modelValue: {
+      type: String
+    }
+  },
+  emits: {
+    "update:modelValue": []
+  },
+  setup(i, { emit: V }) {
+    const c = i, f = V, o = k(""), I = (u) => {
+      o.value = u, o.value = `#${u.replace(/#/g, "")}`;
+    }, b = () => {
+      let u = o.value;
+      if (u === c.modelValue) return;
+      if (!/^#[0-9a-fA-F]+$/.test(u)) {
+        o.value = c.modelValue;
+        return;
+      }
+      let a = u.replace(/#/g, "");
+      switch (a.length) {
+        case 0:
+          a = c.modelValue.replace("#", "");
+          break;
+        case 1:
+        case 2:
+          a = a.repeat(3);
+          break;
+        case 4:
+        case 5:
+          a = a.slice(0, 3);
+          break;
+        case 3:
+        case 6:
+          break;
+        default:
+          a = a.slice(0, 6);
+      }
+      o.value = `#${a.toUpperCase()}`, f("update:modelValue", o.value);
+    };
+    return _(
+      () => c.modelValue,
+      (u, a) => {
+        u !== a && (o.value = u);
+      },
+      { immediate: !0 }
+    ), (u, a) => ($(), P(U(ie), {
+      class: "w-[158px]",
+      placeholder: "#FFFFFF",
+      "model-value": o.value,
+      "onUpdate:modelValue": I,
+      onBlur: b,
+      onKeyup: Ue(b, ["enter"])
+    }, null, 8, ["model-value"]));
+  }
+}, gt = { class: "grid grid-cols-3 gap-3" }, Me = {
+  __name: "InputRgbHsl",
+  props: {
+    inputType: {
+      default: "RGB",
+      type: String
+    },
+    rgbValue: {
+      type: Object
+    },
+    hslValue: {
+      type: Object
+    }
+  },
+  emits: {
+    "update-rgb-value": [],
+    "update-hsl-value": []
+  },
+  setup(i, { emit: V }) {
+    const c = i, f = V, o = k({
+      r: 0,
+      g: 0,
+      b: 0
+    }), I = k(), b = k(), u = k(), a = (S, y) => {
+      var N, B, Y;
+      let x = 255;
+      if (c.inputType == "HSL" && (x = 100, S == "r" && (x = 360)), !isNaN(parseInt(y))) {
+        if (S == "r") {
+          let E = parseInt(y);
+          E <= x && (o.value.r = E, c.inputType == "RGB" ? M("r") : j()), (N = I.value) == null || N.focus();
+        } else if (S == "g") {
+          let E = parseInt(y);
+          E <= x && (o.value.g = E, c.inputType == "RGB" ? M("g") : j()), (B = b.value) == null || B.focus();
+        } else if (S == "b") {
+          let E = parseInt(y);
+          E <= x && (o.value.b = E, c.inputType == "RGB" ? M("b") : j()), (Y = u.value) == null || Y.focus();
+        }
+      }
+    }, M = (S) => {
+      f("update-rgb-value", {
+        type: S,
+        value: {
+          r: parseInt(o.value.r),
+          g: parseInt(o.value.g),
+          b: parseInt(o.value.b)
+        }
+      });
+    }, j = () => {
+      f("update-hsl-value", {
+        h: parseInt(o.value.r),
+        s: parseInt(o.value.g),
+        l: parseInt(o.value.b)
+      });
+    };
+    return c.inputType === "RGB" ? _(
+      () => c.rgbValue,
+      (S, y) => {
+        S !== y && (o.value = S);
+      },
+      { immediate: !0, deep: !0 }
+    ) : _(
+      () => c.hslValue,
+      (S) => {
+        o.value = {
+          r: S.h,
+          g: S.s,
+          b: S.l
+        };
+      },
+      { immediate: !0, deep: !0 }
+    ), (S, y) => ($(), C("div", gt, [
+      D(U(ie), {
+        ref_key: "rInputEl",
+        ref: I,
+        "model-value": o.value.r,
+        placeholder: "100",
+        "onUpdate:modelValue": y[0] || (y[0] = (x) => a("r", x))
+      }, null, 8, ["model-value"]),
+      D(U(ie), {
+        ref_key: "gInputEl",
+        ref: b,
+        "model-value": o.value.g,
+        placeholder: "100",
+        "onUpdate:modelValue": y[1] || (y[1] = (x) => a("g", x))
+      }, null, 8, ["model-value"]),
+      D(U(ie), {
+        ref_key: "bInputEl",
+        ref: u,
+        "model-value": o.value.b,
+        placeholder: "100",
+        "onUpdate:modelValue": y[2] || (y[2] = (x) => a("b", x))
+      }, null, 8, ["model-value"])
+    ]));
+  }
+}, vt = {
+  __name: "InputOpacity",
+  props: {
+    modelValue: {
+      type: Number
+    }
+  },
+  emits: {
+    "update:modelValue": []
+  },
+  setup(i, { emit: V }) {
+    const c = i, f = V, o = k(""), I = (u) => {
+      o.value = u;
+    }, b = () => {
+      let u = parseInt(o.value);
+      u && u <= 100 ? f("update:modelValue", u) : o.value = c.modelValue;
+    };
+    return _(
+      () => c.modelValue,
+      (u, a) => {
+        u !== a && (o.value = u);
+      },
+      { immediate: !0 }
+    ), (u, a) => ($(), P(U(ie), {
+      class: "w-[75px]",
+      placeholder: "100",
+      "model-value": o.value,
+      "onUpdate:modelValue": I,
+      onBlur: b,
+      onKeyup: Ue(b, ["enter"])
+    }, {
+      leading: K(() => a[0] || (a[0] = [
+        Z("%")
+      ])),
+      _: 1
+    }, 8, ["model-value"]));
+  }
+}, mt = {
+  __name: "SelectColorFormat",
+  props: {
+    modelValue: { default: "RGB", type: String }
+  },
+  emits: ["update:model-value"],
+  setup(i, { emit: V }) {
+    const f = k(i.modelValue), o = V, I = (b) => {
+      f.value = b, o("update:model-value", b);
+    };
+    return (b, u) => ($(), P(U(st), {
+      class: "!w-[80px]",
+      "model-value": f.value,
+      options: [
+        {
+          label: "HEX",
+          value: "HEX"
+        },
+        {
+          label: "RGB",
+          value: "RGB"
+        },
+        {
+          label: "HSL",
+          value: "HSL"
+        }
+      ],
+      "onUpdate:modelValue": I
+    }, null, 8, ["model-value"]));
+  }
+}, ft = { class: "opacity-bar" }, bt = { class: "picker-opacity-slider opacity-bar-background" }, yt = ["value"], ht = {
+  __name: "SliderOpacity",
+  props: {
+    modelValue: { default: 0, type: Number }
+  },
+  emits: ["update:modelValue", "onInput"],
+  setup(i, { emit: V }) {
+    const c = oe("opacitySlider"), f = V, o = (I) => {
+      f("update:modelValue", parseInt(I.target.value)), f("onInput", I);
+    };
+    return (I, b) => ($(), C("div", ft, [
+      w("div", bt, [
+        w("input", {
+          ref_key: "opacitySlider",
+          ref: c,
+          value: i.modelValue,
+          class: "opacity__slider",
+          type: "range",
+          min: "0",
+          max: "100",
+          onInput: o
+        }, null, 40, yt)
+      ])
+    ]));
+  }
+}, $t = {
+  __name: "SliderGradient",
+  props: {
+    gradientType: String
+  },
+  emits: ["onAddColor", "onMouseDown", "onDeleteColor"],
+  setup(i, { emit: V }) {
+    const c = oe("gradientBar"), f = k(), o = V, I = (y) => {
+      y.preventDefault();
+    }, b = k("left:0"), u = k(!1), a = (y) => {
+      o("onMouseDown", y);
+    }, M = () => {
+      let y = f.value.querySelector(".select");
+      b.value = y == null ? void 0 : y.getAttribute("style");
+    }, j = () => {
+      var x;
+      M(), (((x = f.value.querySelectorAll(".gradient-handle")) == null ? void 0 : x.length) ?? 2) > 2 ? u.value = !0 : u.value = !1;
+    }, S = (y) => {
+      u.value = !1, o("onAddColor", y);
+    };
+    return (y, x) => ($(), C("div", {
+      ref_key: "gradientSlider",
+      ref: f,
+      class: "relative h-[40px]",
+      onClick: j
+    }, [
+      w("button", {
+        type: "button",
+        class: J(["absolute top-[-18px] text-oc-accent-3 rounded-[4px] border-2 border-oc-gray-200 p-2 bg-oc-bg-light", u.value ? "" : "!hidden"]),
+        style: W(b.value),
+        onClick: x[0] || (x[0] = (N) => y.$emit("onDeleteColor"))
+      }, [
+        D(U(ot), {
+          name: "bin",
+          width: "14",
+          height: "14"
+        })
+      ], 6),
+      w("div", {
+        class: J(["gradient-bar", {
+          "mt-[20px]": i.gradientType === "linear",
+          "mt-[12px]": i.gradientType === "radial"
+        }]),
+        onMousedown: a,
+        onDragstart: I
+      }, [
+        w("div", {
+          ref_key: "gradientBar",
+          ref: c,
+          class: "gradient-container",
+          onDblclick: S
+        }, null, 544)
+      ], 34)
+    ], 512));
+  }
+}, xt = { class: "picker-hue" }, kt = ["value"], It = {
+  __name: "SliderHue",
+  props: {
+    modelValue: { default: 0, type: Number }
+  },
+  emits: ["update:modelValue", "onInput", "onChange"],
+  setup(i, { emit: V }) {
+    const c = V, f = (o) => {
+      c("update:modelValue", parseFloat(o.target.value)), c("onInput", o);
+    };
+    return (o, I) => ($(), C("div", xt, [
+      w("input", {
+        value: i.modelValue,
+        class: "picker-hue-range-slider",
+        type: "range",
+        min: "0",
+        max: "360",
+        step: "0.1",
+        onInput: f,
+        onChange: I[0] || (I[0] = (b) => o.$emit("onChange", b))
+      }, null, 40, kt)
+    ]));
+  }
+}, wt = { class: "px-2 mt-2" }, Vt = {
+  key: 1,
+  class: "grid grid-cols-2 gap-4 px-1"
+}, Ct = {
+  __name: "GradientSettings",
+  props: {
+    mode: {
+      default: "gradient",
+      type: String
+    },
+    gradientType: { default: "linear", type: String },
+    angle: { default: 90, type: Number },
+    percentageX: { default: 50, type: Number },
+    percentageY: { default: 50, type: Number }
+  },
+  emits: ["update:angle", "update:percentageX", "update:percentageY", "onInput"],
+  setup(i, { emit: V }) {
+    const c = k(!1), f = k(!1);
+    Ne(() => {
+      c.value = !0, f.value = !0;
+    });
+    const o = V, I = (b, u) => {
+      let a = parseInt(b);
+      switch (u) {
+        case "angle":
+          b > 360 ? a = 360 : b < 0 && (a = 0), o("update:angle", a), o("onInput");
+          break;
+        case "percentageX":
+          b > 100 ? a = 100 : b < 0 && (a = 0), o("update:percentageX", a), o("onInput");
+          break;
+        case "percentageY":
+          b > 100 ? a = 100 : b < 0 && (a = 0), o("update:percentageY", a), o("onInput");
+          break;
+      }
+    };
+    return (b, u) => ($(), C("div", wt, [
+      i.gradientType == "linear" && c.value ? ($(), P(U(fe), {
+        key: 0,
+        label: "Angle",
+        "model-value": i.angle,
+        "min-limit": 0,
+        "max-limit": 360,
+        "onUpdate:modelValue": u[0] || (u[0] = (a) => I(a, "angle"))
+      }, {
+        "min-limit-label": K(() => u[3] || (u[3] = [
+          Z("0 ")
+        ])),
+        "max-limit-label": K(() => u[4] || (u[4] = [
+          Z("360"),
+          w("span", null, "°", -1)
+        ])),
+        _: 1
+      }, 8, ["model-value"])) : H("", !0),
+      i.gradientType == "radial" && f.value ? ($(), C("div", Vt, [
+        D(U(fe), {
+          label: "Position X",
+          "model-value": i.percentageX,
+          "min-limit": 0,
+          "max-limit": 100,
+          "onUpdate:modelValue": u[1] || (u[1] = (a) => I(a, "percentageX"))
+        }, {
+          "min-limit-label": K(() => u[5] || (u[5] = [
+            Z("0")
+          ])),
+          "max-limit-label": K(() => u[6] || (u[6] = [
+            Z("100%")
+          ])),
+          _: 1
+        }, 8, ["model-value"]),
+        D(U(fe), {
+          label: "Position Y",
+          "model-value": i.percentageY,
+          "min-limit": 0,
+          "max-limit": 100,
+          "onUpdate:modelValue": u[2] || (u[2] = (a) => I(a, "percentageY"))
+        }, {
+          "min-limit-label": K(() => u[7] || (u[7] = [
+            Z("0")
+          ])),
+          "max-limit-label": K(() => u[8] || (u[8] = [
+            Z("100%")
+          ])),
+          _: 1
+        }, 8, ["model-value"])
+      ])) : H("", !0)
+    ]));
+  }
+}, St = {
+  __name: "PickerWrap",
+  emits: ["onMouseDown"],
+  setup(i) {
+    const V = oe("canvas"), c = oe("pickerWrap"), f = oe("pickerPointer"), o = (I) => {
+      I.preventDefault();
+    };
+    return (I, b) => ($(), C("div", {
+      ref_key: "pickerWrap",
+      ref: c,
+      class: "cp-picker-wrap",
+      onMousedown: b[0] || (b[0] = (u) => I.$emit("onMouseDown", u)),
+      onDragstart: o
+    }, [
+      w("canvas", {
+        ref_key: "canvas",
+        ref: V,
+        class: "colour-area"
+      }, null, 512),
+      b[1] || (b[1] = w("div", { class: "colour-area-mask" }, null, -1)),
+      w("div", {
+        ref_key: "pickerPointer",
+        ref: f,
+        class: "colour-area-point-circle"
+      }, null, 512)
+    ], 544));
+  }
+}, Tt = { class: "w-full flex justify-center" }, Lt = {
+  key: 1,
+  width: "28",
+  height: "28",
+  viewBox: "0 0 28 28",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, Rt = {
+  __name: "ColorType",
+  props: {
+    variant: String,
+    mode: {
+      default: "gradient",
+      type: String
+    },
+    gradientType: { default: "linear", type: String },
+    iconClasses: {
+      default: () => ({
+        linear: "",
+        radial: ""
+      }),
+      type: Object
+    },
+    modelValue: String
+  },
+  emits: ["onChangeMode"],
+  setup(i) {
+    return (V, c) => ($(), C("div", Tt, [
+      w("button", {
+        type: "button",
+        class: J(i.mode == "solid" ? "active" : ""),
+        style: { padding: "7px" },
+        onClick: c[0] || (c[0] = (f) => V.$emit("onChangeMode", "solid"))
+      }, [
+        i.modelValue && i.mode == "solid" ? ($(), C("div", {
+          key: 0,
+          class: "w-[28px] h-[28px] rounded-full border",
+          style: W(`background:${i.modelValue}`)
+        }, null, 4)) : ($(), C("svg", Lt, c[3] || (c[3] = [
+          w("g", { opacity: "0.5" }, [
+            w("path", {
+              d: "M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z",
+              fill: "#03102F"
+            })
+          ], -1)
+        ])))
+      ], 2),
+      w("button", {
+        type: "button",
+        class: J(i.gradientType == "linear" && i.mode != "solid" ? "active" : ""),
+        style: W(`${i.iconClasses.linear ? "" : "padding: 7px;"}`),
+        onClick: c[1] || (c[1] = (f) => V.$emit("onChangeMode", "linear"))
+      }, [
+        w("div", {
+          class: "w-[28px] h-[28px] rounded-full border",
+          style: W(
+            i.modelValue && i.gradientType == "linear" && i.mode != "solid" ? `background:${i.modelValue}` : `
+          background: linear-gradient(
+            180deg,
+            #03102f 0%,
+            rgba(3, 16, 47, 0) 100%
+          );
+        `
+          )
+        }, null, 4)
+      ], 6),
+      w("button", {
+        type: "button",
+        class: J(i.gradientType == "radial" && i.mode != "solid" ? "active" : ""),
+        style: W(`${i.iconClasses.radial ? "" : "padding: 6px;"}`),
+        onClick: c[2] || (c[2] = (f) => V.$emit("onChangeMode", "radial"))
+      }, [
+        w("div", {
+          class: "w-[28px] h-[28px] rounded-full border",
+          style: W(
+            i.modelValue && i.gradientType == "radial" && i.mode != "solid" ? `background:${i.modelValue}` : "background: radial-gradient(circle at 50% 50%, rgb(255, 255, 255) 0%, rgb(3, 16, 47) 100%);"
+          )
+        }, null, 4)
+      ], 6)
+    ]));
+  }
+}, Bt = ["cp-theme"], Ht = {
+  key: 0,
+  class: "flex justify-end border-b h-[46px] relative mt-[-5px] mb-5"
+}, Dt = {
+  key: 1,
+  class: "grid items-center mb-5"
+}, Et = { key: 2 }, Xt = { key: 0 }, Mt = { class: "ck-cp-local-color-conatiner" }, Ut = ["onClick"], Nt = { class: "flex items-center gap-2" }, Ot = { id: "ck-cp-target-background" }, Gt = { class: "flex gap-3" }, Pt = {
+  key: 0,
+  class: "w-full flex gap-3"
+}, Yt = {
+  key: 4,
+  class: "ck-cp-local-color-conatiner"
+}, Ft = ["onClick"], jt = {
+  __name: "OcColorPickerPopup",
+  props: {
+    modelValue: {
+      default: "",
+      type: String
+    },
+    type: { default: "HEX8", type: String },
+    inputType: { default: "HEX", type: String },
+    theme: { default: "light", type: String },
+    showColorList: { default: !0, type: Boolean },
+    showEyeDrop: { default: !0, type: Boolean },
+    showAlpha: { default: !0, type: Boolean },
+    showInputMenu: { default: !0, type: Boolean },
+    showInputSet: { default: !0, type: Boolean },
+    disabled: { default: !1, type: Boolean },
+    iconClasses: {
+      default: () => ({
+        linear: "",
+        radial: "",
+        ruler: "",
+        eyeDroper: "",
+        inputMenu: "",
+        save: "",
+        delete: ""
+      }),
+      type: Object
+    },
+    presetColors: Array,
+    variant: {
+      type: String,
+      default: "solid"
+    },
+    lastUsedColors: Array
+  },
+  emits: ["update:modelValue", "last-used-pick"],
+  setup(i, { emit: V }) {
+    const c = i, f = k(c.variant == "gradient" ? "gradient" : "solid"), o = k(null), I = V, b = k(c.modelValue), u = (t) => {
+      b.value = t, Y.value && I("update:modelValue", t);
+    }, a = k([
+      { id: 1, r: 68, g: 71, b: 119, a: 100, percent: 0, hue: 0, select: !0 },
+      { id: 2, r: 0, g: 0, b: 255, a: 100, percent: 100, hue: 0, select: !1 }
+    ]), M = k(c.lastUsedColors);
+    _(
+      () => c.lastUsedColors,
+      () => {
+        M.value = c.lastUsedColors;
+      },
+      {
+        deep: !0
+      }
+    );
+    const j = lt(() => c.variant !== "gradient" ? M.value.filter((t) => !t.includes("linear") && !t.includes("radial")) : M.value), S = k(!1), y = k("linear"), x = Le({
+      angle: 90,
+      percentageX: 50,
+      percentageY: 50
+    }), N = k(""), B = k(c.inputType), Y = k(!1), E = k(), ue = k(), z = k(), O = k(), h = k(), L = Le({
+      h: 0,
+      s: 0,
+      l: 0
+    });
+    se("gradientBar", ue), se("canvas", z), se("pickerWrap", O), se("pickerPointer", h), se("opacitySlider", E);
+    let ee = 0, te = 0, ye = 0, he = 0, le = 0, ae = 0;
+    const Oe = (t) => {
+      !O.value || !h.value || (le = O.value.offsetHeight - h.value.offsetHeight, ae = O.value.offsetWidth - h.value.offsetWidth, ye = t.clientX - t.target.getBoundingClientRect().left, he = t.clientY - t.target.getBoundingClientRect().top, ee = ye - h.value.offsetWidth / 2, te = he - h.value.offsetHeight / 2, h.value.style.left = `${ee}px`, h.value.style.top = `${te}px`, pe(!1), Q(), window.addEventListener("mousemove", $e), window.addEventListener("mouseup", xe));
+    }, $e = (t) => {
+      t.preventDefault();
+      const e = O.value.getBoundingClientRect(), l = t.clientX - e.left - h.value.offsetWidth / 2, n = t.clientY - e.top - h.value.offsetHeight / 2;
+      l >= 0 && l <= ae ? (ee = l, h.value.style.left = `${l}px`) : 0 > l ? (ee = 0, h.value.style.left = "0px") : l > ae && (ee = ae, h.value.style.left = `${ae}px`), n >= 0 && n <= le ? (te = n, h.value.style.top = `${n}px`) : 0 > n ? (te = 0, h.value.style.top = "0px") : n > le && (te = le, h.value.style.top = `${le}px`), pe(!1), Q();
+    }, xe = () => {
+      window.removeEventListener("mousemove", $e), window.removeEventListener("mouseup", xe);
+    }, pe = (t) => {
+      if (!t) {
+        let e = Ge();
+        const l = He(F.value, e.s, e.l);
+        if (l) {
+          if (Y.value) {
+            let n = a.value.find((r) => r.select == !0);
+            n && (n.r = l.r, n.g = l.g, n.b = l.b);
+          }
+          q(), R();
+        }
+      }
+    }, F = k(0), ge = async (t) => {
+      const { rgb: e } = De(F.value, 100, 50);
+      Se(e), setTimeout(() => {
+        pe(t), Q();
+      }, 0);
+    }, Ge = () => {
+      let t = { s: 0, l: 0 }, e = O.value.offsetWidth - h.value.offsetWidth, l = O.value.offsetHeight - h.value.offsetHeight, n = parseInt(h.value.style.left), s = 1 - parseInt(h.value.style.top) / l, p = n / e;
+      return t.l = s / 2 * (2 - p), t.s = s * p / (1 - Math.abs(2 * t.l - 1)), Number.isNaN(t.s) && (t.s = t.l), t.l = t.l > 1 ? 1 : t.l, t.s = t.s > 1 ? 1 : t.s, t;
+    }, ne = () => {
+      const t = a.value.find((e) => e.select == !0);
+      if (t) {
+        const { l: e, s: l } = Xe(t.r, t.g, t.b);
+        let n = e, r = l;
+        Number.isNaN(r) && (r = n);
+        let s = { x: 0, y: 0 }, p = O.value.offsetWidth - h.value.offsetWidth, m = O.value.offsetHeight - h.value.offsetHeight;
+        const [g, d] = 2 * n - 1 < 0 ? [
+          p * 2 * r / (1 + r),
+          m * (1 - n * (1 + r))
+        ] : [
+          -p * 2 * (n - 1) * r / (n + r - n * r),
+          m * (n - 1) * (r - 1)
+        ];
+        return s.x = g, s.y = d, s;
+      } else
+        return null;
+    }, Pe = () => {
+      const t = a.value.find((e) => e.select == !0);
+      t && (t.hue = F.value);
+    }, A = k(100), ke = (t) => {
+      if (c.showAlpha) {
+        const e = a.value.find((l) => l.select == !0);
+        e && (e.a = parseInt(t), R());
+      }
+    }, Ye = (t) => {
+      var l, n, r, s;
+      const e = (n = (l = o.value) == null ? void 0 : l.querySelector(".gradient-handle-content")) == null ? void 0 : n.getBoundingClientRect();
+      return t === 0 ? "0px" : t === 100 && e ? `${(((r = ue.value) == null ? void 0 : r.offsetWidth) || 0) - (e.width || 0)}px` : `${(((s = ue.value) == null ? void 0 : s.offsetWidth) || 0) * (t / 100) - ((e == null ? void 0 : e.width) || 0) / 2}px`;
+    };
+    let T = null, X = null;
+    const Ie = (t) => {
+      var n, r;
+      const l = t.target.offsetParent;
+      if ((n = l == null ? void 0 : l.id) != null && n.includes("clr-gb-")) {
+        const s = l.id.replace("clr-gb-", "");
+        X = l;
+        const p = a.value.find((m) => m.select == !0);
+        if (p && p.id != s) {
+          const m = (r = o.value) == null ? void 0 : r.querySelector(".gradient-handle.select");
+          m == null || m.classList.remove("select"), l.classList.add("select");
+          const g = a.value.findIndex((d) => d.select == !0);
+          for (let d = 0; d < a.value.length; d++) {
+            const v = a.value[d];
+            if (v.id == s) {
+              g != -1 && (a.value[g].select = !1), a.value[d].select = !0, A.value = v.a, re(v.r, v.g, v.b, v.hue, !0), q(), Q();
+              break;
+            }
+          }
+        }
+        window.addEventListener("mousemove", we), window.addEventListener("mouseup", Fe);
+      }
+    }, Fe = () => {
+      window.removeEventListener("mousemove", we), window.removeEventListener("mouseup", Ie);
+    }, we = (t) => {
+      var s, p;
+      t.preventDefault();
+      const e = (p = (s = o.value) == null ? void 0 : s.querySelector(".gradient-handle-content")) == null ? void 0 : p.getBoundingClientRect(), l = T == null ? void 0 : T.getBoundingClientRect(), n = l.width - (e == null ? void 0 : e.width);
+      let r = t.clientX - (l.left || 0) - ((e == null ? void 0 : e.width) || 0) / 2;
+      if (r < 0 ? r = 0 : r > n && (r = n), X) {
+        X.style.left = `${r}px`;
+        const m = parseFloat((r / ((l == null ? void 0 : l.width) - (e == null ? void 0 : e.width)) * 100).toFixed(0)), g = a.value.find(
+          (d) => d.id == (X == null ? void 0 : X.id.replace("clr-gb-", ""))
+        );
+        g && (g.percent = m), R();
+      }
+    }, Ae = (t) => {
+      var m, g;
+      const e = T == null ? void 0 : T.getBoundingClientRect(), l = Math.round((t.clientX - ((e == null ? void 0 : e.left) || 0)) / ((e == null ? void 0 : e.width) || 1) * 100), n = a.value.findIndex((d) => d.select == !0), r = a.value[n], s = {
+        id: Date.now(),
+        r: r.r,
+        g: r.g,
+        b: r.b,
+        a: r.a,
+        percent: l,
+        hue: r.hue,
+        select: !0
+      };
+      a.value[n].select = !1;
+      const p = (m = o.value) == null ? void 0 : m.querySelector(".gradient-handle.select");
+      p == null || p.classList.remove("select"), a.value = [...a.value, s], Ce(s), X = (g = o.value) == null ? void 0 : g.querySelector(`#clr-gb-${s.id}`), R();
+    }, Ve = (t) => {
+      if (t.r == 0 && t.g == 0 && t.b == 0)
+        return !0;
+      if (t.r == 255 && t.g == 255 && t.b == 255)
+        return !0;
+      {
+        const e = z.value.getContext("2d", { willReadFrequently: !0 }), l = z.value.width, n = z.value.height, r = e.getImageData(0, 0, l, n).data, s = t.r, p = t.g, m = t.b;
+        for (let g = 0; g < n; g++)
+          for (let d = 0; d < l; d++) {
+            const v = (g * l + d) * 4, G = r[v], et = r[v + 1], tt = r[v + 2];
+            if (G === s && et === p && tt === m)
+              return !0;
+          }
+        return !1;
+      }
+    }, re = (t, e, l, n, r) => {
+      setTimeout(() => {
+        if (Ve({ r: t, g: e, b: l })) {
+          let s = ne();
+          s && (h.value.style.left = `${s.x}px`, h.value.style.top = `${s.y}px`);
+        } else {
+          let s = ne();
+          s && (h.value.style.left = `${s.x}px`, h.value.style.top = `${s.y}px`), F.value = n, ge(r);
+        }
+      }, 0);
+    }, ve = () => {
+      a.value.forEach((l) => Ce(l)), qe();
+      const t = a.value[0];
+      F.value = t.hue, ge(!0);
+      let e = ne();
+      e && (h.value.style.left = `${e.x}px`, h.value.style.top = `${e.y}px`), q(), R();
+    }, Ce = (t) => {
+      if (f.value == "gradient") {
+        let e = document.createElement("div");
+        e.id = `clr-gb-${t.id}`, e.classList.add("gradient-handle"), e.style.left = Ye(t.percent);
+        let l = document.createElement("div");
+        l.classList.add("gradient-handle-content"), t.select == !0 && e.classList.add("select"), e.appendChild(l), T && T.appendChild(e);
+      }
+    }, Se = (t) => {
+      const e = z.value.getContext("2d", { willReadFrequently: !0 }), l = z.value.width, n = z.value.height;
+      e.fillStyle = `rgb(${t[0]},${t[1]},${t[2]})`, e.fillRect(0, 0, l, n);
+      let r = e.createLinearGradient(0, 0, l - 12, 0);
+      r.addColorStop(0, "rgb(255,255,255)"), r.addColorStop(1, "rgba(255,255,255,0)"), e.fillStyle = r, e.fillRect(0, 0, l, n);
+      let s = e.createLinearGradient(0, 0, 0, n);
+      s.addColorStop(0, "rgba(0,0,0,0)"), s.addColorStop(1, "rgb(0,0,0)"), e.fillStyle = s, e.fillRect(0, 0, l, n);
+    }, q = () => {
+      if (c.showAlpha) {
+        let t = a.value.find((e) => e.select == !0);
+        t && (E.value.style.background = ` linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(${t.r}, ${t.g}, ${t.b}, 100) 97%)`);
+      }
+    }, R = () => {
+      var t;
+      if (f.value == "gradient") {
+        a.value.sort((r, s) => r.percent - s.percent);
+        let e = "linear-gradient(90deg, ", l;
+        if (y.value == "linear") {
+          l = `linear-gradient(${x.angle}deg, `;
+          for (let r = 0; r < a.value.length; r++) {
+            const { r: s, g: p, b: m, a: g, percent: d } = a.value[r];
+            a.value.length - 1 == r ? (e = e + `rgba(${s},${p},${m},${g / 100}) ${d}%)`, l = l + `rgba(${s},${p},${m},${g / 100}) ${d}%)`) : (e = e + `rgba(${s},${p},${m},${g / 100}) ${d}%, `, l = l + `rgba(${s},${p},${m},${g / 100}) ${d}%, `);
+          }
+        } else {
+          l = `radial-gradient(circle at ${x.percentageX}% ${x.percentageY}%, `;
+          for (let r = 0; r < a.value.length; r++) {
+            const { r: s, g: p, b: m, a: g, percent: d } = a.value[r];
+            a.value.length - 1 == r ? (e = e + `rgba(${s},${p},${m},${g / 100}) ${d}%)`, l = l + `rgba(${s},${p},${m},${g / 100}) ${d}%)`) : (e = e + `rgba(${s},${p},${m},${g / 100}) ${d}%, `, l = l + `rgba(${s},${p},${m},${g / 100}) ${d}%, `);
+          }
+        }
+        ue.value.style.backgroundImage = e;
+        let n = (t = o.value) == null ? void 0 : t.querySelector("#ck-cp-target-background");
+        n && (n.style.backgroundImage = l, Y.value && u(n.style.backgroundImage));
+      } else {
+        const { r: e, g: l, b: n, a: r } = a.value[0];
+        let s = "";
+        switch (c.type) {
+          case "HEX8":
+            s = it(e, l, n, r / 100);
+            break;
+          case "RGBA":
+            s = `rgba(${e},${l},${n},${r / 100})`;
+            break;
+          case "RGB":
+            s = `rgb(${e},${l},${n})`;
+            break;
+          case "HEX":
+            s = Ee(e, l, n);
+            break;
+        }
+        u(s);
+      }
+    }, qe = () => {
+      a.value.forEach((t) => {
+        t.hue = ce(t.r, t.g, t.b);
+      });
+    }, We = (t) => {
+      y.value = t, R();
+    }, je = () => {
+      var t, e;
+      if (a.value.length > 2) {
+        const l = a.value.findIndex((n) => n.select == !0);
+        if (l !== -1) {
+          const n = a.value[l].id;
+          a.value.splice(l, 1);
+          const r = (t = o.value) == null ? void 0 : t.querySelector(`#clr-gb-${n}`);
+          r == null || r.remove();
+          const s = a.value[0];
+          s && (s.select = !0, X = (e = o.value) == null ? void 0 : e.querySelector(`#clr-gb-${s.id}`), X == null || X.classList.add("select"), re(s.r, s.g, s.b, s.hue, !1), Q(), R());
+        }
+      }
+    }, ze = () => {
+      var l;
+      const t = (l = o.value) == null ? void 0 : l.querySelector("#cp-btn-eyedropper");
+      t == null || t.classList.add("active"), new EyeDropper().open().then((n) => {
+        const { sRGBHex: r } = n, s = a.value.find((m) => m.select == !0), p = be(r);
+        if (p) {
+          const m = ce(p.r, p.g, p.b);
+          if (s && (s.hue = m, s.r = p.r, s.g = p.g, s.b = p.b), Ve(p)) {
+            const g = ne();
+            g && (h.value.style.left = `${g.x}px`, h.value.style.top = `${g.y}px`);
+          } else {
+            F.value = m;
+            const { rgb: g } = De(m, 100, 50);
+            Se(g);
+            const d = ne();
+            d && (h.value.style.left = `${d.x}px`, h.value.style.top = `${d.y}px`);
+          }
+          Q(), q(), R(), t == null || t.classList.remove("active");
+        }
+      }).catch(() => {
+        t == null || t.classList.remove("active");
+      });
+    }, Ke = (t) => {
+      const { value: e, type: l } = t;
+      if (l != "a") {
+        const n = a.value.find((r) => r.select == !0);
+        if (n) {
+          n.r = parseInt(e.r), n.g = parseInt(e.g), n.b = parseInt(e.b);
+          const r = ce(n.r, n.g, n.b);
+          n.hue = r, re(n.r, n.g, n.b, n.hue, !0), R(), q();
+        }
+      } else
+        A.value = e, R(), q();
+    }, Ze = (t) => {
+      L.h = t.h, L.s = t.s, L.l = t.l;
+      const e = a.value.find((l) => l.select == !0);
+      if (e && !Number.isNaN(L.h) && !Number.isNaN(L.s) && !Number.isNaN(L.l)) {
+        const { r: l, g: n, b: r } = He(L.h, L.s / 100, L.l / 100);
+        e.hue = L.h, e.r = l, e.g = n, e.b = r, re(e.r, e.g, e.b, e.hue, !0), R(), q();
+      }
+    }, Je = () => {
+      if (N.value) {
+        const t = be(N.value);
+        if (t) {
+          const e = ce(t.r, t.g, t.b), l = a.value.find((n) => n.select == !0);
+          l && (l.r = t.r, l.g = t.g, l.b = t.b, l.hue = e, re(t.r, t.g, t.b, l.hue, !0), R(), q(), de(B.value));
+        }
+      }
+    }, Q = () => {
+      const t = a.value.find((e) => e.select == !0);
+      t && (N.value = Ee(t.r, t.g, t.b).toUpperCase()), de(B.value);
+    }, Te = (t) => {
+      I("last-used-pick", t);
+    };
+    window.EyeDropper && (S.value = !0);
+    const Qe = (t = "") => {
+      if (f.value == "gradient") {
+        let e = t.includes("linear") ? "linear" : "radial", l = [];
+        if (y.value = e, e == "linear") {
+          let n = /^linear-gradient\((.*)\)$/, r = t.replace(";", "").trim().match(n), s = /,\s*(?![^()]*\))/;
+          if (r) {
+            let p = r[1].split(s);
+            for (let m = 0; m < p.length; m++) {
+              const g = p[m];
+              let d = {
+                id: m,
+                r: 0,
+                g: 0,
+                b: 0,
+                a: 100,
+                percent: 100,
+                hue: 0,
+                select: !1
+              };
+              if (g.includes("deg"))
+                x.angle = parseInt(g.replace("deg", ""));
+              else if (g.includes("rgba")) {
+                let v = g.trim().replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
+                v = v.filter((G) => G.trim() !== ""), d.r = parseInt(v[0]), d.g = parseInt(v[1]), d.b = parseInt(v[2]), d.a = parseFloat(v[3]) * 100, d.percent = parseInt(v[4]), l.push(d);
+              } else if (g.includes("rgb")) {
+                let v = g.trim().replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
+                v = v.filter((G) => G.trim() !== ""), d.r = parseInt(v[0]), d.g = parseInt(v[1]), d.b = parseInt(v[2]), d.percent = parseInt(v[3]), l.push(d);
+              }
+            }
+          }
+        } else {
+          let n = /^radial-gradient\((.*)\)$/, r = t.replace(";", "").trim().match(n), s = /,\s*(?![^()]*\))/;
+          if (r) {
+            let p = r[1].split(s);
+            for (let m = 0; m < p.length; m++) {
+              const g = p[m];
+              let d = {
+                id: m,
+                r: 0,
+                g: 0,
+                b: 0,
+                a: 100,
+                percent: 100,
+                hue: 0,
+                select: !1
+              };
+              if (g.includes("circle at")) {
+                let v = g.replace("circle at ", "").replace(" ", "").replace(/%/g, " ").trim().split(" ");
+                x.percentageX = parseInt(v[0]), x.percentageY = parseInt(v[1]);
+              } else if (g.includes("rgba")) {
+                let v = g.replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
+                v = v.filter((G) => G.trim() !== ""), d.r = parseInt(v[0]), d.g = parseInt(v[1]), d.b = parseInt(v[2]), d.a = parseFloat(v[3]) * 100, d.percent = parseInt(v[4]), l.push(d);
+              } else if (g.includes("rgb")) {
+                let v = g.replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
+                v = v.filter((G) => G.trim() !== ""), d.r = parseInt(v[0]), d.g = parseInt(v[1]), d.b = parseInt(v[2]), d.percent = parseInt(v[3]), l.push(d);
+              }
+            }
+          }
+        }
+        l.length > 1 && (a.value = l, a.value[0].select = !0, A.value = a.value[0].a);
+      } else if (t) {
+        let e = {
+          r: 0,
+          g: 0,
+          b: 0,
+          a: 0
+        };
+        if (t.includes("#"))
+          if (t.length >= 8)
+            e = ut(t);
+          else {
+            let l = be(t);
+            l ? (e.a = 1, e.r = l.r, e.g = l.g, e.b = l.b) : e = null;
+          }
+        else if (t.includes("rgb"))
+          if (t.includes("rgba"))
+            e = dt(t);
+          else {
+            let l = ct(t);
+            l ? (e.a = 1, e.r = l.r, e.g = l.g, e.b = l.b) : e = null;
+          }
+        e && (a.value[0].r = e.r, a.value[0].b = e.b, a.value[0].g = e.g, a.value[0].a = parseInt((e.a * 100).toFixed(0)), A.value = a.value[0].a, a.value[0].hue = 0);
+      }
+    }, de = (t) => {
+      const e = a.value.find((l) => l.select == !0);
+      if (e) {
+        switch (t) {
+          case "RGB":
+            break;
+          case "HSL": {
+            const { h: l, s: n, l: r } = Xe(e.r, e.g, e.b);
+            L.h = Math.round(l), L.s = Math.round(n * 100), L.l = Math.round(r * 100);
+            break;
+          }
+        }
+        B.value = t;
+      }
+    }, me = (t) => {
+      t && Qe(t), ve();
+    };
+    _(
+      () => c.modelValue,
+      (t, e) => {
+        t !== e && t !== b.value && (a.value.forEach((l) => {
+          const n = T == null ? void 0 : T.querySelector(`#clr-gb-${l.id}`);
+          n == null || n.remove();
+        }), me(t));
+      }
+    );
+    const _e = (t) => {
+      a.value.forEach((e) => {
+        const l = T == null ? void 0 : T.querySelector(`#clr-gb-${e.id}`);
+        l == null || l.remove();
+      }), t !== "solid" ? (f.value = "gradient", setTimeout(() => {
+        var e;
+        T = (e = o.value) == null ? void 0 : e.querySelector(".gradient-bar"), We(t), ve();
+      }, 200)) : t === "solid" && (f.value = "solid", a.value = a.value.map((e) => (e.select = !1, e)), a.value[0].select = !0, setTimeout(() => {
+        me(c.modelValue);
+      }, 200));
+    };
+    return Ne(() => {
+      var t;
+      f.value = c.modelValue.includes("linear") || c.modelValue.includes("radial") ? "gradient" : "solid", f.value == "gradient" && (T = (t = o.value) == null ? void 0 : t.querySelector(".gradient-bar")), me(c.modelValue), de(B.value), at(() => {
+        Y.value = !0;
+      });
+    }), (t, e) => ($(), C("div", {
+      ref_key: "pickerTemplateRef",
+      ref: o,
+      class: J(["ck-cp-container", i.disabled ? "ck-cp-disabled " : ""]),
+      "cp-theme": i.theme
+    }, [
+      i.variant == "gradient" ? ($(), C("div", Ht, [
+        D(Rt, {
+          class: "mr-auto",
+          variant: i.variant,
+          mode: f.value,
+          "model-value": i.modelValue,
+          iconClasses: i.iconClasses,
+          gradientType: y.value,
+          onOnChangeMode: _e
+        }, null, 8, ["variant", "mode", "model-value", "iconClasses", "gradientType"])
+      ])) : H("", !0),
+      f.value == "gradient" && i.variant == "gradient" ? ($(), C("div", Dt, [
+        D($t, {
+          gradientType: y.value,
+          onOnAddColor: Ae,
+          onOnMouseDown: Ie,
+          onOnDeleteColor: je
+        }, null, 8, ["gradientType"]),
+        D(Ct, {
+          percentageY: x.percentageY,
+          "onUpdate:percentageY": e[0] || (e[0] = (l) => x.percentageY = l),
+          angle: x.angle,
+          "onUpdate:angle": e[1] || (e[1] = (l) => x.angle = l),
+          percentageX: x.percentageX,
+          "onUpdate:percentageX": e[2] || (e[2] = (l) => x.percentageX = l),
+          inputType: B.value,
+          mode: f.value,
+          gradientType: y.value,
+          onOnInput: R
+        }, null, 8, ["percentageY", "angle", "percentageX", "inputType", "mode", "gradientType"])
+      ])) : ($(), C("div", Et, [
+        i.presetColors ? ($(), C("div", Xt, [
+          e[10] || (e[10] = w("div", { class: "text-oc-text-400 text-sm my-3 font-medium" }, "Choose color", -1)),
+          w("div", Mt, [
+            ($(!0), C(Re, null, Be(i.presetColors, (l) => ($(), C("div", {
+              key: `color-${l}`,
+              class: "ck-cp-color-item !w-[32px] !h-[32px]",
+              style: W(`background:${l}`),
+              onClick: (n) => Te(l)
+            }, null, 12, Ut))), 128))
+          ])
+        ])) : H("", !0)
+      ])),
+      D(St, { onOnMouseDown: Oe }),
+      w("div", Nt, [
+        D(It, {
+          class: J(S.value ? "max-w-[90%]" : ""),
+          modelValue: F.value,
+          "onUpdate:modelValue": e[3] || (e[3] = (l) => F.value = l),
+          onOnInput: e[4] || (e[4] = (l) => ge(!1)),
+          onOnChange: Pe
+        }, null, 8, ["class", "modelValue"]),
+        S.value ? ($(), C("button", {
+          key: 0,
+          id: "cp-btn-eyedropper",
+          type: "button",
+          class: "cp-btn",
+          style: { padding: "7px" },
+          onClick: ze
+        }, e[11] || (e[11] = [
+          w("svg", {
+            version: "1.1",
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "32",
+            height: "32",
+            viewBox: "0 0 32 32"
+          }, [
+            w("path", { d: "M21.35 1.825l-6.344 6.35-0.588-0.588c-0.781-0.781-2.050-0.781-2.831 0s-0.781 2.050 0 2.831l10 10c0.781 0.781 2.050 0.781 2.831 0s0.781-2.050 0-2.831l-0.587-0.587 6.344-6.35c2.438-2.438 2.438-6.388 0-8.819s-6.387-2.438-8.819 0zM3.462 20.206c-0.938 0.938-1.462 2.212-1.462 3.538v2.65l-1.663 2.494c-0.531 0.794-0.425 1.85 0.25 2.525s1.731 0.781 2.525 0.25l2.494-1.663h2.65c1.325 0 2.6-0.525 3.537-1.462l7.544-7.544-2.831-2.831-7.544 7.544c-0.188 0.188-0.444 0.294-0.706 0.294h-2.256v-2.256c0-0.262 0.106-0.519 0.294-0.706l7.544-7.544-2.831-2.831-7.544 7.544z" })
+          ], -1)
+        ]))) : H("", !0)
+      ]),
+      i.showAlpha ? ($(), P(ht, {
+        key: 3,
+        modelValue: A.value,
+        "onUpdate:modelValue": e[5] || (e[5] = (l) => A.value = l),
+        onOnInput: e[6] || (e[6] = (l) => ke(l.target.value))
+      }, null, 8, ["modelValue"])) : H("", !0),
+      nt(w("div", Ot, null, 512), [
+        [rt, !1]
+      ]),
+      w("div", Gt, [
+        D(mt, {
+          "model-value": B.value,
+          "onUpdate:modelValue": de
+        }, null, 8, ["model-value"]),
+        Y.value && i.showInputSet ? ($(), C("div", Pt, [
+          B.value == "HEX" ? ($(), P(pt, {
+            key: 0,
+            modelValue: N.value,
+            "onUpdate:modelValue": [
+              e[7] || (e[7] = (l) => N.value = l),
+              Je
+            ]
+          }, null, 8, ["modelValue"])) : H("", !0),
+          B.value == "RGB" ? ($(), P(Me, {
+            key: 1,
+            "rgb-value": a.value.find((l) => l.select == !0),
+            onUpdateRgbValue: Ke
+          }, null, 8, ["rgb-value"])) : H("", !0),
+          B.value == "HSL" ? ($(), P(Me, {
+            key: 2,
+            "input-type": "HSL",
+            "hsl-value": L,
+            onUpdateHslValue: Ze
+          }, null, 8, ["hsl-value"])) : H("", !0),
+          i.showAlpha ? ($(), P(vt, {
+            key: 3,
+            modelValue: A.value,
+            "onUpdate:modelValue": [
+              e[8] || (e[8] = (l) => A.value = l),
+              e[9] || (e[9] = (l) => ke(l))
+            ]
+          }, null, 8, ["modelValue"])) : H("", !0)
+        ])) : H("", !0)
+      ]),
+      e[12] || (e[12] = w("div", { class: "text-oc-text-400 text-sm my-3 font-medium font-inter" }, "Last used", -1)),
+      M.value.length > 0 && i.showColorList ? ($(), C("div", Yt, [
+        ($(!0), C(Re, null, Be(j.value, (l) => ($(), C("div", {
+          key: `color-${l}`,
+          class: "ck-cp-color-item !w-[32px] !h-[32px]",
+          style: W(`background:${l}`),
+          onClick: (n) => Te(l)
+        }, null, 12, Ft))), 128))
+      ])) : H("", !0)
+    ], 10, Bt));
+  }
+};
+export {
+  jt as default
+};