@cldemo/ui-kit 1.1.0 → 1.1.2

package/buildLibs/modules/colorPicker.js

@@ -1,1196 +1 @@
-import { defineComponent as D, useTemplateRef as M, reactive as E, computed as P, onMounted as L, nextTick as A, watch as R, openBlock as y, createElementBlock as w, normalizeStyle as N, createElementVNode as f, normalizeClass as K, ref as ge, Fragment as ne, renderList as Ce, createVNode as k, useSlots as be, renderSlot as ke, createCommentVNode as I, withCtx as le, toDisplayString as ye, unref as W, createBlock as Z } from "vue";
-import { C as x } from "./shared/base-fr2I80sU.js";
-import { _ as U } from "./shared/Index.vue_vue_type_script_setup_true_lang-DapaVMSO.js";
-import { _ as we } from "./shared/Popup.vue_vue_type_script_setup_true_lang-YVBgERG9.js";
-import { D as G } from "./shared/drag-BBk0X740.js";
-import { C as ve } from "./shared/index-B477PjJ3.js";
-import { _ as S } from "./shared/Index.vue_vue_type_script_setup_true_lang-CVSATrNA.js";
-import { _ as Ve } from "./shared/Index.vue_vue_type_script_setup_true_lang-CSV3c0_h.js";
-import { a as _e } from "./shared/language-pMmux6Js.js";
-/* empty css                          */
-const ue = (o, e) => Object.prototype.hasOwnProperty.call(o, e), $e = (o, e, l) => {
-  const n = (2 - e) * l / 2, c = n === 0 || n === 1 ? 0 : e * l / (n < 0.5 ? n * 2 : 2 - n * 2);
-  return [o, c, n];
-}, Se = (o) => typeof o == "string" && o.includes(".") && Number.parseFloat(o) === 1, xe = (o) => typeof o == "string" && o.includes("%"), X = (o, e) => {
-  Se(o) && (o = "100%");
-  const l = xe(o);
-  return o = Math.min(e, Math.max(0, Number.parseFloat(`${o}`))), l && (o = Number.parseInt(`${o * e}`, 10) / 100), Math.abs(o - e) < 1e-6 ? 1 : o % e / Number.parseFloat(e);
-}, ce = { 10: "A", 11: "B", 12: "C", 13: "D", 14: "E", 15: "F" }, J = (o) => {
-  o = Math.min(Math.round(o), 255);
-  const e = Math.floor(o / 16), l = o % 16;
-  return `${ce[e] || e}${ce[l] || l}`;
-}, pe = ({ r: o, g: e, b: l }) => Number.isNaN(+o) || Number.isNaN(+e) || Number.isNaN(+l) ? "" : `#${J(o)}${J(e)}${J(l)}`, te = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 }, H = (o) => o.length === 2 ? (te[o[0].toUpperCase()] || +o[0]) * 16 + (te[o[1].toUpperCase()] || +o[1]) : te[o[1].toUpperCase()] || +o[1], Ee = (o, e, l) => {
-  e = e / 100, l = l / 100;
-  let n = e;
-  const c = Math.max(l, 0.01);
-  l *= 2, e *= l <= 1 ? l : 2 - l, n *= c <= 1 ? c : 2 - c;
-  const a = (l + e) / 2, p = l === 0 ? 2 * n / (c + n) : 2 * e / (l + e);
-  return {
-    h: o,
-    s: p * 100,
-    v: a * 100
-  };
-}, he = (o, e, l) => {
-  o = X(o, 255), e = X(e, 255), l = X(l, 255);
-  const n = Math.max(o, e, l), c = Math.min(o, e, l);
-  let a = 0;
-  const p = n, t = n - c, r = n === 0 ? 0 : t / n;
-  if (n === c)
-    a = 0;
-  else {
-    switch (n) {
-      case o: {
-        a = (e - l) / t + (e < l ? 6 : 0);
-        break;
-      }
-      case e: {
-        a = (l - o) / t + 2;
-        break;
-      }
-      case l: {
-        a = (o - e) / t + 4;
-        break;
-      }
-    }
-    a /= 6;
-  }
-  return { h: a * 360, s: r * 100, v: p * 100 };
-}, Q = (o, e, l) => {
-  o = X(o, 360) * 6, e = X(e, 100), l = X(l, 100);
-  const n = Math.floor(o), c = o - n, a = l * (1 - e), p = l * (1 - c * e), t = l * (1 - (1 - c) * e), r = n % 6, s = [l, p, a, a, t, l][r], h = [t, l, l, p, a, a][r], b = [a, a, t, l, l, p][r];
-  return {
-    r: Math.round(s * 255),
-    g: Math.round(h * 255),
-    b: Math.round(b * 255)
-  };
-};
-class Me {
-  _hue = 0;
-  _saturation = 100;
-  _value = 100;
-  _alpha = 100;
-  enableAlpha = !1;
-  format = "hex";
-  value = "";
-  selected;
-  constructor(e) {
-    e = e || {};
-    for (const l in e)
-      ue(e, l) && (this[l] = e[l]);
-    e.value ? this.fromString(e.value) : this.doOnChange();
-  }
-  set(e, l) {
-    if (arguments.length === 1 && typeof e == "object") {
-      for (const n in e)
-        ue(e, n) && this.set(n, e[n]);
-      return;
-    }
-    this[`_${e}`] = l, this.doOnChange();
-  }
-  get(e) {
-    return e === "alpha" ? Math.floor(this[`_${e}`]) : this[`_${e}`];
-  }
-  toRgb() {
-    return Q(this._hue, this._saturation, this._value);
-  }
-  fromString(e) {
-    if (!e) return;
-    const l = this._convertValueInfo(e);
-    l && (this._hue = l.hue, this._saturation = l.saturation, this._value = l.value, this._alpha = l.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: l, _value: n, _alpha: c, format: a } = this, p = { hue: e, saturation: l, value: n, alpha: c };
-    let t = this._convertFormat(a, p);
-    t.length === 0 && (t = this._getValueRGB(p)), this.value = t;
-  }
-  checkValue(e) {
-    let l = !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]*)[\\)]$" : /^hsva\(/.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);
-      l = e.match(c) !== null;
-    }
-    return l;
-  }
-  getValueFormat(e, l) {
-    const n = this._convertValueInfo(e);
-    return n ? this._convertFormat(l, n) : e;
-  }
-  _convertValueInfo(e) {
-    let l = 0, n = 100, c = 100, a = 100;
-    if (e) {
-      let p;
-      if (e.includes("hsl")) {
-        const t = e.replace(/hsla|hsl|\(|\)/gm, "").split(/\s|,/g).filter((r) => r !== "").map(
-          (r, s) => s > 2 ? Number.parseFloat(r) : Number.parseInt(r, 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 && (p = Ee(t[0], t[1], t[2]));
-      } else if (e.includes("hsv")) {
-        const t = e.replace(/hsva|hsv|\(|\)/gm, "").split(/\s|,/g).filter((r) => r !== "").map(
-          (r, s) => s > 2 ? Number.parseFloat(r) : Number.parseInt(r, 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 && (p = { 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((r) => r !== "").map(
-          (r, s) => s > 2 ? Number.parseFloat(r) : Number.parseInt(r, 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 && (p = he(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 r = 0, s = 0, h = 0;
-        t.length === 3 ? (r = H(t[0] + t[0]), s = H(t[1] + t[1]), h = H(t[2] + t[2])) : (t.length === 6 || t.length === 8) && (r = H(t.slice(0, 2)), s = H(t.slice(2, 4)), h = 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), p = he(r, s, h);
-      }
-      p && (l = Math.max(0, Math.min(360, p.h)), n = Math.max(0, Math.min(100, p.s)), c = Math.max(0, Math.min(100, p.v)));
-    }
-    return {
-      hue: l,
-      saturation: n,
-      value: c,
-      alpha: a
-    };
-  }
-  _convertFormat(e, l) {
-    let n = "";
-    switch (e) {
-      case "hsl": {
-        n = this._getValueHSL(l);
-        break;
-      }
-      case "hsv": {
-        n = this._getValueHSV(l);
-        break;
-      }
-      case "rgb": {
-        n = this._getValueRGB(l);
-        break;
-      }
-      case "hex":
-        n = this._getValueHEX(l);
-    }
-    return n;
-  }
-  _isShowAlpha(e) {
-    return e !== 100;
-  }
-  _getValueHSL(e) {
-    const l = Math.floor(e.alpha), n = this._isShowAlpha(e.alpha), c = $e(e.hue, e.saturation / 100, e.value / 100), a = Math.round(e.hue), p = Math.round(c[1] * 100), t = Math.round(c[2] * 100);
-    return n ? `hsla(${a}, ${p}%, ${t}%, ${l / 100})` : `hsl(${a}, ${p}%, ${t}%)`;
-  }
-  _getValueHSV(e) {
-    const l = Math.floor(e.alpha), n = this._isShowAlpha(l), c = Math.round(e.hue), a = Math.round(e.saturation), p = Math.round(e.value);
-    return n ? `hsva(${c}, ${a}%, ${p}%, ${l / 100})` : `hsv(${c}, ${a}%, ${p}%)`;
-  }
-  _getValueHEX(e) {
-    const l = Math.floor(e.alpha);
-    return this._isShowAlpha(l) ? `${pe(Q(e.hue, e.saturation, e.value))}${J(l * 255 / 100)}` : pe(Q(e.hue, e.saturation, e.value));
-  }
-  _getValueRGB(e) {
-    const l = Math.floor(e.alpha), n = this._isShowAlpha(l), { r: c, g: a, b: p } = Q(e.hue, e.saturation, e.value);
-    return n ? `rgba(${c}, ${a}, ${p}, ${this.get("alpha") / 100})` : `rgb(${c}, ${a}, ${p})`;
-  }
-}
-const Oe = /* @__PURE__ */ D({
-  name: "ClColorPickerPalette",
-  __name: "Palette",
-  props: {
-    color: {
-      type: Object,
-      required: !0
-      // desc: Color 颜色对象实例
-    }
-  },
-  setup(o) {
-    const e = o, l = M("refElTopParent"), n = E({
-      background: "hsl(0, 100%, 50%)",
-      btnLeft: 0,
-      btnTop: 0
-    }), c = P(() => {
-      const r = e.color.get("hue"), s = e.color.get("value");
-      return { hue: r, value: s };
-    }), a = (r, s) => {
-      const b = l.value.getBoundingClientRect();
-      let v = s.clientX - b.left, d = s.clientY - b.top;
-      v = Math.max(0, v), v = Math.min(v, b.width), d = Math.max(0, d), d = Math.min(d, b.height), n.btnLeft = v, n.btnTop = d, e.color.set({
-        saturation: v / b.width * 100,
-        value: 100 - d / b.height * 100
-      });
-    }, p = () => {
-      const r = l.value, s = e.color.get("saturation"), h = e.color.get("value"), { clientWidth: b, clientHeight: v } = r;
-      n.btnLeft = s * b / 100, n.btnTop = (100 - h) * v / 100, n.background = `hsl(${e.color.get("hue")}, 100%, 50%)`;
-    }, t = () => {
-      const r = {
-        ing: (s, h) => {
-          a(s, h);
-        },
-        end: (s, h) => {
-          a(s, h);
-        }
-      };
-      new G(l.value, r), p();
-    };
-    return L(() => {
-      A(() => {
-        t();
-      });
-    }), R(
-      () => c.value,
-      () => {
-        p();
-      }
-    ), (r, s) => (y(), w("div", {
-      ref_key: "refElTopParent",
-      ref: l,
-      class: "panel-colorpicker-palette",
-      style: N({
-        backgroundColor: n.background
-      })
-    }, [
-      s[1] || (s[1] = f("div", { class: "panel-colorpicker-palette-white" }, null, -1)),
-      s[2] || (s[2] = f("div", { class: "panel-colorpicker-palette-black" }, null, -1)),
-      f("div", {
-        class: "panel-colorpicker-palette-btn",
-        style: N({
-          top: n.btnTop + "px",
-          left: n.btnLeft + "px"
-        })
-      }, [...s[0] || (s[0] = [
-        f("div", null, null, -1)
-      ])], 4)
-    ], 4));
-  }
-}), Be = /* @__PURE__ */ D({
-  name: "ClColorPickerHue",
-  __name: "Hue",
-  props: {
-    color: {
-      type: Object,
-      required: !0
-      // desc: Color 颜色对象实例
-    }
-  },
-  setup(o) {
-    const e = o, l = M("refElTopParent"), n = M("refElContainer"), c = M("refElBtn"), a = E({
-      btnTop: 0
-    }), p = P(() => e.color.get("hue")), t = (v, d) => {
-      const V = l.value.getBoundingClientRect();
-      let _ = d.clientY - V.top;
-      _ = Math.max(0, _), _ = Math.min(_, V.height);
-      const $ = Math.round(_ / V.height * 360);
-      e.color.set("hue", $);
-    }, r = () => {
-      const v = l.value, d = e.color.get("hue");
-      return Math.round(d * v.offsetHeight / 360);
-    }, s = () => {
-      a.btnTop = r();
-    }, h = () => {
-      const v = {
-        ing: (d, m) => {
-          t(d, m);
-        },
-        end: (d, m) => {
-          t(d, m);
-        }
-      };
-      new G(n.value, v), new G(c.value, v), s();
-    };
-    L(() => {
-      A(() => {
-        h();
-      });
-    }), R(
-      () => p.value,
-      () => {
-        s();
-      }
-    );
-    const b = (v) => {
-      if (v.target !== c.value) {
-        const m = ve.getClientXY(v);
-        t(v, m);
-      }
-    };
-    return (v, d) => (y(), w("div", {
-      ref_key: "refElTopParent",
-      ref: l,
-      class: "panel-colorpicker-hue"
-    }, [
-      f("div", {
-        ref_key: "refElContainer",
-        ref: n,
-        class: "panel-colorpicker-hue-container",
-        onClick: b
-      }, null, 512),
-      f("div", {
-        ref_key: "refElBtn",
-        ref: c,
-        class: "panel-colorpicker-hue-btn",
-        style: N({
-          top: a.btnTop + "px"
-        })
-      }, null, 4)
-    ], 512));
-  }
-}), Fe = /* @__PURE__ */ D({
-  name: "ClColorPickerAlpha",
-  __name: "Alpha",
-  props: {
-    color: {
-      type: Object,
-      required: !0
-      // desc: Color 颜色对象实例
-    }
-  },
-  setup(o) {
-    const e = o, l = M("refElTopParent"), n = M("refElContainer"), c = M("refElBtn"), a = E({
-      background: null,
-      btnLeft: 0
-    }), p = P(() => e.color.get("alpha")), t = (d, m) => {
-      const _ = l.value.getBoundingClientRect();
-      let $ = m.clientX - _.left;
-      $ = Math.max(0, $), $ = Math.min($, _.width);
-      const O = Math.round($ / _.width * 100);
-      e.color.set("alpha", O);
-    }, r = () => {
-      const d = l.value, m = e.color.get("alpha");
-      return Math.round(m * d.offsetWidth / 100);
-    }, s = () => {
-      if (e.color && e.color.value) {
-        const { r: d, g: m, b: V } = e.color.toRgb();
-        return `linear-gradient(to right, rgba(${d}, ${m}, ${V}, 0) 0%, rgba(${d}, ${m}, ${V}, 1) 100%)`;
-      }
-      return null;
-    }, h = () => {
-      a.btnLeft = r(), a.background = s();
-    }, b = () => {
-      const d = {
-        ing: (m, V) => {
-          t(m, V);
-        },
-        end: (m, V) => {
-          t(m, V);
-        }
-      };
-      new G(n.value, d), new G(c.value, d), h();
-    };
-    L(() => {
-      A(() => {
-        b();
-      });
-    }), R(
-      () => p.value,
-      () => {
-        h();
-      }
-    ), R(
-      () => e.color.value,
-      () => {
-        h();
-      }
-    );
-    const v = (d) => {
-      if (d.target !== c.value) {
-        const V = ve.getClientXY(d);
-        t(d, V);
-      }
-    };
-    return (d, m) => (y(), w("div", {
-      ref_key: "refElTopParent",
-      ref: l,
-      class: "panel-colorpicker-alpha"
-    }, [
-      f("div", {
-        ref_key: "refElContainer",
-        ref: n,
-        class: "panel-colorpicker-alpha-container",
-        style: N({
-          background: a.background
-        }),
-        onClick: v
-      }, null, 4),
-      f("div", {
-        ref_key: "refElBtn",
-        ref: c,
-        class: "panel-colorpicker-alpha-btn",
-        style: N({
-          left: a.btnLeft + "px"
-        })
-      }, null, 4)
-    ], 512));
-  }
-}), me = /* @__PURE__ */ D({
-  name: "ClColorPickerItemBlock",
-  __name: "ItemBlock",
-  props: {
-    className: String,
-    // desc: 自定义CSS类名
-    color: String
-    // desc: 颜色值，用于背景色展示
-  },
-  emits: {
-    onClick: (o) => !0
-    // desc: 点击颜色块时触发
-  },
-  setup(o, { emit: e }) {
-    const l = o, n = e, c = P(() => {
-      let p = "panel-colorpicker-item-block ";
-      const { className: t } = l;
-      return t && !x.isEmpty(t) && (p += t), p;
-    }), a = () => {
-      n("onClick", l.color || "");
-    };
-    return (p, t) => (y(), w("div", {
-      class: K(c.value),
-      onClick: a
-    }, [
-      t[0] || (t[0] = f("div", { class: "panel-colorpicker-bg-alpha" }, null, -1)),
-      f("div", {
-        style: N({ background: o.color })
-      }, null, 4)
-    ], 2));
-  }
-}), Te = { class: "panel-colorpicker-preset" }, Pe = /* @__PURE__ */ D({
-  name: "ClColorPickerPreset",
-  __name: "Preset",
-  emits: {
-    onClick: (o) => !0
-    // desc: 点击预设颜色时触发
-  },
-  setup(o, { emit: e }) {
-    const l = e, n = E({
-      keyIndex: `ColorpickerPreset-${x.getRandom(8)}`
-    }), c = ge([]), a = () => {
-      const t = [
-        "var(--cl-text-primary, #323233)",
-        "var(--cl-bg, #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)",
-        "var(--cl-transparent, rgba(0, 0, 0, 0))"
-      ];
-      c.value = t;
-    };
-    L(() => {
-      a();
-    });
-    const p = (t) => {
-      l("onClick", t);
-    };
-    return (t, r) => (y(), w("div", Te, [
-      f("ul", null, [
-        (y(!0), w(ne, null, Ce(c.value, (s, h) => (y(), w("li", {
-          key: `${n.keyIndex}-${h}`
-        }, [
-          k(me, {
-            color: s,
-            onOnClick: p
-          }, null, 8, ["color"])
-        ]))), 128))
-      ])
-    ]));
-  }
-}), Ae = { class: "panel-colorpicker-value" }, De = {
-  key: 0,
-  class: "panel-colorpicker-hex"
-}, Ie = {
-  key: 1,
-  class: "panel-colorpicker-rgb"
-}, Re = {
-  key: 2,
-  class: "panel-colorpicker-hsl"
-}, He = {
-  key: 3,
-  class: "panel-colorpicker-hsv"
-}, Ne = /* @__PURE__ */ D({
-  name: "ClColorPickerValue",
-  __name: "Value",
-  props: {
-    color: {
-      type: Object,
-      required: !0
-      // desc: Color 颜色对象实例
-    }
-  },
-  emits: {
-    onChangeType: (o) => !0
-    // desc: 格式类型变更时触发
-  },
-  setup(o, { expose: e, emit: l }) {
-    const n = o, c = l, a = E({
-      type: "hex",
-      hex: "",
-      rgb: "",
-      hsl: "",
-      hsv: ""
-    }), p = ge(""), t = E({
-      r: "",
-      g: "",
-      b: "",
-      a: ""
-    }), r = E({
-      h: "",
-      s: "",
-      l: "",
-      a: ""
-    }), s = E({
-      h: "",
-      s: "",
-      v: "",
-      a: ""
-    }), h = {
-      typeList: ["hex", "rgb", "hsl", "hsv"]
-    }, b = P(() => n.color.value), v = (u) => {
-      const g = u.substring(u.indexOf("(") + 1, u.indexOf(")")).split(",").map((T) => x.trim(T));
-      return g.length === 3 && g.push("1"), g;
-    }, d = (u, i) => {
-      const g = u || b.value, { color: T } = n, ae = i === "hex" ? g : T.getValueFormat(g, "hex"), se = T.getValueFormat(g, "rgb"), re = T.getValueFormat(g, "hsl"), ie = T.getValueFormat(g, "hsv");
-      a.hex = ae, a.rgb = se, a.hsl = re, a.hsv = ie, A(() => {
-        p.value = ae;
-        const q = v(se);
-        t.r = q[0], t.g = q[1], t.b = q[2], t.a = q[3];
-        const Y = v(re);
-        r.h = Y[0], r.s = Y[1], r.l = Y[2], r.a = Y[3];
-        const z = v(ie);
-        s.h = z[0], s.s = z[1], s.v = z[2], s.a = z[3];
-      });
-    }, m = (u) => {
-      let i = h.typeList.indexOf(a.type);
-      i += u;
-      const g = h.typeList.length;
-      i < 0 ? i = g - 1 : i >= g && (i = 0);
-      const T = h.typeList[i];
-      a.type = T, c("onChangeType", T);
-    }, V = (u) => {
-      let i = "";
-      switch (u) {
-        case "hex": {
-          p.value.length > 0 && (i = p.value);
-          break;
-        }
-        case "rgb": {
-          t.r.length > 0 && t.g.length > 0 && t.b.length > 0 && t.a.length > 0 && (i = `rgba(${t.r}, ${t.g}, ${t.b},${t.a})`);
-          break;
-        }
-        case "hsl": {
-          r.h.length > 0 && r.s.length > 0 && r.l.length > 0 && r.a.length > 0 && (i = `hsla(${r.h}, ${r.s}, ${r.l},${r.a})`);
-          break;
-        }
-        case "hsv": {
-          s.h.length > 0 && s.s.length > 0 && s.v.length > 0 && s.a.length > 0 && (i = `hsva(${s.h}, ${s.s}, ${s.v},${s.a})`);
-          break;
-        }
-      }
-      if (i.length > 0 && n.color.checkValue(i)) {
-        const g = n.color.getValueFormat(i, u);
-        i !== g && (d(i, u), A(() => {
-          n.color.fromString(i);
-        }), c("onChangeType", u));
-      }
-    }, _ = () => {
-      d();
-    };
-    L(() => {
-      A(() => {
-        _();
-      });
-    }), R(
-      () => b.value,
-      (u) => {
-        const i = n.color.getValueFormat(u, "rgb");
-        a.rgb !== i && d();
-      }
-    );
-    const $ = () => {
-      V("hex");
-    }, O = () => {
-      V("rgb");
-    }, B = () => {
-      V("hsl");
-    }, F = () => {
-      V("hsv");
-    }, j = () => {
-      m(-1);
-    }, ee = () => {
-      m(1);
-    };
-    return e({
-      setType: (u) => {
-        a.type = u;
-      },
-      clearInputs: () => {
-        p.value = "", t.r = "", t.g = "", t.b = "", t.a = "", r.h = "", r.s = "", r.l = "", r.a = "", s.h = "", s.s = "", s.v = "", s.a = "";
-      }
-    }), (u, i) => (y(), w("div", Ae, [
-      f("div", null, [
-        a.type === "hex" ? (y(), w("div", De, [
-          f("div", null, [
-            k(S, {
-              value: p.value,
-              "onUpdate:value": i[0] || (i[0] = (g) => p.value = g),
-              isClean: !1,
-              onOnChange: $
-            }, null, 8, ["value"]),
-            i[13] || (i[13] = f("div", { class: "panel-colorpicker-value-lable" }, "十六进制", -1))
-          ])
-        ])) : a.type === "rgb" ? (y(), w("div", Ie, [
-          f("div", null, [
-            k(S, {
-              value: t.r,
-              "onUpdate:value": i[1] || (i[1] = (g) => t.r = g),
-              isClean: !1,
-              onOnChange: O
-            }, null, 8, ["value"]),
-            i[14] || (i[14] = f("div", { class: "panel-colorpicker-value-lable" }, "R", -1))
-          ]),
-          f("div", null, [
-            k(S, {
-              value: t.g,
-              "onUpdate:value": i[2] || (i[2] = (g) => t.g = g),
-              isClean: !1,
-              onOnChange: O
-            }, null, 8, ["value"]),
-            i[15] || (i[15] = f("div", { class: "panel-colorpicker-value-lable" }, "G", -1))
-          ]),
-          f("div", null, [
-            k(S, {
-              value: t.b,
-              "onUpdate:value": i[3] || (i[3] = (g) => t.b = g),
-              isClean: !1,
-              onOnChange: O
-            }, null, 8, ["value"]),
-            i[16] || (i[16] = f("div", { class: "panel-colorpicker-value-lable" }, "B", -1))
-          ]),
-          f("div", null, [
-            k(S, {
-              value: t.a,
-              "onUpdate:value": i[4] || (i[4] = (g) => t.a = g),
-              isClean: !1,
-              onOnChange: O
-            }, null, 8, ["value"]),
-            i[17] || (i[17] = f("div", { class: "panel-colorpicker-value-lable" }, "A", -1))
-          ])
-        ])) : a.type === "hsl" ? (y(), w("div", Re, [
-          f("div", null, [
-            k(S, {
-              value: r.h,
-              "onUpdate:value": i[5] || (i[5] = (g) => r.h = g),
-              isClean: !1,
-              onOnChange: B
-            }, null, 8, ["value"]),
-            i[18] || (i[18] = f("div", { class: "panel-colorpicker-value-lable" }, "H", -1))
-          ]),
-          f("div", null, [
-            k(S, {
-              value: r.s,
-              "onUpdate:value": i[6] || (i[6] = (g) => r.s = g),
-              isClean: !1,
-              onOnChange: B
-            }, null, 8, ["value"]),
-            i[19] || (i[19] = f("div", { class: "panel-colorpicker-value-lable" }, "S", -1))
-          ]),
-          f("div", null, [
-            k(S, {
-              value: r.l,
-              "onUpdate:value": i[7] || (i[7] = (g) => r.l = g),
-              isClean: !1,
-              onOnChange: B
-            }, null, 8, ["value"]),
-            i[20] || (i[20] = f("div", { class: "panel-colorpicker-value-lable" }, "L", -1))
-          ]),
-          f("div", null, [
-            k(S, {
-              value: r.a,
-              "onUpdate:value": i[8] || (i[8] = (g) => r.a = g),
-              isClean: !1,
-              onOnChange: B
-            }, null, 8, ["value"]),
-            i[21] || (i[21] = f("div", { class: "panel-colorpicker-value-lable" }, "A", -1))
-          ])
-        ])) : a.type === "hsv" ? (y(), w("div", He, [
-          f("div", null, [
-            k(S, {
-              value: s.h,
-              "onUpdate:value": i[9] || (i[9] = (g) => s.h = g),
-              isClean: !1,
-              onOnChange: F
-            }, null, 8, ["value"]),
-            i[22] || (i[22] = f("div", { class: "panel-colorpicker-value-lable" }, "H", -1))
-          ]),
-          f("div", null, [
-            k(S, {
-              value: s.s,
-              "onUpdate:value": i[10] || (i[10] = (g) => s.s = g),
-              isClean: !1,
-              onOnChange: F
-            }, null, 8, ["value"]),
-            i[23] || (i[23] = f("div", { class: "panel-colorpicker-value-lable" }, "S", -1))
-          ]),
-          f("div", null, [
-            k(S, {
-              value: s.v,
-              "onUpdate:value": i[11] || (i[11] = (g) => s.v = g),
-              isClean: !1,
-              onOnChange: F
-            }, null, 8, ["value"]),
-            i[24] || (i[24] = f("div", { class: "panel-colorpicker-value-lable" }, "V", -1))
-          ]),
-          f("div", null, [
-            k(S, {
-              value: s.a,
-              "onUpdate:value": i[12] || (i[12] = (g) => s.a = g),
-              isClean: !1,
-              onOnChange: F
-            }, null, 8, ["value"]),
-            i[25] || (i[25] = f("div", { class: "panel-colorpicker-value-lable" }, "A", -1))
-          ])
-        ])) : (y(), w(ne, { key: 4 }, [], 64))
-      ]),
-      f("div", null, [
-        k(U, {
-          name: "caret-up",
-          onClick: j
-        }),
-        k(U, {
-          name: "caret-down",
-          onClick: ee
-        })
-      ])
-    ]));
-  }
-}), Le = {
-  key: 0,
-  class: "panel-colorpicker-copy-icon"
-}, fe = /* @__PURE__ */ D({
-  name: "ClColorPickerCopy",
-  __name: "Copy",
-  props: {
-    className: String,
-    // desc: 自定义CSS类名
-    color: String,
-    // desc: 要复制的颜色值
-    getTxtCallback: Function
-    // desc: 获取复制文本的回调函数
-  },
-  setup(o) {
-    const e = o, l = be(), n = E({
-      isHover: !1
-    }), c = P(() => !x.isUndefined(l.default)), a = P(() => {
-      let s = !1;
-      return c.value ? s = n.isHover : s = !0, s;
-    }), p = P(() => {
-      const s = {
-        "panel-colorpicker-copy": !0,
-        "panel-colorpicker-copy-hover": n.isHover
-      }, { className: h } = e;
-      return h && !x.isEmpty(h) && h.split(" ").forEach((b) => {
-        x.isEmpty(b) || (s[b] = !0);
-      }), s;
-    }), t = () => {
-      c.value && (n.isHover = !0);
-    }, r = () => {
-      c.value && (n.isHover = !1);
-    };
-    return (s, h) => (y(), w("div", {
-      class: K(p.value),
-      onMouseenter: t,
-      onMouseleave: r
-    }, [
-      ke(s.$slots, "default"),
-      a.value ? (y(), w("div", Le, [
-        k(Ve, {
-          textLabel: o.getTxtCallback || o.color || ""
-        }, null, 8, ["textLabel"])
-      ])) : I("", !0)
-    ], 34));
-  }
-}), Ue = { class: "panel-colorpicker-container" }, Xe = { key: 0 }, Ge = {
-  key: 0,
-  class: "panel-colorpicker-format"
-}, je = { class: "panel-colorpicker-format-show" }, qe = {
-  key: 1,
-  class: "panel-colorpicker-operate"
-}, de = /* @__PURE__ */ D({
-  name: "ClColorPickerBase",
-  __name: "Color",
-  props: {
-    value: String,
-    // desc: 颜色绑定值
-    disabled: {
-      type: Boolean,
-      default: !1
-      // desc: 是否禁用
-    },
-    isAlpha: {
-      type: Boolean,
-      default: !0
-      // desc: 是否显示透明度调节滑块
-    },
-    isFormat: {
-      type: Boolean,
-      default: !0
-      // desc: 是否显示格式切换区域
-    },
-    isOperate: {
-      type: Boolean,
-      default: !0
-      // desc: 是否显示底部操作栏
-    },
-    isPreset: {
-      type: Boolean,
-      default: !0
-      // desc: 是否显示预设颜色区域
-    },
-    isDropdown: {
-      type: Boolean,
-      default: !0
-      // desc: 是否以下拉模式展示
-    }
-  },
-  emits: {
-    onChange: (o) => !0,
-    // desc: 颜色值变更时触发
-    onSubmit: () => !0,
-    // desc: 确认选择时触发
-    onInit: () => !0
-    // desc: 初始化完成时触发
-  },
-  setup(o, { expose: e, emit: l }) {
-    const n = o, c = l, { optPageLanguage: a, getPageLanguage: p } = _e();
-    p("common");
-    const t = M("refElColorResult"), r = M("refElColorValue"), s = E({
-      isShowColorResult: !1,
-      colorResult: "",
-      formatShow: "hex"
-    }), h = E(
-      new Me({
-        value: n.value,
-        format: "",
-        enableAlpha: !0
-      })
-    ), b = {
-      isColorChangeResult: !0
-    }, v = () => h.get("alpha").toString() === "100" ? "hex" : "rgb", d = (u, i = !0) => {
-      let g = "";
-      u && !x.isEmpty(u) && s.isShowColorResult && (g = h.getValueFormat(u, s.formatShow)), s.colorResult = g, i && c("onChange", g);
-    }, m = (u) => {
-      u && !x.isEmpty(u) ? (s.isShowColorResult = !0, h.fromString(u), d(h.value, !1)) : (s.isShowColorResult = !1, b.isColorChangeResult = !1, d("", !1), h.fromString(""), A(() => {
-        b.isColorChangeResult = !0;
-      }));
-    }, V = () => {
-      const { value: u } = n;
-      m(u), c("onInit");
-    };
-    L(() => {
-      A(() => {
-        V();
-      });
-    }), R(
-      () => n.value,
-      (u) => {
-        m(u);
-      }
-    ), R(
-      () => h.value,
-      (u) => {
-        x.isEmpty(n.value) && (s.isShowColorResult = !0), b.isColorChangeResult && d(u), b.isColorChangeResult = !0;
-      }
-    );
-    const _ = () => h.getValueFormat(h.value, s.formatShow), $ = (u) => {
-      h.fromString(u);
-    }, O = (u) => {
-      s.formatShow = u, d(h.value, !1);
-    }, B = () => {
-      const u = n.value || "";
-      s.isShowColorResult = !x.isEmpty(u), x.isEmpty(u) ? h.set({ hue: 0, saturation: 0, value: 100, alpha: 100 }) : (b.isColorChangeResult = !1, d(u), h.fromString(u));
-    }, F = () => {
-      h.set({ hue: 0, saturation: 0, value: 100, alpha: 100 });
-    }, j = () => {
-      c("onSubmit");
-    };
-    return e({
-      getValue: () => {
-        let u = s.colorResult;
-        if (u.length > 0) {
-          const i = v();
-          u = h.getValueFormat(u, i);
-        }
-        return u;
-      },
-      setValue: (u) => {
-        m(u);
-      },
-      initValueType: () => {
-        const u = v();
-        s.formatShow = u, r.value && r.value.setType(u);
-      }
-    }), (u, i) => (y(), w("div", {
-      class: K(["panel-colorpicker-wrapper", { "panel-colorpicker-wrapper-disabled": o.disabled }])
-    }, [
-      f("div", Ue, [
-        f("div", null, [
-          k(Oe, { color: h }, null, 8, ["color"]),
-          k(Be, { color: h }, null, 8, ["color"])
-        ]),
-        o.isAlpha ? (y(), w("div", Xe, [
-          k(Fe, { color: h }, null, 8, ["color"]),
-          i[0] || (i[0] = f("div", null, null, -1))
-        ])) : I("", !0)
-      ]),
-      o.isFormat ? (y(), w("div", Ge, [
-        f("div", je, [
-          k(fe, {
-            className: "panel-colorpicker-tip-current",
-            getTxtCallback: _
-          }, {
-            default: le(() => [
-              k(me, {
-                color: h.value
-              }, null, 8, ["color"])
-            ]),
-            _: 1
-          })
-        ]),
-        k(Ne, {
-          ref_key: "refElColorValue",
-          ref: r,
-          color: h,
-          onOnChangeType: O
-        }, null, 8, ["color"])
-      ])) : I("", !0),
-      o.isOperate ? (y(), w("div", qe, [
-        f("div", {
-          ref_key: "refElColorResult",
-          ref: t
-        }, ye(s.colorResult), 513),
-        f("div", null, [
-          f("div", { onClick: B }, [
-            k(U, {
-              name: "restore",
-              title: W(a).restore
-            }, null, 8, ["title"])
-          ]),
-          f("div", { onClick: F }, [
-            k(U, {
-              name: "clear",
-              title: W(a).clearEmpty
-            }, null, 8, ["title"])
-          ]),
-          k(fe, {
-            color: s.colorResult
-          }, null, 8, ["color"]),
-          o.isDropdown ? (y(), w("div", {
-            key: 0,
-            onClick: j
-          }, [
-            k(U, {
-              name: "check",
-              title: W(a).submit
-            }, null, 8, ["title"])
-          ])) : I("", !0)
-        ])
-      ])) : I("", !0),
-      o.isPreset ? (y(), Z(Pe, {
-        key: 2,
-        onOnClick: $
-      })) : I("", !0)
-    ], 2));
-  }
-}), Ye = { class: "panel-colorpicker-dropdown-text" }, ze = {
-  key: 0,
-  class: "panel-colorpicker-dropdown-arrow"
-}, at = /* @__PURE__ */ D({
-  name: "ClColorPicker",
-  __name: "Index",
-  props: {
-    id: String,
-    // desc: 组件实例唯一标识，用于多实例场景下 DOM 查询限定
-    value: String,
-    // desc: 颜色绑定值，支持HEX/RGB/HSL/HSV格式
-    className: String,
-    // desc: 自定义CSS类名
-    disabled: {
-      type: Boolean,
-      default: !1
-      // desc: 是否禁用
-    },
-    isDropdown: {
-      type: Boolean,
-      default: !0
-      // desc: 是否以下拉模式展示
-    },
-    isAlpha: {
-      type: Boolean,
-      default: !0
-      // desc: 是否显示透明度调节滑块
-    },
-    isFormat: {
-      type: Boolean,
-      default: !0
-      // desc: 是否显示格式切换区域
-    },
-    isOperate: {
-      type: Boolean,
-      default: !0
-      // desc: 是否显示底部操作栏
-    },
-    isPreset: {
-      type: Boolean,
-      default: !0
-      // desc: 是否显示预设颜色区域
-    },
-    isPlaintext: {
-      type: Boolean,
-      default: !1
-      // desc: 是否纯文本只读模式，保留色块外观但整体禁用并屏蔽鼠标交互（含 hover）
-    }
-  },
-  emits: {
-    "update:value": (o) => !0,
-    // desc: v-model 值更新时触发
-    "update:modelValue": (o) => !0,
-    // desc: 标准 v-model 支持（等价 update:value）
-    onChange: (o) => !0,
-    // desc: 颜色值变更时触发
-    onInit: () => !0
-    // desc: 组件初始化完成时触发
-  },
-  setup(o, { expose: e, emit: l }) {
-    const n = o, c = n.id, a = l, p = M("refElDropdownLayer"), t = M("refElColorpicker"), r = E({
-      isInitShow: !n.isDropdown,
-      dropdownTextValue: "",
-      currentValue: ""
-    }), s = {
-      lastValue: ""
-    }, h = P(() => {
-      let C = "panel-colorpicker ";
-      const { className: u } = n;
-      return u && !x.isEmpty(u) && (C += u), n.isPlaintext && (C += "cl-plaintext-static "), C;
-    }), b = () => {
-      const C = r.currentValue;
-      let u = !1;
-      n.isDropdown ? u = C !== s.lastValue : u = !0, u && (s.lastValue = C, a("update:value", C), a("update:modelValue", C), a("onChange", C));
-    }, v = (C) => {
-      let u = "transparent";
-      C && !x.isEmpty(C) && (u = C), r.dropdownTextValue = u;
-    }, d = (C) => {
-      const u = C || "";
-      s.lastValue = u, n.isDropdown || (r.currentValue = u), v(u);
-    }, m = () => {
-      const C = t.value.getValue();
-      r.dropdownTextValue = C, r.currentValue = C, b();
-    }, V = () => {
-      d(n.value);
-    };
-    R(
-      () => n.value,
-      (C) => {
-        d(C);
-      }
-    ), L(() => {
-      A(() => {
-        V();
-      });
-    });
-    const _ = () => {
-      a("onInit");
-    }, $ = (C) => {
-      n.disabled || (C ? t.value && t.value.initValueType() : n.isOperate ? r.currentValue !== t.value.getValue() && r.currentValue === s.lastValue && t.value.setValue(s.lastValue) : m());
-    }, O = () => {
-      r.isInitShow = !0, r.currentValue = s.lastValue;
-    }, B = () => {
-      n.isDropdown || m();
-    }, F = () => {
-      m(), n.isDropdown && p.value && p.value.setOpen(!1);
-    };
-    return e({
-      getValue: () => r.currentValue,
-      getValueData: () => ({ value: r.currentValue }),
-      setValue: (C) => {
-        d(C);
-      }
-    }), (C, u) => o.isDropdown ? (y(), Z(we, {
-      key: 0,
-      ref_key: "refElDropdownLayer",
-      ref: p,
-      id: W(c),
-      classParent: h.value,
-      classDropDown: "panel-colorpicker-dropdown",
-      isUseDropdownArrow: !0,
-      isDisabled: o.disabled,
-      onOnChangeOpen: $,
-      onOnOpenComplete: O
-    }, {
-      label: le(() => [
-        f("div", Ye, [
-          u[0] || (u[0] = f("div", { class: "panel-colorpicker-bg-alpha" }, null, -1)),
-          f("div", {
-            style: N({ "background-color": r.dropdownTextValue })
-          }, null, 4),
-          o.isPlaintext ? (y(), w(ne, { key: 1 }, [], 64)) : (y(), w("div", ze, [
-            k(U, { name: "angle-down" })
-          ]))
-        ])
-      ]),
-      dropdown: le(() => [
-        r.isInitShow ? (y(), Z(de, {
-          key: 0,
-          ref_key: "refElColorpicker",
-          ref: t,
-          value: r.currentValue,
-          isAlpha: o.isAlpha,
-          isFormat: o.isFormat,
-          isOperate: o.isOperate,
-          isPreset: o.isPreset,
-          isDropdown: o.isDropdown,
-          onOnChange: B,
-          onOnSubmit: F,
-          onOnInit: _
-        }, null, 8, ["value", "isAlpha", "isFormat", "isOperate", "isPreset", "isDropdown"])) : I("", !0)
-      ]),
-      _: 1
-    }, 8, ["id", "classParent", "isDisabled"])) : (y(), w("div", {
-      key: 1,
-      class: K(h.value)
-    }, [
-      r.isInitShow ? (y(), Z(de, {
-        key: 0,
-        ref_key: "refElColorpicker",
-        ref: t,
-        value: r.currentValue,
-        disabled: o.disabled,
-        isAlpha: o.isAlpha,
-        isFormat: o.isFormat,
-        isOperate: o.isOperate,
-        isPreset: o.isPreset,
-        isDropdown: o.isDropdown,
-        onOnChange: B,
-        onOnSubmit: F,
-        onOnInit: _
-      }, null, 8, ["value", "disabled", "isAlpha", "isFormat", "isOperate", "isPreset", "isDropdown"])) : I("", !0)
-    ], 2));
-  }
-});
-export {
-  at as default
-};
+export { default } from '../utils/Web/ClColorPicker.js';