playbook_ui_docs 14.8.0.pre.alpha.PLAY16254545 → 14.8.0.pre.alpha.play1648heightglobalprops4606

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b6ccbf827e83c41ef94d73ffd55ff3677d6e435c0abe9604640563fb6153dc84
-  data.tar.gz: 4b97d1edff26879ad50aea1d3b61e518019eb025ce35afbef9bbac9c9dadb2dd
+  metadata.gz: 2d97db2e39cfc6ee27efbcfaf85977399003b39fe3bf389389b7a28826be67b9
+  data.tar.gz: 1fe46159e6bd0e0bc61fc568cee38f37ca442a74fcbb0feae6ac627a2cb32723
 SHA512:
-  metadata.gz: 366cccb9746c9753f59bf69ad7b9c06b9c46e071c7f358e444d11bdaa418e4071bf2ba26e0e455d066f1a165eec39de1714b9b41a581c6b6c745d71377f7a550
-  data.tar.gz: cd12c7bc9bde11472cda70362173940e723592fed99e9d34428d3d0f86b7ae3cfe3a7292cdb287c1880d6efa7270214a1ce4f572c72210e8ec1eb7bdb7110123
+  metadata.gz: 2a66ad50e885da2ef7d0272f25daf0b2c5341daee7a27d4124d97ed123fdddc1156f9591de96a42b8d2c36c7d679a59b642e96fd2c5aa1479641928aed57cd86
+  data.tar.gz: 10e17eb1ae5a331a5cd0d3936f4104d9b4b5518e2225f3ccb3757fe9b61143f814fab29b5a54ad80b3807fa369b9f8114bdd3a574bd44d4ebab87bc7727c0cdf

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -1,7 +1,84 @@
-<%= pb_rails("checkbox" , props: {
-  text: "Select ",
-  value: "checkbox-value",
-  name: "main",
-  indeterminate: true,
-  id: "test-indeterminate-js"
-}) %>
+<% checkboxes = [
+  { name: 'Coffee', id: 'coffee', checked: false },
+  { name: 'Ice Cream', id: 'ice-cream', checked: false },
+  { name: 'Chocolate', id: 'chocolate', checked: true }
+] %>
+
+<%= pb_rails("table", props: { container: false, size: "md" }) do %>
+  <thead>
+    <tr>
+      <th>
+        <%= pb_rails("checkbox", props: {
+          checked: true,
+          text: "Uncheck All",
+          value: "checkbox-value",
+          name: "main-checkbox",
+          indeterminate: true,
+          id: "indeterminate-checkbox"
+        }) %>
+      </th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <% checkboxes.each do |checkbox| %>
+      <tr>
+        <td>
+          <%= pb_rails("checkbox", props: {
+            checked: checkbox[:checked],
+            text: checkbox[:name],
+            value: checkbox[:id],
+            name: "#{checkbox[:id]}-indeterminate-checkbox",
+            id: "#{checkbox[:id]}-indeterminate-checkbox",
+          }) %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+<% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
+    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
+    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
+
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+    };
+
+    mainCheckbox.addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  });
+</script>

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb

@@ -6,6 +6,7 @@
     value: "selected_with_icon",
     checked: true,
     icon: true,
+
   }) do %>
     Selected, with icon
   <% end %>
@@ -36,4 +37,4 @@
     Disabled
   <% end %>
 
-</div>
+</div>