@cldemo/ui-kit 1.0.0

package/buildLibs/utils/Web/ClColorpicker.js

@@ -0,0 +1,1130 @@
+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