@element-plus/nightly 0.0.20231009 → 0.0.20231011

package/es/components/checkbox/index.d.ts

@@ -5,6 +5,7 @@ export declare const ElCheckbox: import("@element-plus/nightly/es/utils").SFCWit
     };
     label: {
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -49,6 +50,7 @@ export declare const ElCheckbox: import("@element-plus/nightly/es/utils").SFCWit
         };
         label: {
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+            default: undefined;
         };
         indeterminate: BooleanConstructor;
         disabled: BooleanConstructor;
@@ -132,6 +134,7 @@ export declare const ElCheckbox: import("@element-plus/nightly/es/utils").SFCWit
     };
     label: {
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -173,6 +176,7 @@ export declare const ElCheckbox: import("@element-plus/nightly/es/utils").SFCWit
     "onUpdate:modelValue"?: ((val: import("./src/checkbox").CheckboxValueType) => any) | undefined;
 }, {
     modelValue: string | number | boolean;
+    label: string | number | boolean | Record<string, any>;
     id: string;
     disabled: boolean;
     name: string;
@@ -191,6 +195,7 @@ export declare const ElCheckbox: import("@element-plus/nightly/es/utils").SFCWit
         };
         label: {
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+            default: undefined;
         };
         indeterminate: BooleanConstructor;
         disabled: BooleanConstructor;
@@ -235,6 +240,7 @@ export declare const ElCheckbox: import("@element-plus/nightly/es/utils").SFCWit
             };
             label: {
                 type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+                default: undefined;
             };
             indeterminate: BooleanConstructor;
             disabled: BooleanConstructor;
@@ -318,6 +324,7 @@ export declare const ElCheckbox: import("@element-plus/nightly/es/utils").SFCWit
         };
         label: {
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+            default: undefined;
         };
         indeterminate: BooleanConstructor;
         disabled: BooleanConstructor;
@@ -359,6 +366,7 @@ export declare const ElCheckbox: import("@element-plus/nightly/es/utils").SFCWit
         "onUpdate:modelValue"?: ((val: import("./src/checkbox").CheckboxValueType) => any) | undefined;
     }, {
         modelValue: string | number | boolean;
+        label: string | number | boolean | Record<string, any>;
         id: string;
         disabled: boolean;
         name: string;
@@ -468,6 +476,7 @@ export declare const ElCheckboxButton: import("@element-plus/nightly/es/utils").
     };
     label: {
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -512,6 +521,7 @@ export declare const ElCheckboxButton: import("@element-plus/nightly/es/utils").
         };
         label: {
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+            default: undefined;
         };
         indeterminate: BooleanConstructor;
         disabled: BooleanConstructor;
