diff --git a/app/components/ruby_ui/combobox/combobox_checkbox.rb b/app/components/ruby_ui/combobox/combobox_checkbox.rb index e3806d83..db49d217 100644 --- a/app/components/ruby_ui/combobox/combobox_checkbox.rb +++ b/app/components/ruby_ui/combobox/combobox_checkbox.rb @@ -13,7 +13,8 @@ def default_attrs class: [ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", - "disabled:cursor-not-allowed disabled:opacity-50" + "disabled:cursor-not-allowed disabled:opacity-50", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" ], data: { ruby_ui__combobox_target: "input", diff --git a/app/components/ruby_ui/combobox/combobox_radio.rb b/app/components/ruby_ui/combobox/combobox_radio.rb index d27c7dae..c174afef 100644 --- a/app/components/ruby_ui/combobox/combobox_radio.rb +++ b/app/components/ruby_ui/combobox/combobox_radio.rb @@ -10,7 +10,13 @@ def view_template def default_attrs { - class: "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", + class: [ + "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow", + "focus:outline-none", + "focus-visible:ring-1 focus-visible:ring-ring", + "disabled:cursor-not-allowed disabled:opacity-50", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" + ], data: { ruby_ui__combobox_target: "input", ruby_ui__form_field_target: "input", diff --git a/app/components/ruby_ui/combobox/combobox_search_input.rb b/app/components/ruby_ui/combobox/combobox_search_input.rb index 728ae56f..6515668c 100644 --- a/app/components/ruby_ui/combobox/combobox_search_input.rb +++ b/app/components/ruby_ui/combobox/combobox_search_input.rb @@ -19,16 +19,22 @@ def view_template def default_attrs { type: "search", - class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", role: "searchbox", + autocorrect: "off", + autocomplete: "off", + spellcheck: "false", placeholder: @placeholder, + class: [ + "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none", + "focus:ring-0", + "placeholder:text-muted-foreground", + "disabled:cursor-not-allowed disabled:opacity-50", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" + ], data: { ruby_ui__combobox_target: "searchInput", action: "keyup->ruby-ui--combobox#filterItems search->ruby-ui--combobox#filterItems" - }, - autocomplete: "off", - autocorrect: "off", - spellcheck: "false" + } } end diff --git a/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb b/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb index 5ac8beca..01a6e811 100644 --- a/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb +++ b/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb @@ -13,7 +13,8 @@ def default_attrs class: [ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", - "disabled:cursor-not-allowed disabled:opacity-50" + "disabled:cursor-not-allowed disabled:opacity-50", + "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none" ], data: { ruby_ui__combobox_target: "toggleAll", diff --git a/app/components/ruby_ui/combobox/combobox_trigger.rb b/app/components/ruby_ui/combobox/combobox_trigger.rb index 93fc9a98..be32a761 100644 --- a/app/components/ruby_ui/combobox/combobox_trigger.rb +++ b/app/components/ruby_ui/combobox/combobox_trigger.rb @@ -21,7 +21,13 @@ def view_template def default_attrs { type: "button", - class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 justify-between", + class: [ + "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background h-10 px-4 py-2 justify-between", + "hover:bg-accent hover:text-accent-foreground", + "disabled:pointer-events-none disabled:opacity-50", + "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed", + "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2" + ], data: { placeholder: @placeholder, ruby_ui__combobox_target: "trigger", diff --git a/app/javascript/controllers/ruby_ui/combobox_controller.js b/app/javascript/controllers/ruby_ui/combobox_controller.js index 0dd4531a..7e233164 100644 --- a/app/javascript/controllers/ruby_ui/combobox_controller.js +++ b/app/javascript/controllers/ruby_ui/combobox_controller.js @@ -25,7 +25,7 @@ export default class extends Controller { } disconnect() { - this.cleanup(); + if (this.cleanup) { this.cleanup() } } inputChanged(e) { @@ -41,7 +41,7 @@ export default class extends Controller { } inputContent(input) { - return input.dataset.text || input.parentElement.innerText + return input.dataset.text || input.parentElement.textContent } toggleAllItems() { diff --git a/app/views/docs/combobox.rb b/app/views/docs/combobox.rb index 83ab8890..2fd1d422 100644 --- a/app/views/docs/combobox.rb +++ b/app/views/docs/combobox.rb @@ -22,7 +22,7 @@ def view_template ComboboxList do ComboboxEmptyState { "No result" } - ComboboxListGroup label: "Fruits" do + ComboboxListGroup(label: "Fruits") do ComboboxItem do ComboboxRadio(name: "food", value: "apple") span { "Apple" } @@ -34,7 +34,7 @@ def view_template end end - ComboboxListGroup label: "Vegetable" do + ComboboxListGroup(label: "Vegetable") do ComboboxItem do ComboboxRadio(name: "food", value: "brocoli") span { "Broccoli" } @@ -46,7 +46,7 @@ def view_template end end - ComboboxListGroup label: "Others" do + ComboboxListGroup(label: "Others") do ComboboxItem do ComboboxRadio(name: "food", value: "chocolate") span { "Chocolate" } @@ -123,6 +123,26 @@ def view_template RUBY end + render Docs::VisualCodeExample.new(title: "Disabled", context: self) do + <<~RUBY + div(class: "w-96") do + Combobox do + ComboboxTrigger(disabled: true, placeholder: "Pick value") + end + end + RUBY + end + + render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do + <<~RUBY + div(class: "w-96") do + Combobox do + ComboboxTrigger(aria: {disabled: "true"}, placeholder: "Pick value") + end + end + RUBY + end + render Components::ComponentSetup::Tabs.new(component_name: "Combobox") render Docs::ComponentsTable.new(component_files("Combobox"))