element-pe 2.2.28 → 2.2.29

package/es/components/color-picker/index.d.ts

@@ -20,6 +20,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
         __epPropKey: true;
     };
     readonly validateEvent: import("element-pe/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly placement: import("element-pe/es/utils").EpPropFinalized<StringConstructor, import("@popperjs/core").Placement, unknown, "bottom", boolean>;
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         readonly modelValue: StringConstructor;
@@ -43,6 +44,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
             __epPropKey: true;
         };
         readonly validateEvent: import("element-pe/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+        readonly placement: import("element-pe/es/utils").EpPropFinalized<StringConstructor, import("@popperjs/core").Placement, unknown, "bottom", boolean>;
     }>> & {
         onChange?: ((val: string | null) => any) | undefined;
         "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
@@ -2695,7 +2697,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                     readonly popperOptions: import("element-pe/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<import("@popperjs/core").Options>) | (() => Partial<import("@popperjs/core").Options>) | ((new (...args: any[]) => Partial<import("@popperjs/core").Options>) | (() => Partial<import("@popperjs/core").Options>))[], unknown, unknown, () => {}, boolean>;
                     readonly strategy: import("element-pe/es/utils").EpPropFinalized<StringConstructor, "fixed" | "absolute", unknown, "absolute", boolean>;
                 }, {
-                    emit: ((event: "focus") => void) & ((event: "close") => void) & ((event: "blur") => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void);
+                    emit: ((event: "focus") => void) & ((event: "blur") => void) & ((event: "close") => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "mouseleave", evt: MouseEvent) => void);
                     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                         readonly id: StringConstructor;
                         readonly style: {
@@ -2947,8 +2949,8 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                         onClose?: (() => any) | undefined;
                         onFocus?: (() => any) | undefined;
                         onBlur?: (() => any) | undefined;
-                        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                         onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                     }>>;
                     popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                     contentRef: import("vue").Ref<HTMLElement | undefined>;
@@ -3027,7 +3029,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                         };
                     }, {
                         onKeydown: (e: KeyboardEvent) => void;
-                    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focusAfterTrapped" | "focusAfterReleased" | "focusin" | "focusout" | "focusout-prevented" | "release-requested")[], "focusAfterTrapped" | "focusAfterReleased" | "focusin" | "focusout" | "focusout-prevented" | "release-requested", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+                    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focusin" | "focusout" | "focusAfterTrapped" | "focusAfterReleased" | "focusout-prevented" | "release-requested")[], "focusin" | "focusout" | "focusAfterTrapped" | "focusAfterReleased" | "focusout-prevented" | "release-requested", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
                         loop: BooleanConstructor;
                         trapped: BooleanConstructor;
                         focusTrapEl: import("vue").PropType<HTMLElement>;
@@ -3036,10 +3038,10 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                             default: string;
                         };
                     }>> & {
-                        onFocusAfterTrapped?: ((...args: any[]) => any) | undefined;
-                        onFocusAfterReleased?: ((...args: any[]) => any) | undefined;
                         onFocusin?: ((...args: any[]) => any) | undefined;
                         onFocusout?: ((...args: any[]) => any) | undefined;
+                        onFocusAfterTrapped?: ((...args: any[]) => any) | undefined;
+                        onFocusAfterReleased?: ((...args: any[]) => any) | undefined;
                         "onFocusout-prevented"?: ((...args: any[]) => any) | undefined;
                         "onRelease-requested"?: ((...args: any[]) => any) | undefined;
                     }, {
@@ -3304,8 +3306,8 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                     onClose?: (() => any) | undefined;
                     onFocus?: (() => any) | undefined;
                     onBlur?: (() => any) | undefined;
-                    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                     onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                 }, {
                     readonly placement: import("element-pe/es/utils").EpPropMergeType<StringConstructor, import("@popperjs/core").Placement, unknown>;
                     readonly offset: number;
@@ -5574,7 +5576,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                 readonly popperOptions: import("element-pe/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<import("@popperjs/core").Options>) | (() => Partial<import("@popperjs/core").Options>) | ((new (...args: any[]) => Partial<import("@popperjs/core").Options>) | (() => Partial<import("@popperjs/core").Options>))[], unknown, unknown, () => {}, boolean>;
                 readonly strategy: import("element-pe/es/utils").EpPropFinalized<StringConstructor, "fixed" | "absolute", unknown, "absolute", boolean>;
             }, {
-                emit: ((event: "focus") => void) & ((event: "close") => void) & ((event: "blur") => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void);
+                emit: ((event: "focus") => void) & ((event: "blur") => void) & ((event: "close") => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "mouseleave", evt: MouseEvent) => void);
                 props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                     readonly id: StringConstructor;
                     readonly style: {
@@ -5826,8 +5828,8 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                     onClose?: (() => any) | undefined;
                     onFocus?: (() => any) | undefined;
                     onBlur?: (() => any) | undefined;
-                    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                     onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                 }>>;
                 popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                 contentRef: import("vue").Ref<HTMLElement | undefined>;
@@ -5906,7 +5908,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                     };
                 }, {
                     onKeydown: (e: KeyboardEvent) => void;
-                }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focusAfterTrapped" | "focusAfterReleased" | "focusin" | "focusout" | "focusout-prevented" | "release-requested")[], "focusAfterTrapped" | "focusAfterReleased" | "focusin" | "focusout" | "focusout-prevented" | "release-requested", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+                }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focusin" | "focusout" | "focusAfterTrapped" | "focusAfterReleased" | "focusout-prevented" | "release-requested")[], "focusin" | "focusout" | "focusAfterTrapped" | "focusAfterReleased" | "focusout-prevented" | "release-requested", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
                     loop: BooleanConstructor;
                     trapped: BooleanConstructor;
                     focusTrapEl: import("vue").PropType<HTMLElement>;
