@element-plus/nightly 0.0.20260720 → 0.0.20260721

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

@@ -7,19 +7,19 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<CheckboxProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (val: CheckboxValueType) => void;
   "update:modelValue": (val: CheckboxValueType) => void;
+  change: (val: CheckboxValueType) => void;
 }, string, _$vue.PublicProps, Readonly<CheckboxProps> & Readonly<{
-  onChange?: ((val: CheckboxValueType) => any) | undefined;
   "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+  onChange?: ((val: CheckboxValueType) => any) | undefined;
 }>, {
-  id: string;
+  modelValue: number | string | boolean;
   disabled: boolean;
+  validateEvent: boolean;
   name: string;
-  label: string | boolean | number | object;
+  id: string;
   value: string | boolean | number | object;
-  validateEvent: boolean;
-  modelValue: number | string | boolean;
+  label: string | boolean | number | object;
   trueValue: string | number;
   falseValue: string | number;
   trueLabel: string | number;

package/es/components/checkbox/src/composables/use-checkbox-status.d.ts

@@ -7,10 +7,10 @@ import { ComponentInternalInstance } from "vue";
 declare const useCheckboxStatus: (props: CheckboxProps, slots: ComponentInternalInstance["slots"], {
   model
 }: Pick<CheckboxModel, "model">) => {
-  checkboxButtonSize: _$vue.ComputedRef<"" | "default" | "small" | "large">;
+  checkboxButtonSize: _$vue.ComputedRef<"" | "small" | "default" | "large">;
   isChecked: _$vue.ComputedRef<boolean>;
   isFocused: _$vue.Ref<boolean, boolean>;
-  checkboxSize: _$vue.ComputedRef<"" | "default" | "small" | "large">;
+  checkboxSize: _$vue.ComputedRef<"" | "small" | "default" | "large">;
   hasOwnLabel: _$vue.ComputedRef<boolean>;
   actualValue: _$vue.ComputedRef<string | number | boolean | object | undefined>;
 };

package/es/components/checkbox/src/composables/use-checkbox.d.ts

@@ -9,8 +9,8 @@ declare const useCheckbox: (props: CheckboxProps, slots: ComponentInternalInstan
   isChecked: _$vue.ComputedRef<boolean>;
   isDisabled: _$vue.ComputedRef<boolean>;
   isFocused: _$vue.Ref<boolean, boolean>;
-  checkboxButtonSize: _$vue.ComputedRef<"" | "default" | "small" | "large">;
-  checkboxSize: _$vue.ComputedRef<"" | "default" | "small" | "large">;
+  checkboxButtonSize: _$vue.ComputedRef<"" | "small" | "default" | "large">;
+  checkboxSize: _$vue.ComputedRef<"" | "small" | "default" | "large">;
   hasOwnLabel: _$vue.ComputedRef<boolean>;
   model: _$vue.WritableComputedRef<any, unknown>;
   actualValue: _$vue.ComputedRef<string | number | boolean | object | undefined>;

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

@@ -7,8 +7,8 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ColProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColProps> & Readonly<{}>, {
-  offset: number;
   push: number;
+  offset: number;
   span: number;
   tag: string;
   pull: number;

package/es/components/collapse/src/collapse-item.vue.d.ts

@@ -18,8 +18,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: _$vue.DefineComponent<CollapseItemProps, {
   /** @description current collapse-item whether active */isActive: _$vue.ComputedRef<boolean | undefined>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<CollapseItemProps> & Readonly<{}>, {
-  title: string;
   icon: IconPropType;
+  title: string;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/es/components/collapse/src/collapse.d.ts

@@ -32,7 +32,7 @@ interface CollapseProps {
 declare const collapseProps: {
   readonly accordion: BooleanConstructor;
   readonly modelValue: EpPropFinalized<(new (...args: any[]) => string | number | CollapseActiveName[]) | (() => CollapseModelValue) | (((new (...args: any[]) => string | number | CollapseActiveName[]) | (() => CollapseModelValue)) | null)[], unknown, unknown, () => [], boolean>;
-  readonly expandIconPosition: EpPropFinalized<(new (...args: any[]) => "right" | "left") | (() => CollapseIconPositionType) | (((new (...args: any[]) => "right" | "left") | (() => CollapseIconPositionType)) | null)[], unknown, unknown, "right", boolean>;
+  readonly expandIconPosition: EpPropFinalized<(new (...args: any[]) => "left" | "right") | (() => CollapseIconPositionType) | (((new (...args: any[]) => "left" | "right") | (() => CollapseIconPositionType)) | null)[], unknown, unknown, "right", boolean>;
   readonly beforeCollapse: {
     readonly type: _$vue.PropType<(name: CollapseActiveName) => Awaitable<boolean>>;
     readonly required: false;

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

@@ -13,8 +13,8 @@ declare const __VLS_base: _$vue.DefineComponent<CollapseProps, {
   "update:modelValue": (value: CollapseModelValue) => void;
   change: (value: CollapseModelValue) => void;
 }, string, _$vue.PublicProps, Readonly<CollapseProps> & Readonly<{
-  onChange?: ((value: CollapseModelValue) => any) | undefined;
   "onUpdate:modelValue"?: ((value: CollapseModelValue) => any) | undefined;
+  onChange?: ((value: CollapseModelValue) => any) | undefined;
 }>, {
   modelValue: CollapseModelValue;
   expandIconPosition: CollapseIconPositionType;

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

@@ -1,5 +1,6 @@
 import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
 import { ComponentSize } from "../../../constants/size.js";
+import { ClassValue } from "../../../utils/typescript.js";
 import { ElTooltipContentProps } from "../../tooltip/src/content.js";
 import _default from "./color-picker.vue.js";
 import { UseEmptyValuesProps } from "../../../hooks/use-empty-values/index.js";
@@ -83,7 +84,7 @@ declare const colorPickerProps: {
   readonly id: StringConstructor;
   readonly showAlpha: BooleanConstructor;
   readonly colorFormat: {
-    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats) | (((new (...args: any[]) => "name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats)) | null)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "name" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats) | (((new (...args: any[]) => "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "name" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats)) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -91,113 +92,12 @@ declare const colorPickerProps: {
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly clearable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
-  readonly popperClass: {
-    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | /*elided*/any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | /*elided*/any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | /*elided*/any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | (string | {
-      [x: string]: boolean;
-    } | /*elided*/any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
+  readonly popperClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | _$vue.StyleValue[]) | (() => _$vue.StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | _$vue.StyleValue[]) | (() => _$vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly tabindex: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
   readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -237,6 +137,7 @@ declare const colorPickerPropsDefaults: {
   readonly modelValue: undefined;
   readonly disabled: undefined;
   readonly clearable: true;
+  readonly popperClass: undefined;
   readonly popperStyle: undefined;
   readonly tabindex: 0;
   readonly teleported: true;

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

@@ -108,6 +108,7 @@ const colorPickerPropsDefaults = {
 	modelValue: void 0,
 	disabled: void 0,
 	clearable: true,
+	popperClass: void 0,
 	popperStyle: void 0,
 	tabindex: 0,
 	teleported: true,

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker.mjs","names":[],"sources":["../../../../../../packages/components/color-picker/src/color-picker.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport {\n  useAriaProps,\n  useEmptyValuesProps,\n  useSizeProp,\n} from '@element-plus/hooks'\nimport { useTooltipContentProps } from '@element-plus/components/tooltip'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { ColorFormats } from '@ctrl/tinycolor'\nimport type ColorPicker from './color-picker.vue'\nimport type { AriaProps, UseEmptyValuesProps } from '@element-plus/hooks'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { ElTooltipContentProps } from '@element-plus/components/tooltip'\n\nexport interface ColorPickerProps\n  extends UseEmptyValuesProps, Pick<AriaProps, 'ariaLabel'> {\n  /**\n   * @description when color-picker inactive and persistent is false, the color panel will be destroyed\n   */\n  persistent?: boolean\n  /**\n   * @description binding value\n   */\n  modelValue?: string | null\n  /**\n   * @description ColorPicker id\n   */\n  id?: string\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 ColorPicker\n   */\n  disabled?: boolean\n  /**\n   * @description whether to show clear button\n   */\n  clearable?: boolean\n  /**\n   * @description size of ColorPicker\n   */\n  size?: ComponentSize\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass?: ElTooltipContentProps['popperClass']\n  /**\n   * @description custom style for ColorPicker's dropdown\n   */\n  popperStyle?: ElTooltipContentProps['popperStyle']\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex?: string | number\n  /**\n   * @description whether color-picker popper is teleported to the body\n   */\n  teleported?: ElTooltipContentProps['teleported']\n  /**\n   * @description which color-picker panel appends to\n   */\n  appendTo?: ElTooltipContentProps['appendTo']\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 `ColorPickerProps` instead.\n */\nexport const colorPickerProps = buildProps({\n  /**\n   * @description when color-picker inactive and persistent is false, the color panel will be destroyed\n   */\n  persistent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | null>(String),\n    default: undefined,\n  },\n  /**\n   * @description ColorPicker id\n   */\n  id: String,\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 ColorPicker\n   */\n  disabled: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description whether to show clear button\n   */\n  clearable: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description size of ColorPicker\n   */\n  size: useSizeProp,\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass: useTooltipContentProps.popperClass,\n  /**\n   * @description custom style for ColorPicker's dropdown\n   */\n  popperStyle: useTooltipContentProps.popperStyle,\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: 0,\n  },\n  /**\n   * @description whether color-picker popper is teleported to the body\n   */\n  teleported: useTooltipContentProps.teleported,\n  /**\n   * @description which color-picker panel appends to\n   */\n  appendTo: useTooltipContentProps.appendTo,\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  ...useEmptyValuesProps,\n  ...useAriaProps(['ariaLabel']),\n} as const)\nexport const colorPickerEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),\n  [CHANGE_EVENT]: (val: string | null) => isString(val) || isNil(val),\n  activeChange: (val: string | null) => isString(val) || isNil(val),\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: () => true,\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerProps` instead.\n */\nexport type ColorPickerPropsPublic = ExtractPublicPropTypes<\n  typeof colorPickerProps\n>\nexport type ColorPickerEmits = typeof colorPickerEmits\nexport type ColorPickerInstance = InstanceType<typeof ColorPicker> & unknown\n\n/**\n * @description default values for ColorPickerProps, used in components that extend ColorPickerProps\n */\nexport const colorPickerPropsDefaults = {\n  persistent: true,\n  modelValue: undefined,\n  disabled: undefined,\n  clearable: true,\n  popperStyle: undefined,\n  tabindex: 0,\n  teleported: true,\n  validateEvent: true,\n  valueOnClear: undefined,\n} as const\n"],"mappings":";;;;;;;;;;;;AAoFA,MAAa,mBAAmB,WAAW;;;;CAIzC,YAAY;EACV,MAAM;EACN,SAAS;EACV;;;;CAID,YAAY;EACV,MAAM,eAA8B,OAAO;EAC3C,SAAS,KAAA;EACV;;;;CAID,IAAI;;;;CAIJ,WAAW;;;;CAIX,aAAa,EACX,MAAM,eAA6B,OAAO,EAC3C;;;;CAID,UAAU;EACR,MAAM;EACN,SAAS,KAAA;EACV;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,MAAM;;;;CAIN,aAAa,uBAAuB;;;;CAIpC,aAAa,uBAAuB;;;;CAIpC,UAAU;EACR,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;;;;CAID,YAAY,uBAAuB;;;;CAInC,UAAU,uBAAuB;;;;CAIjC,WAAW,EACT,MAAM,eAAyB,MAAM,EACtC;;;;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CACD,GAAG;CACH,GAAG,aAAa,CAAC,YAAY,CAAC;CAC/B,CAAU;AACX,MAAa,mBAAmB;EAC7B,sBAAsB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;EACxE,gBAAgB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;CACnE,eAAe,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;CACjE,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC1C,aAAa;CACd;;;;AAcD,MAAa,2BAA2B;CACtC,YAAY;CACZ,YAAY,KAAA;CACZ,UAAU,KAAA;CACV,WAAW;CACX,aAAa,KAAA;CACb,UAAU;CACV,YAAY;CACZ,eAAe;CACf,cAAc,KAAA;CACf"}
+{"version":3,"file":"color-picker.mjs","names":[],"sources":["../../../../../../packages/components/color-picker/src/color-picker.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport {\n  useAriaProps,\n  useEmptyValuesProps,\n  useSizeProp,\n} from '@element-plus/hooks'\nimport { useTooltipContentProps } from '@element-plus/components/tooltip'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { ColorFormats } from '@ctrl/tinycolor'\nimport type ColorPicker from './color-picker.vue'\nimport type { AriaProps, UseEmptyValuesProps } from '@element-plus/hooks'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { ElTooltipContentProps } from '@element-plus/components/tooltip'\n\nexport interface ColorPickerProps\n  extends UseEmptyValuesProps, Pick<AriaProps, 'ariaLabel'> {\n  /**\n   * @description when color-picker inactive and persistent is false, the color panel will be destroyed\n   */\n  persistent?: boolean\n  /**\n   * @description binding value\n   */\n  modelValue?: string | null\n  /**\n   * @description ColorPicker id\n   */\n  id?: string\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 ColorPicker\n   */\n  disabled?: boolean\n  /**\n   * @description whether to show clear button\n   */\n  clearable?: boolean\n  /**\n   * @description size of ColorPicker\n   */\n  size?: ComponentSize\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass?: ElTooltipContentProps['popperClass']\n  /**\n   * @description custom style for ColorPicker's dropdown\n   */\n  popperStyle?: ElTooltipContentProps['popperStyle']\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex?: string | number\n  /**\n   * @description whether color-picker popper is teleported to the body\n   */\n  teleported?: ElTooltipContentProps['teleported']\n  /**\n   * @description which color-picker panel appends to\n   */\n  appendTo?: ElTooltipContentProps['appendTo']\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 `ColorPickerProps` instead.\n */\nexport const colorPickerProps = buildProps({\n  /**\n   * @description when color-picker inactive and persistent is false, the color panel will be destroyed\n   */\n  persistent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | null>(String),\n    default: undefined,\n  },\n  /**\n   * @description ColorPicker id\n   */\n  id: String,\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 ColorPicker\n   */\n  disabled: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description whether to show clear button\n   */\n  clearable: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description size of ColorPicker\n   */\n  size: useSizeProp,\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass: useTooltipContentProps.popperClass,\n  /**\n   * @description custom style for ColorPicker's dropdown\n   */\n  popperStyle: useTooltipContentProps.popperStyle,\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: 0,\n  },\n  /**\n   * @description whether color-picker popper is teleported to the body\n   */\n  teleported: useTooltipContentProps.teleported,\n  /**\n   * @description which color-picker panel appends to\n   */\n  appendTo: useTooltipContentProps.appendTo,\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  ...useEmptyValuesProps,\n  ...useAriaProps(['ariaLabel']),\n} as const)\nexport const colorPickerEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),\n  [CHANGE_EVENT]: (val: string | null) => isString(val) || isNil(val),\n  activeChange: (val: string | null) => isString(val) || isNil(val),\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: () => true,\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerProps` instead.\n */\nexport type ColorPickerPropsPublic = ExtractPublicPropTypes<\n  typeof colorPickerProps\n>\nexport type ColorPickerEmits = typeof colorPickerEmits\nexport type ColorPickerInstance = InstanceType<typeof ColorPicker> & unknown\n\n/**\n * @description default values for ColorPickerProps, used in components that extend ColorPickerProps\n */\nexport const colorPickerPropsDefaults = {\n  persistent: true,\n  modelValue: undefined,\n  disabled: undefined,\n  clearable: true,\n  popperClass: undefined,\n  popperStyle: undefined,\n  tabindex: 0,\n  teleported: true,\n  validateEvent: true,\n  valueOnClear: undefined,\n} as const\n"],"mappings":";;;;;;;;;;;;AAoFA,MAAa,mBAAmB,WAAW;;;;CAIzC,YAAY;EACV,MAAM;EACN,SAAS;EACV;;;;CAID,YAAY;EACV,MAAM,eAA8B,OAAO;EAC3C,SAAS,KAAA;EACV;;;;CAID,IAAI;;;;CAIJ,WAAW;;;;CAIX,aAAa,EACX,MAAM,eAA6B,OAAO,EAC3C;;;;CAID,UAAU;EACR,MAAM;EACN,SAAS,KAAA;EACV;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,MAAM;;;;CAIN,aAAa,uBAAuB;;;;CAIpC,aAAa,uBAAuB;;;;CAIpC,UAAU;EACR,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;;;;CAID,YAAY,uBAAuB;;;;CAInC,UAAU,uBAAuB;;;;CAIjC,WAAW,EACT,MAAM,eAAyB,MAAM,EACtC;;;;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CACD,GAAG;CACH,GAAG,aAAa,CAAC,YAAY,CAAC;CAC/B,CAAU;AACX,MAAa,mBAAmB;EAC7B,sBAAsB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;EACxE,gBAAgB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;CACnE,eAAe,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;CACjE,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC1C,aAAa;CACd;;;;AAcD,MAAa,2BAA2B;CACtC,YAAY;CACZ,YAAY,KAAA;CACZ,UAAU,KAAA;CACV,WAAW;CACX,aAAa,KAAA;CACb,aAAa,KAAA;CACb,UAAU;CACV,YAAY;CACZ,eAAe;CACf,cAAc,KAAA;CACf"}

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

@@ -1,3 +1,4 @@
+import { ClassValue } from "../../../utils/typescript.js";
 import Color from "../../color-picker-panel/src/utils/color.js";
 import { ColorPickerProps } from "./color-picker.js";
 import * as _$vue from "vue";
@@ -29,29 +30,30 @@ declare const __VLS_export: _$vue.DefineComponent<ColorPickerProps, {
    */
   blur: typeof blur;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  blur: (evt: FocusEvent) => void;
+  "update:modelValue": (val: string | null) => void;
   focus: (evt: FocusEvent) => void;
+  blur: (evt: FocusEvent) => void;
   clear: () => void;
-  "update:modelValue": (val: string | null) => void;
   change: (val: string | null) => void;
   activeChange: (val: string | null) => void;
 }, string, _$vue.PublicProps, Readonly<ColorPickerProps> & Readonly<{
+  "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
   onChange?: ((val: string | null) => any) | undefined;
-  onBlur?: ((evt: FocusEvent) => any) | undefined;
   onFocus?: ((evt: FocusEvent) => any) | undefined;
+  onBlur?: ((evt: FocusEvent) => any) | undefined;
   onClear?: (() => any) | undefined;
-  "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
   onActiveChange?: ((val: string | null) => any) | undefined;
 }>, {
-  popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
-  teleported: boolean;
-  persistent: boolean;
+  modelValue: string | null;
   disabled: boolean;
-  clearable: boolean;
   validateEvent: boolean;
-  modelValue: string | null;
-  valueOnClear: string | number | boolean | Function | null;
+  clearable: boolean;
   tabindex: string | number;
+  persistent: boolean;
+  popperClass: string | false | Record<string, any> | ClassValue[] | null;
+  popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
+  teleported: boolean;
+  valueOnClear: string | number | boolean | Function | null;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

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

@@ -1,4 +1,5 @@
 import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
+import { ClassValue } from "../../../utils/typescript.js";
 import Color from "./utils/color.js";
 import _default from "./color-picker-panel.vue.js";
 import * as _$vue from "vue";
@@ -6,8 +7,6 @@ import { ComputedRef, ExtractPublicPropTypes, InjectionKey, StyleValue } from "v
 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
@@ -40,7 +39,7 @@ interface ColorPickerPanelProps {
   /**
    * @description class names will be passed to hue-slider
    */
-  hueSliderClass?: ClassType;
+  hueSliderClass?: ClassValue;
   /**
    * @description styles will be passed to hue-slider
    */
@@ -54,7 +53,7 @@ declare const colorPickerPanelProps: {
   readonly border: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly showAlpha: BooleanConstructor;
   readonly colorFormat: {
-    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats) | (((new (...args: any[]) => "name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats)) | null)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "name" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats) | (((new (...args: any[]) => "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "name" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats)) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -67,12 +66,7 @@ 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)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly hueSliderClass: EpPropFinalized<(new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue) | (((new (...args: any[]) => string | false | Record<string, any> | ClassValue[]) | (() => ClassValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly hueSliderStyle: EpPropFinalized<(new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | _$vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
 };
 declare const colorPickerPanelEmits: {

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

@@ -47,11 +47,15 @@ const colorPickerPanelProps = buildProps({
 	/**
 	* @description class names will be passed to <hue-slider />
 	*/
-	hueSliderClass: { type: definePropType([
-		String,
-		Array,
-		Object
-	]) },
+	hueSliderClass: {
+		type: definePropType([
+			String,
+			Array,
+			Object,
+			Boolean
+		]),
+		default: void 0
+	},
 	/**
 	* @description styles will be passed to <hue-slider />
 	*/

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel.mjs","names":[],"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, Boolean]),\n    default: undefined,\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,wBAAwB,WAAW;;;;CAI9C,YAAY;EACV,MAAM,eAA8B,OAAO;EAC3C,SAAS,KAAA;EACV;;;;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;;;;CAID,WAAW;;;;CAIX,aAAa,EACX,MAAM,eAA6B,OAAO,EAC3C;;;;CAID,UAAU;;;;CAIV,WAAW,EACT,MAAM,eAAyB,MAAM,EACtC;;;;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;;;;CAID,gBAAgB,EACd,MAAM,eAA0B;EAAC;EAAQ;EAAO;EAAO,CAAC,EACzD;;;;CAID,gBAAgB;EACd,MAAM,eAA2B;GAAC;GAAQ;GAAO;GAAQ;GAAQ,CAAC;EAClE,SAAS,KAAA;EACV;CACF,CAAU;AACX,MAAa,wBAAwB,GAClC,sBAAsB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI,EAC1E;AAoBD,MAAa,kCACX,OAAO,uBAAuB;AAChC,MAAa,6BACX,OAAO,6BAA6B"}
+{"version":3,"file":"color-picker-panel.mjs","names":[],"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 { ClassValue } from '@element-plus/utils'\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   * @description class names will be passed to hue-slider\n   */\n  hueSliderClass?: ClassValue\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<ClassValue>([String, Array, Object, Boolean]),\n    default: undefined,\n  },\n  /**\n   * @description styles will be passed to <hue-slider />\n   */\n  hueSliderStyle: {\n    type: definePropType<StyleValue>([String, Array, Object, Boolean]),\n    default: undefined,\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":";;;;;;;;AAyDA,MAAa,wBAAwB,WAAW;;;;CAI9C,YAAY;EACV,MAAM,eAA8B,OAAO;EAC3C,SAAS,KAAA;EACV;;;;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;;;;CAID,WAAW;;;;CAIX,aAAa,EACX,MAAM,eAA6B,OAAO,EAC3C;;;;CAID,UAAU;;;;CAIV,WAAW,EACT,MAAM,eAAyB,MAAM,EACtC;;;;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;;;;CAID,gBAAgB;EACd,MAAM,eAA2B;GAAC;GAAQ;GAAO;GAAQ;GAAQ,CAAC;EAClE,SAAS,KAAA;EACV;;;;CAID,gBAAgB;EACd,MAAM,eAA2B;GAAC;GAAQ;GAAO;GAAQ;GAAQ,CAAC;EAClE,SAAS,KAAA;EACV;CACF,CAAU;AACX,MAAa,wBAAwB,GAClC,sBAAsB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI,EAC1E;AAoBD,MAAa,kCACX,OAAO,uBAAuB;AAChC,MAAa,6BACX,OAAO,6BAA6B"}

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

@@ -1,3 +1,4 @@
+import { ClassValue } from "../../../utils/typescript.js";
 import { InputInstance } from "../../input/src/instance.js";
 import Color from "./utils/color.js";
 import { ColorPickerPanelProps } from "./color-picker-panel.js";
@@ -27,10 +28,12 @@ declare const __VLS_base: _$vue.DefineComponent<ColorPickerPanelProps, {
 }, string, _$vue.PublicProps, Readonly<ColorPickerPanelProps> & Readonly<{
   "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }>, {
-  validateEvent: boolean;
   modelValue: string | null;
   border: boolean;
   showAlpha: boolean;
+  validateEvent: boolean;
+  hueSliderClass: string | false | Record<string, any> | ClassValue[] | null;
+  hueSliderStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/es/components/color-picker-panel/src/color-picker-panel.vue_vue_type_script_setup_true_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel.vue_vue_type_script_setup_true_lang.mjs","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 { NOOP } 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(NOOP)\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(NOOP)\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,aAAa,qBAAoB;EAC5C,MAAM,EAAE,aAAa,aAAY;EACjC,MAAM,WAAW,iBAAgB;EACjC,MAAM,SAAS,KAAoC;EACnD,MAAM,QAAQ,KAAkC;EAChD,MAAM,WAAW,KAAsC;EACvD,MAAM,WAAW,KAAmB;EACpC,MAAM,cAAc,IAAI,GAAE;EAE1B,MAAM,EAAE,UAAU,OAChB,uCACM,eAAe,OAAO,KAAK,EACjC,KACF;EAEA,SAAS,gBAAgB;GACvB,MAAM,WAAW,YAAY,MAAK;GAClC,IAAI,MAAM,UAAU,YAAY,OAC9B,YAAY,QAAQ,MAAM;;EAI9B,SAAS,iBAAiB;GACxB,IAAI,MAAM,eACR,UAAU,WAAW,OAAO,CAAC,MAAM,KAAI;;EAI3C,SAAS,SAAS;GAChB,OAAO,OAAO,QAAO;GACrB,MAAM,OAAO,QAAO;GACpB,SAAS,OAAO,QAAO;;EAGzB,gBAAgB;GACd,IAAI,MAAM,YACR,YAAY,QAAQ,MAAM;GAE5B,SAAS,OAAM;IAChB;EAED,YACQ,MAAM,aACX,WAAW;GACV,IAAI,WAAW,MAAM,OACnB,SAAS,MAAM,WAAW,OAAO,GAAG,MAAM,OAAM;IAGtD;EAEA,YACQ,MAAM,QACX,QAAQ;GACP,KAAK,oBAAoB,IAAG;GAC5B,YAAY,QAAQ;GACpB,IAAI,MAAM,eACR,UAAU,SAAS,SAAS,CAAC,MAAM,KAAI;IAG7C;EAEA,QAAQ,4BAA4B,EAClC,cAAc,eAAe,MAAM,MAAM,EAC1C,CAAA;EAED,SAAa;;;;GAIX;;;;GAIA;;;;GAIA;GACD,CAAA;;uBAzJC,mBAwCM,OAAA;IAvCH,OAAK,eAAA;KAAG,MAAA,GAAE,CAAC,GAAC;KAAI,MAAA,GAAE,CAAC,GAAE,YAAa,MAAA,SAAQ,CAAA;KAAG,MAAA,GAAE,CAAC,GAAE,UAAW,QAAA,OAAM;KAAA,CAAA;IACnE,YAAU;;IAEX,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,UAAA,CAAA,EAAA,EAAA,CACf,YAOE,oBAAA;cANI;KAAJ,KAAI;KACH,OAAO,MAAA,MAAK;KACb,UAAA;KACC,UAAU,MAAA,SAAQ;KAClB,OAAK,eAAA,CAAA,cAAiB,QAAA,eAAc,CAAA;KACpC,OAAK,eAAE,QAAA,eAAc;;;;;;QAExB,YAA4D,kBAAA;cAA9C;KAAJ,KAAI;KAAS,OAAO,MAAA,MAAK;KAAG,UAAU,MAAA,SAAA;;IAG1C,QAAA,aAAA,WAAA,EADR,YAKE,sBAAA;;cAHI;KAAJ,KAAI;KACH,OAAO,MAAA,MAAK;KACZ,UAAU,MAAA,SAAA;;IAGL,QAAA,aAAA,WAAA,EADR,YAOE,mBAAA;;KALA,KAAI;KACH,gBAAc,QAAA;KACd,OAAO,MAAA,MAAK;KACZ,QAAQ,QAAA;KACR,UAAU,MAAA,SAAA;;;;;;;IAEb,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,SAAA,CAAA,EAAA,EAAA,CACf,YAOE,MAAA,QAAA,EAAA;cANI;KAAJ,KAAI;iBACK,YAAA;kEAAA,YAAW,QAAA;KACnB,kBAAgB;KACjB,MAAK;KACJ,UAAU,MAAA,SAAQ;KAClB,UAAQ;6CAEX,WAAsB,KAAA,QAAA,SAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"color-picker-panel.vue_vue_type_script_setup_true_lang.mjs","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 { NOOP } 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  hueSliderClass: undefined,\n  hueSliderStyle: undefined,\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(NOOP)\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(NOOP)\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;EAQd,MAAM,OAAO;EAEb,MAAM,KAAK,aAAa,qBAAoB;EAC5C,MAAM,EAAE,aAAa,aAAY;EACjC,MAAM,WAAW,iBAAgB;EACjC,MAAM,SAAS,KAAoC;EACnD,MAAM,QAAQ,KAAkC;EAChD,MAAM,WAAW,KAAsC;EACvD,MAAM,WAAW,KAAmB;EACpC,MAAM,cAAc,IAAI,GAAE;EAE1B,MAAM,EAAE,UAAU,OAChB,uCACM,eAAe,OAAO,KAAK,EACjC,KACF;EAEA,SAAS,gBAAgB;GACvB,MAAM,WAAW,YAAY,MAAK;GAClC,IAAI,MAAM,UAAU,YAAY,OAC9B,YAAY,QAAQ,MAAM;;EAI9B,SAAS,iBAAiB;GACxB,IAAI,MAAM,eACR,UAAU,WAAW,OAAO,CAAC,MAAM,KAAI;;EAI3C,SAAS,SAAS;GAChB,OAAO,OAAO,QAAO;GACrB,MAAM,OAAO,QAAO;GACpB,SAAS,OAAO,QAAO;;EAGzB,gBAAgB;GACd,IAAI,MAAM,YACR,YAAY,QAAQ,MAAM;GAE5B,SAAS,OAAM;IAChB;EAED,YACQ,MAAM,aACX,WAAW;GACV,IAAI,WAAW,MAAM,OACnB,SAAS,MAAM,WAAW,OAAO,GAAG,MAAM,OAAM;IAGtD;EAEA,YACQ,MAAM,QACX,QAAQ;GACP,KAAK,oBAAoB,IAAG;GAC5B,YAAY,QAAQ;GACpB,IAAI,MAAM,eACR,UAAU,SAAS,SAAS,CAAC,MAAM,KAAI;IAG7C;EAEA,QAAQ,4BAA4B,EAClC,cAAc,eAAe,MAAM,MAAM,EAC1C,CAAA;EAED,SAAa;;;;GAIX;;;;GAIA;;;;GAIA;GACD,CAAA;;uBA3JC,mBAwCM,OAAA;IAvCH,OAAK,eAAA;KAAG,MAAA,GAAE,CAAC,GAAC;KAAI,MAAA,GAAE,CAAC,GAAE,YAAa,MAAA,SAAQ,CAAA;KAAG,MAAA,GAAE,CAAC,GAAE,UAAW,QAAA,OAAM;KAAA,CAAA;IACnE,YAAU;;IAEX,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,UAAA,CAAA,EAAA,EAAA,CACf,YAOE,oBAAA;cANI;KAAJ,KAAI;KACH,OAAO,MAAA,MAAK;KACb,UAAA;KACC,UAAU,MAAA,SAAQ;KAClB,OAAK,eAAA,CAAA,cAAiB,QAAA,eAAc,CAAA;KACpC,OAAK,eAAE,QAAA,eAAc;;;;;;QAExB,YAA4D,kBAAA;cAA9C;KAAJ,KAAI;KAAS,OAAO,MAAA,MAAK;KAAG,UAAU,MAAA,SAAA;;IAG1C,QAAA,aAAA,WAAA,EADR,YAKE,sBAAA;;cAHI;KAAJ,KAAI;KACH,OAAO,MAAA,MAAK;KACZ,UAAU,MAAA,SAAA;;IAGL,QAAA,aAAA,WAAA,EADR,YAOE,mBAAA;;KALA,KAAI;KACH,gBAAc,QAAA;KACd,OAAO,MAAA,MAAK;KACZ,QAAQ,QAAA;KACR,UAAU,MAAA,SAAA;;;;;;;IAEb,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,SAAA,CAAA,EAAA,EAAA,CACf,YAOE,MAAA,QAAA,EAAA;cANI;KAAJ,KAAI;iBACK,YAAA;kEAAA,YAAW,QAAA;KACnB,kBAAgB;KACjB,MAAK;KACJ,UAAU,MAAA,SAAQ;KAClB,UAAQ;6CAEX,WAAsB,KAAA,QAAA,SAAA,CAAA,EAAA,EAAA"}

package/es/components/color-picker-panel/src/color-picker-panel2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel2.mjs","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 { NOOP } 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(NOOP)\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(NOOP)\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.mjs","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 { NOOP } 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  hueSliderClass: undefined,\n  hueSliderStyle: undefined,\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(NOOP)\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(NOOP)\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/es/components/config-provider/src/config-provider-props.d.ts

@@ -22,7 +22,7 @@ declare const configProviderProps: {
     __epPropKey: true;
   };
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

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

@@ -22,7 +22,7 @@ declare const ConfigProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -85,7 +85,7 @@ declare const ConfigProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/es/components/config-provider/src/hooks/use-global-config.d.ts

@@ -32,7 +32,7 @@ declare function useGlobalComponentSettings(block: string, sizeFallback?: MaybeR
     currentZIndex: _$vue.ComputedRef<number>;
     nextZIndex: () => number;
   };
-  size: _$vue.ComputedRef<"" | "default" | "small" | "large">;
+  size: _$vue.ComputedRef<"" | "small" | "default" | "large">;
 };
 declare const provideGlobalConfig: (config: MaybeRef<ConfigProviderContext>, app?: App, global?: boolean) => _$vue.ComputedRef<Partial<ConfigProviderProps>> | undefined;
 //#endregion