@radioactive-labs/plutonium 0.34.1 → 0.35.1

package/src/js/controllers/bulk_actions_controller.js

@@ -0,0 +1,109 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="bulk-actions"
+// Manages bulk action selection in resource tables
+export default class extends Controller {
+  static targets = ["checkbox", "checkboxAll", "toolbar", "selectedCount", "actionButton", "selectionCell"]
+  static values = {
+    hasActions: { type: Boolean, default: false }
+  }
+
+  connect() {
+    // Show selection column only if bulk actions exist
+    if (this.hasActionsValue) {
+      this.enableSelection()
+    }
+  }
+
+  enableSelection() {
+    // Show all selection cells (header + body cells)
+    this.selectionCellTargets.forEach(el => el.classList.remove("hidden"))
+  }
+
+  toggle() {
+    this.updateUI()
+  }
+
+  toggleAll(event) {
+    const checked = event.target.checked
+    this.checkboxTargets.forEach(cb => cb.checked = checked)
+    this.updateUI()
+  }
+
+  updateUI() {
+    const checked = this.checked
+    const total = this.checkboxTargets.length
+
+    // Update "select all" checkbox state (checked, unchecked, or indeterminate)
+    if (this.hasCheckboxAllTarget) {
+      this.checkboxAllTarget.checked = checked.length === total && total > 0
+      this.checkboxAllTarget.indeterminate = checked.length > 0 && checked.length < total
+    }
+
+    // Show toolbar only when items are selected
+    if (this.hasToolbarTarget) {
+      this.toolbarTarget.classList.toggle("hidden", checked.length === 0)
+    }
+
+    // Update selected count display
+    if (this.hasSelectedCountTarget) {
+      this.selectedCountTarget.textContent = checked.length
+    }
+
+    // Update action button URLs and visibility based on allowed actions
+    this.updateActionButtons()
+  }
+
+  updateActionButtons() {
+    const checked = this.checked
+    const ids = checked.map(cb => cb.value)
+    const idsParam = ids.map(id => `ids[]=${encodeURIComponent(id)}`).join("&")
+
+    // Compute intersection of allowed actions across all selected records
+    const allowedActions = this.computeAllowedActions(checked)
+
+    this.actionButtonTargets.forEach(button => {
+      const baseUrl = button.dataset.bulkActionUrl
+      const actionName = button.dataset.bulkActionName
+
+      // Update URL with selected IDs
+      if (baseUrl) {
+        button.href = idsParam ? `${baseUrl}?${idsParam}` : baseUrl
+      }
+
+      // Show/hide button based on whether action is allowed for all selected records
+      button.style.display = allowedActions.has(actionName) ? '' : 'none'
+    })
+  }
+
+  // Compute the intersection of allowed actions across all selected checkboxes
+  computeAllowedActions(checked) {
+    if (checked.length === 0) {
+      return new Set()
+    }
+
+    // Start with actions allowed for the first selected record
+    let intersection = new Set(this.getAllowedActionsForCheckbox(checked[0]))
+
+    // Intersect with actions allowed for each subsequent record
+    for (let i = 1; i < checked.length; i++) {
+      const actions = this.getAllowedActionsForCheckbox(checked[i])
+      intersection = new Set([...intersection].filter(a => actions.includes(a)))
+    }
+
+    return intersection
+  }
+
+  getAllowedActionsForCheckbox(checkbox) {
+    const allowedActions = checkbox.dataset.allowedActions
+    return allowedActions ? allowedActions.split(",").filter(a => a) : []
+  }
+
+  get checked() {
+    return this.checkboxTargets.filter(cb => cb.checked)
+  }
+
+  get unchecked() {
+    return this.checkboxTargets.filter(cb => !cb.checked)
+  }
+}

package/src/js/controllers/filter_panel_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="filter-panel"
+export default class extends Controller {
+  clear() {
+    this.element.querySelectorAll('input, select, textarea').forEach(input => {
+      if (input.type === 'checkbox' || input.type === 'radio') {
+        input.checked = false
+      } else if (input.tagName === 'SELECT') {
+        input.selectedIndex = 0
+      } else if (input.type === 'hidden') {
+        // Clear hidden inputs that are filter values (e.g., flatpickr)
+        if (input.dataset.controller === 'flatpickr') {
+          input.value = ''
+        }
+      } else {
+        input.value = ''
+      }
+    })
+
+    // Clear flatpickr instances via Stimulus controller
+    this.element.querySelectorAll('[data-controller="flatpickr"]').forEach(input => {
+      const controller = this.application.getControllerForElementAndIdentifier(input, 'flatpickr')
+      if (controller?.picker) {
+        controller.picker.clear()
+      }
+    })
+
+    // Submit the parent form
+    const form = this.element.closest('form')
+    if (form) {
+      form.requestSubmit()
+    }
+  }
+}

