UNPKG

element-plus

Version:

A Component Library for Vue 3

178 lines (175 loc) 5.57 kB
import { inject, computed, ref, getCurrentInstance, watch } from 'vue'; import { toTypeString } from '@vue/shared'; import '../../../constants/index.mjs'; import '../../../tokens/index.mjs'; import '../../../hooks/index.mjs'; import '../../../utils/index.mjs'; import { formContextKey, formItemContextKey } from '../../../tokens/form.mjs'; import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs'; import { useSize } from '../../../hooks/use-common-props/index.mjs'; import { debugWarn } from '../../../utils/error.mjs'; const useCheckboxProps = { modelValue: { type: [Boolean, Number, String], default: () => void 0 }, label: { type: [String, Boolean, Number, Object] }, indeterminate: Boolean, disabled: Boolean, checked: Boolean, name: { type: String, default: void 0 }, trueLabel: { type: [String, Number], default: void 0 }, falseLabel: { type: [String, Number], default: void 0 }, tabindex: [String, Number], size: String }; const useCheckboxGroup = () => { const elForm = inject(formContextKey, {}); const elFormItem = inject(formItemContextKey, {}); const checkboxGroup = inject("CheckboxGroup", {}); const isGroup = computed(() => checkboxGroup && (checkboxGroup == null ? void 0 : checkboxGroup.name) === "ElCheckboxGroup"); const elFormItemSize = computed(() => { return elFormItem.size; }); return { isGroup, checkboxGroup, elForm, elFormItemSize, elFormItem }; }; const useModel = (props) => { const selfModel = ref(false); const { emit } = getCurrentInstance(); const { isGroup, checkboxGroup } = useCheckboxGroup(); const isLimitExceeded = ref(false); const model = computed({ get() { var _a, _b; return isGroup.value ? (_a = checkboxGroup.modelValue) == null ? void 0 : _a.value : (_b = props.modelValue) != null ? _b : selfModel.value; }, set(val) { var _a; if (isGroup.value && Array.isArray(val)) { isLimitExceeded.value = checkboxGroup.max !== void 0 && val.length > checkboxGroup.max.value; isLimitExceeded.value === false && ((_a = checkboxGroup == null ? void 0 : checkboxGroup.changeEvent) == null ? void 0 : _a.call(checkboxGroup, val)); } else { emit(UPDATE_MODEL_EVENT, val); selfModel.value = val; } } }); return { model, isLimitExceeded }; }; const useCheckboxStatus = (props, { model }) => { const { isGroup, checkboxGroup } = useCheckboxGroup(); const focus = ref(false); const size = useSize(checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize, { prop: true }); const isChecked = computed(() => { const value = model.value; if (toTypeString(value) === "[object Boolean]") { return value; } else if (Array.isArray(value)) { return value.includes(props.label); } else if (value !== null && value !== void 0) { return value === props.trueLabel; } else { return !!value; } }); const checkboxSize = useSize(computed(() => { var _a; return isGroup.value ? (_a = checkboxGroup == null ? void 0 : checkboxGroup.checkboxGroupSize) == null ? void 0 : _a.value : void 0; })); return { isChecked, focus, size, checkboxSize }; }; const useDisabled = (props, { model, isChecked }) => { const { elForm, isGroup, checkboxGroup } = useCheckboxGroup(); const isLimitDisabled = computed(() => { var _a, _b; const max = (_a = checkboxGroup.max) == null ? void 0 : _a.value; const min = (_b = checkboxGroup.min) == null ? void 0 : _b.value; return !!(max || min) && model.value.length >= max && !isChecked.value || model.value.length <= min && isChecked.value; }); const isDisabled = computed(() => { var _a, _b; const disabled = props.disabled || elForm.disabled; return (_b = isGroup.value ? ((_a = checkboxGroup.disabled) == null ? void 0 : _a.value) || disabled || isLimitDisabled.value : props.disabled || elForm.disabled) != null ? _b : false; }); return { isDisabled, isLimitDisabled }; }; const setStoreValue = (props, { model }) => { function addToStore() { if (Array.isArray(model.value) && !model.value.includes(props.label)) { model.value.push(props.label); } else { model.value = props.trueLabel || true; } } props.checked && addToStore(); }; const useEvent = (props, { isLimitExceeded }) => { const { elFormItem } = useCheckboxGroup(); const { emit } = getCurrentInstance(); function handleChange(e) { var _a, _b; if (isLimitExceeded.value) return; const target = e.target; const value = target.checked ? (_a = props.trueLabel) != null ? _a : true : (_b = props.falseLabel) != null ? _b : false; emit("change", value, e); } watch(() => props.modelValue, () => { var _a; (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn(err)); }); return { handleChange }; }; const useCheckbox = (props) => { const { model, isLimitExceeded } = useModel(props); const { focus, size, isChecked, checkboxSize } = useCheckboxStatus(props, { model }); const { isDisabled } = useDisabled(props, { model, isChecked }); const { handleChange } = useEvent(props, { isLimitExceeded }); setStoreValue(props, { model }); return { isChecked, isDisabled, checkboxSize, model, handleChange, focus, size }; }; export { useCheckbox, useCheckboxGroup, useCheckboxProps }; //# sourceMappingURL=useCheckbox.mjs.map