element-plus 2.3.14 → 2.4.0

package/lib/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/lib/components/checkbox/src/checkbox2.js

@@ -10,9 +10,8 @@ var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper
 var useCheckbox = require('./composables/use-checkbox.js');
 var index = require('../../../hooks/use-namespace/index.js');
 
-const _hoisted_1 = ["tabindex", "role", "aria-checked"];
-const _hoisted_2 = ["id", "aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
-const _hoisted_3 = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
+const _hoisted_1 = ["id", "indeterminate", "name", "tabindex", "disabled", "true-value", "false-value"];
+const _hoisted_2 = ["id", "indeterminate", "disabled", "value", "name", "tabindex"];
 const __default__ = vue.defineComponent({
   name: "ElCheckbox"
 });
@@ -62,10 +61,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }, {
         default: vue.withCtx(() => [
           vue.createElementVNode("span", {
-            class: vue.normalizeClass(vue.unref(spanKls)),
-            tabindex: _ctx.indeterminate ? 0 : void 0,
-            role: _ctx.indeterminate ? "checkbox" : void 0,
-            "aria-checked": _ctx.indeterminate ? "mixed" : void 0
+            class: vue.normalizeClass(vue.unref(spanKls))
           }, [
             _ctx.trueLabel || _ctx.falseLabel ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
               key: 0,
@@ -73,7 +69,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(model) ? model.value = $event : null),
               class: vue.normalizeClass(vue.unref(ns).e("original")),
               type: "checkbox",
-              "aria-hidden": _ctx.indeterminate ? "true" : "false",
+              indeterminate: _ctx.indeterminate,
               name: _ctx.name,
               tabindex: _ctx.tabindex,
               disabled: vue.unref(isDisabled),
@@ -84,7 +80,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false),
               onClick: _cache[4] || (_cache[4] = vue.withModifiers(() => {
               }, ["stop"]))
-            }, null, 42, _hoisted_2)), [
+            }, null, 42, _hoisted_1)), [
               [vue.vModelCheckbox, vue.unref(model)]
             ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
               key: 1,
@@ -92,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => vue.isRef(model) ? model.value = $event : null),
               class: vue.normalizeClass(vue.unref(ns).e("original")),
               type: "checkbox",
-              "aria-hidden": _ctx.indeterminate ? "true" : "false",
+              indeterminate: _ctx.indeterminate,
               disabled: vue.unref(isDisabled),
               value: _ctx.label,
               name: _ctx.name,
@@ -102,13 +98,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               onBlur: _cache[8] || (_cache[8] = ($event) => isFocused.value = false),
               onClick: _cache[9] || (_cache[9] = vue.withModifiers(() => {
               }, ["stop"]))
-            }, null, 42, _hoisted_3)), [
+            }, null, 42, _hoisted_2)), [
               [vue.vModelCheckbox, vue.unref(model)]
             ]),
             vue.createElementVNode("span", {
               class: vue.normalizeClass(vue.unref(ns).e("inner"))
             }, null, 2)
-          ], 10, _hoisted_1),
+          ], 2),
           vue.unref(hasOwnLabel) ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
             class: vue.normalizeClass(vue.unref(ns).e("label"))

