ruby_ui 1.0.1 → 1.1.0

data/lib/ruby_ui/chart/chart_docs.rb

@@ -0,0 +1,115 @@
+# frozen_string_literal: true
+
+class Views::Docs::Chart < Views::Base
+  def view_template
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Chart", description: "Displays information in a visual way.")
+
+      Heading(level: 2) { "Introduction" }
+
+      Text do
+        plain "RubyUI uses "
+        InlineLink(href: "https://www.chartjs.org/") { "Chart.js" }
+        plain " to render charts. Chart.js is a free open-source JavaScript library for data visualization, which supports 8 chart types: bar, line, area, pie, bubble, radar, polar, and scatter. If you're unfamiliar with Chart.js. We recommend the "
+        InlineLink(href: "https://www.chartjs.org/docs/latest/getting-started/") { "Getting Started guide" }
+        plain ". "
+      end
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Bar Chart", context: self) do
+        <<~RUBY
+          options = {
+            type: 'bar',
+            data: {
+              labels: ['Phlex', 'VC', 'ERB'],
+              datasets: [{
+                label: 'render time (ms)',
+                data: [100, 520, 1200],
+              }]
+            },
+            options: {
+              indexAxis: 'y',
+              scales: {
+                y: {
+                  beginAtZero: true
+                }
+              },
+            },
+          }
+
+          Chart(options: options)
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Line Graph", context: self) do
+        <<~RUBY
+          options = {
+            type: 'line',
+            data: {
+              labels: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+              datasets: [{
+                label: 'Github Stars',
+                data: [40, 30, 79, 140, 290, 550],
+              }]
+            },
+            options: {
+              scales: {
+                y: {
+                  beginAtZero: true
+                }
+              },
+              plugins: {
+                legend: {
+                  display: false
+                }
+              }
+            },
+          }
+
+          Chart(options: options)
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Pie Chart", description: "Setting custom background color", context: self) do
+        <<~RUBY
+          options = {
+            type: 'pie',
+            data: {
+              labels: [
+                'Red',
+                'Blue',
+                'Yellow'
+              ],
+              datasets: [{
+                label: 'My First Dataset',
+                data: [300, 50, 100],
+                backgroundColor: [
+                  'rgb(255, 99, 132)',
+                  'rgb(54, 162, 235)',
+                  'rgb(255, 205, 86)'
+                ],
+                hoverOffset: 4
+              }]
+            },
+          }
+
+          Chart(options: options)
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: "Chart")
+
+      render Docs::ComponentsTable.new(components)
+    end
+  end
+
+  private
+
+  def components
+    [
+      ::Docs::ComponentStruct.new(name: "ChartController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/chart_controller.js", built_using: :stimulus),
+      ::Docs::ComponentStruct.new(name: "Chart", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/chart.rb", built_using: :phlex)
+    ]
+  end
+end

data/lib/ruby_ui/checkbox/checkbox.rb

@@ -16,7 +16,13 @@ module RubyUI
           ruby_ui__checkbox_group_target: "checkbox",
           action: "change->ruby-ui--checkbox-group#onChange change->ruby-ui--form-field#onInput invalid->ruby-ui--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"
+        class: [
+          "peer h-4 w-4 shrink-0 rounded-sm border-input ring-offset-background accent-primary",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "checked:bg-primary checked:text-primary-foreground dark:checked:bg-secondary checked:text-primary checked:border-primary",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ]
       }
     end
   end

