@wfrog/vc-ui 1.11.10 → 1.11.12

package/dist/es/components/color-switch/color-switch.mjs

@@ -1,1053 +1,80 @@
 import './index.css'
-import { b as buildProps, d as definePropType, u as useNamespace, i as isString, h as hasOwn, a as debugWarn } from '../../chunk/Gk1J52Yw.mjs';
-import '../../chunk/CoGexPPD.mjs';
-/* empty css                    */
-import { E as ElInput } from '../../chunk/DX-2VRY2.mjs';
-import { getCurrentInstance, shallowRef, computed, ref, onMounted, watch, defineComponent, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, normalizeStyle, inject, watchEffect, Fragment, renderList, reactive, nextTick, provide, createBlock, createCommentVNode, createVNode, renderSlot, onBeforeMount, useTemplateRef, withCtx, isRef } from 'vue';
+import { ElPopover, ElColorPickerPanel } from 'element-plus/es';
+import 'element-plus/es/components/base/style/css';
+import 'element-plus/es/components/popover/style/css';
+import 'element-plus/es/components/color-picker-panel/style/css';
+import { onBeforeMount, watch, defineComponent, useTemplateRef, createBlock, openBlock, unref, withCtx, createVNode, isRef, createElementVNode, normalizeClass } from 'vue';
 import { C as Component$1 } from '../iconify-icon/iconify-icon.mjs';