package/lib/components/checkbox/src/checkbox2.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox2.js","sources":["../../../../../../packages/components/checkbox/src/checkbox.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"!hasOwnLabel && isLabeledByFormItem ? 'span' : 'label'\"\n    :class=\"compKls\"\n    :aria-controls=\"indeterminate ? controls : null\"\n    @click=\"onClickRoot\"\n  >\n    <span\n      :class=\"spanKls\"\n      :tabindex=\"indeterminate ? 0 : undefined\"\n      :role=\"indeterminate ? 'checkbox' : undefined\"\n      :aria-checked=\"indeterminate ? 'mixed' : undefined\"\n    >\n      <input\n        v-if=\"trueLabel || falseLabel\"\n        :id=\"inputId\"\n        v-model=\"model\"\n        :class=\"ns.e('original')\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        :disabled=\"isDisabled\"\n        :true-value=\"trueLabel\"\n        :false-value=\"falseLabel\"\n        @change=\"handleChange\"\n        @focus=\"isFocused = true\"\n        @blur=\"isFocused = false\"\n        @click.stop\n      />\n      <input\n        v-else\n        :id=\"inputId\"\n        v-model=\"model\"\n        :class=\"ns.e('original')\"\n        type=\"checkbox\"\n        :aria-hidden=\"indeterminate ? 'true' : 'false'\"\n        :disabled=\"isDisabled\"\n        :value=\"label\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        @change=\"handleChange\"\n        @focus=\"isFocused = true\"\n        @blur=\"isFocused = false\"\n        @click.stop\n      />\n      <span :class=\"ns.e('inner')\" />\n    </span>\n    <span v-if=\"hasOwnLabel\" :class=\"ns.e('label')\">\n      <slot />\n      <template v-if=\"!$slots.default\">{{ label }}</template>\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, useSlots } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { checkboxEmits, checkboxProps } from './checkbox'\nimport { useCheckbox } from './composables'\n\ndefineOptions({\n  name: 'ElCheckbox',\n})\n\nconst props = defineProps(checkboxProps)\ndefineEmits(checkboxEmits)\nconst slots = useSlots()\n\nconst {\n  inputId,\n  isLabeledByFormItem,\n  isChecked,\n  isDisabled,\n  isFocused,\n  checkboxSize,\n  hasOwnLabel,\n  model,\n  handleChange,\n  onClickRoot,\n} = useCheckbox(props, slots)\n\nconst ns = useNamespace('checkbox')\n\nconst compKls = computed(() => {\n  return [\n    ns.b(),\n    ns.m(checkboxSize.value),\n    ns.is('disabled', isDisabled.value),\n    ns.is('bordered', props.border),\n    ns.is('checked', isChecked.value),\n  ]\n})\n\nconst spanKls = computed(() => {\n  return [\n    ns.e('input'),\n    ns.is('disabled', isDisabled.value),\n    ns.is('checked', isChecked.value),\n    ns.is('indeterminate', props.indeterminate),\n    ns.is('focus', isFocused.value),\n  ]\n})\n</script>\n"],"names":["useSlots","useCheckbox","useNamespace","computed"],"mappings":";;;;;;;;;;;;;;;uCA6Dc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,QAAQA,YAAS,EAAA,CAAA;AAEvB,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,KACE,GAAAC,uBAAA,CAAY,OAAO,KAAK,CAAA,CAAA;AAE5B,IAAM,MAAA,EAAA,GAAKC,mBAAa,UAAU,CAAA,CAAA;AAElC,IAAM,MAAA,OAAA,GAAUC,aAAS,MAAM;AAC7B,MAAO,OAAA;AAAA,QACL,GAAG,CAAE,EAAA;AAAA,QACL,EAAA,CAAG,CAAE,CAAA,YAAA,CAAa,KAAK,CAAA;AAAA,QACvB,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,UAAA,CAAW,KAAK,CAAA;AAAA,QAClC,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,KAAA,CAAM,MAAM,CAAA;AAAA,QAC9B,EAAG,CAAA,EAAA,CAAG,SAAW,EAAA,SAAA,CAAU,KAAK,CAAA;AAAA,OAClC,CAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAM,MAAA,OAAA,GAAUA,aAAS,MAAM;AAC7B,MAAO,OAAA;AAAA,QACL,EAAA,CAAG,EAAE,OAAO,CAAA;AAAA,QACZ,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,UAAA,CAAW,KAAK,CAAA;AAAA,QAClC,EAAG,CAAA,EAAA,CAAG,SAAW,EAAA,SAAA,CAAU,KAAK,CAAA;AAAA,QAChC,EAAG,CAAA,EAAA,CAAG,eAAiB,EAAA,KAAA,CAAM,aAAa,CAAA;AAAA,QAC1C,EAAG,CAAA,EAAA,CAAG,OAAS,EAAA,SAAA,CAAU,KAAK,CAAA;AAAA,OAChC,CAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox2.js","sources":["../../../../../../packages/components/checkbox/src/checkbox.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"!hasOwnLabel && isLabeledByFormItem ? 'span' : 'label'\"\n    :class=\"compKls\"\n    :aria-controls=\"indeterminate ? controls : null\"\n    @click=\"onClickRoot\"\n  >\n    <span :class=\"spanKls\">\n      <input\n        v-if=\"trueLabel || falseLabel\"\n        :id=\"inputId\"\n        v-model=\"model\"\n        :class=\"ns.e('original')\"\n        type=\"checkbox\"\n        :indeterminate=\"indeterminate\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        :disabled=\"isDisabled\"\n        :true-value=\"trueLabel\"\n        :false-value=\"falseLabel\"\n        @change=\"handleChange\"\n        @focus=\"isFocused = true\"\n        @blur=\"isFocused = false\"\n        @click.stop\n      />\n      <input\n        v-else\n        :id=\"inputId\"\n        v-model=\"model\"\n        :class=\"ns.e('original')\"\n        type=\"checkbox\"\n        :indeterminate=\"indeterminate\"\n        :disabled=\"isDisabled\"\n        :value=\"label\"\n        :name=\"name\"\n        :tabindex=\"tabindex\"\n        @change=\"handleChange\"\n        @focus=\"isFocused = true\"\n        @blur=\"isFocused = false\"\n        @click.stop\n      />\n      <span :class=\"ns.e('inner')\" />\n    </span>\n    <span v-if=\"hasOwnLabel\" :class=\"ns.e('label')\">\n      <slot />\n      <template v-if=\"!$slots.default\">{{ label }}</template>\n    </span>\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, useSlots } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { checkboxEmits, checkboxProps } from './checkbox'\nimport { useCheckbox } from './composables'\n\ndefineOptions({\n  name: 'ElCheckbox',\n})\n\nconst props = defineProps(checkboxProps)\ndefineEmits(checkboxEmits)\nconst slots = useSlots()\n\nconst {\n  inputId,\n  isLabeledByFormItem,\n  isChecked,\n  isDisabled,\n  isFocused,\n  checkboxSize,\n  hasOwnLabel,\n  model,\n  handleChange,\n  onClickRoot,\n} = useCheckbox(props, slots)\n\nconst ns = useNamespace('checkbox')\n\nconst compKls = computed(() => {\n  return [\n    ns.b(),\n    ns.m(checkboxSize.value),\n    ns.is('disabled', isDisabled.value),\n    ns.is('bordered', props.border),\n    ns.is('checked', isChecked.value),\n  ]\n})\n\nconst spanKls = computed(() => {\n  return [\n    ns.e('input'),\n    ns.is('disabled', isDisabled.value),\n    ns.is('checked', isChecked.value),\n    ns.is('indeterminate', props.indeterminate),\n    ns.is('focus', isFocused.value),\n  ]\n})\n</script>\n"],"names":["useSlots","useCheckbox","useNamespace","computed"],"mappings":";;;;;;;;;;;;;;uCAwDc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,QAAQA,YAAS,EAAA,CAAA;AAEvB,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,KACE,GAAAC,uBAAA,CAAY,OAAO,KAAK,CAAA,CAAA;AAE5B,IAAM,MAAA,EAAA,GAAKC,mBAAa,UAAU,CAAA,CAAA;AAElC,IAAM,MAAA,OAAA,GAAUC,aAAS,MAAM;AAC7B,MAAO,OAAA;AAAA,QACL,GAAG,CAAE,EAAA;AAAA,QACL,EAAA,CAAG,CAAE,CAAA,YAAA,CAAa,KAAK,CAAA;AAAA,QACvB,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,UAAA,CAAW,KAAK,CAAA;AAAA,QAClC,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,KAAA,CAAM,MAAM,CAAA;AAAA,QAC9B,EAAG,CAAA,EAAA,CAAG,SAAW,EAAA,SAAA,CAAU,KAAK,CAAA;AAAA,OAClC,CAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAM,MAAA,OAAA,GAAUA,aAAS,MAAM;AAC7B,MAAO,OAAA;AAAA,QACL,EAAA,CAAG,EAAE,OAAO,CAAA;AAAA,QACZ,EAAG,CAAA,EAAA,CAAG,UAAY,EAAA,UAAA,CAAW,KAAK,CAAA;AAAA,QAClC,EAAG,CAAA,EAAA,CAAG,SAAW,EAAA,SAAA,CAAU,KAAK,CAAA;AAAA,QAChC,EAAG,CAAA,EAAA,CAAG,eAAiB,EAAA,KAAA,CAAM,aAAa,CAAA;AAAA,QAC1C,EAAG,CAAA,EAAA,CAAG,OAAS,EAAA,SAAA,CAAU,KAAK,CAAA;AAAA,OAChC,CAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/checkbox/src/composables/use-checkbox-status.js

