@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
232 lines (231 loc) • 8.05 kB
JavaScript
;
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
const vue = require("vue");
const fieldInjection = require("./fieldInjection-aGL6GpMR.cjs");
const unrefElement = require("./unrefElement-BozOaxdL.cjs");
const config = require("./config-eYBvpFOZ.cjs");
const helpers = require("./helpers.cjs");
const validatableFormElementTypes = config.isSSR ? [] : [
HTMLButtonElement,
HTMLFieldSetElement,
HTMLInputElement,
HTMLObjectElement,
HTMLOutputElement,
HTMLSelectElement,
HTMLTextAreaElement
];
function asValidatableFormElement(el) {
return validatableFormElementTypes.some((t) => el instanceof t) ? el : null;
}
const constraintValidationAttributes = [
"disabled",
"required",
"pattern",
"maxlength",
"minlength",
"max",
"min",
"step"
];
function useInputHandler(inputRef, emits, props) {
const { parentField } = fieldInjection.injectField();
const maybeElement = vue.computed(() => {
const el = unrefElement.unrefElement(inputRef);
if (!el) return void 0;
if (el.getAttribute("data-oruga-input"))
return el;
const inputs = el.querySelector("[data-oruga-input]");
if (!inputs) {
console.warn(
"useInputHandler: Underlaying Oruga input component not found"
);
return void 0;
}
return inputs;
});
const element = vue.computed(() => {
const el = maybeElement.value;
if (!el) console.warn("useInputHandler: inputRef contains no element");
return el;
});
const isFocused = vue.ref(false);
function setFocus() {
vue.nextTick(() => {
if (element.value) element.value.focus();
});
}
function doClick() {
vue.nextTick(() => {
if (element.value) element.value.click();
});
}
function onBlur(event) {
isFocused.value = false;
if (parentField == null ? void 0 : parentField.value) parentField.value.setFocus(false);
emits("blur", event ? event : new Event("blur"));
checkHtml5Validity();
}
function onFocus(event) {
isFocused.value = true;
if (parentField == null ? void 0 : parentField.value) parentField.value.setFocus(true);
emits("focus", event ? event : new Event("focus"));
}
const isValid = vue.ref(true);
function setFieldValidity(variant, message) {
vue.nextTick(() => {
if (parentField == null ? void 0 : parentField.value) {
if (!parentField.value.props.variant)
parentField.value.setVariant(variant);
if (!parentField.value.props.message)
parentField.value.setMessage(message);
}
});
}
function checkHtml5Validity() {
if (!props.useHtml5Validation) return;
if (!element.value) return;
if (element.value.validity.valid) {
setFieldValidity(null, null);
isValid.value = true;
} else {
setInvalid();
isValid.value = false;
}
}
function setInvalid() {
var _a;
const variant = "danger";
const message = (_a = element.value) == null ? void 0 : _a.validationMessage;
setFieldValidity(variant, message);
}
function onInvalid(event) {
checkHtml5Validity();
const validatable = asValidatableFormElement(event.target);
if (validatable && (parentField == null ? void 0 : parentField.value) && props.useHtml5Validation) {
event.preventDefault();
let isFirstInvalid = false;
if (validatable.form != null) {
const formElements = validatable.form.elements;
for (let i = 0; i < formElements.length; ++i) {
const element2 = asValidatableFormElement(
formElements.item(i)
);
if ((element2 == null ? void 0 : element2.willValidate) && !element2.validity.valid) {
isFirstInvalid = validatable === element2;
break;
}
}
}
if (isFirstInvalid) {
const fieldElement = parentField.value.$el;
const invalidHandler = config.getOption("invalidHandler");
if (invalidHandler instanceof Function) {
invalidHandler(validatable, fieldElement ?? void 0);
} else {
const canScrollToField = (fieldElement == null ? void 0 : fieldElement.scrollIntoView) != void 0;
validatable.focus({ preventScroll: canScrollToField });
if (canScrollToField && fieldElement) {
fieldElement.scrollIntoView({ block: "nearest" });
}
}
}
}
emits("invalid", event);
}
if (!config.isSSR) {
const forceValidationUpdate = vue.ref(null);
vue.watchEffect(() => {
forceValidationUpdate.value;
if (!(props.useHtml5Validation ?? true)) return;
const element2 = maybeElement.value;
if (!helpers.isDefined(element2)) return;
const validity = props.customValidity ?? "";
if (typeof validity === "string") {
element2.setCustomValidity(validity);
} else {
element2.setCustomValidity(
validity(props.modelValue, element2.validity)
);
}
if (!isValid.value) checkHtml5Validity();
});
vue.watch(
[maybeElement, () => props.useHtml5Validation ?? true],
(newItems, oldItems) => {
const newElement = newItems[0];
const newUseValidation = newItems[1];
const oldElement = oldItems[0];
const oldUseValidation = oldItems[1];
if (newElement !== oldElement) {
oldElement == null ? void 0 : oldElement.setCustomValidity("");
} else if (oldUseValidation && !newUseValidation) {
newElement == null ? void 0 : newElement.setCustomValidity("");
}
}
);
const onAttributeChange = () => {
vue.triggerRef(forceValidationUpdate);
};
let validationAttributeObserver = null;
vue.watch(
[
maybeElement,
isValid,
() => props.useHtml5Validation ?? true,
() => props.customValidity
],
(newData, oldData) => {
const el = newData[0];
const valid = newData[1];
const useValidation = newData[2];
const functionalValidation = newData[3] instanceof Function;
const oldEl = oldData[0];
const needWatcher = helpers.isDefined(el) && useValidation && // For inputs known to be invalid, changes in constraint validation properties
// may make it so the field is now valid and the message needs to be hidden.
// For browser-implemented constraint validation (e.g. the `required` attribute),
// we just care about the message displayed to the user, which is hidden for valid inputs
// until the next interaction with the control.
(!valid || // For inputs with complex custom validation, any changes to validation-related attributes
// may affect the results of `props.customValidity`.
functionalValidation);
if ((!needWatcher || el !== oldEl) && validationAttributeObserver != null) {
if (validationAttributeObserver.takeRecords().length > 0)
onAttributeChange();
validationAttributeObserver.disconnect();
validationAttributeObserver = null;
}
if (needWatcher && helpers.isDefined(el) && (validationAttributeObserver == null || el !== oldEl)) {
if (validationAttributeObserver == null) {
validationAttributeObserver = new MutationObserver(
onAttributeChange
);
}
validationAttributeObserver.observe(el, {
attributeFilter: constraintValidationAttributes
});
let ancestor = el;
while (ancestor = ancestor.parentNode) {
if (ancestor instanceof HTMLFieldSetElement) {
validationAttributeObserver.observe(ancestor, {
attributeFilter: ["disabled"]
});
}
}
}
}
);
}
return {
input: element,
isFocused,
isValid,
setFocus,
doClick,
onFocus,
onBlur,
onInvalid,
checkHtml5Validity
};
}
exports.useInputHandler = useInputHandler;
//# sourceMappingURL=useInputHandler-DDJU6Lju.cjs.map