-import { isClient, useDark, useStorage } from '@vueuse/core';
-import { t as throttle } from '../../chunk/B5HpgPRt.mjs';
-import { E as ElPopover } from '../../chunk/Da199A5L.mjs';
-import { g as getClientXY } from '../../chunk/DxxbB5jY.mjs';
-import { a as addUnit } from '../../chunk/DodoD9a9.mjs';
-import { g as getEventCode, E as EVENT_CODE } from '../../chunk/BTpNRPQW.mjs';
-import { _ as _export_sfc, w as withInstall } from '../../chunk/V6KjsUQN.mjs';
-import { u as useLocale } from '../../chunk/CEl4MyfJ.mjs';
-import { U as UPDATE_MODEL_EVENT } from '../../chunk/Ct6q2FXg.mjs';
-import { i as isNil } from '../../chunk/Bc6yUGLs.mjs';
-import { T as TinyColor } from '../../chunk/D9Lr0Bzb.mjs';
-import { u as useFormItem, a as useFormDisabled } from '../../chunk/CBMjhoFP.mjs';
-import { _ as _export_sfc$1 } from '../../chunk/pcqpp-6-.mjs';
-
-const alphaSliderProps = buildProps({
-  color: {
-    type: definePropType(Object),
-    required: true
-  },
-  vertical: Boolean,
-  disabled: Boolean
-});
-const hueSliderProps = alphaSliderProps;
-
-let isDragging = false;
-function draggable(element, options) {
-  if (!isClient)
-    return;
-  const moveFn = function(event) {
-    var _a;
-    (_a = options.drag) == null ? void 0 : _a.call(options, event);
-  };
-  const upFn = function(event) {
-    var _a;
-    document.removeEventListener("mousemove", moveFn);
-    document.removeEventListener("mouseup", upFn);
-    document.removeEventListener("touchmove", moveFn);
-    document.removeEventListener("touchend", upFn);
-    document.onselectstart = null;
-    document.ondragstart = null;
-    isDragging = false;
-    (_a = options.end) == null ? void 0 : _a.call(options, event);
-  };
-  const downFn = function(event) {
-    var _a;
-    if (isDragging)
-      return;
-    document.onselectstart = () => false;
-    document.ondragstart = () => false;
-    document.addEventListener("mousemove", moveFn);
-    document.addEventListener("mouseup", upFn);
-    document.addEventListener("touchmove", moveFn);
-    document.addEventListener("touchend", upFn);
-    isDragging = true;
-    (_a = options.start) == null ? void 0 : _a.call(options, event);
-  };
-  element.addEventListener("mousedown", downFn);
-  element.addEventListener("touchstart", downFn, { passive: false });
-}
-
-const useSlider = (props, { key, minValue, maxValue }) => {
-  const instance = getCurrentInstance();
-  const thumb = shallowRef();
-  const bar = shallowRef();
-  const currentValue = computed(() => props.color.get(key));
-  function handleClick(event) {
-    var _a;
-    if (props.disabled)
-      return;
-    const target = event.target;
-    if (target !== thumb.value) {
-      handleDrag(event);
-    }
-    (_a = thumb.value) == null ? void 0 : _a.focus();
-  }
-  function handleDrag(event) {
-    if (!bar.value || !thumb.value || props.disabled)
-      return;
-    const el = instance.vnode.el;
-    const rect = el.getBoundingClientRect();
-    const { clientX, clientY } = getClientXY(event);
-    let value;
-    if (!props.vertical) {
-      let left = clientX - rect.left;
-      left = Math.max(thumb.value.offsetWidth / 2, left);
-      left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
-      value = Math.round(
-        (left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * maxValue
-      );
-    } else {
-      let top = clientY - rect.top;
-      top = Math.max(thumb.value.offsetHeight / 2, top);
-      top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
-      value = Math.round(
-        (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * maxValue
-      );
-    }
-    props.color.set(key, value);
-  }
-  function handleKeydown(event) {
-    if (props.disabled)
-      return;
-    const { shiftKey } = event;
-    const code = getEventCode(event);
-    const step = shiftKey ? 10 : 1;
-    const reverse = key === "hue" ? -1 : 1;
-    let isPreventDefault = true;
-    switch (code) {
-      case EVENT_CODE.left:
-      case EVENT_CODE.down:
-        incrementPosition(-step * reverse);
-        break;
-      case EVENT_CODE.right:
-      case EVENT_CODE.up:
-        incrementPosition(step * reverse);
-        break;
-      case EVENT_CODE.home:
-        props.color.set(key, key === "hue" ? maxValue : minValue);
-        break;
-      case EVENT_CODE.end:
-        props.color.set(key, key === "hue" ? minValue : maxValue);
-        break;
-      case EVENT_CODE.pageDown:
-        incrementPosition(-4 * reverse);
-        break;
-      case EVENT_CODE.pageUp:
-        incrementPosition(4 * reverse);
-        break;
-      default:
-        isPreventDefault = false;
-        break;
-    }
-    isPreventDefault && event.preventDefault();
-  }
-  function incrementPosition(step) {
-    let next = currentValue.value + step;
-    next = next < minValue ? minValue : next > maxValue ? maxValue : next;
-    props.color.set(key, next);
-  }
-  return {
-    thumb,
-    bar,
-    currentValue,
-    handleDrag,
-    handleClick,
-    handleKeydown
-  };
-};
-const useSliderDOM = (props, {
-  namespace,
-  maxValue,
-  bar,
-  thumb,
-  currentValue,
-  handleDrag,
-  getBackground
-}) => {
-  const instance = getCurrentInstance();
-  const ns = useNamespace(namespace);
-  const thumbLeft = ref(0);
-  const thumbTop = ref(0);
-  const background = ref();
-  function getThumbLeft() {
-    if (!thumb.value)
-      return 0;
-    if (props.vertical)
-      return 0;
-    const el = instance.vnode.el;
-    const value = currentValue.value;
-    if (!el)
-      return 0;
-    return Math.round(
-      value * (el.offsetWidth - thumb.value.offsetWidth / 2) / maxValue
-    );
-  }
-  function getThumbTop() {
-    if (!thumb.value)
-      return 0;
-    const el = instance.vnode.el;
-    if (!props.vertical)
-      return 0;
-    const value = currentValue.value;
-    if (!el)
-      return 0;
-    return Math.round(
-      value * (el.offsetHeight - thumb.value.offsetHeight / 2) / maxValue
-    );
-  }
-  function update() {
-    thumbLeft.value = getThumbLeft();
-    thumbTop.value = getThumbTop();
-    background.value = getBackground == null ? void 0 : getBackground();
-  }
-  onMounted(() => {
-    if (!bar.value || !thumb.value)
-      return;
-    const dragConfig = {
-      drag: (event) => {
-        handleDrag(event);
-      },
-      end: (event) => {
-        handleDrag(event);
-      }
-    };
-    draggable(bar.value, dragConfig);
-    draggable(thumb.value, dragConfig);
-    update();
+import { useDark, useStorage } from '@vueuse/core';
+import { d as debounce } from '../../chunk/CzWfBa_8.mjs';
+import { i as isObject } from '../../chunk/CqTdDZkE.mjs';
+import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle(func, wait, options) {
+  var leading = true,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
   });
-  watch(currentValue, () => update());
-  watch(
-    () => props.color.value,
-    () => update()
-  );
-  const rootKls = computed(() => [
-    ns.b(),
-    ns.is("vertical", props.vertical),
-    ns.is("disabled", props.disabled)
-  ]);
-  const barKls = computed(() => ns.e("bar"));
-  const thumbKls = computed(() => ns.e("thumb"));
-  const barStyle = computed(() => ({ background: background.value }));
-  const thumbStyle = computed(() => ({
-    left: addUnit(thumbLeft.value),
-    top: addUnit(thumbTop.value)
-  }));
-  return {
-    rootKls,
-    barKls,
-    barStyle,
-    thumbKls,
-    thumbStyle,
-    thumbLeft,
-    thumbTop,
-    update
-  };
-};
-
-const _hoisted_1$3 = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled"];
-const minValue$1 = 0;
-const maxValue$1 = 100;
-const _sfc_main$5 = defineComponent({
-  ...{
-    name: "ElColorAlphaSlider"
-  },
-  __name: "alpha-slider",
-  props: alphaSliderProps,
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } = useSlider(props, { key: "alpha", minValue: minValue$1, maxValue: maxValue$1 });
-    const { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } = useSliderDOM(props, {
-      namespace: "color-alpha-slider",
-      maxValue: maxValue$1,
-      currentValue,
-      bar,
-      thumb,
-      handleDrag,
-      getBackground
-    });
-    const { t } = useLocale();
-    const ariaLabel = computed(() => t("el.colorpicker.alphaLabel"));
-    const ariaValuetext = computed(() => {
-      return t("el.colorpicker.alphaDescription", {
-        alpha: currentValue.value,
-        color: props.color.value
-      });
-    });
-    function getBackground() {
-      if (props.color && props.color.value) {
-        const { r, g, b } = props.color.toRgb();
-        return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
-      }
-      return "";
-    }
-    __expose({
-      update,
-      bar,
-      thumb
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(unref(rootKls))
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              ref_key: "bar",
-              ref: bar,
-              class: normalizeClass(unref(barKls)),
-              style: normalizeStyle(unref(barStyle)),
-              onClick: _cache[0] || (_cache[0] = (...args) => unref(handleClick) && unref(handleClick)(...args))
-            },
-            null,
-            6
-          ),
-          createElementVNode("div", {
-            ref_key: "thumb",
-            ref: thumb,
-            class: normalizeClass(unref(thumbKls)),
-            style: normalizeStyle(unref(thumbStyle)),
-            "aria-label": ariaLabel.value,
-            "aria-valuenow": unref(currentValue),
-            "aria-valuetext": ariaValuetext.value,
-            "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
-            "aria-valuemin": minValue$1,
-            "aria-valuemax": maxValue$1,
-            role: "slider",
-            tabindex: _ctx.disabled ? void 0 : 0,
-            "aria-disabled": _ctx.disabled,
-            onKeydown: _cache[1] || (_cache[1] = (...args) => unref(handleKeydown) && unref(handleKeydown)(...args))
-          }, null, 46, _hoisted_1$3)
-        ],
-        2
-      );
-    };
-  }
-});
-var AlphaSlider = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/alpha-slider.vue"]]);
-
-const _hoisted_1$2 = ["aria-label", "aria-valuenow", "aria-valuetext", "aria-orientation", "tabindex", "aria-disabled"];
-const minValue = 0;
-const maxValue = 360;
-const _sfc_main$4 = defineComponent({
-  ...{
-    name: "ElColorHueSlider"
-  },
-  __name: "hue-slider",
-  props: hueSliderProps,
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } = useSlider(props, { key: "hue", minValue, maxValue });
-    const { rootKls, barKls, thumbKls, thumbStyle, thumbTop, update } = useSliderDOM(props, {
-      namespace: "color-hue-slider",
-      maxValue,
-      currentValue,
-      bar,
-      thumb,
-      handleDrag
-    });
-    const { t } = useLocale();
-    const ariaLabel = computed(() => t("el.colorpicker.hueLabel"));
-    const ariaValuetext = computed(() => {
-      return t("el.colorpicker.hueDescription", {
-        hue: currentValue.value,
-        color: props.color.value
-      });
-    });
-    __expose({
-      bar,
-      thumb,
-      thumbTop,
-      update
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(unref(rootKls))
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              ref_key: "bar",
-              ref: bar,
-              class: normalizeClass(unref(barKls)),
-              onClick: _cache[0] || (_cache[0] = (...args) => unref(handleClick) && unref(handleClick)(...args))
-            },
-            null,
-            2
-          ),
-          createElementVNode("div", {
-            ref_key: "thumb",
-            ref: thumb,
-            class: normalizeClass(unref(thumbKls)),
-            style: normalizeStyle(unref(thumbStyle)),
-            "aria-label": ariaLabel.value,
-            "aria-valuenow": unref(currentValue),
-            "aria-valuetext": ariaValuetext.value,
-            "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
-            "aria-valuemin": minValue,
-            "aria-valuemax": maxValue,
-            role: "slider",
-            tabindex: _ctx.disabled ? void 0 : 0,
-            "aria-disabled": _ctx.disabled,
-            onKeydown: _cache[1] || (_cache[1] = (...args) => unref(handleKeydown) && unref(handleKeydown)(...args))
-          }, null, 46, _hoisted_1$2)
-        ],
-        2
-      );
-    };
-  }
-});
-var HueSlider = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/hue-slider.vue"]]);
-
-const predefineProps = buildProps({
-  colors: {
-    type: definePropType(Array),
-    required: true
-  },
-  color: {
-    type: definePropType(Object),
-    required: true
-  },
-  enableAlpha: {
-    type: Boolean,
-    required: true
-  },
-  disabled: Boolean
-});
-
-const colorPickerPanelProps = buildProps({
-  modelValue: {
-    type: definePropType(String),
-    default: void 0
-  },
-  border: {
-    type: Boolean,
-    default: true
-  },
-  showAlpha: Boolean,
-  colorFormat: String,
-  disabled: Boolean,
-  predefine: {
-    type: definePropType(Array)
-  },
-  validateEvent: {
-    type: Boolean,
-    default: true
-  }
-});
-const colorPickerPanelEmits = {
-  [UPDATE_MODEL_EVENT]: (val) => isString(val) || isNil(val)
-};
-const ROOT_COMMON_COLOR_INJECTION_KEY = Symbol("colorCommonPickerKey");
-const colorPickerPanelContextKey = Symbol("colorPickerPanelContextKey");
-
-class Color {
-  constructor(options = {}) {
-    this._hue = 0;
-    this._saturation = 100;
-    this._value = 100;
-    this._alpha = 100;
-    this._tiny = new TinyColor();
-    this._isValid = false;
-    this.enableAlpha = false;
-    this.format = "";
-    this.value = "";
-    for (const option in options) {
-      if (hasOwn(options, option)) {
-        this[option] = options[option];
-      }
-    }
-    if (options.value) {
-      this.fromString(options.value);
-    } else {
-      this.doOnChange();
-    }
-  }
-  set(prop, value) {
-    if (arguments.length === 1 && typeof prop === "object") {
-      for (const p in prop) {
-        if (hasOwn(prop, p)) {
-          this.set(p, prop[p]);
-        }
-      }
-      return;
-    }
-    this[`_${prop}`] = value;
-    this._isValid = true;
-    this.doOnChange();
-  }
-  get(prop) {
-    if (["hue", "saturation", "value", "alpha"].includes(prop)) {
-      return Math.round(this[`_${prop}`]);
-    }
-    return this[`_${prop}`];
-  }
-  toRgb() {
-    return this._isValid ? this._tiny.toRgb() : { r: 255, g: 255, b: 255, a: 0 };
-  }
-  fromString(value) {
-    const color = new TinyColor(value);
-    this._isValid = color.isValid;
-    if (color.isValid) {
-      const { h, s, v, a } = color.toHsv();
-      this._hue = h;
-      this._saturation = s * 100;
-      this._value = v * 100;
-      this._alpha = a * 100;
-    } else {
-      this._hue = 0;
-      this._saturation = 100;
-      this._value = 100;
-      this._alpha = 100;
-    }
-    this.doOnChange();
-  }
-  clear() {
-    this._isValid = false;
-    this.value = "";
-    this._hue = 0;
-    this._saturation = 100;
-    this._value = 100;
-    this._alpha = 100;
-  }
-  compare(color) {
-    const compareColor = new TinyColor({
-      h: color._hue,
-      s: color._saturation / 100,
-      v: color._value / 100,
-      a: color._alpha / 100
-    });
-    return this._tiny.equals(compareColor);
-  }
-  doOnChange() {
-    const { _hue, _saturation, _value, _alpha, format, enableAlpha } = this;
-    let _format = format || (enableAlpha ? "rgb" : "hex");
-    if (format === "hex" && enableAlpha) {
-      _format = "hex8";
-    }
-    this._tiny = new TinyColor({
-      h: _hue,
-      s: _saturation / 100,
-      v: _value / 100,
-      a: _alpha / 100
-    });
-    this.value = this._isValid ? this._tiny.toString(_format) : "";
-  }
 }
 