@@ -41,7 +41,7 @@ const useCheckboxStatus = (props, slots, { model }) => {
     return (_a = checkboxGroup == null ? void 0 : checkboxGroup.size) == null ? void 0 : _a.value;
   }));
   const hasOwnLabel = vue.computed(() => {
-    return !!(slots.default || props.label);
+    return !!slots.default || !lodashUnified.isNil(props.label);
   });
   return {
     checkboxButtonSize,

package/lib/components/checkbox/src/composables/use-checkbox-status.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox-status.js","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":["inject","checkboxGroupContextKey","ref","computed","isBoolean","isArray","isObject","toRaw","isEqual","useFormSize"],"mappings":";;;;;;;;;;;;;AAKY,MAAC,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK;AAC9D,EAAE,MAAM,aAAa,GAAGA,UAAM,CAACC,iCAAuB,EAAE,KAAK,CAAC,CAAC,CAAC;AAChE,EAAE,MAAM,SAAS,GAAGC,OAAG,CAAC,KAAK,CAAC,CAAC;AAC/B,EAAE,MAAM,SAAS,GAAGC,YAAQ,CAAC,MAAM;AACnC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;AAC9B,IAAI,IAAIC,eAAS,CAAC,KAAK,CAAC,EAAE;AAC1B,MAAM,OAAO,KAAK,CAAC;AACnB,KAAK,MAAM,IAAIC,cAAO,CAAC,KAAK,CAAC,EAAE;AAC/B,MAAM,IAAIC,eAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;AACjC,QAAQ,OAAO,KAAK,CAAC,GAAG,CAACC,SAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAKC,qBAAO,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACrE,OAAO,MAAM;AACb,QAAQ,OAAO,KAAK,CAAC,GAAG,CAACD,SAAK,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,GAAGE,8BAAW,CAACN,YAAQ,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,GAAGM,8BAAW,CAACN,YAAQ,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,GAAGA,YAAQ,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.js","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":["inject","checkboxGroupContextKey","ref","computed","isBoolean","isArray","isObject","toRaw","isEqual","useFormSize","isNil"],"mappings":";;;;;;;;;;;;;AAKY,MAAC,iBAAiB,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK;AAC9D,EAAE,MAAM,aAAa,GAAGA,UAAM,CAACC,iCAAuB,EAAE,KAAK,CAAC,CAAC,CAAC;AAChE,EAAE,MAAM,SAAS,GAAGC,OAAG,CAAC,KAAK,CAAC,CAAC;AAC/B,EAAE,MAAM,SAAS,GAAGC,YAAQ,CAAC,MAAM;AACnC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;AAC9B,IAAI,IAAIC,eAAS,CAAC,KAAK,CAAC,EAAE;AAC1B,MAAM,OAAO,KAAK,CAAC;AACnB,KAAK,MAAM,IAAIC,cAAO,CAAC,KAAK,CAAC,EAAE;AAC/B,MAAM,IAAIC,eAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;AACjC,QAAQ,OAAO,KAAK,CAAC,GAAG,CAACC,SAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAKC,qBAAO,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACrE,OAAO,MAAM;AACb,QAAQ,OAAO,KAAK,CAAC,GAAG,CAACD,SAAK,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,GAAGE,8BAAW,CAACN,YAAQ,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,GAAGM,8BAAW,CAACN,YAAQ,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,GAAGA,YAAQ,CAAC,MAAM;AACrC,IAAI,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,IAAI,CAACO,mBAAK,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/lib/components/collapse/src/collapse-item2.js

@@ -51,6 +51,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           "aria-controls": vue.unref(scopedContentId),
           "aria-describedby": vue.unref(scopedContentId),
           tabindex: _ctx.disabled ? -1 : 0,
+          type: "button",
           onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleHeaderClick) && vue.unref(handleHeaderClick)(...args)),
           onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers((...args) => vue.unref(handleEnterClick) && vue.unref(handleEnterClick)(...args), ["stop", "prevent"]), ["space", "enter"])),
           onFocus: _cache[2] || (_cache[2] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),