data/lib/ruby_ui/checkbox/checkbox_docs.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class Views::Docs::Checkbox < Views::Base
+  def view_template
+    component = "Checkbox"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Checkbox", description: "A control that allows the user to toggle between checked and not checked.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div(class: 'flex items-center space-x-3') do
+            Checkbox(id: 'terms')
+            label(for: 'terms', class: 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70') { "Accept terms and conditions" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Checked", context: self) do
+        <<~RUBY
+          div(class: "items-top flex space-x-3") do
+            Checkbox(id: 'terms1', checked: true)
+            div(class: "grid gap-1.5 leading-none") do
+              label(
+                for: "terms1",
+                class:
+                  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              ) { " Accept terms and conditions " }
+              p(class: "text-sm text-muted-foreground") { " You agree to our Terms of Service and Privacy Policy." }
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/clipboard/clipboard_docs.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+class Views::Docs::Clipboard < Views::Base
+  def view_template
+    component = "Clipboard"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Clipboard", description: "A control to allow you to copy content to the clipboard.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Clipboard(success: "Copied!", error: "Copy failed!", class: "relative", options: {placement: "top"}) do
+            ClipboardSource(class: "hidden") { span { "Born rich!!!" } }
+
+            ClipboardTrigger do
+              Link(href: "#", class: "gap-1") do
+                Text(size: :small, class: "text-primary") { "Copy the secret of success!!!" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/codeblock/codeblock_docs.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+class Views::Docs::Codeblock < Views::Base
+  def view_template
+    component = "Codeblock"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Codeblock", description: "A component for displaying highlighted code.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "With clipboard", context: self) do
+        <<~RUBY
+          code = <<~CODE
+              def hello_world
+                puts "Hello, world!"
+              end
+            CODE
+          div(class: 'w-full') do
+            Codeblock(code, syntax: :ruby)
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Without clipboard", context: self) do
+        <<~RUBY
+          code = <<~CODE
+              def hello_world
+                puts "Hello, world!"
+              end
+            CODE
+          div(class: 'w-full') do
+            Codeblock(code, syntax: :ruby, clipboard: false)
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Custom message", description: "Copy the code to see the message", context: self) do
+        <<~RUBY
+          code = <<~CODE
+              def hello_world
+                puts "Hello, world!"
+              end
+            CODE
+          div(class: 'w-full') do
+            Codeblock(code, syntax: :ruby, clipboard_success: "Nice one!")
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/collapsible/collapsible_docs.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+class Views::Docs::Collapsible < Views::Base
+  def view_template
+    component = "Collapsible"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Collapsible", description: "An interactive component which expands/collapses a panel.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Collapsible do
+            div(class: "flex items-center justify-between space-x-4 px-4 py-2") do
+              h4(class: "text-sm font-semibold") { " @joeldrapper starred 3 repositories" }
+              CollapsibleTrigger do
+                Button(variant: :ghost, icon: true) do
+                  chevron_icon
+                  span(class: "sr-only") { "Toggle" }
+                end
+              end
+            end
+
+            div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+              "phlex-ruby/phlex"
+            end
+
+            CollapsibleContent do
+              div(class: 'space-y-2 mt-2') do
+                div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+                  "phlex-ruby/phlex-rails"
+                end
+                div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+                  "ruby-ui/ruby_ui"
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Open", context: self) do
+        <<~RUBY
+          Collapsible(open: true) do
+            div(class: "flex items-center justify-between space-x-4 px-4 py-2") do
+              h4(class: "text-sm font-semibold") { " @joeldrapper starred 3 repositories" }
+              CollapsibleTrigger do
+                Button(variant: :ghost, icon: true) do
+                  chevron_icon
+                  span(class: "sr-only") { "Toggle" }
+                end
+              end
+            end
+
+            div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+              "phlex-ruby/phlex"
+            end
+
+            CollapsibleContent do
+              div(class: 'space-y-2 mt-2') do
+                div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+                  "phlex-ruby/phlex-rails"
+                end
+                div(class: "rounded-md border px-4 py-2 font-mono text-sm shadow-sm") do
+                  "ruby-ui/ruby_ui"
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  def chevron_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 20 20",
+      fill: "currentColor",
+      class: "w-4 h-4"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox.rb

@@ -2,7 +2,7 @@
 
 module RubyUI
   class Combobox < Base
-    def initialize(term: "items", **)
+    def initialize(term: nil, **)
       @term = term
       super(**)
     end
@@ -18,7 +18,8 @@ module RubyUI
         role: "combobox",
         data: {
           controller: "ruby-ui--combobox",
-          ruby_ui__combobox_term_value: @term.to_s
+          ruby_ui__combobox_term_value: @term,
+          action: "turbo:morph@window->ruby-ui--combobox#updateTriggerContent"
         }
       }
     end

data/lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -12,8 +12,10 @@ module RubyUI
       {
         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",
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ],
         data: {
           ruby_ui__combobox_target: "input",

data/lib/ruby_ui/combobox/combobox_controller.js

@@ -28,6 +28,11 @@ export default class extends Controller {
     if (this.cleanup) { this.cleanup() }
   }
 
+  handlePopoverToggle(event) {
+    // Keep ariaExpanded in sync with the actual popover state
+    this.triggerTarget.ariaExpanded = event.newState === 'open' ? 'true' : 'false'
+  }
+
   inputChanged(e) {
     this.updateTriggerContent()
 
@@ -53,18 +58,28 @@ export default class extends Controller {
   updateTriggerContent() {
     const checkedInputs = this.inputTargets.filter(input => input.checked)
 
-    if (checkedInputs.length == 0) {
+    if (checkedInputs.length === 0) {
       this.triggerContentTarget.innerText = this.triggerTarget.dataset.placeholder
-    } else if (checkedInputs.length === 1) {
-      this.triggerContentTarget.innerText = this.inputContent(checkedInputs[0])
-    } else {
+    } else if (this.termValue && checkedInputs.length > 1) {
       this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`
+    } else {
+      this.triggerContentTarget.innerText = checkedInputs.map((input) => this.inputContent(input)).join(", ")
     }
   }
 
-  openPopover(event) {
+  togglePopover(event) {
     event.preventDefault()
 
+    if (this.triggerTarget.ariaExpanded === "true") {
+      this.closePopover()
+    } else {
+      this.openPopover(event)
+    }
+  }
+
+  openPopover(event) {
+    if (event) event.preventDefault()
+
     this.updatePopoverPosition()
     this.updatePopoverWidth()
     this.triggerTarget.ariaExpanded = "true"

data/lib/ruby_ui/combobox/combobox_docs.rb

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+class Views::Docs::Combobox < Views::Base
+  @@code_example = nil
+
+  def view_template
+    component = "Combobox"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: component, description: "Autocomplete input and command palette with a list of suggestions.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Single option", context: self) do
+        <<~RUBY
+          div class: "w-96" do
+            Combobox do
+              ComboboxTrigger placeholder: "Pick value"
+
+              ComboboxPopover do
+                ComboboxSearchInput(placeholder: "Pick value or type anything")
+
+                ComboboxList do
+                  ComboboxEmptyState { "No result" }
+
+                  ComboboxListGroup(label: "Fruits") do
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "apple")
+                      span { "Apple" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "banana")
+                      span { "Banana" }
+                    end
+                  end
+
+                  ComboboxListGroup(label: "Vegetable") do
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "brocoli")
+                      span { "Broccoli" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "carrot")
+                      span { "Carrot" }
+                    end
+                  end
+
+                  ComboboxListGroup(label: "Others") do
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "chocolate")
+                      span { "Chocolate" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxRadio(name: "food", value: "milk")
+                      span { "Milk" }
+                    end
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Multiple options", context: self) do
+        <<~RUBY
+          div class: "w-96" do
+            Combobox term: "things" do
+              ComboboxTrigger placeholder: "Pick value"
+
+              ComboboxPopover do
+                ComboboxSearchInput(placeholder: "Pick value or type anything")
+
+                ComboboxList do
+                  ComboboxEmptyState { "No result" }
+
+                  ComboboxItem(class: "mt-3") do
+                    ComboboxToggleAllCheckbox(name: "all", value: "all")
+                    span { "Select all" }
+                  end
+
+                  ComboboxListGroup label: "Fruits" do
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "apple")
+                      span { "Apple" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "banana")
+                      span { "Banana" }
+                    end
+                  end
+
+                  ComboboxListGroup label: "Vegetable" do
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "brocoli")
+                      span { "Broccoli" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "carrot")
+                      span { "Carrot" }
+                    end
+                  end
+
+                  ComboboxListGroup label: "Others" do
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "chocolate")
+                      span { "Chocolate" }
+                    end
+
+                    ComboboxItem do
+                      ComboboxCheckbox(name: "food", value: "milk")
+                      span { "Milk" }
+                    end
+                  end
+                end
+              end
+            end
+          end
+        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"))
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_item.rb

@@ -13,7 +13,8 @@ module RubyUI
         class: [
           "flex flex-row w-full text-wrap [&>span,&>div]:truncate gap-2 items-center rounded-sm px-2 py-1 text-sm outline-none cursor-pointer",
           "select-none has-[:checked]:bg-accent hover:bg-accent p-2",
-          "[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2"
+          "[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2",
+          "has-disabled:opacity-50 has-disabled:cursor-not-allowed"
         ],
         role: "option",
         data: {

data/lib/ruby_ui/combobox/combobox_popover.rb

@@ -17,10 +17,11 @@ module RubyUI
         data: {
           ruby_ui__combobox_target: "popover",
           action: %w[
+            toggle->ruby-ui--combobox#handlePopoverToggle
             keydown.down->ruby-ui--combobox#keyDownPressed
             keydown.up->ruby-ui--combobox#keyUpPressed
             keydown.enter->ruby-ui--combobox#keyEnterPressed
-            keydown.esc->ruby-ui--combobox#closeDialog:prevent
+            keydown.esc->ruby-ui--combobox#closePopover:prevent
             resize@window->ruby-ui--combobox#updatePopoverWidth
           ]
         }

data/lib/ruby_ui/combobox/combobox_radio.rb

@@ -10,7 +10,14 @@ module RubyUI
 
     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",
+          "checked:bg-primary checked:text-primary-foreground",
+          "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",

data/lib/ruby_ui/combobox/combobox_search_input.rb

@@ -19,16 +19,22 @@ module RubyUI
     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-9 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
 

data/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb

@@ -12,8 +12,10 @@ module RubyUI
       {
         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",
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ],
         data: {
           ruby_ui__combobox_target: "toggleAll",