bp-aicc-editor 1.2.49 → 1.2.491

package/lib/{basic-setting-t_fhV03P.js → basic-setting-DA8V66js.js}

@@ -1,48 +1,47 @@
-import { b as x, d as D, v as sl, e as G, ac as te, a as N, u as q, B as ee, ay as le, bO as Q, bP as Ve, aJ as Be, aM as Me, an as j, w as Te, bf as il, aQ as ul, aK as cl, b9 as dl, aL as fl, bQ as pl, aP as vl, a5 as ml, E as _e, bg as hl, j as bl, b4 as Se, _ as pe, M as gl, aa as kl } from "./index-B5gQsQyO.js";
-import { E as yl } from "./el-input-BQVAq6r_.js";
-import "element-plus";
+import { b as q, d as O, y as rl, h as G, ae, e as N, u as x, D as ee, ax as le, bR as Q, bS as Ve, ar as Te, aq as Le, at as j, w as Be, br as sl, ao as il, ap as ul, bm as cl, as as dl, bT as fl, aP as pl, a7 as ml, a as we, bs as vl, l as hl, bh as _e, O as bl, ac as gl, _ as kl } from "./index-CkwFtsjH.js";
+import { E as yl } from "./el-input-CIlT8DVc.js";
 import { storeToRefs as Cl } from "pinia";
