element-plus 2.2.18 → 2.2.20

package/es/components/color-picker/src/color-picker.vue.d.ts

@@ -450,16 +450,8 @@ declare const _default: import("vue").DefineComponent<{
             role: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown>;
             triggerKeys: string[];
             arrowOffset: number;
-            visibleArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
             showArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
-            openDelay: {
-                readonly type: import("vue").PropType<number>;
-                readonly required: false;
-                readonly validator: ((val: unknown) => boolean) | undefined;
-                __epPropKey: true;
-            };
-            visibleArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
             showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
             arrowOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
             disabled: BooleanConstructor;
@@ -777,7 +769,7 @@ declare const _default: import("vue").DefineComponent<{
             role: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "tooltip", boolean>;
         }>> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "trigger" | "placement" | "offset" | "effect" | "showAfter" | "hideAfter" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "popperOptions" | "strategy" | "enterable" | "focusOnShow" | "trapping" | "stopPopperMouseEvent" | "visible" | "pure" | "virtualTriggering" | "appendTo" | "content" | "rawContent" | "transition" | "teleported" | "persistent" | "open" | "role" | "triggerKeys" | "arrowOffset" | "visibleArrow" | "showArrow">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "trigger" | "placement" | "offset" | "effect" | "showAfter" | "hideAfter" | "boundariesPadding" | "fallbackPlacements" | "gpuAcceleration" | "popperOptions" | "strategy" | "enterable" | "focusOnShow" | "trapping" | "stopPopperMouseEvent" | "visible" | "pure" | "virtualTriggering" | "appendTo" | "content" | "rawContent" | "transition" | "teleported" | "persistent" | "open" | "role" | "triggerKeys" | "arrowOffset" | "showArrow">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -792,13 +784,6 @@ declare const _default: import("vue").DefineComponent<{
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-            openDelay: {
-                readonly type: import("vue").PropType<number>;
-                readonly required: false;
-                readonly validator: ((val: unknown) => boolean) | undefined;
-                __epPropKey: true;
-            };
-            visibleArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
             showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
             arrowOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
             disabled: BooleanConstructor;
@@ -1118,13 +1103,6 @@ declare const _default: import("vue").DefineComponent<{
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
         }, {
             props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-                openDelay: {
-                    readonly type: import("vue").PropType<number>;
-                    readonly required: false;
-                    readonly validator: ((val: unknown) => boolean) | undefined;
-                    __epPropKey: true;
-                };
-                visibleArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
                 showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
                 arrowOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
                 disabled: BooleanConstructor;
@@ -1444,8 +1422,6 @@ declare const _default: import("vue").DefineComponent<{
                 [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
             }>>;
             emit: (event: string, ...args: any[]) => void;
-            compatShowAfter: import("vue").ComputedRef<number>;
-            compatShowArrow: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
             id: import("vue").Ref<string>;
             popperRef: import("vue").Ref<any>;
             contentRef: import("vue").Ref<any>;
@@ -3640,7 +3616,6 @@ declare const _default: import("vue").DefineComponent<{
             role: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown>;
             triggerKeys: string[];
             arrowOffset: number;
-            visibleArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
             showArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         }> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -3663,13 +3638,6 @@ declare const _default: import("vue").DefineComponent<{
         $nextTick: typeof nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
-        openDelay: {
-            readonly type: import("vue").PropType<number>;
-            readonly required: false;
-            readonly validator: ((val: unknown) => boolean) | undefined;
-            __epPropKey: true;
-        };
-        visibleArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
         showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
         arrowOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
         disabled: BooleanConstructor;
@@ -3989,13 +3957,6 @@ declare const _default: import("vue").DefineComponent<{
         [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{
         props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-            openDelay: {
-                readonly type: import("vue").PropType<number>;
-                readonly required: false;
-                readonly validator: ((val: unknown) => boolean) | undefined;
-                __epPropKey: true;
-            };
-            visibleArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
             showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
             arrowOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
             disabled: BooleanConstructor;
@@ -4315,8 +4276,6 @@ declare const _default: import("vue").DefineComponent<{
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
         }>>;
         emit: (event: string, ...args: any[]) => void;
-        compatShowAfter: import("vue").ComputedRef<number>;
-        compatShowArrow: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
         id: import("vue").Ref<string>;
         popperRef: import("vue").Ref<any>;
         contentRef: import("vue").Ref<any>;
@@ -6561,11 +6520,7 @@ declare const _default: import("vue").DefineComponent<{
             onClick?: ((evt: MouseEvent) => any) | undefined;
         }>>;
         emit: (event: "click", evt: MouseEvent) => void;
-        slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        buttonGroupContext: import("../../..").ButtonGroupContext | undefined;
-        globalConfig: import("vue").Ref<import("element-plus/es/components/button").ButtonConfigContext | undefined>;
+        buttonStyle: import("vue").ComputedRef<Record<string, string>>;
         ns: {
             namespace: import("vue").Ref<string>;
             b: (blockSuffix?: string) => string;
@@ -6584,14 +6539,11 @@ declare const _default: import("vue").DefineComponent<{
             cssVarBlock: (object: Record<string, string>) => Record<string, string>;
             cssVarBlockName: (name: string) => string;
         };
-        form: import("../../..").FormContext | undefined;
-        _size: import("vue").ComputedRef<"" | "default" | "small" | "large">;
-        _disabled: import("vue").ComputedRef<boolean>;
         _ref: import("vue").Ref<HTMLButtonElement | undefined>;
+        _size: import("vue").ComputedRef<"" | "default" | "small" | "large">;
         _type: import("vue").ComputedRef<"" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text">;
-        autoInsertSpace: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
+        _disabled: import("vue").ComputedRef<boolean>;
         shouldAddSpace: import("vue").ComputedRef<boolean>;
-        buttonStyle: import("vue").ComputedRef<Record<string, string>>;
         handleClick: (evt: MouseEvent) => void;
         ElIcon: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
             readonly size: {
@@ -6819,13 +6771,6 @@ declare const _default: import("vue").DefineComponent<{
     }>>, {}>> & Record<string, any>;
     vClickOutside: import("vue").ObjectDirective<any, any>;
     ElTooltip: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
-        openDelay: {
-            readonly type: import("vue").PropType<number>;
-            readonly required: false;
-            readonly validator: ((val: unknown) => boolean) | undefined;
-            __epPropKey: true;
-        };
-        visibleArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
         showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
         arrowOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
         disabled: BooleanConstructor;
@@ -7143,13 +7088,6 @@ declare const _default: import("vue").DefineComponent<{
         role: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown, "tooltip", boolean>;
     }, {
         props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-            openDelay: {
-                readonly type: import("vue").PropType<number>;
-                readonly required: false;
-                readonly validator: ((val: unknown) => boolean) | undefined;
-                __epPropKey: true;
-            };
-            visibleArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
             showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
             arrowOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
             disabled: BooleanConstructor;
@@ -7469,8 +7407,6 @@ declare const _default: import("vue").DefineComponent<{
             [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
         }>>;
         emit: (event: string, ...args: any[]) => void;
-        compatShowAfter: import("vue").ComputedRef<number>;
-        compatShowArrow: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
         id: import("vue").Ref<string>;
         popperRef: import("vue").Ref<any>;
         contentRef: import("vue").Ref<any>;
@@ -9636,13 +9572,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly persistent: boolean;
         }>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-        openDelay: {
-            readonly type: import("vue").PropType<number>;
-            readonly required: false;
-            readonly validator: ((val: unknown) => boolean) | undefined;
-            __epPropKey: true;
-        };
-        visibleArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
         showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, boolean, boolean>;
         arrowOffset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 5, boolean>;
         disabled: BooleanConstructor;
@@ -9990,7 +9919,6 @@ declare const _default: import("vue").DefineComponent<{
         role: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "group" | "navigation" | "tree", unknown>;
         triggerKeys: string[];
         arrowOffset: number;
-        visibleArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         showArrow: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     }>> & Record<string, any>;
     ElInput: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
@@ -10030,7 +9958,12 @@ declare const _default: import("vue").DefineComponent<{
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;
         };
-        readonly form: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+        readonly form: {
+            readonly type: import("vue").PropType<string>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
         readonly readonly: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
         readonly clearable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
         readonly showPassword: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
@@ -10053,10 +9986,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         readonly inputStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("element-plus/es/utils").Mutable<{}>, boolean>;
     }, {
-        PENDANT_MAP: {
-            readonly suffix: "append";
-            readonly prefix: "prepend";
-        };
         props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
             readonly id: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
             readonly size: {
@@ -10094,7 +10023,12 @@ declare const _default: import("vue").DefineComponent<{
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
             };
-            readonly form: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+            readonly form: {
+                readonly type: import("vue").PropType<string>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
             readonly readonly: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
             readonly clearable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
             readonly showPassword: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
@@ -10131,7 +10065,6 @@ declare const _default: import("vue").DefineComponent<{
             onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
         }>>;
         emit: ((event: "update:modelValue", value: string) => void) & ((event: "change", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "clear") => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "compositionend", evt: CompositionEvent) => void);
-        instance: import("vue").ComponentInternalInstance;
         rawAttrs: {
             [x: string]: unknown;
         };
@@ -10207,8 +10140,6 @@ declare const _default: import("vue").DefineComponent<{
         setCursor: () => void;
         resizeTextarea: () => void;
         setNativeInputValue: () => void;
-        calcIconOffset: (place: "suffix" | "prefix") => void;
-        updateIconOffset: () => void;
         handleInput: (event: Event) => Promise<void>;
         handleChange: (event: Event) => void;
         handleCompositionStart: (event: CompositionEvent) => void;
@@ -10339,7 +10270,12 @@ declare const _default: import("vue").DefineComponent<{
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;
         };
-        readonly form: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+        readonly form: {
+            readonly type: import("vue").PropType<string>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
         readonly readonly: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
         readonly clearable: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
         readonly showPassword: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
@@ -10383,7 +10319,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly id: string;
         readonly autosize: import("element-plus/es/components/input").InputAutoSize;
         readonly autocomplete: string;
-        readonly form: string;
         readonly readonly: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         readonly clearable: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         readonly showPassword: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;

package/es/components/color-picker/src/color-picker2.mjs

@@ -1,45 +1,324 @@
-import { isNil } from 'lodash-unified';
-import '../../../utils/index.mjs';
+import { defineComponent, ref, reactive, computed, nextTick, onMounted, watch, provide, openBlock, createBlock, unref, withCtx, withDirectives, createElementBlock, createElementVNode, normalizeClass, createVNode, createCommentVNode, withKeys, createTextVNode, toDisplayString, normalizeStyle, vShow } from 'vue';
+import { debounce } from 'lodash-unified';
+import { ElButton } from '../../button/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import '../../../directives/index.mjs';
 import '../../../hooks/index.mjs';
+import { ElTooltip } from '../../tooltip/index.mjs';
+import { ElInput } from '../../input/index.mjs';
 import '../../../constants/index.mjs';
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { useSizeProp } from '../../../hooks/use-common-props/index.mjs';
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
-import { isString } from '@vue/shared';
+import '../../../utils/index.mjs';
+import { ArrowDown, Close } from '@element-plus/icons-vue';
+import AlphaSlider from './components/alpha-slider.mjs';
+import HueSlider from './components/hue-slider.mjs';
+import Predefine from './components/predefine.mjs';
+import SvPanel from './components/sv-panel.mjs';
+import Color from './utils/color.mjs';
+import { colorPickerProps, colorPickerEmits, colorPickerContextKey } from './color-picker.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { useFormItem, useFormItemInputId } from '../../../hooks/use-form-item/index.mjs';
+import { useSize, useDisabled } from '../../../hooks/use-common-props/index.mjs';
+import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
+import { debugWarn } from '../../../utils/error.mjs';
+import ClickOutside from '../../../directives/click-outside/index.mjs';
 
-const colorPickerProps = buildProps({
-  modelValue: String,
-  id: String,
-  showAlpha: Boolean,
-  colorFormat: String,
-  disabled: Boolean,
-  size: useSizeProp,
-  popperClass: {
-    type: String,
-    default: ""
-  },
-  label: {
-    type: String,
-    default: void 0
-  },
-  tabindex: {
-    type: [String, Number],
-    default: 0
-  },
-  predefine: {
-    type: definePropType(Array)
-  },
-  validateEvent: {
-    type: Boolean,
-    default: true
+const _hoisted_1 = ["id", "aria-label", "aria-labelledby", "aria-description", "tabindex", "onKeydown"];
+const __default__ = defineComponent({
+  name: "ElColorPicker"
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: colorPickerProps,
+  emits: colorPickerEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const { t } = useLocale();
+    const ns = useNamespace("color");
+    const { formItem } = useFormItem();
+    const colorSize = useSize();
+    const colorDisabled = useDisabled();
+    const { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {
+      formItemContext: formItem
+    });
+    const hue = ref();
+    const sv = ref();
+    const alpha = ref();
+    const popper = ref();
+    let shouldActiveChange = true;
+    const color = reactive(new Color({
+      enableAlpha: props.showAlpha,
+      format: props.colorFormat || "",
+      value: props.modelValue
+    }));
+    const showPicker = ref(false);
+    const showPanelColor = ref(false);
+    const customInput = ref("");
+    const displayedColor = computed(() => {
+      if (!props.modelValue && !showPanelColor.value) {
+        return "transparent";
+      }
+      return displayedRgb(color, props.showAlpha);
+    });
+    const currentColor = computed(() => {
+      return !props.modelValue && !showPanelColor.value ? "" : color.value;
+    });
+    const buttonAriaLabel = computed(() => {
+      return !isLabeledByFormItem.value ? props.label || t("el.colorpicker.defaultLabel") : void 0;
+    });
+    const buttonAriaLabelledby = computed(() => {
+      return isLabeledByFormItem.value ? formItem == null ? void 0 : formItem.labelId : void 0;
+    });
+    function displayedRgb(color2, showAlpha) {
+      if (!(color2 instanceof Color)) {
+        throw new TypeError("color should be instance of _color Class");
+      }
+      const { r, g, b } = color2.toRgb();
+      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`;
+    }
+    function setShowPicker(value) {
+      showPicker.value = value;
+    }
+    const debounceSetShowPicker = debounce(setShowPicker, 100);
+    function hide() {
+      debounceSetShowPicker(false);
+      resetColor();
+    }
+    function resetColor() {
+      nextTick(() => {
+        if (props.modelValue) {
+          color.fromString(props.modelValue);
+        } else {
+          color.value = "";
+          nextTick(() => {
+            showPanelColor.value = false;
+          });
+        }
+      });
+    }
+    function handleTrigger() {
+      if (colorDisabled.value)
+        return;
+      debounceSetShowPicker(!showPicker.value);
+    }
+    function handleConfirm() {
+      color.fromString(customInput.value);
+    }
+    function confirmValue() {
+      const value = color.value;
+      emit(UPDATE_MODEL_EVENT, value);
+      emit("change", value);
+      if (props.validateEvent) {
+        formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
+      }
+      debounceSetShowPicker(false);
+      nextTick(() => {
+        const newColor = new Color({
+          enableAlpha: props.showAlpha,
+          format: props.colorFormat || "",
+          value: props.modelValue
+        });
+        if (!color.compare(newColor)) {
+          resetColor();
+        }
+      });
+    }
+    function clear() {
+      debounceSetShowPicker(false);
+      emit(UPDATE_MODEL_EVENT, null);
+      emit("change", null);
+      if (props.modelValue !== null && props.validateEvent) {
+        formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
+      }
+      resetColor();
+    }
+    onMounted(() => {
+      if (props.modelValue) {
+        customInput.value = currentColor.value;
+      }
+    });
+    watch(() => props.modelValue, (newVal) => {
+      if (!newVal) {
+        showPanelColor.value = false;
+      } else if (newVal && newVal !== color.value) {
+        shouldActiveChange = false;
+        color.fromString(newVal);
+      }
+    });
+    watch(() => currentColor.value, (val) => {
+      customInput.value = val;
+      shouldActiveChange && emit("activeChange", val);
+      shouldActiveChange = true;
+    });
+    watch(() => color.value, () => {
+      if (!props.modelValue && !showPanelColor.value) {
+        showPanelColor.value = true;
+      }
+    });
+    watch(() => showPicker.value, () => {
+      nextTick(() => {
+        var _a, _b, _c;
+        (_a = hue.value) == null ? void 0 : _a.update();
+        (_b = sv.value) == null ? void 0 : _b.update();
+        (_c = alpha.value) == null ? void 0 : _c.update();
+      });
+    });
+    provide(colorPickerContextKey, {
+      currentColor
+    });
+    expose({
+      color
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTooltip), {
+        ref_key: "popper",
+        ref: popper,
+        visible: showPicker.value,
+        "show-arrow": false,
+        "fallback-placements": ["bottom", "top", "right", "left"],
+        offset: 0,
+        "gpu-acceleration": false,
+        "popper-class": [unref(ns).be("picker", "panel"), unref(ns).b("dropdown"), _ctx.popperClass],
+        "stop-popper-mouse-event": false,
+        effect: "light",
+        trigger: "click",
+        transition: `${unref(ns).namespace.value}-zoom-in-top`,
+        persistent: ""
+      }, {
+        content: withCtx(() => [
+          withDirectives((openBlock(), createElementBlock("div", null, [
+            createElementVNode("div", {
+              class: normalizeClass(unref(ns).be("dropdown", "main-wrapper"))
+            }, [
+              createVNode(HueSlider, {
+                ref_key: "hue",
+                ref: hue,
+                class: "hue-slider",
+                color: unref(color),
+                vertical: ""
+              }, null, 8, ["color"]),
+              createVNode(SvPanel, {
+                ref: "svPanel",
+                color: unref(color)
+              }, null, 8, ["color"])
+            ], 2),
+            _ctx.showAlpha ? (openBlock(), createBlock(AlphaSlider, {
+              key: 0,
+              ref_key: "alpha",
+              ref: alpha,
+              color: unref(color)
+            }, null, 8, ["color"])) : createCommentVNode("v-if", true),
+            _ctx.predefine ? (openBlock(), createBlock(Predefine, {
+              key: 1,
+              ref: "predefine",
+              color: unref(color),
+              colors: _ctx.predefine
+            }, null, 8, ["color", "colors"])) : createCommentVNode("v-if", true),
+            createElementVNode("div", {
+              class: normalizeClass(unref(ns).be("dropdown", "btns"))
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass(unref(ns).be("dropdown", "value"))
+              }, [
+                createVNode(unref(ElInput), {
+                  modelValue: customInput.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
+                  "validate-event": false,
+                  size: "small",
+                  onKeyup: withKeys(handleConfirm, ["enter"]),
+                  onBlur: handleConfirm
+                }, null, 8, ["modelValue", "onKeyup"])
+              ], 2),
+              createVNode(unref(ElButton), {
+                class: normalizeClass(unref(ns).be("dropdown", "link-btn")),
+                text: "",
+                size: "small",
+                onClick: clear
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("el.colorpicker.clear")), 1)
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              createVNode(unref(ElButton), {
+                plain: "",
+                size: "small",
+                class: normalizeClass(unref(ns).be("dropdown", "btn")),
+                onClick: confirmValue
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("el.colorpicker.confirm")), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ], 2)
+          ])), [
+            [unref(ClickOutside), hide]
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            id: unref(buttonId),
+            class: normalizeClass([
+              unref(ns).b("picker"),
+              unref(ns).is("disabled", unref(colorDisabled)),
+              unref(ns).bm("picker", unref(colorSize))
+            ]),
+            role: "button",
+            "aria-label": unref(buttonAriaLabel),
+            "aria-labelledby": unref(buttonAriaLabelledby),
+            "aria-description": unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
+            tabindex: _ctx.tabindex,
+            onKeydown: withKeys(handleTrigger, ["enter"])
+          }, [
+            unref(colorDisabled) ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(unref(ns).be("picker", "mask"))
+            }, null, 2)) : createCommentVNode("v-if", true),
+            createElementVNode("div", {
+              class: normalizeClass(unref(ns).be("picker", "trigger")),
+              onClick: handleTrigger
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass([unref(ns).be("picker", "color"), unref(ns).is("alpha", _ctx.showAlpha)])
+              }, [
+                createElementVNode("span", {
+                  class: normalizeClass(unref(ns).be("picker", "color-inner")),
+                  style: normalizeStyle({
+                    backgroundColor: unref(displayedColor)
+                  })
+                }, [
+                  withDirectives(createVNode(unref(ElIcon), {
+                    class: normalizeClass([unref(ns).be("picker", "icon"), unref(ns).is("icon-arrow-down")])
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(ArrowDown))
+                    ]),
+                    _: 1
+                  }, 8, ["class"]), [
+                    [vShow, _ctx.modelValue || showPanelColor.value]
+                  ]),
+                  !_ctx.modelValue && !showPanelColor.value ? (openBlock(), createBlock(unref(ElIcon), {
+                    key: 0,
+                    class: normalizeClass([unref(ns).be("picker", "empty"), unref(ns).is("icon-close")])
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(Close))
+                    ]),
+                    _: 1
+                  }, 8, ["class"])) : createCommentVNode("v-if", true)
+                ], 6)
+              ], 2)
+            ], 2)
+          ], 42, _hoisted_1)
+        ]),
+        _: 1
+      }, 8, ["visible", "popper-class", "transition"]);
+    };
   }
 });
-const colorPickerEmits = {
-  [UPDATE_MODEL_EVENT]: (val) => isString(val) || isNil(val),
-  [CHANGE_EVENT]: (val) => isString(val) || isNil(val),
-  activeChange: (val) => isString(val) || isNil(val)
-};
-const colorPickerContextKey = Symbol("colorPickerContextKey");
+var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/color-picker.vue"]]);
 
-export { colorPickerContextKey, colorPickerEmits, colorPickerProps };
+export { ColorPicker as default };
 //# sourceMappingURL=color-picker2.mjs.map