@cldemo/ui-kit 1.0.5 → 1.0.7

package/buildLibs/utils/Web/ClColorpicker.js

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