ruby_ui 1.1.0 → 1.2.0

data/lib/ruby_ui/combobox/combobox_docs.rb

@@ -1,8 +1,6 @@
 # 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
@@ -10,51 +8,159 @@ class Views::Docs::Combobox < Views::Base
 
       Heading(level: 2) { "Usage" }
 
-      render Docs::VisualCodeExample.new(title: "Single option", context: self) do
+      render Docs::VisualCodeExample.new(title: "Basic", context: self) do
         <<~RUBY
-          div class: "w-96" do
+          div(class: "w-96") do
             Combobox do
-              ComboboxTrigger placeholder: "Pick value"
+              ComboboxInputTrigger(placeholder: "Select framework...")
 
               ComboboxPopover do
-                ComboboxSearchInput(placeholder: "Pick value or type anything")
+                ComboboxList do
+                  ComboboxEmptyState { "No results found." }
+
+                  ComboboxItem do
+                    ComboboxRadio(name: "framework", value: "rails")
+                    span { "Rails" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "framework", value: "hanami")
+                    span { "Hanami" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "framework", value: "nextjs")
+                    span { "Next.js" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "framework", value: "nuxt")
+                    span { "Nuxt" }
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Popup", context: self) do
+        <<~RUBY
+          div(class: "w-96") do
+            Combobox do
+              ComboboxTrigger(placeholder: "Select framework...")
+
+              ComboboxPopover do
+                ComboboxSearchInput(placeholder: "Search framework...")
 
                 ComboboxList do
-                  ComboboxEmptyState { "No result" }
+                  ComboboxEmptyState { "No results found." }
+
+                  ComboboxItem do
+                    ComboboxRadio(name: "fw2", value: "rails")
+                    span { "Rails" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "fw2", value: "hanami")
+                    span { "Hanami" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "fw2", value: "nextjs")
+                    span { "Next.js" }
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Multiple", context: self) do
+        <<~RUBY
+          div(class: "w-96") do
+            Combobox do
+              ComboboxBadgeTrigger(clear_button: true)
+
+              ComboboxPopover do
+                ComboboxList do
+                  ComboboxEmptyState { "No results found." }
+
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "rails")
+                    span { "Rails" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "hanami")
+                    span { "Hanami" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "sinatra")
+                    span { "Sinatra" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "nextjs", checked: true)
+                    span { "Next.js" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "nuxt")
+                    span { "Nuxt" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "svelte")
+                    span { "SvelteKit" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "remix")
+                    span { "Remix" }
+                  end
+                  ComboboxItem do
+                    ComboboxCheckbox(name: "frameworks[]", value: "astro")
+                    span { "Astro" }
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Groups", context: self) do
+        <<~RUBY
+          div(class: "w-96") do
+            Combobox do
+              ComboboxInputTrigger(placeholder: "Select food...")
+
+              ComboboxPopover do
+                ComboboxList do
+                  ComboboxEmptyState { "No results found." }
 
                   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
+                  ComboboxListGroup(label: "Vegetables") do
                     ComboboxItem do
-                      ComboboxRadio(name: "food", value: "brocoli")
+                      ComboboxRadio(name: "food", value: "broccoli")
                       span { "Broccoli" }
                     end
-
                     ComboboxItem do
                       ComboboxRadio(name: "food", value: "carrot")
                       span { "Carrot" }
                     end
                   end
 
-                  ComboboxListGroup(label: "Others") do
+                  ComboboxListGroup(label: "Grains") do
                     ComboboxItem do
-                      ComboboxRadio(name: "food", value: "chocolate")
-                      span { "Chocolate" }
+                      ComboboxRadio(name: "food", value: "rice")
+                      span { "Rice" }
                     end
-
                     ComboboxItem do
-                      ComboboxRadio(name: "food", value: "milk")
-                      span { "Milk" }
+                      ComboboxRadio(name: "food", value: "wheat")
+                      span { "Wheat" }
                     end
                   end
                 end
@@ -64,57 +170,55 @@ class Views::Docs::Combobox < Views::Base
         RUBY
       end
 
-      render Docs::VisualCodeExample.new(title: "Multiple options", context: self) do
+      render Docs::VisualCodeExample.new(title: "Custom Items", context: self) do
         <<~RUBY
-          div class: "w-96" do
-            Combobox term: "things" do
-              ComboboxTrigger placeholder: "Pick value"
+          div(class: "w-96") do
+            Combobox do
+              ComboboxInputTrigger(placeholder: "Select status...")
 
               ComboboxPopover do
-                ComboboxSearchInput(placeholder: "Pick value or type anything")
-
                 ComboboxList do
-                  ComboboxEmptyState { "No result" }
+                  ComboboxEmptyState { "No results found." }
 