-import { getCurrentInstance as ne, shallowRef as Ee, computed as V, ref as K, onMounted as re, watch as M, defineComponent as U, createElementBlock as T, openBlock as R, normalizeClass as P, unref as t, createElementVNode as L, normalizeStyle as O, inject as ve, watchEffect as wl, Fragment as Vl, renderList as _l, reactive as Sl, nextTick as X, provide as De, createBlock as oe, createCommentVNode as Pe, createVNode as k, renderSlot as El, withCtx as $, mergeProps as $e, withDirectives as se, vShow as Ke, withKeys as Pl, createTextVNode as Le, toDisplayString as Fe, resolveComponent as H } from "vue";
-import { b as $l, c as Kl, p as Ll, r as Fl, s as Al, t as Rl } from "./select-options-BiXS5Q9o.js";
-import { comInjectionKey as Bl } from "./config-BGEHEzgf.js";
-import { u as Z, a as Ml } from "./index-DRMdRQgP.js";
-import { u as Tl } from "./index-CKL9IO1N.js";
-import { U as W, C as de } from "./event-Xd-jNBs0.js";
-import { g as me, E as F } from "./event-8mULJy3M.js";
-import { C as Dl } from "./index-Bv0MK-1K.js";
-import { a as Il } from "./index-BlbQJqXp.js";
-const Ie = x({
+import { getCurrentInstance as ne, shallowRef as Se, computed as w, ref as K, onMounted as re, watch as B, defineComponent as M, createElementBlock as D, openBlock as T, normalizeClass as P, unref as a, createElementVNode as R, normalizeStyle as U, inject as pe, watchEffect as Vl, Fragment as wl, renderList as _l, reactive as Sl, nextTick as X, provide as De, createBlock as oe, createCommentVNode as Ee, createVNode as k, renderSlot as El, withCtx as $, mergeProps as Pe, withDirectives as se, vShow as $e, withKeys as Pl, createTextVNode as Ke, toDisplayString as Re, resolveComponent as H } from "vue";
+import { b as $l, c as Kl, p as Rl, r as Al, s as Fl, t as Tl } from "./select-options-DHQ0ON2h.js";
+import { comInjectionKey as Ll } from "./config-BGEHEzgf.js";
+import { u as Z, E as Bl } from "./index-2psilmLh.js";
+import { u as Dl } from "./index-CsMG58rb.js";
+import { U as z, C as de } from "./event-Xd-jNBs0.js";
+import { g as me, E as A } from "./event-CAGCfwHj.js";
+import { C as Ol } from "./index-By4oDV0Y.js";
+import { u as Il } from "./index-spK4Vvgn.js";
+const Oe = q({
   color: {
-    type: D(Object),
+    type: O(Object),
     required: !0
   },
   vertical: Boolean,
   disabled: Boolean
-}), Ol = Ie;
+}), Ul = Oe;
 let ie = !1;
 function fe(e, l) {
-  if (!sl)
+  if (!rl)
     return;
-  const a = function(r) {
+  const t = function(r) {
     var s;
     (s = l.drag) == null || s.call(l, r);
   }, n = function(r) {
     var s;
-    document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", n), document.removeEventListener("touchmove", a), document.removeEventListener("touchend", n), document.onselectstart = null, document.ondragstart = null, ie = !1, (s = l.end) == null || s.call(l, r);
+    document.removeEventListener("mousemove", t), document.removeEventListener("mouseup", n), document.removeEventListener("touchmove", t), document.removeEventListener("touchend", n), document.onselectstart = null, document.ondragstart = null, ie = !1, (s = l.end) == null || s.call(l, r);
   }, c = function(r) {
     var s;
-    ie || (document.onselectstart = () => !1, document.ondragstart = () => !1, document.addEventListener("mousemove", a), document.addEventListener("mouseup", n), document.addEventListener("touchmove", a), document.addEventListener("touchend", n), ie = !0, (s = l.start) == null || s.call(l, r));
+    ie || (document.onselectstart = () => !1, document.ondragstart = () => !1, document.addEventListener("mousemove", t), document.addEventListener("mouseup", n), document.addEventListener("touchmove", t), document.addEventListener("touchend", n), ie = !0, (s = l.start) == null || s.call(l, r));
   };
   e.addEventListener("mousedown", c), e.addEventListener("touchstart", c, { passive: !1 });
 }
-const Oe = (e) => {
-  let l, a;
-  return e.type === "touchend" ? (a = e.changedTouches[0].clientY, l = e.changedTouches[0].clientX) : e.type.startsWith("touch") ? (a = e.touches[0].clientY, l = e.touches[0].clientX) : (a = e.clientY, l = e.clientX), {
+const Ie = (e) => {
+  let l, t;
+  return e.type === "touchend" ? (t = e.changedTouches[0].clientY, l = e.changedTouches[0].clientX) : e.type.startsWith("touch") ? (t = e.touches[0].clientY, l = e.touches[0].clientX) : (t = e.clientY, l = e.clientX), {
     clientX: l,
-    clientY: a
+    clientY: t
   };
-}, Ue = (e, { key: l, minValue: a, maxValue: n }) => {
-  const c = ne(), r = Ee(), s = Ee(), u = V(() => e.color.get(l));
+}, Ue = (e, { key: l, minValue: t, maxValue: n }) => {
+  const c = ne(), r = Se(), s = Se(), u = w(() => e.color.get(l));
   function i(f) {
     var o;
     if (e.disabled)
@@ -52,45 +51,45 @@ const Oe = (e) => {
   function b(f) {
     if (!s.value || !r.value || e.disabled)
       return;
-    const h = c.vnode.el.getBoundingClientRect(), { clientX: m, clientY: C } = Oe(f);
+    const h = c.vnode.el.getBoundingClientRect(), { clientX: v, clientY: C } = Ie(f);
     let d;
     if (e.vertical) {
-      let v = C - h.top;
-      v = Math.max(r.value.offsetHeight / 2, v), v = Math.min(v, h.height - r.value.offsetHeight / 2), d = Math.round(
-        (v - r.value.offsetHeight / 2) / (h.height - r.value.offsetHeight) * n
+      let m = C - h.top;
+      m = Math.max(r.value.offsetHeight / 2, m), m = Math.min(m, h.height - r.value.offsetHeight / 2), d = Math.round(
+        (m - r.value.offsetHeight / 2) / (h.height - r.value.offsetHeight) * n
       );
     } else {
-      let v = m - h.left;
-      v = Math.max(r.value.offsetWidth / 2, v), v = Math.min(v, h.width - r.value.offsetWidth / 2), d = Math.round(
-        (v - r.value.offsetWidth / 2) / (h.width - r.value.offsetWidth) * n
+      let m = v - h.left;
+      m = Math.max(r.value.offsetWidth / 2, m), m = Math.min(m, h.width - r.value.offsetWidth / 2), d = Math.round(
+        (m - r.value.offsetWidth / 2) / (h.width - r.value.offsetWidth) * n
       );
     }
     e.color.set(l, d);
   }
-  function w(f) {
+  function V(f) {
     if (e.disabled)
       return;
-    const { shiftKey: o } = f, h = me(f), m = o ? 10 : 1, C = l === "hue" ? -1 : 1;
+    const { shiftKey: o } = f, h = me(f), v = o ? 10 : 1, C = l === "hue" ? -1 : 1;
     let d = !0;
     switch (h) {
-      case F.left:
-      case F.down:
-        g(-m * C);
+      case A.left:
+      case A.down:
+        g(-v * C);
         break;
-      case F.right:
-      case F.up:
-        g(m * C);
+      case A.right:
+      case A.up:
+        g(v * C);
         break;
-      case F.home:
-        e.color.set(l, l === "hue" ? n : a);
+      case A.home:
+        e.color.set(l, l === "hue" ? n : t);
         break;
-      case F.end:
-        e.color.set(l, l === "hue" ? a : n);
+      case A.end:
+        e.color.set(l, l === "hue" ? t : n);
         break;
-      case F.pageDown:
+      case A.pageDown:
         g(-4 * C);
         break;
-      case F.pageUp:
+      case A.pageUp:
         g(4 * C);
         break;
       default:
@@ -101,7 +100,7 @@ const Oe = (e) => {
   }
   function g(f) {
     let o = u.value + f;
-    o = o < a ? a : o > n ? n : o, e.color.set(l, o);
+    o = o < t ? t : o > n ? n : o, e.color.set(l, o);
   }
   return {
     thumb: r,
@@ -109,24 +108,24 @@ const Oe = (e) => {
     currentValue: u,
     handleDrag: b,
     handleClick: i,
-    handleKeydown: w
+    handleKeydown: V
   };
-}, ze = (e, {
+}, Me = (e, {
   namespace: l,
-  maxValue: a,
+  maxValue: t,
   bar: n,
   thumb: c,
   currentValue: r,
   handleDrag: s,
   getBackground: u
 }) => {
-  const i = ne(), b = G(l), w = K(0), g = K(0), f = K();
+  const i = ne(), b = G(l), V = K(0), g = K(0), f = K();
   function o() {
     if (!c.value || e.vertical)
       return 0;
-    const E = i.vnode.el, A = r.value;
+    const E = i.vnode.el, F = r.value;
     return E ? Math.round(
-      A * (E.offsetWidth - c.value.offsetWidth / 2) / a
+      F * (E.offsetWidth - c.value.offsetWidth / 2) / t
     ) : 0;
   }
   function h() {
@@ -135,68 +134,68 @@ const Oe = (e) => {
     const E = i.vnode.el;
     if (!e.vertical)
       return 0;
-    const A = r.value;
+    const F = r.value;
     return E ? Math.round(
-      A * (E.offsetHeight - c.value.offsetHeight / 2) / a
+      F * (E.offsetHeight - c.value.offsetHeight / 2) / t
     ) : 0;
   }
-  function m() {
-    w.value = o(), g.value = h(), f.value = u?.();
+  function v() {
+    V.value = o(), g.value = h(), f.value = u?.();
   }
   re(() => {
     if (!n.value || !c.value)
       return;
     const E = {
-      drag: (A) => {
-        s(A);
+      drag: (F) => {
+        s(F);
       },
-      end: (A) => {
-        s(A);
+      end: (F) => {
+        s(F);
       }
     };
-    fe(n.value, E), fe(c.value, E), m();
-  }), M(r, () => m()), M(
+    fe(n.value, E), fe(c.value, E), v();
+  }), B(r, () => v()), B(
     () => e.color.value,
-    () => m()
+    () => v()
   );
-  const C = V(() => [
+  const C = w(() => [
     b.b(),
     b.is("vertical", e.vertical),
     b.is("disabled", e.disabled)
-  ]), d = V(() => b.e("bar")), v = V(() => b.e("thumb")), y = V(() => ({ background: f.value })), _ = V(() => ({
-    left: te(w.value),
-    top: te(g.value)
+  ]), d = w(() => b.e("bar")), m = w(() => b.e("thumb")), y = w(() => ({ background: f.value })), _ = w(() => ({
+    left: ae(V.value),
+    top: ae(g.value)
   }));
   return {
     rootKls: C,
     barKls: d,
     barStyle: y,
-    thumbKls: v,
+    thumbKls: m,
     thumbStyle: _,
-    thumbLeft: w,
+    thumbLeft: V,
     thumbTop: g,
-    update: m
+    update: v
   };
-}, Ul = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled"], Ae = 0, ue = 100, zl = U({
+}, Ml = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled"], Ae = 0, ue = 100, Wl = M({
   name: "ElColorAlphaSlider",
   __name: "alpha-slider",
-  props: Ie,
+  props: Oe,
   setup(e, { expose: l }) {
-    const a = e, { currentValue: n, bar: c, thumb: r, handleDrag: s, handleClick: u, handleKeydown: i } = Ue(a, { key: "alpha", minValue: Ae, maxValue: ue }), { rootKls: b, barKls: w, barStyle: g, thumbKls: f, thumbStyle: o, update: h } = ze(a, {
+    const t = e, { currentValue: n, bar: c, thumb: r, handleDrag: s, handleClick: u, handleKeydown: i } = Ue(t, { key: "alpha", minValue: Ae, maxValue: ue }), { rootKls: b, barKls: V, barStyle: g, thumbKls: f, thumbStyle: o, update: h } = Me(t, {
       namespace: "color-alpha-slider",
       maxValue: ue,
       currentValue: n,
       bar: c,
       thumb: r,
       handleDrag: s,
-      getBackground: v
-    }), { t: m } = q(), C = V(() => m("el.colorpicker.alphaLabel")), d = V(() => m("el.colorpicker.alphaDescription", {
+      getBackground: m
+    }), { t: v } = x(), C = w(() => v("el.colorpicker.alphaLabel")), d = w(() => v("el.colorpicker.alphaDescription", {
       alpha: n.value,
-      color: a.color.value
+      color: t.color.value
     }));
-    function v() {
-      if (a.color && a.color.value) {
-        const { r: y, g: _, b: E } = a.color.toRgb();
+    function m() {
+      if (t.color && t.color.value) {
+        const { r: y, g: _, b: E } = t.color.toRgb();
         return `linear-gradient(to right, rgba(${y}, ${_}, ${E}, 0) 0%, rgba(${y}, ${_}, ${E}, 1) 100%)`;
       }
       return "";
@@ -205,31 +204,31 @@ const Oe = (e) => {
       update: h,
       bar: c,
       thumb: r
-    }), (y, _) => (R(), T(
+    }), (y, _) => (T(), D(
       "div",
       {
-        class: P(t(b))
+        class: P(a(b))
       },
       [
-        L(
+        R(
           "div",
           {
             ref_key: "bar",
             ref: c,
-            class: P(t(w)),
-            style: O(t(g)),
-            onClick: _[0] || (_[0] = (...E) => t(u) && t(u)(...E))
+            class: P(a(V)),
+            style: U(a(g)),
+            onClick: _[0] || (_[0] = (...E) => a(u) && a(u)(...E))
           },
           null,
           6
         ),
-        L("div", {
+        R("div", {
           ref_key: "thumb",
           ref: r,
-          class: P(t(f)),
-          style: O(t(o)),
+          class: P(a(f)),
+          style: U(a(o)),
           "aria-label": C.value,
-          "aria-valuenow": t(n),
+          "aria-valuenow": a(n),
           "aria-valuetext": d.value,
           "aria-orientation": y.vertical ? "vertical" : "horizontal",
           "aria-valuemin": Ae,
@@ -237,81 +236,81 @@ const Oe = (e) => {
           role: "slider",
           tabindex: y.disabled ? void 0 : 0,
           "aria-disabled": y.disabled,
-          onKeydown: _[1] || (_[1] = (...E) => t(i) && t(i)(...E))
-        }, null, 46, Ul)
+          onKeydown: _[1] || (_[1] = (...E) => a(i) && a(i)(...E))
+        }, null, 46, Ml)
       ],
       2
     ));
   }
 });
-var Hl = /* @__PURE__ */ N(zl, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/alpha-slider.vue"]]);
-const Wl = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled"], Re = 0, ce = 360, Nl = U({
+var Hl = /* @__PURE__ */ N(Wl, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/alpha-slider.vue"]]);
+const zl = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled"], Fe = 0, ce = 360, Nl = M({
   name: "ElColorHueSlider",
   __name: "hue-slider",
-  props: Ol,
+  props: Ul,
   setup(e, { expose: l }) {
-    const a = e, { currentValue: n, bar: c, thumb: r, handleDrag: s, handleClick: u, handleKeydown: i } = Ue(a, { key: "hue", minValue: Re, maxValue: ce }), { rootKls: b, barKls: w, thumbKls: g, thumbStyle: f, thumbTop: o, update: h } = ze(a, {
+    const t = e, { currentValue: n, bar: c, thumb: r, handleDrag: s, handleClick: u, handleKeydown: i } = Ue(t, { key: "hue", minValue: Fe, maxValue: ce }), { rootKls: b, barKls: V, thumbKls: g, thumbStyle: f, thumbTop: o, update: h } = Me(t, {
       namespace: "color-hue-slider",
       maxValue: ce,
       currentValue: n,
       bar: c,
       thumb: r,
       handleDrag: s
-    }), { t: m } = q(), C = V(() => m("el.colorpicker.hueLabel")), d = V(() => m("el.colorpicker.hueDescription", {
+    }), { t: v } = x(), C = w(() => v("el.colorpicker.hueLabel")), d = w(() => v("el.colorpicker.hueDescription", {
       hue: n.value,
-      color: a.color.value
+      color: t.color.value
     }));
     return l({
       bar: c,
       thumb: r,
       thumbTop: o,
       update: h
-    }), (v, y) => (R(), T(
+    }), (m, y) => (T(), D(
       "div",
       {
-        class: P(t(b))
+        class: P(a(b))
       },
       [
-        L(
+        R(
           "div",
           {
             ref_key: "bar",
             ref: c,
-            class: P(t(w)),
-            onClick: y[0] || (y[0] = (..._) => t(u) && t(u)(..._))
+            class: P(a(V)),
+            onClick: y[0] || (y[0] = (..._) => a(u) && a(u)(..._))
           },
           null,
           2
         ),
-        L("div", {
+        R("div", {
           ref_key: "thumb",
           ref: r,
-          class: P(t(g)),
-          style: O(t(f)),
+          class: P(a(g)),
+          style: U(a(f)),
           "aria-label": C.value,
-          "aria-valuenow": t(n),
+          "aria-valuenow": a(n),
           "aria-valuetext": d.value,
-          "aria-orientation": v.vertical ? "vertical" : "horizontal",
-          "aria-valuemin": Re,
+          "aria-orientation": m.vertical ? "vertical" : "horizontal",
+          "aria-valuemin": Fe,
           "aria-valuemax": ce,
           role: "slider",
-          tabindex: v.disabled ? void 0 : 0,
-          "aria-disabled": v.disabled,
-          onKeydown: y[1] || (y[1] = (..._) => t(i) && t(i)(..._))
-        }, null, 46, Wl)
+          tabindex: m.disabled ? void 0 : 0,
+          "aria-disabled": m.disabled,
+          onKeydown: y[1] || (y[1] = (..._) => a(i) && a(i)(..._))
+        }, null, 46, zl)
       ],
       2
     ));
   }
 });
 var Yl = /* @__PURE__ */ N(Nl, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/hue-slider.vue"]]);
-const Xl = x({
+const Xl = q({
   colors: {
-    type: D(Array),
+    type: O(Array),
     required: !0
   },
   color: {
-    type: D(Object),
+    type: O(Object),
     required: !0
   },
   enableAlpha: {
@@ -319,9 +318,9 @@ const Xl = x({
     required: !0
   },
   disabled: Boolean
-}), He = x({
+}), We = q({
   modelValue: {
-    type: D(String),
+    type: O(String),
     default: void 0
   },
   border: {
@@ -332,29 +331,29 @@ const Xl = x({
   colorFormat: String,
   disabled: Boolean,
   predefine: {
-    type: D(Array)
+    type: O(Array)
   },
   validateEvent: {
     type: Boolean,
     default: !0
   }
 }), jl = {
-  [W]: (e) => ee(e) || le(e)
-}, We = Symbol("colorCommonPickerKey"), Ne = Symbol("colorPickerPanelContextKey");
-class ae {
+  [z]: (e) => ee(e) || le(e)
+}, He = Symbol("colorCommonPickerKey"), ze = Symbol("colorPickerPanelContextKey");
+class te {
   constructor(l = {}) {
     this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100, this._tiny = new Q(), this._isValid = !1, this.enableAlpha = !1, this.format = "", this.value = "";
-    for (const a in l)
-      Ve(l, a) && (this[a] = l[a]);
+    for (const t in l)
+      Ve(l, t) && (this[t] = l[t]);
     l.value ? this.fromString(l.value) : this.doOnChange();
   }
-  set(l, a) {
+  set(l, t) {
     if (arguments.length === 1 && typeof l == "object") {
       for (const n in l)
         Ve(l, n) && this.set(n, l[n]);
       return;
     }
-    this[`_${l}`] = a, this._isValid = !0, this.doOnChange();
+    this[`_${l}`] = t, this._isValid = !0, this.doOnChange();
   }
   get(l) {
     return ["hue", "saturation", "value", "alpha"].includes(l) ? Math.round(this[`_${l}`]) : this[`_${l}`];
@@ -363,9 +362,9 @@ class ae {
     return this._isValid ? this._tiny.toRgb() : { r: 255, g: 255, b: 255, a: 0 };
   }
   fromString(l) {
-    const a = new Q(l);
-    if (this._isValid = a.isValid, a.isValid) {
-      const { h: n, s: c, v: r, a: s } = a.toHsv();
+    const t = new Q(l);
+    if (this._isValid = t.isValid, t.isValid) {
+      const { h: n, s: c, v: r, a: s } = t.toHsv();
       this._hue = n, this._saturation = c * 100, this._value = r * 100, this._alpha = s * 100;
     } else
       this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100;
@@ -375,47 +374,47 @@ class ae {
     this._isValid = !1, this.value = "", this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100;
   }
   compare(l) {
-    const a = new Q({
+    const t = new Q({
       h: l._hue,
       s: l._saturation / 100,
       v: l._value / 100,
       a: l._alpha / 100
     });
-    return this._tiny.equals(a);
+    return this._tiny.equals(t);
   }
   doOnChange() {
-    const { _hue: l, _saturation: a, _value: n, _alpha: c, format: r, enableAlpha: s } = this;
+    const { _hue: l, _saturation: t, _value: n, _alpha: c, format: r, enableAlpha: s } = this;
     let u = r || (s ? "rgb" : "hex");
     r === "hex" && s && (u = "hex8"), this._tiny = new Q({
       h: l,
-      s: a / 100,
+      s: t / 100,
       v: n / 100,
       a: c / 100
     }), this.value = this._isValid ? this._tiny.toString(u) : "";
   }
 }
-const xl = (e) => {
-  const { currentColor: l } = ve(Ne), a = K(c(e.colors, e.color));
-  M(
+const ql = (e) => {
+  const { currentColor: l } = pe(ze), t = K(c(e.colors, e.color));
+  B(
     () => l.value,
     (r) => {
-      const s = new ae({
+      const s = new te({
         value: r,
         enableAlpha: e.enableAlpha
       });
-      a.value.forEach((u) => {
+      t.value.forEach((u) => {
         u.selected = s.compare(u);
       });
     }
-  ), wl(() => {
-    a.value = c(e.colors, e.color);
+  ), Vl(() => {
+    t.value = c(e.colors, e.color);
   });
   function n(r) {
     e.color.fromString(e.colors[r]);
   }
   function c(r, s) {
     return r.map((u) => {
-      const i = new ae({
+      const i = new te({
         value: u,
         enableAlpha: e.enableAlpha
       });
@@ -423,11 +422,11 @@ const xl = (e) => {
     });
   }
   return {
-    rgbaColors: a,
+    rgbaColors: t,
     handleSelect: n
   };
 }, Gl = (e) => {
-  const l = G("color-predefine"), a = V(() => [l.b(), l.is("disabled", e.disabled)]), n = V(() => l.e("colors"));
+  const l = G("color-predefine"), t = w(() => [l.b(), l.is("disabled", e.disabled)]), n = w(() => l.e("colors"));
   function c(r) {
     return [
       l.e("color-selector"),
@@ -436,48 +435,48 @@ const xl = (e) => {
     ];
   }
   return {
-    rootKls: a,
+    rootKls: t,
     colorsKls: n,
     colorSelectorKls: c
   };
-}, ql = ["disabled", "aria-label", "onClick"], Jl = U({
+}, xl = ["disabled", "aria-label", "onClick"], Jl = M({
   name: "ElColorPredefine",
   __name: "predefine",
   props: Xl,
   setup(e) {
-    const l = e, { rgbaColors: a, handleSelect: n } = xl(l), { rootKls: c, colorsKls: r, colorSelectorKls: s } = Gl(l), { t: u } = q(), i = (b) => u("el.colorpicker.predefineDescription", { value: b });
-    return (b, w) => (R(), T(
+    const l = e, { rgbaColors: t, handleSelect: n } = ql(l), { rootKls: c, colorsKls: r, colorSelectorKls: s } = Gl(l), { t: u } = x(), i = (b) => u("el.colorpicker.predefineDescription", { value: b });
+    return (b, V) => (T(), D(
       "div",
       {
-        class: P(t(c))
+        class: P(a(c))
       },
       [
-        L(
+        R(
           "div",
           {
-            class: P(t(r))
+            class: P(a(r))
           },
           [
-            (R(!0), T(
-              Vl,
+            (T(!0), D(
+              wl,
               null,
-              _l(t(a), (g, f) => (R(), T("button", {
+              _l(a(t), (g, f) => (T(), D("button", {
                 key: b.colors[f],
                 type: "button",
                 disabled: b.disabled,
                 "aria-label": i(g.value),
-                class: P(t(s)(g)),
-                onClick: (o) => t(n)(f)
+                class: P(a(s)(g)),
+                onClick: (o) => a(n)(f)
               }, [
-                L(
+                R(
                   "div",
                   {
-                    style: O({ backgroundColor: g.value })
+                    style: U({ backgroundColor: g.value })
                   },
                   null,
                   4
                 )
-              ], 10, ql))),
+              ], 10, xl))),
               128
             ))
           ],
@@ -489,25 +488,25 @@ const xl = (e) => {
   }
 });
 var Ql = /* @__PURE__ */ N(Jl, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/predefine.vue"]]);
-const Zl = x({
+const Zl = q({
   color: {
-    type: D(Object),
+    type: O(Object),
     required: !0
   },
   disabled: Boolean
-}), et = (e) => {
-  const l = ne(), a = K(), n = K(0), c = K(0), r = K("hsl(0, 100%, 50%)"), s = V(() => e.color.get("saturation")), u = V(() => e.color.get("value")), i = V(() => e.color.get("hue"));
+}), ea = (e) => {
+  const l = ne(), t = K(), n = K(0), c = K(0), r = K("hsl(0, 100%, 50%)"), s = w(() => e.color.get("saturation")), u = w(() => e.color.get("value")), i = w(() => e.color.get("hue"));
   function b(h) {
-    var m;
+    var v;
     if (e.disabled)
       return;
-    h.target !== a.value && w(h), (m = a.value) == null || m.focus({ preventScroll: !0 });
+    h.target !== t.value && V(h), (v = t.value) == null || v.focus({ preventScroll: !0 });
   }
-  function w(h) {
+  function V(h) {
     if (e.disabled)
       return;
-    const C = l.vnode.el.getBoundingClientRect(), { clientX: d, clientY: v } = Oe(h);
-    let y = d - C.left, _ = v - C.top;
+    const C = l.vnode.el.getBoundingClientRect(), { clientX: d, clientY: m } = Ie(h);
+    let y = d - C.left, _ = m - C.top;
     y = Math.max(0, y), y = Math.min(y, C.width), _ = Math.max(0, _), _ = Math.min(_, C.height), c.value = y, n.value = _, e.color.set({
       saturation: y / C.width * 100,
       value: 100 - _ / C.height * 100
@@ -516,37 +515,37 @@ const Zl = x({
   function g(h) {
     if (e.disabled)
       return;
-    const { shiftKey: m } = h, C = me(h), d = m ? 10 : 1;
-    let v = !0;
+    const { shiftKey: v } = h, C = me(h), d = v ? 10 : 1;
+    let m = !0;
     switch (C) {
-      case F.left:
+      case A.left:
         f(-d);
         break;
-      case F.right:
+      case A.right:
         f(d);
         break;
-      case F.up:
+      case A.up:
         o(d);
         break;
-      case F.down:
+      case A.down:
         o(-d);
         break;
       default:
-        v = !1;
+        m = !1;
         break;
     }
-    v && h.preventDefault();
+    m && h.preventDefault();
   }
   function f(h) {
-    let m = s.value + h;
-    m = m < 0 ? 0 : m > 100 ? 100 : m, e.color.set("saturation", m);
+    let v = s.value + h;
+    v = v < 0 ? 0 : v > 100 ? 100 : v, e.color.set("saturation", v);
   }
   function o(h) {
-    let m = u.value + h;
-    m = m < 0 ? 0 : m > 100 ? 100 : m, e.color.set("value", m);
+    let v = u.value + h;
+    v = v < 0 ? 0 : v > 100 ? 100 : v, e.color.set("value", v);
   }
   return {
-    cursorRef: a,
+    cursorRef: t,
     cursorTop: n,
     cursorLeft: c,
     background: r,
@@ -554,19 +553,19 @@ const Zl = x({
     brightness: u,
     hue: i,
     handleClick: b,
-    handleDrag: w,
+    handleDrag: V,
     handleKeydown: g
   };
-}, lt = (e, {
+}, la = (e, {
   cursorTop: l,
-  cursorLeft: a,
+  cursorLeft: t,
   background: n,
   handleDrag: c
 }) => {
   const r = ne(), s = G("color-svpanel");
   function u() {
-    const f = e.color.get("saturation"), o = e.color.get("value"), h = r.vnode.el, { clientWidth: m, clientHeight: C } = h;
-    a.value = f * m / 100, l.value = (100 - o) * C / 100, n.value = `hsl(${e.color.get("hue")}, 100%, 50%)`;
+    const f = e.color.get("saturation"), o = e.color.get("value"), h = r.vnode.el, { clientWidth: v, clientHeight: C } = h;
+    t.value = f * v / 100, l.value = (100 - o) * C / 100, n.value = `hsl(${e.color.get("hue")}, 100%, 50%)`;
   }
   re(() => {
     fe(r.vnode.el, {
@@ -577,7 +576,7 @@ const Zl = x({
         c(f);
       }
     }), u();
-  }), M(
+  }), B(
     [
       () => e.color.get("hue"),
       () => e.color.get("value"),
@@ -585,25 +584,25 @@ const Zl = x({
     ],
     () => u()
   );
-  const i = V(() => s.b()), b = V(() => s.e("cursor")), w = V(() => ({
+  const i = w(() => s.b()), b = w(() => s.e("cursor")), V = w(() => ({
     backgroundColor: n.value
-  })), g = V(() => ({
-    top: te(l.value),
-    left: te(a.value)
+  })), g = w(() => ({
+    top: ae(l.value),
+    left: ae(t.value)
   }));
   return {
     rootKls: i,
     cursorKls: b,
-    rootStyle: w,
+    rootStyle: V,
     cursorStyle: g,
     update: u
   };
-}, tt = ["tabindex", "aria-disabled", "aria-label", "aria-valuenow", "aria-valuetext"], ot = U({
+}, aa = ["tabindex", "aria-disabled", "aria-label", "aria-valuenow", "aria-valuetext"], oa = M({
   name: "ElSvPanel",
   __name: "sv-panel",
   props: Zl,
   setup(e, { expose: l }) {
-    const a = e, {
+    const t = e, {
       cursorRef: n,
       cursorTop: c,
       cursorLeft: r,
@@ -611,167 +610,167 @@ const Zl = x({
       saturation: u,
       brightness: i,
       handleClick: b,
-      handleDrag: w,
+      handleDrag: V,
       handleKeydown: g
-    } = et(a), { rootKls: f, cursorKls: o, rootStyle: h, cursorStyle: m, update: C } = lt(
-      a,
+    } = ea(t), { rootKls: f, cursorKls: o, rootStyle: h, cursorStyle: v, update: C } = la(
+      t,
       {
         cursorTop: c,
         cursorLeft: r,
         background: s,
-        handleDrag: w
+        handleDrag: V
       }
-    ), { t: d } = q(), v = V(() => d("el.colorpicker.svLabel")), y = V(() => d("el.colorpicker.svDescription", {
+    ), { t: d } = x(), m = w(() => d("el.colorpicker.svLabel")), y = w(() => d("el.colorpicker.svDescription", {
       saturation: u.value,
       brightness: i.value,
-      color: a.color.value
+      color: t.color.value
     }));
     return l({
       update: C
-    }), (_, E) => (R(), T(
+    }), (_, E) => (T(), D(
       "div",
       {
-        class: P(t(f)),
-        style: O(t(h)),
-        onClick: E[1] || (E[1] = (...A) => t(b) && t(b)(...A))
+        class: P(a(f)),
+        style: U(a(h)),
+        onClick: E[1] || (E[1] = (...F) => a(b) && a(b)(...F))
       },
       [
-        L("div", {
+        R("div", {
           ref_key: "cursorRef",
           ref: n,
-          class: P(t(o)),
-          style: O(t(m)),
+          class: P(a(o)),
+          style: U(a(v)),
           tabindex: _.disabled ? void 0 : 0,
           "aria-disabled": _.disabled,
           role: "slider",
           "aria-valuemin": "0,0",
           "aria-valuemax": "100,100",
-          "aria-label": v.value,
-          "aria-valuenow": `${t(u)},${t(i)}`,
+          "aria-label": m.value,
+          "aria-valuenow": `${a(u)},${a(i)}`,
           "aria-valuetext": y.value,
-          onKeydown: E[0] || (E[0] = (...A) => t(g) && t(g)(...A))
-        }, null, 46, tt)
+          onKeydown: E[0] || (E[0] = (...F) => a(g) && a(g)(...F))
+        }, null, 46, aa)
       ],
       6
     ));
   }
 });
-var at = /* @__PURE__ */ N(ot, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/sv-panel.vue"]]);
-const Ye = (e, l) => {
-  const a = Sl(
-    new ae({
+var ta = /* @__PURE__ */ N(oa, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/sv-panel.vue"]]);
+const Ne = (e, l) => {
+  const t = Sl(
+    new te({
       enableAlpha: e.showAlpha,
       format: e.colorFormat || "",
       value: e.modelValue
     })
   );
-  return M(
+  return B(
     () => [e.colorFormat, e.showAlpha],
     () => {
-      a.enableAlpha = e.showAlpha, a.format = e.colorFormat || a.format, a.doOnChange(), l(W, a.value);
+      t.enableAlpha = e.showAlpha, t.format = e.colorFormat || t.format, t.doOnChange(), l(z, t.value);
     }
   ), {
-    color: a
+    color: t
   };
-}, nt = U({
+}, na = M({
   name: "ElColorPickerPanel",
   __name: "color-picker-panel",
-  props: He,
+  props: We,
   emits: jl,
-  setup(e, { expose: l, emit: a }) {
-    const n = e, c = a, r = G("color-picker-panel"), { formItem: s } = Be(), u = Me(), i = K(), b = K(), w = K(), g = K(), f = K(""), { color: o } = ve(
-      We,
-      () => Ye(n, c),
+  setup(e, { expose: l, emit: t }) {
+    const n = e, c = t, r = G("color-picker-panel"), { formItem: s } = Te(), u = Le(), i = K(), b = K(), V = K(), g = K(), f = K(""), { color: o } = pe(
+      He,
+      () => Ne(n, c),
       !0
     );
     function h() {
       o.fromString(f.value), o.value !== f.value && (f.value = o.value);
     }
-    function m() {
+    function v() {
       var d;
-      n.validateEvent && ((d = s?.validate) == null || d.call(s, "blur").catch((v) => j(v)));
+      n.validateEvent && ((d = s?.validate) == null || d.call(s, "blur").catch((m) => j(m)));
     }
     function C() {
-      var d, v, y;
-      (d = i.value) == null || d.update(), (v = b.value) == null || v.update(), (y = w.value) == null || y.update();
+      var d, m, y;
+      (d = i.value) == null || d.update(), (m = b.value) == null || m.update(), (y = V.value) == null || y.update();
     }
     return re(() => {
       n.modelValue && (f.value = o.value), X(C);
-    }), M(
+    }), B(
       () => n.modelValue,
       (d) => {
         d !== o.value && (d ? o.fromString(d) : o.clear());
       }
-    ), M(
+    ), B(
       () => o.value,
       (d) => {
-        c(W, d), f.value = d, n.validateEvent && s?.validate("change").catch((v) => j(v));
+        c(z, d), f.value = d, n.validateEvent && s?.validate("change").catch((m) => j(m));
       }
-    ), De(Ne, {
-      currentColor: V(() => o.value)
+    ), De(ze, {
+      currentColor: w(() => o.value)
     }), l({
       color: o,
       inputRef: g,
       update: C
-    }), (d, v) => (R(), T(
+    }), (d, m) => (T(), D(
       "div",
       {
-        class: P([t(r).b(), t(r).is("disabled", t(u)), t(r).is("border", d.border)]),
-        onFocusout: m
+        class: P([a(r).b(), a(r).is("disabled", a(u)), a(r).is("border", d.border)]),
+        onFocusout: v
       },
       [
-        L(
+        R(
           "div",
           {
-            class: P(t(r).e("wrapper"))
+            class: P(a(r).e("wrapper"))
           },
           [
             k(Yl, {
               ref_key: "hueRef",
               ref: i,
               class: "hue-slider",
-              color: t(o),
+              color: a(o),
               vertical: "",
-              disabled: t(u)
+              disabled: a(u)
             }, null, 8, ["color", "disabled"]),
-            k(at, {
+            k(ta, {
               ref_key: "svRef",
               ref: b,
-              color: t(o),
-              disabled: t(u)
+              color: a(o),
+              disabled: a(u)
             }, null, 8, ["color", "disabled"])
           ],
           2
         ),
-        d.showAlpha ? (R(), oe(Hl, {
+        d.showAlpha ? (T(), oe(Hl, {
           key: 0,
           ref_key: "alphaRef",
-          ref: w,
-          color: t(o),
-          disabled: t(u)
-        }, null, 8, ["color", "disabled"])) : Pe("v-if", !0),
-        d.predefine ? (R(), oe(Ql, {
+          ref: V,
+          color: a(o),
+          disabled: a(u)
+        }, null, 8, ["color", "disabled"])) : Ee("v-if", !0),
+        d.predefine ? (T(), oe(Ql, {
           key: 1,
           ref: "predefine",
           "enable-alpha": d.showAlpha,
-          color: t(o),
+          color: a(o),
           colors: d.predefine,
-          disabled: t(u)
-        }, null, 8, ["enable-alpha", "color", "colors", "disabled"])) : Pe("v-if", !0),
-        L(
+          disabled: a(u)
+        }, null, 8, ["enable-alpha", "color", "colors", "disabled"])) : Ee("v-if", !0),
+        R(
           "div",
           {
-            class: P(t(r).e("footer"))
+            class: P(a(r).e("footer"))
           },
           [
-            k(t(yl), {
+            k(a(yl), {
               ref_key: "inputRef",
               ref: g,
               modelValue: f.value,
-              "onUpdate:modelValue": v[0] || (v[0] = (y) => f.value = y),
+              "onUpdate:modelValue": m[0] || (m[0] = (y) => f.value = y),
               "validate-event": !1,
               size: "small",
-              disabled: t(u),
+              disabled: a(u),
               onChange: h
             }, null, 8, ["modelValue", "disabled"]),
             El(d.$slots, "footer")
@@ -783,14 +782,14 @@ const Ye = (e, l) => {
     ));
   }
 });
-var rt = /* @__PURE__ */ N(nt, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/color-picker-panel.vue"]]);
-const st = Te(rt), it = x({
+var ra = /* @__PURE__ */ N(na, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/color-picker-panel.vue"]]);
+const sa = Be(ra), ia = q({
   persistent: {
     type: Boolean,
     default: !0
   },
   modelValue: {
-    type: D(String),
+    type: O(String),
     default: void 0
   },
   id: String,
@@ -800,7 +799,7 @@ const st = Te(rt), it = x({
     type: Boolean,
     default: void 0
   },
-  size: ul,
+  size: il,
   popperClass: Z.popperClass,
   popperStyle: Z.popperStyle,
   tabindex: {
@@ -810,154 +809,154 @@ const st = Te(rt), it = x({
   teleported: Z.teleported,
   appendTo: Z.appendTo,
   predefine: {
-    type: D(Array)
+    type: O(Array)
   },
   validateEvent: {
     type: Boolean,
     default: !0
   },
-  ...il,
-  ...Tl(["ariaLabel"])
-}), ut = {
-  [W]: (e) => ee(e) || le(e),
+  ...sl,
+  ...Dl(["ariaLabel"])
+}), ua = {
+  [z]: (e) => ee(e) || le(e),
   [de]: (e) => ee(e) || le(e),
   activeChange: (e) => ee(e) || le(e),
   focus: (e) => e instanceof FocusEvent,
   blur: (e) => e instanceof FocusEvent
-}, ct = ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex"], dt = U({
+}, ca = ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex"], da = M({
   name: "ElColorPicker",
   __name: "color-picker",
-  props: it,
-  emits: ut,
-  setup(e, { expose: l, emit: a }) {
-    const n = e, c = a, { t: r } = q(), s = G("color"), { formItem: u } = Be(), i = cl(), b = Me(), { valueOnClear: w, isEmptyValue: g } = dl(n, null), f = Ye(n, c), { inputId: o, isLabeledByFormItem: h } = fl(n, {
+  props: ia,
+  emits: ua,
+  setup(e, { expose: l, emit: t }) {
+    const n = e, c = t, { t: r } = x(), s = G("color"), { formItem: u } = Te(), i = ul(), b = Le(), { valueOnClear: V, isEmptyValue: g } = cl(n, null), f = Ne(n, c), { inputId: o, isLabeledByFormItem: h } = dl(n, {
       formItemContext: u
-    }), m = K(), C = K(), d = K(), v = K(!1), y = K(!1);
+    }), v = K(), C = K(), d = K(), m = K(!1), y = K(!1);
     let _ = !0;
-    const { isFocused: E, handleFocus: A, handleBlur: he } = Il(C, {
+    const { isFocused: E, handleFocus: F, handleBlur: ve } = Il(C, {
       disabled: b,
       beforeBlur(p) {
         var S;
-        return (S = m.value) == null ? void 0 : S.isFocusInsideContent(p);
+        return (S = v.value) == null ? void 0 : S.isFocusInsideContent(p);
       },
       afterBlur() {
         var p;
-        Y(!1), z(), n.validateEvent && ((p = u?.validate) == null || p.call(u, "blur").catch((S) => j(S)));
+        Y(!1), W(), n.validateEvent && ((p = u?.validate) == null || p.call(u, "blur").catch((S) => j(S)));
       }
-    }), B = pl(
+    }), L = fl(
       () => {
         var p, S;
         return (S = (p = d.value) == null ? void 0 : p.color) != null ? S : f.color;
       }
-    ), Xe = V(
-      () => vl(n, Object.keys(He))
-    ), je = V(() => !n.modelValue && !y.value ? "transparent" : Qe(B, n.showAlpha)), xe = V(() => !n.modelValue && !y.value ? "" : B.value), Ge = V(() => h.value ? void 0 : n.ariaLabel || r("el.colorpicker.defaultLabel")), qe = V(() => h.value ? u?.labelId : void 0), Je = V(() => [
+    ), Ye = w(
+      () => pl(n, Object.keys(We))
+    ), Xe = w(() => !n.modelValue && !y.value ? "transparent" : Je(L, n.showAlpha)), je = w(() => !n.modelValue && !y.value ? "" : L.value), qe = w(() => h.value ? void 0 : n.ariaLabel || r("el.colorpicker.defaultLabel")), Ge = w(() => h.value ? u?.labelId : void 0), xe = w(() => [
       s.b("picker"),
       s.is("disabled", b.value),
       s.bm("picker", i.value),
       s.is("focused", E.value)
     ]);
-    function Qe(p, S) {
-      const { r: I, g: Ce, b: we, a: rl } = p.toRgb();
-      return S ? `rgba(${I}, ${Ce}, ${we}, ${rl})` : `rgb(${I}, ${Ce}, ${we})`;
+    function Je(p, S) {
+      const { r: I, g: ye, b: Ce, a: nl } = p.toRgb();
+      return S ? `rgba(${I}, ${ye}, ${Ce}, ${nl})` : `rgb(${I}, ${ye}, ${Ce})`;
     }
     function Y(p) {
-      v.value = p;
+      m.value = p;
     }
     const J = ml(Y, 100, { leading: !0 });
-    function be() {
+    function he() {
       b.value || Y(!0);
     }
-    function ge() {
-      J(!1), z();
+    function be() {
+      J(!1), W();
     }
-    function z() {
+    function W() {
       X(() => {
-        n.modelValue ? B.fromString(n.modelValue) : (B.value = "", X(() => {
+        n.modelValue ? L.fromString(n.modelValue) : (L.value = "", X(() => {
           y.value = !1;
         }));
       });
     }
-    function Ze() {
-      b.value || (v.value && z(), J(!v.value));
+    function Qe() {
+      b.value || (m.value && W(), J(!m.value));
     }
-    function el() {
-      const p = g(B.value) ? w.value : B.value;
-      c(W, p), c(de, p), n.validateEvent && u?.validate("change").catch((S) => j(S)), J(!1), X(() => {
-        const S = new ae({
+    function Ze() {
+      const p = g(L.value) ? V.value : L.value;
+      c(z, p), c(de, p), n.validateEvent && u?.validate("change").catch((S) => j(S)), J(!1), X(() => {
+        const S = new te({
           enableAlpha: n.showAlpha,
           format: n.colorFormat || "",
           value: n.modelValue
         });
-        B.compare(S) || z();
+        L.compare(S) || W();
       });
     }
-    function ll() {
-      J(!1), c(W, w.value), c(de, w.value), n.modelValue !== w.value && n.validateEvent && u?.validate("change").catch((p) => j(p)), z();
+    function el() {
+      J(!1), c(z, V.value), c(de, V.value), n.modelValue !== V.value && n.validateEvent && u?.validate("change").catch((p) => j(p)), W();
     }
-    function tl() {
+    function ll() {
       var p, S;
       (S = (p = d?.value) == null ? void 0 : p.inputRef) == null || S.focus();
     }
-    function ol() {
-      v.value && (ge(), E.value && ye());
+    function al() {
+      m.value && (be(), E.value && ke());
     }
-    function ke(p) {
-      p.preventDefault(), p.stopPropagation(), Y(!1), z();
+    function ge(p) {
+      p.preventDefault(), p.stopPropagation(), Y(!1), W();
     }
-    function al(p) {
+    function ol(p) {
       switch (me(p)) {
-        case F.enter:
-        case F.numpadEnter:
-        case F.space:
-          p.preventDefault(), p.stopPropagation(), be();
+        case A.enter:
+        case A.numpadEnter:
+        case A.space:
+          p.preventDefault(), p.stopPropagation(), he();
           break;
-        case F.esc:
-          ke(p);
+        case A.esc:
+          ge(p);
           break;
       }
     }
-    function ye() {
+    function ke() {
       C.value.focus();
     }
-    function nl() {
+    function tl() {
       C.value.blur();
     }
-    return M(
-      () => xe.value,
+    return B(
+      () => je.value,
       (p) => {
         _ && c("activeChange", p), _ = !0;
       }
-    ), M(
-      () => B.value,
+    ), B(
+      () => L.value,
       () => {
         !n.modelValue && !y.value && (y.value = !0);
       }
-    ), M(
+    ), B(
       () => n.modelValue,
       (p) => {
-        p ? p && p !== B.value && (_ = !1, B.fromString(p)) : y.value = !1;
+        p ? p && p !== L.value && (_ = !1, L.fromString(p)) : y.value = !1;
       }
-    ), M(
-      () => v.value,
+    ), B(
+      () => m.value,
       () => {
         d.value && X(d.value.update);
       }
-    ), De(We, f), l({
-      color: B,
-      show: be,
-      hide: ge,
-      focus: ye,
-      blur: nl
-    }), (p, S) => (R(), oe(t(Ml), {
+    ), De(He, f), l({
+      color: L,
+      show: he,
+      hide: be,
+      focus: ke,
+      blur: tl
+    }), (p, S) => (T(), oe(a(Bl), {
       ref_key: "popper",
-      ref: m,
-      visible: v.value,
+      ref: v,
+      visible: m.value,
       "show-arrow": !1,
       "fallback-placements": ["bottom", "top", "right", "left"],
       offset: 0,
       "gpu-acceleration": !1,
-      "popper-class": [t(s).be("picker", "panel"), p.popperClass],
+      "popper-class": [a(s).be("picker", "panel"), p.popperClass],
       "popper-style": p.popperStyle,
       "stop-popper-mouse-event": !1,
       pure: "",
@@ -966,49 +965,49 @@ const st = Te(rt), it = x({
       effect: "light",
       trigger: "click",
       teleported: p.teleported,
-      transition: `${t(s).namespace.value}-zoom-in-top`,
+      transition: `${a(s).namespace.value}-zoom-in-top`,
       persistent: p.persistent,
       "append-to": p.appendTo,
-      onShow: tl,
+      onShow: ll,
       onHide: S[2] || (S[2] = (I) => Y(!1))
     }, {
       content: $(() => [
-        se((R(), oe(
-          t(st),
-          $e({
+        se((T(), oe(
+          a(sa),
+          Pe({
             ref_key: "pickerPanelRef",
             ref: d
-          }, Xe.value, {
+          }, Ye.value, {
             border: !1,
             "validate-event": !1,
-            onKeydown: Pl(ke, ["esc"])
+            onKeydown: Pl(ge, ["esc"])
           }),
           {
             footer: $(() => [
-              L("div", null, [
-                k(t(Se), {
-                  class: P(t(s).be("footer", "link-btn")),
+              R("div", null, [
+                k(a(_e), {
+                  class: P(a(s).be("footer", "link-btn")),
                   text: "",
                   size: "small",
-                  onClick: ll
+                  onClick: el
                 }, {
                   default: $(() => [
-                    Le(
-                      Fe(t(r)("el.colorpicker.clear")),
+                    Ke(
+                      Re(a(r)("el.colorpicker.clear")),
                       1
                     )
                   ]),
                   _: 1
                 }, 8, ["class"]),
-                k(t(Se), {
+                k(a(_e), {
                   plain: "",
                   size: "small",
-                  class: P(t(s).be("footer", "btn")),
-                  onClick: el
+                  class: P(a(s).be("footer", "btn")),
+                  onClick: Ze
                 }, {
                   default: $(() => [
-                    Le(
-                      Fe(t(r)("el.colorpicker.confirm")),
+                    Ke(
+                      Re(a(r)("el.colorpicker.confirm")),
                       1
                     )
                   ]),
@@ -1020,67 +1019,67 @@ const st = Te(rt), it = x({
           },
           16
         )), [
-          [t(Dl), ol, C.value]
+          [a(Ol), al, C.value]
         ])
       ]),
       default: $(() => [
-        L("div", $e({
-          id: t(o),
+        R("div", Pe({
+          id: a(o),
           ref_key: "triggerRef",
           ref: C
         }, p.$attrs, {
-          class: Je.value,
+          class: xe.value,
           role: "button",
-          "aria-label": Ge.value,
-          "aria-labelledby": qe.value,
-          "aria-description": t(r)("el.colorpicker.description", { color: p.modelValue || "" }),
-          "aria-disabled": t(b),
-          tabindex: t(b) ? void 0 : p.tabindex,
-          onKeydown: al,
-          onFocus: S[0] || (S[0] = (...I) => t(A) && t(A)(...I)),
-          onBlur: S[1] || (S[1] = (...I) => t(he) && t(he)(...I))
+          "aria-label": qe.value,
+          "aria-labelledby": Ge.value,
+          "aria-description": a(r)("el.colorpicker.description", { color: p.modelValue || "" }),
+          "aria-disabled": a(b),
+          tabindex: a(b) ? void 0 : p.tabindex,
+          onKeydown: ol,
+          onFocus: S[0] || (S[0] = (...I) => a(F) && a(F)(...I)),
+          onBlur: S[1] || (S[1] = (...I) => a(ve) && a(ve)(...I))
         }), [
-          L(
+          R(
             "div",
             {
-              class: P(t(s).be("picker", "trigger")),
-              onClick: Ze
+              class: P(a(s).be("picker", "trigger")),
+              onClick: Qe
             },
             [
-              L(
+              R(
                 "span",
                 {
-                  class: P([t(s).be("picker", "color"), t(s).is("alpha", p.showAlpha)])
+                  class: P([a(s).be("picker", "color"), a(s).is("alpha", p.showAlpha)])
                 },
                 [
-                  L(
+                  R(
                     "span",
                     {
-                      class: P(t(s).be("picker", "color-inner")),
-                      style: O({
-                        backgroundColor: je.value
+                      class: P(a(s).be("picker", "color-inner")),
+                      style: U({
+                        backgroundColor: Xe.value
                       })
                     },
                     [
-                      se(k(t(_e), {
-                        class: P([t(s).be("picker", "icon"), t(s).is("icon-arrow-down")])
+                      se(k(a(we), {
+                        class: P([a(s).be("picker", "icon"), a(s).is("icon-arrow-down")])
                       }, {
                         default: $(() => [
-                          k(t(hl))
+                          k(a(vl))
                         ]),
                         _: 1
                       }, 8, ["class"]), [
-                        [Ke, p.modelValue || y.value]
+                        [$e, p.modelValue || y.value]
                       ]),
-                      se(k(t(_e), {
-                        class: P([t(s).be("picker", "empty"), t(s).is("icon-close")])
+                      se(k(a(we), {
+                        class: P([a(s).be("picker", "empty"), a(s).is("icon-close")])
                       }, {
                         default: $(() => [
-                          k(t(bl))
+                          k(a(hl))
                         ]),
                         _: 1
                       }, 8, ["class"]), [
-                        [Ke, !p.modelValue && !y.value]
+                        [$e, !p.modelValue && !y.value]
                       ])
                     ],
                     6
@@ -1091,62 +1090,23 @@ const st = Te(rt), it = x({
             ],
             2
           )
-        ], 16, ct)
+        ], 16, ca)
       ]),
       _: 1
     }, 8, ["visible", "popper-class", "popper-style", "teleported", "transition", "persistent", "append-to"]));
   }
 });
-var ft = /* @__PURE__ */ N(dt, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/color-picker.vue"]]);
-const pt = Te(ft), vt = {}, mt = {
-  t: "1639130711621",
-  class: "icon",
-  viewBox: "0 0 1024 1024",
-  version: "1.1",
-  xmlns: "http://www.w3.org/2000/svg",
-  "p-id": "3985",
-  width: "64",
-  height: "64"
-};
-function ht(e, l) {
-  return R(), T("svg", mt, [...l[0] || (l[0] = [
-    L("path", {
-      d: "M948.55625 868.24999971H549.50000029V95.075L948.55625 868.24999971zM624.5 793.25h200.94374971L624.5 403.92500029V793.25zM474.49999971 95.075V868.24999971H75.44375L474.49999971 95.075z",
-      "p-id": "3986"
-    }, null, -1)
-  ])]);
-}
-const bt = /* @__PURE__ */ pe(vt, [["render", ht]]), gt = {}, kt = {
-  t: "1639130694709",
-  class: "icon",
-  viewBox: "0 0 1024 1024",
-  version: "1.1",
-  xmlns: "http://www.w3.org/2000/svg",
-  "p-id": "3985",
-  width: "64",
-  height: "64"
-};
-function yt(e, l) {
-  return R(), T("svg", kt, [...l[0] || (l[0] = [
-    L("path", {
-      d: "M230.75 624.5v200.94374971L620.07499971 624.5H230.75zM155.75000029 948.55625V549.50000029h773.17499971L155.75000029 948.55625zM928.925 474.49999971H155.75000029V75.44375L928.925 474.49999971z",
-      "p-id": "3986"
-    }, null, -1)
-  ])]);
-}
-const Ct = /* @__PURE__ */ pe(gt, [["render", yt]]), wt = U({
+var fa = /* @__PURE__ */ N(da, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/color-picker.vue"]]);
+const pa = Be(fa), ma = M({
   name: "BasicSetting",
-  components: {
-    IconFlipV: Ct,
-    IconFlipH: bt
-  },
+  components: {},
   setup() {
-    const e = ve(Bl), l = K([]), a = (i) => {
+    const e = pe(Ll), l = K([]), t = (i) => {
       e.value.attr.w = i;
     }, n = (i) => {
       e.value.attr.h = i;
     }, c = (i) => {
-      const w = i.target.getBoundingClientRect(), g = w.left + w.width / 2, f = w.top + w.height / 2, o = Math.atan2(f - i.clientY, g - i.clientX) * 180 / Math.PI - 90, h = Math.round(o % 360);
+      const V = i.target.getBoundingClientRect(), g = V.left + V.width / 2, f = V.top + V.height / 2, o = Math.atan2(f - i.clientY, g - i.clientX) * 180 / Math.PI - 90, h = Math.round(o % 360);
       e.value.attr.deg = h < 0 ? h + 360 : h;
     }, r = (i) => {
       l.value.includes(i) ? l.value = l.value.filter((b) => b !== i) : l.value.push(i), e.value.attr.filpV = l.value.includes("v"), e.value.attr.filpH = l.value.includes("h");
@@ -1154,9 +1114,9 @@ const Ct = /* @__PURE__ */ pe(gt, [["render", yt]]), wt = U({
     re(() => {
       e.value.attr.filpV && l.value.push("v"), e.value.attr.filpH && l.value.push("h");
     });
-    const { pageConfig: s } = Cl(gl());
-    return e.value.bgImg.url || (e.value.bgImg.url = kl(e.value.id)), {
-      visible: V({
+    const { pageConfig: s } = Cl(bl());
+    return e.value.bgImg.url || (e.value.bgImg.url = gl(e.value.id)), {
+      visible: w({
         get: () => !e.value.hided,
         set: (i) => {
           e.value.hided = !i;
@@ -1165,29 +1125,29 @@ const Ct = /* @__PURE__ */ pe(gt, [["render", yt]]), wt = U({
       pageConfig: s,
       com: e,
       filps: l,
-      updateWidth: a,
+      updateWidth: t,
       updateHeight: n,
       onRotateChange: c,
       onFilpChange: r,
-      animates: Rl,
-      animatecss: Al,
-      easings: Fl,
-      repeatTypes: Ll,
+      animates: Tl,
+      animatecss: Fl,
+      easings: Al,
+      repeatTypes: Rl,
       fontFamilys: Kl,
       fontWeights: $l
     };
   }
-}), Vt = { class: "basic-setting-wp" }, _t = { style: { display: "flex", gap: "10px", "align-items": "center", padding: "0 10px", "margin-bottom": "10px" } };
-function St(e, l, a, n, c, r) {
-  const s = H("g-switch"), u = H("g-select"), i = H("g-field"), b = pt, w = H("g-input"), g = H("g-input-number"), f = H("g-color-picker");
-  return R(), T("div", Vt, [
-    L("div", _t, [
-      l[16] || (l[16] = L("span", { style: { "font-size": "12px", color: "#606266" } }, "是否显示：", -1)),
+}), va = { class: "basic-setting-wp" }, ha = { style: { display: "flex", gap: "10px", "align-items": "center", padding: "0 10px", "margin-bottom": "10px" } };
+function ba(e, l, t, n, c, r) {
+  const s = H("g-switch"), u = H("g-select"), i = H("g-field"), b = pa, V = H("g-input"), g = H("g-input-number"), f = H("g-color-picker");
+  return T(), D("div", va, [
+    R("div", ha, [
+      l[16] || (l[16] = R("span", { style: { "font-size": "12px", color: "#606266" } }, "是否显示：", -1)),
       k(s, {
         modelValue: e.visible,
         "onUpdate:modelValue": l[0] || (l[0] = (o) => e.visible = o)
       }, null, 8, ["modelValue"]),
-      l[17] || (l[17] = L("span", { style: { "font-size": "12px", color: "#606266", "margin-left": "20px" } }, "显示标题：", -1)),
+      l[17] || (l[17] = R("span", { style: { "margin-left": "20px", "font-size": "12px", color: "#606266" } }, "显示标题：", -1)),
       k(s, {
         modelValue: e.com.attr.showTitle,
         "onUpdate:modelValue": l[1] || (l[1] = (o) => e.com.attr.showTitle = o)
@@ -1211,7 +1171,7 @@ function St(e, l, a, n, c, r) {
           "show-alpha": "",
           teleported: !1
         }, null, 8, ["modelValue"]),
-        k(w, {
+        k(V, {
           modelValue: e.com.attr.fontColor,
           "onUpdate:modelValue": l[4] || (l[4] = (o) => e.com.attr.fontColor = o),
           inline: ""
@@ -1257,7 +1217,7 @@ function St(e, l, a, n, c, r) {
           "show-alpha": "",
           teleported: !1
         }, null, 8, ["modelValue"]),
-        k(w, {
+        k(V, {
           modelValue: e.com.attr.borderColor,
           "onUpdate:modelValue": l[9] || (l[9] = (o) => e.com.attr.borderColor = o),
           inline: ""
@@ -1355,7 +1315,7 @@ function St(e, l, a, n, c, r) {
     })
   ]);
 }
-const Ot = /* @__PURE__ */ pe(wt, [["render", St], ["__scopeId", "data-v-522e7bc7"]]);
+const Ra = /* @__PURE__ */ kl(ma, [["render", ba], ["__scopeId", "data-v-859e01a5"]]);
 export {
-  Ot as default
+  Ra as default
 };