@@ -5915,10 +5917,10 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                         default: string;
                     };
                 }>> & {
-                    onFocusAfterTrapped?: ((...args: any[]) => any) | undefined;
-                    onFocusAfterReleased?: ((...args: any[]) => any) | undefined;
                     onFocusin?: ((...args: any[]) => any) | undefined;
                     onFocusout?: ((...args: any[]) => any) | undefined;
+                    onFocusAfterTrapped?: ((...args: any[]) => any) | undefined;
+                    onFocusAfterReleased?: ((...args: any[]) => any) | undefined;
                     "onFocusout-prevented"?: ((...args: any[]) => any) | undefined;
                     "onRelease-requested"?: ((...args: any[]) => any) | undefined;
                 }, {
@@ -6183,8 +6185,8 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                 onClose?: (() => any) | undefined;
                 onFocus?: (() => any) | undefined;
                 onBlur?: (() => any) | undefined;
-                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                 onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
             }, {
                 readonly placement: import("element-pe/es/utils").EpPropMergeType<StringConstructor, import("@popperjs/core").Placement, unknown>;
                 readonly offset: number;
@@ -8732,7 +8734,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                 readonly popperOptions: import("element-pe/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<import("@popperjs/core").Options>) | (() => Partial<import("@popperjs/core").Options>) | ((new (...args: any[]) => Partial<import("@popperjs/core").Options>) | (() => Partial<import("@popperjs/core").Options>))[], unknown, unknown, () => {}, boolean>;
                 readonly strategy: import("element-pe/es/utils").EpPropFinalized<StringConstructor, "fixed" | "absolute", unknown, "absolute", boolean>;
             }, {
-                emit: ((event: "focus") => void) & ((event: "close") => void) & ((event: "blur") => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void);
+                emit: ((event: "focus") => void) & ((event: "blur") => void) & ((event: "close") => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "mouseleave", evt: MouseEvent) => void);
                 props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                     readonly id: StringConstructor;
                     readonly style: {
@@ -8984,8 +8986,8 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                     onClose?: (() => any) | undefined;
                     onFocus?: (() => any) | undefined;
                     onBlur?: (() => any) | undefined;
-                    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                     onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                 }>>;
                 popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                 contentRef: import("vue").Ref<HTMLElement | undefined>;
@@ -9064,7 +9066,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                     };
                 }, {
                     onKeydown: (e: KeyboardEvent) => void;
-                }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focusAfterTrapped" | "focusAfterReleased" | "focusin" | "focusout" | "focusout-prevented" | "release-requested")[], "focusAfterTrapped" | "focusAfterReleased" | "focusin" | "focusout" | "focusout-prevented" | "release-requested", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+                }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focusin" | "focusout" | "focusAfterTrapped" | "focusAfterReleased" | "focusout-prevented" | "release-requested")[], "focusin" | "focusout" | "focusAfterTrapped" | "focusAfterReleased" | "focusout-prevented" | "release-requested", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
                     loop: BooleanConstructor;
                     trapped: BooleanConstructor;
                     focusTrapEl: import("vue").PropType<HTMLElement>;