package/src/js/controllers/register_controllers.js

@@ -19,7 +19,9 @@ import AttachmentPreviewContainerController from "./attachment_preview_container
 import SidebarController from "./sidebar_controller.js"
 import PasswordVisibilityController from "./password_visibility_controller.js"
 import RemoteModalController from "./remote_modal_controller.js"
-import KeyValueStoreController from "./key_value_st\ore_controller.js"
+import KeyValueStoreController from "./key_value_store_controller.js"
+import BulkActionsController from "./bulk_actions_controller.js"
+import FilterPanelController from "./filter_panel_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -44,4 +46,6 @@ export default function (application) {
   application.register("attachment-preview-container", AttachmentPreviewContainerController)
   application.register("remote-modal", RemoteModalController)
   application.register("key-value-store", KeyValueStoreController)
+  application.register("bulk-actions", BulkActionsController)
+  application.register("filter-panel", FilterPanelController)
 }

package/src/js/controllers/resource_drop_down_controller.js

@@ -4,6 +4,9 @@ import { createPopper } from '@popperjs/core'
 // Connects to data-controller="resource-drop-down"
 export default class extends Controller {
   static targets = ["trigger", "menu"]
+  static values = {
+    placement: { type: String, default: 'bottom' }
+  }
 
   connect() {
     this.visible = false
@@ -11,7 +14,7 @@ export default class extends Controller {
 
     // Default options matching Flowbite's defaults
     this.options = {
-      placement: 'bottom',
+      placement: this.placementValue,
       triggerType: 'click',
       offsetSkidding: 0,
       offsetDistance: 10,
@@ -25,7 +28,9 @@ export default class extends Controller {
   init() {
     if (this.triggerTarget && this.menuTarget && !this.initialized) {
       // Initialize popper instance
+      // Use 'fixed' strategy to escape overflow containers (e.g., table rows)
       this.popperInstance = createPopper(this.triggerTarget, this.menuTarget, {
+        strategy: 'fixed',
         placement: this.options.placement,
         modifiers: [
           {
@@ -34,6 +39,21 @@ export default class extends Controller {
               offset: [this.options.offsetSkidding, this.options.offsetDistance],
             },
           },
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['left-end', 'right-start', 'right-end', 'bottom-start', 'bottom-end', 'top-start', 'top-end'],
+              boundary: 'clippingParents',
+            },
+          },
+          {
+            name: 'preventOverflow',
+            options: {
+              boundary: 'clippingParents',
+              altAxis: true,
+              padding: 8,
+            },
+          },
         ],
       })
 
@@ -116,11 +136,15 @@ export default class extends Controller {
         })
       }
 
+      // Ignore clicks on flatpickr calendars and other floating UI elements
+      const isFloatingUI = clickedEl.closest('.flatpickr-calendar, .ss-main, .ss-content')
+
       if (
         clickedEl !== this.menuTarget &&
         !this.menuTarget.contains(clickedEl) &&
         !this.triggerTarget.contains(clickedEl) &&
         !isIgnored &&
+        !isFloatingUI &&
         this.visible
       ) {
         this.hide()

package/src/js/controllers/slim_select_controller.js

@@ -9,8 +9,12 @@ export default class extends Controller {
 
     // Just recreate SlimSelect after morphing - the DOM will have correct selections
     this.element.addEventListener("turbo:morph-element", (event) => {
-      if (event.target === this.element) {
-        requestAnimationFrame(() => this.#handleMorph());
+      if (event.target === this.element && !this.morphing) {
+        this.morphing = true;
+        requestAnimationFrame(() => {
+          this.#handleMorph();
+          this.morphing = false;
+        });
       }
     });
   }

package/src/js/turbo/turbo_actions.js

@@ -1,7 +1,7 @@
 // Add a redirect stream action
 Turbo.StreamActions.redirect = function () {
   // See: https://github.com/hotwired/turbo/issues/554
-  Turbo.clearCache();
+  Turbo.cache.clear();
 
   const url = this.getAttribute("url")
   Turbo.visit(url)