-                  ComboboxItem(class: "mt-3") do
-                    ComboboxToggleAllCheckbox(name: "all", value: "all")
-                    span { "Select all" }
+                  ComboboxItem do
+                    ComboboxRadio(name: "status", value: "backlog", data: {text: "Backlog"})
+                    svg(xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "text-muted-foreground") { |s| s.circle(cx: "12", cy: "12", r: "10") }
+                    span { "Backlog" }
                   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
+                  ComboboxItem do
+                    ComboboxRadio(name: "status", value: "todo", data: {text: "Todo"})
+                    svg(xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "text-blue-500") { |s| s.circle(cx: "12", cy: "12", r: "10") }
+                    span { "Todo" }
                   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
+                  ComboboxItem do
+                    ComboboxRadio(name: "status", value: "done", data: {text: "Done"})
+                    svg(xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "text-green-500") { |s| s.path(d: "M22 11.08V12a10 10 0 1 1-5.93-9.14"); s.path(d: "m9 11 3 3L22 4") }
+                    span { "Done" }
                   end
+                end
+              end
+            end
+          end
+        RUBY
+      end
 
-                  ComboboxListGroup label: "Others" do
-                    ComboboxItem do
-                      ComboboxCheckbox(name: "food", value: "chocolate")
-                      span { "Chocolate" }
-                    end
+      render Docs::VisualCodeExample.new(title: "Invalid", context: self) do
+        <<~RUBY
+          div(class: "w-96") do
+            Combobox do
+              ComboboxInputTrigger(placeholder: "Required field", aria: {invalid: "true"})
 
-                    ComboboxItem do
-                      ComboboxCheckbox(name: "food", value: "milk")
-                      span { "Milk" }
-                    end
+              ComboboxPopover do
+                ComboboxList do
+                  ComboboxEmptyState { "No results found." }
+
+                  ComboboxItem do
+                    ComboboxRadio(name: "req", value: "option1")
+                    span { "Option 1" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "req", value: "option2")
+                    span { "Option 2" }
                   end
                 end
               end
@@ -125,27 +229,58 @@ class Views::Docs::Combobox < Views::Base
 
       render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
         <<~RUBY
-          div(class: "w-96") do
+          div(class: "w-96 space-y-2") do
             Combobox do
-              ComboboxTrigger(disabled: true, placeholder: "Pick value")
+              ComboboxTrigger(disabled: true, placeholder: "Disabled trigger")
+            end
+
+            Combobox do
+              ComboboxInputTrigger(placeholder: "Disabled input", disabled: true)
             end
           end
         RUBY
       end
 
-      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+      render Docs::VisualCodeExample.new(title: "Auto Highlight", context: self) do
         <<~RUBY
           div(class: "w-96") do
             Combobox do
-              ComboboxTrigger(aria: {disabled: "true"}, placeholder: "Pick value")
+              ComboboxInputTrigger(placeholder: "Type to search...")
+
+              ComboboxPopover do
+                ComboboxList do
+                  ComboboxEmptyState { "No results found." }
+
+                  ComboboxItem do
+                    ComboboxRadio(name: "color", value: "red")
+                    span { "Red" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "color", value: "green")
+                    span { "Green" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "color", value: "blue")
+                    span { "Blue" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "color", value: "yellow")
+                    span { "Yellow" }
+                  end
+                  ComboboxItem do
+                    ComboboxRadio(name: "color", value: "purple")
+                    span { "Purple" }
+                  end
+                end
+              end
             end
           end
         RUBY
       end
 
-      render Components::ComponentSetup::Tabs.new(component_name: "Combobox")
+      render Components::ComponentSetup::Tabs.new(component_name: component)
 
-      render Docs::ComponentsTable.new(component_files("Combobox"))
+      render Docs::ComponentsTable.new(component_files(component))
     end
   end
 end

data/lib/ruby_ui/combobox/combobox_input_trigger.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxInputTrigger < Base
+    def initialize(placeholder: "", **)
+      @placeholder = placeholder
+      super(**)
+    end
+
+    def view_template
+      div(**attrs) do
+        input(
+          type: "text",
+          placeholder: @placeholder,
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          class: "flex-1 border-0 px-0 bg-transparent outline-none focus:ring-0 placeholder:text-muted-foreground text-sm disabled:cursor-not-allowed",
+          data: {
+            ruby_ui__combobox_target: "inputTrigger",
+            action: "keyup->ruby-ui--combobox#filterItems input->ruby-ui--combobox#filterItems"
+          }
+        )
+        chevron_icon
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex h-9 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 aria-invalid:border-destructive",
+        data: {
+          ruby_ui__combobox_target: "trigger",
+          placeholder: @placeholder,
+          action: "click->ruby-ui--combobox#openPopover focusin->ruby-ui--combobox#openPopover"
+        },
+        aria: {
+          haspopup: "listbox",
+          expanded: "false"
+        }
+      }
+    end
+
+    def chevron_icon
+      span(class: "shrink-0 flex items-center justify-center size-6 rounded-sm hover:bg-muted hover:text-foreground") do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "pointer-events-none size-4 text-muted-foreground"
+        ) do |s|
+          s.path(d: "m6 9 6 6 6-6")
+        end
+      end
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_item.rb