@@ -9073,10 +9075,10 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                         default: string;
                     };
                 }>> & {
-                    onFocusAfterTrapped?: ((...args: any[]) => any) | undefined;
-                    onFocusAfterReleased?: ((...args: any[]) => any) | undefined;
                     onFocusin?: ((...args: any[]) => any) | undefined;
                     onFocusout?: ((...args: any[]) => any) | undefined;
+                    onFocusAfterTrapped?: ((...args: any[]) => any) | undefined;
+                    onFocusAfterReleased?: ((...args: any[]) => any) | undefined;
                     "onFocusout-prevented"?: ((...args: any[]) => any) | undefined;
                     "onRelease-requested"?: ((...args: any[]) => any) | undefined;
                 }, {
@@ -9341,8 +9343,8 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
                 onClose?: (() => any) | undefined;
                 onFocus?: (() => any) | undefined;
                 onBlur?: (() => any) | undefined;
-                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                 onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
             }, {
                 readonly placement: import("element-pe/es/utils").EpPropMergeType<StringConstructor, import("@popperjs/core").Placement, unknown>;
                 readonly offset: number;
@@ -10141,14 +10143,14 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
             onFocus?: ((evt: FocusEvent) => any) | undefined;
             onBlur?: ((evt: FocusEvent) => any) | undefined;
             onClear?: (() => any) | undefined;
-            onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-            onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-            onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+            onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
             onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
             onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-            onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+            onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+            onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+            onMouseleave?: ((evt: MouseEvent) => 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);
+        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: "compositionend", evt: CompositionEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "clear") => void);
         rawAttrs: {
             [x: string]: unknown;
         };
@@ -10390,12 +10392,12 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
         onFocus?: ((evt: FocusEvent) => any) | undefined;
         onBlur?: ((evt: FocusEvent) => any) | undefined;
         onClear?: (() => any) | undefined;
-        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-        onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+        onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
         onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-        onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+        onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+        onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+        onMouseleave?: ((evt: MouseEvent) => any) | undefined;
     }, {
         readonly type: string;
         readonly disabled: boolean;
@@ -10608,6 +10610,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
         __epPropKey: true;
     };
     readonly validateEvent: import("element-pe/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly placement: import("element-pe/es/utils").EpPropFinalized<StringConstructor, import("@popperjs/core").Placement, unknown, "bottom", boolean>;
 }>> & {
     onChange?: ((val: string | null) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
@@ -10616,6 +10619,7 @@ export declare const ElColorPicker: import("element-pe/es/utils").SFCWithInstall
     readonly disabled: boolean;
     readonly label: string;
     readonly validateEvent: import("element-pe/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly placement: import("element-pe/es/utils").EpPropMergeType<StringConstructor, import("@popperjs/core").Placement, unknown>;
     readonly popperClass: string;
     readonly tabindex: import("element-pe/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     readonly showAlpha: boolean;

package/es/components/color-picker/index.mjs

@@ -1,6 +1,6 @@
 import '../../utils/index.mjs';
-import ColorPicker from './src/color-picker.mjs';
-export { colorPickerContextKey, colorPickerEmits, colorPickerProps } from './src/color-picker2.mjs';
+import ColorPicker from './src/color-picker2.mjs';
+export { colorPickerContextKey, colorPickerEmits, colorPickerProps } from './src/color-picker.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const ElColorPicker = withInstall(ColorPicker);

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

@@ -22,6 +22,7 @@ export declare const colorPickerProps: {
         __epPropKey: true;
     };
     readonly validateEvent: import("element-pe/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    readonly placement: import("element-pe/es/utils").EpPropFinalized<StringConstructor, import("@popperjs/core").Placement, unknown, "bottom", boolean>;
 };
 export declare const colorPickerEmits: {
     "update:modelValue": (val: string | null) => boolean;

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

@@ -1,327 +1,51 @@
-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 { isNil } from 'lodash-unified';
+import '../../../utils/index.mjs';
 import '../../../hooks/index.mjs';
-import { ElTooltip } from '../../tooltip/index.mjs';
-import { ElInput } from '../../input/index.mjs';
 import '../../../constants/index.mjs';
-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-picker2.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';
+import { placements } from '@popperjs/core';
+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';
 
-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;
-    });
-    const btnKls = computed(() => {
-      return [
-        ns.b("picker"),
-        ns.is("disabled", colorDisabled.value),
-        ns.bm("picker", colorSize.value)
-      ];
-    });
-    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(btnKls)),
-            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 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
+  },
+  placement: {
+    type: String,
+    values: placements,
+    default: "bottom"
   }
 });
-var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/Users/meng/workspace/element-pe/packages/components/color-picker/src/color-picker.vue"]]);
+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");
 
-export { ColorPicker as default };
+export { colorPickerContextKey, colorPickerEmits, colorPickerProps };
 //# sourceMappingURL=color-picker.mjs.map