UNPKG

bootstrap-vue-next

Version:

Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development

130 lines (129 loc) 4.21 kB
import { ref, inject, computed, onMounted, onActivated, nextTick } from "vue"; import { u as useAriaInvalid } from "./useAriaInvalid-BTUbGj3Y.mjs"; import { u as useId } from "./useId-t29UARy6.mjs"; import { j as useFocus } from "./index-Bg04zFDG.mjs"; import { k as formGroupKey } from "./keys-BLeKMItg.mjs"; import { u as useDebounceFn } from "./debounce-BHqBzJ1a.mjs"; import { u as useStateClass } from "./useStateClass-BGbSLWFN.mjs"; import { u as useToNumber } from "./index-wxu-PlLx.mjs"; const normalizeInput = (v, modelModifiers) => { if (v === null) return; let update = v; if (modelModifiers.number && typeof update === "string" && update !== "") { const parsed = Number.parseFloat(update); update = Number.isNaN(parsed) ? update : parsed; } return update; }; const useFormInput = (props, input, modelValue, modelModifiers) => { const forceUpdateKey = ref(0); const computedId = useId(() => props.id, "input"); const debounceNumber = useToNumber(() => props.debounce ?? 0, { nanToZero: true }); const debounceMaxWaitNumber = useToNumber(() => props.debounceMaxWait ?? Number.NaN); const formGroupData = inject(formGroupKey, null)?.(computedId); const computedState = computed( () => props.state !== void 0 ? props.state : formGroupData?.state.value ?? null ); const computedAriaInvalid = useAriaInvalid(() => props.ariaInvalid, computedState); const stateClass = useStateClass(computedState); const internalUpdateModelValue = useDebounceFn( (value) => { modelValue.value = value; }, () => modelModifiers.lazy === true ? 0 : debounceNumber.value, { maxWait: () => modelModifiers.lazy === true ? Number.NaN : debounceMaxWaitNumber.value } ); const updateModelValue = (value, force = false, immediate = false) => { if (modelModifiers.lazy === true && force === false) return; if (immediate) { modelValue.value = value; } else { internalUpdateModelValue(value); } }; const { focused } = useFocus(input, { initialValue: props.autofocus }); const _formatValue = (value, evt, force = false) => { if (props.formatter !== void 0 && (!props.lazyFormatter || force)) { return props.formatter(value, evt); } return value; }; onMounted(() => { if (input.value) { input.value.value = modelValue.value?.toString() ?? ""; } }); onActivated(() => { nextTick(() => { if (props.autofocus) { focused.value = true; } }); }); const onInput = (evt) => { const { value } = evt.target; const formattedValue = _formatValue(value, evt); if (evt.defaultPrevented) { evt.preventDefault(); return; } const nextModel = formattedValue; updateModelValue(nextModel); }; const onChange = (evt) => { const { value } = evt.target; const formattedValue = _formatValue(value, evt); if (evt.defaultPrevented) { evt.preventDefault(); return; } const nextModel = formattedValue; if (modelValue.value !== nextModel) { updateModelValue(formattedValue, true); } }; const onBlur = (evt) => { if (!modelModifiers.lazy && !props.lazyFormatter && !modelModifiers.trim && debounceNumber.value <= 0) return; const { value } = evt.target; const formattedValue = _formatValue(value, evt, true); const nextModel = modelModifiers.trim ? formattedValue.trim() : formattedValue; const needsForceUpdate = nextModel.length !== formattedValue.length; internalUpdateModelValue.cancel(); if (modelValue.value !== nextModel) { updateModelValue(formattedValue, true, true); } if (modelModifiers.trim && needsForceUpdate) { forceUpdateKey.value = forceUpdateKey.value + 1; } }; const focus = () => { if (!props.disabled) { focused.value = true; } }; const blur = () => { if (!props.disabled) { focused.value = false; } }; return { input, computedId, computedAriaInvalid, onInput, onChange, onBlur, focus, blur, forceUpdateKey, stateClass }; }; export { normalizeInput as n, useFormInput as u }; //# sourceMappingURL=useFormInput-CfzQTcFF.mjs.map