qy-vue-plugins 1.0.2-beta → 1.0.2

package/dist/chunks/index-YiSmXvH8.js

@@ -0,0 +1,975 @@
+import { getCurrentInstance as te, shallowRef as _e, computed as k, ref as P, onMounted as de, watch as D, defineComponent as A, createElementBlock as M, openBlock as B, normalizeClass as w, unref as a, createElementVNode as $, normalizeStyle as I, inject as Ae, watchEffect as oa, Fragment as ra, renderList as na, reactive as sa, nextTick as W, provide as Le, createBlock as ee, createCommentVNode as ke, createVNode as T, renderSlot as ia, withCtx as O, mergeProps as ye, withDirectives as re, vShow as Ce, withKeys as ca, createTextVNode as we, toDisplayString as Ee } from "vue";
+import { _ as H, U as N, w as De, C as ce, E as Se } from "./aria-BEkkcjlH.js";
+import { isClient as ua, reactiveComputed as da } from "@vueuse/core";
+import { u as G, E as fa } from "./index-Cv_K9rbv.js";
+import { T as J, E as Pe } from "./index-CgKiWbxR.js";
+import { ArrowDown as va, Close as ha } from "@element-plus/icons-vue";
+import { q, s as F, u as X, w as ae, c as Q, v as Z, D as Ke, d as Y, t as pa } from "./style-COMeMpO8.js";
+import { u as j, b as ba, c as ma } from "./index-_At9ftZd.js";
+import { u as ga, a as _a, p as ka } from "./index-BCQYbM-I.js";
+import { E as ya } from "./index-BdloQTv1.js";
+import { g as fe, E as K } from "./index-ieQ_IULW.js";
+import { b as Be, a as Re, u as Ca, c as wa } from "./use-form-common-props-BQtZKazE.js";
+import { C as Ea } from "./index-Cyrc4mj-.js";
+import { d as Sa } from "./debounce-DBq5TVsN.js";
+const Te = q({
+  color: {
+    type: F(Object),
+    required: !0
+  },
+  vertical: Boolean,
+  disabled: Boolean
+}), Pa = Te;
+let ne = !1;
+function ue(e, o) {
+  if (!ua)
+    return;
+  const l = function(t) {
+    var n;
+    (n = o.drag) == null || n.call(o, t);
+  }, r = function(t) {
+    var n;
+    document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", r), document.removeEventListener("touchmove", l), document.removeEventListener("touchend", r), document.onselectstart = null, document.ondragstart = null, ne = !1, (n = o.end) == null || n.call(o, t);
+  }, i = function(t) {
+    var n;
+    ne || (document.onselectstart = () => !1, document.ondragstart = () => !1, document.addEventListener("mousemove", l), document.addEventListener("mouseup", r), document.addEventListener("touchmove", l), document.addEventListener("touchend", r), ne = !0, (n = o.start) == null || n.call(o, t));
+  };
+  e.addEventListener("mousedown", i), e.addEventListener("touchstart", i, { passive: !1 });
+}
+const Fe = (e) => {
+  let o, l;
+  return e.type === "touchend" ? (l = e.changedTouches[0].clientY, o = e.changedTouches[0].clientX) : e.type.startsWith("touch") ? (l = e.touches[0].clientY, o = e.touches[0].clientX) : (l = e.clientY, o = e.clientX), {
+    clientX: o,
+    clientY: l
+  };
+}, Oe = (e, { key: o, minValue: l, maxValue: r }) => {
+  const i = te(), t = _e(), n = _e(), p = k(() => e.color.get(o));
+  function m(u) {
+    var _;
+    if (e.disabled)
+      return;
+    u.target !== t.value && g(u), (_ = t.value) == null || _.focus();
+  }
+  function g(u) {
+    if (!n.value || !t.value || e.disabled)
+      return;
+    const v = i.vnode.el.getBoundingClientRect(), { clientX: d, clientY: s } = Fe(u);
+    let h;
+    if (e.vertical) {
+      let f = s - v.top;
+      f = Math.max(t.value.offsetHeight / 2, f), f = Math.min(f, v.height - t.value.offsetHeight / 2), h = Math.round((f - t.value.offsetHeight / 2) / (v.height - t.value.offsetHeight) * r);
+    } else {
+      let f = d - v.left;
+      f = Math.max(t.value.offsetWidth / 2, f), f = Math.min(f, v.width - t.value.offsetWidth / 2), h = Math.round((f - t.value.offsetWidth / 2) / (v.width - t.value.offsetWidth) * r);
+    }
+    e.color.set(o, h);
+  }
+  function y(u) {
+    if (e.disabled)
+      return;
+    const { shiftKey: _ } = u, v = fe(u), d = _ ? 10 : 1, s = o === "hue" ? -1 : 1;
+    let h = !0;
+    switch (v) {
+      case K.left:
+      case K.down:
+        b(-d * s);
+        break;
+      case K.right:
+      case K.up:
+        b(d * s);
+        break;
+      case K.home:
+        e.color.set(o, o === "hue" ? r : l);
+        break;
+      case K.end:
+        e.color.set(o, o === "hue" ? l : r);
+        break;
+      case K.pageDown:
+        b(-4 * s);
+        break;
+      case K.pageUp:
+        b(4 * s);
+        break;
+      default:
+        h = !1;
+        break;
+    }
+    h && u.preventDefault();
+  }
+  function b(u) {
+    let _ = p.value + u;
+    _ = _ < l ? l : _ > r ? r : _, e.color.set(o, _);
+  }
+  return {
+    thumb: t,
+    bar: n,
+    currentValue: p,
+    handleDrag: g,
+    handleClick: m,
+    handleKeydown: y
+  };
+}, Me = (e, {
+  namespace: o,
+  maxValue: l,
+  bar: r,
+  thumb: i,
+  currentValue: t,
+  handleDrag: n,
+  getBackground: p
+}) => {
+  const m = te(), g = X(o), y = P(0), b = P(0), u = P();
+  function _() {
+    if (!i.value || e.vertical)
+      return 0;
+    const V = m.vnode.el, R = t.value;
+    return V ? Math.round(R * (V.offsetWidth - i.value.offsetWidth / 2) / l) : 0;
+  }
+  function v() {
+    if (!i.value)
+      return 0;
+    const V = m.vnode.el;
+    if (!e.vertical)
+      return 0;
+    const R = t.value;
+    return V ? Math.round(R * (V.offsetHeight - i.value.offsetHeight / 2) / l) : 0;
+  }
+  function d() {
+    y.value = _(), b.value = v(), u.value = p?.();
+  }
+  de(() => {
+    if (!r.value || !i.value)
+      return;
+    const V = {
+      drag: (R) => {
+        n(R);
+      },
+      end: (R) => {
+        n(R);
+      }
+    };
+    ue(r.value, V), ue(i.value, V), d();
+  }), D(t, () => d()), D(() => e.color.value, () => d());
+  const s = k(() => [
+    g.b(),
+    g.is("vertical", e.vertical),
+    g.is("disabled", e.disabled)
+  ]), h = k(() => g.e("bar")), f = k(() => g.e("thumb")), C = k(() => ({ background: u.value })), E = k(() => ({
+    left: ae(y.value),
+    top: ae(b.value)
+  }));
+  return {
+    rootKls: s,
+    barKls: h,
+    barStyle: C,
+    thumbKls: f,
+    thumbStyle: E,
+    thumbLeft: y,
+    thumbTop: b,
+    update: d
+  };
+}, Ve = 0, se = 100, Ka = A({
+  name: "ElColorAlphaSlider"
+}), Va = /* @__PURE__ */ A({
+  ...Ka,
+  props: Te,
+  setup(e, { expose: o }) {
+    const l = e, { currentValue: r, bar: i, thumb: t, handleDrag: n, handleClick: p, handleKeydown: m } = Oe(l, { key: "alpha", minValue: Ve, maxValue: se }), { rootKls: g, barKls: y, barStyle: b, thumbKls: u, thumbStyle: _, update: v } = Me(l, {
+      namespace: "color-alpha-slider",
+      maxValue: se,
+      currentValue: r,
+      bar: i,
+      thumb: t,
+      handleDrag: n,
+      getBackground: f
+    }), { t: d } = j(), s = k(() => d("el.colorpicker.alphaLabel")), h = k(() => d("el.colorpicker.alphaDescription", {
+      alpha: r.value,
+      color: l.color.value
+    }));
+    function f() {
+      if (l.color && l.color.value) {
+        const { r: C, g: E, b: V } = l.color.toRgb();
+        return `linear-gradient(to right, rgba(${C}, ${E}, ${V}, 0) 0%, rgba(${C}, ${E}, ${V}, 1) 100%)`;
+      }
+      return "";
+    }
+    return o({
+      update: v,
+      bar: i,
+      thumb: t
+    }), (C, E) => (B(), M("div", {
+      class: w(a(g))
+    }, [
+      $("div", {
+        ref_key: "bar",
+        ref: i,
+        class: w(a(y)),
+        style: I(a(b)),
+        onClick: a(p)
+      }, null, 14, ["onClick"]),
+      $("div", {
+        ref_key: "thumb",
+        ref: t,
+        class: w(a(u)),
+        style: I(a(_)),
+        "aria-label": a(s),
+        "aria-valuenow": a(r),
+        "aria-valuetext": a(h),
+        "aria-orientation": C.vertical ? "vertical" : "horizontal",
+        "aria-valuemin": Ve,
+        "aria-valuemax": se,
+        role: "slider",
+        tabindex: C.disabled ? void 0 : 0,
+        "aria-disabled": C.disabled,
+        onKeydown: a(m)
+      }, null, 46, ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled", "onKeydown"])
+    ], 2));
+  }
+});
+var $a = /* @__PURE__ */ H(Va, [["__file", "alpha-slider.vue"]]);
+const $e = 0, ie = 360, Aa = A({
+  name: "ElColorHueSlider"
+}), La = /* @__PURE__ */ A({
+  ...Aa,
+  props: Pa,
+  setup(e, { expose: o }) {
+    const l = e, { currentValue: r, bar: i, thumb: t, handleDrag: n, handleClick: p, handleKeydown: m } = Oe(l, { key: "hue", minValue: $e, maxValue: ie }), { rootKls: g, barKls: y, thumbKls: b, thumbStyle: u, thumbTop: _, update: v } = Me(l, {
+      namespace: "color-hue-slider",
+      maxValue: ie,
+      currentValue: r,
+      bar: i,
+      thumb: t,
+      handleDrag: n
+    }), { t: d } = j(), s = k(() => d("el.colorpicker.hueLabel")), h = k(() => d("el.colorpicker.hueDescription", {
+      hue: r.value,
+      color: l.color.value
+    }));
+    return o({
+      bar: i,
+      thumb: t,
+      thumbTop: _,
+      update: v
+    }), (f, C) => (B(), M("div", {
+      class: w(a(g))
+    }, [
+      $("div", {
+        ref_key: "bar",
+        ref: i,
+        class: w(a(y)),
+        onClick: a(p)
+      }, null, 10, ["onClick"]),
+      $("div", {
+        ref_key: "thumb",
+        ref: t,
+        class: w(a(b)),
+        style: I(a(u)),
+        "aria-label": a(s),
+        "aria-valuenow": a(r),
+        "aria-valuetext": a(h),
+        "aria-orientation": f.vertical ? "vertical" : "horizontal",
+        "aria-valuemin": $e,
+        "aria-valuemax": ie,
+        role: "slider",
+        tabindex: f.disabled ? void 0 : 0,
+        "aria-disabled": f.disabled,
+        onKeydown: a(m)
+      }, null, 46, ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled", "onKeydown"])
+    ], 2));
+  }
+});
+var Da = /* @__PURE__ */ H(La, [["__file", "hue-slider.vue"]]);
+const Ba = q({
+  colors: {
+    type: F(Array),
+    required: !0
+  },
+  color: {
+    type: F(Object),
+    required: !0
+  },
+  enableAlpha: {
+    type: Boolean,
+    required: !0
+  },
+  disabled: Boolean
+}), Ie = q({
+  modelValue: {
+    type: F(String),
+    default: void 0
+  },
+  border: {
+    type: Boolean,
+    default: !0
+  },
+  showAlpha: Boolean,
+  colorFormat: String,
+  disabled: Boolean,
+  predefine: {
+    type: F(Array)
+  },
+  validateEvent: {
+    type: Boolean,
+    default: !0
+  }
+}), Ra = {
+  [N]: (e) => Q(e) || Z(e)
+}, xe = Symbol("colorCommonPickerKey"), Ne = Symbol("colorPickerPanelContextKey");
+class le {
+  constructor(o = {}) {
+    this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100, this._tiny = new J(), this._isValid = !1, this.enableAlpha = !1, this.format = "", this.value = "";
+    for (const l in o)
+      Ke(o, l) && (this[l] = o[l]);
+    o.value ? this.fromString(o.value) : this.doOnChange();
+  }
+  set(o, l) {
+    if (arguments.length === 1 && typeof o == "object") {
+      for (const r in o)
+        Ke(o, r) && this.set(r, o[r]);
+      return;
+    }
+    this[`_${o}`] = l, this._isValid = !0, this.doOnChange();
+  }
+  get(o) {
+    return ["hue", "saturation", "value", "alpha"].includes(o) ? Math.round(this[`_${o}`]) : this[`_${o}`];
+  }
+  toRgb() {
+    return this._isValid ? this._tiny.toRgb() : { r: 255, g: 255, b: 255, a: 0 };
+  }
+  fromString(o) {
+    const l = new J(o);
+    if (this._isValid = l.isValid, l.isValid) {
+      const { h: r, s: i, v: t, a: n } = l.toHsv();
+      this._hue = r, this._saturation = i * 100, this._value = t * 100, this._alpha = n * 100;
+    } else
+      this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100;
+    this.doOnChange();
+  }
+  clear() {
+    this._isValid = !1, this.value = "", this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100;
+  }
+  compare(o) {
+    const l = new J({
+      h: o._hue,
+      s: o._saturation / 100,
+      v: o._value / 100,
+      a: o._alpha / 100
+    });
+    return this._tiny.equals(l);
+  }
+  doOnChange() {
+    const { _hue: o, _saturation: l, _value: r, _alpha: i, format: t, enableAlpha: n } = this;
+    let p = t || (n ? "rgb" : "hex");
+    t === "hex" && n && (p = "hex8"), this._tiny = new J({
+      h: o,
+      s: l / 100,
+      v: r / 100,
+      a: i / 100
+    }), this.value = this._isValid ? this._tiny.toString(p) : "";
+  }
+}
+const Ta = (e) => {
+  const { currentColor: o } = Ae(Ne), l = P(i(e.colors, e.color));
+  D(() => o.value, (t) => {
+    const n = new le({
+      value: t,
+      enableAlpha: e.enableAlpha
+    });
+    l.value.forEach((p) => {
+      p.selected = n.compare(p);
+    });
+  }), oa(() => {
+    l.value = i(e.colors, e.color);
+  });
+  function r(t) {
+    e.color.fromString(e.colors[t]);
+  }
+  function i(t, n) {
+    return t.map((p) => {
+      const m = new le({
+        value: p,
+        enableAlpha: e.enableAlpha
+      });
+      return m.selected = m.compare(n), m;
+    });
+  }
+  return {
+    rgbaColors: l,
+    handleSelect: r
+  };
+}, Fa = (e) => {
+  const o = X("color-predefine"), l = k(() => [o.b(), o.is("disabled", e.disabled)]), r = k(() => o.e("colors"));
+  function i(t) {
+    return [
+      o.e("color-selector"),
+      o.is("alpha", t.get("alpha") < 100),
+      { selected: t.selected }
+    ];
+  }
+  return {
+    rootKls: l,
+    colorsKls: r,
+    colorSelectorKls: i
+  };
+}, Oa = A({
+  name: "ElColorPredefine"
+}), Ma = /* @__PURE__ */ A({
+  ...Oa,
+  props: Ba,
+  setup(e) {
+    const o = e, { rgbaColors: l, handleSelect: r } = Ta(o), { rootKls: i, colorsKls: t, colorSelectorKls: n } = Fa(o), { t: p } = j(), m = (g) => p("el.colorpicker.predefineDescription", { value: g });
+    return (g, y) => (B(), M("div", {
+      class: w(a(i))
+    }, [
+      $("div", {
+        class: w(a(t))
+      }, [
+        (B(!0), M(ra, null, na(a(l), (b, u) => (B(), M("button", {
+          key: g.colors[u],
+          type: "button",
+          disabled: g.disabled,
+          "aria-label": m(b.value),
+          class: w(a(n)(b)),
+          onClick: (_) => a(r)(u)
+        }, [
+          $("div", {
+            style: I({ backgroundColor: b.value })
+          }, null, 4)
+        ], 10, ["disabled", "aria-label", "onClick"]))), 128))
+      ], 2)
+    ], 2));
+  }
+});
+var Ia = /* @__PURE__ */ H(Ma, [["__file", "predefine.vue"]]);
+const xa = q({
+  color: {
+    type: F(Object),
+    required: !0
+  },
+  disabled: Boolean
+}), Na = (e) => {
+  const o = te(), l = P(), r = P(0), i = P(0), t = P("hsl(0, 100%, 50%)"), n = k(() => e.color.get("saturation")), p = k(() => e.color.get("value")), m = k(() => e.color.get("hue"));
+  function g(v) {
+    var d;
+    if (e.disabled)
+      return;
+    v.target !== l.value && y(v), (d = l.value) == null || d.focus({ preventScroll: !0 });
+  }
+  function y(v) {
+    if (e.disabled)
+      return;
+    const s = o.vnode.el.getBoundingClientRect(), { clientX: h, clientY: f } = Fe(v);
+    let C = h - s.left, E = f - s.top;
+    C = Math.max(0, C), C = Math.min(C, s.width), E = Math.max(0, E), E = Math.min(E, s.height), i.value = C, r.value = E, e.color.set({
+      saturation: C / s.width * 100,
+      value: 100 - E / s.height * 100
+    });
+  }
+  function b(v) {
+    if (e.disabled)
+      return;
+    const { shiftKey: d } = v, s = fe(v), h = d ? 10 : 1;
+    let f = !0;
+    switch (s) {
+      case K.left:
+        u(-h);
+        break;
+      case K.right:
+        u(h);
+        break;
+      case K.up:
+        _(h);
+        break;
+      case K.down:
+        _(-h);
+        break;
+      default:
+        f = !1;
+        break;
+    }
+    f && v.preventDefault();
+  }
+  function u(v) {
+    let d = n.value + v;
+    d = d < 0 ? 0 : d > 100 ? 100 : d, e.color.set("saturation", d);
+  }
+  function _(v) {
+    let d = p.value + v;
+    d = d < 0 ? 0 : d > 100 ? 100 : d, e.color.set("value", d);
+  }
+  return {
+    cursorRef: l,
+    cursorTop: r,
+    cursorLeft: i,
+    background: t,
+    saturation: n,
+    brightness: p,
+    hue: m,
+    handleClick: g,
+    handleDrag: y,
+    handleKeydown: b
+  };
+}, Ha = (e, {
+  cursorTop: o,
+  cursorLeft: l,
+  background: r,
+  handleDrag: i
+}) => {
+  const t = te(), n = X("color-svpanel");
+  function p() {
+    const u = e.color.get("saturation"), _ = e.color.get("value"), v = t.vnode.el, { clientWidth: d, clientHeight: s } = v;
+    l.value = u * d / 100, o.value = (100 - _) * s / 100, r.value = `hsl(${e.color.get("hue")}, 100%, 50%)`;
+  }
+  de(() => {
+    ue(t.vnode.el, {
+      drag: (u) => {
+        i(u);
+      },
+      end: (u) => {
+        i(u);
+      }
+    }), p();
+  }), D([
+    () => e.color.get("hue"),
+    () => e.color.get("value"),
+    () => e.color.value
+  ], () => p());
+  const m = k(() => n.b()), g = k(() => n.e("cursor")), y = k(() => ({
+    backgroundColor: r.value
+  })), b = k(() => ({
+    top: ae(o.value),
+    left: ae(l.value)
+  }));
+  return {
+    rootKls: m,
+    cursorKls: g,
+    rootStyle: y,
+    cursorStyle: b,
+    update: p
+  };
+}, za = A({
+  name: "ElSvPanel"
+}), Wa = /* @__PURE__ */ A({
+  ...za,
+  props: xa,
+  setup(e, { expose: o }) {
+    const l = e, {
+      cursorRef: r,
+      cursorTop: i,
+      cursorLeft: t,
+      background: n,
+      saturation: p,
+      brightness: m,
+      handleClick: g,
+      handleDrag: y,
+      handleKeydown: b
+    } = Na(l), { rootKls: u, cursorKls: _, rootStyle: v, cursorStyle: d, update: s } = Ha(l, {
+      cursorTop: i,
+      cursorLeft: t,
+      background: n,
+      handleDrag: y
+    }), { t: h } = j(), f = k(() => h("el.colorpicker.svLabel")), C = k(() => h("el.colorpicker.svDescription", {
+      saturation: p.value,
+      brightness: m.value,
+      color: l.color.value
+    }));
+    return o({
+      update: s
+    }), (E, V) => (B(), M("div", {
+      class: w(a(u)),
+      style: I(a(v)),
+      onClick: a(g)
+    }, [
+      $("div", {
+        ref_key: "cursorRef",
+        ref: r,
+        class: w(a(_)),
+        style: I(a(d)),
+        tabindex: E.disabled ? void 0 : 0,
+        "aria-disabled": E.disabled,
+        role: "slider",
+        "aria-valuemin": "0,0",
+        "aria-valuemax": "100,100",
+        "aria-label": a(f),
+        "aria-valuenow": `${a(p)},${a(m)}`,
+        "aria-valuetext": a(C),
+        onKeydown: a(b)
+      }, null, 46, ["tabindex", "aria-disabled", "aria-label", "aria-valuenow", "aria-valuetext", "onKeydown"])
+    ], 14, ["onClick"]));
+  }
+});
+var Ya = /* @__PURE__ */ H(Wa, [["__file", "sv-panel.vue"]]);
+const He = (e, o) => {
+  const l = sa(new le({
+    enableAlpha: e.showAlpha,
+    format: e.colorFormat || "",
+    value: e.modelValue
+  }));
+  return D(() => [e.colorFormat, e.showAlpha], () => {
+    l.enableAlpha = e.showAlpha, l.format = e.colorFormat || l.format, l.doOnChange(), o(N, l.value);
+  }), {
+    color: l
+  };
+}, qa = A({
+  name: "ElColorPickerPanel"
+}), Xa = /* @__PURE__ */ A({
+  ...qa,
+  props: Ie,
+  emits: Ra,
+  setup(e, { expose: o, emit: l }) {
+    const r = e, i = X("color-picker-panel"), { formItem: t } = Be(), n = Re(), p = P(), m = P(), g = P(), y = P(), b = P(""), { color: u } = Ae(xe, () => He(r, l), !0);
+    function _() {
+      u.fromString(b.value), u.value !== b.value && (b.value = u.value);
+    }
+    function v() {
+      var s;
+      r.validateEvent && ((s = t?.validate) == null || s.call(t, "blur").catch((h) => Y(h)));
+    }
+    function d() {
+      var s, h, f;
+      (s = p.value) == null || s.update(), (h = m.value) == null || h.update(), (f = g.value) == null || f.update();
+    }
+    return de(() => {
+      r.modelValue && (b.value = u.value), W(d);
+    }), D(() => r.modelValue, (s) => {
+      s !== u.value && (s ? u.fromString(s) : u.clear());
+    }), D(() => u.value, (s) => {
+      l(N, s), b.value = s, r.validateEvent && t?.validate("change").catch((h) => Y(h));
+    }), Le(Ne, {
+      currentColor: k(() => u.value)
+    }), o({
+      color: u,
+      inputRef: y,
+      update: d
+    }), (s, h) => (B(), M("div", {
+      class: w([a(i).b(), a(i).is("disabled", a(n)), a(i).is("border", s.border)]),
+      onFocusout: v
+    }, [
+      $("div", {
+        class: w(a(i).e("wrapper"))
+      }, [
+        T(Da, {
+          ref_key: "hueRef",
+          ref: p,
+          class: "hue-slider",
+          color: a(u),
+          vertical: "",
+          disabled: a(n)
+        }, null, 8, ["color", "disabled"]),
+        T(Ya, {
+          ref_key: "svRef",
+          ref: m,
+          color: a(u),
+          disabled: a(n)
+        }, null, 8, ["color", "disabled"])
+      ], 2),
+      s.showAlpha ? (B(), ee($a, {
+        key: 0,
+        ref_key: "alphaRef",
+        ref: g,
+        color: a(u),
+        disabled: a(n)
+      }, null, 8, ["color", "disabled"])) : ke("v-if", !0),
+      s.predefine ? (B(), ee(Ia, {
+        key: 1,
+        ref: "predefine",
+        "enable-alpha": s.showAlpha,
+        color: a(u),
+        colors: s.predefine,
+        disabled: a(n)
+      }, null, 8, ["enable-alpha", "color", "colors", "disabled"])) : ke("v-if", !0),
+      $("div", {
+        class: w(a(i).e("footer"))
+      }, [
+        T(a(ya), {
+          ref_key: "inputRef",
+          ref: y,
+          modelValue: b.value,
+          "onUpdate:modelValue": (f) => b.value = f,
+          "validate-event": !1,
+          size: "small",
+          disabled: a(n),
+          onChange: _
+        }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
+        ia(s.$slots, "footer")
+      ], 2)
+    ], 34));
+  }
+});
+var ja = /* @__PURE__ */ H(Xa, [["__file", "color-picker-panel.vue"]]);
+const Ua = De(ja), Ga = q({
+  persistent: {
+    type: Boolean,
+    default: !0
+  },
+  modelValue: {
+    type: F(String),
+    default: void 0
+  },
+  id: String,
+  showAlpha: Boolean,
+  colorFormat: String,
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  size: pa,
+  popperClass: G.popperClass,
+  popperStyle: G.popperStyle,
+  tabindex: {
+    type: [String, Number],
+    default: 0
+  },
+  teleported: G.teleported,
+  appendTo: G.appendTo,
+  predefine: {
+    type: F(Array)
+  },
+  validateEvent: {
+    type: Boolean,
+    default: !0
+  },
+  ...ba,
+  ...ga(["ariaLabel"])
+}), Ja = {
+  [N]: (e) => Q(e) || Z(e),
+  [ce]: (e) => Q(e) || Z(e),
+  activeChange: (e) => Q(e) || Z(e),
+  focus: (e) => e instanceof FocusEvent,
+  blur: (e) => e instanceof FocusEvent
+}, Qa = A({
+  name: "ElColorPicker"
+}), Za = /* @__PURE__ */ A({
+  ...Qa,
+  props: Ga,
+  emits: Ja,
+  setup(e, { expose: o, emit: l }) {
+    const r = e, { t: i } = j(), t = X("color"), { formItem: n } = Be(), p = Ca(), m = Re(), { valueOnClear: g, isEmptyValue: y } = ma(r, null), b = He(r, l), { inputId: u, isLabeledByFormItem: _ } = wa(r, {
+      formItemContext: n
+    }), v = P(), d = P(), s = P(), h = P(!1), f = P(!1);
+    let C = !0;
+    const { isFocused: E, handleFocus: V, handleBlur: R } = _a(d, {
+      disabled: m,
+      beforeBlur(c) {
+        var S;
+        return (S = v.value) == null ? void 0 : S.isFocusInsideContent(c);
+      },
+      afterBlur() {
+        var c;
+        z(!1), x(), r.validateEvent && ((c = n?.validate) == null || c.call(n, "blur").catch((S) => Y(S)));
+      }
+    }), L = da(() => {
+      var c, S;
+      return (S = (c = s.value) == null ? void 0 : c.color) != null ? S : b.color;
+    }), ze = k(() => ka(r, Object.keys(Ie))), We = k(() => !r.modelValue && !f.value ? "transparent" : Ue(L, r.showAlpha)), Ye = k(() => !r.modelValue && !f.value ? "" : L.value), qe = k(() => _.value ? void 0 : r.ariaLabel || i("el.colorpicker.defaultLabel")), Xe = k(() => _.value ? n?.labelId : void 0), je = k(() => [
+      t.b("picker"),
+      t.is("disabled", m.value),
+      t.bm("picker", p.value),
+      t.is("focused", E.value)
+    ]);
+    function Ue(c, S) {
+      const { r: oe, g: me, b: ge, a: ta } = c.toRgb();
+      return S ? `rgba(${oe}, ${me}, ${ge}, ${ta})` : `rgb(${oe}, ${me}, ${ge})`;
+    }
+    function z(c) {
+      h.value = c;
+    }
+    const U = Sa(z, 100, { leading: !0 });
+    function ve() {
+      m.value || z(!0);
+    }
+    function he() {
+      U(!1), x();
+    }
+    function x() {
+      W(() => {
+        r.modelValue ? L.fromString(r.modelValue) : (L.value = "", W(() => {
+          f.value = !1;
+        }));
+      });
+    }
+    function Ge() {
+      m.value || (h.value && x(), U(!h.value));
+    }
+    function Je() {
+      const c = y(L.value) ? g.value : L.value;
+      l(N, c), l(ce, c), r.validateEvent && n?.validate("change").catch((S) => Y(S)), U(!1), W(() => {
+        const S = new le({
+          enableAlpha: r.showAlpha,
+          format: r.colorFormat || "",
+          value: r.modelValue
+        });
+        L.compare(S) || x();
+      });
+    }
+    function Qe() {
+      U(!1), l(N, g.value), l(ce, g.value), r.modelValue !== g.value && r.validateEvent && n?.validate("change").catch((c) => Y(c)), x();
+    }
+    function Ze() {
+      var c, S;
+      (S = (c = s?.value) == null ? void 0 : c.inputRef) == null || S.focus();
+    }
+    function ea() {
+      h.value && (he(), E.value && be());
+    }
+    function pe(c) {
+      c.preventDefault(), c.stopPropagation(), z(!1), x();
+    }
+    function aa(c) {
+      switch (fe(c)) {
+        case K.enter:
+        case K.numpadEnter:
+        case K.space:
+          c.preventDefault(), c.stopPropagation(), ve();
+          break;
+        case K.esc:
+          pe(c);
+          break;
+      }
+    }
+    function be() {
+      d.value.focus();
+    }
+    function la() {
+      d.value.blur();
+    }
+    return D(() => Ye.value, (c) => {
+      C && l("activeChange", c), C = !0;
+    }), D(() => L.value, () => {
+      !r.modelValue && !f.value && (f.value = !0);
+    }), D(() => r.modelValue, (c) => {
+      c ? c && c !== L.value && (C = !1, L.fromString(c)) : f.value = !1;
+    }), D(() => h.value, () => {
+      var c;
+      W((c = s.value) == null ? void 0 : c.update);
+    }), Le(xe, b), o({
+      color: L,
+      show: ve,
+      hide: he,
+      focus: be,
+      blur: la
+    }), (c, S) => (B(), ee(a(fa), {
+      ref_key: "popper",
+      ref: v,
+      visible: h.value,
+      "show-arrow": !1,
+      "fallback-placements": ["bottom", "top", "right", "left"],
+      offset: 0,
+      "gpu-acceleration": !1,
+      "popper-class": [a(t).be("picker", "panel"), c.popperClass],
+      "popper-style": c.popperStyle,
+      "stop-popper-mouse-event": !1,
+      pure: "",
+      loop: "",
+      role: "dialog",
+      effect: "light",
+      trigger: "click",
+      teleported: c.teleported,
+      transition: `${a(t).namespace.value}-zoom-in-top`,
+      persistent: c.persistent,
+      "append-to": c.appendTo,
+      onShow: Ze,
+      onHide: (oe) => z(!1)
+    }, {
+      content: O(() => [
+        re((B(), ee(a(Ua), ye({
+          ref_key: "pickerPanelRef",
+          ref: s
+        }, a(ze), {
+          border: !1,
+          "validate-event": !1,
+          onKeydown: ca(pe, ["esc"])
+        }), {
+          footer: O(() => [
+            $("div", null, [
+              T(a(Pe), {
+                class: w(a(t).be("footer", "link-btn")),
+                text: "",
+                size: "small",
+                onClick: Qe
+              }, {
+                default: O(() => [
+                  we(Ee(a(i)("el.colorpicker.clear")), 1)
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              T(a(Pe), {
+                plain: "",
+                size: "small",
+                class: w(a(t).be("footer", "btn")),
+                onClick: Je
+              }, {
+                default: O(() => [
+                  we(Ee(a(i)("el.colorpicker.confirm")), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ])
+          ]),
+          _: 1
+        }, 16, ["onKeydown"])), [
+          [a(Ea), ea, d.value]
+        ])
+      ]),
+      default: O(() => [
+        $("div", ye({
+          id: a(u),
+          ref_key: "triggerRef",
+          ref: d
+        }, c.$attrs, {
+          class: a(je),
+          role: "button",
+          "aria-label": a(qe),
+          "aria-labelledby": a(Xe),
+          "aria-description": a(i)("el.colorpicker.description", { color: c.modelValue || "" }),
+          "aria-disabled": a(m),
+          tabindex: a(m) ? void 0 : c.tabindex,
+          onKeydown: aa,
+          onFocus: a(V),
+          onBlur: a(R)
+        }), [
+          $("div", {
+            class: w(a(t).be("picker", "trigger")),
+            onClick: Ge
+          }, [
+            $("span", {
+              class: w([a(t).be("picker", "color"), a(t).is("alpha", c.showAlpha)])
+            }, [
+              $("span", {
+                class: w(a(t).be("picker", "color-inner")),
+                style: I({
+                  backgroundColor: a(We)
+                })
+              }, [
+                re(T(a(Se), {
+                  class: w([a(t).be("picker", "icon"), a(t).is("icon-arrow-down")])
+                }, {
+                  default: O(() => [
+                    T(a(va))
+                  ]),
+                  _: 1
+                }, 8, ["class"]), [
+                  [Ce, c.modelValue || f.value]
+                ]),
+                re(T(a(Se), {
+                  class: w([a(t).be("picker", "empty"), a(t).is("icon-close")])
+                }, {
+                  default: O(() => [
+                    T(a(ha))
+                  ]),
+                  _: 1
+                }, 8, ["class"]), [
+                  [Ce, !c.modelValue && !f.value]
+                ])
+              ], 6)
+            ], 2)
+          ], 2)
+        ], 16, ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex", "onFocus", "onBlur"])
+      ]),
+      _: 1
+    }, 8, ["visible", "popper-class", "popper-style", "teleported", "transition", "persistent", "append-to", "onHide"]));
+  }
+});
+var el = /* @__PURE__ */ H(Za, [["__file", "color-picker.vue"]]);
+const pl = De(el);
+export {
+  pl as E
+};