@@ -595,6 +605,7 @@ export declare const ElCheckboxButton: import("@element-plus/nightly/es/utils").
     };
     label: {
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -636,6 +647,7 @@ export declare const ElCheckboxButton: import("@element-plus/nightly/es/utils").
     "onUpdate:modelValue"?: ((val: import("./src/checkbox").CheckboxValueType) => any) | undefined;
 }, {
     modelValue: string | number | boolean;
+    label: string | number | boolean | Record<string, any>;
     id: string;
     disabled: boolean;
     name: string;

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

@@ -6,6 +6,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     label: {
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -50,6 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         label: {
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+            default: undefined;
         };
         indeterminate: BooleanConstructor;
         disabled: BooleanConstructor;
@@ -133,6 +135,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     label: {
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -174,6 +177,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((val: import("./checkbox").CheckboxValueType) => any) | undefined;
 }, {
     modelValue: string | number | boolean;
+    label: string | number | boolean | Record<string, any>;
     id: string;
     disabled: boolean;
     name: string;

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

@@ -14,6 +14,7 @@ export declare const checkboxProps: {
      */
     label: {
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
     /**
      * @description Set indeterminate state, only responsible for style control

package/es/components/checkbox/src/checkbox.mjs

@@ -12,7 +12,8 @@ const checkboxProps = {
     default: void 0
   },
   label: {
-    type: [String, Boolean, Number, Object]
+    type: [String, Boolean, Number, Object],
+    default: void 0
   },
   indeterminate: Boolean,
   disabled: Boolean,

package/es/components/checkbox/src/checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","sources":["../../../../../../packages/components/checkbox/src/checkbox.ts"],"sourcesContent":["import { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useSizeProp } from '@element-plus/hooks'\nimport { isBoolean, isNumber, isString } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Checkbox from './checkbox.vue'\n\nexport type CheckboxValueType = string | number | boolean\n\nexport const checkboxProps = {\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: [Number, String, Boolean],\n    default: undefined,\n  },\n  /**\n   * @description value of the Checkbox when used inside a `checkbox-group`\n   */\n  label: {\n    type: [String, Boolean, Number, Object],\n  },\n  /**\n   * @description Set indeterminate state, only responsible for style control\n   */\n  indeterminate: Boolean,\n  /**\n   * @description whether the Checkbox is disabled\n   */\n  disabled: Boolean,\n  /**\n   * @description if the Checkbox is checked\n   */\n  checked: Boolean,\n  /**\n   * @description native 'name' attribute\n   */\n  name: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description value of the Checkbox if it's checked\n   */\n  trueLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  /**\n   * @description value of the Checkbox if it's not checked\n   */\n  falseLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  /**\n   * @description input id\n   */\n  id: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description same as [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls), takes effect when `indeterminate` is `true`\n   */\n  controls: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description whether to add a border around Checkbox\n   */\n  border: Boolean,\n  /**\n   * @description size of the Checkbox\n   */\n  size: useSizeProp,\n  /**\n   * @description input tabindex\n   */\n  tabindex: [String, Number],\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n}\n\nexport const checkboxEmits = {\n  [UPDATE_MODEL_EVENT]: (val: CheckboxValueType) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n  change: (val: CheckboxValueType) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n}\n\nexport type CheckboxProps = ExtractPropTypes<typeof checkboxProps>\nexport type CheckboxEmits = typeof checkboxEmits\nexport type CheckboxInstance = InstanceType<typeof Checkbox>\n"],"names":[],"mappings":";;;;;;;;AAGY,MAAC,aAAa,GAAG;AAC7B,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AACnC,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;AAC3C,GAAG;AACH,EAAE,aAAa,EAAE,OAAO;AACxB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC5B,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE;AACU,MAAC,aAAa,GAAG;AAC7B,EAAE,CAAC,kBAAkB,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,GAAG,CAAC;AACjF,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,GAAG,CAAC;AACnE;;;;"}
+{"version":3,"file":"checkbox.mjs","sources":["../../../../../../packages/components/checkbox/src/checkbox.ts"],"sourcesContent":["import { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useSizeProp } from '@element-plus/hooks'\nimport { isBoolean, isNumber, isString } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Checkbox from './checkbox.vue'\n\nexport type CheckboxValueType = string | number | boolean\n\nexport const checkboxProps = {\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: [Number, String, Boolean],\n    default: undefined,\n  },\n  /**\n   * @description value of the Checkbox when used inside a `checkbox-group`\n   */\n  label: {\n    type: [String, Boolean, Number, Object],\n    default: undefined,\n  },\n  /**\n   * @description Set indeterminate state, only responsible for style control\n   */\n  indeterminate: Boolean,\n  /**\n   * @description whether the Checkbox is disabled\n   */\n  disabled: Boolean,\n  /**\n   * @description if the Checkbox is checked\n   */\n  checked: Boolean,\n  /**\n   * @description native 'name' attribute\n   */\n  name: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description value of the Checkbox if it's checked\n   */\n  trueLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  /**\n   * @description value of the Checkbox if it's not checked\n   */\n  falseLabel: {\n    type: [String, Number],\n    default: undefined,\n  },\n  /**\n   * @description input id\n   */\n  id: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description same as [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls), takes effect when `indeterminate` is `true`\n   */\n  controls: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description whether to add a border around Checkbox\n   */\n  border: Boolean,\n  /**\n   * @description size of the Checkbox\n   */\n  size: useSizeProp,\n  /**\n   * @description input tabindex\n   */\n  tabindex: [String, Number],\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n}\n\nexport const checkboxEmits = {\n  [UPDATE_MODEL_EVENT]: (val: CheckboxValueType) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n  change: (val: CheckboxValueType) =>\n    isString(val) || isNumber(val) || isBoolean(val),\n}\n\nexport type CheckboxProps = ExtractPropTypes<typeof checkboxProps>\nexport type CheckboxEmits = typeof checkboxEmits\nexport type CheckboxInstance = InstanceType<typeof Checkbox>\n"],"names":[],"mappings":";;;;;;;;AAGY,MAAC,aAAa,GAAG;AAC7B,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC;AACnC,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;AAC3C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,aAAa,EAAE,OAAO;AACxB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,OAAO,EAAE,OAAO;AAClB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC5B,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE;AACU,MAAC,aAAa,GAAG;AAC7B,EAAE,CAAC,kBAAkB,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,GAAG,CAAC;AACjF,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,QAAQ,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,GAAG,CAAC;AACnE;;;;"}

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

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     label: {
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -49,6 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         label: {
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+            default: undefined;
         };
         indeterminate: BooleanConstructor;
         disabled: BooleanConstructor;
@@ -132,6 +134,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     label: {
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
     };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -173,6 +176,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((val: import("./checkbox").CheckboxValueType) => any) | undefined;
 }, {
     modelValue: string | number | boolean;
+    label: string | number | boolean | Record<string, any>;
     id: string;
     disabled: boolean;
     name: string;

package/es/components/checkbox/src/composables/use-checkbox-status.mjs

@@ -1,5 +1,5 @@
 import { inject, ref, computed, toRaw } from 'vue';
-import { isEqual } from 'lodash-unified';
+import { isEqual, isNil } from 'lodash-unified';
 import '../../../form/index.mjs';
 import '../../../../utils/index.mjs';
 import { checkboxGroupContextKey } from '../constants.mjs';
@@ -37,7 +37,7 @@ const useCheckboxStatus = (props, slots, { model }) => {
     return (_a = checkboxGroup == null ? void 0 : checkboxGroup.size) == null ? void 0 : _a.value;
   }));
   const hasOwnLabel = computed(() => {
-    return !!(slots.default || props.label);
+    return !!slots.default || !isNil(props.label);
   });
   return {
     checkboxButtonSize,

package/es/components/checkbox/src/composables/use-checkbox-status.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox-status.mjs","sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-status.ts"],"sourcesContent":["import { computed, inject, ref, toRaw } from 'vue'\nimport { isEqual } from 'lodash-unified'\nimport { useFormSize } from '@element-plus/components/form'\nimport { isArray, isBoolean, isObject } from '@element-plus/utils'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { ComponentInternalInstance } from 'vue'\nimport type { CheckboxProps } from '../checkbox'\nimport type { CheckboxModel } from '../composables'\n\nexport const useCheckboxStatus = (\n  props: CheckboxProps,\n  slots: ComponentInternalInstance['slots'],\n  { model }: Pick<CheckboxModel, 'model'>\n) => {\n  const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n  const isFocused = ref(false)\n  const isChecked = computed<boolean>(() => {\n    const value = model.value\n    if (isBoolean(value)) {\n      return value\n    } else if (isArray(value)) {\n      if (isObject(props.label)) {\n        return value.map(toRaw).some((o) => isEqual(o, props.label))\n      } else {\n        return value.map(toRaw).includes(props.label)\n      }\n    } else if (value !== null && value !== undefined) {\n      return value === props.trueLabel\n    } else {\n      return !!value\n    }\n  })\n\n  const checkboxButtonSize = useFormSize(\n    computed(() => checkboxGroup?.size?.value),\n    {\n      prop: true,\n    }\n  )\n  const checkboxSize = useFormSize(computed(() => checkboxGroup?.size?.value))\n\n  const hasOwnLabel = computed<boolean>(() => {\n    return !!(slots.default || props.label)\n  })\n\n  return {\n    checkboxButtonSize,\n    isChecked,\n    isFocused,\n    checkboxSize,\n    hasOwnLabel,\n  }\n}\n\nexport type CheckboxStatus = ReturnType<typeof useCheckboxStatus>\n"],"names":[],"mappings":";;;;;;;;;AAKY,MAAC,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK;AAC9D,EAAE,MAAM,aAAa,GAAG,MAAM,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,CAAC;AAChE,EAAE,MAAM,SAAS,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;AAC/B,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM;AACnC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;AAC9B,IAAI,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;AAC1B,MAAM,OAAO,KAAK,CAAC;AACnB,KAAK,MAAM,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE;AAC/B,MAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;AACjC,QAAQ,OAAO,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACrE,OAAO,MAAM;AACb,QAAQ,OAAO,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACtD,OAAO;AACP,KAAK,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,EAAE;AACnD,MAAM,OAAO,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;AACvC,KAAK,MAAM;AACX,MAAM,OAAO,CAAC,CAAC,KAAK,CAAC;AACrB,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,kBAAkB,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM;AACxD,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,CAAC,EAAE,GAAG,aAAa,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,aAAa,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;AAClG,GAAG,CAAC,EAAE;AACN,IAAI,IAAI,EAAE,IAAI;AACd,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM;AAClD,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,CAAC,EAAE,GAAG,aAAa,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,aAAa,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;AAClG,GAAG,CAAC,CAAC,CAAC;AACN,EAAE,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM;AACrC,IAAI,OAAO,CAAC,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC5C,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,kBAAkB;AACtB,IAAI,SAAS;AACb,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-checkbox-status.mjs","sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-status.ts"],"sourcesContent":["import { computed, inject, ref, toRaw } from 'vue'\nimport { isEqual, isNil } from 'lodash-unified'\nimport { useFormSize } from '@element-plus/components/form'\nimport { isArray, isBoolean, isObject } from '@element-plus/utils'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { ComponentInternalInstance } from 'vue'\nimport type { CheckboxProps } from '../checkbox'\nimport type { CheckboxModel } from '../composables'\n\nexport const useCheckboxStatus = (\n  props: CheckboxProps,\n  slots: ComponentInternalInstance['slots'],\n  { model }: Pick<CheckboxModel, 'model'>\n) => {\n  const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n  const isFocused = ref(false)\n  const isChecked = computed<boolean>(() => {\n    const value = model.value\n    if (isBoolean(value)) {\n      return value\n    } else if (isArray(value)) {\n      if (isObject(props.label)) {\n        return value.map(toRaw).some((o) => isEqual(o, props.label))\n      } else {\n        return value.map(toRaw).includes(props.label)\n      }\n    } else if (value !== null && value !== undefined) {\n      return value === props.trueLabel\n    } else {\n      return !!value\n    }\n  })\n\n  const checkboxButtonSize = useFormSize(\n    computed(() => checkboxGroup?.size?.value),\n    {\n      prop: true,\n    }\n  )\n  const checkboxSize = useFormSize(computed(() => checkboxGroup?.size?.value))\n\n  const hasOwnLabel = computed<boolean>(() => {\n    return !!slots.default || !isNil(props.label)\n  })\n\n  return {\n    checkboxButtonSize,\n    isChecked,\n    isFocused,\n    checkboxSize,\n    hasOwnLabel,\n  }\n}\n\nexport type CheckboxStatus = ReturnType<typeof useCheckboxStatus>\n"],"names":[],"mappings":";;;;;;;;;AAKY,MAAC,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK;AAC9D,EAAE,MAAM,aAAa,GAAG,MAAM,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,CAAC;AAChE,EAAE,MAAM,SAAS,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;AAC/B,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM;AACnC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;AAC9B,IAAI,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE;AAC1B,MAAM,OAAO,KAAK,CAAC;AACnB,KAAK,MAAM,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE;AAC/B,MAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;AACjC,QAAQ,OAAO,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACrE,OAAO,MAAM;AACb,QAAQ,OAAO,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACtD,OAAO;AACP,KAAK,MAAM,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,EAAE;AACnD,MAAM,OAAO,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;AACvC,KAAK,MAAM;AACX,MAAM,OAAO,CAAC,CAAC,KAAK,CAAC;AACrB,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,kBAAkB,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM;AACxD,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,CAAC,EAAE,GAAG,aAAa,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,aAAa,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;AAClG,GAAG,CAAC,EAAE;AACN,IAAI,IAAI,EAAE,IAAI;AACd,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC,MAAM;AAClD,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,OAAO,CAAC,EAAE,GAAG,aAAa,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,aAAa,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;AAClG,GAAG,CAAC,CAAC,CAAC;AACN,EAAE,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM;AACrC,IAAI,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAClD,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,kBAAkB;AACtB,IAAI,SAAS;AACb,IAAI,SAAS;AACb,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,GAAG,CAAC;AACJ;;;;"}

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

@@ -46,9 +46,11 @@ export declare const ElColorPicker: import("@element-plus/nightly/es/utils").SFC
     }>> & {
         onChange?: ((val: string | null) => any) | undefined;
         "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         onActiveChange?: ((val: string | null) => any) | undefined;
     }>>;
-    emit: ((event: "update:modelValue", val: string | null) => void) & ((event: "change", val: string | null) => void) & ((event: "activeChange", val: string | null) => void);
+    emit: ((event: "update:modelValue", val: string | null) => void) & ((event: "change", val: string | null) => void) & ((event: "focus", event: FocusEvent) => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "activeChange", val: string | null) => void);
     t: import("../..").Translator;
     ns: {
         namespace: import("vue").ComputedRef<string>;
@@ -6644,6 +6646,12 @@ export declare const ElColorPicker: import("@element-plus/nightly/es/utils").SFC
             readonly disabled: boolean;
         }>;
     }> & {} & import("vue").ComponentCustomProperties) | undefined>;
