@stimulus-library/controllers/dist/forms/value_warn_controller.js

A library of useful controllers for Stimulus

import { BaseController } from "@stimulus-library/utilities";
import { installClassMethods, useEventListener } from "@stimulus-library/mixins";
export class ValueWarnController extends BaseController {
    get _maxMessage() {
        return this.hasMaxMessageValue ? this.maxMessageValue : `Value must be less than ${this.maxValue}`;
    }
    get _minMessage() {
        return this.hasMinMessageValue ? this.minMessageValue : `Value must be greater than ${this.minValue}`;
    }
    get defaultWarningHideClasses() {
        return ["hide"];
    }
    connect() {
        installClassMethods(this);
        this.addWarningHideClasses(this.warningTarget);
        useEventListener(this, this.inputTarget, "input", this._check);
        this._check();
    }
    _check() {
        if (this.hasMinValue && Number.parseFloat(this.inputTarget.value) < this.minValue) {
            this.removeWarningHideClasses(this.warningTarget);
            this.addInputWarningClasses(this.inputTarget);
            this.warningTarget.innerText = this._minMessage;
        }
        else if (this.hasMaxValue && Number.parseFloat(this.inputTarget.value) > this.maxValue) {
            this.removeWarningHideClasses(this.warningTarget);
            this.addInputWarningClasses(this.inputTarget);
            this.warningTarget.innerText = this._maxMessage;
        }
        else {
            this.addWarningHideClasses(this.warningTarget);
            this.removeInputWarningClasses(this.inputTarget);
            this.warningTarget.innerText = "";
        }
    }
}
ValueWarnController.classes = ["inputWarning", "warningHide"];
ValueWarnController.targets = ["input", "warning"];
ValueWarnController.values = {
    max: Number,
    min: Number,
    minMessage: String,
    maxMessage: String,
};