@element-plus/nightly 0.0.20260311 → 0.0.20260313

package/lib/components/button/src/button.vue.d.ts

@@ -26,7 +26,7 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
 }>, {
   /** @description button html element */ref: vue.Ref<HTMLButtonElement | undefined>; /** @description button size */
   size: vue.ComputedRef<"" | "default" | "small" | "large">; /** @description button type */
-  type: vue.ComputedRef<"default" | "" | "text" | "primary" | "success" | "warning" | "info" | "danger">; /** @description button disabled */
+  type: vue.ComputedRef<"default" | "" | "text" | "info" | "primary" | "success" | "warning" | "danger">; /** @description button disabled */
   disabled: vue.ComputedRef<boolean>; /** @description whether adding space */
   shouldAddSpace: vue.ComputedRef<boolean>;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -45,16 +45,16 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
 }>>> & {
   onClick?: ((evt: MouseEvent) => any) | undefined;
 }, {
-  disabled: boolean;
   type: ButtonType;
-  nativeType: ButtonNativeType;
-  loadingIcon: IconPropType;
-  plain: boolean;
   text: boolean;
+  disabled: boolean;
   round: boolean;
   dashed: boolean;
-  autoInsertSpace: boolean;
+  plain: boolean;
   tag: string | vue.Component;
+  nativeType: ButtonNativeType;
+  loadingIcon: IconPropType;
+  autoInsertSpace: boolean;
 }, {}>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/lib/components/card/src/card.d.ts

@@ -44,7 +44,7 @@ declare const cardProps: {
   readonly headerClass: StringConstructor;
   readonly bodyClass: StringConstructor;
   readonly footerClass: StringConstructor;
-  readonly shadow: EpPropFinalized<StringConstructor, "always" | "hover" | "never", unknown, undefined, boolean>;
+  readonly shadow: EpPropFinalized<StringConstructor, "always" | "never" | "hover", unknown, undefined, boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `CardProps` instead.

package/lib/components/carousel/src/carousel-item.vue.d.ts

@@ -13,8 +13,8 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   name: string;
   label: string;
 }>>>, {
-  label: string | number;
   name: string;
+  label: string | number;
 }, {}>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/lib/components/carousel/src/carousel.d.ts

