Merge pull request #2 from stimulus-components/indeterminate-state

Adding indeterminate support

Author: guillaumebriday

CHANGELOG.md

@@ -6,6 +6,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Indeterminate state support
+
+Add `data-target="checkbox-select-all.checkboxAll"` attribute to use it. It's optional.
+```diff
+- <input type="checkbox" data-action="change->checkbox-select-all#toggle" />
++ <input type="checkbox" data-target="checkbox-select-all.checkboxAll" data-action="change->checkbox-select-all#toggle" />
+```
+
 ## [1.0.0] - 2020-10-15
 
 ### Added

README.md

@@ -28,6 +28,44 @@ application.register("checkbox-select-all", CheckboxSelectAll)
 
 ## Usage
 
+### Without Rails
+
+```html
+<table>
+  <tbody>
+    <td class="block">
+      <label>
+        <input type="checkbox" data-target="checkbox-select-all.checkboxAll" data-action="change->checkbox-select-all#toggle" />
+        <span>Select All / Deselect All</span>
+      </label>
+    </td>
+
+    <td class="block">
+      <label>
+        <input type="checkbox" data-target="checkbox-select-all.checkbox" value="1" />
+        <span>Team 1</span>
+      </label>
+    </td>
+
+    <td class="block">
+      <label>
+        <input type="checkbox" data-target="checkbox-select-all.checkbox" checked="checked" value="2" />
+        <span>Team 2</span>
+      </label>
+    </td>
+
+    <td class="block">
+      <label>
+        <input type="checkbox" data-target="checkbox-select-all.checkbox" value="3" />
+        <span>Team 3</span>
+      </label>
+    </td>
+  </tbody>
+</table>
+```
+
+### With Rails
+
 In your models:
 ```ruby
 class User < ApplicationRecord
@@ -66,7 +104,7 @@ In your view:
 ```html
 <%= form_with model: @user, data: { controller: 'checkbox-select-all' } do |f| %>
   <label>
-    <input type="checkbox" data-action="change->checkbox-select-all#toggle" />
+    <input type="checkbox" data-target="checkbox-select-all.checkboxAll" data-action="change->checkbox-select-all#toggle" />
     <span>Select All / Deselect All</span>
   </label>
 

index.html

@@ -98,7 +98,12 @@ <h2 class="text-center text-2xl font-bold my-4">Essential links</h2>
             <tbody>
               <td class="block">
                 <label>
-                  <input id="checkbox-select-all" type="checkbox" data-action="change->checkbox-select-all#toggle" />
+                  <input
+                    id="checkbox-select-all"
+                    type="checkbox"
+                    data-target="checkbox-select-all.checkboxAll"
+                    data-action="change->checkbox-select-all#toggle"
+                  />
                   <span>Select All / Deselect All</span>
                 </label>
               </td>
@@ -112,7 +117,7 @@ <h2 class="text-center text-2xl font-bold my-4">Essential links</h2>
 
               <td class="block">
                 <label>
-                  <input type="checkbox" data-target="checkbox-select-all.checkbox" />
+                  <input type="checkbox" data-target="checkbox-select-all.checkbox" checked="checked" />
                   <span>Team 2</span>
                 </label>
               </td>

src/index.js

@@ -1,7 +1,22 @@
 import { Controller } from 'stimulus'
 
 export default class extends Controller {
-  static targets = ['checkbox']
+  static targets = ['checkboxAll', 'checkbox']
+
+  connect () {
+    this.refresh = this.refresh.bind(this)
+
+    if (!this.hasCheckboxAllTarget) return
+
+    this.checkboxTargets.forEach(checkbox => checkbox.addEventListener('change', this.refresh))
+    this.refresh()
+  }
+
+  disconnect () {
+    if (!this.hasCheckboxAllTarget) return
+
+    this.checkboxTargets.forEach(checkbox => checkbox.removeEventListener('change', this.refresh))
+  }
 
   toggle (e) {
     e.preventDefault()
@@ -10,4 +25,12 @@ export default class extends Controller {
       checkbox.checked = e.target.checked
     })
   }
+
+  refresh () {
+    const checkboxesCount = this.checkboxTargets.length
+    const checkboxesCheckedCount = this.checkboxTargets.filter(checkbox => checkbox.checked).length
+
+    this.checkboxAllTarget.checked = checkboxesCheckedCount > 0
+    this.checkboxAllTarget.indeterminate = checkboxesCheckedCount > 0 && checkboxesCheckedCount < checkboxesCount
+  }
 }

src/index.test.js

@@ -11,8 +11,12 @@ describe('#checkboxSelectAll', () => {
       () => document.querySelectorAll("[data-target='checkbox-select-all.checkbox']:checked").length
     )
 
-    expect(targetsBefore).toBe(0)
+    expect(targetsBefore).toBe(1)
 
+    // Uncheck all
+    await toggleCheckbox.click()
+
+    // Check all
     await toggleCheckbox.click()
 
     const targetsAfter = await page.evaluate(