package/lib/components/collapse/src/collapse-item2.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-item2.js","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <button\n      :id=\"scopedHeadId\"\n      :class=\"headKls\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"scopedContentId\"\n      :aria-describedby=\"scopedContentId\"\n      :tabindex=\"disabled ? -1 : 0\"\n      @click=\"handleHeaderClick\"\n      @keydown.space.enter.stop.prevent=\"handleEnterClick\"\n      @focus=\"handleFocus\"\n      @blur=\"focusing = false\"\n    >\n      <slot name=\"title\">{{ title }}</slot>\n      <el-icon :class=\"arrowKls\">\n        <arrow-right />\n      </el-icon>\n    </button>\n\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"scopedContentId\"\n        role=\"region\"\n        :class=\"itemWrapperKls\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"scopedHeadId\"\n      >\n        <div :class=\"itemContentKls\">\n          <slot />\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons-vue'\nimport { collapseItemProps } from './collapse-item'\nimport { useCollapseItem, useCollapseItemDOM } from './use-collapse-item'\n\ndefineOptions({\n  name: 'ElCollapseItem',\n})\n\nconst props = defineProps(collapseItemProps)\nconst {\n  focusing,\n  id,\n  isActive,\n  handleFocus,\n  handleHeaderClick,\n  handleEnterClick,\n} = useCollapseItem(props)\n\nconst {\n  arrowKls,\n  headKls,\n  rootKls,\n  itemWrapperKls,\n  itemContentKls,\n  scopedContentId,\n  scopedHeadId,\n} = useCollapseItemDOM(props, { focusing, isActive, id })\n\ndefineExpose({\n  /** @description current collapse-item whether active */\n  isActive,\n})\n</script>\n"],"names":["useCollapseItem","useCollapseItemDOM"],"mappings":";;;;;;;;;;;;;;uCA4Cc,CAAA;AAAA,EACZ,IAAM,EAAA,gBAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAGA,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,EAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,KAAA,GACEA,gCAAgB,KAAK,CAAA,CAAA;AAEzB,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,KAAA,GACEC,mCAAmB,KAAO,EAAA,EAAE,QAAU,EAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAExD,IAAa,MAAA,CAAA;AAAA,MAEX,QAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-item2.js","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <button\n      :id=\"scopedHeadId\"\n      :class=\"headKls\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"scopedContentId\"\n      :aria-describedby=\"scopedContentId\"\n      :tabindex=\"disabled ? -1 : 0\"\n      type=\"button\"\n      @click=\"handleHeaderClick\"\n      @keydown.space.enter.stop.prevent=\"handleEnterClick\"\n      @focus=\"handleFocus\"\n      @blur=\"focusing = false\"\n    >\n      <slot name=\"title\">{{ title }}</slot>\n      <el-icon :class=\"arrowKls\">\n        <arrow-right />\n      </el-icon>\n    </button>\n\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"scopedContentId\"\n        role=\"region\"\n        :class=\"itemWrapperKls\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"scopedHeadId\"\n      >\n        <div :class=\"itemContentKls\">\n          <slot />\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { ArrowRight } from '@element-plus/icons-vue'\nimport { collapseItemProps } from './collapse-item'\nimport { useCollapseItem, useCollapseItemDOM } from './use-collapse-item'\n\ndefineOptions({\n  name: 'ElCollapseItem',\n})\n\nconst props = defineProps(collapseItemProps)\nconst {\n  focusing,\n  id,\n  isActive,\n  handleFocus,\n  handleHeaderClick,\n  handleEnterClick,\n} = useCollapseItem(props)\n\nconst {\n  arrowKls,\n  headKls,\n  rootKls,\n  itemWrapperKls,\n  itemContentKls,\n  scopedContentId,\n  scopedHeadId,\n} = useCollapseItemDOM(props, { focusing, isActive, id })\n\ndefineExpose({\n  /** @description current collapse-item whether active */\n  isActive,\n})\n</script>\n"],"names":["useCollapseItem","useCollapseItemDOM"],"mappings":";;;;;;;;;;;;;;uCA6Cc,CAAA;AAAA,EACZ,IAAM,EAAA,gBAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAGA,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,EAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,KAAA,GACEA,gCAAgB,KAAK,CAAA,CAAA;AAEzB,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,KAAA,GACEC,mCAAmB,KAAO,EAAA,EAAE,QAAU,EAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAExD,IAAa,MAAA,CAAA;AAAA,MAEX,QAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -46,9 +46,11 @@ export declare const ElColorPicker: import("element-plus/es/utils").SFCWithInsta
     }>> & {
         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/es/utils").SFCWithInsta
             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>;
@@ -6656,7 +6664,7 @@ export declare const ElColorPicker: import("element-plus/es/utils").SFCWithInsta
     btnKls: import("vue").ComputedRef<string[]>;
     displayedRgb: (color: import("./src/utils/color").default, showAlpha: boolean) => string;
     setShowPicker: (value: boolean) => void;
-    debounceSetShowPicker: import("lodash").DebouncedFunc<(value: boolean) => void>;
+    debounceSetShowPicker: import("lodash").DebouncedFuncLeading<(value: boolean) => void>;
     show: () => void;
     hide: () => void;
     resetColor: () => void;
@@ -6664,6 +6672,11 @@ export declare const ElColorPicker: import("element-plus/es/utils").SFCWithInsta
     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/es/utils").SFCWithInstall<import("vue").DefineComponent<{
         readonly size: {
             readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
@@ -10834,6 +10847,8 @@ export declare const ElColorPicker: import("element-plus/es/utils").SFCWithInsta
     "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/es/utils").SFCWithInsta
 }>> & {
     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/lib/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/lib/components/color-picker/src/color-picker.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker.js","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":["buildProps","useSizeProp","definePropType","UPDATE_MODEL_EVENT","isString","isNil","CHANGE_EVENT"],"mappings":";;;;;;;;;;;;;AAIY,MAAC,gBAAgB,GAAGA,kBAAU,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,EAAEC,iBAAW;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,EAAEC,sBAAc,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,CAACC,wBAAkB,GAAG,CAAC,GAAG,KAAKC,eAAQ,CAAC,GAAG,CAAC,IAAIC,mBAAK,CAAC,GAAG,CAAC;AAC5D,EAAE,CAACC,kBAAY,GAAG,CAAC,GAAG,KAAKF,eAAQ,CAAC,GAAG,CAAC,IAAIC,mBAAK,CAAC,GAAG,CAAC;AACtD,EAAE,YAAY,EAAE,CAAC,GAAG,KAAKD,eAAQ,CAAC,GAAG,CAAC,IAAIC,mBAAK,CAAC,GAAG,CAAC;AACpD,EAAE;AACU,MAAC,qBAAqB,GAAG,MAAM,CAAC,uBAAuB;;;;;;"}
+{"version":3,"file":"color-picker.js","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":["buildProps","useSizeProp","definePropType","UPDATE_MODEL_EVENT","isString","isNil","CHANGE_EVENT"],"mappings":";;;;;;;;;;;;;AAIY,MAAC,gBAAgB,GAAGA,kBAAU,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,EAAEC,iBAAW;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,EAAEC,sBAAc,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,CAACC,wBAAkB,GAAG,CAAC,GAAG,KAAKC,eAAQ,CAAC,GAAG,CAAC,IAAIC,mBAAK,CAAC,GAAG,CAAC;AAC5D,EAAE,CAACC,kBAAY,GAAG,CAAC,GAAG,KAAKF,eAAQ,CAAC,GAAG,CAAC,IAAIC,mBAAK,CAAC,GAAG,CAAC;AACtD,EAAE,YAAY,EAAE,CAAC,GAAG,KAAKD,eAAQ,CAAC,GAAG,CAAC,IAAIC,mBAAK,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/lib/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/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>;
@@ -6658,7 +6666,7 @@ declare const _default: import("vue").DefineComponent<{
     btnKls: import("vue").ComputedRef<string[]>;
     displayedRgb: (color: Color, showAlpha: boolean) => string;
     setShowPicker: (value: boolean) => void;
-    debounceSetShowPicker: import("lodash").DebouncedFunc<(value: boolean) => void>;
+    debounceSetShowPicker: import("lodash").DebouncedFuncLeading<(value: boolean) => void>;
     show: () => void;
     hide: () => void;
     resetColor: () => void;
@@ -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/es/utils").SFCWithInstall<import("vue").DefineComponent<{
         readonly size: {
             readonly type: import("vue").PropType<import("element-plus/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/lib/components/color-picker/src/color-picker2.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var lodashUnified = require('lodash-unified');
-var index$4 = require('../../button/index.js');
-var index$6 = require('../../icon/index.js');
+var index$5 = require('../../button/index.js');
+var index$7 = require('../../icon/index.js');
 require('../../../directives/index.js');
-var index$2 = require('../../tooltip/index.js');
-var index$3 = require('../../input/index.js');
+var index$3 = require('../../tooltip/index.js');
+var index$4 = require('../../input/index.js');
 require('../../form/index.js');
 require('../../../hooks/index.js');
 require('../../../constants/index.js');
@@ -25,11 +25,14 @@ var index = require('../../../hooks/use-locale/index.js');
 var index$1 = require('../../../hooks/use-namespace/index.js');
 var useFormItem = require('../../form/src/hooks/use-form-item.js');
 var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
+var index$2 = require('../../../hooks/use-focus-controller/index.js');
 var event = require('../../../constants/event.js');
 var error = require('../../../utils/error.js');
-var index$5 = require('../../../directives/click-outside/index.js');
+var aria = require('../../../constants/aria.js');
+var index$6 = require('../../../directives/click-outside/index.js');
 
-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__ = vue.defineComponent({
   name: "ElColorPicker"
 });
@@ -51,6 +54,27 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const sv = vue.ref();
     const alpha = vue.ref();
     const popper = vue.ref();
+    const triggerRef = vue.ref();
+    const inputRef = vue.ref();
+    const {
+      isFocused,
+      handleFocus: _handleFocus,
+      handleBlur
+    } = index$2.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$1 = vue.reactive(new color["default"]({
       enableAlpha: props.showAlpha,
@@ -79,7 +103,8 @@ const _sfc_main = /* @__PURE__ */ vue.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) {
@@ -92,7 +117,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     function setShowPicker(value) {
       showPicker.value = value;
     }
-    const debounceSetShowPicker = lodashUnified.debounce(setShowPicker, 100);
+    const debounceSetShowPicker = lodashUnified.debounce(setShowPicker, 100, { leading: true });
     function show() {
       if (colorDisabled.value)
         return;
@@ -150,6 +175,41 @@ const _sfc_main = /* @__PURE__ */ vue.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 aria.EVENT_CODE.enter:
+        case aria.EVENT_CODE.space:
+          event.preventDefault();
+          event.stopPropagation();
+          show();
+          inputRef.value.focus();
+          break;
+        case aria.EVENT_CODE.esc:
+          handleEsc(event);
+          break;
+      }
+    }
+    function focus() {
+      triggerRef.value.focus();
+    }
+    function blur() {
+      triggerRef.value.blur();
+    }
     vue.onMounted(() => {
       if (props.modelValue) {
         customInput.value = currentColor.value;
@@ -187,10 +247,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     expose({
       color: color$1,
       show,
-      hide
+      hide,
+      focus,
+      blur
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(index$2.ElTooltip), {
+      return vue.openBlock(), vue.createBlock(vue.unref(index$3.ElTooltip), {
         ref_key: "popper",
         ref: popper,
         visible: showPicker.value,
@@ -203,10 +265,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         effect: "light",
         trigger: "click",
         transition: `${vue.unref(ns).namespace.value}-zoom-in-top`,
-        persistent: ""
+        persistent: "",
+        onHide: _cache[2] || (_cache[2] = ($event) => setShowPicker(false))
       }, {
         content: vue.withCtx(() => [
-          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", null, [
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            onKeydown: vue.withKeys(handleEsc, ["esc"])
+          }, [
             vue.createElementVNode("div", {
               class: vue.normalizeClass(vue.unref(ns).be("dropdown", "main-wrapper"))
             }, [
@@ -241,7 +306,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("span", {
                 class: vue.normalizeClass(vue.unref(ns).be("dropdown", "value"))
               }, [
-                vue.createVNode(vue.unref(index$3.ElInput), {
+                vue.createVNode(vue.unref(index$4.ElInput), {
+                  ref_key: "inputRef",
+                  ref: inputRef,
                   modelValue: customInput.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
                   "validate-event": false,
@@ -250,7 +317,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   onBlur: handleConfirm
                 }, null, 8, ["modelValue", "onKeyup"])
               ], 2),
-              vue.createVNode(vue.unref(index$4.ElButton), {
+              vue.createVNode(vue.unref(index$5.ElButton), {
                 class: vue.normalizeClass(vue.unref(ns).be("dropdown", "link-btn")),
                 text: "",
                 size: "small",
@@ -261,7 +328,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 ]),
                 _: 1
               }, 8, ["class"]),
-              vue.createVNode(vue.unref(index$4.ElButton), {
+              vue.createVNode(vue.unref(index$5.ElButton), {
                 plain: "",
                 size: "small",
                 class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btn")),
@@ -273,20 +340,25 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 _: 1
               }, 8, ["class"])
             ], 2)
-          ])), [
-            [vue.unref(index$5["default"]), hide]
+          ], 40, _hoisted_1)), [
+            [vue.unref(index$6["default"]), handleClickOutside]
           ])
         ]),
         default: vue.withCtx(() => [
           vue.createElementVNode("div", {
             id: vue.unref(buttonId),
+            ref_key: "triggerRef",
+            ref: triggerRef,
             class: vue.normalizeClass(vue.unref(btnKls)),
             role: "button",
             "aria-label": vue.unref(buttonAriaLabel),
             "aria-labelledby": vue.unref(buttonAriaLabelledby),
             "aria-description": vue.unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
-            tabindex: _ctx.tabindex,
-            onKeydown: vue.withKeys(handleTrigger, ["enter"])
+            "aria-disabled": vue.unref(colorDisabled),
+            tabindex: vue.unref(colorDisabled) ? -1 : _ctx.tabindex,
+            onKeydown: handleKeyDown,
+            onFocus: handleFocus,
+            onBlur: _cache[1] || (_cache[1] = (...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args))
           }, [
             vue.unref(colorDisabled) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
@@ -305,7 +377,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     backgroundColor: vue.unref(displayedColor)
                   })
                 }, [
-                  vue.withDirectives(vue.createVNode(vue.unref(index$6.ElIcon), {
+                  vue.withDirectives(vue.createVNode(vue.unref(index$7.ElIcon), {
                     class: vue.normalizeClass([vue.unref(ns).be("picker", "icon"), vue.unref(ns).is("icon-arrow-down")])
                   }, {
                     default: vue.withCtx(() => [
@@ -315,7 +387,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   }, 8, ["class"]), [
                     [vue.vShow, _ctx.modelValue || showPanelColor.value]
                   ]),
-                  vue.withDirectives(vue.createVNode(vue.unref(index$6.ElIcon), {
+                  vue.withDirectives(vue.createVNode(vue.unref(index$7.ElIcon), {
                     class: vue.normalizeClass([vue.unref(ns).be("picker", "empty"), vue.unref(ns).is("icon-close")])
                   }, {
                     default: vue.withCtx(() => [
@@ -328,7 +400,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 ], 6)
               ], 2)
             ], 2)
-          ], 42, _hoisted_1)
+          ], 42, _hoisted_2)
         ]),
         _: 1
       }, 8, ["visible", "popper-class", "transition"]);