@element-plus/nightly 0.0.20240227 → 0.0.20240228

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

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

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

@@ -7,6 +7,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
         default: undefined;
     };
+    value: {
+        type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
     checked: BooleanConstructor;
@@ -14,6 +18,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    trueValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    falseValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
     trueLabel: {
         type: (NumberConstructor | StringConstructor)[];
         default: undefined;
@@ -52,6 +64,10 @@ declare const _default: import("vue").DefineComponent<{
             type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
             default: undefined;
         };
+        value: {
+            type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+            default: undefined;
+        };
         indeterminate: BooleanConstructor;
         disabled: BooleanConstructor;
         checked: BooleanConstructor;
@@ -59,6 +75,14 @@ declare const _default: import("vue").DefineComponent<{
             type: StringConstructor;
             default: undefined;
         };
+        trueValue: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: undefined;
+        };
+        falseValue: {
+            type: (NumberConstructor | StringConstructor)[];
+            default: undefined;
+        };
         trueLabel: {
             type: (NumberConstructor | StringConstructor)[];
             default: undefined;
@@ -102,6 +126,7 @@ declare const _default: import("vue").DefineComponent<{
     checkboxSize: import("vue").ComputedRef<"" | "default" | "small" | "large">;
     hasOwnLabel: import("vue").ComputedRef<boolean>;
     model: import("vue").WritableComputedRef<any>;
+    actualValue: import("vue").ComputedRef<string | number | boolean | Record<string, any> | undefined>;
     handleChange: (e: Event) => void;
     onClickRoot: (e: MouseEvent) => Promise<void>;
     ns: {
@@ -136,6 +161,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
         default: undefined;
     };
+    value: {
+        type: (ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
     indeterminate: BooleanConstructor;
     disabled: BooleanConstructor;
     checked: BooleanConstructor;
@@ -143,6 +172,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
+    trueValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    falseValue: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: undefined;
+    };
     trueLabel: {
         type: (NumberConstructor | StringConstructor)[];
         default: undefined;
@@ -175,6 +212,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: ((val: import("./checkbox").CheckboxValueType) => any) | undefined;
     "onUpdate:modelValue"?: ((val: import("./checkbox").CheckboxValueType) => any) | undefined;
 }, {
+    value: string | number | boolean | Record<string, any>;
     modelValue: string | number | boolean;
     label: string | number | boolean | Record<string, any>;
     id: string;
@@ -184,6 +222,8 @@ declare const _default: import("vue").DefineComponent<{
     border: boolean;
     indeterminate: boolean;
     checked: boolean;
+    trueValue: string | number;
+    falseValue: string | number;
     trueLabel: string | number;
     falseLabel: string | number;
     controls: string;

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

@@ -27,6 +27,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       checkboxSize,
       hasOwnLabel,
       model,
+      actualValue,
       handleChange,
       onClickRoot
     } = useCheckbox(props, slots);
@@ -59,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("span", {
             class: normalizeClass(unref(spanKls))
           }, [
-            _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
+            _ctx.trueValue || _ctx.falseValue || _ctx.trueLabel || _ctx.falseLabel ? withDirectives((openBlock(), createElementBlock("input", {
               key: 0,
               id: unref(inputId),
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
@@ -69,8 +70,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               name: _ctx.name,
               tabindex: _ctx.tabindex,
               disabled: unref(isDisabled),
-              "true-value": _ctx.trueLabel,
-              "false-value": _ctx.falseLabel,
+              "true-value": _ctx.trueValue || _ctx.trueLabel,
+              "false-value": _ctx.falseValue || _ctx.falseLabel,
               onChange: _cache[1] || (_cache[1] = (...args) => unref(handleChange) && unref(handleChange)(...args)),
               onFocus: _cache[2] || (_cache[2] = ($event) => isFocused.value = true),
               onBlur: _cache[3] || (_cache[3] = ($event) => isFocused.value = false),
@@ -86,7 +87,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               type: "checkbox",
               indeterminate: _ctx.indeterminate,
               disabled: unref(isDisabled),
-              value: _ctx.label,
+              value: unref(actualValue),
               name: _ctx.name,
               tabindex: _ctx.tabindex,
               onChange: _cache[6] || (_cache[6] = (...args) => unref(handleChange) && unref(handleChange)(...args)),

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox2.mjs","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":[],"mappings":";;;;;;;;;;mCAwDc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,QAAQ,QAAS,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,GAAA,WAAA,CAAY,OAAO,KAAK,CAAA,CAAA;AAE5B,IAAM,MAAA,EAAA,GAAK,aAAa,UAAU,CAAA,CAAA;AAElC,IAAM,MAAA,OAAA,GAAU,SAAS,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,GAAU,SAAS,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.mjs","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=\"trueValue || falseValue || 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=\"trueValue || trueLabel\"\n        :false-value=\"falseValue || 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=\"actualValue\"\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  actualValue,\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":[],"mappings":";;;;;;;;;;mCAwDc,CAAA;AAAA,EACZ,IAAM,EAAA,YAAA;AACR,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,QAAQ,QAAS,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,WAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,KACE,GAAA,WAAA,CAAY,OAAO,KAAK,CAAA,CAAA;AAE5B,IAAM,MAAA,EAAA,GAAK,aAAa,UAAU,CAAA,CAAA;AAElC,IAAM,MAAA,OAAA,GAAU,SAAS,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,GAAU,SAAS,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/es/components/checkbox/src/composables/use-checkbox-event.mjs

@@ -17,7 +17,7 @@ const useCheckboxEvent = (props, {
   const { emit } = getCurrentInstance();
   function getLabeledValue(value) {
     var _a, _b;
-    return value === props.trueLabel || value === true ? (_a = props.trueLabel) != null ? _a : true : (_b = props.falseLabel) != null ? _b : false;
+    return [true, props.trueValue, props.trueLabel].includes(value) ? (_a = props.trueValue || props.trueLabel) != null ? _a : true : (_b = props.falseValue || props.falseLabel) != null ? _b : false;
   }
   function emitChangeEvent(checked, e) {
     emit("change", getLabeledValue(checked), e);
@@ -35,7 +35,7 @@ const useCheckboxEvent = (props, {
       const eventTargets = e.composedPath();
       const hasLabel = eventTargets.some((item) => item.tagName === "LABEL");
       if (!hasLabel) {
-        model.value = getLabeledValue([false, props.falseLabel].includes(model.value));
+        model.value = getLabeledValue([false, props.falseValue, props.falseLabel].includes(model.value));
         await nextTick();
         emitChangeEvent(model.value, e);
       }

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

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox-event.mjs","sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-event.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, nextTick, watch } from 'vue'\nimport { useFormItem } from '@element-plus/components/form'\nimport { debugWarn } from '@element-plus/utils'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { useFormItemInputId } from '@element-plus/components/form'\nimport type { CheckboxProps } from '../checkbox'\nimport type {\n  CheckboxDisabled,\n  CheckboxModel,\n  CheckboxStatus,\n} from '../composables'\n\nexport const useCheckboxEvent = (\n  props: CheckboxProps,\n  {\n    model,\n    isLimitExceeded,\n    hasOwnLabel,\n    isDisabled,\n    isLabeledByFormItem,\n  }: Pick<CheckboxModel, 'model' | 'isLimitExceeded'> &\n    Pick<CheckboxStatus, 'hasOwnLabel'> &\n    Pick<CheckboxDisabled, 'isDisabled'> &\n    Pick<ReturnType<typeof useFormItemInputId>, 'isLabeledByFormItem'>\n) => {\n  const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n  const { formItem } = useFormItem()\n  const { emit } = getCurrentInstance()!\n\n  function getLabeledValue(value: string | number | boolean) {\n    return value === props.trueLabel || value === true\n      ? props.trueLabel ?? true\n      : props.falseLabel ?? false\n  }\n\n  function emitChangeEvent(\n    checked: string | number | boolean,\n    e: InputEvent | MouseEvent\n  ) {\n    emit('change', getLabeledValue(checked), e)\n  }\n\n  function handleChange(e: Event) {\n    if (isLimitExceeded.value) return\n\n    const target = e.target as HTMLInputElement\n    emit('change', getLabeledValue(target.checked), e)\n  }\n\n  async function onClickRoot(e: MouseEvent) {\n    if (isLimitExceeded.value) return\n\n    if (!hasOwnLabel.value && !isDisabled.value && isLabeledByFormItem.value) {\n      // fix: https://github.com/element-plus/element-plus/issues/9981\n      const eventTargets: EventTarget[] = e.composedPath()\n      const hasLabel = eventTargets.some(\n        (item) => (item as HTMLElement).tagName === 'LABEL'\n      )\n      if (!hasLabel) {\n        model.value = getLabeledValue(\n          [false, props.falseLabel].includes(model.value)\n        )\n        await nextTick()\n        emitChangeEvent(model.value, e)\n      }\n    }\n  }\n\n  const validateEvent = computed(\n    () => checkboxGroup?.validateEvent || props.validateEvent\n  )\n\n  watch(\n    () => props.modelValue,\n    () => {\n      if (validateEvent.value) {\n        formItem?.validate('change').catch((err) => debugWarn(err))\n      }\n    }\n  )\n\n  return {\n    handleChange,\n    onClickRoot,\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAIY,MAAC,gBAAgB,GAAG,CAAC,KAAK,EAAE;AACxC,EAAE,KAAK;AACP,EAAE,eAAe;AACjB,EAAE,WAAW;AACb,EAAE,UAAU;AACZ,EAAE,mBAAmB;AACrB,CAAC,KAAK;AACN,EAAE,MAAM,aAAa,GAAG,MAAM,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,CAAC;AAChE,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;AACrC,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,kBAAkB,EAAE,CAAC;AACxC,EAAE,SAAS,eAAe,CAAC,KAAK,EAAE;AAClC,IAAI,IAAI,EAAE,EAAE,EAAE,CAAC;AACf,IAAI,OAAO,KAAK,KAAK,KAAK,CAAC,SAAS,IAAI,KAAK,KAAK,IAAI,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,KAAK,IAAI,GAAG,EAAE,GAAG,IAAI,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,GAAG,EAAE,GAAG,KAAK,CAAC;AACnJ,GAAG;AACH,EAAE,SAAS,eAAe,CAAC,OAAO,EAAE,CAAC,EAAE;AACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;AAChD,GAAG;AACH,EAAE,SAAS,YAAY,CAAC,CAAC,EAAE;AAC3B,IAAI,IAAI,eAAe,CAAC,KAAK;AAC7B,MAAM,OAAO;AACb,IAAI,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC;AAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,GAAG;AACH,EAAE,eAAe,WAAW,CAAC,CAAC,EAAE;AAChC,IAAI,IAAI,eAAe,CAAC,KAAK;AAC7B,MAAM,OAAO;AACb,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,mBAAmB,CAAC,KAAK,EAAE;AAC9E,MAAM,MAAM,YAAY,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;AAC5C,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC;AAC7E,MAAM,IAAI,CAAC,QAAQ,EAAE;AACrB,QAAQ,KAAK,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACvF,QAAQ,MAAM,QAAQ,EAAE,CAAC;AACzB,QAAQ,eAAe,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;AACxC,OAAO;AACP,KAAK;AACL,GAAG;AACH,EAAE,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,aAAa,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,aAAa,CAAC,aAAa,KAAK,KAAK,CAAC,aAAa,CAAC,CAAC;AAC9H,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,UAAU,EAAE,MAAM;AACtC,IAAI,IAAI,aAAa,CAAC,KAAK,EAAE;AAC7B,MAAM,QAAQ,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAC7F,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-checkbox-event.mjs","sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-event.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, nextTick, watch } from 'vue'\nimport { useFormItem } from '@element-plus/components/form'\nimport { debugWarn } from '@element-plus/utils'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { useFormItemInputId } from '@element-plus/components/form'\nimport type { CheckboxProps } from '../checkbox'\nimport type {\n  CheckboxDisabled,\n  CheckboxModel,\n  CheckboxStatus,\n} from '../composables'\n\nexport const useCheckboxEvent = (\n  props: CheckboxProps,\n  {\n    model,\n    isLimitExceeded,\n    hasOwnLabel,\n    isDisabled,\n    isLabeledByFormItem,\n  }: Pick<CheckboxModel, 'model' | 'isLimitExceeded'> &\n    Pick<CheckboxStatus, 'hasOwnLabel'> &\n    Pick<CheckboxDisabled, 'isDisabled'> &\n    Pick<ReturnType<typeof useFormItemInputId>, 'isLabeledByFormItem'>\n) => {\n  const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n  const { formItem } = useFormItem()\n  const { emit } = getCurrentInstance()!\n\n  function getLabeledValue(value: string | number | boolean) {\n    return [true, props.trueValue, props.trueLabel].includes(value)\n      ? (props.trueValue || props.trueLabel) ?? true\n      : (props.falseValue || props.falseLabel) ?? false\n  }\n\n  function emitChangeEvent(\n    checked: string | number | boolean,\n    e: InputEvent | MouseEvent\n  ) {\n    emit('change', getLabeledValue(checked), e)\n  }\n\n  function handleChange(e: Event) {\n    if (isLimitExceeded.value) return\n\n    const target = e.target as HTMLInputElement\n    emit('change', getLabeledValue(target.checked), e)\n  }\n\n  async function onClickRoot(e: MouseEvent) {\n    if (isLimitExceeded.value) return\n\n    if (!hasOwnLabel.value && !isDisabled.value && isLabeledByFormItem.value) {\n      // fix: https://github.com/element-plus/element-plus/issues/9981\n      const eventTargets: EventTarget[] = e.composedPath()\n      const hasLabel = eventTargets.some(\n        (item) => (item as HTMLElement).tagName === 'LABEL'\n      )\n      if (!hasLabel) {\n        model.value = getLabeledValue(\n          [false, props.falseValue, props.falseLabel].includes(model.value)\n        )\n        await nextTick()\n        emitChangeEvent(model.value, e)\n      }\n    }\n  }\n\n  const validateEvent = computed(\n    () => checkboxGroup?.validateEvent || props.validateEvent\n  )\n\n  watch(\n    () => props.modelValue,\n    () => {\n      if (validateEvent.value) {\n        formItem?.validate('change').catch((err) => debugWarn(err))\n      }\n    }\n  )\n\n  return {\n    handleChange,\n    onClickRoot,\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -7,5 +7,6 @@ export declare const useCheckboxStatus: (props: CheckboxProps, slots: ComponentI
     isFocused: import("vue").Ref<boolean>;
     checkboxSize: import("vue").ComputedRef<"" | "default" | "small" | "large">;
     hasOwnLabel: import("vue").ComputedRef<boolean>;
+    actualValue: import("vue").ComputedRef<string | number | boolean | Record<string, any> | undefined>;
 };
 export declare type CheckboxStatus = ReturnType<typeof useCheckboxStatus>;

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

@@ -1,27 +1,33 @@
 import { inject, ref, computed, toRaw } from 'vue';
-import { isEqual, isNil } from 'lodash-unified';
+import { isEqual } from 'lodash-unified';
 import '../../../form/index.mjs';
 import '../../../../utils/index.mjs';
 import { checkboxGroupContextKey } from '../constants.mjs';
-import { isBoolean } from '../../../../utils/types.mjs';
+import { isPropAbsent, isBoolean } from '../../../../utils/types.mjs';
 import { isArray, isObject } from '@vue/shared';
 import { useFormSize } from '../../../form/src/hooks/use-form-common-props.mjs';
 
 const useCheckboxStatus = (props, slots, { model }) => {
   const checkboxGroup = inject(checkboxGroupContextKey, void 0);
   const isFocused = ref(false);
+  const actualValue = computed(() => {
+    if (!isPropAbsent(props.value)) {
+      return props.value;
+    }
+    return props.label;
+  });
   const isChecked = computed(() => {
     const value = model.value;
     if (isBoolean(value)) {
       return value;
     } else if (isArray(value)) {
-      if (isObject(props.label)) {
-        return value.map(toRaw).some((o) => isEqual(o, props.label));
+      if (isObject(actualValue.value)) {
+        return value.map(toRaw).some((o) => isEqual(o, actualValue.value));
       } else {
-        return value.map(toRaw).includes(props.label);
+        return value.map(toRaw).includes(actualValue.value);
       }
     } else if (value !== null && value !== void 0) {
-      return value === props.trueLabel;
+      return value === props.trueValue || value === props.trueLabel;
     } else {
       return !!value;
     }
@@ -37,14 +43,15 @@ const useCheckboxStatus = (props, slots, { model }) => {
     return (_a = checkboxGroup == null ? void 0 : checkboxGroup.size) == null ? void 0 : _a.value;
   }));
   const hasOwnLabel = computed(() => {
-    return !!slots.default || !isNil(props.label);
+    return !!slots.default || !isPropAbsent(actualValue.value);
   });
   return {
     checkboxButtonSize,
     isChecked,
     isFocused,
     checkboxSize,
-    hasOwnLabel
+    hasOwnLabel,
+    actualValue
   };
 };
 

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

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

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

@@ -10,6 +10,7 @@ export declare const useCheckbox: (props: CheckboxProps, slots: ComponentInterna
     checkboxSize: import("vue").ComputedRef<"" | "default" | "small" | "large">;
     hasOwnLabel: import("vue").ComputedRef<boolean>;
     model: import("vue").WritableComputedRef<any>;
+    actualValue: import("vue").ComputedRef<string | number | boolean | Record<string, any> | undefined>;
     handleChange: (e: Event) => void;
     onClickRoot: (e: MouseEvent) => Promise<void>;
 };

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

@@ -1,22 +1,16 @@
+import { computed } from 'vue';
 import '../../../form/index.mjs';
 import '../../../../utils/index.mjs';
+import '../../../../hooks/index.mjs';
 import { useCheckboxDisabled } from './use-checkbox-disabled.mjs';
 import { useCheckboxEvent } from './use-checkbox-event.mjs';
 import { useCheckboxModel } from './use-checkbox-model.mjs';
 import { useCheckboxStatus } from './use-checkbox-status.mjs';
-import { isArray } from '@vue/shared';
 import { useFormItem, useFormItemInputId } from '../../../form/src/hooks/use-form-item.mjs';
+import { isArray } from '@vue/shared';
+import { useDeprecated } from '../../../../hooks/use-deprecated/index.mjs';
+import { isPropAbsent } from '../../../../utils/types.mjs';
 
-const setStoreValue = (props, { model }) => {
-  function addToStore() {
-    if (isArray(model.value) && !model.value.includes(props.label)) {
-      model.value.push(props.label);
-    } else {
-      model.value = props.trueLabel || true;
-    }
-  }
-  props.checked && addToStore();
-};
 const useCheckbox = (props, slots) => {
   const { formItem: elFormItem } = useFormItem();
   const { model, isGroup, isLimitExceeded } = useCheckboxModel(props);
@@ -25,7 +19,8 @@ const useCheckbox = (props, slots) => {
     isChecked,
     checkboxButtonSize,
     checkboxSize,
-    hasOwnLabel
+    hasOwnLabel,
+    actualValue
   } = useCheckboxStatus(props, slots, { model });
   const { isDisabled } = useCheckboxDisabled({ model, isChecked });
   const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
@@ -40,7 +35,38 @@ const useCheckbox = (props, slots) => {
     isDisabled,
     isLabeledByFormItem
   });
-  setStoreValue(props, { model });
+  const setStoreValue = () => {
+    function addToStore() {
+      if (isArray(model.value) && !model.value.includes(actualValue.value)) {
+        model.value.push(actualValue.value);
+      } else {
+        model.value = props.trueValue || props.trueLabel || true;
+      }
+    }
+    props.checked && addToStore();
+  };
+  setStoreValue();
+  useDeprecated({
+    from: "label act as value",
+    replacement: "value",
+    version: "3.0.0",
+    scope: "el-checkbox",
+    ref: "https://element-plus.org/en-US/component/checkbox.html"
+  }, computed(() => isGroup.value && isPropAbsent(props.value)));
+  useDeprecated({
+    from: "true-label",
+    replacement: "true-value",
+    version: "3.0.0",
+    scope: "el-checkbox",
+    ref: "https://element-plus.org/en-US/component/checkbox.html"
+  }, computed(() => !!props.trueLabel));
+  useDeprecated({
+    from: "false-label",
+    replacement: "false-value",
+    version: "3.0.0",
+    scope: "el-checkbox",
+    ref: "https://element-plus.org/en-US/component/checkbox.html"
+  }, computed(() => !!props.falseLabel));
   return {
     inputId,
     isLabeledByFormItem,
@@ -51,6 +77,7 @@ const useCheckbox = (props, slots) => {
     checkboxSize,
     hasOwnLabel,
     model,
+    actualValue,
     handleChange,
     onClickRoot
   };

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

@@ -1 +1 @@
-{"version":3,"file":"use-checkbox.mjs","sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox.ts"],"sourcesContent":["import { useFormItem, useFormItemInputId } from '@element-plus/components/form'\nimport { isArray } from '@element-plus/utils'\nimport { useCheckboxDisabled } from './use-checkbox-disabled'\nimport { useCheckboxEvent } from './use-checkbox-event'\nimport { useCheckboxModel } from './use-checkbox-model'\nimport { useCheckboxStatus } from './use-checkbox-status'\n\nimport type { ComponentInternalInstance } from 'vue'\nimport type { CheckboxProps } from '../checkbox'\nimport type { CheckboxModel } from './use-checkbox-model'\n\nconst setStoreValue = (\n  props: CheckboxProps,\n  { model }: Pick<CheckboxModel, 'model'>\n) => {\n  function addToStore() {\n    if (isArray(model.value) && !model.value.includes(props.label)) {\n      model.value.push(props.label)\n    } else {\n      model.value = props.trueLabel || true\n    }\n  }\n  props.checked && addToStore()\n}\n\nexport const useCheckbox = (\n  props: CheckboxProps,\n  slots: ComponentInternalInstance['slots']\n) => {\n  const { formItem: elFormItem } = useFormItem()\n  const { model, isGroup, isLimitExceeded } = useCheckboxModel(props)\n  const {\n    isFocused,\n    isChecked,\n    checkboxButtonSize,\n    checkboxSize,\n    hasOwnLabel,\n  } = useCheckboxStatus(props, slots, { model })\n  const { isDisabled } = useCheckboxDisabled({ model, isChecked })\n  const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n    formItemContext: elFormItem,\n    disableIdGeneration: hasOwnLabel,\n    disableIdManagement: isGroup,\n  })\n  const { handleChange, onClickRoot } = useCheckboxEvent(props, {\n    model,\n    isLimitExceeded,\n    hasOwnLabel,\n    isDisabled,\n    isLabeledByFormItem,\n  })\n\n  setStoreValue(props, { model })\n\n  return {\n    inputId,\n    isLabeledByFormItem,\n    isChecked,\n    isDisabled,\n    isFocused,\n    checkboxButtonSize,\n    checkboxSize,\n    hasOwnLabel,\n    model,\n    handleChange,\n    onClickRoot,\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK;AAC5C,EAAE,SAAS,UAAU,GAAG;AACxB,IAAI,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE;AACpE,MAAM,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACpC,KAAK,MAAM;AACX,MAAM,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC;AAC5C,KAAK;AACL,GAAG;AACH,EAAE,KAAK,CAAC,OAAO,IAAI,UAAU,EAAE,CAAC;AAChC,CAAC,CAAC;AACU,MAAC,WAAW,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK;AAC7C,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AACjD,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;AACtE,EAAE,MAAM;AACR,IAAI,SAAS;AACb,IAAI,SAAS;AACb,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,GAAG,GAAG,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;AACjD,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,mBAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AACnE,EAAE,MAAM,EAAE,OAAO,EAAE,mBAAmB,EAAE,GAAG,kBAAkB,CAAC,KAAK,EAAE;AACrE,IAAI,eAAe,EAAE,UAAU;AAC/B,IAAI,mBAAmB,EAAE,WAAW;AACpC,IAAI,mBAAmB,EAAE,OAAO;AAChC,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,gBAAgB,CAAC,KAAK,EAAE;AAChE,IAAI,KAAK;AACT,IAAI,eAAe;AACnB,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,mBAAmB;AACvB,GAAG,CAAC,CAAC;AACL,EAAE,aAAa,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;AAClC,EAAE,OAAO;AACT,IAAI,OAAO;AACX,IAAI,mBAAmB;AACvB,IAAI,SAAS;AACb,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-checkbox.mjs","sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { useFormItem, useFormItemInputId } from '@element-plus/components/form'\nimport { isArray, isPropAbsent } from '@element-plus/utils'\nimport { useDeprecated } from '@element-plus/hooks'\nimport { useCheckboxDisabled } from './use-checkbox-disabled'\nimport { useCheckboxEvent } from './use-checkbox-event'\nimport { useCheckboxModel } from './use-checkbox-model'\nimport { useCheckboxStatus } from './use-checkbox-status'\nimport type { ComponentInternalInstance } from 'vue'\n\nimport type { CheckboxProps } from '../checkbox'\n\nexport const useCheckbox = (\n  props: CheckboxProps,\n  slots: ComponentInternalInstance['slots']\n) => {\n  const { formItem: elFormItem } = useFormItem()\n  const { model, isGroup, isLimitExceeded } = useCheckboxModel(props)\n  const {\n    isFocused,\n    isChecked,\n    checkboxButtonSize,\n    checkboxSize,\n    hasOwnLabel,\n    actualValue,\n  } = useCheckboxStatus(props, slots, { model })\n  const { isDisabled } = useCheckboxDisabled({ model, isChecked })\n  const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {\n    formItemContext: elFormItem,\n    disableIdGeneration: hasOwnLabel,\n    disableIdManagement: isGroup,\n  })\n  const { handleChange, onClickRoot } = useCheckboxEvent(props, {\n    model,\n    isLimitExceeded,\n    hasOwnLabel,\n    isDisabled,\n    isLabeledByFormItem,\n  })\n\n  const setStoreValue = () => {\n    function addToStore() {\n      if (isArray(model.value) && !model.value.includes(actualValue.value)) {\n        model.value.push(actualValue.value)\n      } else {\n        model.value = props.trueValue || props.trueLabel || true\n      }\n    }\n    props.checked && addToStore()\n  }\n\n  setStoreValue()\n\n  useDeprecated(\n    {\n      from: 'label act as value',\n      replacement: 'value',\n      version: '3.0.0',\n      scope: 'el-checkbox',\n      ref: 'https://element-plus.org/en-US/component/checkbox.html',\n    },\n    computed(() => isGroup.value && isPropAbsent(props.value))\n  )\n\n  useDeprecated(\n    {\n      from: 'true-label',\n      replacement: 'true-value',\n      version: '3.0.0',\n      scope: 'el-checkbox',\n      ref: 'https://element-plus.org/en-US/component/checkbox.html',\n    },\n    computed(() => !!props.trueLabel)\n  )\n\n  useDeprecated(\n    {\n      from: 'false-label',\n      replacement: 'false-value',\n      version: '3.0.0',\n      scope: 'el-checkbox',\n      ref: 'https://element-plus.org/en-US/component/checkbox.html',\n    },\n    computed(() => !!props.falseLabel)\n  )\n\n  return {\n    inputId,\n    isLabeledByFormItem,\n    isChecked,\n    isDisabled,\n    isFocused,\n    checkboxButtonSize,\n    checkboxSize,\n    hasOwnLabel,\n    model,\n    actualValue,\n    handleChange,\n    onClickRoot,\n  }\n}\n"],"names":[],"mappings":"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"}

package/es/components/col/index.mjs

@@ -1,6 +1,6 @@
 import '../../utils/index.mjs';
-import Col from './src/col.mjs';
-export { colProps } from './src/col2.mjs';
+import Col from './src/col2.mjs';
+export { colProps } from './src/col.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const ElCol = withInstall(Col);

package/es/components/col/src/col.mjs

@@ -1,72 +1,49 @@
-import { defineComponent, inject, computed, openBlock, createBlock, resolveDynamicComponent, normalizeClass, unref, normalizeStyle, withCtx, renderSlot } from 'vue';
 import '../../../utils/index.mjs';
-import '../../../hooks/index.mjs';
-import '../../row/index.mjs';
-import { colProps } from './col2.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { rowContextKey } from '../../row/src/constants.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { isNumber } from '../../../utils/types.mjs';
-import { isObject } from '@vue/shared';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { mutable } from '../../../utils/typescript.mjs';
 
-const __default__ = defineComponent({
-  name: "ElCol"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: colProps,
-  setup(__props) {
-    const props = __props;
-    const { gutter } = inject(rowContextKey, { gutter: computed(() => 0) });
-    const ns = useNamespace("col");
-    const style = computed(() => {
-      const styles = {};
-      if (gutter.value) {
-        styles.paddingLeft = styles.paddingRight = `${gutter.value / 2}px`;
-      }
-      return styles;
-    });
-    const colKls = computed(() => {
-      const classes = [];
-      const pos = ["span", "offset", "pull", "push"];
-      pos.forEach((prop) => {
-        const size = props[prop];
-        if (isNumber(size)) {
-          if (prop === "span")
-            classes.push(ns.b(`${props[prop]}`));
-          else if (size > 0)
-            classes.push(ns.b(`${prop}-${props[prop]}`));
-        }
-      });
-      const sizes = ["xs", "sm", "md", "lg", "xl"];
-      sizes.forEach((size) => {
-        if (isNumber(props[size])) {
-          classes.push(ns.b(`${size}-${props[size]}`));
-        } else if (isObject(props[size])) {
-          Object.entries(props[size]).forEach(([prop, sizeProp]) => {
-            classes.push(prop !== "span" ? ns.b(`${size}-${prop}-${sizeProp}`) : ns.b(`${size}-${sizeProp}`));
-          });
-        }
-      });
-      if (gutter.value) {
-        classes.push(ns.is("guttered"));
-      }
-      return [ns.b(), classes];
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
-        class: normalizeClass(unref(colKls)),
-        style: normalizeStyle(unref(style))
-      }, {
-        default: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["class", "style"]);
-    };
+const colProps = buildProps({
+  tag: {
+    type: String,
+    default: "div"
+  },
+  span: {
+    type: Number,
+    default: 24
+  },
+  offset: {
+    type: Number,
+    default: 0
+  },
+  pull: {
+    type: Number,
+    default: 0
+  },
+  push: {
+    type: Number,
+    default: 0
+  },
+  xs: {
+    type: definePropType([Number, Object]),
+    default: () => mutable({})
+  },
+  sm: {
+    type: definePropType([Number, Object]),
+    default: () => mutable({})
+  },
+  md: {
+    type: definePropType([Number, Object]),
+    default: () => mutable({})
+  },
+  lg: {
+    type: definePropType([Number, Object]),
+    default: () => mutable({})
+  },
+  xl: {
+    type: definePropType([Number, Object]),
+    default: () => mutable({})
   }
 });
-var Col = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "col.vue"]]);
 
-export { Col as default };
+export { colProps };
 //# sourceMappingURL=col.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"col.mjs","sources":["../../../../../../packages/components/col/src/col.vue"],"sourcesContent":["<template>\n  <component :is=\"tag\" :class=\"colKls\" :style=\"style\">\n    <slot />\n  </component>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\nimport { isNumber, isObject } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { rowContextKey } from '@element-plus/components/row'\nimport { colProps } from './col'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElCol',\n})\n\nconst props = defineProps(colProps)\n\nconst { gutter } = inject(rowContextKey, { gutter: computed(() => 0) })\nconst ns = useNamespace('col')\n\nconst style = computed(() => {\n  const styles: CSSProperties = {}\n  if (gutter.value) {\n    styles.paddingLeft = styles.paddingRight = `${gutter.value / 2}px`\n  }\n  return styles\n})\n\nconst colKls = computed(() => {\n  const classes: string[] = []\n  const pos = ['span', 'offset', 'pull', 'push'] as const\n\n  pos.forEach((prop) => {\n    const size = props[prop]\n    if (isNumber(size)) {\n      if (prop === 'span') classes.push(ns.b(`${props[prop]}`))\n      else if (size > 0) classes.push(ns.b(`${prop}-${props[prop]}`))\n    }\n  })\n\n  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n  sizes.forEach((size) => {\n    if (isNumber(props[size])) {\n      classes.push(ns.b(`${size}-${props[size]}`))\n    } else if (isObject(props[size])) {\n      Object.entries(props[size]).forEach(([prop, sizeProp]) => {\n        classes.push(\n          prop !== 'span'\n            ? ns.b(`${size}-${prop}-${sizeProp}`)\n            : ns.b(`${size}-${sizeProp}`)\n        )\n      })\n    }\n  })\n\n  // this is for the fix\n  if (gutter.value) {\n    classes.push(ns.is('guttered'))\n  }\n  return [ns.b(), classes]\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;mCAcc,CAAA;AAAA,EACZ,IAAM,EAAA,OAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAIA,IAAM,MAAA,EAAE,MAAW,EAAA,GAAA,MAAA,CAAO,aAAe,EAAA,EAAE,QAAQ,QAAS,CAAA,MAAM,CAAC,CAAA,EAAG,CAAA,CAAA;AACtE,IAAM,MAAA,EAAA,GAAK,aAAa,KAAK,CAAA,CAAA;AAE7B,IAAM,MAAA,KAAA,GAAQ,SAAS,MAAM;AAC3B,MAAA,MAAM,SAAwB,EAAC,CAAA;AAC/B,MAAA,IAAI,OAAO,KAAO,EAAA;AAChB,QAAA,MAAA,CAAO,WAAc,GAAA,MAAA,CAAO,YAAe,GAAA,CAAA,EAAG,OAAO,KAAQ,GAAA,CAAA,CAAA,EAAA,CAAA,CAAA;AAAA,OAC/D;AACA,MAAO,OAAA,MAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAAS,SAAS,MAAM;AAC5B,MAAA,MAAM,UAAoB,EAAC,CAAA;AAC3B,MAAA,MAAM,GAAM,GAAA,CAAC,MAAQ,EAAA,QAAA,EAAU,QAAQ,MAAM,CAAA,CAAA;AAE7C,MAAI,GAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AACpB,QAAA,MAAM,OAAO,KAAM,CAAA,IAAA,CAAA,CAAA;AACnB,QAAI,IAAA,QAAA,CAAS,IAAI,CAAG,EAAA;AAClB,UAAA,IAAI,IAAS,KAAA,MAAA;AAAQ,YAAA,OAAA,CAAQ,KAAK,EAAG,CAAA,CAAA,CAAE,CAAG,EAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AAAA,eAAA,IAC/C,IAAO,GAAA,CAAA;AAAG,YAAA,OAAA,CAAQ,KAAK,EAAG,CAAA,CAAA,CAAE,GAAG,IAAQ,CAAA,CAAA,EAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AAAA,SAChE;AAAA,OACD,CAAA,CAAA;AAED,MAAA,MAAM,QAAQ,CAAC,IAAA,EAAM,IAAM,EAAA,IAAA,EAAM,MAAM,IAAI,CAAA,CAAA;AAC3C,MAAM,KAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AACtB,QAAI,IAAA,QAAA,CAAS,KAAM,CAAA,IAAA,CAAK,CAAG,EAAA;AACzB,UAAA,OAAA,CAAQ,KAAK,EAAG,CAAA,CAAA,CAAE,GAAG,IAAQ,CAAA,CAAA,EAAA,KAAA,CAAM,OAAO,CAAC,CAAA,CAAA;AAAA,SAClC,MAAA,IAAA,QAAA,CAAS,KAAM,CAAA,IAAA,CAAK,CAAG,EAAA;AAChC,UAAO,MAAA,CAAA,OAAA,CAAQ,MAAM,IAAK,CAAA,CAAA,CAAE,QAAQ,CAAC,CAAC,MAAM,QAAc,CAAA,KAAA;AACxD,YAAA,OAAA,CAAQ,IACN,CAAA,IAAA,KAAS,MACL,GAAA,EAAA,CAAG,EAAE,CAAG,EAAA,IAAA,CAAA,CAAA,EAAQ,IAAQ,CAAA,CAAA,EAAA,QAAA,CAAA,CAAU,IAClC,EAAG,CAAA,CAAA,CAAE,CAAG,EAAA,IAAA,CAAA,CAAA,EAAQ,UAAU,CAChC,CAAA,CAAA;AAAA,WACD,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA,CAAA;AAGD,MAAA,IAAI,OAAO,KAAO,EAAA;AAChB,QAAA,OAAA,CAAQ,IAAK,CAAA,EAAA,CAAG,EAAG,CAAA,UAAU,CAAC,CAAA,CAAA;AAAA,OAChC;AACA,MAAA,OAAO,CAAC,EAAA,CAAG,CAAE,EAAA,EAAG,OAAO,CAAA,CAAA;AAAA,KACxB,CAAA,CAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"col.mjs","sources":["../../../../../../packages/components/col/src/col.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Col from './col.vue'\n\nexport type ColSizeObject = {\n  span?: number\n  offset?: number\n  pull?: number\n  push?: number\n}\nexport type ColSize = number | ColSizeObject\n\nexport const colProps = buildProps({\n  /**\n   * @description custom element tag\n   */\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  /**\n   * @description number of column the grid spans\n   */\n  span: {\n    type: Number,\n    default: 24,\n  },\n  /**\n   * @description number of spacing on the left side of the grid\n   */\n  offset: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description number of columns that grid moves to the left\n   */\n  pull: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description number of columns that grid moves to the right\n   */\n  push: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description `<768px` Responsive columns or column props object\n   */\n  xs: {\n    type: definePropType<ColSize>([Number, Object]),\n    default: () => mutable({} as const),\n  },\n  /**\n   * @description `≥768px` Responsive columns or column props object\n   */\n  sm: {\n    type: definePropType<ColSize>([Number, Object]),\n    default: () => mutable({} as const),\n  },\n  /**\n   * @description `≥992px` Responsive columns or column props object\n   */\n  md: {\n    type: definePropType<ColSize>([Number, Object]),\n    default: () => mutable({} as const),\n  },\n  /**\n   * @description `≥1200px` Responsive columns or column props object\n   */\n  lg: {\n    type: definePropType<ColSize>([Number, Object]),\n    default: () => mutable({} as const),\n  },\n  /**\n   * @description `≥1920px` Responsive columns or column props object\n   */\n  xl: {\n    type: definePropType<ColSize>([Number, Object]),\n    default: () => mutable({} as const),\n  },\n} as const)\nexport type ColProps = ExtractPropTypes<typeof colProps>\nexport type ColInstance = InstanceType<typeof Col>\n"],"names":[],"mappings":";;;;AACY,MAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,CAAC;;;;"}