+    triggerRef: import("vue").Ref<any>;
+    inputRef: import("vue").Ref<any>;
+    isFocused: import("vue").Ref<boolean>;
+    _handleFocus: (event: FocusEvent) => void;
+    handleBlur: (event: FocusEvent) => void;
+    handleFocus: (event: FocusEvent) => void;
     shouldActiveChange: boolean;
     color: import("./src/utils/color").default;
     showPicker: import("vue").Ref<boolean>;
@@ -6664,6 +6672,11 @@ export declare const ElColorPicker: import("@element-plus/nightly/es/utils").SFC
     handleConfirm: () => void;
     confirmValue: () => void;
     clear: () => void;
+    handleClickOutside: (event: Event) => void;
+    handleEsc: (event: KeyboardEvent) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    focus: () => void;
+    blur: () => void;
     ElButton: import("@element-plus/nightly/es/utils").SFCWithInstall<import("vue").DefineComponent<{
         readonly size: {
             readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
@@ -10834,6 +10847,8 @@ export declare const ElColorPicker: import("@element-plus/nightly/es/utils").SFC
     "update:modelValue": (val: string | null) => boolean;
     change: (val: string | null) => boolean;
     activeChange: (val: string | null) => boolean;
+    focus: (event: FocusEvent) => boolean;
+    blur: (event: FocusEvent) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly modelValue: StringConstructor;
     readonly id: StringConstructor;
@@ -10859,6 +10874,8 @@ export declare const ElColorPicker: import("@element-plus/nightly/es/utils").SFC
 }>> & {
     onChange?: ((val: string | null) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
     onActiveChange?: ((val: string | null) => any) | undefined;
 }, {
     readonly popperClass: string;

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

@@ -27,6 +27,8 @@ export declare const colorPickerEmits: {
     "update:modelValue": (val: string | null) => boolean;
     change: (val: string | null) => boolean;
     activeChange: (val: string | null) => boolean;
+    focus: (event: FocusEvent) => boolean;
+    blur: (event: FocusEvent) => boolean;
 };
 export declare type ColorPickerProps = ExtractPropTypes<typeof colorPickerProps>;
 export declare type ColorPickerEmits = typeof colorPickerEmits;

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

@@ -37,7 +37,9 @@ const colorPickerProps = buildProps({
 const colorPickerEmits = {
   [UPDATE_MODEL_EVENT]: (val) => isString(val) || isNil(val),
   [CHANGE_EVENT]: (val) => isString(val) || isNil(val),
-  activeChange: (val) => isString(val) || isNil(val)
+  activeChange: (val) => isString(val) || isNil(val),
+  focus: (event) => event instanceof FocusEvent,
+  blur: (event) => event instanceof FocusEvent
 };
 const colorPickerContextKey = Symbol("colorPickerContextKey");
 

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker.mjs","sources":["../../../../../../packages/components/color-picker/src/color-picker.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport { useSizeProp } from '@element-plus/hooks'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ComputedRef, ExtractPropTypes, InjectionKey } from 'vue'\nimport type ColorPicker from './color-picker.vue'\n\nexport const colorPickerProps = buildProps({\n  /**\n   * @description binding value\n   */\n  modelValue: String,\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: String,\n  /**\n   * @description whether to disable the ColorPicker\n   */\n  disabled: Boolean,\n  /**\n   * @description size of ColorPicker\n   */\n  size: useSizeProp,\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description ColorPicker aria-label\n   */\n  label: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: 0,\n  },\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 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}\n\nexport type ColorPickerProps = ExtractPropTypes<typeof colorPickerProps>\nexport type ColorPickerEmits = typeof colorPickerEmits\nexport type ColorPickerInstance = InstanceType<typeof ColorPicker>\n\nexport interface ColorPickerContext {\n  currentColor: ComputedRef<string>\n}\n\nexport const colorPickerContextKey: InjectionKey<ColorPickerContext> = Symbol(\n  'colorPickerContextKey'\n)\n"],"names":[],"mappings":";;;;;;;;;AAIY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,UAAU,EAAE,MAAM;AACpB,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,WAAW,EAAE,MAAM;AACrB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,CAAC,kBAAkB,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC;AAC5D,EAAE,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC;AACtD,EAAE,YAAY,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC;AACpD,EAAE;AACU,MAAC,qBAAqB,GAAG,MAAM,CAAC,uBAAuB;;;;"}
+{"version":3,"file":"color-picker.mjs","sources":["../../../../../../packages/components/color-picker/src/color-picker.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport { useSizeProp } from '@element-plus/hooks'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ComputedRef, ExtractPropTypes, InjectionKey } from 'vue'\nimport type ColorPicker from './color-picker.vue'\n\nexport const colorPickerProps = buildProps({\n  /**\n   * @description binding value\n   */\n  modelValue: String,\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: String,\n  /**\n   * @description whether to disable the ColorPicker\n   */\n  disabled: Boolean,\n  /**\n   * @description size of ColorPicker\n   */\n  size: useSizeProp,\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description ColorPicker aria-label\n   */\n  label: {\n    type: String,\n    default: undefined,\n  },\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: 0,\n  },\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 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: (event: FocusEvent) => event instanceof FocusEvent,\n  blur: (event: FocusEvent) => event instanceof FocusEvent,\n}\n\nexport type ColorPickerProps = ExtractPropTypes<typeof colorPickerProps>\nexport type ColorPickerEmits = typeof colorPickerEmits\nexport type ColorPickerInstance = InstanceType<typeof ColorPicker>\n\nexport interface ColorPickerContext {\n  currentColor: ComputedRef<string>\n}\n\nexport const colorPickerContextKey: InjectionKey<ColorPickerContext> = Symbol(\n  'colorPickerContextKey'\n)\n"],"names":[],"mappings":";;;;;;;;;AAIY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,UAAU,EAAE,MAAM;AACpB,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,WAAW,EAAE,MAAM;AACrB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,CAAC,kBAAkB,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC;AAC5D,EAAE,CAAC,YAAY,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC;AACtD,EAAE,YAAY,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC;AACpD,EAAE,KAAK,EAAE,CAAC,KAAK,KAAK,KAAK,YAAY,UAAU;AAC/C,EAAE,IAAI,EAAE,CAAC,KAAK,KAAK,KAAK,YAAY,UAAU;AAC9C,EAAE;AACU,MAAC,qBAAqB,GAAG,MAAM,CAAC,uBAAuB;;;;"}

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

@@ -48,9 +48,11 @@ declare const _default: import("vue").DefineComponent<{
     }>> & {
         onChange?: ((val: string | null) => any) | undefined;
         "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        onBlur?: ((event: FocusEvent) => any) | undefined;
         onActiveChange?: ((val: string | null) => any) | undefined;
     }>>;
-    emit: ((event: "update:modelValue", val: string | null) => void) & ((event: "change", val: string | null) => void) & ((event: "activeChange", val: string | null) => void);
+    emit: ((event: "update:modelValue", val: string | null) => void) & ((event: "change", val: string | null) => void) & ((event: "focus", event: FocusEvent) => void) & ((event: "blur", event: FocusEvent) => void) & ((event: "activeChange", val: string | null) => void);
     t: import("@element-plus/nightly/es/hooks").Translator;
     ns: {
         namespace: import("vue").ComputedRef<string>;
@@ -6646,6 +6648,12 @@ declare const _default: import("vue").DefineComponent<{
             readonly disabled: boolean;
         }>;
     }> & {} & import("vue").ComponentCustomProperties) | undefined>;
+    triggerRef: import("vue").Ref<any>;
+    inputRef: import("vue").Ref<any>;
+    isFocused: import("vue").Ref<boolean>;
+    _handleFocus: (event: FocusEvent) => void;
+    handleBlur: (event: FocusEvent) => void;
+    handleFocus: (event: FocusEvent) => void;
     shouldActiveChange: boolean;
     color: Color;
     showPicker: import("vue").Ref<boolean>;
@@ -6666,6 +6674,11 @@ declare const _default: import("vue").DefineComponent<{
     handleConfirm: () => void;
     confirmValue: () => void;
     clear: () => void;
+    handleClickOutside: (event: Event) => void;
+    handleEsc: (event: KeyboardEvent) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    focus: () => void;
+    blur: () => void;
     ElButton: import("@element-plus/nightly/es/utils").SFCWithInstall<import("vue").DefineComponent<{
         readonly size: {
             readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
@@ -10836,6 +10849,8 @@ declare const _default: import("vue").DefineComponent<{
     "update:modelValue": (val: string | null) => boolean;
     change: (val: string | null) => boolean;
     activeChange: (val: string | null) => boolean;
+    focus: (event: FocusEvent) => boolean;
+    blur: (event: FocusEvent) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly modelValue: StringConstructor;
     readonly id: StringConstructor;
@@ -10861,6 +10876,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onChange?: ((val: string | null) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
     onActiveChange?: ((val: string | null) => any) | undefined;
 }, {
     readonly popperClass: string;

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, reactive, computed, nextTick, onMounted, watch, provide, openBlock, createBlock, unref, withCtx, withDirectives, createElementBlock, createElementVNode, normalizeClass, createVNode, createCommentVNode, withKeys, createTextVNode, toDisplayString, normalizeStyle, vShow } from 'vue';
+import { defineComponent, ref, reactive, computed, nextTick, onMounted, watch, provide, openBlock, createBlock, unref, withCtx, withDirectives, createElementBlock, withKeys, createElementVNode, normalizeClass, createVNode, createCommentVNode, createTextVNode, toDisplayString, normalizeStyle, vShow } from 'vue';
 import { debounce } from 'lodash-unified';
 import { ElButton } from '../../button/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
@@ -21,11 +21,14 @@ import { useLocale } from '../../../hooks/use-locale/index.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
 import { useFormSize, useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
+import { useFocusController } from '../../../hooks/use-focus-controller/index.mjs';
 import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
 import { debugWarn } from '../../../utils/error.mjs';
+import { EVENT_CODE } from '../../../constants/aria.mjs';
 import ClickOutside from '../../../directives/click-outside/index.mjs';
 
-const _hoisted_1 = ["id", "aria-label", "aria-labelledby", "aria-description", "tabindex", "onKeydown"];
+const _hoisted_1 = ["onKeydown"];
+const _hoisted_2 = ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex"];
 const __default__ = defineComponent({
   name: "ElColorPicker"
 });
@@ -47,6 +50,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const sv = ref();
     const alpha = ref();
     const popper = ref();
+    const triggerRef = ref();
+    const inputRef = ref();
+    const {
+      isFocused,
+      handleFocus: _handleFocus,
+      handleBlur
+    } = useFocusController(triggerRef, {
+      beforeBlur(event) {
+        var _a;
+        return (_a = popper.value) == null ? void 0 : _a.isFocusInsideContent(event);
+      },
+      afterBlur() {
+        setShowPicker(false);
+        resetColor();
+      }
+    });
+    const handleFocus = (event) => {
+      if (colorDisabled.value)
+        return blur();
+      _handleFocus(event);
+    };
     let shouldActiveChange = true;
     const color = reactive(new Color({
       enableAlpha: props.showAlpha,
@@ -75,7 +99,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return [
         ns.b("picker"),
         ns.is("disabled", colorDisabled.value),
-        ns.bm("picker", colorSize.value)
+        ns.bm("picker", colorSize.value),
+        ns.is("focused", isFocused.value)
       ];
     });
     function displayedRgb(color2, showAlpha) {
@@ -146,6 +171,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       resetColor();
     }
+    function handleClickOutside(event) {
+      if (!showPicker.value)
+        return;
+      hide();
+      if (isFocused.value) {
+        const _event = new FocusEvent("focus", event);
+        handleBlur(_event);
+      }
+    }
+    function handleEsc(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      setShowPicker(false);
+      resetColor();
+    }
+    function handleKeyDown(event) {
+      switch (event.code) {
+        case EVENT_CODE.enter:
+        case EVENT_CODE.space:
+          event.preventDefault();
+          event.stopPropagation();
+          show();
+          inputRef.value.focus();
+          break;
+        case EVENT_CODE.esc:
+          handleEsc(event);
+          break;
+      }
+    }
+    function focus() {
+      triggerRef.value.focus();
+    }
+    function blur() {
+      triggerRef.value.blur();
+    }
     onMounted(() => {
       if (props.modelValue) {
         customInput.value = currentColor.value;
@@ -183,7 +243,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     expose({
       color,
       show,
-      hide
+      hide,
+      focus,
+      blur
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ElTooltip), {
@@ -199,10 +261,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         effect: "light",
         trigger: "click",
         transition: `${unref(ns).namespace.value}-zoom-in-top`,
-        persistent: ""
+        persistent: "",
+        onHide: _cache[2] || (_cache[2] = ($event) => setShowPicker(false))
       }, {
         content: withCtx(() => [
-          withDirectives((openBlock(), createElementBlock("div", null, [
+          withDirectives((openBlock(), createElementBlock("div", {
+            onKeydown: withKeys(handleEsc, ["esc"])
+          }, [
             createElementVNode("div", {
               class: normalizeClass(unref(ns).be("dropdown", "main-wrapper"))
             }, [
@@ -238,6 +303,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(unref(ns).be("dropdown", "value"))
               }, [
                 createVNode(unref(ElInput), {
+                  ref_key: "inputRef",
+                  ref: inputRef,
                   modelValue: customInput.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
                   "validate-event": false,
@@ -269,20 +336,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _: 1
               }, 8, ["class"])
             ], 2)
-          ])), [
-            [unref(ClickOutside), hide]
+          ], 40, _hoisted_1)), [
+            [unref(ClickOutside), handleClickOutside]
           ])
         ]),
         default: withCtx(() => [
           createElementVNode("div", {
             id: unref(buttonId),
+            ref_key: "triggerRef",
+            ref: triggerRef,
             class: normalizeClass(unref(btnKls)),
             role: "button",
             "aria-label": unref(buttonAriaLabel),
             "aria-labelledby": unref(buttonAriaLabelledby),
             "aria-description": unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
-            tabindex: _ctx.tabindex,
-            onKeydown: withKeys(handleTrigger, ["enter"])
+            "aria-disabled": unref(colorDisabled),
+            tabindex: unref(colorDisabled) ? -1 : _ctx.tabindex,
+            onKeydown: handleKeyDown,
+            onFocus: handleFocus,
+            onBlur: _cache[1] || (_cache[1] = (...args) => unref(handleBlur) && unref(handleBlur)(...args))
           }, [
             unref(colorDisabled) ? (openBlock(), createElementBlock("div", {
               key: 0,
@@ -324,7 +396,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ], 6)
               ], 2)
             ], 2)
-          ], 42, _hoisted_1)
+          ], 42, _hoisted_2)
         ]),
         _: 1
       }, 8, ["visible", "popper-class", "transition"]);