From 9a20d423969fc0198abb94e362d25fa7e4f8f678 Mon Sep 17 00:00:00 2001 From: Cirdes Henrique Date: Sat, 24 Aug 2024 11:20:38 -0300 Subject: [PATCH 1/5] Adding form component --- index.js | 9 ++- lib/phlex_ui/form/form_spacer.rb | 17 ---- lib/phlex_ui/hint.rb | 17 ---- lib/phlex_ui/input.rb | 29 ------- lib/phlex_ui/label.rb | 17 ---- lib/{phlex_ui => rbui/checkbox}/checkbox.rb | 6 +- lib/rbui/combobox/combobox_input.rb | 4 +- lib/{phlex_ui => rbui/form}/form.rb | 2 +- .../form_item.rb => rbui/form/form_field.rb} | 7 +- lib/rbui/form/form_field_controller.js | 81 +++++++++++++++++++ lib/rbui/form/form_field_error.rb | 20 +++++ .../form/form_field_hint.rb} | 8 +- lib/rbui/form/form_field_label.rb | 15 ++++ lib/rbui/input/input.rb | 22 +++++ lib/rbui/select/select_input.rb | 4 +- test/phlex_ui/calendar_test.rb | 2 +- test/phlex_ui/form_test.rb | 32 -------- test/phlex_ui/hint_test.rb | 15 ---- test/phlex_ui/input_error_test.rb | 15 ---- test/phlex_ui/input_test.rb | 27 ------- test/phlex_ui/sheet_test.rb | 17 +--- test/{phlex_ui => rbui}/checkbox_test.rb | 4 +- test/rbui/form_test.rb | 22 +++++ .../label_test.rb => rbui/input_test.rb} | 6 +- 24 files changed, 196 insertions(+), 202 deletions(-) delete mode 100644 lib/phlex_ui/form/form_spacer.rb delete mode 100644 lib/phlex_ui/hint.rb delete mode 100644 lib/phlex_ui/input.rb delete mode 100644 lib/phlex_ui/label.rb rename lib/{phlex_ui => rbui/checkbox}/checkbox.rb (72%) rename lib/{phlex_ui => rbui/form}/form.rb (91%) rename lib/{phlex_ui/form/form_item.rb => rbui/form/form_field.rb} (63%) create mode 100644 lib/rbui/form/form_field_controller.js create mode 100644 lib/rbui/form/form_field_error.rb rename lib/{phlex_ui/input_error.rb => rbui/form/form_field_hint.rb} (57%) create mode 100644 lib/rbui/form/form_field_label.rb create mode 100644 lib/rbui/input/input.rb delete mode 100644 test/phlex_ui/form_test.rb delete mode 100644 test/phlex_ui/hint_test.rb delete mode 100644 test/phlex_ui/input_error_test.rb delete mode 100644 test/phlex_ui/input_test.rb rename test/{phlex_ui => rbui}/checkbox_test.rb (71%) create mode 100644 test/rbui/form_test.rb rename test/{phlex_ui/label_test.rb => rbui/input_test.rb} (57%) diff --git a/index.js b/index.js index b30ac87..2007161 100644 --- a/index.js +++ b/index.js @@ -8,34 +8,37 @@ application.debug = false; window.Stimulus = application; // Import all controller files +import AccordionController from "./lib/rbui/accordion/accordion_controller"; import ComboboxController from "./lib/rbui/combobox/combobox_controller"; import ComboboxContentController from "./lib/rbui/combobox/combobox_content_controller"; import ComboboxItemController from "./lib/rbui/combobox/combobox_item_controller"; +import FormFieldController from "./lib/rbui/form/form_field_controller"; import ThemeToggleController from "./lib/rbui/theme_toggle/theme_toggle_controller"; import TooltipController from "./lib/rbui/tooltip/tooltip_controller"; import SelectController from "./lib/rbui/select/select_controller"; import SelectItemController from "./lib/rbui/select/select_item_controller"; -import AccordionController from "./lib/rbui/accordion/accordion_controller"; // Register all controllers +application.register("rbui--accordion", AccordionController); application.register("rbui--combobox", ComboboxController); application.register("rbui--combobox-content", ComboboxContentController); application.register("rbui--combobox-item", ComboboxItemController); +application.register("rbui--form-field", FormFieldController); application.register("rbui--theme-toggle", ThemeToggleController); application.register("rbui--tooltip", TooltipController); application.register("rbui--select", SelectController); application.register("rbui--select-item", SelectItemController); -application.register("rbui--accordion", AccordionController); // Export all controllers so user of npm package can lazy load controllers +export { default as AccordionController } from "./lib/rbui/accordion/accordion_controller"; export { default as ComboboxController } from "./lib/rbui/combobox/combobox_controller"; export { default as ComboboxContentController } from "./lib/rbui/combobox/combobox_content_controller"; export { default as ComboboxItemController } from "./lib/rbui/combobox/combobox_item_controller"; +export { default as FormFieldController } from "./lib/rbui/form/form_field_controller"; export { default as ThemeToggleController } from "./lib/rbui/theme_toggle/theme_toggle_controller"; export { default as TooltipController } from "./lib/rbui/tooltip/tooltip_controller"; export { default as SelectController } from "./lib/rbui/select/select_controller"; export { default as SelectItemController } from "./lib/rbui/select/select_item_controller"; -export { default as AccordionController } from "./lib/rbui/accordion/accordion_controller"; // Export application export { application }; diff --git a/lib/phlex_ui/form/form_spacer.rb b/lib/phlex_ui/form/form_spacer.rb deleted file mode 100644 index 608de8e..0000000 --- a/lib/phlex_ui/form/form_spacer.rb +++ /dev/null @@ -1,17 +0,0 @@ -# frozen_string_literal: true - -module PhlexUI - class FormSpacer < Base - def view_template(&) - div(**attrs, &) - end - - private - - def default_attrs - { - class: "space-y-4" - } - end - end -end diff --git a/lib/phlex_ui/hint.rb b/lib/phlex_ui/hint.rb deleted file mode 100644 index 3e29894..0000000 --- a/lib/phlex_ui/hint.rb +++ /dev/null @@ -1,17 +0,0 @@ -# frozen_string_literal: true - -module PhlexUI - class Hint < Base - def view_template(&) - p(**attrs, &) - end - - private - - def default_attrs - { - class: "text-[0.8rem] text-muted-foreground" - } - end - end -end diff --git a/lib/phlex_ui/input.rb b/lib/phlex_ui/input.rb deleted file mode 100644 index 1076b1d..0000000 --- a/lib/phlex_ui/input.rb +++ /dev/null @@ -1,29 +0,0 @@ -# frozen_string_literal: true - -module PhlexUI - class Input < Base - def initialize(type: :string, error: nil, **attrs) - @type = type.to_sym - @error = error - super(**attrs) - end - - def view_template - input(type: @type, **attrs) - render PhlexUI::InputError.new { @error } if @error - end - - private - - def default_attrs - { - class: tokens( - "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50", - -> { @error.nil? } => "border-border focus-visible:ring-ring placeholder:text-muted-foreground", - -> { @error } => "placeholder:text-destructive/60 text-destructive dark:text-destructive border-destructive focus-visible:ring-destructive", - -> { @type == :file } => "pt-1.5 dark:file:text-white" - ) - } - end - end -end diff --git a/lib/phlex_ui/label.rb b/lib/phlex_ui/label.rb deleted file mode 100644 index 139c7c1..0000000 --- a/lib/phlex_ui/label.rb +++ /dev/null @@ -1,17 +0,0 @@ -# frozen_string_literal: true - -module PhlexUI - class Label < Base - def view_template(&) - label(**attrs, &) - end - - private - - def default_attrs - { - class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" - } - end - end -end diff --git a/lib/phlex_ui/checkbox.rb b/lib/rbui/checkbox/checkbox.rb similarity index 72% rename from lib/phlex_ui/checkbox.rb rename to lib/rbui/checkbox/checkbox.rb index ca568c0..936e957 100644 --- a/lib/phlex_ui/checkbox.rb +++ b/lib/rbui/checkbox/checkbox.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -module PhlexUI +module RBUI class Checkbox < Base def view_template input(**attrs) @@ -11,6 +11,10 @@ def view_template def default_attrs { type: "checkbox", + data: { + rbui__form_field_target: "input", + action: "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" } end diff --git a/lib/rbui/combobox/combobox_input.rb b/lib/rbui/combobox/combobox_input.rb index f8eb28a..01a55cf 100644 --- a/lib/rbui/combobox/combobox_input.rb +++ b/lib/rbui/combobox/combobox_input.rb @@ -12,7 +12,9 @@ def default_attrs { class: "hidden", data: { - rbui__combobox_target: "input" + rbui__combobox_target: "input", + rbui__form_field_target: "input", + action: "change->rbui--form-field#onChange invalid->rbui--form-field#onInvalid" } } end diff --git a/lib/phlex_ui/form.rb b/lib/rbui/form/form.rb similarity index 91% rename from lib/phlex_ui/form.rb rename to lib/rbui/form/form.rb index a9a9004..5ea7343 100644 --- a/lib/phlex_ui/form.rb +++ b/lib/rbui/form/form.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true -module PhlexUI +module RBUI class Form < Base def view_template(&) form(**attrs, &) diff --git a/lib/phlex_ui/form/form_item.rb b/lib/rbui/form/form_field.rb similarity index 63% rename from lib/phlex_ui/form/form_item.rb rename to lib/rbui/form/form_field.rb index 9d71054..e02d839 100644 --- a/lib/phlex_ui/form/form_item.rb +++ b/lib/rbui/form/form_field.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true -module PhlexUI - class FormItem < Base +module RBUI + class FormField < Base def view_template(&) div(**attrs, &) end @@ -10,6 +10,9 @@ def view_template(&) def default_attrs { + data: { + controller: "rbui--form-field" + }, class: "space-y-2" } end diff --git a/lib/rbui/form/form_field_controller.js b/lib/rbui/form/form_field_controller.js new file mode 100644 index 0000000..9e85fb0 --- /dev/null +++ b/lib/rbui/form/form_field_controller.js @@ -0,0 +1,81 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = ['input', 'message'] + static values = { shouldValidate: false } + + + connect() { + if (this.messageTarget.textContent) { + this.shouldValidateValue = true; + } + } + + onInvalid(error) { + error.preventDefault(); + + this.shouldValidateValue = true; + this.#setErrorMessage(); + } + + onInput() { + this.#setErrorMessage(); + } + + onChange() { + this.#setErrorMessage(); + } + + #setErrorMessage() { + if (!this.shouldValidateValue) return; + + if (this.inputTarget.validity.valid) { + this.messageTarget.textContent = ''; + } else { + this.messageTarget.textContent = this.#getValidationMessage(); + } + } + + #getValidationMessage() { + const input = this.inputTarget; + const defaultMessage = this.inputTarget.validationMessage; + + if (input.validity.valueMissing) { + return input.dataset.valueMissing || defaultMessage; + } + + 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; + } + + return defaultMessage; + } +} diff --git a/lib/rbui/form/form_field_error.rb b/lib/rbui/form/form_field_error.rb new file mode 100644 index 0000000..3da79a1 --- /dev/null +++ b/lib/rbui/form/form_field_error.rb @@ -0,0 +1,20 @@ +# frozen_string_literal: true + +module RBUI + class FormFieldError < Base + def view_template(&) + p(**attrs, &) + end + + private + + def default_attrs + { + data: { + rbui__form_field_target: "message" + }, + class: "text-sm font-medium text-destructive" + } + end + end +end diff --git a/lib/phlex_ui/input_error.rb b/lib/rbui/form/form_field_hint.rb similarity index 57% rename from lib/phlex_ui/input_error.rb rename to lib/rbui/form/form_field_hint.rb index 6d1ba07..74cca11 100644 --- a/lib/phlex_ui/input_error.rb +++ b/lib/rbui/form/form_field_hint.rb @@ -1,7 +1,7 @@ # frozen_string_literal: true -module PhlexUI - class InputError < Base +module RBUI + class FormFieldHint < Base def view_template(&) p(**attrs, &) end @@ -9,9 +9,7 @@ def view_template(&) private def default_attrs - { - class: "mt-2 text-sm text-destructive" - } + { class: "text-sm text-muted-foreground" } end end end diff --git a/lib/rbui/form/form_field_label.rb b/lib/rbui/form/form_field_label.rb new file mode 100644 index 0000000..827f901 --- /dev/null +++ b/lib/rbui/form/form_field_label.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +module RBUI + class FormFieldLabel < Base + def view_template(&) + label(**attrs, &) + end + + private + + def default_attrs + { class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" } + end + end +end diff --git a/lib/rbui/input/input.rb b/lib/rbui/input/input.rb new file mode 100644 index 0000000..8f41965 --- /dev/null +++ b/lib/rbui/input/input.rb @@ -0,0 +1,22 @@ +# frozen_string_literal: true + +module RBUI + class Input < Base + def initialize(type: :string, **attrs) + @type = type.to_sym + super(**attrs) + end + + def view_template + input(type: @type, **attrs) + end + + private + + def default_attrs + { + class: "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50" + } + end + end +end diff --git a/lib/rbui/select/select_input.rb b/lib/rbui/select/select_input.rb index 3dd5166..3f3e02d 100644 --- a/lib/rbui/select/select_input.rb +++ b/lib/rbui/select/select_input.rb @@ -12,7 +12,9 @@ def default_attrs { class: "hidden", data: { - rbui__select_target: "input" + rbui__select_target: "input", + rbui__form_field_target: "input", + action: "change->rbui--form-field#onChange invalid->rbui--form-field#onInvalid" } } end diff --git a/test/phlex_ui/calendar_test.rb b/test/phlex_ui/calendar_test.rb index b204dec..0405357 100644 --- a/test/phlex_ui/calendar_test.rb +++ b/test/phlex_ui/calendar_test.rb @@ -7,7 +7,7 @@ class PhlexUI::CalendarTest < Minitest::Test def test_render_with_all_items output = phlex_context do - PhlexUI.Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "date", data_controller: "input") + RBUI.Input(type: "string", placeholder: "Select a date", class: "rounded-md border shadow", id: "date", data_controller: "input") PhlexUI.Calendar(input_id: "#date", class: "rounded-md border shadow") end diff --git a/test/phlex_ui/form_test.rb b/test/phlex_ui/form_test.rb deleted file mode 100644 index 4cae8b6..0000000 --- a/test/phlex_ui/form_test.rb +++ /dev/null @@ -1,32 +0,0 @@ -# frozen_string_literal: true - -require "test_helper" - -class PhlexUI::FormTest < Minitest::Test - include Phlex::Testing::ViewHelper - - def test_render_with_all_items - output = phlex_context do - PhlexUI.Form do - PhlexUI.SheetMiddle do - PhlexUI.FormSpacer do - PhlexUI.FormItem do - PhlexUI.Label { "Name" } - PhlexUI.Input(placeholder: "Joel Drapper") { "Joel Drapper" } - end - PhlexUI.FormItem do - PhlexUI.Label { "Email" } - PhlexUI.Input(placeholder: "joel@drapper.me") - end - end - end - PhlexUI.SheetFooter do - PhlexUI.Button(variant: :outline, data: {action: "click->dismissable#dismiss"}) { "Cancel" } - PhlexUI.Button(type: "submit") { "Save" } - end - end - end - - assert_match(/Name/, output) - end -end diff --git a/test/phlex_ui/hint_test.rb b/test/phlex_ui/hint_test.rb deleted file mode 100644 index 033423f..0000000 --- a/test/phlex_ui/hint_test.rb +++ /dev/null @@ -1,15 +0,0 @@ -# frozen_string_literal: true - -require "test_helper" - -class PhlexUI::HintTest < Minitest::Test - include Phlex::Testing::ViewHelper - - def test_render_with_all_items - output = phlex_context do - PhlexUI.Hint { "Can only contain letters, numbers, and underscores." } - end - - assert_match(/Can only contain letters/, output) - end -end diff --git a/test/phlex_ui/input_error_test.rb b/test/phlex_ui/input_error_test.rb deleted file mode 100644 index 31a9ba1..0000000 --- a/test/phlex_ui/input_error_test.rb +++ /dev/null @@ -1,15 +0,0 @@ -# frozen_string_literal: true - -require "test_helper" - -class PhlexUI::InputErrorTest < Minitest::Test - include Phlex::Testing::ViewHelper - - def test_render_with_all_items - output = phlex_context do - PhlexUI.InputError { "you should use phlex" } - end - - assert_match(/you should use phlex/, output) - end -end diff --git a/test/phlex_ui/input_test.rb b/test/phlex_ui/input_test.rb deleted file mode 100644 index cc64868..0000000 --- a/test/phlex_ui/input_test.rb +++ /dev/null @@ -1,27 +0,0 @@ -# frozen_string_literal: true - -require "test_helper" - -class PhlexUI::InputTest < Minitest::Test - include Phlex::Testing::ViewHelper - - def test_render_with_all_items - output = phlex_context do - PhlexUI.Input(type: "email", placeholder: "Email") - end - - assert_match(/Email/, output) - end - - def test_no_destructive_classes_when_error_absent - output = render PhlexUI::Input.new - - refute_match(/destructive/, output) - end - - def test_add_destructive_classes_when_error_present - output = render PhlexUI::Input.new(error: "broken") - - assert_match(/destructive/, output) - end -end diff --git a/test/phlex_ui/sheet_test.rb b/test/phlex_ui/sheet_test.rb index 024f710..e1e96f7 100644 --- a/test/phlex_ui/sheet_test.rb +++ b/test/phlex_ui/sheet_test.rb @@ -16,19 +16,10 @@ def test_render_with_all_items PhlexUI.SheetTitle { "Edit profile" } PhlexUI.SheetDescription { "Make changes to your profile here. Click save when you're done." } end - PhlexUI.Form do - PhlexUI.SheetMiddle do - PhlexUI.FormSpacer do - PhlexUI.FormItem do - PhlexUI.Label { "Name" } - PhlexUI.Input(placeholder: "Joel Drapper") { "Joel Drapper" } - end - PhlexUI.FormItem do - PhlexUI.Label { "Email" } - PhlexUI.Input(placeholder: "joel@drapper.me") - end - end - end + PhlexUI.SheetMiddle do + RBUI.Input(placeholder: "Joel Drapper") { "Joel Drapper" } + RBUI.Input(placeholder: "joel@drapper.me") + PhlexUI.SheetFooter do PhlexUI.Button(variant: :outline, data: {action: "click->dismissable#dismiss"}) { "Cancel" } PhlexUI.Button(type: "submit") { "Save" } diff --git a/test/phlex_ui/checkbox_test.rb b/test/rbui/checkbox_test.rb similarity index 71% rename from test/phlex_ui/checkbox_test.rb rename to test/rbui/checkbox_test.rb index 28e6ed6..cb57d26 100644 --- a/test/phlex_ui/checkbox_test.rb +++ b/test/rbui/checkbox_test.rb @@ -2,12 +2,12 @@ require "test_helper" -class PhlexUI::CheckboxTest < Minitest::Test +class RBUI::CheckboxTest < Minitest::Test include Phlex::Testing::ViewHelper def test_render_with_all_items output = phlex_context do - PhlexUI.Checkbox(id: "terms") + RBUI.Checkbox(id: "terms") end assert_match(/terms/, output) diff --git a/test/rbui/form_test.rb b/test/rbui/form_test.rb new file mode 100644 index 0000000..6547061 --- /dev/null +++ b/test/rbui/form_test.rb @@ -0,0 +1,22 @@ +# frozen_string_literal: true + +require "test_helper" + +class PhlexUI::FormTest < Minitest::Test + include Phlex::Testing::ViewHelper + + def test_render_with_all_items + output = phlex_context do + RBUI.Form do + RBUI.FormField do + RBUI.FormFieldLabel { "Label" } + RBUI.Input(placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" } + RBUI.FormFieldHint() + RBUI.FormFieldError() + end + end + end + + assert_match(/Joel/, output) + end +end diff --git a/test/phlex_ui/label_test.rb b/test/rbui/input_test.rb similarity index 57% rename from test/phlex_ui/label_test.rb rename to test/rbui/input_test.rb index 2cb5964..36fcb6e 100644 --- a/test/phlex_ui/label_test.rb +++ b/test/rbui/input_test.rb @@ -2,14 +2,14 @@ require "test_helper" -class PhlexUI::LabelTest < Minitest::Test +class RBUI::InputTest < Minitest::Test include Phlex::Testing::ViewHelper def test_render_with_all_items output = phlex_context do - PhlexUI.Label(for: "username") { "Username" } + RBUI.Input(type: "email", placeholder: "Email") end - assert_match(/Username/, output) + assert_match(/Email/, output) end end From 1b2a24432f29a7bdbdb4712ea5a52d3e28746c5e Mon Sep 17 00:00:00 2001 From: Cirdes Henrique Date: Sat, 24 Aug 2024 11:32:05 -0300 Subject: [PATCH 2/5] Adding preventDefault to combobox --- lib/rbui/combobox/combobox_controller.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/rbui/combobox/combobox_controller.js b/lib/rbui/combobox/combobox_controller.js index 72134b1..fd4c2dd 100644 --- a/lib/rbui/combobox/combobox_controller.js +++ b/lib/rbui/combobox/combobox_controller.js @@ -22,7 +22,9 @@ export default class extends Controller { this.cleanup(); } - onTriggerClick() { + onTriggerClick(event) { + event.preventDefault(); + if (this.openValue) { this.#closeContent(); } else { From 8197c46331678d969b071ce0c0ded83d24ae73cb Mon Sep 17 00:00:00 2001 From: Cirdes Henrique Date: Sat, 24 Aug 2024 11:35:06 -0300 Subject: [PATCH 3/5] fix focus scroll --- lib/rbui/combobox/combobox_controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/rbui/combobox/combobox_controller.js b/lib/rbui/combobox/combobox_controller.js index fd4c2dd..89c4caf 100644 --- a/lib/rbui/combobox/combobox_controller.js +++ b/lib/rbui/combobox/combobox_controller.js @@ -99,7 +99,7 @@ export default class extends Controller { this.triggerTarget.setAttribute("aria-activedescendant", true); this.itemTargets.forEach((item) => item.removeAttribute("aria-current")); - this.triggerTarget.focus(); + this.triggerTarget.focus({ preventScroll: true }); } #openContent() { @@ -108,7 +108,7 @@ export default class extends Controller { this.triggerTarget.setAttribute("aria-expanded", true); this.#findAndSetCurrentAndActiveDescendant(); - this.searchTarget.focus(); + this.searchTarget.focus({ preventScroll: true }); } #findAndSetCurrentAndActiveDescendant() { From 9de6b3e33aa1a59443536c88f5ed043bc0056464 Mon Sep 17 00:00:00 2001 From: Cirdes Henrique Date: Sat, 24 Aug 2024 16:43:10 -0300 Subject: [PATCH 4/5] fix input --- lib/rbui/input/input.rb | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/rbui/input/input.rb b/lib/rbui/input/input.rb index 8f41965..b3c5029 100644 --- a/lib/rbui/input/input.rb +++ b/lib/rbui/input/input.rb @@ -15,6 +15,10 @@ def view_template def default_attrs { + data: { + rbui__form_field_target: "input", + action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid" + }, class: "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50" } end From 80810550a7d5f5efc693a595071c69a448480184 Mon Sep 17 00:00:00 2001 From: Cirdes Henrique Date: Sat, 24 Aug 2024 16:45:12 -0300 Subject: [PATCH 5/5] fix standard rb --- lib/rbui/form/form_field_hint.rb | 2 +- lib/rbui/form/form_field_label.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/rbui/form/form_field_hint.rb b/lib/rbui/form/form_field_hint.rb index 74cca11..a4d3b03 100644 --- a/lib/rbui/form/form_field_hint.rb +++ b/lib/rbui/form/form_field_hint.rb @@ -9,7 +9,7 @@ def view_template(&) private def default_attrs - { class: "text-sm text-muted-foreground" } + {class: "text-sm text-muted-foreground"} end end end diff --git a/lib/rbui/form/form_field_label.rb b/lib/rbui/form/form_field_label.rb index 827f901..13ae7a2 100644 --- a/lib/rbui/form/form_field_label.rb +++ b/lib/rbui/form/form_field_label.rb @@ -9,7 +9,7 @@ def view_template(&) private def default_attrs - { class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" } + {class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"} end end end