-const usePredefine = (props) => {
-  const { currentColor } = inject(colorPickerPanelContextKey);
-  const rgbaColors = ref(parseColors(props.colors, props.color));
-  watch(
-    () => currentColor.value,
-    (val) => {
-      const color = new Color({
-        value: val,
-        enableAlpha: props.enableAlpha
-      });
-      rgbaColors.value.forEach((item) => {
-        item.selected = color.compare(item);
-      });
-    }
-  );
-  watchEffect(() => {
-    rgbaColors.value = parseColors(props.colors, props.color);
-  });
-  function handleSelect(index) {
-    props.color.fromString(props.colors[index]);
-  }
-  function parseColors(colors, color) {
-    return colors.map((value) => {
-      const c = new Color({
-        value,
-        enableAlpha: props.enableAlpha
-      });
-      c.selected = c.compare(color);
-      return c;
-    });
-  }
-  return {
-    rgbaColors,
-    handleSelect
-  };
-};
-const usePredefineDOM = (props) => {
-  const ns = useNamespace("color-predefine");
-  const rootKls = computed(() => [ns.b(), ns.is("disabled", props.disabled)]);
-  const colorsKls = computed(() => ns.e("colors"));
-  function colorSelectorKls(item) {
-    return [
-      ns.e("color-selector"),
-      ns.is("alpha", item.get("alpha") < 100),
-      { selected: item.selected }
-    ];
-  }
-  return {
-    rootKls,
-    colorsKls,
-    colorSelectorKls
-  };
-};
-
-const _hoisted_1$1 = ["disabled", "aria-label", "onClick"];
-const _sfc_main$3 = defineComponent({
-  ...{
-    name: "ElColorPredefine"
-  },
-  __name: "predefine",
-  props: predefineProps,
-  setup(__props) {
-    const props = __props;
-    const { rgbaColors, handleSelect } = usePredefine(props);
-    const { rootKls, colorsKls, colorSelectorKls } = usePredefineDOM(props);
-    const { t } = useLocale();
-    const ariaLabel = (value) => {
-      return t("el.colorpicker.predefineDescription", { value });
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(unref(rootKls))
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(unref(colorsKls))
-            },
-            [
-              (openBlock(true), createElementBlock(
-                Fragment,
-                null,
-                renderList(unref(rgbaColors), (item, index) => {
-                  return openBlock(), createElementBlock("button", {
-                    key: _ctx.colors[index],
-                    type: "button",
-                    disabled: _ctx.disabled,
-                    "aria-label": ariaLabel(item.value),
-                    class: normalizeClass(unref(colorSelectorKls)(item)),
-                    onClick: ($event) => unref(handleSelect)(index)
-                  }, [
-                    createElementVNode(
-                      "div",
-                      {
-                        style: normalizeStyle({ backgroundColor: item.value })
-                      },
-                      null,
-                      4
-                    )
-                  ], 10, _hoisted_1$1);
-                }),
-                128
-              ))
-            ],
-            2
-          )
-        ],
-        2
-      );
-    };
-  }
-});
-var Predefine = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/predefine.vue"]]);
-
-const svPanelProps = buildProps({
-  color: {
-    type: definePropType(Object),
-    required: true
-  },
-  disabled: Boolean
-});
-
-const useSvPanel = (props) => {
-  const instance = getCurrentInstance();
-  const cursorRef = ref();
-  const cursorTop = ref(0);
-  const cursorLeft = ref(0);
-  const background = ref("hsl(0, 100%, 50%)");
-  const saturation = computed(() => props.color.get("saturation"));
-  const brightness = computed(() => props.color.get("value"));
-  const hue = computed(() => props.color.get("hue"));
-  function handleClick(event) {
-    var _a;
-    if (props.disabled)
-      return;
-    const target = event.target;
-    if (target !== cursorRef.value) {
-      handleDrag(event);
-    }
-    (_a = cursorRef.value) == null ? void 0 : _a.focus({ preventScroll: true });
-  }
-  function handleDrag(event) {
-    if (props.disabled)
-      return;
-    const el = instance.vnode.el;
-    const rect = el.getBoundingClientRect();
-    const { clientX, clientY } = getClientXY(event);
-    let left = clientX - rect.left;
-    let top = clientY - rect.top;
-    left = Math.max(0, left);
-    left = Math.min(left, rect.width);
-    top = Math.max(0, top);
-    top = Math.min(top, rect.height);
-    cursorLeft.value = left;
-    cursorTop.value = top;
-    props.color.set({
-      saturation: left / rect.width * 100,
-      value: 100 - top / rect.height * 100
-    });
-  }
-  function handleKeydown(event) {
-    if (props.disabled)
-      return;
-    const { shiftKey } = event;
-    const code = getEventCode(event);
-    const step = shiftKey ? 10 : 1;
-    let isPreventDefault = true;
-    switch (code) {
-      case EVENT_CODE.left:
-        incrementSaturation(-step);
-        break;
-      case EVENT_CODE.right:
-        incrementSaturation(step);
-        break;
-      case EVENT_CODE.up:
-        incrementBrightness(step);
-        break;
-      case EVENT_CODE.down:
-        incrementBrightness(-step);
-        break;
-      default:
-        isPreventDefault = false;
-        break;
-    }
-    isPreventDefault && event.preventDefault();
-  }
-  function incrementSaturation(step) {
-    let next = saturation.value + step;
-    next = next < 0 ? 0 : next > 100 ? 100 : next;
-    props.color.set("saturation", next);
-  }
-  function incrementBrightness(step) {
-    let next = brightness.value + step;
-    next = next < 0 ? 0 : next > 100 ? 100 : next;
-    props.color.set("value", next);
-  }
-  return {
-    cursorRef,
-    cursorTop,
-    cursorLeft,
-    background,
-    saturation,
-    brightness,
-    hue,
-    handleClick,
-    handleDrag,
-    handleKeydown
-  };
-};
-const useSvPanelDOM = (props, {
-  cursorTop,
-  cursorLeft,
-  background,
-  handleDrag
-}) => {
-  const instance = getCurrentInstance();
-  const ns = useNamespace("color-svpanel");
-  function update() {
-    const saturation = props.color.get("saturation");
-    const brightness = props.color.get("value");
-    const el = instance.vnode.el;
-    const { clientWidth: width, clientHeight: height } = el;
-    cursorLeft.value = saturation * width / 100;
-    cursorTop.value = (100 - brightness) * height / 100;
-    background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
-  }
-  onMounted(() => {
-    draggable(instance.vnode.el, {
-      drag: (event) => {
-        handleDrag(event);
-      },
-      end: (event) => {
-        handleDrag(event);
-      }
-    });
-    update();
-  });
-  watch(
-    [
-      () => props.color.get("hue"),
-      () => props.color.get("value"),
-      () => props.color.value
-    ],
-    () => update()
-  );
-  const rootKls = computed(() => ns.b());
-  const cursorKls = computed(() => ns.e("cursor"));
-  const rootStyle = computed(() => ({
-    backgroundColor: background.value
-  }));
-  const cursorStyle = computed(() => ({
-    top: addUnit(cursorTop.value),
-    left: addUnit(cursorLeft.value)
-  }));
-  return {
-    rootKls,
-    cursorKls,
-    rootStyle,
-    cursorStyle,
-    update
-  };
-};
-
-const _hoisted_1 = ["tabindex", "aria-disabled", "aria-label", "aria-valuenow", "aria-valuetext"];
-const _sfc_main$2 = defineComponent({
-  ...{
-    name: "ElSvPanel"
-  },
-  __name: "sv-panel",
-  props: svPanelProps,
-  setup(__props, { expose: __expose }) {
-    const props = __props;
-    const {
-      cursorRef,
-      cursorTop,
-      cursorLeft,
-      background,
-      saturation,
-      brightness,
-      handleClick,
-      handleDrag,
-      handleKeydown
-    } = useSvPanel(props);
-    const { rootKls, cursorKls, rootStyle, cursorStyle, update } = useSvPanelDOM(
-      props,
-      {
-        cursorTop,
-        cursorLeft,
-        background,
-        handleDrag
-      }
-    );
-    const { t } = useLocale();
-    const ariaLabel = computed(() => t("el.colorpicker.svLabel"));
-    const ariaValuetext = computed(() => {
-      return t("el.colorpicker.svDescription", {
-        saturation: saturation.value,
-        brightness: brightness.value,
-        color: props.color.value
-      });
-    });
-    __expose({
-      update
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(unref(rootKls)),
-          style: normalizeStyle(unref(rootStyle)),
-          onClick: _cache[1] || (_cache[1] = (...args) => unref(handleClick) && unref(handleClick)(...args))
-        },
-        [
-          createElementVNode("div", {
-            ref_key: "cursorRef",
-            ref: cursorRef,
-            class: normalizeClass(unref(cursorKls)),
-            style: normalizeStyle(unref(cursorStyle)),
-            tabindex: _ctx.disabled ? void 0 : 0,
-            "aria-disabled": _ctx.disabled,
-            role: "slider",
-            "aria-valuemin": "0,0",
-            "aria-valuemax": "100,100",
-            "aria-label": ariaLabel.value,
-            "aria-valuenow": `${unref(saturation)},${unref(brightness)}`,
-            "aria-valuetext": ariaValuetext.value,
-            onKeydown: _cache[0] || (_cache[0] = (...args) => unref(handleKeydown) && unref(handleKeydown)(...args))
-          }, null, 46, _hoisted_1)
-        ],
-        6
-      );
-    };
-  }
-});
-var SvPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/components/sv-panel.vue"]]);
-
-const useCommonColor = (props, emit) => {
-  const color = reactive(
-    new Color({
-      enableAlpha: props.showAlpha,
-      format: props.colorFormat || "",
-      value: props.modelValue
-    })
-  );
-  watch(
-    () => [props.colorFormat, props.showAlpha],
-    () => {
-      color.enableAlpha = props.showAlpha;
-      color.format = props.colorFormat || color.format;
-      color.doOnChange();
-      emit(UPDATE_MODEL_EVENT, color.value);
-    }
-  );
-  return {
-    color
-  };
-};
-
-const _sfc_main$1 = defineComponent({
-  ...{
-    name: "ElColorPickerPanel"
-  },
-  __name: "color-picker-panel",
-  props: colorPickerPanelProps,
-  emits: colorPickerPanelEmits,
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const ns = useNamespace("color-picker-panel");
-    const { formItem } = useFormItem();
-    const disabled = useFormDisabled();
-    const hueRef = ref();
-    const svRef = ref();
-    const alphaRef = ref();
-    const inputRef = ref();
-    const customInput = ref("");
-    const { color } = inject(
-      ROOT_COMMON_COLOR_INJECTION_KEY,
-      () => useCommonColor(props, emit),
-      true
-    );
-    function handleConfirm() {
-      color.fromString(customInput.value);
-      if (color.value !== customInput.value) {
-        customInput.value = color.value;
-      }
-    }
-    function handleFocusout() {
-      var _a;
-      if (props.validateEvent) {
-        (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => debugWarn(err));
-      }
-    }
-    function update() {
-      var _a, _b, _c;
-      (_a = hueRef.value) == null ? void 0 : _a.update();
-      (_b = svRef.value) == null ? void 0 : _b.update();
-      (_c = alphaRef.value) == null ? void 0 : _c.update();
-    }
-    onMounted(() => {
-      if (props.modelValue) {
-        customInput.value = color.value;
-      }
-      nextTick(update);
-    });
-    watch(
-      () => props.modelValue,
-      (newVal) => {
-        if (newVal !== color.value) {
-          newVal ? color.fromString(newVal) : color.clear();
-        }
-      }
-    );
-    watch(
-      () => color.value,
-      (val) => {
-        emit(UPDATE_MODEL_EVENT, val);
-        customInput.value = val;
-        if (props.validateEvent) {
-          formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
-        }
-      }
-    );
-    provide(colorPickerPanelContextKey, {
-      currentColor: computed(() => color.value)
-    });
-    __expose({
-      color,
-      inputRef,
-      update
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass([unref(ns).b(), unref(ns).is("disabled", unref(disabled)), unref(ns).is("border", _ctx.border)]),
-          onFocusout: handleFocusout
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(unref(ns).e("wrapper"))
-            },
-            [
-              createVNode(HueSlider, {
-                ref_key: "hueRef",
-                ref: hueRef,
-                class: "hue-slider",
-                color: unref(color),
-                vertical: "",
-                disabled: unref(disabled)
-              }, null, 8, ["color", "disabled"]),
-              createVNode(SvPanel, {
-                ref_key: "svRef",
-                ref: svRef,
-                color: unref(color),
-                disabled: unref(disabled)
-              }, null, 8, ["color", "disabled"])
-            ],
-            2
-          ),
-          _ctx.showAlpha ? (openBlock(), createBlock(AlphaSlider, {
-            key: 0,
-            ref_key: "alphaRef",
-            ref: alphaRef,
-            color: unref(color),
-            disabled: unref(disabled)
-          }, null, 8, ["color", "disabled"])) : createCommentVNode("v-if", true),
-          _ctx.predefine ? (openBlock(), createBlock(Predefine, {
-            key: 1,
-            ref: "predefine",
-            "enable-alpha": _ctx.showAlpha,
-            color: unref(color),
-            colors: _ctx.predefine,
-            disabled: unref(disabled)
-          }, null, 8, ["enable-alpha", "color", "colors", "disabled"])) : createCommentVNode("v-if", true),
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(unref(ns).e("footer"))
-            },
-            [
-              createVNode(unref(ElInput), {
-                ref_key: "inputRef",
-                ref: inputRef,
-                modelValue: customInput.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
-                "validate-event": false,
-                size: "small",
-                disabled: unref(disabled),
-                onChange: handleConfirm
-              }, null, 8, ["modelValue", "disabled"]),
-              renderSlot(_ctx.$slots, "footer")
-            ],
-            2
-          )
-        ],
-        34
-      );
-    };
-  }
-});
-var ColorPickerPanel = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker-panel/src/color-picker-panel.vue"]]);
-
-const ElColorPickerPanel = withInstall(ColorPickerPanel);
-
 var r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return "string"==typeof r?r.length>0:"number"==typeof r},n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return (r=isFinite(r)?r%360:0)>0?r:r+360},a=function(r){return {r:e(r.r,0,255),g:e(r.g,0,255),b:e(r.b,0,255),a:e(r.a)}},o=function(r){return {r:n(r.r),g:n(r.g),b:n(r.b),a:n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return {h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return {r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return {h:u(r.h),s:e(r.s,0,100),l:e(r.l,0,100),a:e(r.a)}},d=function(r){return {h:n(r.h),s:n(r.s),l:n(r.l),a:n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e;},c=function(r){return {h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u;},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return {h:u(r.h),s:e(r.s,0,100),v:e(r.v,0,100),a:e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return [e,t[n][1]]}return [null,void 0]},x=function(r){return "string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},M=function(r,t){var n=c(r);return {h:n.h,s:e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return (299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return {h:n.h,s:n.s,l:e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1};}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i;},r.prototype.toRgb=function(){return o(this.rgba)},r.prototype.toRgbString=function(){return r=o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u;},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u;},r.prototype.toHsv=function(){return r=h(this.rgba),{h:n(r.h),s:n(r.s),v:n(r.v),a:n(r.a,3)};var r;},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r;},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return "number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):n(this.rgba.a,3);var t;},r.prototype.hue=function(r){var t=c(this.rgba);return "number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)};
 
 const PRESET_COLORS = [
@@ -1205,7 +232,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 const cssModules = {
   "$style": style0
 };
-const Component = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__cssModules", cssModules]]);
+const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 
 const __vite_glob_0_6 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
   __proto__: null,