Add toggle all example to combobox docs (#159)

ruby-ui · Feb 8, 2025 · af1e38a · af1e38a
1 parent 194bfac
commit af1e38a
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 7 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -14,7 +14,7 @@ GIT
 
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: 500b8d98fbee73f15a3182feb4eca8e8e146d6b5
+  revision: 537b7c06f57a0918e4ba07ce08c3dad3dace15a3
   branch: main
   specs:
     ruby_ui (1.0.0.beta1)

diff --git a/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb b/app/components/ruby_ui/combobox/combobox_toggle_all_checkbox.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxToggleAllCheckbox < Base
+    def view_template
+      input(type: "checkbox", **attrs)
+    end
+
+    private
+
+    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"
+        ],
+        data: {
+          ruby_ui__combobox_target: "toggleAll",
+          action: "change->ruby-ui--combobox#toggleAllItems"
+        }
+      }
+    end
+  end
+end
diff --git a/app/javascript/controllers/ruby_ui/combobox_controller.js b/app/javascript/controllers/ruby_ui/combobox_controller.js
@@ -9,6 +9,7 @@ export default class extends Controller {
 
   static targets = [
     "input",
+    "toggleAll",
     "popover",
     "item",
     "emptyState",
@@ -33,12 +34,22 @@ export default class extends Controller {
     if (e.target.type == "radio") {
       this.closePopover()
     }
+
+    if (this.hasToggleAllTarget && !e.target.checked) {
+      this.toggleAllTarget.checked = false
+    }
   }
 
   inputContent(input) {
     return input.dataset.text || input.parentElement.innerText
   }
 
+  toggleAllItems() {
+    const isChecked = this.toggleAllTarget.checked
+    this.inputTargets.forEach(input => input.checked = isChecked)
+    this.updateTriggerContent()
+  }
+
   updateTriggerContent() {
     const checkedInputs = this.inputTargets.filter(input => input.checked)
 
@@ -73,6 +84,12 @@ export default class extends Controller {
     }
 
     const filterTerm = this.searchInputTarget.value.toLowerCase()
+
+    if (this.hasToggleAllTarget) {
+      if (filterTerm) this.toggleAllTarget.parentElement.classList.add("hidden")
+      else this.toggleAllTarget.parentElement.classList.remove("hidden")
+    }
+
     let resultCount = 0
 
     this.selectedItemIndex = null

diff --git a/app/views/docs/combobox_view.rb b/app/views/docs/combobox_view.rb
@@ -76,6 +76,11 @@ def view_template
                 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")

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "app",
   "private": "true",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.12",
+    "@floating-ui/dom": "^1.6.13",
     "@hotwired/stimulus": "3.2.2",
     "@hotwired/turbo-rails": "8.0.12",
     "autoprefixer": "10.4.19",

diff --git a/yarn.lock b/yarn.lock
@@ -134,19 +134,24 @@
   dependencies:
     "@floating-ui/utils" "^0.2.8"
 
-"@floating-ui/dom@^1.6.12":
-  version "1.6.12"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
-  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+"@floating-ui/dom@^1.6.13":
+  version "1.6.13"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.13.tgz#a8a938532aea27a95121ec16e667a7cbe8c59e34"
+  integrity sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==
   dependencies:
     "@floating-ui/core" "^1.6.0"
-    "@floating-ui/utils" "^0.2.8"
+    "@floating-ui/utils" "^0.2.9"
 
 "@floating-ui/utils@^0.2.8":
   version "0.2.8"
   resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz"
   integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
+"@floating-ui/utils@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429"
+  integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==
+
 "@hotwired/[email protected]":
   version "3.2.2"
   resolved "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz"