@element-plus/nightly 0.0.20220915 → 0.0.20220916

package/lib/components/checkbox/src/checkbox-button.js

@@ -4,15 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 require('../../../hooks/index.js');
+var checkbox$1 = require('../../../tokens/checkbox.js');
+require('./composables/index.js');
 var checkbox = require('./checkbox.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var useCheckbox = require('./composables/use-checkbox.js');
 var index = require('../../../hooks/use-namespace/index.js');
 
 const _hoisted_1 = ["name", "tabindex", "disabled", "true-value", "false-value"];
 const _hoisted_2 = ["name", "tabindex", "disabled", "value"];
-const __default__ = {
+const __default__ = vue.defineComponent({
   name: "ElCheckboxButton"
-};
+});
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...__default__,
   props: checkbox.checkboxProps,
@@ -20,8 +23,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     const props = __props;
     const slots = vue.useSlots();
-    const { focus, isChecked, isDisabled, size, model, handleChange } = checkbox.useCheckbox(props, slots);
-    const { checkboxGroup } = checkbox.useCheckboxGroup();
+    const {
+      isFocused,
+      isChecked,
+      isDisabled,
+      checkboxButtonSize,
+      model,
+      handleChange
+    } = useCheckbox.useCheckbox(props, slots);
+    const checkboxGroup = vue.inject(checkbox$1.checkboxGroupContextKey);
     const ns = index.useNamespace("checkbox");
     const activeStyle = vue.computed(() => {
       var _a, _b, _c, _d;
@@ -37,10 +47,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("label", {
         class: vue.normalizeClass([
           vue.unref(ns).b("button"),
-          vue.unref(ns).bm("button", vue.unref(size)),
+          vue.unref(ns).bm("button", vue.unref(checkboxButtonSize)),
           vue.unref(ns).is("disabled", vue.unref(isDisabled)),
           vue.unref(ns).is("checked", vue.unref(isChecked)),
-          vue.unref(ns).is("focus", vue.unref(focus))
+          vue.unref(ns).is("focus", vue.unref(isFocused))
         ])
       }, [
         _ctx.trueLabel || _ctx.falseLabel ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -54,8 +64,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           "true-value": _ctx.trueLabel,
           "false-value": _ctx.falseLabel,
           onChange: _cache[1] || (_cache[1] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)),
-          onFocus: _cache[2] || (_cache[2] = ($event) => focus.value = true),
-          onBlur: _cache[3] || (_cache[3] = ($event) => focus.value = false)
+          onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true),
+          onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false)
         }, null, 42, _hoisted_1)), [
           [vue.vModelCheckbox, vue.unref(model)]
         ]) : vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -68,8 +78,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           disabled: vue.unref(isDisabled),
           value: _ctx.label,
           onChange: _cache[5] || (_cache[5] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)),
-          onFocus: _cache[6] || (_cache[6] = ($event) => focus.value = true),
-          onBlur: _cache[7] || (_cache[7] = ($event) => focus.value = false)
+          onFocus: _cache[6] || (_cache[6] = ($event) => isFocused.value = true),
+          onBlur: _cache[7] || (_cache[7] = ($event) => isFocused.value = false)
         }, null, 42, _hoisted_2)), [
           [vue.vModelCheckbox, vue.unref(model)]
         ]),

