feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+18
View File
@@ -0,0 +1,18 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { CheckboxEmits, CheckboxInstance, CheckboxProps, CheckboxPropsPublic, CheckboxValueType, checkboxEmits, checkboxProps, checkboxPropsDefaults } from "./src/checkbox.js";
import { _default } from "./src/checkbox.vue.js";
import { _default as _default$1 } from "./src/checkbox-button.vue.js";
import { CheckboxGroupEmits, CheckboxGroupInstance, CheckboxGroupProps, CheckboxGroupPropsPublic, CheckboxGroupValueType, CheckboxOption, checkboxDefaultProps, checkboxGroupEmits, checkboxGroupProps } from "./src/checkbox-group.js";
import { _default as _default$2 } from "./src/checkbox-group.vue.js";
import { checkboxGroupContextKey } from "./src/constants.js";
//#region ../../packages/components/checkbox/index.d.ts
declare const ElCheckbox: SFCWithInstall<typeof _default> & {
CheckboxButton: typeof _default$1;
CheckboxGroup: typeof _default$2;
};
declare const ElCheckboxButton: SFCWithInstall<typeof _default$1>;
declare const ElCheckboxGroup: SFCWithInstall<typeof _default$2>;
//#endregion
export { CheckboxEmits, CheckboxGroupEmits, CheckboxGroupInstance, CheckboxGroupProps, CheckboxGroupPropsPublic, CheckboxGroupValueType, CheckboxInstance, CheckboxOption, CheckboxProps, CheckboxPropsPublic, CheckboxValueType, ElCheckbox, ElCheckbox as default, ElCheckboxButton, ElCheckboxGroup, checkboxDefaultProps, checkboxEmits, checkboxGroupContextKey, checkboxGroupEmits, checkboxGroupProps, checkboxProps, checkboxPropsDefaults };
+19
View File
@@ -0,0 +1,19 @@
import { withInstall, withNoopInstall } from "../../utils/vue/install.mjs";
import { checkboxEmits, checkboxProps, checkboxPropsDefaults } from "./src/checkbox.mjs";
import { checkboxGroupContextKey } from "./src/constants.mjs";
import checkbox_default from "./src/checkbox2.mjs";
import checkbox_button_default from "./src/checkbox-button.mjs";
import { checkboxDefaultProps, checkboxGroupEmits, checkboxGroupProps } from "./src/checkbox-group.mjs";
import checkbox_group_default from "./src/checkbox-group2.mjs";
//#region ../../packages/components/checkbox/index.ts
const ElCheckbox = withInstall(checkbox_default, {
CheckboxButton: checkbox_button_default,
CheckboxGroup: checkbox_group_default
});
const ElCheckboxButton = withNoopInstall(checkbox_button_default);
const ElCheckboxGroup = withNoopInstall(checkbox_group_default);
//#endregion
export { ElCheckbox, ElCheckbox as default, ElCheckboxButton, ElCheckboxGroup, checkboxDefaultProps, checkboxEmits, checkboxGroupContextKey, checkboxGroupEmits, checkboxGroupProps, checkboxProps, checkboxPropsDefaults };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Checkbox","CheckboxButton","CheckboxGroup"],"sources":["../../../../../packages/components/checkbox/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@element-plus/utils'\nimport Checkbox from './src/checkbox.vue'\nimport CheckboxButton from './src/checkbox-button.vue'\nimport CheckboxGroup from './src/checkbox-group.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElCheckbox: SFCWithInstall<typeof Checkbox> & {\n CheckboxButton: typeof CheckboxButton\n CheckboxGroup: typeof CheckboxGroup\n} = withInstall(Checkbox, {\n CheckboxButton,\n CheckboxGroup,\n})\nexport default ElCheckbox\n\nexport const ElCheckboxButton: SFCWithInstall<typeof CheckboxButton> =\n withNoopInstall(CheckboxButton)\nexport const ElCheckboxGroup: SFCWithInstall<typeof CheckboxGroup> =\n withNoopInstall(CheckboxGroup)\n\nexport * from './src/checkbox-group'\nexport * from './src/checkbox'\nexport * from './src/constants'\n"],"mappings":";;;;;;;;;AAOA,MAAa,aAGT,YAAYA,kBAAU;CACxB;CACA;CACD,CAAC;AAGF,MAAa,mBACX,gBAAgBC,wBAAe;AACjC,MAAa,kBACX,gBAAgBC,uBAAc"}
@@ -0,0 +1,8 @@
import checkbox_button_vue_vue_type_script_setup_true_lang_default from "./checkbox-button.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/checkbox/src/checkbox-button.vue
var checkbox_button_default = checkbox_button_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { checkbox_button_default as default };
//# sourceMappingURL=checkbox-button.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"checkbox-button.mjs","names":[],"sources":["../../../../../../packages/components/checkbox/src/checkbox-button.vue"],"sourcesContent":["<template>\n <label :class=\"labelKls\">\n <input\n v-model=\"model\"\n :class=\"ns.be('button', 'original')\"\n type=\"checkbox\"\n :name=\"name\"\n :tabindex=\"tabindex\"\n :disabled=\"isDisabled\"\n v-bind=\"inputBindings\"\n @change=\"handleChange\"\n @focus=\"isFocused = true\"\n @blur=\"isFocused = false\"\n @click.stop\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 './constants'\nimport { useCheckbox } from './composables'\nimport { checkboxEmits, checkboxPropsDefaults } from './checkbox'\n\nimport type { CSSProperties } from 'vue'\nimport type { CheckboxProps } from './checkbox'\n\ndefineOptions({\n name: 'ElCheckboxButton',\n})\n\nconst props = withDefaults(defineProps<CheckboxProps>(), checkboxPropsDefaults)\ndefineEmits(checkboxEmits)\nconst slots = useSlots()\n\nconst {\n isFocused,\n isChecked,\n isDisabled,\n checkboxButtonSize,\n model,\n actualValue,\n handleChange,\n} = useCheckbox(props, slots)\n\nconst inputBindings = computed(() => {\n if (\n props.trueValue ||\n props.falseValue ||\n props.trueLabel ||\n props.falseLabel\n ) {\n return {\n 'true-value': props.trueValue ?? props.trueLabel ?? true,\n 'false-value': props.falseValue ?? props.falseLabel ?? false,\n }\n }\n return {\n value: actualValue.value,\n }\n})\n\nconst checkboxGroup = inject(checkboxGroupContextKey, undefined)\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\nconst labelKls = computed(() => {\n return [\n ns.b('button'),\n ns.bm('button', checkboxButtonSize.value),\n ns.is('disabled', isDisabled.value),\n ns.is('checked', isChecked.value),\n ns.is('focus', isFocused.value),\n ]\n})\n</script>\n"],"mappings":""}
@@ -0,0 +1,36 @@
import { CheckboxProps, CheckboxValueType } from "./checkbox.js";
import * as vue from "vue";
//#region ../../packages/components/checkbox/src/checkbox-button.vue.d.ts
declare var __VLS_1: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_1) => any;
};
declare const __VLS_base: vue.DefineComponent<CheckboxProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType) => void;
"update:modelValue": (val: CheckboxValueType) => void;
}, string, vue.PublicProps, Readonly<CheckboxProps> & Readonly<{
onChange?: ((val: CheckboxValueType) => any) | undefined;
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
}>, {
id: string;
disabled: boolean;
modelValue: number | string | boolean;
validateEvent: boolean;
name: string;
value: string | boolean | number | object;
label: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,72 @@
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { checkboxEmits, checkboxProps } from "./checkbox.mjs";
import { checkboxGroupContextKey } from "./constants.mjs";
import { useCheckbox } from "./composables/use-checkbox.mjs";
import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, isRef, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, toDisplayString, unref, useSlots, vModelCheckbox, withDirectives, withModifiers } from "vue";
//#region ../../packages/components/checkbox/src/checkbox-button.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = [
"name",
"tabindex",
"disabled"
];
var checkbox_button_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElCheckboxButton",
__name: "checkbox-button",
props: checkboxProps,
emits: checkboxEmits,
setup(__props) {
const props = __props;
const { isFocused, isChecked, isDisabled, checkboxButtonSize, model, actualValue, handleChange } = useCheckbox(props, useSlots());
const inputBindings = computed(() => {
if (props.trueValue || props.falseValue || props.trueLabel || props.falseLabel) return {
"true-value": props.trueValue ?? props.trueLabel ?? true,
"false-value": props.falseValue ?? props.falseLabel ?? false
};
return { value: actualValue.value };
});
const checkboxGroup = inject(checkboxGroupContextKey, void 0);
const ns = useNamespace("checkbox");
const activeStyle = computed(() => {
const fillValue = checkboxGroup?.fill?.value ?? "";
return {
backgroundColor: fillValue,
borderColor: fillValue,
color: checkboxGroup?.textColor?.value ?? "",
boxShadow: fillValue ? `-1px 0 0 0 ${fillValue}` : void 0
};
});
const labelKls = computed(() => {
return [
ns.b("button"),
ns.bm("button", checkboxButtonSize.value),
ns.is("disabled", isDisabled.value),
ns.is("checked", isChecked.value),
ns.is("focus", isFocused.value)
];
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("label", { class: normalizeClass(labelKls.value) }, [withDirectives(createElementVNode("input", mergeProps({
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
class: unref(ns).be("button", "original"),
type: "checkbox",
name: __props.name,
tabindex: __props.tabindex,
disabled: unref(isDisabled)
}, inputBindings.value, {
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),
onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
}), null, 16, _hoisted_1), [[vModelCheckbox, unref(model)]]), _ctx.$slots.default || __props.label ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass(unref(ns).be("button", "inner")),
style: normalizeStyle(unref(isChecked) ? activeStyle.value : void 0)
}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])], 6)) : createCommentVNode("v-if", true)], 2);
};
}
});
//#endregion
export { checkbox_button_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=checkbox-button.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"checkbox-button.vue_vue_type_script_setup_true_lang.mjs","names":["$slots"],"sources":["../../../../../../packages/components/checkbox/src/checkbox-button.vue"],"sourcesContent":["<template>\n <label :class=\"labelKls\">\n <input\n v-model=\"model\"\n :class=\"ns.be('button', 'original')\"\n type=\"checkbox\"\n :name=\"name\"\n :tabindex=\"tabindex\"\n :disabled=\"isDisabled\"\n v-bind=\"inputBindings\"\n @change=\"handleChange\"\n @focus=\"isFocused = true\"\n @blur=\"isFocused = false\"\n @click.stop\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 './constants'\nimport { useCheckbox } from './composables'\nimport { checkboxEmits, checkboxPropsDefaults } from './checkbox'\n\nimport type { CSSProperties } from 'vue'\nimport type { CheckboxProps } from './checkbox'\n\ndefineOptions({\n name: 'ElCheckboxButton',\n})\n\nconst props = withDefaults(defineProps<CheckboxProps>(), checkboxPropsDefaults)\ndefineEmits(checkboxEmits)\nconst slots = useSlots()\n\nconst {\n isFocused,\n isChecked,\n isDisabled,\n checkboxButtonSize,\n model,\n actualValue,\n handleChange,\n} = useCheckbox(props, slots)\n\nconst inputBindings = computed(() => {\n if (\n props.trueValue ||\n props.falseValue ||\n props.trueLabel ||\n props.falseLabel\n ) {\n return {\n 'true-value': props.trueValue ?? props.trueLabel ?? true,\n 'false-value': props.falseValue ?? props.falseLabel ?? false,\n }\n }\n return {\n value: actualValue.value,\n }\n})\n\nconst checkboxGroup = inject(checkboxGroupContextKey, undefined)\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\nconst labelKls = computed(() => {\n return [\n ns.b('button'),\n ns.bm('button', checkboxButtonSize.value),\n ns.is('disabled', isDisabled.value),\n ns.is('checked', isChecked.value),\n ns.is('focus', isFocused.value),\n ]\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAwCA,MAAM,QAAQ;EAId,MAAM,EACJ,WACA,WACA,YACA,oBACA,OACA,aACA,iBACE,YAAY,OAVF,UAAS,CAUK;EAE5B,MAAM,gBAAgB,eAAe;AACnC,OACE,MAAM,aACN,MAAM,cACN,MAAM,aACN,MAAM,WAEN,QAAO;IACL,cAAc,MAAM,aAAa,MAAM,aAAa;IACpD,eAAe,MAAM,cAAc,MAAM,cAAc;IACzD;AAEF,UAAO,EACL,OAAO,YAAY,OACrB;IACD;EAED,MAAM,gBAAgB,OAAO,yBAAyB,OAAS;EAC/D,MAAM,KAAK,aAAa,WAAU;EAElC,MAAM,cAAc,eAA8B;GAChD,MAAM,YAAY,eAAe,MAAM,SAAS;AAChD,UAAO;IACL,iBAAiB;IACjB,aAAa;IACb,OAAO,eAAe,WAAW,SAAS;IAC1C,WAAW,YAAY,cAAc,cAAc;IACrD;IACD;EAED,MAAM,WAAW,eAAe;AAC9B,UAAO;IACL,GAAG,EAAE,SAAS;IACd,GAAG,GAAG,UAAU,mBAAmB,MAAM;IACzC,GAAG,GAAG,YAAY,WAAW,MAAM;IACnC,GAAG,GAAG,WAAW,UAAU,MAAM;IACjC,GAAG,GAAG,SAAS,UAAU,MAAM;IACjC;IACD;;uBA3FC,mBAsBQ,SAAA,EAtBA,OAAK,eAAE,SAAA,MAAQ,oBACrB,mBAYE,SAZF,WAYE;gFAXS,MAAK,QAAA,SAAA;IACb,OAAO,MAAA,GAAE,CAAC,GAAE,UAAA,WAAA;IACb,MAAK;IACJ,MAAM,QAAA;IACN,UAAU,QAAA;IACV,UAAU,MAAA,WAAA;MACH,cAAA,OAAa;IACpB,UAAM,OAAA,OAAA,OAAA,kBAAE,MAAA,aAAA,IAAA,MAAA,aAAA,CAAA,GAAA,KAAY;IACpB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;IAChB,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;IACf,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;gDAVF,MAAA,MAAK,CAAA,IAcRA,KAAAA,OAAO,WAAW,QAAA,sBAD1B,mBAMO,QAAA;;IAJJ,OAAK,eAAE,MAAA,GAAE,CAAC,GAAE,UAAA,QAAA,CAAA;IACZ,OAAK,eAAE,MAAA,UAAS,GAAG,YAAA,QAAc,OAAS;OAE3C,WAAwB,KAAA,QAAA,WAAA,EAAA,QAAA,iCAAf,QAAA,MAAK,EAAA,EAAA"}
@@ -0,0 +1,109 @@
import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
import { ComponentSize } from "../../../constants/size.js";
import "../../../utils/index.js";
import { AriaProps } from "../../../hooks/use-aria/index.js";
import "../../../hooks/index.js";
import { CheckboxProps, CheckboxValueType } from "./checkbox.js";
import { _default } from "./checkbox-group.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/checkbox/src/checkbox-group.d.ts
type CheckboxGroupValueType = Exclude<CheckboxValueType, boolean>[];
interface CheckboxGroupProps extends Pick<AriaProps, 'ariaLabel'> {
/**
* @description binding value
*/
modelValue?: CheckboxGroupValueType;
/**
* @description whether the nesting checkboxes are disabled
*/
disabled?: boolean;
/**
* @description minimum number of checkbox checked
*/
min?: number;
/**
* @description maximum number of checkbox checked
*/
max?: number;
/**
* @description size of checkbox
*/
size?: ComponentSize;
/**
* @description border and background color when button is active
*/
fill?: string;
/**
* @description font color when button is active
*/
textColor?: string;
/**
* @description element tag of the checkbox group
*/
tag?: string;
/**
* @description whether to trigger form validation
*/
validateEvent?: boolean;
/**
* @description data of the options, the key of `value` and `label` and `disabled` can be customize by `props`
*/
options?: CheckboxOption[];
/**
* @description configuration options
*/
props?: CheckboxOptionProps;
/**
* @description component type to render options (e.g. `'button'`)
*/
type?: 'checkbox' | 'button';
}
/**
* @deprecated Removed after 3.0.0, Use `CheckboxGroupProps` instead.
*/
declare const checkboxGroupProps: {
readonly ariaLabel: StringConstructor;
readonly modelValue: EpPropFinalized<(new (...args: any[]) => CheckboxGroupValueType) | (() => CheckboxGroupValueType) | (((new (...args: any[]) => CheckboxGroupValueType) | (() => CheckboxGroupValueType)) | null)[], unknown, unknown, () => never[], boolean>;
readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
readonly min: NumberConstructor;
readonly max: NumberConstructor;
readonly size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly fill: StringConstructor;
readonly textColor: StringConstructor;
readonly tag: EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly options: {
readonly type: vue.PropType<CheckboxOption[]>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly props: EpPropFinalized<(new (...args: any[]) => CheckboxOptionProps) | (() => CheckboxOptionProps) | (((new (...args: any[]) => CheckboxOptionProps) | (() => CheckboxOptionProps)) | null)[], unknown, unknown, () => Required<CheckboxOptionProps>, boolean>;
readonly type: EpPropFinalized<StringConstructor, "button" | "checkbox", unknown, "checkbox", boolean>;
};
declare const checkboxGroupEmits: {
"update:modelValue": (val: CheckboxGroupValueType) => boolean;
change: (val: CheckboxValueType[]) => boolean;
};
/**
* @deprecated Removed after 3.0.0, Use `CheckboxGroupProps` instead.
*/
type CheckboxGroupPropsPublic = ExtractPublicPropTypes<typeof checkboxGroupProps>;
type CheckboxGroupEmits = typeof checkboxGroupEmits;
type CheckboxGroupInstance = InstanceType<typeof _default> & unknown;
type CheckboxOption = CheckboxProps & Record<string, any>;
type CheckboxOptionProps = {
value?: string;
label?: string;
disabled?: string;
};
declare const checkboxDefaultProps: Required<CheckboxOptionProps>;
//#endregion
export { CheckboxGroupEmits, CheckboxGroupInstance, CheckboxGroupProps, CheckboxGroupPropsPublic, CheckboxGroupValueType, CheckboxOption, checkboxDefaultProps, checkboxGroupEmits, checkboxGroupProps };
@@ -0,0 +1,57 @@
import { UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { isArray } from "../../../utils/types.mjs";
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { useSizeProp } from "../../../hooks/use-size/index.mjs";
import { useAriaProps } from "../../../hooks/use-aria/index.mjs";
//#region ../../packages/components/checkbox/src/checkbox-group.ts
/**
* @deprecated Removed after 3.0.0, Use `CheckboxGroupProps` instead.
*/
const checkboxGroupProps = buildProps({
modelValue: {
type: definePropType(Array),
default: () => []
},
disabled: {
type: Boolean,
default: void 0
},
min: Number,
max: Number,
size: useSizeProp,
fill: String,
textColor: String,
tag: {
type: String,
default: "div"
},
validateEvent: {
type: Boolean,
default: true
},
options: { type: definePropType(Array) },
props: {
type: definePropType(Object),
default: () => checkboxDefaultProps
},
type: {
type: String,
values: ["checkbox", "button"],
default: "checkbox"
},
...useAriaProps(["ariaLabel"])
});
const checkboxGroupEmits = {
[UPDATE_MODEL_EVENT]: (val) => isArray(val),
change: (val) => isArray(val)
};
const checkboxDefaultProps = {
label: "label",
value: "value",
disabled: "disabled"
};
//#endregion
export { checkboxDefaultProps, checkboxGroupEmits, checkboxGroupProps };
//# sourceMappingURL=checkbox-group.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"checkbox-group.mjs","names":[],"sources":["../../../../../../packages/components/checkbox/src/checkbox-group.ts"],"sourcesContent":["import { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { useAriaProps, useSizeProp } from '@element-plus/hooks'\nimport { buildProps, definePropType, isArray } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type checkboxGroup from './checkbox-group.vue'\nimport type { CheckboxProps, CheckboxValueType } from './checkbox'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { AriaProps } from '@element-plus/hooks'\n\nexport type CheckboxGroupValueType = Exclude<CheckboxValueType, boolean>[]\n\nexport interface CheckboxGroupProps extends Pick<AriaProps, 'ariaLabel'> {\n /**\n * @description binding value\n */\n modelValue?: CheckboxGroupValueType\n /**\n * @description whether the nesting checkboxes are disabled\n */\n disabled?: boolean\n /**\n * @description minimum number of checkbox checked\n */\n min?: number\n /**\n * @description maximum number of checkbox checked\n */\n max?: number\n /**\n * @description size of checkbox\n */\n size?: ComponentSize\n /**\n * @description border and background color when button is active\n */\n fill?: string\n /**\n * @description font color when button is active\n */\n textColor?: string\n /**\n * @description element tag of the checkbox group\n */\n tag?: string\n /**\n * @description whether to trigger form validation\n */\n validateEvent?: boolean\n /**\n * @description data of the options, the key of `value` and `label` and `disabled` can be customize by `props`\n */\n options?: CheckboxOption[]\n /**\n * @description configuration options\n */\n props?: CheckboxOptionProps\n /**\n * @description component type to render options (e.g. `'button'`)\n */\n type?: 'checkbox' | 'button'\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `CheckboxGroupProps` instead.\n */\nexport const checkboxGroupProps = buildProps({\n /**\n * @description binding value\n */\n modelValue: {\n type: definePropType<CheckboxGroupValueType>(Array),\n default: () => [],\n },\n /**\n * @description whether the nesting checkboxes are disabled\n */\n disabled: {\n type: Boolean,\n default: undefined,\n },\n /**\n * @description minimum number of checkbox checked\n */\n min: Number,\n /**\n * @description maximum number of checkbox checked\n */\n max: Number,\n /**\n * @description size of checkbox\n */\n size: useSizeProp,\n /**\n * @description border and background color when button is active\n */\n fill: String,\n /**\n * @description font color when button is active\n */\n textColor: String,\n /**\n * @description element tag of the checkbox group\n */\n tag: {\n type: String,\n default: 'div',\n },\n /**\n * @description whether to trigger form validation\n */\n validateEvent: {\n type: Boolean,\n default: true,\n },\n options: {\n type: definePropType<CheckboxOption[]>(Array),\n },\n props: {\n type: definePropType<CheckboxOptionProps>(Object),\n default: () => checkboxDefaultProps,\n },\n type: {\n type: String,\n values: ['checkbox', 'button'] as const,\n default: 'checkbox',\n },\n ...useAriaProps(['ariaLabel']),\n} as const)\n\nexport const checkboxGroupEmits = {\n [UPDATE_MODEL_EVENT]: (val: CheckboxGroupValueType) => isArray(val),\n change: (val: CheckboxValueType[]) => isArray(val),\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `CheckboxGroupProps` instead.\n */\nexport type CheckboxGroupPropsPublic = ExtractPublicPropTypes<\n typeof checkboxGroupProps\n>\nexport type CheckboxGroupEmits = typeof checkboxGroupEmits\nexport type CheckboxGroupInstance = InstanceType<typeof checkboxGroup> & unknown\n\nexport type CheckboxOption = CheckboxProps & Record<string, any>\n\ntype CheckboxOptionProps = {\n value?: string\n label?: string\n disabled?: string\n}\nexport const checkboxDefaultProps: Required<CheckboxOptionProps> = {\n label: 'label',\n value: 'value',\n disabled: 'disabled',\n}\n"],"mappings":";;;;;;;;;;AAkEA,MAAa,qBAAqB,WAAW;CAI3C,YAAY;EACV,MAAM,eAAuC,MAAM;EACnD,eAAe,EAAE;EAClB;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,KAAK;CAIL,KAAK;CAIL,MAAM;CAIN,MAAM;CAIN,WAAW;CAIX,KAAK;EACH,MAAM;EACN,SAAS;EACV;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CACD,SAAS,EACP,MAAM,eAAiC,MAAM,EAC9C;CACD,OAAO;EACL,MAAM,eAAoC,OAAO;EACjD,eAAe;EAChB;CACD,MAAM;EACJ,MAAM;EACN,QAAQ,CAAC,YAAY,SAAS;EAC9B,SAAS;EACV;CACD,GAAG,aAAa,CAAC,YAAY,CAAC;CAC/B,CAAU;AAEX,MAAa,qBAAqB;EAC/B,sBAAsB,QAAgC,QAAQ,IAAI;CACnE,SAAS,QAA6B,QAAQ,IAAI;CACnD;AAkBD,MAAa,uBAAsD;CACjE,OAAO;CACP,OAAO;CACP,UAAU;CACX"}
@@ -0,0 +1,37 @@
import { CheckboxValueType } from "./checkbox.js";
import { CheckboxGroupProps, CheckboxGroupValueType } from "./checkbox-group.js";
import "../../../index.js";
import * as vue from "vue";
//#region ../../packages/components/checkbox/src/checkbox-group.vue.d.ts
declare var __VLS_8: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_8) => any;
};
declare const __VLS_base: vue.DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType[]) => void;
"update:modelValue": (val: CheckboxGroupValueType) => void;
}, string, vue.PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
onChange?: ((val: CheckboxValueType[]) => any) | undefined;
"onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
}>, {
props: {
value?: string;
label?: string;
disabled?: string;
};
type: "checkbox" | "button";
disabled: boolean;
modelValue: CheckboxGroupValueType;
validateEvent: boolean;
tag: string;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,100 @@
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { debugWarn } from "../../../utils/error.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { useFormDisabled } from "../../form/src/hooks/use-form-common-props.mjs";
import { useFormItem, useFormItemInputId } from "../../form/src/hooks/use-form-item.mjs";
import { checkboxGroupContextKey } from "./constants.mjs";
import checkbox_default from "./checkbox2.mjs";
import checkbox_button_default from "./checkbox-button.mjs";
import { checkboxDefaultProps, checkboxGroupEmits, checkboxGroupProps } from "./checkbox-group.mjs";
import { isEqual, omit, pick } from "lodash-unified";
import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, provide, renderList, renderSlot, resolveDynamicComponent, toRefs, unref, watch, withCtx } from "vue";
//#region ../../packages/components/checkbox/src/checkbox-group.vue?vue&type=script&setup=true&lang.ts
var checkbox_group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElCheckboxGroup",
__name: "checkbox-group",
props: checkboxGroupProps,
emits: checkboxGroupEmits,
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const ns = useNamespace("checkbox");
const checkboxDisabled = useFormDisabled();
const { formItem } = useFormItem();
const { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, { formItemContext: formItem });
const changeEvent = async (value) => {
emit(UPDATE_MODEL_EVENT, value);
await nextTick();
emit(CHANGE_EVENT, value);
};
const modelValue = computed({
get() {
return props.modelValue;
},
set(val) {
changeEvent(val);
}
});
const aliasProps = computed(() => ({
...checkboxDefaultProps,
...props.props
}));
const getOptionProps = (option) => {
const { label, value, disabled } = aliasProps.value;
const base = {
label: option[label],
value: option[value],
disabled: option[disabled]
};
return {
...omit(option, [
label,
value,
disabled
]),
...base
};
};
const optionComponent = computed(() => props.type === "button" ? checkbox_button_default : checkbox_default);
provide(checkboxGroupContextKey, {
...pick(toRefs(props), [
"size",
"min",
"max",
"validateEvent",
"fill",
"textColor"
]),
disabled: checkboxDisabled,
modelValue,
changeEvent
});
watch(() => props.modelValue, (newVal, oldValue) => {
if (props.validateEvent && !isEqual(newVal, oldValue)) formItem?.validate("change").catch((err) => debugWarn(err));
});
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
id: unref(groupId),
class: normalizeClass(unref(ns).b("group")),
role: "group",
"aria-label": !unref(isLabeledByFormItem) ? __props.ariaLabel || "checkbox-group" : void 0,
"aria-labelledby": unref(isLabeledByFormItem) ? unref(formItem)?.labelId : void 0
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (item, index) => {
return openBlock(), createBlock(resolveDynamicComponent(optionComponent.value), mergeProps({ key: index }, { ref_for: true }, getOptionProps(item)), null, 16);
}), 128))])]),
_: 3
}, 8, [
"id",
"class",
"aria-label",
"aria-labelledby"
]);
};
}
});
//#endregion
export { checkbox_group_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=checkbox-group.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"checkbox-group.vue_vue_type_script_setup_true_lang.mjs","names":[],"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=\"\n !isLabeledByFormItem ? ariaLabel || 'checkbox-group' : undefined\n \"\n :aria-labelledby=\"isLabeledByFormItem ? formItem?.labelId : undefined\"\n >\n <slot>\n <component\n :is=\"optionComponent\"\n v-for=\"(item, index) in options\"\n :key=\"index\"\n v-bind=\"getOptionProps(item)\"\n />\n </slot>\n </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, toRefs, watch } from 'vue'\nimport { isEqual, omit, pick } from 'lodash-unified'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport {\n useFormDisabled,\n useFormItem,\n useFormItemInputId,\n} from '@element-plus/components/form'\nimport { checkboxDefaultProps, checkboxGroupEmits } from './checkbox-group'\nimport { checkboxGroupContextKey } from './constants'\nimport ElCheckbox from './checkbox.vue'\nimport ElCheckboxButton from './checkbox-button.vue'\n\nimport type {\n CheckboxGroupProps,\n CheckboxGroupValueType,\n} from './checkbox-group'\n\ndefineOptions({\n name: 'ElCheckboxGroup',\n})\n\nconst props = withDefaults(defineProps<CheckboxGroupProps>(), {\n modelValue: () => [],\n disabled: undefined,\n tag: 'div',\n validateEvent: true,\n props: () => checkboxDefaultProps,\n type: 'checkbox',\n})\nconst emit = defineEmits(checkboxGroupEmits)\nconst ns = useNamespace('checkbox')\n\nconst checkboxDisabled = useFormDisabled()\nconst { formItem } = useFormItem()\nconst { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst changeEvent = async (value: CheckboxGroupValueType) => {\n emit(UPDATE_MODEL_EVENT, value)\n await nextTick()\n emit(CHANGE_EVENT, value)\n}\n\nconst modelValue = computed({\n get() {\n return props.modelValue\n },\n set(val: CheckboxGroupValueType) {\n changeEvent(val)\n },\n})\n\nconst aliasProps = computed(() => ({\n ...checkboxDefaultProps,\n ...props.props,\n}))\nconst getOptionProps = (option: Record<string, any>) => {\n const { label, value, disabled } = aliasProps.value\n const base = {\n label: option[label],\n value: option[value],\n disabled: option[disabled],\n }\n return { ...omit(option, [label, value, disabled]), ...base }\n}\n\nconst optionComponent = computed(() =>\n props.type === 'button' ? ElCheckboxButton : ElCheckbox\n)\n\nprovide(checkboxGroupContextKey, {\n ...pick(toRefs(props), [\n 'size',\n 'min',\n 'max',\n 'validateEvent',\n 'fill',\n 'textColor',\n ]),\n disabled: checkboxDisabled,\n modelValue,\n changeEvent,\n})\n\nwatch(\n () => props.modelValue,\n (newVal, oldValue) => {\n if (props.validateEvent && !isEqual(newVal, oldValue)) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\n }\n)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EA+CA,MAAM,QAAQ;EAQd,MAAM,OAAO;EACb,MAAM,KAAK,aAAa,WAAU;EAElC,MAAM,mBAAmB,iBAAgB;EACzC,MAAM,EAAE,aAAa,aAAY;EACjC,MAAM,EAAE,SAAS,SAAS,wBAAwB,mBAAmB,OAAO,EAC1E,iBAAiB,UAClB,CAAA;EAED,MAAM,cAAc,OAAO,UAAkC;AAC3D,QAAK,oBAAoB,MAAK;AAC9B,SAAM,UAAS;AACf,QAAK,cAAc,MAAK;;EAG1B,MAAM,aAAa,SAAS;GAC1B,MAAM;AACJ,WAAO,MAAM;;GAEf,IAAI,KAA6B;AAC/B,gBAAY,IAAG;;GAElB,CAAA;EAED,MAAM,aAAa,gBAAgB;GACjC,GAAG;GACH,GAAG,MAAM;GACV,EAAC;EACF,MAAM,kBAAkB,WAAgC;GACtD,MAAM,EAAE,OAAO,OAAO,aAAa,WAAW;GAC9C,MAAM,OAAO;IACX,OAAO,OAAO;IACd,OAAO,OAAO;IACd,UAAU,OAAO;IACnB;AACA,UAAO;IAAE,GAAG,KAAK,QAAQ;KAAC;KAAO;KAAO;KAAS,CAAC;IAAE,GAAG;IAAK;;EAG9D,MAAM,kBAAkB,eACtB,MAAM,SAAS,WAAW,0BAAmB,iBAC/C;AAEA,UAAQ,yBAAyB;GAC/B,GAAG,KAAK,OAAO,MAAM,EAAE;IACrB;IACA;IACA;IACA;IACA;IACA;IACD,CAAC;GACF,UAAU;GACV;GACA;GACD,CAAA;AAED,cACQ,MAAM,aACX,QAAQ,aAAa;AACpB,OAAI,MAAM,iBAAiB,CAAC,QAAQ,QAAQ,SAAS,CACnD,WAAU,SAAS,SAAS,CAAC,OAAO,QAAQ,UAAU,IAAI,CAAA;IAGhE;;uBArHE,YAkBY,wBAjBL,QAAA,IAAG,EAAA;IACP,IAAI,MAAA,QAAO;IACX,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,QAAA,CAAA;IACZ,MAAK;IACJ,eAAoB,MAAA,oBAAmB,GAAG,QAAA,aAAS,mBAAuB;IAG1E,mBAAiB,MAAA,oBAAmB,GAAG,MAAA,SAAQ,EAAE,UAAU;;2BASrD,CAPP,WAOO,KAAA,QAAA,WAAA,EAAA,QAAA,mBANL,mBAKE,UAAA,MAAA,WAHwB,QAAA,UAAhB,MAAM,UAAK;yBAFrB,YAKE,wBAJK,gBAAA,MAAe,EADtB,WAKE,EAFC,KAAK,OAAK,EAAA,EAAA,SAAA,MAAA,EACH,eAAe,KAAI,CAAA,EAAA,MAAA,GAAA"}
@@ -0,0 +1,8 @@
import checkbox_group_vue_vue_type_script_setup_true_lang_default from "./checkbox-group.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/checkbox/src/checkbox-group.vue
var checkbox_group_default = checkbox_group_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { checkbox_group_default as default };
//# sourceMappingURL=checkbox-group2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"checkbox-group2.mjs","names":[],"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=\"\n !isLabeledByFormItem ? ariaLabel || 'checkbox-group' : undefined\n \"\n :aria-labelledby=\"isLabeledByFormItem ? formItem?.labelId : undefined\"\n >\n <slot>\n <component\n :is=\"optionComponent\"\n v-for=\"(item, index) in options\"\n :key=\"index\"\n v-bind=\"getOptionProps(item)\"\n />\n </slot>\n </component>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, toRefs, watch } from 'vue'\nimport { isEqual, omit, pick } from 'lodash-unified'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { debugWarn } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport {\n useFormDisabled,\n useFormItem,\n useFormItemInputId,\n} from '@element-plus/components/form'\nimport { checkboxDefaultProps, checkboxGroupEmits } from './checkbox-group'\nimport { checkboxGroupContextKey } from './constants'\nimport ElCheckbox from './checkbox.vue'\nimport ElCheckboxButton from './checkbox-button.vue'\n\nimport type {\n CheckboxGroupProps,\n CheckboxGroupValueType,\n} from './checkbox-group'\n\ndefineOptions({\n name: 'ElCheckboxGroup',\n})\n\nconst props = withDefaults(defineProps<CheckboxGroupProps>(), {\n modelValue: () => [],\n disabled: undefined,\n tag: 'div',\n validateEvent: true,\n props: () => checkboxDefaultProps,\n type: 'checkbox',\n})\nconst emit = defineEmits(checkboxGroupEmits)\nconst ns = useNamespace('checkbox')\n\nconst checkboxDisabled = useFormDisabled()\nconst { formItem } = useFormItem()\nconst { inputId: groupId, isLabeledByFormItem } = useFormItemInputId(props, {\n formItemContext: formItem,\n})\n\nconst changeEvent = async (value: CheckboxGroupValueType) => {\n emit(UPDATE_MODEL_EVENT, value)\n await nextTick()\n emit(CHANGE_EVENT, value)\n}\n\nconst modelValue = computed({\n get() {\n return props.modelValue\n },\n set(val: CheckboxGroupValueType) {\n changeEvent(val)\n },\n})\n\nconst aliasProps = computed(() => ({\n ...checkboxDefaultProps,\n ...props.props,\n}))\nconst getOptionProps = (option: Record<string, any>) => {\n const { label, value, disabled } = aliasProps.value\n const base = {\n label: option[label],\n value: option[value],\n disabled: option[disabled],\n }\n return { ...omit(option, [label, value, disabled]), ...base }\n}\n\nconst optionComponent = computed(() =>\n props.type === 'button' ? ElCheckboxButton : ElCheckbox\n)\n\nprovide(checkboxGroupContextKey, {\n ...pick(toRefs(props), [\n 'size',\n 'min',\n 'max',\n 'validateEvent',\n 'fill',\n 'textColor',\n ]),\n disabled: checkboxDisabled,\n modelValue,\n changeEvent,\n})\n\nwatch(\n () => props.modelValue,\n (newVal, oldValue) => {\n if (props.validateEvent && !isEqual(newVal, oldValue)) {\n formItem?.validate('change').catch((err) => debugWarn(err))\n }\n }\n)\n</script>\n"],"mappings":""}
@@ -0,0 +1,215 @@
import { EpPropMergeType } from "../../../utils/vue/props/types.js";
import { ComponentSize } from "../../../constants/size.js";
import "../../../utils/index.js";
import { AriaProps } from "../../../hooks/use-aria/index.js";
import "../../../hooks/index.js";
import { _default } from "./checkbox.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/checkbox/src/checkbox.d.ts
type CheckboxValueType = string | number | boolean;
interface CheckboxProps extends Pick<AriaProps, 'ariaLabel' | 'ariaControls'> {
/**
* @description binding value
*/
modelValue?: number | string | boolean;
/**
* @description label of the Checkbox when used inside a `checkbox-group`
*/
label?: string | boolean | number | object;
/**
* @description value of the Checkbox when used inside a `checkbox-group`
*/
value?: string | boolean | number | object;
/**
* @description Set indeterminate state, only responsible for style control
*/
indeterminate?: boolean;
/**
* @description whether the Checkbox is disabled
*/
disabled?: boolean;
/**
* @description if the Checkbox is checked
*/
checked?: boolean;
/**
* @description native 'name' attribute
*/
name?: string;
/**
* @description value of the Checkbox if it's checked
*/
trueValue?: string | number;
/**
* @description value of the Checkbox if it's not checked
*/
falseValue?: string | number;
/**
* @deprecated use `trueValue` instead
* @description value of the Checkbox if it's checked
*/
trueLabel?: string | number;
/**
* @deprecated use `falseValue` instead
* @description value of the Checkbox if it's not checked
*/
falseLabel?: string | number;
/**
* @description input id
*/
id?: string;
/**
* @description whether to add a border around Checkbox
*/
border?: boolean;
/**
* @description size of the Checkbox
*/
size?: ComponentSize;
/**
* @description input tabindex
*/
tabindex?: string | number;
/**
* @description whether to trigger form validation
*/
validateEvent?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `CheckboxProps` instead.
*/
declare const checkboxProps: {
ariaControls: StringConstructor;
/**
* @description binding value
*/
modelValue: {
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
default: undefined;
};
/**
* @description label of the Checkbox when used inside a `checkbox-group`
*/
label: {
type: (BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[];
default: undefined;
};
/**
* @description value of the Checkbox when used inside a `checkbox-group`
*/
value: {
type: (BooleanConstructor | ObjectConstructor | NumberConstructor | StringConstructor)[];
default: undefined;
};
/**
* @description Set indeterminate state, only responsible for style control
*/
indeterminate: BooleanConstructor;
/**
* @description whether the Checkbox is disabled
*/
disabled: {
type: BooleanConstructor;
default: undefined;
};
/**
* @description if the Checkbox is checked
*/
checked: BooleanConstructor;
/**
* @description native 'name' attribute
*/
name: {
type: StringConstructor;
default: undefined;
};
/**
* @description value of the Checkbox if it's checked
*/
trueValue: {
type: (NumberConstructor | StringConstructor)[];
default: undefined;
};
/**
* @description value of the Checkbox if it's not checked
*/
falseValue: {
type: (NumberConstructor | StringConstructor)[];
default: undefined;
};
/**
* @deprecated use `trueValue` instead
* @description value of the Checkbox if it's checked
*/
trueLabel: {
type: (NumberConstructor | StringConstructor)[];
default: undefined;
};
/**
* @deprecated use `falseValue` instead
* @description value of the Checkbox if it's not checked
*/
falseLabel: {
type: (NumberConstructor | StringConstructor)[];
default: undefined;
};
/**
* @description input id
*/
id: {
type: StringConstructor;
default: undefined;
};
/**
* @description whether to add a border around Checkbox
*/
border: BooleanConstructor;
/**
* @description size of the Checkbox
*/
size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
/**
* @description input tabindex
*/
tabindex: (NumberConstructor | StringConstructor)[];
/**
* @description whether to trigger form validation
*/
validateEvent: {
type: BooleanConstructor;
default: boolean;
};
ariaLabel: StringConstructor;
};
declare const checkboxEmits: {
"update:modelValue": (val: CheckboxValueType) => val is string | number | boolean;
change: (val: CheckboxValueType) => val is string | number | boolean;
};
/**
* @deprecated Removed after 3.0.0, Use `CheckboxProps` instead.
*/
type CheckboxPropsPublic = ExtractPublicPropTypes<typeof checkboxProps>;
type CheckboxEmits = typeof checkboxEmits;
type CheckboxInstance = InstanceType<typeof _default> & unknown;
declare const checkboxPropsDefaults: {
readonly modelValue: undefined;
readonly label: undefined;
readonly value: undefined;
readonly disabled: undefined;
readonly name: undefined;
readonly trueValue: undefined;
readonly falseValue: undefined;
readonly trueLabel: undefined;
readonly falseLabel: undefined;
readonly id: undefined;
readonly validateEvent: true;
};
//#endregion
export { CheckboxEmits, CheckboxInstance, CheckboxProps, CheckboxPropsPublic, CheckboxValueType, checkboxEmits, checkboxProps, checkboxPropsDefaults };
@@ -0,0 +1,97 @@
import { UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
import { isBoolean, isNumber, isString } from "../../../utils/types.mjs";
import { useSizeProp } from "../../../hooks/use-size/index.mjs";
import { useAriaProps } from "../../../hooks/use-aria/index.mjs";
//#region ../../packages/components/checkbox/src/checkbox.ts
/**
* @deprecated Removed after 3.0.0, Use `CheckboxProps` instead.
*/
const checkboxProps = {
modelValue: {
type: [
Number,
String,
Boolean
],
default: void 0
},
label: {
type: [
String,
Boolean,
Number,
Object
],
default: void 0
},
value: {
type: [
String,
Boolean,
Number,
Object
],
default: void 0
},
indeterminate: Boolean,
disabled: {
type: Boolean,
default: void 0
},
checked: Boolean,
name: {
type: String,
default: void 0
},
trueValue: {
type: [String, Number],
default: void 0
},
falseValue: {
type: [String, Number],
default: void 0
},
trueLabel: {
type: [String, Number],
default: void 0
},
falseLabel: {
type: [String, Number],
default: void 0
},
id: {
type: String,
default: void 0
},
border: Boolean,
size: useSizeProp,
tabindex: [String, Number],
validateEvent: {
type: Boolean,
default: true
},
ariaLabel: String,
...useAriaProps(["ariaControls"])
};
const checkboxEmits = {
[UPDATE_MODEL_EVENT]: (val) => isString(val) || isNumber(val) || isBoolean(val),
change: (val) => isString(val) || isNumber(val) || isBoolean(val)
};
const checkboxPropsDefaults = {
modelValue: void 0,
label: void 0,
value: void 0,
disabled: void 0,
name: void 0,
trueValue: void 0,
falseValue: void 0,
trueLabel: void 0,
falseLabel: void 0,
id: void 0,
validateEvent: true
};
//#endregion
export { checkboxEmits, checkboxProps, checkboxPropsDefaults };
//# sourceMappingURL=checkbox.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,36 @@
import { CheckboxProps, CheckboxValueType } from "./checkbox.js";
import * as vue from "vue";
//#region ../../packages/components/checkbox/src/checkbox.vue.d.ts
declare var __VLS_10: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_10) => any;
};
declare const __VLS_base: vue.DefineComponent<CheckboxProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
change: (val: CheckboxValueType) => void;
"update:modelValue": (val: CheckboxValueType) => void;
}, string, vue.PublicProps, Readonly<CheckboxProps> & Readonly<{
onChange?: ((val: CheckboxValueType) => any) | undefined;
"onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
}>, {
id: string;
disabled: boolean;
modelValue: number | string | boolean;
validateEvent: boolean;
name: string;
value: string | boolean | number | object;
label: string | boolean | number | object;
trueValue: string | number;
falseValue: string | number;
trueLabel: string | number;
falseLabel: string | number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,90 @@
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { checkboxEmits, checkboxProps } from "./checkbox.mjs";
import { useCheckbox } from "./composables/use-checkbox.mjs";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, isRef, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, vModelCheckbox, withCtx, withDirectives, withModifiers } from "vue";
//#region ../../packages/components/checkbox/src/checkbox.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = [
"id",
"indeterminate",
"name",
"tabindex",
"disabled"
];
var checkbox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: "ElCheckbox",
__name: "checkbox",
props: checkboxProps,
emits: checkboxEmits,
setup(__props) {
const props = __props;
const { inputId, isLabeledByFormItem, isChecked, isDisabled, isFocused, checkboxSize, hasOwnLabel, model, actualValue, handleChange, onClickRoot } = useCheckbox(props, useSlots());
const inputBindings = computed(() => {
if (props.trueValue || props.falseValue || props.trueLabel || props.falseLabel) return {
"true-value": props.trueValue ?? props.trueLabel ?? true,
"false-value": props.falseValue ?? props.falseLabel ?? false
};
return { value: actualValue.value };
});
const ns = useNamespace("checkbox");
const compKls = computed(() => {
return [
ns.b(),
ns.m(checkboxSize.value),
ns.is("disabled", isDisabled.value),
ns.is("bordered", props.border),
ns.is("checked", isChecked.value)
];
});
const spanKls = computed(() => {
return [
ns.e("input"),
ns.is("disabled", isDisabled.value),
ns.is("checked", isChecked.value),
ns.is("indeterminate", props.indeterminate),
ns.is("focus", isFocused.value)
];
});
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(!unref(hasOwnLabel) && unref(isLabeledByFormItem) ? "span" : "label"), {
for: !unref(hasOwnLabel) && unref(isLabeledByFormItem) ? null : unref(inputId),
class: normalizeClass(compKls.value),
"aria-controls": __props.indeterminate ? __props.ariaControls : null,
"aria-checked": __props.indeterminate ? "mixed" : void 0,
"aria-label": __props.ariaLabel,
onClick: unref(onClickRoot)
}, {
default: withCtx(() => [createElementVNode("span", { class: normalizeClass(spanKls.value) }, [withDirectives(createElementVNode("input", mergeProps({
id: unref(inputId),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
class: unref(ns).e("original"),
type: "checkbox",
indeterminate: __props.indeterminate,
name: __props.name,
tabindex: __props.tabindex,
disabled: unref(isDisabled)
}, inputBindings.value, {
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),
onClick: _cache[4] || (_cache[4] = withModifiers(() => {}, ["stop"]))
}), null, 16, _hoisted_1), [[vModelCheckbox, unref(model)]]), createElementVNode("span", { class: normalizeClass(unref(ns).e("inner")) }, null, 2)], 2), unref(hasOwnLabel) ? (openBlock(), createElementBlock("span", {
key: 0,
class: normalizeClass(unref(ns).e("label"))
}, [renderSlot(_ctx.$slots, "default"), !_ctx.$slots.default ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(__props.label), 1)], 64)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)]),
_: 3
}, 8, [
"for",
"class",
"aria-controls",
"aria-checked",
"aria-label",
"onClick"
]);
};
}
});
//#endregion
export { checkbox_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=checkbox.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"checkbox.vue_vue_type_script_setup_true_lang.mjs","names":["$slots"],"sources":["../../../../../../packages/components/checkbox/src/checkbox.vue"],"sourcesContent":["<template>\n <component\n :is=\"!hasOwnLabel && isLabeledByFormItem ? 'span' : 'label'\"\n :for=\"!hasOwnLabel && isLabeledByFormItem ? null : inputId\"\n :class=\"compKls\"\n :aria-controls=\"indeterminate ? ariaControls : null\"\n :aria-checked=\"indeterminate ? 'mixed' : undefined\"\n :aria-label=\"ariaLabel\"\n @click=\"onClickRoot\"\n >\n <span :class=\"spanKls\">\n <input\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 v-bind=\"inputBindings\"\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, checkboxPropsDefaults } from './checkbox'\nimport { useCheckbox } from './composables'\n\nimport type { CheckboxProps } from './checkbox'\n\ndefineOptions({\n name: 'ElCheckbox',\n})\n\nconst props = withDefaults(defineProps<CheckboxProps>(), checkboxPropsDefaults)\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 inputBindings = computed(() => {\n if (\n props.trueValue ||\n props.falseValue ||\n props.trueLabel ||\n props.falseLabel\n ) {\n return {\n 'true-value': props.trueValue ?? props.trueLabel ?? true,\n 'false-value': props.falseValue ?? props.falseLabel ?? false,\n }\n }\n return {\n value: actualValue.value,\n }\n})\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"],"mappings":";;;;;;;;;;;;;;;;;;;EA+CA,MAAM,QAAQ;EAId,MAAM,EACJ,SACA,qBACA,WACA,YACA,WACA,cACA,aACA,OACA,aACA,cACA,gBACE,YAAY,OAdF,UAAS,CAcK;EAE5B,MAAM,gBAAgB,eAAe;AACnC,OACE,MAAM,aACN,MAAM,cACN,MAAM,aACN,MAAM,WAEN,QAAO;IACL,cAAc,MAAM,aAAa,MAAM,aAAa;IACpD,eAAe,MAAM,cAAc,MAAM,cAAc;IACzD;AAEF,UAAO,EACL,OAAO,YAAY,OACrB;IACD;EAED,MAAM,KAAK,aAAa,WAAU;EAElC,MAAM,UAAU,eAAe;AAC7B,UAAO;IACL,GAAG,GAAG;IACN,GAAG,EAAE,aAAa,MAAM;IACxB,GAAG,GAAG,YAAY,WAAW,MAAM;IACnC,GAAG,GAAG,YAAY,MAAM,OAAO;IAC/B,GAAG,GAAG,WAAW,UAAU,MAAM;IACnC;IACD;EAED,MAAM,UAAU,eAAe;AAC7B,UAAO;IACL,GAAG,EAAE,QAAQ;IACb,GAAG,GAAG,YAAY,WAAW,MAAM;IACnC,GAAG,GAAG,WAAW,UAAU,MAAM;IACjC,GAAG,GAAG,iBAAiB,MAAM,cAAc;IAC3C,GAAG,GAAG,SAAS,UAAU,MAAM;IACjC;IACD;;uBArGC,YA+BY,wBAAA,CA9BJ,MAAA,YAAW,IAAI,MAAA,oBAAmB,GAAA,SAAA,QAAA,EAAA;IACvC,KAAG,CAAG,MAAA,YAAW,IAAI,MAAA,oBAAmB,GAAA,OAAU,MAAA,QAAO;IACzD,OAAK,eAAE,QAAA,MAAO;IACd,iBAAe,QAAA,gBAAgB,QAAA,eAAY;IAC3C,gBAAc,QAAA,gBAAa,UAAa;IACxC,cAAY,QAAA;IACZ,SAAO,MAAA,YAAA;;2BAmBD,CAjBP,mBAiBO,QAAA,EAjBA,OAAK,eAAE,QAAA,MAAO,oBACnB,mBAcE,SAdF,WAcE;KAbC,IAAI,MAAA,QAAO;iFACH,MAAK,QAAA,SAAA;KACb,OAAO,MAAA,GAAE,CAAC,EAAC,WAAA;KACZ,MAAK;KACJ,eAAe,QAAA;KACf,MAAM,QAAA;KACN,UAAU,QAAA;KACV,UAAU,MAAA,WAAA;OACH,cAAA,OAAa;KACpB,UAAM,OAAA,OAAA,OAAA,kBAAE,MAAA,aAAA,IAAA,MAAA,aAAA,CAAA,GAAA,KAAY;KACpB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;KAChB,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,UAAA,QAAS;KACf,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;iDAXF,MAAA,MAAK,CAAA,IAahB,mBAA+B,QAAA,EAAxB,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,QAAA,CAAA,mBAER,MAAA,YAAW,iBAAvB,mBAGO,QAAA;;KAHmB,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,QAAA,CAAA;QACnC,WAAQ,KAAA,QAAA,UAAA,GACSA,KAAAA,OAAO,wBAAxB,mBAAuD,UAAA,EAAA,KAAA,GAAA,EAAA,iCAAnB,QAAA,MAAK,EAAA,EAAA"}
@@ -0,0 +1,8 @@
import checkbox_vue_vue_type_script_setup_true_lang_default from "./checkbox.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/checkbox/src/checkbox.vue
var checkbox_default = checkbox_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { checkbox_default as default };
//# sourceMappingURL=checkbox2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"checkbox2.mjs","names":[],"sources":["../../../../../../packages/components/checkbox/src/checkbox.vue"],"sourcesContent":["<template>\n <component\n :is=\"!hasOwnLabel && isLabeledByFormItem ? 'span' : 'label'\"\n :for=\"!hasOwnLabel && isLabeledByFormItem ? null : inputId\"\n :class=\"compKls\"\n :aria-controls=\"indeterminate ? ariaControls : null\"\n :aria-checked=\"indeterminate ? 'mixed' : undefined\"\n :aria-label=\"ariaLabel\"\n @click=\"onClickRoot\"\n >\n <span :class=\"spanKls\">\n <input\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 v-bind=\"inputBindings\"\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, checkboxPropsDefaults } from './checkbox'\nimport { useCheckbox } from './composables'\n\nimport type { CheckboxProps } from './checkbox'\n\ndefineOptions({\n name: 'ElCheckbox',\n})\n\nconst props = withDefaults(defineProps<CheckboxProps>(), checkboxPropsDefaults)\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 inputBindings = computed(() => {\n if (\n props.trueValue ||\n props.falseValue ||\n props.trueLabel ||\n props.falseLabel\n ) {\n return {\n 'true-value': props.trueValue ?? props.trueLabel ?? true,\n 'false-value': props.falseValue ?? props.falseLabel ?? false,\n }\n }\n return {\n value: actualValue.value,\n }\n})\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"],"mappings":""}
@@ -0,0 +1,6 @@
import { CheckboxDisabled, useCheckboxDisabled } from "./use-checkbox-disabled.js";
import { useCheckboxEvent } from "./use-checkbox-event.js";
import { CheckboxModel, useCheckboxModel } from "./use-checkbox-model.js";
import { CheckboxStatus, useCheckboxStatus } from "./use-checkbox-status.js";
import { useCheckbox } from "./use-checkbox.js";
export { CheckboxDisabled, CheckboxModel, CheckboxStatus, useCheckbox, useCheckboxDisabled, useCheckboxEvent, useCheckboxModel, useCheckboxStatus };
@@ -0,0 +1,7 @@
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 { useCheckbox } from "./use-checkbox.mjs";
export { useCheckbox, useCheckboxDisabled, useCheckboxEvent, useCheckboxModel, useCheckboxStatus };
@@ -0,0 +1,16 @@
import { CheckboxModel } from "./use-checkbox-model.js";
import { CheckboxStatus } from "./use-checkbox-status.js";
import "./index.js";
import * as vue from "vue";
//#region ../../packages/components/checkbox/src/composables/use-checkbox-disabled.d.ts
declare const useCheckboxDisabled: ({
model,
isChecked
}: Pick<CheckboxModel, "model"> & Pick<CheckboxStatus, "isChecked">) => {
isDisabled: vue.ComputedRef<boolean>;
isLimitDisabled: vue.ComputedRef<boolean>;
};
type CheckboxDisabled = ReturnType<typeof useCheckboxDisabled>;
//#endregion
export { CheckboxDisabled, useCheckboxDisabled };
@@ -0,0 +1,27 @@
import { isUndefined } from "../../../../utils/types.mjs";
import { formContextKey } from "../../../form/src/constants.mjs";
import { useFormDisabled } from "../../../form/src/hooks/use-form-common-props.mjs";
import { checkboxGroupContextKey } from "../constants.mjs";
import { computed, inject } from "vue";
//#region ../../packages/components/checkbox/src/composables/use-checkbox-disabled.ts
const useCheckboxDisabled = ({ model, isChecked }) => {
const checkboxGroup = inject(checkboxGroupContextKey, void 0);
const formContext = inject(formContextKey, void 0);
const isLimitDisabled = computed(() => {
const max = checkboxGroup?.max?.value;
const min = checkboxGroup?.min?.value;
return !isUndefined(max) && model.value.length >= max && !isChecked.value || !isUndefined(min) && model.value.length <= min && isChecked.value;
});
return {
isDisabled: useFormDisabled(computed(() => {
if (checkboxGroup === void 0) return formContext?.disabled ?? isLimitDisabled.value;
else return checkboxGroup.disabled?.value || isLimitDisabled.value;
})),
isLimitDisabled
};
};
//#endregion
export { useCheckboxDisabled };
//# sourceMappingURL=use-checkbox-disabled.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"use-checkbox-disabled.mjs","names":[],"sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-disabled.ts"],"sourcesContent":["import { computed, inject } from 'vue'\nimport { formContextKey, useFormDisabled } from '@element-plus/components/form'\nimport { isUndefined } from '@element-plus/utils'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { CheckboxModel, CheckboxStatus } from '../composables'\n\nexport const useCheckboxDisabled = ({\n model,\n isChecked,\n}: Pick<CheckboxModel, 'model'> & Pick<CheckboxStatus, 'isChecked'>) => {\n const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n const formContext = inject(formContextKey, undefined)\n\n const isLimitDisabled = computed(() => {\n const max = checkboxGroup?.max?.value\n const min = checkboxGroup?.min?.value\n return (\n (!isUndefined(max) && model.value.length >= max && !isChecked.value) ||\n (!isUndefined(min) && model.value.length <= min && isChecked.value)\n )\n })\n\n const isDisabled = useFormDisabled(\n computed(() => {\n // Directly use the checkbox\n if (checkboxGroup === undefined) {\n return formContext?.disabled ?? isLimitDisabled.value\n } else {\n return checkboxGroup.disabled?.value || isLimitDisabled.value\n }\n })\n )\n\n return {\n isDisabled,\n isLimitDisabled,\n }\n}\n\nexport type CheckboxDisabled = ReturnType<typeof useCheckboxDisabled>\n"],"mappings":";;;;;;;AAOA,MAAa,uBAAuB,EAClC,OACA,gBACsE;CACtE,MAAM,gBAAgB,OAAO,yBAAyB,OAAU;CAChE,MAAM,cAAc,OAAO,gBAAgB,OAAU;CAErD,MAAM,kBAAkB,eAAe;EACrC,MAAM,MAAM,eAAe,KAAK;EAChC,MAAM,MAAM,eAAe,KAAK;AAChC,SACG,CAAC,YAAY,IAAI,IAAI,MAAM,MAAM,UAAU,OAAO,CAAC,UAAU,SAC7D,CAAC,YAAY,IAAI,IAAI,MAAM,MAAM,UAAU,OAAO,UAAU;GAE/D;AAaF,QAAO;EACL,YAZiB,gBACjB,eAAe;AAEb,OAAI,kBAAkB,OACpB,QAAO,aAAa,YAAY,gBAAgB;OAEhD,QAAO,cAAc,UAAU,SAAS,gBAAgB;IAE1D,CACH;EAIC;EACD"}
@@ -0,0 +1,21 @@
import { CheckboxProps } from "../checkbox.js";
import { useFormItemInputId } from "../../../form/src/hooks/use-form-item.js";
import "../../../form/index.js";
import { CheckboxDisabled } from "./use-checkbox-disabled.js";
import { CheckboxModel } from "./use-checkbox-model.js";
import { CheckboxStatus } from "./use-checkbox-status.js";
import "./index.js";
//#region ../../packages/components/checkbox/src/composables/use-checkbox-event.d.ts
declare const useCheckboxEvent: (props: CheckboxProps, {
model,
isLimitExceeded,
hasOwnLabel,
isDisabled,
isLabeledByFormItem
}: Pick<CheckboxModel, "model" | "isLimitExceeded"> & Pick<CheckboxStatus, "hasOwnLabel"> & Pick<CheckboxDisabled, "isDisabled"> & Pick<ReturnType<typeof useFormItemInputId>, "isLabeledByFormItem">) => {
handleChange: (e: Event) => void;
onClickRoot: (e: MouseEvent) => Promise<void>;
};
//#endregion
export { useCheckboxEvent };
@@ -0,0 +1,53 @@
import { CHANGE_EVENT } from "../../../../constants/event.mjs";
import { debugWarn } from "../../../../utils/error.mjs";
import { useFormItem } from "../../../form/src/hooks/use-form-item.mjs";
import { checkboxGroupContextKey } from "../constants.mjs";
import { computed, getCurrentInstance, inject, nextTick, watch } from "vue";
//#region ../../packages/components/checkbox/src/composables/use-checkbox-event.ts
const useCheckboxEvent = (props, { model, isLimitExceeded, hasOwnLabel, isDisabled, isLabeledByFormItem }) => {
const checkboxGroup = inject(checkboxGroupContextKey, void 0);
const { formItem } = useFormItem();
const { emit } = getCurrentInstance();
function getLabeledValue(value) {
return [
true,
props.trueValue,
props.trueLabel
].includes(value) ? props.trueValue ?? props.trueLabel ?? true : props.falseValue ?? props.falseLabel ?? false;
}
function emitChangeEvent(checked, e) {
emit(CHANGE_EVENT, getLabeledValue(checked), e);
}
function handleChange(e) {
if (isLimitExceeded.value) return;
const target = e.target;
emit(CHANGE_EVENT, getLabeledValue(target.checked), e);
}
async function onClickRoot(e) {
if (isLimitExceeded.value) return;
if (!hasOwnLabel.value && !isDisabled.value && isLabeledByFormItem.value) {
if (!e.composedPath().some((item) => item.tagName === "LABEL")) {
model.value = getLabeledValue([
false,
props.falseValue,
props.falseLabel
].includes(model.value));
await nextTick();
emitChangeEvent(model.value, e);
}
}
}
const validateEvent = computed(() => checkboxGroup?.validateEvent || props.validateEvent);
watch(() => props.modelValue, () => {
if (validateEvent.value) formItem?.validate("change").catch((err) => debugWarn(err));
});
return {
handleChange,
onClickRoot
};
};
//#endregion
export { useCheckboxEvent };
//# sourceMappingURL=use-checkbox-event.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"use-checkbox-event.mjs","names":[],"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 { CHANGE_EVENT } from '@element-plus/constants'\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_EVENT, 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_EVENT, 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"],"mappings":";;;;;;;AAcA,MAAa,oBACX,OACA,EACE,OACA,iBACA,aACA,YACA,0BAKC;CACH,MAAM,gBAAgB,OAAO,yBAAyB,OAAU;CAChE,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,EAAE,SAAS,oBAAoB;CAErC,SAAS,gBAAgB,OAAkC;AACzD,SAAO;GAAC;GAAM,MAAM;GAAW,MAAM;GAAU,CAAC,SAAS,MAAM,GAC1D,MAAM,aAAa,MAAM,aAAa,OACtC,MAAM,cAAc,MAAM,cAAc;;CAG/C,SAAS,gBACP,SACA,GACA;AACA,OAAK,cAAc,gBAAgB,QAAQ,EAAE,EAAE;;CAGjD,SAAS,aAAa,GAAU;AAC9B,MAAI,gBAAgB,MAAO;EAE3B,MAAM,SAAS,EAAE;AACjB,OAAK,cAAc,gBAAgB,OAAO,QAAQ,EAAE,EAAE;;CAGxD,eAAe,YAAY,GAAe;AACxC,MAAI,gBAAgB,MAAO;AAE3B,MAAI,CAAC,YAAY,SAAS,CAAC,WAAW,SAAS,oBAAoB,OAMjE;OAAI,CAJgC,EAAE,cAAc,CACtB,MAC3B,SAAU,KAAqB,YAAY,QAC7C,EACc;AACb,UAAM,QAAQ,gBACZ;KAAC;KAAO,MAAM;KAAY,MAAM;KAAW,CAAC,SAAS,MAAM,MAAM,CAClE;AACD,UAAM,UAAU;AAChB,oBAAgB,MAAM,OAAO,EAAE;;;;CAKrC,MAAM,gBAAgB,eACd,eAAe,iBAAiB,MAAM,cAC7C;AAED,aACQ,MAAM,kBACN;AACJ,MAAI,cAAc,MAChB,WAAU,SAAS,SAAS,CAAC,OAAO,QAAQ,UAAU,IAAI,CAAC;GAGhE;AAED,QAAO;EACL;EACA;EACD"}
@@ -0,0 +1,12 @@
import { CheckboxProps } from "../checkbox.js";
import * as vue from "vue";
//#region ../../packages/components/checkbox/src/composables/use-checkbox-model.d.ts
declare const useCheckboxModel: (props: CheckboxProps) => {
model: vue.WritableComputedRef<any, unknown>;
isGroup: vue.ComputedRef<boolean>;
isLimitExceeded: vue.Ref<boolean, boolean>;
};
type CheckboxModel = ReturnType<typeof useCheckboxModel>;
//#endregion
export { CheckboxModel, useCheckboxModel };
@@ -0,0 +1,40 @@
import { UPDATE_MODEL_EVENT } from "../../../../constants/event.mjs";
import { isArray, isUndefined } from "../../../../utils/types.mjs";
import { checkboxGroupContextKey } from "../constants.mjs";
import { computed, getCurrentInstance, inject, ref } from "vue";
//#region ../../packages/components/checkbox/src/composables/use-checkbox-model.ts
const useCheckboxModel = (props) => {
const selfModel = ref(false);
const { emit, vnode } = getCurrentInstance();
const checkboxGroup = inject(checkboxGroupContextKey, void 0);
const isGroup = computed(() => isUndefined(checkboxGroup) === false);
const isLimitExceeded = ref(false);
const isControlled = computed(() => {
const rawProps = vnode.props ?? {};
return "modelValue" in rawProps || "model-value" in rawProps;
});
const model = computed({
get() {
return isGroup.value ? checkboxGroup?.modelValue?.value : !isControlled.value ? selfModel.value : props.modelValue;
},
set(val) {
if (isGroup.value && isArray(val)) {
isLimitExceeded.value = checkboxGroup?.max?.value !== void 0 && val.length > checkboxGroup?.max.value && val.length > model.value.length;
isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val);
} else {
emit(UPDATE_MODEL_EVENT, val);
selfModel.value = val;
}
}
});
return {
model,
isGroup,
isLimitExceeded
};
};
//#endregion
export { useCheckboxModel };
//# sourceMappingURL=use-checkbox-model.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"use-checkbox-model.mjs","names":[],"sources":["../../../../../../../packages/components/checkbox/src/composables/use-checkbox-model.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, ref } from 'vue'\nimport { isArray, isUndefined } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { checkboxGroupContextKey } from '../constants'\n\nimport type { CheckboxProps } from '../checkbox'\n\nexport const useCheckboxModel = (props: CheckboxProps) => {\n const selfModel = ref<unknown>(false)\n const { emit, vnode } = getCurrentInstance()!\n const checkboxGroup = inject(checkboxGroupContextKey, undefined)\n const isGroup = computed(() => isUndefined(checkboxGroup) === false)\n const isLimitExceeded = ref(false)\n const isControlled = computed(() => {\n const rawProps = vnode.props ?? {}\n return 'modelValue' in rawProps || 'model-value' in rawProps\n })\n const model = computed({\n get() {\n return isGroup.value\n ? checkboxGroup?.modelValue?.value\n : !isControlled.value\n ? selfModel.value\n : props.modelValue\n },\n\n set(val: unknown) {\n if (isGroup.value && isArray(val)) {\n isLimitExceeded.value =\n checkboxGroup?.max?.value !== undefined &&\n val.length > checkboxGroup?.max.value &&\n val.length > model.value.length\n isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)\n } else {\n emit(UPDATE_MODEL_EVENT, val)\n selfModel.value = val\n }\n },\n })\n\n return {\n model,\n isGroup,\n isLimitExceeded,\n }\n}\n\nexport type CheckboxModel = ReturnType<typeof useCheckboxModel>\n"],"mappings":";;;;;;AAOA,MAAa,oBAAoB,UAAyB;CACxD,MAAM,YAAY,IAAa,MAAM;CACrC,MAAM,EAAE,MAAM,UAAU,oBAAoB;CAC5C,MAAM,gBAAgB,OAAO,yBAAyB,OAAU;CAChE,MAAM,UAAU,eAAe,YAAY,cAAc,KAAK,MAAM;CACpE,MAAM,kBAAkB,IAAI,MAAM;CAClC,MAAM,eAAe,eAAe;EAClC,MAAM,WAAW,MAAM,SAAS,EAAE;AAClC,SAAO,gBAAgB,YAAY,iBAAiB;GACpD;CACF,MAAM,QAAQ,SAAS;EACrB,MAAM;AACJ,UAAO,QAAQ,QACX,eAAe,YAAY,QAC3B,CAAC,aAAa,QACZ,UAAU,QACV,MAAM;;EAGd,IAAI,KAAc;AAChB,OAAI,QAAQ,SAAS,QAAQ,IAAI,EAAE;AACjC,oBAAgB,QACd,eAAe,KAAK,UAAU,UAC9B,IAAI,SAAS,eAAe,IAAI,SAChC,IAAI,SAAS,MAAM,MAAM;AAC3B,oBAAgB,UAAU,SAAS,eAAe,cAAc,IAAI;UAC/D;AACL,SAAK,oBAAoB,IAAI;AAC7B,cAAU,QAAQ;;;EAGvB,CAAC;AAEF,QAAO;EACL;EACA;EACA;EACD"}
@@ -0,0 +1,20 @@
import { CheckboxProps } from "../checkbox.js";
import { CheckboxModel } from "./use-checkbox-model.js";
import "./index.js";
import * as vue from "vue";
import { ComponentInternalInstance } from "vue";
//#region ../../packages/components/checkbox/src/composables/use-checkbox-status.d.ts
declare const useCheckboxStatus: (props: CheckboxProps, slots: ComponentInternalInstance["slots"], {
model
}: Pick<CheckboxModel, "model">) => {
checkboxButtonSize: vue.ComputedRef<"" | "default" | "small" | "large">;
isChecked: vue.ComputedRef<boolean>;
isFocused: vue.Ref<boolean, boolean>;
checkboxSize: vue.ComputedRef<"" | "default" | "small" | "large">;
hasOwnLabel: vue.ComputedRef<boolean>;
actualValue: vue.ComputedRef<string | number | boolean | object | undefined>;
};
type CheckboxStatus = ReturnType<typeof useCheckboxStatus>;
//#endregion
export { CheckboxStatus, useCheckboxStatus };
@@ -0,0 +1,37 @@
import { isArray, isBoolean, isObject, isPropAbsent } from "../../../../utils/types.mjs";
import { useFormSize } from "../../../form/src/hooks/use-form-common-props.mjs";
import { checkboxGroupContextKey } from "../constants.mjs";
import { isEqual } from "lodash-unified";
import { computed, inject, ref, toRaw } from "vue";
//#region ../../packages/components/checkbox/src/composables/use-checkbox-status.ts
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(actualValue.value)) return value.map(toRaw).some((o) => isEqual(o, actualValue.value));
else return value.map(toRaw).includes(actualValue.value);
else if (value !== null && value !== void 0) return value === props.trueValue || value === props.trueLabel;
else return !!value;
});
return {
checkboxButtonSize: useFormSize(computed(() => checkboxGroup?.size?.value), { prop: true }),
isChecked,
isFocused,
checkboxSize: useFormSize(computed(() => checkboxGroup?.size?.value)),
hasOwnLabel: computed(() => {
return !!slots.default || !isPropAbsent(actualValue.value);
}),
actualValue
};
};
//#endregion
export { useCheckboxStatus };
//# sourceMappingURL=use-checkbox-status.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"use-checkbox-status.mjs","names":[],"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"],"mappings":";;;;;;;AAUA,MAAa,qBACX,OACA,OACA,EAAE,YACC;CACH,MAAM,gBAAgB,OAAO,yBAAyB,OAAU;CAChE,MAAM,YAAY,IAAI,MAAM;CAC5B,MAAM,cAAc,eAAe;AAGjC,MAAI,CAAC,aAAa,MAAM,MAAM,CAC5B,QAAO,MAAM;AAEf,SAAO,MAAM;GACb;CACF,MAAM,YAAY,eAAwB;EACxC,MAAM,QAAQ,MAAM;AACpB,MAAI,UAAU,MAAM,CAClB,QAAO;WACE,QAAQ,MAAM,CACvB,KAAI,SAAS,YAAY,MAAM,CAC7B,QAAO,MAAM,IAAI,MAAM,CAAC,MAAM,MAAM,QAAQ,GAAG,YAAY,MAAM,CAAC;MAElE,QAAO,MAAM,IAAI,MAAM,CAAC,SAAS,YAAY,MAAM;WAE5C,UAAU,QAAQ,UAAU,OACrC,QAAO,UAAU,MAAM,aAAa,UAAU,MAAM;MAEpD,QAAO,CAAC,CAAC;GAEX;AAcF,QAAO;EACL,oBAbyB,YACzB,eAAe,eAAe,MAAM,MAAM,EAC1C,EACE,MAAM,MACP,CACF;EASC;EACA;EACA,cAVmB,YAAY,eAAe,eAAe,MAAM,MAAM,CAAC;EAW1E,aATkB,eAAwB;AAC1C,UAAO,CAAC,CAAC,MAAM,WAAW,CAAC,aAAa,YAAY,MAAM;IAC1D;EAQA;EACD"}
@@ -0,0 +1,21 @@
import { CheckboxProps } from "../checkbox.js";
import * as vue from "vue";
import { ComponentInternalInstance } from "vue";
//#region ../../packages/components/checkbox/src/composables/use-checkbox.d.ts
declare const useCheckbox: (props: CheckboxProps, slots: ComponentInternalInstance["slots"]) => {
inputId: vue.Ref<string | undefined, string | undefined>;
isLabeledByFormItem: vue.ComputedRef<boolean>;
isChecked: vue.ComputedRef<boolean>;
isDisabled: vue.ComputedRef<boolean>;
isFocused: vue.Ref<boolean, boolean>;
checkboxButtonSize: vue.ComputedRef<"" | "default" | "small" | "large">;
checkboxSize: vue.ComputedRef<"" | "default" | "small" | "large">;
hasOwnLabel: vue.ComputedRef<boolean>;
model: vue.WritableComputedRef<any, unknown>;
actualValue: vue.ComputedRef<string | number | boolean | object | undefined>;
handleChange: (e: Event) => void;
onClickRoot: (e: MouseEvent) => Promise<void>;
};
//#endregion
export { useCheckbox };
@@ -0,0 +1,78 @@
import { isArray, isPropAbsent } from "../../../../utils/types.mjs";
import { useDeprecated } from "../../../../hooks/use-deprecated/index.mjs";
import { useFormItem, useFormItemInputId } from "../../../form/src/hooks/use-form-item.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 { computed } from "vue";
//#region ../../packages/components/checkbox/src/composables/use-checkbox.ts
const useCheckbox = (props, slots) => {
const { formItem: elFormItem } = useFormItem();
const { model, isGroup, isLimitExceeded } = useCheckboxModel(props);
const { isFocused, isChecked, checkboxButtonSize, checkboxSize, hasOwnLabel, actualValue } = useCheckboxStatus(props, slots, { model });
const { isDisabled } = useCheckboxDisabled({
model,
isChecked
});
const { inputId, isLabeledByFormItem } = useFormItemInputId(props, {
formItemContext: elFormItem,
disableIdGeneration: hasOwnLabel,
disableIdManagement: isGroup
});
const { handleChange, onClickRoot } = useCheckboxEvent(props, {
model,
isLimitExceeded,
hasOwnLabel,
isDisabled,
isLabeledByFormItem
});
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,
isChecked,
isDisabled,
isFocused,
checkboxButtonSize,
checkboxSize,
hasOwnLabel,
model,
actualValue,
handleChange,
onClickRoot
};
};
//#endregion
export { useCheckbox };
//# sourceMappingURL=use-checkbox.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"use-checkbox.mjs","names":[],"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'\n\nimport type { ComponentInternalInstance } from 'vue'\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"],"mappings":";;;;;;;;;;AAYA,MAAa,eACX,OACA,UACG;CACH,MAAM,EAAE,UAAU,eAAe,aAAa;CAC9C,MAAM,EAAE,OAAO,SAAS,oBAAoB,iBAAiB,MAAM;CACnE,MAAM,EACJ,WACA,WACA,oBACA,cACA,aACA,gBACE,kBAAkB,OAAO,OAAO,EAAE,OAAO,CAAC;CAC9C,MAAM,EAAE,eAAe,oBAAoB;EAAE;EAAO;EAAW,CAAC;CAChE,MAAM,EAAE,SAAS,wBAAwB,mBAAmB,OAAO;EACjE,iBAAiB;EACjB,qBAAqB;EACrB,qBAAqB;EACtB,CAAC;CACF,MAAM,EAAE,cAAc,gBAAgB,iBAAiB,OAAO;EAC5D;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsB;EAC1B,SAAS,aAAa;AACpB,OAAI,QAAQ,MAAM,MAAM,IAAI,CAAC,MAAM,MAAM,SAAS,YAAY,MAAM,CAClE,OAAM,MAAM,KAAK,YAAY,MAAM;OAEnC,OAAM,QAAQ,MAAM,aAAa,MAAM,aAAa;;AAGxD,QAAM,WAAW,YAAY;;AAG/B,gBAAe;AAEf,eACE;EACE,MAAM;EACN,aAAa;EACb,SAAS;EACT,OAAO;EACP,KAAK;EACN,EACD,eAAe,QAAQ,SAAS,aAAa,MAAM,MAAM,CAAC,CAC3D;AAED,eACE;EACE,MAAM;EACN,aAAa;EACb,SAAS;EACT,OAAO;EACP,KAAK;EACN,EACD,eAAe,CAAC,CAAC,MAAM,UAAU,CAClC;AAED,eACE;EACE,MAAM;EACN,aAAa;EACb,SAAS;EACT,OAAO;EACP,KAAK;EACN,EACD,eAAe,CAAC,CAAC,MAAM,WAAW,CACnC;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
@@ -0,0 +1,12 @@
import { CheckboxGroupProps } from "./checkbox-group.js";
import { ComputedRef, InjectionKey, ToRefs, WritableComputedRef } from "vue";
//#region ../../packages/components/checkbox/src/constants.d.ts
type CheckboxGroupContext = {
modelValue?: WritableComputedRef<any>;
changeEvent?: (...args: any) => any;
disabled?: ComputedRef<boolean>;
} & ToRefs<Pick<CheckboxGroupProps, 'size' | 'min' | 'max' | 'validateEvent' | 'fill' | 'textColor'>>;
declare const checkboxGroupContextKey: InjectionKey<CheckboxGroupContext>;
//#endregion
export { checkboxGroupContextKey };
@@ -0,0 +1,6 @@
//#region ../../packages/components/checkbox/src/constants.ts
const checkboxGroupContextKey = Symbol("checkboxGroupContextKey");
//#endregion
export { checkboxGroupContextKey };
//# sourceMappingURL=constants.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"constants.mjs","names":[],"sources":["../../../../../../packages/components/checkbox/src/constants.ts"],"sourcesContent":["import type {\n ComputedRef,\n InjectionKey,\n ToRefs,\n WritableComputedRef,\n} from 'vue'\nimport type { CheckboxGroupProps } from './checkbox-group'\n\ntype CheckboxGroupContext = {\n modelValue?: WritableComputedRef<any>\n changeEvent?: (...args: any) => any\n disabled?: ComputedRef<boolean>\n} & ToRefs<\n Pick<\n CheckboxGroupProps,\n 'size' | 'min' | 'max' | 'validateEvent' | 'fill' | 'textColor'\n >\n>\n\nexport const checkboxGroupContextKey: InjectionKey<CheckboxGroupContext> =\n Symbol('checkboxGroupContextKey')\n"],"mappings":";AAmBA,MAAa,0BACX,OAAO,0BAA0B"}
@@ -0,0 +1,2 @@
import "../../base/style/css.mjs";
import "element-plus/theme-chalk/el-checkbox.css";
@@ -0,0 +1,2 @@
import "../../base/style/index.mjs";
import "element-plus/theme-chalk/src/checkbox.scss";