@wfrog/vc-ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,1215 @@
+import './index.css'
+import { b as buildProps, d as definePropType, u as useNamespace, i as isString, h as hasOwn, a as debugWarn } from '../../chunk/By7FMB3I.mjs';
+import '../../chunk/BfjuZmry.mjs';
+/* empty css                    */
+import { E as ElInput } from '../../chunk/CKZGL4_3.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 { C as Component$1 } from '../iconify-icon/iconify-icon.mjs';
+import { isClient, useDark, useStorage } from '@vueuse/core';
+import { t as throttle } from '../../chunk/CNEMJL35.mjs';
+import { E as ElPopover } from '../../chunk/DQK0ezHm.mjs';
+import { g as getClientXY } from '../../chunk/DxxbB5jY.mjs';
+import { a as addUnit } from '../../chunk/CQz3lhyS.mjs';
+import { g as getEventCode, E as EVENT_CODE } from '../../chunk/BTpNRPQW.mjs';
+import { _ as _export_sfc, w as withInstall } from '../../chunk/dN0VcQc2.mjs';
+import { u as useLocale } from '../../chunk/CJ0afvkJ.mjs';
+import { U as UPDATE_MODEL_EVENT } from '../../chunk/Ct6q2FXg.mjs';
+import { i as isNil } from '../../chunk/DViraU6I.mjs';
+import { T as TinyColor } from '../../chunk/D9Lr0Bzb.mjs';
+import { u as useFormItem, a as useFormDisabled } from '../../chunk/BvNFaD5d.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();
+  });
+  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 = [
+  "#409EFF",
+  // Element Blue
+  "#8B5CF6",
+  // 紫罗兰
+  "#EC4899",
+  // 樱花粉
+  "#EAB308",
+  // 柠檬黄
+  "#0EA5E9",
+  // 天蓝色
+  "#22C55E",
+  // 浅绿色
+  "#52525B",
+  // 锌色灰
+  "#14B8A6",
+  // 深绿色（青）
+  "#1D4ED8",
+  // 深蓝色
+  "#F97316",
+  // 橙黄色
+  "#E11D48",
+  // 玫瑰红
+  "#262626",
+  // 中性色（近黑）
+  "#475569",
+  // 石板灰
+  "#6B7280"
+  // 中灰色
+];
+const CSS_VARS = {
+  "primary": "--el-color-primary",
+  "light-3": "--el-color-primary-light-3",
+  "light-5": "--el-color-primary-light-5",
+  "light-7": "--el-color-primary-light-7",
+  "light-8": "--el-color-primary-light-8",
+  "light-9": "--el-color-primary-light-9",
+  "dark-2": "--el-color-primary-dark-2"
+};
+function mix(baseColor, mixColor, weight) {
+  const base = w(baseColor).toRgb();
+  const blend = w(mixColor).toRgb();
+  const p = weight / 100;
+  return w({
+    r: Math.round(base.r * (1 - p) + blend.r * p),
+    g: Math.round(base.g * (1 - p) + blend.g * p),
+    b: Math.round(base.b * (1 - p) + blend.b * p)
+  }).toHex();
+}
+function generateLightTheme(primary) {
+  return {
+    primary,
+    "light-3": mix(primary, "#ffffff", 30),
+    "light-5": mix(primary, "#ffffff", 50),
+    "light-7": mix(primary, "#ffffff", 70),
+    "light-8": mix(primary, "#ffffff", 80),
+    "light-9": mix(primary, "#ffffff", 90),
+    // 很浅的背景色
+    "dark-2": mix(primary, "#000000", 20)
+  };
+}
+function generateDarkTheme(primary) {
+  return {
+    primary,
+    "light-3": mix(primary, "#141414", 30),
+    // 变暗
+    "light-5": mix(primary, "#141414", 50),
+    "light-7": mix(primary, "#141414", 70),
+    "light-8": mix(primary, "#141414", 80),
+    "light-9": mix(primary, "#141414", 90),
+    // 深色调背景
+    "dark-2": mix(primary, "#ffffff", 20)
+    // active 状态反而变亮
+  };
+}
+function applyTheme(color, isDark) {
+  const colors = isDark ? generateDarkTheme(color) : generateLightTheme(color);
+  const root = document.documentElement.style;
+  Object.keys(CSS_VARS).forEach((key) => root.setProperty(CSS_VARS[key], colors[key]));
+}
+function useTheme(storageKey, darkStorageKey) {
+  const isDark = useDark({ storageKey: darkStorageKey });
+  const themeColor = useStorage(storageKey, PRESET_COLORS[0]);
+  const setTheme = (color) => {
+    if (!color) {
+      return;
+    }
+    applyTheme(color, isDark.value);
+  };
+  onBeforeMount(() => setTheme(themeColor.value));
+  watch(isDark, (dark) => applyTheme(themeColor.value, dark));
+  return { themeColor, setTheme };
+}
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "color-switcher",
+  props: {
+    darkStorageKey: { default: "vc-dark" },
+    storageKey: { default: "vc-primary-color" },
+    size: { default: 28 }
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const colorPickerRef = useTemplateRef("colorPickerRef");
+    const { themeColor, setTheme } = useTheme(props.storageKey, props.darkStorageKey);
+    const throttleSetTheme = throttle((val) => {
+      setTheme(val);
+      emits("change", val);
+    }, 1e3);
+    watch(themeColor, (val) => throttleSetTheme(val));
+    return (_ctx, _cache) => {
+      const _component_el_color_picker_panel = ElColorPickerPanel;
+      const _component_el_popover = ElPopover;
+      return openBlock(), createBlock(_component_el_popover, {
+        placement: "bottom",
+        trigger: "click",
+        width: "auto",
+        onShow: _cache[1] || (_cache[1] = ($event) => unref(colorPickerRef)?.update())
+      }, {
+        reference: withCtx(() => [
+          createElementVNode("i", {
+            class: normalizeClass(_ctx.$style["color-switcher"])
+          }, [
+            createVNode(Component$1, {
+              name: "carbon:color-palette",
+              size: __props.size
+            }, null, 8, ["size"])
+          ], 2)
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_el_color_picker_panel, {
+            ref_key: "colorPickerRef",
+            ref: colorPickerRef,
+            modelValue: unref(themeColor),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(themeColor) ? themeColor.value = $event : null),
+            predefine: [...unref(PRESET_COLORS)],
+            border: false,
+            "show-alpha": ""
+          }, null, 8, ["modelValue", "predefine"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+
+/* unplugin-vue-components disabled */const style0 = {
+	"color-switcher": "_color-switcher_1n96n_1"
+};
+
+const cssModules = {
+  "$style": style0
+};
+const Component = /* @__PURE__ */ _export_sfc$1(_sfc_main, [["__cssModules", cssModules]]);
+
+const __vite_glob_0_6 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+  __proto__: null,
+  default: Component
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Component as C, __vite_glob_0_6 as _ };