package/lib/components/checkbox/src/checkbox-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-button.js","sources":["../../../../../../packages/components/checkbox/src/checkbox-button.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"[\n      ns.b('button'),\n      ns.bm('button', size),\n      ns.is('disabled', isDisabled),\n      ns.is('checked', isChecked),\n      ns.is('focus', focus),\n    ]\"\n  >\n    <input\n      v-if=\"trueLabel || falseLabel\"\n      v-model=\"model\"\n      :class=\"ns.be('button', 'original')\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :tabindex=\"tabindex\"\n      :disabled=\"isDisabled\"\n      :true-value=\"trueLabel\"\n      :false-value=\"falseLabel\"\n      @change=\"handleChange\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n    />\n    <input\n      v-else\n      v-model=\"model\"\n      :class=\"ns.be('button', 'original')\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :tabindex=\"tabindex\"\n      :disabled=\"isDisabled\"\n      :value=\"label\"\n      @change=\"handleChange\"\n      @focus=\"focus = true\"\n      @blur=\"focus = false\"\n    />\n\n    <span\n      v-if=\"$slots.default || label\"\n      :class=\"ns.be('button', 'inner')\"\n      :style=\"isChecked ? activeStyle : undefined\"\n    >\n      <slot>{{ label }}</slot>\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, useSlots } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport {\n  checkboxEmits,\n  checkboxProps,\n  useCheckbox,\n  useCheckboxGroup,\n} from './checkbox'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElCheckboxButton',\n})\n\nconst props = defineProps(checkboxProps)\ndefineEmits(checkboxEmits)\nconst slots = useSlots()\n\nconst { focus, isChecked, isDisabled, size, model, handleChange } = useCheckbox(\n  props,\n  slots\n)\nconst { checkboxGroup } = useCheckboxGroup()\nconst ns = useNamespace('checkbox')\n\nconst activeStyle = computed<CSSProperties>(() => {\n  const fillValue = checkboxGroup?.fill?.value ?? ''\n  return {\n    backgroundColor: fillValue,\n    borderColor: fillValue,\n    color: checkboxGroup?.textColor?.value ?? '',\n    boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : undefined,\n  }\n})\n</script>\n"],"names":["useSlots","useCheckbox","useCheckboxGroup","useNamespace","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiEA,IAAA,MAAA,QAAAA,YAAA,EAAA,CAAA;AAEA,IAAA,MAAA,EAAA,OAAA,SAAA,EAAA,UAAA,EAAA,MAAA,KAAA,EAAA,YAAA,EAAA,GAAAC,oBACA,CAAA,KAAA,EACA,KACA,CAAA,CAAA;AACA,IAAA,MAAA,EAAA,kBAAAC,yBAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAAC,mBAAA,UAAA,CAAA,CAAA;AAEA,IAAA,MAAA,WAAA,GAAAC,aAAA,MAAA;AACA,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AACA,MAAA,MAAA,SAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,IAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,KAAA,IAAA,GAAA,EAAA,GAAA,EAAA,CAAA;AAAA,MAAA,OACA;AAAA,QACA,eAAA,EAAA,SAAA;AAAA,QACA,WAAA,EAAA,SAAA;AAAA,QACA,KAAA,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,SAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,KAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACA,SAAA,EAAA,SAAA,GAAA,CAAA,WAAA,EAAA,SAAA,CAAA,CAAA,GAAA,KAAA,CAAA;AAAA,OACA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox-button.js","sources":["../../../../../../packages/components/checkbox/src/checkbox-button.vue"],"sourcesContent":["<template>\n  <label\n    :class=\"[\n      ns.b('button'),\n      ns.bm('button', checkboxButtonSize),\n      ns.is('disabled', isDisabled),\n      ns.is('checked', isChecked),\n      ns.is('focus', isFocused),\n    ]\"\n  >\n    <input\n      v-if=\"trueLabel || falseLabel\"\n      v-model=\"model\"\n      :class=\"ns.be('button', 'original')\"\n      type=\"checkbox\"\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    />\n    <input\n      v-else\n      v-model=\"model\"\n      :class=\"ns.be('button', 'original')\"\n      type=\"checkbox\"\n      :name=\"name\"\n      :tabindex=\"tabindex\"\n      :disabled=\"isDisabled\"\n      :value=\"label\"\n      @change=\"handleChange\"\n      @focus=\"isFocused = true\"\n      @blur=\"isFocused = false\"\n    />\n\n    <span\n      v-if=\"$slots.default || label\"\n      :class=\"ns.be('button', 'inner')\"\n      :style=\"isChecked ? activeStyle : undefined\"\n    >\n      <slot>{{ label }}</slot>\n    </span>\n  </label>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, useSlots } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { checkboxGroupContextKey } from '@element-plus/tokens/checkbox'\nimport { useCheckbox } from './composables'\nimport { checkboxEmits, checkboxProps } from './checkbox'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElCheckboxButton',\n})\n\nconst props = defineProps(checkboxProps)\ndefineEmits(checkboxEmits)\nconst slots = useSlots()\n\nconst {\n  isFocused,\n  isChecked,\n  isDisabled,\n  checkboxButtonSize,\n  model,\n  handleChange,\n} = useCheckbox(props, slots)\nconst checkboxGroup = inject(checkboxGroupContextKey)\nconst ns = useNamespace('checkbox')\n\nconst activeStyle = computed<CSSProperties>(() => {\n  const fillValue = checkboxGroup?.fill?.value ?? ''\n  return {\n    backgroundColor: fillValue,\n    borderColor: fillValue,\n    color: checkboxGroup?.textColor?.value ?? '',\n    boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : undefined,\n  }\n})\n</script>\n"],"names":["useSlots","useCheckbox","inject","checkboxGroupContextKey","useNamespace","computed"],"mappings":";;;;;;;;;;;;;;;uCAwDc,CAAA;AAAA,EACZ,IAAM,EAAA,kBAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,QAAQA,YAAS,EAAA,CAAA;AAEvB,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,kBAAA;AAAA,MACA,KAAA;AAAA,MACA,YAAA;AAAA,KACE,GAAAC,uBAAA,CAAY,OAAO,KAAK,CAAA,CAAA;AAC5B,IAAM,MAAA,aAAA,GAAgBC,WAAOC,kCAAuB,CAAA,CAAA;AACpD,IAAM,MAAA,EAAA,GAAKC,mBAAa,UAAU,CAAA,CAAA;AAElC,IAAM,MAAA,WAAA,GAAcC,aAAwB,MAAM;AAChD,MAAM,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAY,CAAe;AACjC,MAAO,MAAA,SAAA,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,IAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,KAAA,IAAA,GAAA,EAAA,GAAA,EAAA,CAAA;AAAA,MAAA,OACY;AAAA,QACjB,eAAa,EAAA,SAAA;AAAA,QACb,WAAsB,EAAA,SAAA;AAAoB,QAC1C,KAAA,EAAA,CAAA,EAAA,GAAuB,CAAA,EAAA,GAAA,aAAA,IAAA,IAA4B,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,SAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,KAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,QACrD,SAAA,EAAA,SAAA,GAAA,CAAA,WAAA,EAAA,SAAA,CAAA,CAAA,GAAA,KAAA,CAAA;AAAA,OACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -2,7 +2,7 @@ import type { CSSProperties } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
-        default: () => undefined;
+        default: undefined;
     };
     label: {
         type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
@@ -46,7 +46,7 @@ declare const _default: import("vue").DefineComponent<{
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         modelValue: {
             type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
-            default: () => undefined;
+            default: undefined;
         };
         label: {
             type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
@@ -93,13 +93,16 @@ declare const _default: import("vue").DefineComponent<{
     slots: Readonly<{
         [name: string]: import("vue").Slot | undefined;
     }>;
-    focus: import("vue").Ref<boolean>;
+    isFocused: import("vue").Ref<boolean>;
     isChecked: import("vue").ComputedRef<boolean>;
     isDisabled: import("vue").ComputedRef<boolean>;
-    size: import("vue").ComputedRef<"" | "default" | "small" | "large">;
+    checkboxButtonSize: import("vue").ComputedRef<"" | "default" | "small" | "large">;
     model: import("vue").WritableComputedRef<any>;
     handleChange: (e: Event) => void;
-    checkboxGroup: import("./checkbox.type").ICheckboxGroupInstance;
+    checkboxGroup: ({
+        modelValue?: import("vue").WritableComputedRef<any> | undefined;
+        changeEvent?: ((...args: any) => any) | undefined;
+    } & import("vue").ToRefs<Pick<import("./checkbox-group").CheckboxGroupProps, "size" | "disabled" | "validateEvent" | "min" | "max" | "fill" | "textColor">>) | undefined;
     ns: {
         namespace: import("vue").Ref<string>;
         b: (blockSuffix?: string) => string;
@@ -125,7 +128,7 @@ declare const _default: import("vue").DefineComponent<{
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
-        default: () => undefined;
+        default: undefined;
     };
     label: {
         type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
@@ -171,9 +174,9 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     disabled: boolean;
     name: string;
-    id: string;
     modelValue: string | number | boolean;
     validateEvent: boolean;
+    id: string;
     border: boolean;
     indeterminate: boolean;
     checked: boolean;

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

@@ -0,0 +1,27 @@
+import type { ExtractPropTypes } from 'vue';
+import type checkboxGroup from './checkbox-group.vue';
+import type { CheckboxValueType } from './checkbox';
+export declare const checkboxGroupProps: {
+    readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | number)[]) | (() => (string | number)[]) | ((new (...args: any[]) => (string | number)[]) | (() => (string | number)[]))[], unknown, unknown, () => never[], boolean>;
+    readonly disabled: BooleanConstructor;
+    readonly min: NumberConstructor;
+    readonly max: NumberConstructor;
+    readonly size: {
+        readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly label: StringConstructor;
+    readonly fill: StringConstructor;
+    readonly textColor: StringConstructor;
+    readonly tag: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
+    readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+};
+export declare const checkboxGroupEmits: {
+    "update:modelValue": (val: CheckboxValueType[]) => boolean;
+    change: (val: CheckboxValueType[]) => boolean;
+};
+export declare type CheckboxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>;
+export declare type CheckboxGroupEmits = typeof checkboxGroupEmits;
+export declare type CheckboxGroupInstance = InstanceType<typeof checkboxGroup>;

package/lib/components/checkbox/src/checkbox-group.js

@@ -2,76 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
 require('../../../constants/index.js');
-require('../../../utils/index.js');
 require('../../../hooks/index.js');
-var checkbox = require('./checkbox.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+require('../../../utils/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 var index = require('../../../hooks/use-common-props/index.js');
-var index$1 = require('../../../hooks/use-namespace/index.js');
 var event = require('../../../constants/event.js');
-var error = require('../../../utils/error.js');
+var shared = require('@vue/shared');
 
-const __default__ = {
-  name: "ElCheckboxGroup"
-};
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: checkbox.useCheckboxGroupProps,
-  emits: checkbox.checkboxGroupEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    const { elFormItem } = checkbox.useCheckboxGroup();
-    const { groupId, isLabeledByFormItem } = checkbox.useCheckboxGroupId(props, {
-      elFormItem
-    });
-    const checkboxGroupSize = index.useSize();
-    const ns = index$1.useNamespace("checkbox");
-    const changeEvent = (value) => {
-      emit(event.UPDATE_MODEL_EVENT, value);
-      vue.nextTick(() => {
-        emit("change", value);
-      });
-    };
-    const modelValue = vue.computed({
-      get() {
-        return props.modelValue;
-      },
-      set(val) {
-        changeEvent(val);
-      }
-    });
-    vue.provide("CheckboxGroup", {
-      name: "ElCheckboxGroup",
-      ...vue.toRefs(props),
-      modelValue,
-      checkboxGroupSize,
-      changeEvent
-    });
-    vue.watch(() => props.modelValue, () => {
-      if (props.validateEvent) {
-        elFormItem == null ? void 0 : elFormItem.validate("change").catch((err) => error.debugWarn(err));
-      }
-    });
-    return (_ctx, _cache) => {
-      var _a;
-      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
-        id: vue.unref(groupId),
-        class: vue.normalizeClass(vue.unref(ns).b("group")),
-        role: "group",
-        "aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.label || "checkbox-group" : void 0,
-        "aria-labelledby": vue.unref(isLabeledByFormItem) ? (_a = vue.unref(elFormItem)) == null ? void 0 : _a.labelId : void 0
-      }, {
-        default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["id", "class", "aria-label", "aria-labelledby"]);
-    };
+const checkboxGroupProps = runtime.buildProps({
+  modelValue: {
+    type: runtime.definePropType(Array),
+    default: () => []
+  },
+  disabled: Boolean,
+  min: Number,
+  max: Number,
+  size: index.useSizeProp,
+  label: String,
+  fill: String,
+  textColor: String,
+  tag: {
+    type: String,
+    default: "div"
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
   }
 });
-var CheckboxGroup = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/checkbox/src/checkbox-group.vue"]]);
+const checkboxGroupEmits = {
+  [event.UPDATE_MODEL_EVENT]: (val) => shared.isArray(val),
+  change: (val) => shared.isArray(val)
+};
 
-exports["default"] = CheckboxGroup;
+exports.checkboxGroupEmits = checkboxGroupEmits;
+exports.checkboxGroupProps = checkboxGroupProps;
 //# sourceMappingURL=checkbox-group.js.map

package/lib/components/checkbox/src/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","sources":["../../../../../../packages/components/checkbox/src/checkbox-group.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"tag\"\n    :id=\"groupId\"\n    :class=\"ns.b('group')\"\n    role=\"group\"\n    :aria-label=\"!isLabeledByFormItem ? label || 'checkbox-group' : undefined\"\n    :aria-labelledby=\"isLabeledByFormItem ? elFormItem?.labelId : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, toRefs, watch } from 'vue'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport { useNamespace, useSize } from '@element-plus/hooks'\nimport {\n  checkboxGroupEmits,\n  useCheckboxGroup,\n  useCheckboxGroupId,\n  useCheckboxGroupProps,\n} from './checkbox'\nimport type { CheckboxValueType } from './checkbox'\n\ndefineOptions({\n  name: 'ElCheckboxGroup',\n})\n\nconst props = defineProps(useCheckboxGroupProps)\nconst emit = defineEmits(checkboxGroupEmits)\n\nconst { elFormItem } = useCheckboxGroup()\nconst { groupId, isLabeledByFormItem } = useCheckboxGroupId(props, {\n  elFormItem,\n})\nconst checkboxGroupSize = useSize()\nconst ns = useNamespace('checkbox')\n\nconst changeEvent = (value: CheckboxValueType[]) => {\n  emit(UPDATE_MODEL_EVENT, value)\n  nextTick(() => {\n    emit('change', value)\n  })\n}\n\nconst modelValue = computed({\n  get() {\n    return props.modelValue\n  },\n  set(val: CheckboxValueType[]) {\n    changeEvent(val)\n  },\n})\n\nprovide('CheckboxGroup', {\n  name: 'ElCheckboxGroup',\n  ...toRefs(props),\n  modelValue,\n  checkboxGroupSize,\n  changeEvent,\n})\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.validateEvent) {\n      elFormItem?.validate('change').catch((err) => debugWarn(err))\n    }\n  }\n)\n</script>\n"],"names":["useCheckboxGroup","useCheckboxGroupId","useSize","useNamespace","UPDATE_MODEL_EVENT","nextTick","computed","provide","toRefs","watch","debugWarn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAA,MAAA,EAAA,eAAAA,yBAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,OAAA,EAAA,mBAAA,EAAA,GAAAC,2BAAA,CAAA,KAAA,EAAA;AAAA,MACA,UAAA;AAAA,KACA,CAAA,CAAA;AACA,IAAA,MAAA,oBAAAC,aAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAAC,qBAAA,UAAA,CAAA,CAAA;AAEA,IAAA,MAAA,WAAA,GAAA,CAAA,KAAA,KAAA;AACA,MAAA,IAAA,CAAAC,0BAAA,KAAA,CAAA,CAAA;AACA,MAAAC,YAAA,CAAA,MAAA;AACA,QAAA,IAAA,CAAA,UAAA,KAAA,CAAA,CAAA;AAAA,OACA,CAAA,CAAA;AAAA,KACA,CAAA;AAEA,IAAA,MAAA,aAAAC,YAAA,CAAA;AAAA,MACA,GAAA,GAAA;AACA,QAAA,OAAA,KAAA,CAAA,UAAA,CAAA;AAAA,OACA;AAAA,MACA,IAAA,GAAA,EAAA;AACA,QAAA,WAAA,CAAA,GAAA,CAAA,CAAA;AAAA,OACA;AAAA,KACA,CAAA,CAAA;AAEA,IAAAC,WAAA,CAAA,eAAA,EAAA;AAAA,MACA,IAAA,EAAA,iBAAA;AAAA,MACA,GAAAC,WAAA,KAAA,CAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,WAAA;AAAA,KACA,CAAA,CAAA;AAEA,IACAC,SAAA,CAAA,MAAA,KAAA,CAAA,UAAA,EACA,MAAA;AACA,MAAA,IAAA,MAAA,aAAA,EAAA;AACA,QAAA,UAAA,IAAA,IAAA,GAAA,SAAA,UAAA,CAAA,QAAA,CAAA,SAAA,CAAA,KAAA,CAAA,CAAA,GAAA,KAAAC,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA;AAAA,OACA;AAAA,KAEA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox-group.js","sources":["../../../../../../packages/components/checkbox/src/checkbox-group.ts"],"sourcesContent":["import { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useSizeProp } from '@element-plus/hooks'\nimport { buildProps, definePropType, isArray } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type checkboxGroup from './checkbox-group.vue'\nimport type { CheckboxValueType } from './checkbox'\n\nexport const checkboxGroupProps = buildProps({\n  modelValue: {\n    type: definePropType<Array<string | number>>(Array),\n    default: () => [],\n  },\n  disabled: Boolean,\n  min: Number,\n  max: Number,\n  size: useSizeProp,\n  label: String,\n  fill: String,\n  textColor: String,\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\n\nexport const checkboxGroupEmits = {\n  [UPDATE_MODEL_EVENT]: (val: CheckboxValueType[]) => isArray(val),\n  change: (val: CheckboxValueType[]) => isArray(val),\n}\n\nexport type CheckboxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>\nexport type CheckboxGroupEmits = typeof checkboxGroupEmits\nexport type CheckboxGroupInstance = InstanceType<typeof checkboxGroup>\n"],"names":["buildProps","definePropType","useSizeProp","UPDATE_MODEL_EVENT","isArray"],"mappings":";;;;;;;;;;;;AAGY,MAAC,kBAAkB,GAAGA,kBAAU,CAAC;AAC7C,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAEC,sBAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,EAAE;AACrB,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,GAAG,EAAE,MAAM;AACb,EAAE,GAAG,EAAE,MAAM;AACb,EAAE,IAAI,EAAEC,iBAAW;AACnB,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,SAAS,EAAE,MAAM;AACnB,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,aAAa,EAAE;AACjB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,kBAAkB,GAAG;AAClC,EAAE,CAACC,wBAAkB,GAAG,CAAC,GAAG,KAAKC,cAAO,CAAC,GAAG,CAAC;AAC7C,EAAE,MAAM,EAAE,CAAC,GAAG,KAAKA,cAAO,CAAC,GAAG,CAAC;AAC/B;;;;;"}

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

@@ -1,102 +1,42 @@
 import type { CheckboxValueType } from './checkbox';
 declare const _default: import("vue").DefineComponent<{
-    modelValue: {
-        type: import("vue").PropType<(string | number)[]>;
-        default: () => never[];
-    };
-    disabled: BooleanConstructor;
-    min: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    max: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    size: {
+    readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | number)[]) | (() => (string | number)[]) | ((new (...args: any[]) => (string | number)[]) | (() => (string | number)[]))[], unknown, unknown, () => never[], boolean>;
+    readonly disabled: BooleanConstructor;
+    readonly min: NumberConstructor;
+    readonly max: NumberConstructor;
+    readonly size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    fill: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    textColor: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    validateEvent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    readonly label: StringConstructor;
+    readonly fill: StringConstructor;
+    readonly textColor: StringConstructor;
+    readonly tag: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
+    readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-        modelValue: {
-            type: import("vue").PropType<(string | number)[]>;
-            default: () => never[];
-        };
-        disabled: BooleanConstructor;
-        min: {
-            type: NumberConstructor;
-            default: undefined;
-        };
-        max: {
-            type: NumberConstructor;
-            default: undefined;
-        };
-        size: {
+        readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | number)[]) | (() => (string | number)[]) | ((new (...args: any[]) => (string | number)[]) | (() => (string | number)[]))[], unknown, unknown, () => never[], boolean>;
+        readonly disabled: BooleanConstructor;
+        readonly min: NumberConstructor;
+        readonly max: NumberConstructor;
+        readonly size: {
             readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
             readonly required: false;
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;
         };
-        id: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        label: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        fill: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        textColor: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        tag: {
-            type: StringConstructor;
-            default: string;
-        };
-        validateEvent: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
+        readonly label: StringConstructor;
+        readonly fill: StringConstructor;
+        readonly textColor: StringConstructor;
+        readonly tag: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
+        readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     }>> & {
         onChange?: ((val: CheckboxValueType[]) => any) | undefined;
         "onUpdate:modelValue"?: ((val: CheckboxValueType[]) => any) | undefined;
     }>>;
     emit: ((event: "update:modelValue", val: CheckboxValueType[]) => void) & ((event: "change", val: CheckboxValueType[]) => void);
-    elFormItem: import("../../..").FormItemContext | undefined;
-    groupId: import("vue").Ref<string | undefined>;
-    isLabeledByFormItem: import("vue").ComputedRef<boolean>;
-    checkboxGroupSize: import("vue").ComputedRef<"" | "default" | "small" | "large">;
     ns: {
         namespace: import("vue").Ref<string>;
         b: (blockSuffix?: string) => string;
@@ -115,68 +55,37 @@ declare const _default: import("vue").DefineComponent<{
         cssVarBlock: (object: Record<string, string>) => Record<string, string>;
         cssVarBlockName: (name: string) => string;
     };
-    changeEvent: (value: CheckboxValueType[]) => void;
+    formItem: import("element-plus/es/tokens").FormItemContext | undefined;
+    groupId: import("vue").Ref<string | undefined>;
+    isLabeledByFormItem: import("vue").ComputedRef<boolean>;
+    changeEvent: (value: CheckboxValueType[]) => Promise<void>;
     modelValue: import("vue").WritableComputedRef<CheckboxValueType[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (val: CheckboxValueType[]) => boolean;
     change: (val: CheckboxValueType[]) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: {
-        type: import("vue").PropType<(string | number)[]>;
-        default: () => never[];
-    };
-    disabled: BooleanConstructor;
-    min: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    max: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    size: {
+    readonly modelValue: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | number)[]) | (() => (string | number)[]) | ((new (...args: any[]) => (string | number)[]) | (() => (string | number)[]))[], unknown, unknown, () => never[], boolean>;
+    readonly disabled: BooleanConstructor;
+    readonly min: NumberConstructor;
+    readonly max: NumberConstructor;
+    readonly size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    id: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    fill: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    textColor: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    validateEvent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    readonly label: StringConstructor;
+    readonly fill: StringConstructor;
+    readonly textColor: StringConstructor;
+    readonly tag: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
+    readonly validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
 }>> & {
     onChange?: ((val: CheckboxValueType[]) => any) | undefined;
     "onUpdate:modelValue"?: ((val: CheckboxValueType[]) => any) | undefined;
 }, {
-    disabled: boolean;
-    label: string;
-    id: string;
-    modelValue: (string | number)[];
-    fill: string;
-    textColor: string;
-    validateEvent: boolean;
-    min: number;
-    max: number;
-    tag: string;
+    readonly disabled: boolean;
+    readonly modelValue: (string | number)[];
+    readonly tag: string;
+    readonly validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
 }>;
 export default _default;

package/lib/components/checkbox/src/checkbox-group2.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var lodashUnified = require('lodash-unified');
+require('../../../constants/index.js');
+require('../../../utils/index.js');
+require('../../../hooks/index.js');
+require('../../../tokens/index.js');
+var checkboxGroup = require('./checkbox-group.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var index$1 = require('../../../hooks/use-form-item/index.js');
+var event = require('../../../constants/event.js');
+var checkbox = require('../../../tokens/checkbox.js');
+var error = require('../../../utils/error.js');
+
+const __default__ = vue.defineComponent({
+  name: "ElCheckboxGroup"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: checkboxGroup.checkboxGroupProps,
+  emits: checkboxGroup.checkboxGroupEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    const ns = index.useNamespace("checkbox");
+    const { formItem } = index$1.useFormItem();
+    const { inputId: groupId, isLabeledByFormItem } = index$1.useFormItemInputId(props, {
+      formItemContext: formItem
+    });
+    const changeEvent = async (value) => {
+      emit(event.UPDATE_MODEL_EVENT, value);
+      await vue.nextTick();
+      emit("change", value);
+    };
+    const modelValue = vue.computed({
+      get() {
+        return props.modelValue;
+      },
+      set(val) {
+        changeEvent(val);
+      }
+    });
+    vue.provide(checkbox.checkboxGroupContextKey, {
+      ...lodashUnified.pick(vue.toRefs(props), [
+        "size",
+        "min",
+        "max",
+        "disabled",
+        "validateEvent",
+        "fill",
+        "textColor"
+      ]),
+      modelValue,
+      changeEvent
+    });
+    vue.watch(() => props.modelValue, () => {
+      if (props.validateEvent) {
+        formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
+      }
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
+        id: vue.unref(groupId),
+        class: vue.normalizeClass(vue.unref(ns).b("group")),
+        role: "group",
+        "aria-label": !vue.unref(isLabeledByFormItem) ? _ctx.label || "checkbox-group" : void 0,
+        "aria-labelledby": vue.unref(isLabeledByFormItem) ? (_a = vue.unref(formItem)) == null ? void 0 : _a.labelId : void 0
+      }, {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["id", "class", "aria-label", "aria-labelledby"]);
+    };
+  }
+});
+var CheckboxGroup = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/checkbox/src/checkbox-group.vue"]]);
+
+exports["default"] = CheckboxGroup;
+//# sourceMappingURL=checkbox-group2.js.map

package/lib/components/checkbox/src/checkbox-group2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group2.js","sources":["../../../../../../packages/components/checkbox/src/checkbox-group.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"tag\"\n    :id=\"groupId\"\n    :class=\"ns.b('group')\"\n    role=\"group\"\n    :aria-label=\"!isLabeledByFormItem ? label || 'checkbox-group' : undefined\"\n    :aria-labelledby=\"isLabeledByFormItem ? formItem?.labelId : undefined\"\n  >\n    <slot />\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, toRefs, watch } from 'vue'\nimport { pick } from 'lodash-unified'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport {\n  useFormItem,\n  useFormItemInputId,\n  useNamespace,\n} from '@element-plus/hooks'\nimport { checkboxGroupContextKey } from '@element-plus/tokens'\nimport { checkboxGroupEmits, checkboxGroupProps } from './checkbox-group'\n\nimport type { CheckboxValueType } from './checkbox'\n\ndefineOptions({\n  name: 'ElCheckboxGroup',\n})\n\nconst props = defineProps(checkboxGroupProps)\nconst emit = defineEmits(checkboxGroupEmits)\nconst ns = useNamespace('checkbox')\n\nconst { formItem } = useFormItem()\nconst { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst changeEvent = async (value: CheckboxValueType[]) => {\n  emit(UPDATE_MODEL_EVENT, value)\n  await nextTick()\n  emit('change', value)\n}\n\nconst modelValue = computed({\n  get() {\n    return props.modelValue\n  },\n  set(val: CheckboxValueType[]) {\n    changeEvent(val)\n  },\n})\n\nprovide(checkboxGroupContextKey, {\n  ...pick(toRefs(props), [\n    'size',\n    'min',\n    'max',\n    'disabled',\n    'validateEvent',\n    'fill',\n    'textColor',\n  ]),\n  modelValue,\n  changeEvent,\n})\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.validateEvent) {\n      formItem?.validate('change').catch((err) => debugWarn(err))\n    }\n  }\n)\n</script>\n"],"names":["useNamespace","useFormItem","useFormItemInputId","UPDATE_MODEL_EVENT","nextTick","computed","provide","checkboxGroupContextKey","pick","toRefs","watch","debugWarn"],"mappings":";;;;;;;;;;;;;;;;;;uCA4Bc,CAAA;AAAA,EACZ,IAAM,EAAA,iBAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAM,MAAA,EAAA,GAAKA,mBAAa,UAAU,CAAA,CAAA;AAElC,IAAM,MAAA,EAAE,aAAaC,mBAAY,EAAA,CAAA;AACjC,IAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,mBAAA,EAAA,GAAwBC,2BAAmB,KAAO,EAAA;AAAA,MAC1E,eAAiB,EAAA,QAAA;AAAA,KAClB,CAAA,CAAA;AAED,IAAM,MAAA,WAAA,GAAc,OAAO,KAA+B,KAAA;AACxD,MAAA,IAAA,CAAKC,0BAAoB,KAAK,CAAA,CAAA;AAC9B,MAAA,MAAMC,YAAS,EAAA,CAAA;AACf,MAAA,IAAA,CAAK,UAAU,KAAK,CAAA,CAAA;AAAA,KACtB,CAAA;AAEA,IAAA,MAAM,aAAaC,YAAS,CAAA;AAAA,MAC1B,GAAM,GAAA;AACJ,QAAA,OAAO,KAAM,CAAA,UAAA,CAAA;AAAA,OACf;AAAA,MACA,IAAI,GAA0B,EAAA;AAC5B,QAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AAAA,OACjB;AAAA,KACD,CAAA,CAAA;AAED,IAAAC,WAAA,CAAQC,gCAAyB,EAAA;AAAA,MAC/B,GAAGC,kBAAA,CAAKC,UAAO,CAAA,KAAK,CAAG,EAAA;AAAA,QACrB,MAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,UAAA;AAAA,QACA,eAAA;AAAA,QACA,MAAA;AAAA,QACA,WAAA;AAAA,OACD,CAAA;AAAA,MACD,UAAA;AAAA,MACA,WAAA;AAAA,KACD,CAAA,CAAA;AAED,IACEC,SAAA,CAAA,MAAM,KAAM,CAAA,UAAA,EACZ,MAAM;AACJ,MAAA,IAAI,MAAM,aAAe,EAAA;AACvB,QAAU,QAAA,IAAA,IAAA,GAAS,SAAU,QAAO,CAAQ,QAAA,CAAA,QAAU,OAAI,CAAA,CAAA,GAAA,KAAAC,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA;AAAA,OAC5D;AAAA,KAEJ,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;"}