element-plus
Version:
A Component Library for Vue 3
1 lines • 3.76 kB
Source Map (JSON)
{"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"}