diff --git a/lib/rbui/checkbox/checkbox.rb b/lib/rbui/checkbox/checkbox.rb index 8cdc03be..9ea4c2fc 100644 --- a/lib/rbui/checkbox/checkbox.rb +++ b/lib/rbui/checkbox/checkbox.rb @@ -14,7 +14,7 @@ def default_attrs data: { rbui__form_field_target: "input", rbui__checkbox_group_target: "checkbox", - action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid change->rbui--checkbox-group#onChange" + action: "change->rbui--checkbox-group#onChange change->rbui--form-field#onInput invalid->rbui--form-field#onInvalid" }, class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary" } diff --git a/lib/rbui/checkbox/checkbox_group_controller.js b/lib/rbui/checkbox/checkbox_group_controller.js index ca0a289d..546167ad 100644 --- a/lib/rbui/checkbox/checkbox_group_controller.js +++ b/lib/rbui/checkbox/checkbox_group_controller.js @@ -1,23 +1,21 @@ -import { Controller } from "@hotwired/stimulus" +import { Controller } from "@hotwired/stimulus"; export default class extends Controller { static targets = ["checkbox"]; connect() { - if (this.element.hasAttribute("data-required")) { - this.checkboxTargets.forEach(checkbox => { - checkbox.required = true; - }); - } + this.#handleRequired(); } - onChange(event) { - if (this.element.hasAttribute("data-required")) { - const checked = this.checkboxTargets.some(checkbox => checkbox.checked); + onChange() { + this.#handleRequired(); + } + + #handleRequired() { + if (!this.element.hasAttribute("data-required")) return; + + const checked = this.checkboxTargets.some(({ checked }) => checked); - this.checkboxTargets.forEach(checkbox => { - checkbox.required = !checked; - }); - } + this.checkboxTargets.forEach((checkbox) => (checkbox.required = !checked)); } } diff --git a/lib/rbui/form/form_field_controller.js b/lib/rbui/form/form_field_controller.js index b5d982f7..6f2e7828 100644 --- a/lib/rbui/form/form_field_controller.js +++ b/lib/rbui/form/form_field_controller.js @@ -1,9 +1,8 @@ -import { Controller } from "@hotwired/stimulus" +import { Controller } from "@hotwired/stimulus"; export default class extends Controller { static targets = ["input", "error"]; - static values = { shouldValidate: false } - + static values = { shouldValidate: false }; connect() { if (this.errorTarget.textContent) { @@ -41,45 +40,20 @@ export default class extends Controller { } #getValidationMessage() { - const input = this.inputTarget; - const defaultMessage = this.inputTarget.validationMessage; + let errorMessage; - if (input.validity.valueMissing) { - return input.dataset.valueMissing || defaultMessage; - } + const { validity, dataset, validationMessage } = this.inputTarget; - if (input.validity.badInput) { - return input.dataset.badInput || defaultMessage; - } - - if (input.validity.patternMismatch) { - return input.dataset.patternMismatch || defaultMessage; - } - - if (input.validity.rangeOverflow) { - return input.dataset.rangeOverflow || defaultMessage; - } - - if (input.validity.rangeUnderflow) { - return input.dataset.rangeUnderflow || defaultMessage; - } - - if (input.validity.stepMismatch) { - return input.dataset.stepMismatch || defaultMessage; - } - - if (input.validity.tooLong) { - return input.dataset.tooLong || defaultMessage; - } - - if (input.validity.tooShort) { - return input.dataset.tooShort || defaultMessage; - } - - if (input.validity.typeMismatch) { - return input.dataset.typeMismatch || defaultMessage; - } + if (validity.tooLong) errorMessage = dataset.tooLong; + if (validity.tooShort) errorMessage = dataset.tooShort; + if (validity.badInput) errorMessage = dataset.badInput; + if (validity.typeMismatch) errorMessage = dataset.typeMismatch; + if (validity.stepMismatch) errorMessage = dataset.stepMismatch; + if (validity.valueMissing) errorMessage = dataset.valueMissing; + if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow; + if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow; + if (validity.patternMismatch) errorMessage = dataset.patternMismatch; - return defaultMessage; + return errorMessage || validationMessage; } } diff --git a/lib/rbui/radio_button/radio_button.rb b/lib/rbui/radio_button/radio_button.rb index a99ae303..b4c85448 100644 --- a/lib/rbui/radio_button/radio_button.rb +++ b/lib/rbui/radio_button/radio_button.rb @@ -13,7 +13,7 @@ def default_attrs type: "radio", data: { rbui__form_field_target: "input", - action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid" + action: "change->rbui--form-field#onInput invalid->rbui--form-field#onInvalid" }, class: "h-4 w-4 p-0 border-primary rounded-full flex-none" }