From a15bf06abe8e8cf0b1c3a677c62a6c25b5a009a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:13:10 -0300 Subject: [PATCH 01/11] BETTER CODE --- .../checkbox/checkbox_group_controller.js | 2 +- lib/rbui/form/form_field_controller.js | 54 +++++-------------- 2 files changed, 15 insertions(+), 41 deletions(-) diff --git a/lib/rbui/checkbox/checkbox_group_controller.js b/lib/rbui/checkbox/checkbox_group_controller.js index ca0a289d..7c79a3a2 100644 --- a/lib/rbui/checkbox/checkbox_group_controller.js +++ b/lib/rbui/checkbox/checkbox_group_controller.js @@ -11,7 +11,7 @@ export default class extends Controller { } } - onChange(event) { + onChange() { if (this.element.hasAttribute("data-required")) { const checked = this.checkboxTargets.some(checkbox => checkbox.checked); diff --git a/lib/rbui/form/form_field_controller.js b/lib/rbui/form/form_field_controller.js index b5d982f7..b990455e 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 } = 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.valueMissing) errorMessage = dataset.valueMissing + if (validity.badInput) errorMessage = dataset.badInput + if (validity.patternMismatch) errorMessage = dataset.patternMismatch + if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow + if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow + if (validity.stepMismatch) errorMessage = dataset.stepMismatch + if (validity.tooLong) errorMessage = dataset.tooLong + if (validity.tooShort) errorMessage = dataset.tooShort + if (validity.typeMismatch) errorMessage = dataset.typeMismatch - return defaultMessage; + return errorMessage || this.inputTarget.validationMessage; } } From f40baa8fd4e209d6f3267d3c2f8aa8e410c06436 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:14:09 -0300 Subject: [PATCH 02/11] BETTER CODE --- .../checkbox/checkbox_group_controller.js | 10 +++++----- lib/rbui/form/form_field_controller.js | 20 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/lib/rbui/checkbox/checkbox_group_controller.js b/lib/rbui/checkbox/checkbox_group_controller.js index 7c79a3a2..11797d02 100644 --- a/lib/rbui/checkbox/checkbox_group_controller.js +++ b/lib/rbui/checkbox/checkbox_group_controller.js @@ -1,21 +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 => { + this.checkboxTargets.forEach((checkbox) => { checkbox.required = true; }); } } - onChange() { + onChange(event) { if (this.element.hasAttribute("data-required")) { - const checked = this.checkboxTargets.some(checkbox => checkbox.checked); + const checked = this.checkboxTargets.some((checkbox) => checkbox.checked); - this.checkboxTargets.forEach(checkbox => { + 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 b990455e..1f93a5e1 100644 --- a/lib/rbui/form/form_field_controller.js +++ b/lib/rbui/form/form_field_controller.js @@ -40,19 +40,19 @@ export default class extends Controller { } #getValidationMessage() { - let errorMessage + let errorMessage; const { validity, dataset } = this.inputTarget; - if (validity.valueMissing) errorMessage = dataset.valueMissing - if (validity.badInput) errorMessage = dataset.badInput - if (validity.patternMismatch) errorMessage = dataset.patternMismatch - if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow - if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow - if (validity.stepMismatch) errorMessage = dataset.stepMismatch - if (validity.tooLong) errorMessage = dataset.tooLong - if (validity.tooShort) errorMessage = dataset.tooShort - if (validity.typeMismatch) errorMessage = dataset.typeMismatch + if (validity.valueMissing) errorMessage = dataset.valueMissing; + if (validity.badInput) errorMessage = dataset.badInput; + if (validity.patternMismatch) errorMessage = dataset.patternMismatch; + if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow; + if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow; + if (validity.stepMismatch) errorMessage = dataset.stepMismatch; + if (validity.tooLong) errorMessage = dataset.tooLong; + if (validity.tooShort) errorMessage = dataset.tooShort; + if (validity.typeMismatch) errorMessage = dataset.typeMismatch; return errorMessage || this.inputTarget.validationMessage; } From 019c203f828b1f2e9c24db616a6f460cbf4c88a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:15:12 -0300 Subject: [PATCH 03/11] 1st OK --- lib/rbui/checkbox/checkbox_group_controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/rbui/checkbox/checkbox_group_controller.js b/lib/rbui/checkbox/checkbox_group_controller.js index 11797d02..cb323c3a 100644 --- a/lib/rbui/checkbox/checkbox_group_controller.js +++ b/lib/rbui/checkbox/checkbox_group_controller.js @@ -6,12 +6,12 @@ export default class extends Controller { connect() { if (this.element.hasAttribute("data-required")) { this.checkboxTargets.forEach((checkbox) => { - checkbox.required = true; + checkbox.required = !checkbox.checked; }); } } - onChange(event) { + onChange() { if (this.element.hasAttribute("data-required")) { const checked = this.checkboxTargets.some((checkbox) => checkbox.checked); From 80c078023c3d99c3dd46fe41fa760b8ed00281b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:18:12 -0300 Subject: [PATCH 04/11] 1st OK --- .../checkbox/checkbox_group_controller.js | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/lib/rbui/checkbox/checkbox_group_controller.js b/lib/rbui/checkbox/checkbox_group_controller.js index cb323c3a..2cd94623 100644 --- a/lib/rbui/checkbox/checkbox_group_controller.js +++ b/lib/rbui/checkbox/checkbox_group_controller.js @@ -4,20 +4,18 @@ export default class extends Controller { static targets = ["checkbox"]; connect() { - if (this.element.hasAttribute("data-required")) { - this.checkboxTargets.forEach((checkbox) => { - checkbox.required = !checkbox.checked; - }); - } + this.#applyRequired(); } onChange() { - if (this.element.hasAttribute("data-required")) { - const checked = this.checkboxTargets.some((checkbox) => checkbox.checked); + this.#applyRequired(); + } + + #applyRequired() { + 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)); } } From c9f9c3899b3cbddf4cc5e269ab51ab1b8faf4a85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:19:20 -0300 Subject: [PATCH 05/11] BETTER CODE --- lib/rbui/checkbox/checkbox_group_controller.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/rbui/checkbox/checkbox_group_controller.js b/lib/rbui/checkbox/checkbox_group_controller.js index 2cd94623..546167ad 100644 --- a/lib/rbui/checkbox/checkbox_group_controller.js +++ b/lib/rbui/checkbox/checkbox_group_controller.js @@ -4,14 +4,14 @@ export default class extends Controller { static targets = ["checkbox"]; connect() { - this.#applyRequired(); + this.#handleRequired(); } onChange() { - this.#applyRequired(); + this.#handleRequired(); } - #applyRequired() { + #handleRequired() { if (!this.element.hasAttribute("data-required")) return; const checked = this.checkboxTargets.some(({ checked }) => checked); From 1744c8a0cc920b89f2add51d33afd33078948d85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:29:27 -0300 Subject: [PATCH 06/11] BETTER CODE --- lib/rbui/form/form_field_controller.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/lib/rbui/form/form_field_controller.js b/lib/rbui/form/form_field_controller.js index 1f93a5e1..f1b1ed75 100644 --- a/lib/rbui/form/form_field_controller.js +++ b/lib/rbui/form/form_field_controller.js @@ -44,15 +44,21 @@ export default class extends Controller { const { validity, dataset } = this.inputTarget; - if (validity.valueMissing) errorMessage = dataset.valueMissing; - if (validity.badInput) errorMessage = dataset.badInput; - if (validity.patternMismatch) errorMessage = dataset.patternMismatch; - if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow; - if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow; - if (validity.stepMismatch) errorMessage = dataset.stepMismatch; - if (validity.tooLong) errorMessage = dataset.tooLong; - if (validity.tooShort) errorMessage = dataset.tooShort; - if (validity.typeMismatch) errorMessage = dataset.typeMismatch; + const validations = [ + "tooLong", + "badInput", + "tooShort", + "typeMismatch", + "stepMismatch", + "valueMissing", + "rangeOverflow", + "rangeUnderflow", + "patternMismatch", + ]; + + validations.forEach((validation) => { + if (validity[validation]) errorMessage = dataset[validation]; + }); return errorMessage || this.inputTarget.validationMessage; } From 2e2020d1712cc63a116f7b19306cef84e366ca88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:30:09 -0300 Subject: [PATCH 07/11] UNDO --- lib/rbui/form/form_field_controller.js | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/lib/rbui/form/form_field_controller.js b/lib/rbui/form/form_field_controller.js index f1b1ed75..1f93a5e1 100644 --- a/lib/rbui/form/form_field_controller.js +++ b/lib/rbui/form/form_field_controller.js @@ -44,21 +44,15 @@ export default class extends Controller { const { validity, dataset } = this.inputTarget; - const validations = [ - "tooLong", - "badInput", - "tooShort", - "typeMismatch", - "stepMismatch", - "valueMissing", - "rangeOverflow", - "rangeUnderflow", - "patternMismatch", - ]; - - validations.forEach((validation) => { - if (validity[validation]) errorMessage = dataset[validation]; - }); + if (validity.valueMissing) errorMessage = dataset.valueMissing; + if (validity.badInput) errorMessage = dataset.badInput; + if (validity.patternMismatch) errorMessage = dataset.patternMismatch; + if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow; + if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow; + if (validity.stepMismatch) errorMessage = dataset.stepMismatch; + if (validity.tooLong) errorMessage = dataset.tooLong; + if (validity.tooShort) errorMessage = dataset.tooShort; + if (validity.typeMismatch) errorMessage = dataset.typeMismatch; return errorMessage || this.inputTarget.validationMessage; } From c0b716481c91a2e4d8e674813a62dc80a0a2ad91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:46:03 -0300 Subject: [PATCH 08/11] 1st OK --- lib/rbui/checkbox/checkbox.rb | 2 +- lib/rbui/form/form_field_controller.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) 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/form/form_field_controller.js b/lib/rbui/form/form_field_controller.js index 1f93a5e1..697f3eab 100644 --- a/lib/rbui/form/form_field_controller.js +++ b/lib/rbui/form/form_field_controller.js @@ -44,15 +44,15 @@ export default class extends Controller { const { validity, dataset } = this.inputTarget; - if (validity.valueMissing) errorMessage = dataset.valueMissing; - if (validity.badInput) errorMessage = dataset.badInput; - if (validity.patternMismatch) errorMessage = dataset.patternMismatch; - if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow; - if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow; - if (validity.stepMismatch) errorMessage = dataset.stepMismatch; 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 errorMessage || this.inputTarget.validationMessage; } From 76abb0e5c684de4346d16518713b62aa0bfee2c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:47:08 -0300 Subject: [PATCH 09/11] OOPS --- lib/rbui/checkbox/checkbox.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/rbui/checkbox/checkbox.rb b/lib/rbui/checkbox/checkbox.rb index 9ea4c2fc..96d491d3 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: "change->rbui--checkbox-group#onChange change->rbui--form-field#onInput invalid->rbui--form-field#onInvalid" + action: "change->rbui--checkbox-group#onChange input->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" } From 477e5e2e23c5b3d8b2e9467a9170fd6eadba9073 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 15:49:57 -0300 Subject: [PATCH 10/11] this.inputTarget. --- lib/rbui/form/form_field_controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/rbui/form/form_field_controller.js b/lib/rbui/form/form_field_controller.js index 697f3eab..6f2e7828 100644 --- a/lib/rbui/form/form_field_controller.js +++ b/lib/rbui/form/form_field_controller.js @@ -42,7 +42,7 @@ export default class extends Controller { #getValidationMessage() { let errorMessage; - const { validity, dataset } = this.inputTarget; + const { validity, dataset, validationMessage } = this.inputTarget; if (validity.tooLong) errorMessage = dataset.tooLong; if (validity.tooShort) errorMessage = dataset.tooShort; @@ -54,6 +54,6 @@ export default class extends Controller { if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow; if (validity.patternMismatch) errorMessage = dataset.patternMismatch; - return errorMessage || this.inputTarget.validationMessage; + return errorMessage || validationMessage; } } From f778d6cb7e6b7073b23b09c9f680c8f1a7286810 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jean=20Pierry=20de=20Souza=20Mendon=C3=A7a?= Date: Tue, 5 Nov 2024 16:01:39 -0300 Subject: [PATCH 11/11] input -> change --- lib/rbui/checkbox/checkbox.rb | 2 +- lib/rbui/radio_button/radio_button.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/rbui/checkbox/checkbox.rb b/lib/rbui/checkbox/checkbox.rb index 96d491d3..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: "change->rbui--checkbox-group#onChange input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid" + 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/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" }