import { defineComponent as I, ref as x, reactive as F, computed as E, onMounted as L, nextTick as T, watch as D, openBlock as k, createElementBlock as V, normalizeStyle as N, createElementVNode as h, normalizeClass as te, Fragment as pe, renderList as de, createVNode as w, useSlots as ve, renderSlot as me, createCommentVNode as A, withCtx as ee, toDisplayString as Ce, unref as J, createBlock as Q } from "vue";
import { C as M } from "../Shared/base-PQGakkrl.js";
import { _ as be } from "../Shared/Popup.vue_vue_type_script_setup_true_lang-CbaTn8Yz.js";
import { D as X } from "../Shared/drag-CzfhSB0g.js";
import "js-cookie";
import "decimal.js";
import { C as ge } from "../Shared/index-BnerInzC.js";
import { _ as S } from "../Shared/Index.vue_vue_type_script_setup_true_lang-DWw1B8Z2.js";
import { _ as ke } from "../Shared/Index.vue_vue_type_script_setup_true_lang-DKAxas3I.js";
import { u as ye } from "../Shared/language-DxTlvFs2.js";
const ae = (s, e) => Object.prototype.hasOwnProperty.call(s, e), we = (s, e, o) => [
  s,
  e * o / ((s = (2 - e) * o) < 1 ? s : 2 - s) || 0,
  s / 2
], Ve = (s) => typeof s == "string" && s.includes(".") && Number.parseFloat(s) === 1, _e = (s) => typeof s == "string" && s.includes("%"), U = (s, e) => {
  Ve(s) && (s = "100%");
  const o = _e(s);
  return s = Math.min(e, Math.max(0, Number.parseFloat(`${s}`))), o && (s = Number.parseInt(`${s * e}`, 10) / 100), Math.abs(s - e) < 1e-6 ? 1 : s % e / Number.parseFloat(e);
}, re = { 10: "A", 11: "B", 12: "C", 13: "D", 14: "E", 15: "F" }, W = (s) => {
  s = Math.min(Math.round(s), 255);
  const e = Math.floor(s / 16), o = s % 16;
  return `${re[e] || e}${re[o] || o}`;
}, ie = ({ r: s, g: e, b: o }) => Number.isNaN(+s) || Number.isNaN(+e) || Number.isNaN(+o) ? "" : `#${W(s)}${W(e)}${W(o)}`, K = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 }, H = (s) => s.length === 2 ? (K[s[0].toUpperCase()] || +s[0]) * 16 + (K[s[1].toUpperCase()] || +s[1]) : K[s[1].toUpperCase()] || +s[1], $e = (s, e, o) => {
  e = e / 100, o = o / 100;
  let n = e;
  const c = Math.max(o, 0.01);
  o *= 2, e *= o <= 1 ? o : 2 - o, n *= c <= 1 ? c : 2 - c;
  const a = (o + e) / 2, u = o === 0 ? 2 * n / (c + n) : 2 * e / (o + e);
  return {
    h: s,
    s: u * 100,
    v: a * 100
  };
}, ue = (s, e, o) => {
  s = U(s, 255), e = U(e, 255), o = U(o, 255);
  const n = Math.max(s, e, o), c = Math.min(s, e, o);
  let a = 0;
  const u = n, t = n - c, i = n === 0 ? 0 : t / n;
  if (n === c)
    a = 0;
  else {
    switch (n) {
      case s: {
        a = (e - o) / t + (e < o ? 6 : 0);
        break;
      }
      case e: {
        a = (o - s) / t + 2;
        break;
      }
      case o: {
        a = (s - e) / t + 4;
        break;
      }
    }
    a /= 6;
  }
  return { h: a * 360, s: i * 100, v: u * 100 };
}, z = (s, e, o) => {
  s = U(s, 360) * 6, e = U(e, 100), o = U(o, 100);
  const n = Math.floor(s), c = s - n, a = o * (1 - e), u = o * (1 - c * e), t = o * (1 - (1 - c) * e), i = n % 6, r = [o, u, a, a, t, o][i], p = [t, o, o, u, a, a][i], m = [a, a, t, o, o, u][i];
  return {
    r: Math.round(r * 255),
    g: Math.round(p * 255),
    b: Math.round(m * 255)
  };
};
class Pe {
  _hue = 0;
  _saturation = 100;
  _value = 100;
  _alpha = 100;
  enableAlpha = !1;
  format = "hex";
  value = "";
  selected;
  constructor(e) {
    e = e || {};
    for (const o in e)
      ae(e, o) && (this[o] = e[o]);
    e.value ? this.fromString(e.value) : this.doOnChange();
  }
  set(e, o) {
    if (arguments.length === 1 && typeof e == "object") {
      for (const n in e)
        ae(e, n) && this.set(n, e[n]);
      return;
    }
    this[`_${e}`] = o, this.doOnChange();
  }
  get(e) {
    return e === "alpha" ? Math.floor(this[`_${e}`]) : this[`_${e}`];
  }
  toRgb() {
    return z(this._hue, this._saturation, this._value);
  }
  fromString(e) {
    const o = this._convertValueInfo(e);
    o && (this._hue = o.hue, this._saturation = o.saturation, this._value = o.value, this._alpha = o.alpha, this.doOnChange());
  }
  compare(e) {
    return Math.abs(e._hue - this._hue) < 2 && Math.abs(e._saturation - this._saturation) < 1 && Math.abs(e._value - this._value) < 1 && Math.abs(e._alpha - this._alpha) < 1;
  }
  doOnChange() {
    const { _hue: e, _saturation: o, _value: n, _alpha: c, format: a } = this, u = { hue: e, saturation: o, value: n, alpha: c };
    let t = this._convertFormat(a, u);
    t.length === 0 && (t = this._getValueRGB(u)), this.value = t;
  }
  checkValue(e) {
    let o = !1, n = "";
    if (/^rgb\(/.test(e) ? n = "^[rR][gG][Bb][\\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){2}[\\s]*(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)[\\s]*[\\)]{1}$" : /^rgba\(/.test(e) ? n = "^[rR][gG][Bb][Aa][\\(]([\\s]*(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?)[\\s]*,){3}[\\s]*(1|1.0|0|0.[0-9])[\\s]*[\\)]{1}$" : /^#/.test(e) ? n = "^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$" : /^hsl\(/.test(e) ? n = "^[hH][Ss][Ll][\\(]([\\s]*(2[0-9][0-9]|360|3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*)[\\)]$" : /^hsla\(/.test(e) ? n = "^[hH][Ss][Ll][Aa][\\(]([\\s]*(2[0-9][0-9]|360|3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,){2}([\\s]*(1|1.0|0|0.[0-9])[\\s]*)[\\)]$" : /^hsv\(/.test(e) ? n = "^[hH][Ss][Vv][\\(]([\\s]*(2[0-9][0-9]|360|3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*)[\\)]$" : /^hsla\(/.test(e) && (n = "^[hH][Ss][Vv][Aa][\\(]([\\s]*(2[0-9][0-9]|360|3[0-5][0-9]|[01]?[0-9][0-9]?)[\\s]*,)([\\s]*((100|[0-9][0-9]?)%|0)[\\s]*,){2}([\\s]*(1|1.0|0|0.[0-9])[\\s]*)[\\)]$"), n.length > 0) {
      const c = new RegExp(n);
      o = e.match(c) !== null;
    }
    return o;
  }
  getValueFormat(e, o) {
    const n = this._convertValueInfo(e);
    return n ? this._convertFormat(o, n) : e;
  }
  _convertValueInfo(e) {
    let o = 0, n = 100, c = 100, a = 100;
    if (e) {
      let u;
      if (e.includes("hsl")) {
        const t = e.replace(/hsla|hsl|\(|\)/gm, "").split(/\s|,/g).filter((i) => i !== "").map(
          (i, r) => r > 2 ? Number.parseFloat(i) : Number.parseInt(i, 10)
        );
        t.length === 4 ? (a = Number.parseFloat(t[3].toString()), a = a > 1 ? 1 : a, a = a * 100) : t.length === 3 && (a = 100), t.length >= 3 && (u = $e(t[0], t[1], t[2]));
      } else if (e.includes("hsv")) {
        const t = e.replace(/hsva|hsv|\(|\)/gm, "").split(/\s|,/g).filter((i) => i !== "").map(
          (i, r) => r > 2 ? Number.parseFloat(i) : Number.parseInt(i, 10)
        );
        t.length === 4 ? (a = Number.parseFloat(t[3].toString()), a = a > 1 ? 1 : a, a = a * 100) : t.length === 3 && (a = 100), t.length >= 3 && (u = { h: t[0], s: t[1], v: t[2] });
      } else if (e.includes("rgb")) {
        const t = e.replace(/rgba|rgb|\(|\)/gm, "").split(/\s|,/g).filter((i) => i !== "").map(
          (i, r) => r > 2 ? Number.parseFloat(i) : Number.parseInt(i, 10)
        );
        t.length === 4 ? (a = Number.parseFloat(t[3].toString()), a = a > 1 ? 1 : a, a = a * 100) : t.length === 3 && (a = 100), t.length >= 3 && (u = ue(t[0], t[1], t[2]));
      } else if (e.includes("#")) {
        const t = e.replace("#", "").trim();
        if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$|^[0-9a-fA-F]{8}$/.test(t))
          return;
        let i, r, p;
        t.length === 3 ? (i = H(t[0] + t[0]), r = H(t[1] + t[1]), p = H(t[2] + t[2])) : (t.length === 6 || t.length === 8) && (i = H(t.slice(0, 2)), r = H(t.slice(2, 4)), p = H(t.slice(4, 6))), t.length === 8 ? (a = H(t.slice(6)) / 255, a = a > 1 ? 1 : a, a = a * 100) : (t.length === 3 || t.length === 6) && (a = 100), u = ue(i, r, p);
      }
      u && (o = Math.max(0, Math.min(360, u.h)), n = Math.max(0, Math.min(100, u.s)), c = Math.max(0, Math.min(100, u.v)));
    }
    return {
      hue: o,
      saturation: n,
      value: c,
      alpha: a
    };
  }
  _convertFormat(e, o) {
    let n = "";
    switch (e) {
      case "hsl": {
        n = this._getValueHSL(o);
        break;
      }
      case "hsv": {
        n = this._getValueHSV(o);
        break;
      }
      case "rgb": {
        n = this._getValueRGB(o);
        break;
      }
      case "hex":
        n = this._getValueHEX(o);
    }
    return n;
  }
  _isShowAlpha(e) {
    return e !== 100;
  }
  _getValueHSL(e) {
    const o = Math.floor(e.alpha), n = this._isShowAlpha(e.alpha), c = we(e.hue, e.saturation / 100, e.value / 100), a = Math.round(e.hue), u = Math.round(c[1] * 100), t = Math.round(c[2] * 100);
    return n ? `hsla(${a}, ${u}%, ${t}%, ${o / 100})` : `hsl(${a}, ${u}%, ${t}%)`;
  }
  _getValueHSV(e) {
    const o = Math.floor(e.alpha), n = this._isShowAlpha(o), c = Math.round(e.hue), a = Math.round(e.saturation), u = Math.round(e.value);
    return n ? `hsva(${c}, ${a}%, ${u}%, ${o / 100})` : `hsv(${c}, ${a}%, ${u}%)`;
  }
  _getValueHEX(e) {
    const o = Math.floor(e.alpha);
    return this._isShowAlpha(o) ? `${ie(z(e.hue, e.saturation, e.value))}${W(o * 255 / 100)}` : ie(z(e.hue, e.saturation, e.value));
  }
  _getValueRGB(e) {
    const o = Math.floor(e.alpha), n = this._isShowAlpha(o), { r: c, g: a, b: u } = z(e.hue, e.saturation, e.value);
    return n ? `rgba(${c}, ${a}, ${u}, ${this.get("alpha") / 100})` : `rgb(${c}, ${a}, ${u})`;
  }
}
const Se = /* @__PURE__ */ I({
  name: "ClColorpickerPalette",
  __name: "Palette",
  props: {
    color: {
      type: Object,
      required: !0
    }
  },
  setup(s) {
    const e = s, o = x(null), n = F({
      background: "hsl(0, 100%, 50%)",
      btnLeft: 0,
      btnTop: 0
    }), c = E(() => {
      const i = e.color.get("hue"), r = e.color.get("value");
      return { hue: i, value: r };
    }), a = (i, r) => {
      const m = o.value.getBoundingClientRect();
      let v = r.clientX - m.left, f = r.clientY - m.top;
      v = Math.max(0, v), v = Math.min(v, m.width), f = Math.max(0, f), f = Math.min(f, m.height), n.btnLeft = v, n.btnTop = f, e.color.set({
        saturation: v / m.width * 100,
        value: 100 - f / m.height * 100
      });
    }, u = () => {
      const i = o.value, r = e.color.get("saturation"), p = e.color.get("value"), { clientWidth: m, clientHeight: v } = i;
      n.btnLeft = r * m / 100, n.btnTop = (100 - p) * v / 100, n.background = `hsl(${e.color.get("hue")}, 100%, 50%)`;
    }, t = () => {
      const i = {
        ing: (r, p) => {
          a(r, p);
        },
        end: (r, p) => {
          a(r, p);
        }
      };
      new X(o.value, i), u();
    };
    return L(() => {
      T(() => {
        t();
      });
    }), D(
      () => c.value,
      () => {
        u();
      }
    ), (i, r) => (k(), V("div", {
      ref_key: "refElTopParent",
      ref: o,
      class: "colorPicker-palette",
      style: N({
        backgroundColor: n.background
      })
    }, [
      r[1] || (r[1] = h("div", { class: "colorPicker-palette-white" }, null, -1)),
      r[2] || (r[2] = h("div", { class: "colorPicker-palette-black" }, null, -1)),
      h("div", {
        class: "colorPicker-palette-btn",
        style: N({
          top: n.btnTop + "px",
          left: n.btnLeft + "px"
        })
      }, [...r[0] || (r[0] = [
        h("div", null, null, -1)
      ])], 4)
    ], 4));
  }
}), xe = /* @__PURE__ */ I({
  name: "ClColorpickerHue",
  __name: "Hue",
  props: {
    color: {
      type: Object,
      required: !0
    }
  },
  setup(s) {
    const e = s, o = x(null), n = x(null), c = x(null), a = F({
      btnTop: 0
    }), u = E(() => e.color.get("hue")), t = (v, f) => {
      const y = o.value.getBoundingClientRect();
      let _ = f.clientY - y.top;
      _ = Math.max(0, _), _ = Math.min(_, y.height);
      const $ = Math.round(_ / y.height * 360);
      e.color.set("hue", $);
    }, i = () => {
      const v = o.value, f = e.color.get("hue");
      return Math.round(f * v.offsetHeight / 360);
    }, r = () => {
      a.btnTop = i();
    }, p = () => {
      const v = {
        ing: (f, C) => {
          t(f, C);
        },
        end: (f, C) => {
          t(f, C);
        }
      };
      new X(n.value, v), new X(c.value, v), r();
    };
    L(() => {
      T(() => {
        p();
      });
    }), D(
      () => u.value,
      () => {
        r();
      }
    );
    const m = (v) => {
      if (v.target !== c.value) {
        const C = ge.getClientXY(v);
        t(v, C);
      }
    };
    return (v, f) => (k(), V("div", {
      ref_key: "refElTopParent",
      ref: o,
      class: "colorPicker-hue"
    }, [
      h("div", {
        ref_key: "refElContainer",
        ref: n,
        class: "colorPicker-hue-container",
        onClick: m
      }, null, 512),
      h("div", {
        ref_key: "refElBtn",
        ref: c,
        class: "colorPicker-hue-btn",
        style: N({
          top: a.btnTop + "px"
        })
      }, null, 4)
    ], 512));
  }
}), Fe = /* @__PURE__ */ I({
  name: "ClColorpickerAlpha",
  __name: "Alpha",
  props: {
    color: {
      type: Object,
      required: !0
    }
  },
  setup(s) {
    const e = s, o = x(null), n = x(null), c = x(null), a = F({
      background: null,
      btnLeft: 0
    }), u = E(() => e.color.get("alpha")), t = (f, C) => {
      const _ = o.value.getBoundingClientRect();
      let $ = C.clientX - _.left;
      $ = Math.max(0, $), $ = Math.min($, _.width);
      const O = Math.round($ / _.width * 100);
      e.color.set("alpha", O);
    }, i = () => {
      const f = o.value, C = e.color.get("alpha");
      return Math.round(C * f.offsetWidth / 100);
    }, r = () => {
      if (e.color && e.color.value) {
        const { r: f, g: C, b: y } = e.color.toRgb();
        return `linear-gradient(to right, rgba(${f}, ${C}, ${y}, 0) 0%, rgba(${f}, ${C}, ${y}, 1) 100%)`;
      }
      return null;
    }, p = () => {
      a.btnLeft = i(), a.background = r();
    }, m = () => {
      const f = {
        ing: (C, y) => {
          t(C, y);
        },
        end: (C, y) => {
          t(C, y);
        }
      };
      new X(n.value, f), new X(c.value, f), p();
    };
    L(() => {
      T(() => {
        m();
      });
    }), D(
      () => u.value,
      () => {
        p();
      }
    ), D(
      () => e.color.value,
      () => {
        p();
      }
    );
    const v = (f) => {
      if (f.target !== c.value) {
        const y = ge.getClientXY(f);
        t(f, y);
      }
    };
    return (f, C) => (k(), V("div", {
      ref_key: "refElTopParent",
      ref: o,
      class: "colorPicker-alpha"
    }, [
      h("div", {
        ref_key: "refElContainer",
        ref: n,
        class: "colorPicker-alpha-container",
        style: N({
          background: a.background
        }),
        onClick: v
      }, null, 4),
      h("div", {
        ref_key: "refElBtn",
        ref: c,
        class: "colorPicker-alpha-btn",
        style: N({
          left: a.btnLeft + "px"
        })
      }, null, 4)
    ], 512));
  }
}), fe = /* @__PURE__ */ I({
  name: "ClColorpickerItemblock",
  __name: "ItemBlock",
  props: {
    className: String,
    color: String
  },
  emits: ["onClick"],
  setup(s, { emit: e }) {
    const o = s, n = e, c = E(() => {
      let u = "colorPicker-itemBlock ";
      const { className: t } = o;
      return t && !M.isEmpty(t) && (u += t), u;
    }), a = () => {
      n("onClick", o.color || "");
    };
    return (u, t) => (k(), V("div", {
      class: te(c.value),
      onClick: a
    }, [
      t[0] || (t[0] = h("div", { class: "colorPicker-bgAlpha" }, null, -1)),
      h("div", {
        style: N({ background: s.color })
      }, null, 4)
    ], 2));
  }
}), Me = { class: "colorPicker-preset" }, Oe = /* @__PURE__ */ I({
  name: "ClColorpickerPreset",
  __name: "Preset",
  emits: ["onClick"],
  setup(s, { emit: e }) {
    const o = e, n = F({
      keyIndex: `ColorpickerPreset-${M.getRandom(8)}`
    }), c = x([]), a = () => {
      const t = [
        "#000000",
        "#ffffff",
        "#f44336",
        "#E91E63",
        "#9c27b0",
        "#673AB7",
        "#3F51B5",
        "#2196F3",
        "#03A9F4",
        "#00BCD4",
        "#009688",
        "#4CAF50",
        "#8BC34A",
        "#CDDC39",
        "#FFEB3B",
        "#FFC107",
        "#FF9800",
        "#FF5722",
        "#795548",
        "#9E9E9E",
        "#607D8B",
        "rgba(255, 69, 0, 0.68)",
        "rgba(31, 147, 255, 0.73)",
        "rgba(0, 0, 0, 0)"
      ];
      c.value = t;
    };
    L(() => {
      a();
    });
    const u = (t) => {
      o("onClick", t);
    };
    return (t, i) => (k(), V("div", Me, [
      h("ul", null, [
        (k(!0), V(pe, null, de(c.value, (r, p) => (k(), V("li", {
          key: `${n.keyIndex}-${p}`
        }, [
          w(fe, {
            color: r,
            onOnClick: u
          }, null, 8, ["color"])
        ]))), 128))
      ])
    ]));
  }
}), Be = { class: "colorPicker-value" }, Ee = {
  key: 0,
  class: "colorPicker-hex"
}, Te = {
  key: 1,
  class: "colorPicker-rgb"
}, Ie = {
  key: 2,
  class: "colorPicker-hsl"
}, Ae = {
  key: 3,
  class: "colorPicker-hsv"
}, De = /* @__PURE__ */ I({
  name: "ClColorpickerValue",
  __name: "Value",
  props: {
    color: {
      type: Object,
      required: !0
    }
  },
  emits: ["onChangeType"],
  setup(s, { expose: e, emit: o }) {
    const n = s, c = o, a = F({
      type: "hex",
      hex: "",
      rgb: "",
      hsl: "",
      hsv: ""
    }), u = x(""), t = F({
      r: "",
      g: "",
      b: "",
      a: ""
    }), i = F({
      h: "",
      s: "",
      l: "",
      a: ""
    }), r = F({
      h: "",
      s: "",
      v: "",
      a: ""
    }), p = {
      typeList: ["hex", "rgb", "hsl", "hsv"]
    }, m = E(() => n.color.value), v = (d) => {
      const g = d.substring(d.indexOf("(") + 1, d.indexOf(")")).split(",").map((P) => M.trim(P));
      return g.length === 3 && g.push("1"), g;
    }, f = (d, l) => {
      const g = d || m.value, { color: P } = n, le = l === "hex" ? g : P.getValueFormat(g, "hex"), oe = P.getValueFormat(g, "rgb"), ne = P.getValueFormat(g, "hsl"), se = P.getValueFormat(g, "hsv");
      a.hex = le, a.rgb = oe, a.hsl = ne, a.hsv = se, T(() => {
        u.value = le;
        const j = v(oe);
        t.r = j[0], t.g = j[1], t.b = j[2], t.a = j[3];
        const q = v(ne);
        i.h = q[0], i.s = q[1], i.l = q[2], i.a = q[3];
        const Y = v(se);
        r.h = Y[0], r.s = Y[1], r.v = Y[2], r.a = Y[3];
      });
    }, C = (d) => {
      let l = p.typeList.indexOf(a.type);
      l += d;
      const g = p.typeList.length;
      l < 0 ? l = g - 1 : l >= g && (l = 0);
      const P = p.typeList[l];
      a.type = P, c("onChangeType", P);
    }, y = (d) => {
      let l = "";
      switch (d) {
        case "hex": {
          u.value.length > 0 && (l = u.value);
          break;
        }
        case "rgb": {
          t.r.length > 0 && t.g.length > 0 && t.b.length > 0 && t.a.length > 0 && (l = `rgba(${t.r}, ${t.g}, ${t.b},${t.a})`);
          break;
        }
        case "hsl": {
          i.h.length > 0 && i.s.length > 0 && i.l.length > 0 && i.a.length > 0 && (l = `hsla(${i.h}, ${i.s}, ${i.l},${i.a})`);
          break;
        }
        case "hsv": {
          r.h.length > 0 && r.s.length > 0 && r.v.length > 0 && r.a.length > 0 && (l = `hsva(${r.h}, ${r.s}, ${r.v},${r.a})`);
          break;
        }
      }
      if (l.length > 0 && n.color.checkValue(l)) {
        const g = n.color.getValueFormat(l, d);
        l !== g && (f(l, d), T(() => {
          n.color.fromString(l);
        }), c("onChangeType", d));
      }
    }, _ = () => {
      f();
    };
    L(() => {
      T(() => {
        _();
      });
    }), D(
      () => m.value,
      (d) => {
        const l = n.color.getValueFormat(d, "rgb");
        a.rgb !== l && f();
      }
    );
    const $ = () => {
      y("hex");
    }, O = () => {
      y("rgb");
    }, B = () => {
      y("hsl");
    }, R = () => {
      y("hsv");
    }, G = () => {
      C(-1);
    }, Z = () => {
      C(1);
    };
    return e({
      setType: (d) => {
        a.type = d;
      }
    }), (d, l) => (k(), V("div", Be, [
      h("div", null, [
        a.type === "hex" ? (k(), V("div", Ee, [
          h("div", null, [
            w(S, {
              value: u.value,
              "onUpdate:value": l[0] || (l[0] = (g) => u.value = g),
              isClean: !1,
              onOnChange: $
            }, null, 8, ["value"]),
            l[13] || (l[13] = h("div", { class: "colorPicker-value-lable" }, "十六进制", -1))
          ])
        ])) : a.type === "rgb" ? (k(), V("div", Te, [
          h("div", null, [
            w(S, {
              value: t.r,
              "onUpdate:value": l[1] || (l[1] = (g) => t.r = g),
              isClean: !1,
              onOnChange: O
            }, null, 8, ["value"]),
            l[14] || (l[14] = h("div", { class: "colorPicker-value-lable" }, "R", -1))
          ]),
          h("div", null, [
            w(S, {
              value: t.g,
              "onUpdate:value": l[2] || (l[2] = (g) => t.g = g),
              isClean: !1,
              onOnChange: O
            }, null, 8, ["value"]),
            l[15] || (l[15] = h("div", { class: "colorPicker-value-lable" }, "G", -1))
          ]),
          h("div", null, [
            w(S, {
              value: t.b,
              "onUpdate:value": l[3] || (l[3] = (g) => t.b = g),
              isClean: !1,
              onOnChange: O
            }, null, 8, ["value"]),
            l[16] || (l[16] = h("div", { class: "colorPicker-value-lable" }, "B", -1))
          ]),
          h("div", null, [
            w(S, {
              value: t.a,
              "onUpdate:value": l[4] || (l[4] = (g) => t.a = g),
              isClean: !1,
              onOnChange: O
            }, null, 8, ["value"]),
            l[17] || (l[17] = h("div", { class: "colorPicker-value-lable" }, "A", -1))
          ])
        ])) : a.type === "hsl" ? (k(), V("div", Ie, [
          h("div", null, [
            w(S, {
              value: i.h,
              "onUpdate:value": l[5] || (l[5] = (g) => i.h = g),
              isClean: !1,
              onOnChange: B
            }, null, 8, ["value"]),
            l[18] || (l[18] = h("div", { class: "colorPicker-value-lable" }, "H", -1))
          ]),
          h("div", null, [
            w(S, {
              value: i.s,
              "onUpdate:value": l[6] || (l[6] = (g) => i.s = g),
              isClean: !1,
              onOnChange: B
            }, null, 8, ["value"]),
            l[19] || (l[19] = h("div", { class: "colorPicker-value-lable" }, "S", -1))
          ]),
          h("div", null, [
            w(S, {
              value: i.l,
              "onUpdate:value": l[7] || (l[7] = (g) => i.l = g),
              isClean: !1,
              onOnChange: B
            }, null, 8, ["value"]),
            l[20] || (l[20] = h("div", { class: "colorPicker-value-lable" }, "L", -1))
          ]),
          h("div", null, [
            w(S, {
              value: i.a,
              "onUpdate:value": l[8] || (l[8] = (g) => i.a = g),
              isClean: !1,
              onOnChange: B
            }, null, 8, ["value"]),
            l[21] || (l[21] = h("div", { class: "colorPicker-value-lable" }, "A", -1))
          ])
        ])) : a.type === "hsv" ? (k(), V("div", Ae, [
          h("div", null, [
            w(S, {
              value: r.h,
              "onUpdate:value": l[9] || (l[9] = (g) => r.h = g),
              isClean: !1,
              onOnChange: R
            }, null, 8, ["value"]),
            l[22] || (l[22] = h("div", { class: "colorPicker-value-lable" }, "H", -1))
          ]),
          h("div", null, [
            w(S, {
              value: r.s,
              "onUpdate:value": l[10] || (l[10] = (g) => r.s = g),
              isClean: !1,
              onOnChange: R
            }, null, 8, ["value"]),
            l[23] || (l[23] = h("div", { class: "colorPicker-value-lable" }, "S", -1))
          ]),
          h("div", null, [
            w(S, {
              value: r.v,
              "onUpdate:value": l[11] || (l[11] = (g) => r.v = g),
              isClean: !1,
              onOnChange: R
            }, null, 8, ["value"]),
            l[24] || (l[24] = h("div", { class: "colorPicker-value-lable" }, "V", -1))
          ]),
          h("div", null, [
            w(S, {
              value: r.a,
              "onUpdate:value": l[12] || (l[12] = (g) => r.a = g),
              isClean: !1,
              onOnChange: R
            }, null, 8, ["value"]),
            l[25] || (l[25] = h("div", { class: "colorPicker-value-lable" }, "A", -1))
          ])
        ])) : (k(), V(pe, { key: 4 }, [], 64))
      ]),
      h("div", null, [
        h("i", {
          class: "clIconFont clIcon-caret-up",
          onClick: G
        }),
        h("i", {
          class: "clIconFont clIcon-caret-down",
          onClick: Z
        })
      ])
    ]));
  }
}), Re = {
  key: 0,
  class: "colorPicker-copy-icon"
}, ce = /* @__PURE__ */ I({
  name: "ClColorpickerCopy",
  __name: "Copy",
  props: {
    className: String,
    color: String,
    getTxtCallback: Function
  },
  setup(s) {
    const e = s, o = ve(), n = F({
      isHover: !1
    }), c = E(() => !M.isUndefined(o.default)), a = E(() => {
      let r = !1;
      return c.value ? r = n.isHover : r = !0, r;
    }), u = E(() => {
      const r = {
        "colorPicker-copy": !0,
        "colorPicker-copy-hover": n.isHover
      }, { className: p } = e;
      return p && !M.isEmpty(p) && p.split(" ").forEach((m) => {
        M.isEmpty(m) || (r[m] = !0);
      }), r;
    }), t = () => {
      c.value && (n.isHover = !0);
    }, i = () => {
      c.value && (n.isHover = !1);
    };
    return (r, p) => (k(), V("div", {
      class: te(u.value),
      onMouseenter: t,
      onMouseleave: i
    }, [
      me(r.$slots, "default"),
      a.value ? (k(), V("div", Re, [
        w(ke, {
          textLabel: s.getTxtCallback ? s.getTxtCallback() : s.color || ""
        }, null, 8, ["textLabel"])
      ])) : A("", !0)
    ], 34));
  }
}), He = { class: "colorPicker-wrapper" }, Ne = { class: "colorPicker-container" }, Le = { key: 0 }, Ue = {
  key: 0,
  class: "colorPicker-format"
}, Xe = { class: "colorPicker-format-show" }, Ge = {
  key: 1,
  class: "colorPicker-operate"
}, je = ["title"], qe = ["title"], Ye = ["title"], he = /* @__PURE__ */ I({
  name: "ClColorpickerBase",
  __name: "Color",
  props: {
    value: String,
    disabled: {
      type: Boolean,
      default: !1
    },
    isAlpha: {
      type: Boolean,
      default: !0
    },
    isFormat: {
      type: Boolean,
      default: !0
    },
    isOperate: {
      type: Boolean,
      default: !0
    },
    isPreset: {
      type: Boolean,
      default: !0
    },
    isDropdown: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["onChange", "onSubmit", "onInit"],
  setup(s, { expose: e, emit: o }) {
    const n = s, c = o, { optPageLanguage: a, getPageLanguage: u } = ye();
    u("common");
    const t = x(null), i = x(null), r = F({
      isShowColorResult: !1,
      colorResult: "",
      formatShow: "hex"
    }), p = F(
      new Pe({
        value: n.value,
        format: "",
        enableAlpha: !0
      })
    ), m = {
      isColorChangeResult: !0
    }, v = () => p.get("alpha").toString() === "100" ? "hex" : "rgb", f = (l, g = !0) => {
      let P = "";
      l && !M.isEmpty(l) && r.isShowColorResult && (P = p.getValueFormat(l, r.formatShow)), r.colorResult = P, g && c("onChange", P);
    }, C = (l) => {
      l && !M.isEmpty(l) ? (r.isShowColorResult = !0, p.fromString(l)) : (r.isShowColorResult = !1, m.isColorChangeResult = !1, f("", !1), p.fromString(""), T(() => {
        m.isColorChangeResult = !0;
      }));
    }, y = () => {
      const { value: l } = n;
      C(l), c("onInit");
    };
    L(() => {
      T(() => {
        y();
      });
    }), D(
      () => n.value,
      (l) => {
        C(l);
      }
    ), D(
      () => p.value,
      (l) => {
        M.isEmpty(n.value) && (r.isShowColorResult = !0), m.isColorChangeResult && f(l), m.isColorChangeResult = !0;
      }
    );
    const _ = () => p.getValueFormat(p.value, r.formatShow), $ = (l) => {
      p.fromString(l);
    }, O = (l) => {
      r.formatShow = l, f(p.value, !1);
    }, B = () => {
      const l = n.value || "";
      r.isShowColorResult = !M.isEmpty(l), f(l), m.isColorChangeResult = !1, p.fromString(l);
    }, R = () => {
      m.isColorChangeResult = !1, f(""), p.fromString("");
    }, G = () => {
      c("onSubmit");
    };
    return e({
      getValue: () => {
        let l = r.colorResult;
        if (l.length > 0) {
          const g = v();
          l = p.getValueFormat(l, g);
        }
        return l;
      },
      setValue: (l) => {
        C(l);
      },
      initValueType: () => {
        const l = v();
        r.formatShow = l, i.value && i.value.setType(l);
      }
    }), (l, g) => (k(), V("div", He, [
      h("div", Ne, [
        h("div", null, [
          w(Se, { color: p }, null, 8, ["color"]),
          w(xe, { color: p }, null, 8, ["color"])
        ]),
        s.isAlpha ? (k(), V("div", Le, [
          w(Fe, { color: p }, null, 8, ["color"]),
          g[0] || (g[0] = h("div", null, null, -1))
        ])) : A("", !0)
      ]),
      s.isFormat ? (k(), V("div", Ue, [
        h("div", Xe, [
          w(ce, {
            className: "colorPicker-tipCurrent",
            getTxtCallback: _
          }, {
            default: ee(() => [
              w(fe, {
                color: p.value
              }, null, 8, ["color"])
            ]),
            _: 1
          })
        ]),
        w(De, {
          ref_key: "refElColorValue",
          ref: i,
          color: p,
          onOnChangeType: O
        }, null, 8, ["color"])
      ])) : A("", !0),
      s.isOperate ? (k(), V("div", Ge, [
        h("div", {
          ref_key: "refElColorResult",
          ref: t
        }, Ce(r.colorResult), 513),
        h("div", null, [
          h("div", { onClick: B }, [
            h("i", {
              class: "clIconFont clIcon-restore",
              title: J(a).restore
            }, null, 8, je)
          ]),
          h("div", { onClick: R }, [
            h("i", {
              class: "clIconFont clIcon-clear",
              title: J(a).clearEmpty
            }, null, 8, qe)
          ]),
          w(ce, {
            color: r.colorResult
          }, null, 8, ["color"]),
          s.isDropdown ? (k(), V("div", {
            key: 0,
            onClick: G
          }, [
            h("i", {
              class: "clIconFont clIcon-check",
              title: J(a).submit
            }, null, 8, Ye)
          ])) : A("", !0)
        ])
      ])) : A("", !0),
      s.isPreset ? (k(), Q(Oe, {
        key: 2,
        onOnClick: $
      })) : A("", !0)
    ]));
  }
}), ze = { class: "colorpicker-dropdown-text" }, st = /* @__PURE__ */ I({
  name: "ClColorpicker",
  __name: "Index",
  props: {
    value: String,
    className: String,
    disabled: {
      type: Boolean,
      default: !1
    },
    isAlpha: {
      type: Boolean,
      default: !0
    },
    isFormat: {
      type: Boolean,
      default: !0
    },
    isOperate: {
      type: Boolean,
      default: !0
    },
    isPreset: {
      type: Boolean,
      default: !0
    },
    isDropdown: {
      type: Boolean,
      default: !0
    }
  },
  emits: ["update:value", "onChange", "onInit"],
  setup(s, { expose: e, emit: o }) {
    const n = s, c = o, a = x(null), u = x(null), t = F({
      isInitShow: !n.isDropdown,
      dropdownTextValue: "",
      currentValue: ""
    }), i = {
      lastValue: ""
    }, r = E(() => {
      let b = "panel-colorPicker ";
      const { className: d } = n;
      return d && !M.isEmpty(d) && (b += d), b;
    }), p = () => {
      const b = t.currentValue;
      let d = !1;
      n.isDropdown ? d = b !== i.lastValue : d = !0, d && (i.lastValue = b, c("update:value", b), c("onChange", b));
    }, m = (b) => {
      let d = "transparent";
      b && !M.isEmpty(b) && (d = b), t.dropdownTextValue = d;
    }, v = (b) => {
      const d = b || "";
      i.lastValue = d, n.isDropdown || (t.currentValue = d), m(d);
    }, f = () => {
      const b = u.value.getValue();
      t.dropdownTextValue = b, t.currentValue = b, p();
    }, C = () => {
      v(n.value);
    };
    D(
      () => n.value,
      (b) => {
        v(b);
      }
    ), L(() => {
      T(() => {
        C();
      });
    });
    const y = () => {
    }, _ = (b) => {
      n.disabled || (b ? u.value && u.value.initValueType() : n.isOperate ? t.currentValue !== u.value.getValue() && t.currentValue === i.lastValue && u.value.setValue(i.lastValue) : f());
    }, $ = () => {
      t.isInitShow = !0, t.currentValue = i.lastValue;
    }, O = () => {
      n.isDropdown || f();
    }, B = () => {
      f(), n.isDropdown && a.value && a.value.setOpen(!1);
    };
    return e({
      getValue: () => t.currentValue,
      getValueData: () => ({ value: t.currentValue }),
      setValue: (b) => {
        v(b);
      }
    }), (b, d) => s.isDropdown ? (k(), Q(be, {
      key: 0,
      ref_key: "refElDropdownLayer",
      ref: a,
      classParent: r.value,
      classDropDown: "colorPicker-dropdown",
      isUseDropdownArrow: !0,
      onOnChangeOpen: _,
      onOnOpenComplete: $
    }, {
      label: ee(() => [
        h("div", ze, [
          d[0] || (d[0] = h("div", { class: "colorPicker-bgAlpha" }, null, -1)),
          h("div", {
            style: N({ "background-color": t.dropdownTextValue })
          }, null, 4),
          d[1] || (d[1] = h("div", { class: "colorpicker-dropdown-arrow" }, [
            h("i", { class: "clIconFont clIcon-angle-down" })
          ], -1))
        ])
      ]),
      dropdown: ee(() => [
        t.isInitShow ? (k(), Q(he, {
          key: 0,
          ref_key: "refElColorpicker",
          ref: u,
          value: t.currentValue,
          isAlpha: s.isAlpha,
          isFormat: s.isFormat,
          isOperate: s.isOperate,
          isPreset: s.isPreset,
          isDropdown: s.isDropdown,
          onOnChange: O,
          onOnSubmit: B,
          onOnInit: y
        }, null, 8, ["value", "isAlpha", "isFormat", "isOperate", "isPreset", "isDropdown"])) : A("", !0)
      ]),
      _: 1
    }, 8, ["classParent"])) : (k(), V("div", {
      key: 1,
      class: te(r.value)
    }, [
      t.isInitShow ? (k(), Q(he, {
        key: 0,
        ref_key: "refElColorpicker",
        ref: u,
        value: t.currentValue,
        disabled: s.disabled,
        isAlpha: s.isAlpha,
        isFormat: s.isFormat,
        isOperate: s.isOperate,
        isPreset: s.isPreset,
        isDropdown: s.isDropdown,
        onOnChange: O,
        onOnSubmit: B,
        onOnInit: y
      }, null, 8, ["value", "disabled", "isAlpha", "isFormat", "isOperate", "isPreset", "isDropdown"])) : A("", !0)
    ], 2));
  }
});
export {
  st as default
};
//# sourceMappingURL=ClColorpicker.js.map