@@ -63,11 +63,11 @@ interface CarouselProps {
 declare const carouselProps: {
   readonly initialIndex: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
   readonly height: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
-  readonly trigger: EpPropFinalized<StringConstructor, "click" | "hover", unknown, "hover", boolean>;
+  readonly trigger: EpPropFinalized<StringConstructor, "hover" | "click", unknown, "hover", boolean>;
   readonly autoplay: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly interval: EpPropFinalized<NumberConstructor, unknown, unknown, 3000, boolean>;
   readonly indicatorPosition: EpPropFinalized<StringConstructor, "" | "none" | "outside", unknown, "", boolean>;
-  readonly arrow: EpPropFinalized<StringConstructor, "always" | "hover" | "never", unknown, "hover", boolean>;
+  readonly arrow: EpPropFinalized<StringConstructor, "always" | "never" | "hover", unknown, "hover", boolean>;
   readonly type: EpPropFinalized<StringConstructor, "" | "card", unknown, "", boolean>;
   readonly cardScale: EpPropFinalized<NumberConstructor, unknown, unknown, 0.83, boolean>;
   readonly loop: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;

package/lib/components/carousel/src/carousel.vue.d.ts

@@ -42,13 +42,13 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
 }>>> & {
   onChange?: ((current: number, prev: number) => any) | undefined;
 }, {
+  initialIndex: number;
   type: "" | "card";
+  trigger: "hover" | "click";
+  loop: boolean;
   direction: "horizontal" | "vertical";
   height: string;
-  loop: boolean;
-  trigger: "hover" | "click";
   arrow: "always" | "hover" | "never";
-  initialIndex: number;
   autoplay: boolean;
   interval: number;
   indicatorPosition: "" | "none" | "outside";

package/lib/components/cascader/src/cascader.d.ts

@@ -169,7 +169,7 @@ declare const cascaderProps: {
   maxCollapseTags: EpPropFinalized<NumberConstructor, unknown, unknown, number, boolean>;
   collapseTagsTooltip: BooleanConstructor;
   maxCollapseTagsTooltipHeight: {
-    readonly type: vue.PropType<EpPropMergeType<(StringConstructor | NumberConstructor)[], unknown, unknown>>;
+    readonly type: vue.PropType<EpPropMergeType<(NumberConstructor | StringConstructor)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -184,7 +184,7 @@ declare const cascaderProps: {
     new (): any;
     readonly prototype: any;
   })[], unknown, unknown, () => true, boolean>;
-  placement: EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "left" | "right" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | ((new (...args: any[]) => "top" | "bottom" | "left" | "right" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement))[], Placement, unknown, string, boolean>;
+  placement: EpPropFinalized<(new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | ((new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement))[], Placement, unknown, string, boolean>;
   fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | ((new (...args: any[]) => Placement[]) | (() => Placement[]))[], unknown, unknown, string[], boolean>;
   popperClass: {
     readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
@@ -298,14 +298,14 @@ declare const cascaderProps: {
   effect: EpPropFinalized<(new (...args: any[]) => string) | (() => PopperEffect) | ((new (...args: any[]) => string) | (() => PopperEffect))[], unknown, unknown, string, boolean>;
   tagType: {
     default: string;
-    type: vue.PropType<EpPropMergeType<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown>>;
+    type: vue.PropType<EpPropMergeType<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown>>;
     required: false;
     validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
   tagEffect: {
     default: string;
-    type: vue.PropType<EpPropMergeType<StringConstructor, "plain" | "dark" | "light", unknown>>;
+    type: vue.PropType<EpPropMergeType<StringConstructor, "dark" | "light" | "plain", unknown>>;
     required: false;
     validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/lib/components/cascader/src/cascader.vue.d.ts

@@ -58,11 +58,11 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   focus: () => void; /** @description blur the input element */
   blur: () => void;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  clear: () => void;
+  "update:modelValue": (value: CascaderValue | null | undefined) => void;
   focus: (evt: FocusEvent) => void;
   blur: (evt: FocusEvent) => void;
+  clear: () => void;
   change: (value: CascaderValue | null | undefined) => void;
-  "update:modelValue": (value: CascaderValue | null | undefined) => void;
   visibleChange: (val: boolean) => void;
   expandChange: (val: CascaderValue) => void;
   removeTag: (val: CascaderNodeValue | CascaderNodePathValue) => void;
@@ -93,33 +93,33 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   onFocus?: ((evt: FocusEvent) => any) | undefined;
   onBlur?: ((evt: FocusEvent) => any) | undefined;
   onChange?: ((value: CascaderValue | null | undefined) => any) | undefined;
-  onClear?: (() => any) | undefined;
   "onUpdate:modelValue"?: ((value: CascaderValue | null | undefined) => any) | undefined;
+  onClear?: (() => any) | undefined;
   onVisibleChange?: ((val: boolean) => any) | undefined;
   onExpandChange?: ((val: CascaderValue) => any) | undefined;
   onRemoveTag?: ((val: CascaderNodeValue | CascaderNodePathValue) => any) | undefined;
 }, {
+  teleported: boolean;
+  props: CascaderProps;
   disabled: boolean;
+  clearIcon: IconPropType;
+  validateEvent: boolean;
+  separator: string;
   valueOnClear: string | number | boolean | Function | null;
-  props: CascaderProps;
+  tagType: "info" | "primary" | "success" | "warning" | "danger";
+  tagEffect: "dark" | "light" | "plain";
   effect: PopperEffect;
+  maxCollapseTags: number;
   popperStyle: string | false | vue.CSSProperties | StyleValue[] | null;
   fallbackPlacements: Placement[];
   placement: Placement;
   persistent: boolean;
-  teleported: boolean;
   options: CascaderOption[];
-  separator: string;
   debounce: number;
-  clearIcon: IconPropType;
-  validateEvent: boolean;
-  showPrefix: boolean;
   filterMethod: (node: Node, keyword: string) => boolean;
+  showPrefix: boolean;
   showAllLevels: boolean;
-  maxCollapseTags: number;
   beforeFilter: (value: string) => boolean | Promise<any>;
-  tagType: "primary" | "success" | "warning" | "info" | "danger";
-  tagEffect: "plain" | "dark" | "light";
   showCheckedStrategy: "parent" | "child";
 }, {}>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/lib/components/cascader-panel/src/index.vue.d.ts

@@ -153,8 +153,8 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   loadLazyRootNodes: () => void;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
   close: () => void;
-  change: (value: CascaderValue | null | undefined) => void;
   "update:modelValue": (value: CascaderValue | null | undefined) => void;
+  change: (value: CascaderValue | null | undefined) => void;
   "expand-change": (value: CascaderNodePathValue) => void;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CascaderPanelProps>, {
   options: () => CascaderOption[];

package/lib/components/check-tag/src/check-tag.d.ts

@@ -24,7 +24,7 @@ interface CheckTagProps {
 declare const checkTagProps: {
   readonly checked: BooleanConstructor;
   readonly disabled: BooleanConstructor;
-  readonly type: EpPropFinalized<StringConstructor, "primary" | "success" | "warning" | "info" | "danger", unknown, "primary", boolean>;
+  readonly type: EpPropFinalized<StringConstructor, "info" | "primary" | "success" | "warning" | "danger", unknown, "primary", boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `CheckTagProps` instead.

package/lib/components/checkbox/src/checkbox-button.vue.d.ts

@@ -19,8 +19,8 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   readonly id: undefined;
   readonly validateEvent: true;
 }>, unknown, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  change: (val: CheckboxValueType) => void;
   "update:modelValue": (val: CheckboxValueType) => void;
+  change: (val: CheckboxValueType) => void;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CheckboxProps>, {
   readonly modelValue: undefined;
   readonly label: undefined;
@@ -37,13 +37,13 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   onChange?: ((val: CheckboxValueType) => any) | undefined;
   "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
 }, {
-  disabled: boolean;
   id: string;
-  label: string | boolean | number | object;
-  name: string;
-  value: string | boolean | number | object;
+  disabled: boolean;
   modelValue: number | string | boolean;
   validateEvent: boolean;
+  name: string;
+  value: string | boolean | number | object;
+  label: string | boolean | number | object;
   trueValue: string | number;
   falseValue: string | number;
   trueLabel: string | number;

package/lib/components/checkbox/src/checkbox-group.vue.d.ts

@@ -20,8 +20,8 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   }>;
   type: string;
 }>, unknown, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  change: (val: CheckboxValueType[]) => void;
   "update:modelValue": (val: CheckboxGroupValueType) => void;
+  change: (val: CheckboxValueType[]) => void;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CheckboxGroupProps>, {
   modelValue: () => never[];
   disabled: undefined;
@@ -37,16 +37,16 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   onChange?: ((val: CheckboxValueType[]) => any) | undefined;
   "onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
 }, {
-  disabled: boolean;
-  type: "checkbox" | "button";
-  tag: string;
   props: {
     value?: string;
     label?: string;
     disabled?: string;
   };
+  type: "checkbox" | "button";
+  disabled: boolean;
   modelValue: CheckboxGroupValueType;
   validateEvent: boolean;
+  tag: string;
 }, {}>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/lib/components/checkbox/src/checkbox.d.ts

@@ -86,21 +86,21 @@ declare const checkboxProps: {
    * @description binding value
    */
   modelValue: {
-    type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+    type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
     default: undefined;
   };
   /**
    * @description label of the Checkbox when used inside a `checkbox-group`
    */
   label: {
-    type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
+    type: (BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[];
     default: undefined;
   };
   /**
    * @description value of the Checkbox when used inside a `checkbox-group`
    */
   value: {
-    type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
+    type: (BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[];
     default: undefined;
   };
   /**
@@ -129,14 +129,14 @@ declare const checkboxProps: {
    * @description value of the Checkbox if it's checked
    */
   trueValue: {
-    type: (StringConstructor | NumberConstructor)[];
+    type: (NumberConstructor | StringConstructor)[];
     default: undefined;
   };
   /**
    * @description value of the Checkbox if it's not checked
    */
   falseValue: {
-    type: (StringConstructor | NumberConstructor)[];
+    type: (NumberConstructor | StringConstructor)[];
     default: undefined;
   };
   /**
@@ -144,7 +144,7 @@ declare const checkboxProps: {
    * @description value of the Checkbox if it's checked
    */
   trueLabel: {
-    type: (StringConstructor | NumberConstructor)[];
+    type: (NumberConstructor | StringConstructor)[];
     default: undefined;
   };
   /**
@@ -152,7 +152,7 @@ declare const checkboxProps: {
    * @description value of the Checkbox if it's not checked
    */
   falseLabel: {
-    type: (StringConstructor | NumberConstructor)[];
+    type: (NumberConstructor | StringConstructor)[];
     default: undefined;
   };
   /**
@@ -178,7 +178,7 @@ declare const checkboxProps: {
   /**
    * @description input tabindex
    */
-  tabindex: (StringConstructor | NumberConstructor)[];
+  tabindex: (NumberConstructor | StringConstructor)[];
   /**
    * @description whether to trigger form validation
    */

package/lib/components/checkbox/src/checkbox.vue.d.ts

@@ -19,8 +19,8 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   readonly id: undefined;
   readonly validateEvent: true;
 }>, unknown, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  change: (val: CheckboxValueType) => void;
   "update:modelValue": (val: CheckboxValueType) => void;
+  change: (val: CheckboxValueType) => void;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CheckboxProps>, {
   readonly modelValue: undefined;
   readonly label: undefined;
@@ -37,13 +37,13 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   onChange?: ((val: CheckboxValueType) => any) | undefined;
   "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
 }, {
-  disabled: boolean;
   id: string;
-  label: string | boolean | number | object;
-  name: string;
-  value: string | boolean | number | object;
+  disabled: boolean;
   modelValue: number | string | boolean;
   validateEvent: boolean;
+  name: string;
+  value: string | boolean | number | object;
+  label: string | boolean | number | object;
   trueValue: string | number;
   falseValue: string | number;
   trueLabel: string | number;

package/lib/components/col/src/col.vue.d.ts

@@ -29,10 +29,10 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   lg: () => {};
   xl: () => {};
 }>>>, {
-  tag: string;
   push: number;
-  span: number;
   offset: number;
+  span: number;
+  tag: string;
   pull: number;
   xs: ColSize;
   sm: ColSize;

package/lib/components/collapse/src/collapse.vue.d.ts

@@ -13,8 +13,8 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
   /** @description active names */activeNames: vue.Ref<(string | number)[]>; /** @description set active names */
   setActiveNames: (_activeNames: CollapseActiveName[]) => void;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  change: (value: CollapseModelValue) => void;
   "update:modelValue": (value: CollapseModelValue) => void;
+  change: (value: CollapseModelValue) => void;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<CollapseProps>, {
   modelValue: () => never[];
   expandIconPosition: string;

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

@@ -39,11 +39,11 @@ declare const __VLS_export: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypePro
    */
   blur: typeof blur;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  clear: () => void;
+  "update:modelValue": (val: string | null) => void;
   focus: (evt: FocusEvent) => void;
   blur: (evt: FocusEvent) => void;
+  clear: () => void;
   change: (val: string | null) => void;
-  "update:modelValue": (val: string | null) => void;
   activeChange: (val: string | null) => void;
 }, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<ColorPickerProps>, {
   readonly persistent: true;
@@ -59,19 +59,19 @@ declare const __VLS_export: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypePro
   onFocus?: ((evt: FocusEvent) => any) | undefined;
   onBlur?: ((evt: FocusEvent) => any) | undefined;
   onChange?: ((val: string | null) => any) | undefined;
-  onClear?: (() => any) | undefined;
   "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
+  onClear?: (() => any) | undefined;
   onActiveChange?: ((val: string | null) => any) | undefined;
 }, {
-  disabled: boolean;
-  valueOnClear: string | number | boolean | Function | null;
-  tabindex: string | number;
-  popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
-  persistent: boolean;
   teleported: boolean;
+  disabled: boolean;
   modelValue: string | null;
   clearable: boolean;
+  tabindex: string | number;
   validateEvent: boolean;
+  valueOnClear: string | number | boolean | Function | null;
+  popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
+  persistent: boolean;
 }, {}>;
 declare const _default: typeof __VLS_export;
 type __VLS_TypePropsToOption<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? {

package/lib/components/color-picker-panel/src/color-picker-panel.d.ts

@@ -3,10 +3,12 @@ import "../../../utils/index.js";
 import { Color } from "./utils/color.js";
 import { _default } from "./color-picker-panel.vue.js";
 import * as vue from "vue";
-import { ComputedRef, ExtractPublicPropTypes, InjectionKey } from "vue";
+import { ComputedRef, ExtractPublicPropTypes, InjectionKey, StyleValue } from "vue";
 import { ColorFormats } from "@ctrl/tinycolor";
 
 //#region ../../packages/components/color-picker-panel/src/color-picker-panel.d.ts
+type ClassObjectType = Record<string, boolean>;
+type ClassType = string | ClassObjectType | ClassType[];
 interface ColorPickerPanelProps {
   /**
    * @description binding value
@@ -36,6 +38,14 @@ interface ColorPickerPanelProps {
    * @description whether to trigger form validation
    */
   validateEvent?: boolean;
+  /**
+   * @description class names will be passed to hue-slider
+   */
+  hueSliderClass?: ClassType;
+  /**
+   * @description styles will be passed to hue-slider
+   */
+  hueSliderStyle?: StyleValue;
 }
 /**
  * @deprecated Removed after 3.0.0, Use `ColorPickerPanelProps` instead.
@@ -58,6 +68,18 @@ declare const colorPickerPanelProps: {
     __epPropKey: true;
   };
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+  readonly hueSliderClass: {
+    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | ClassObjectType | ClassType[]) | (() => ClassType) | ((new (...args: any[]) => string | ClassObjectType | ClassType[]) | (() => ClassType))[], unknown, unknown>>;
+    readonly required: false;
+    readonly validator: ((val: unknown) => boolean) | undefined;
+    __epPropKey: true;
+  };
+  readonly hueSliderStyle: {
+    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown>>;
+    readonly required: false;
+    readonly validator: ((val: unknown) => boolean) | undefined;
+    __epPropKey: true;
+  };
 };
 declare const colorPickerPanelEmits: {
   "update:modelValue": (val: string | null) => boolean;

package/lib/components/color-picker-panel/src/color-picker-panel.js

@@ -25,7 +25,17 @@ const colorPickerPanelProps = require_runtime$1.buildProps({
 	validateEvent: {
 		type: Boolean,
 		default: true
-	}
+	},
+	hueSliderClass: { type: require_runtime$1.definePropType([
+		String,
+		Array,
+		Object
+	]) },
+	hueSliderStyle: { type: require_runtime$1.definePropType([
+		String,
+		Array,
+		Object
+	]) }
 });
 const colorPickerPanelEmits = { [require_event.UPDATE_MODEL_EVENT]: (val) => (0, _vue_shared.isString)(val) || (0, lodash_unified.isNil)(val) };
 const ROOT_COMMON_COLOR_INJECTION_KEY = Symbol("colorCommonPickerKey");

package/lib/components/color-picker-panel/src/color-picker-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel.js","names":["buildProps","definePropType","UPDATE_MODEL_EVENT"],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ComputedRef, ExtractPublicPropTypes, InjectionKey } from 'vue'\nimport type { ColorFormats } from '@ctrl/tinycolor'\nimport type ColorPickerPanel from './color-picker-panel.vue'\nimport type Color from './utils/color'\n\nexport interface ColorPickerPanelProps {\n  /**\n   * @description binding value\n   */\n  modelValue?: string | null\n  /**\n   * @description whether the color picker is bordered\n   */\n  border?: boolean\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha?: boolean\n  /**\n   * @description color format of v-model\n   */\n  colorFormat?: ColorFormats\n  /**\n   * @description whether to disable the color picker\n   */\n  disabled?: boolean\n  /**\n   * @description predefined color options\n   */\n  predefine?: string[]\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerPanelProps` instead.\n */\nexport const colorPickerPanelProps = buildProps({\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | null>(String),\n    default: undefined,\n  },\n  /**\n   * @description whether the color picker is bordered\n   */\n  border: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha: Boolean,\n  /**\n   * @description color format of v-model\n   */\n  colorFormat: {\n    type: definePropType<ColorFormats>(String),\n  },\n  /**\n   * @description whether to disable the color picker\n   */\n  disabled: Boolean,\n  /**\n   * @description predefined color options\n   */\n  predefine: {\n    type: definePropType<string[]>(Array),\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport const colorPickerPanelEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerPanelProps` instead.\n */\nexport type ColorPickerPanelPropsPublic = ExtractPublicPropTypes<\n  typeof colorPickerPanelProps\n>\nexport type ColorPickerPanelEmits = typeof colorPickerPanelEmits\nexport type ColorPickerPanelInstance = InstanceType<typeof ColorPickerPanel> &\n  unknown\n\nexport interface ColorPickerPanelContext {\n  currentColor: ComputedRef<string>\n}\n\nexport interface CommonColorContext {\n  color: Color\n}\n\nexport const ROOT_COMMON_COLOR_INJECTION_KEY: InjectionKey<CommonColorContext> =\n  Symbol('colorCommonPickerKey')\nexport const colorPickerPanelContextKey: InjectionKey<ColorPickerPanelContext> =\n  Symbol('colorPickerPanelContextKey')\n"],"mappings":";;;;;;;;;;;AA2CA,MAAa,wBAAwBA,6BAAW;CAI9C,YAAY;EACV,MAAMC,iCAA8B,OAAO;EAC3C,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CAID,WAAW;CAIX,aAAa,EACX,MAAMA,iCAA6B,OAAO,EAC3C;CAID,UAAU;CAIV,WAAW,EACT,MAAMA,iCAAyB,MAAM,EACtC;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CACF,CAAU;AACX,MAAa,wBAAwB,GAClCC,oCAAsB,kCAAgC,IAAI,8BAAU,IAAI,EAC1E;AAoBD,MAAa,kCACX,OAAO,uBAAuB;AAChC,MAAa,6BACX,OAAO,6BAA6B"}
+{"version":3,"file":"color-picker-panel.js","names":["buildProps","definePropType","UPDATE_MODEL_EVENT"],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type {\n  ComputedRef,\n  ExtractPublicPropTypes,\n  InjectionKey,\n  StyleValue,\n} from 'vue'\nimport type { ColorFormats } from '@ctrl/tinycolor'\nimport type ColorPickerPanel from './color-picker-panel.vue'\nimport type Color from './utils/color'\n\ntype ClassObjectType = Record<string, boolean>\ntype ClassType = string | ClassObjectType | ClassType[]\n\nexport interface ColorPickerPanelProps {\n  /**\n   * @description binding value\n   */\n  modelValue?: string | null\n  /**\n   * @description whether the color picker is bordered\n   */\n  border?: boolean\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha?: boolean\n  /**\n   * @description color format of v-model\n   */\n  colorFormat?: ColorFormats\n  /**\n   * @description whether to disable the color picker\n   */\n  disabled?: boolean\n  /**\n   * @description predefined color options\n   */\n  predefine?: string[]\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n  /**\n   * @description class names will be passed to hue-slider\n   */\n  hueSliderClass?: ClassType\n  /**\n   * @description styles will be passed to hue-slider\n   */\n  hueSliderStyle?: StyleValue\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerPanelProps` instead.\n */\nexport const colorPickerPanelProps = buildProps({\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | null>(String),\n    default: undefined,\n  },\n  /**\n   * @description whether the color picker is bordered\n   */\n  border: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha: Boolean,\n  /**\n   * @description color format of v-model\n   */\n  colorFormat: {\n    type: definePropType<ColorFormats>(String),\n  },\n  /**\n   * @description whether to disable the color picker\n   */\n  disabled: Boolean,\n  /**\n   * @description predefined color options\n   */\n  predefine: {\n    type: definePropType<string[]>(Array),\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description class names will be passed to <hue-slider />\n   */\n  hueSliderClass: {\n    type: definePropType<ClassType>([String, Array, Object]),\n  },\n  /**\n   * @description styles will be passed to <hue-slider />\n   */\n  hueSliderStyle: {\n    type: definePropType<StyleValue>([String, Array, Object]),\n  },\n} as const)\nexport const colorPickerPanelEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerPanelProps` instead.\n */\nexport type ColorPickerPanelPropsPublic = ExtractPublicPropTypes<\n  typeof colorPickerPanelProps\n>\nexport type ColorPickerPanelEmits = typeof colorPickerPanelEmits\nexport type ColorPickerPanelInstance = InstanceType<typeof ColorPickerPanel> &\n  unknown\n\nexport interface ColorPickerPanelContext {\n  currentColor: ComputedRef<string>\n}\n\nexport interface CommonColorContext {\n  color: Color\n}\n\nexport const ROOT_COMMON_COLOR_INJECTION_KEY: InjectionKey<CommonColorContext> =\n  Symbol('colorCommonPickerKey')\nexport const colorPickerPanelContextKey: InjectionKey<ColorPickerPanelContext> =\n  Symbol('colorPickerPanelContextKey')\n"],"mappings":";;;;;;;;;;;AA2DA,MAAa,wBAAwBA,6BAAW;CAI9C,YAAY;EACV,MAAMC,iCAA8B,OAAO;EAC3C,SAAS;EACV;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CAID,WAAW;CAIX,aAAa,EACX,MAAMA,iCAA6B,OAAO,EAC3C;CAID,UAAU;CAIV,WAAW,EACT,MAAMA,iCAAyB,MAAM,EACtC;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,gBAAgB,EACd,MAAMA,iCAA0B;EAAC;EAAQ;EAAO;EAAO,CAAC,EACzD;CAID,gBAAgB,EACd,MAAMA,iCAA2B;EAAC;EAAQ;EAAO;EAAO,CAAC,EAC1D;CACF,CAAU;AACX,MAAa,wBAAwB,GAClCC,oCAAsB,kCAAgC,IAAI,8BAAU,IAAI,EAC1E;AAoBD,MAAa,kCACX,OAAO,uBAAuB;AAChC,MAAa,6BACX,OAAO,6BAA6B"}

package/lib/components/color-picker-panel/src/color-picker-panel.vue.d.ts

@@ -38,9 +38,9 @@ declare const __VLS_base: vue.DefineComponent<__VLS_WithDefaults<__VLS_TypeProps
 }>>> & {
   "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }, {
-  border: boolean;
   modelValue: string | null;
   validateEvent: boolean;
+  border: boolean;
   showAlpha: boolean;
 }, {}>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/lib/components/color-picker-panel/src/color-picker-panel.vue_vue_type_script_setup_true_lang.js

@@ -73,11 +73,17 @@ var color_picker_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("wrapper")) }, [(0, vue.createVNode)(require_hue_slider.default, {
 					ref_key: "hueRef",
 					ref: hueRef,
-					class: "hue-slider",
 					color: (0, vue.unref)(color),
 					vertical: "",
-					disabled: (0, vue.unref)(disabled)
-				}, null, 8, ["color", "disabled"]), (0, vue.createVNode)(require_sv_panel.default, {
+					disabled: (0, vue.unref)(disabled),
+					class: (0, vue.normalizeClass)(["hue-slider", __props.hueSliderClass]),
+					style: (0, vue.normalizeStyle)(__props.hueSliderStyle)
+				}, null, 8, [
+					"color",
+					"disabled",
+					"class",
+					"style"
+				]), (0, vue.createVNode)(require_sv_panel.default, {
 					ref_key: "svRef",
 					ref: svRef,
 					color: (0, vue.unref)(color),

package/lib/components/color-picker-panel/src/color-picker-panel.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), ns.is('disabled', disabled), ns.is('border', border)]\"\n    @focusout=\"handleFocusout\"\n  >\n    <div :class=\"ns.e('wrapper')\">\n      <hue-slider\n        ref=\"hueRef\"\n        class=\"hue-slider\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\n      />\n      <sv-panel ref=\"svRef\" :color=\"color\" :disabled=\"disabled\" />\n    </div>\n    <alpha-slider\n      v-if=\"showAlpha\"\n      ref=\"alphaRef\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n    />\n    <predefine\n      v-if=\"predefine\"\n      ref=\"predefine\"\n      :enable-alpha=\"showAlpha\"\n      :color=\"color\"\n      :colors=\"predefine\"\n      :disabled=\"disabled\"\n    />\n    <div :class=\"ns.e('footer')\">\n      <el-input\n        ref=\"inputRef\"\n        v-model=\"customInput\"\n        :validate-event=\"false\"\n        size=\"small\"\n        :disabled=\"disabled\"\n        @change=\"handleConfirm\"\n      />\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, provide, ref, watch } from 'vue'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormDisabled, useFormItem } from '@element-plus/components/form'\nimport { useNamespace } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport {\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelContextKey,\n  colorPickerPanelEmits,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { ColorPickerPanelProps } from './color-picker-panel'\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = withDefaults(defineProps<ColorPickerPanelProps>(), {\n  modelValue: undefined,\n  border: true,\n  validateEvent: true,\n  showAlpha: false,\n})\nconst emit = defineEmits(colorPickerPanelEmits)\n\nconst ns = useNamespace('color-picker-panel')\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled()\nconst hueRef = ref<InstanceType<typeof HueSlider>>()\nconst svRef = ref<InstanceType<typeof SvPanel>>()\nconst alphaRef = ref<InstanceType<typeof AlphaSlider>>()\nconst inputRef = ref<InputInstance>()\nconst customInput = ref('')\n\nconst { color } = inject(\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  () => useCommonColor(props, emit),\n  true\n)\n\nfunction handleConfirm() {\n  color.fromString(customInput.value)\n  if (color.value !== customInput.value) {\n    customInput.value = color.value\n  }\n}\n\nfunction handleFocusout() {\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch((err) => debugWarn(err))\n  }\n}\n\nfunction update() {\n  hueRef.value?.update()\n  svRef.value?.update()\n  alphaRef.value?.update()\n}\n\nonMounted(() => {\n  if (props.modelValue) {\n    customInput.value = color.value\n  }\n  nextTick(update)\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (newVal !== color.value) {\n      newVal ? color.fromString(newVal) : color.clear()\n    }\n  }\n)\n\nwatch(\n  () => color.value,\n  (val) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    customInput.value = val\n    if (props.validateEvent) {\n      formItem?.validate('change').catch((err) => debugWarn(err))\n    }\n  }\n)\n\nprovide(colorPickerPanelContextKey, {\n  currentColor: computed(() => color.value),\n})\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description custom input ref\n   */\n  inputRef,\n  /**\n   * @description update sub components\n   */\n  update,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAmEA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,KAAK,2BAAa,qBAAoB;EAC5C,MAAM,EAAE,aAAa,mCAAY;EACjC,MAAM,WAAW,+CAAgB;EACjC,MAAM,uBAA6C;EACnD,MAAM,sBAA0C;EAChD,MAAM,yBAAiD;EACvD,MAAM,yBAA8B;EACpC,MAAM,2BAAkB,GAAE;EAE1B,MAAM,EAAE,0BACN,kEACM,wCAAe,OAAO,KAAK,EACjC,KACF;EAEA,SAAS,gBAAgB;AACvB,SAAM,WAAW,YAAY,MAAK;AAClC,OAAI,MAAM,UAAU,YAAY,MAC9B,aAAY,QAAQ,MAAM;;EAI9B,SAAS,iBAAiB;AACxB,OAAI,MAAM,cACR,WAAU,WAAW,OAAO,CAAC,OAAO,QAAQ,wBAAU,IAAI,CAAA;;EAI9D,SAAS,SAAS;AAChB,UAAO,OAAO,QAAO;AACrB,SAAM,OAAO,QAAO;AACpB,YAAS,OAAO,QAAO;;AAGzB,2BAAgB;AACd,OAAI,MAAM,WACR,aAAY,QAAQ,MAAM;AAE5B,qBAAS,OAAM;IAChB;AAED,uBACQ,MAAM,aACX,WAAW;AACV,OAAI,WAAW,MAAM,MACnB,UAAS,MAAM,WAAW,OAAO,GAAG,MAAM,OAAM;IAGtD;AAEA,uBACQ,MAAM,QACX,QAAQ;AACP,QAAK,kCAAoB,IAAG;AAC5B,eAAY,QAAQ;AACpB,OAAI,MAAM,cACR,WAAU,SAAS,SAAS,CAAC,OAAO,QAAQ,wBAAU,IAAI,CAAA;IAGhE;AAEA,mBAAQ,uDAA4B,EAClC,sCAA6B,MAAM,MAAM,EAC1C,CAAA;AAED,WAAa;GAIX;GAIA;GAIA;GACD,CAAA;;4DAjHO,OAAA;IAtCH,+BAAK;oBAAG,GAAE,CAAC,GAAC;oBAAI,GAAE,CAAC,GAAE,2BAAa,SAAQ,CAAA;oBAAG,GAAE,CAAC,GAAE,UAAW,QAAA,OAAM;KAAA,CAAA;IACnE,YAAU;;gCAWL,OAAA,EATA,8CAAO,GAAE,CAAC,EAAC,UAAA,CAAA,0BAOb,4BAAA;cALI;KAAJ,KAAI;KACJ,OAAM;KACL,sBAAO,MAAK;KACb,UAAA;KACC,yBAAU,SAAA;6DAE+C,0BAAA;cAA9C;KAAJ,KAAI;KAAS,sBAAO,MAAK;KAAG,yBAAU,SAAA;;IAG1C,QAAA,wDAIN,8BAAA;;cAHI;KAAJ,KAAI;KACH,sBAAO,MAAK;KACZ,yBAAU,SAAA;;IAGL,QAAA,wDAMN,2BAAA;;KALA,KAAI;KACH,gBAAc,QAAA;KACd,sBAAO,MAAK;KACZ,QAAQ,QAAA;KACR,yBAAU,SAAA;;;;;;;gCAYP,OAAA,EAVA,8CAAO,GAAE,CAAC,EAAC,SAAA,CAAA,yCAQb,wBAAA,EAAA;cANI;KAAJ,KAAI;iBACK,YAAA;kEAAA,YAAW,QAAA;KACnB,kBAAgB;KACjB,MAAK;KACJ,yBAAU,SAAQ;KAClB,UAAQ;iEAEW,KAAA,QAAA,SAAA"}
+{"version":3,"file":"color-picker-panel.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), ns.is('disabled', disabled), ns.is('border', border)]\"\n    @focusout=\"handleFocusout\"\n  >\n    <div :class=\"ns.e('wrapper')\">\n      <hue-slider\n        ref=\"hueRef\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\n        :class=\"['hue-slider', hueSliderClass]\"\n        :style=\"hueSliderStyle\"\n      />\n      <sv-panel ref=\"svRef\" :color=\"color\" :disabled=\"disabled\" />\n    </div>\n    <alpha-slider\n      v-if=\"showAlpha\"\n      ref=\"alphaRef\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n    />\n    <predefine\n      v-if=\"predefine\"\n      ref=\"predefine\"\n      :enable-alpha=\"showAlpha\"\n      :color=\"color\"\n      :colors=\"predefine\"\n      :disabled=\"disabled\"\n    />\n    <div :class=\"ns.e('footer')\">\n      <el-input\n        ref=\"inputRef\"\n        v-model=\"customInput\"\n        :validate-event=\"false\"\n        size=\"small\"\n        :disabled=\"disabled\"\n        @change=\"handleConfirm\"\n      />\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, provide, ref, watch } from 'vue'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormDisabled, useFormItem } from '@element-plus/components/form'\nimport { useNamespace } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport {\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelContextKey,\n  colorPickerPanelEmits,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { ColorPickerPanelProps } from './color-picker-panel'\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = withDefaults(defineProps<ColorPickerPanelProps>(), {\n  modelValue: undefined,\n  border: true,\n  validateEvent: true,\n  showAlpha: false,\n})\nconst emit = defineEmits(colorPickerPanelEmits)\n\nconst ns = useNamespace('color-picker-panel')\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled()\nconst hueRef = ref<InstanceType<typeof HueSlider>>()\nconst svRef = ref<InstanceType<typeof SvPanel>>()\nconst alphaRef = ref<InstanceType<typeof AlphaSlider>>()\nconst inputRef = ref<InputInstance>()\nconst customInput = ref('')\n\nconst { color } = inject(\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  () => useCommonColor(props, emit),\n  true\n)\n\nfunction handleConfirm() {\n  color.fromString(customInput.value)\n  if (color.value !== customInput.value) {\n    customInput.value = color.value\n  }\n}\n\nfunction handleFocusout() {\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch((err) => debugWarn(err))\n  }\n}\n\nfunction update() {\n  hueRef.value?.update()\n  svRef.value?.update()\n  alphaRef.value?.update()\n}\n\nonMounted(() => {\n  if (props.modelValue) {\n    customInput.value = color.value\n  }\n  nextTick(update)\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (newVal !== color.value) {\n      newVal ? color.fromString(newVal) : color.clear()\n    }\n  }\n)\n\nwatch(\n  () => color.value,\n  (val) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    customInput.value = val\n    if (props.validateEvent) {\n      formItem?.validate('change').catch((err) => debugWarn(err))\n    }\n  }\n)\n\nprovide(colorPickerPanelContextKey, {\n  currentColor: computed(() => color.value),\n})\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description custom input ref\n   */\n  inputRef,\n  /**\n   * @description update sub components\n   */\n  update,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAoEA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,KAAK,2BAAa,qBAAoB;EAC5C,MAAM,EAAE,aAAa,mCAAY;EACjC,MAAM,WAAW,+CAAgB;EACjC,MAAM,uBAA6C;EACnD,MAAM,sBAA0C;EAChD,MAAM,yBAAiD;EACvD,MAAM,yBAA8B;EACpC,MAAM,2BAAkB,GAAE;EAE1B,MAAM,EAAE,0BACN,kEACM,wCAAe,OAAO,KAAK,EACjC,KACF;EAEA,SAAS,gBAAgB;AACvB,SAAM,WAAW,YAAY,MAAK;AAClC,OAAI,MAAM,UAAU,YAAY,MAC9B,aAAY,QAAQ,MAAM;;EAI9B,SAAS,iBAAiB;AACxB,OAAI,MAAM,cACR,WAAU,WAAW,OAAO,CAAC,OAAO,QAAQ,wBAAU,IAAI,CAAA;;EAI9D,SAAS,SAAS;AAChB,UAAO,OAAO,QAAO;AACrB,SAAM,OAAO,QAAO;AACpB,YAAS,OAAO,QAAO;;AAGzB,2BAAgB;AACd,OAAI,MAAM,WACR,aAAY,QAAQ,MAAM;AAE5B,qBAAS,OAAM;IAChB;AAED,uBACQ,MAAM,aACX,WAAW;AACV,OAAI,WAAW,MAAM,MACnB,UAAS,MAAM,WAAW,OAAO,GAAG,MAAM,OAAM;IAGtD;AAEA,uBACQ,MAAM,QACX,QAAQ;AACP,QAAK,kCAAoB,IAAG;AAC5B,eAAY,QAAQ;AACpB,OAAI,MAAM,cACR,WAAU,SAAS,SAAS,CAAC,OAAO,QAAQ,wBAAU,IAAI,CAAA;IAGhE;AAEA,mBAAQ,uDAA4B,EAClC,sCAA6B,MAAM,MAAM,EAC1C,CAAA;AAED,WAAa;GAIX;GAIA;GAIA;GACD,CAAA;;4DAjHO,OAAA;IAvCH,+BAAK;oBAAG,GAAE,CAAC,GAAC;oBAAI,GAAE,CAAC,GAAE,2BAAa,SAAQ,CAAA;oBAAG,GAAE,CAAC,GAAE,UAAW,QAAA,OAAM;KAAA,CAAA;IACnE,YAAU;;gCAYL,OAAA,EAVA,8CAAO,GAAE,CAAC,EAAC,UAAA,CAAA,0BAQb,4BAAA;cANI;KAAJ,KAAI;KACH,sBAAO,MAAK;KACb,UAAA;KACC,yBAAU,SAAQ;KAClB,+BAAK,CAAA,cAAiB,QAAA,eAAc,CAAA;KACpC,+BAAO,QAAA,eAAc;;;;;;6BAEoC,0BAAA;cAA9C;KAAJ,KAAI;KAAS,sBAAO,MAAK;KAAG,yBAAU,SAAA;;IAG1C,QAAA,wDAIN,8BAAA;;cAHI;KAAJ,KAAI;KACH,sBAAO,MAAK;KACZ,yBAAU,SAAA;;IAGL,QAAA,wDAMN,2BAAA;;KALA,KAAI;KACH,gBAAc,QAAA;KACd,sBAAO,MAAK;KACZ,QAAQ,QAAA;KACR,yBAAU,SAAA;;;;;;;gCAYP,OAAA,EAVA,8CAAO,GAAE,CAAC,EAAC,SAAA,CAAA,yCAQb,wBAAA,EAAA;cANI;KAAJ,KAAI;iBACK,YAAA;kEAAA,YAAW,QAAA;KACnB,kBAAgB;KACjB,MAAK;KACJ,yBAAU,SAAQ;KAClB,UAAQ;iEAEW,KAAA,QAAA,SAAA"}

package/lib/components/color-picker-panel/src/color-picker-panel2.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel2.js","names":[],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), ns.is('disabled', disabled), ns.is('border', border)]\"\n    @focusout=\"handleFocusout\"\n  >\n    <div :class=\"ns.e('wrapper')\">\n      <hue-slider\n        ref=\"hueRef\"\n        class=\"hue-slider\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\n      />\n      <sv-panel ref=\"svRef\" :color=\"color\" :disabled=\"disabled\" />\n    </div>\n    <alpha-slider\n      v-if=\"showAlpha\"\n      ref=\"alphaRef\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n    />\n    <predefine\n      v-if=\"predefine\"\n      ref=\"predefine\"\n      :enable-alpha=\"showAlpha\"\n      :color=\"color\"\n      :colors=\"predefine\"\n      :disabled=\"disabled\"\n    />\n    <div :class=\"ns.e('footer')\">\n      <el-input\n        ref=\"inputRef\"\n        v-model=\"customInput\"\n        :validate-event=\"false\"\n        size=\"small\"\n        :disabled=\"disabled\"\n        @change=\"handleConfirm\"\n      />\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, provide, ref, watch } from 'vue'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormDisabled, useFormItem } from '@element-plus/components/form'\nimport { useNamespace } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport {\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelContextKey,\n  colorPickerPanelEmits,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { ColorPickerPanelProps } from './color-picker-panel'\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = withDefaults(defineProps<ColorPickerPanelProps>(), {\n  modelValue: undefined,\n  border: true,\n  validateEvent: true,\n  showAlpha: false,\n})\nconst emit = defineEmits(colorPickerPanelEmits)\n\nconst ns = useNamespace('color-picker-panel')\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled()\nconst hueRef = ref<InstanceType<typeof HueSlider>>()\nconst svRef = ref<InstanceType<typeof SvPanel>>()\nconst alphaRef = ref<InstanceType<typeof AlphaSlider>>()\nconst inputRef = ref<InputInstance>()\nconst customInput = ref('')\n\nconst { color } = inject(\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  () => useCommonColor(props, emit),\n  true\n)\n\nfunction handleConfirm() {\n  color.fromString(customInput.value)\n  if (color.value !== customInput.value) {\n    customInput.value = color.value\n  }\n}\n\nfunction handleFocusout() {\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch((err) => debugWarn(err))\n  }\n}\n\nfunction update() {\n  hueRef.value?.update()\n  svRef.value?.update()\n  alphaRef.value?.update()\n}\n\nonMounted(() => {\n  if (props.modelValue) {\n    customInput.value = color.value\n  }\n  nextTick(update)\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (newVal !== color.value) {\n      newVal ? color.fromString(newVal) : color.clear()\n    }\n  }\n)\n\nwatch(\n  () => color.value,\n  (val) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    customInput.value = val\n    if (props.validateEvent) {\n      formItem?.validate('change').catch((err) => debugWarn(err))\n    }\n  }\n)\n\nprovide(colorPickerPanelContextKey, {\n  currentColor: computed(() => color.value),\n})\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description custom input ref\n   */\n  inputRef,\n  /**\n   * @description update sub components\n   */\n  update,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"color-picker-panel2.js","names":[],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), ns.is('disabled', disabled), ns.is('border', border)]\"\n    @focusout=\"handleFocusout\"\n  >\n    <div :class=\"ns.e('wrapper')\">\n      <hue-slider\n        ref=\"hueRef\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\n        :class=\"['hue-slider', hueSliderClass]\"\n        :style=\"hueSliderStyle\"\n      />\n      <sv-panel ref=\"svRef\" :color=\"color\" :disabled=\"disabled\" />\n    </div>\n    <alpha-slider\n      v-if=\"showAlpha\"\n      ref=\"alphaRef\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n    />\n    <predefine\n      v-if=\"predefine\"\n      ref=\"predefine\"\n      :enable-alpha=\"showAlpha\"\n      :color=\"color\"\n      :colors=\"predefine\"\n      :disabled=\"disabled\"\n    />\n    <div :class=\"ns.e('footer')\">\n      <el-input\n        ref=\"inputRef\"\n        v-model=\"customInput\"\n        :validate-event=\"false\"\n        size=\"small\"\n        :disabled=\"disabled\"\n        @change=\"handleConfirm\"\n      />\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, provide, ref, watch } from 'vue'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormDisabled, useFormItem } from '@element-plus/components/form'\nimport { useNamespace } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport {\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelContextKey,\n  colorPickerPanelEmits,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { ColorPickerPanelProps } from './color-picker-panel'\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = withDefaults(defineProps<ColorPickerPanelProps>(), {\n  modelValue: undefined,\n  border: true,\n  validateEvent: true,\n  showAlpha: false,\n})\nconst emit = defineEmits(colorPickerPanelEmits)\n\nconst ns = useNamespace('color-picker-panel')\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled()\nconst hueRef = ref<InstanceType<typeof HueSlider>>()\nconst svRef = ref<InstanceType<typeof SvPanel>>()\nconst alphaRef = ref<InstanceType<typeof AlphaSlider>>()\nconst inputRef = ref<InputInstance>()\nconst customInput = ref('')\n\nconst { color } = inject(\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  () => useCommonColor(props, emit),\n  true\n)\n\nfunction handleConfirm() {\n  color.fromString(customInput.value)\n  if (color.value !== customInput.value) {\n    customInput.value = color.value\n  }\n}\n\nfunction handleFocusout() {\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch((err) => debugWarn(err))\n  }\n}\n\nfunction update() {\n  hueRef.value?.update()\n  svRef.value?.update()\n  alphaRef.value?.update()\n}\n\nonMounted(() => {\n  if (props.modelValue) {\n    customInput.value = color.value\n  }\n  nextTick(update)\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (newVal !== color.value) {\n      newVal ? color.fromString(newVal) : color.clear()\n    }\n  }\n)\n\nwatch(\n  () => color.value,\n  (val) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    customInput.value = val\n    if (props.validateEvent) {\n      formItem?.validate('change').catch((err) => debugWarn(err))\n    }\n  }\n)\n\nprovide(colorPickerPanelContextKey, {\n  currentColor: computed(() => color.value),\n})\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description custom input ref\n   */\n  inputRef,\n  /**\n   * @description update sub components\n   */\n  update,\n})\n</script>\n"],"mappings":""}

package/lib/components/config-provider/src/config-provider.d.ts

@@ -139,10 +139,10 @@ declare const ConfigProvider: vue.DefineComponent<{
     __epPropKey: true;
   };
 }>>, {
+  readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | ((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null))[], unknown, unknown>;
   readonly a11y: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly keyboardNavigation: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly namespace: string;
-  readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | ((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null))[], unknown, unknown>;
 }, {}>;
 type ConfigProviderInstance = InstanceType<typeof ConfigProvider> & unknown;
 //#endregion