Add toggle all checkbox to combobox (#221)

Author: karinevieira

lib/ruby_ui/combobox/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

lib/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