@@ -3,19 +3,17 @@
 module RubyUI
   class ComboboxItem < Base
     def view_template(&)
-      label(**attrs, &)
+      label(**attrs) do
+        yield if block_given?
+        render ComboboxItemIndicator.new
+      end
     end
 
     private
 
     def default_attrs
       {
-        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",
-          "has-disabled:opacity-50 has-disabled:cursor-not-allowed"
-        ],
+        class: "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-[current=true]:bg-accent has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed",
         role: "option",
         data: {
           ruby_ui__combobox_target: "item"

data/lib/ruby_ui/combobox/combobox_item_indicator.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxItemIndicator < Base
+    def view_template
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        **attrs
+      ) do |s|
+        s.path(d: "M20 6 9 17l-5-5")
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "ml-auto size-4 shrink-0 opacity-0 peer-checked:opacity-100"
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_list_group.rb

@@ -12,7 +12,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: ["hidden has-[label:not(.hidden)]:flex flex-col py-1 gap-1 border-b", LABEL_CLASSES],
+        class: ["hidden has-[label:not(.hidden)]:flex flex-col py-1 gap-1", LABEL_CLASSES],
         role: "group"
       }
     end

data/lib/ruby_ui/combobox/combobox_popover.rb

@@ -12,16 +12,11 @@ module RubyUI
       {
         class: "inset-auto m-0 absolute border bg-background shadow-lg rounded-lg",
         role: "popover",
-        autofocus: true,
         popover: true,
         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#closePopover:prevent
             resize@window->ruby-ui--combobox#updatePopoverWidth
           ]
         }

data/lib/ruby_ui/combobox/combobox_radio.rb

@@ -10,14 +10,7 @@ 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",
-          "checked:bg-primary checked:text-primary-foreground",
-          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
-        ],
+        class: "peer sr-only",
         data: {
           ruby_ui__combobox_target: "input",
           ruby_ui__form_field_target: "input",

data/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb

@@ -10,13 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: [
-          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
-          "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"
-        ],
+        class: "peer sr-only disabled:cursor-not-allowed",
         data: {
           ruby_ui__combobox_target: "toggleAll",
           action: "change->ruby-ui--combobox#toggleAllItems"

data/lib/ruby_ui/combobox/combobox_trigger.rb

@@ -9,7 +9,7 @@ module RubyUI
 
     def view_template
       button(**attrs) do
-        span(class: "truncate", data: {ruby_ui__combobox_target: "triggerContent"}) do
+        span(class: "truncate text-muted-foreground", data: {ruby_ui__combobox_target: "triggerContent"}) do
           @placeholder
         end
         icon
@@ -26,12 +26,13 @@ module RubyUI
           "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"
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "aria-invalid:border-destructive"
         ],
         data: {
           placeholder: @placeholder,
           ruby_ui__combobox_target: "trigger",
-          action: "ruby-ui--combobox#togglePopover"
+          action: "click->ruby-ui--combobox#togglePopover focus->ruby-ui--combobox#openPopover"
         },
         aria: {
           haspopup: "listbox",
@@ -41,22 +42,21 @@ module RubyUI
     end
 
     def icon
-      svg(
-        xmlns: "http://www.w3.org/2000/svg",
-        viewbox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        class: "ml-2 h-4 w-4 shrink-0 opacity-50",
-        stroke_width: "2",
-        stroke_linecap: "round",
-        stroke_linejoin: "round"
-      ) do |s|
-        s.path(
-          d: "m7 15 5 5 5-5"
-        )
-        s.path(
-          d: "m7 9 5-5 5 5"
-        )
+      span(class: "shrink-0 flex items-center justify-center size-6 rounded-sm hover:bg-muted hover:text-foreground") do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "pointer-events-none size-4 text-muted-foreground"
+        ) do |s|
+          s.path(d: "m6 9 6 6 6-6")
+        end
       end
     end
   end

data/lib/ruby_ui/data_table/data_table.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTable < Base
+    register_element :turbo_frame, tag: "turbo-frame"
+
+    def initialize(id:, **attrs)
+      @id = id
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      turbo_frame(id: @id, target: "_top") do
+        div(**attrs) do
+          yield if block
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full space-y-4",
+        data: {controller: "ruby-ui--data-table"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_bulk_actions.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableBulkActions < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden items-center gap-2",
+        data: {"ruby-ui--data-table-target": "bulkActions"}
+      }
+    end
+  end
+end