@radioactive-labs/plutonium 0.50.0 → 0.51.0

package/src/js/controllers/slim_select_controller.js

@@ -1,7 +1,19 @@
 import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="slim-select"
+//
+// Optional values (used by the typeahead-capable ResourceSelect):
+//   typeahead-url   — backend endpoint that returns
+//                     {results: [{value, label}, ...], has_more: bool}.
+//                     When present, SlimSelect's built-in client-side
+//                     filter is replaced by a debounced fetch through
+//                     this URL.
 export default class extends Controller {
+  static values = {
+    typeaheadUrl: String,
+    typeaheadDebounceMs: { type: Number, default: 200 }
+  }
+
   connect() {
     if (this.slimSelect) return;
 
@@ -47,9 +59,18 @@ export default class extends Controller {
       settings.openPosition = "auto";
     }
 
+    const events = {};
+
+    if (this.hasTypeaheadUrlValue && this.typeaheadUrlValue) {
+      // Replace SlimSelect's client-side filter with a server fetch.
+      // Returns the SlimSelect data array shape: {value, text}.
+      events.search = (search, currentData) => this.#typeaheadFetch(search, currentData);
+    }
+
     this.slimSelect = new SlimSelect({
       select: this.element,
       settings: settings,
+      events: events,
     });
 
     // Add event listeners for better positioning
@@ -177,6 +198,46 @@ export default class extends Controller {
     this.#cleanupSlimSelect();
   }
 
+  // Server-driven search. SlimSelect calls events.search on each
+  // keystroke; we debounce so that rapid typing produces a single
+  // request, and abort any in-flight fetch when a newer one starts.
+  // Returns a Promise resolving to either a DataArray (rendered as
+  // options) or a string (rendered as the no-results label).
+  #typeaheadFetch(search, _currentData) {
+    if (this._typeaheadDebounce) clearTimeout(this._typeaheadDebounce);
+    if (this._typeaheadAbort) this._typeaheadAbort.abort();
+
+    return new Promise((resolve) => {
+      this._typeaheadDebounce = setTimeout(() => {
+        this._typeaheadAbort = new AbortController();
+        this.#performTypeaheadFetch(search, this._typeaheadAbort.signal).then(resolve);
+      }, this.typeaheadDebounceMsValue);
+    });
+  }
+
+  async #performTypeaheadFetch(search, signal) {
+    const url = new URL(this.typeaheadUrlValue, window.location.origin);
+    url.searchParams.set("q", search || "");
+
+    try {
+      const res = await fetch(url.toString(), {
+        headers: { Accept: "application/json" },
+        signal: signal,
+      });
+      if (!res.ok) return "Search failed";
+      const json = await res.json();
+      const results = Array.isArray(json.results) ? json.results : [];
+      return results.map((row) => ({
+        value: String(row.value ?? ""),
+        text: String(row.label ?? ""),
+      }));
+    } catch (e) {
+      if (e.name === "AbortError") return [];
+      console.warn("[slim-select] typeahead error", e);
+      return "Search failed";
+    }
+  }
+
   #handleMorph() {
     if (!this.element.isConnected) return;
 

package/src/js/turbo/turbo_actions.js

@@ -6,3 +6,36 @@ Turbo.StreamActions.redirect = function () {
   const url = this.getAttribute("url")
   Turbo.visit(url)
 }
+
+// Closes the <dialog> rendered inside the targeted turbo-frame and
+// empties the frame so the dialog can be re-opened later. Used by the
+// stacked-modal flow: after a successful create inside the secondary
+// modal, the server tells the browser to dismiss it.
+Turbo.StreamActions.close_frame = function () {
+  const frameId = this.getAttribute("target")
+  if (!frameId) return
+
+  const frame = document.getElementById(frameId)
+  if (!frame) return
+
+  const dialog = frame.querySelector("dialog")
+  if (dialog && typeof dialog.close === "function") dialog.close()
+
+  // Clearing the frame's content keeps a future visit to the same URL
+  // re-fetching (turbo would otherwise treat the frame as cached).
+  frame.innerHTML = ""
+  frame.removeAttribute("src")
+}
+
+// Reloads the targeted turbo-frame from its current src. Used after a
+// secondary-modal action mutates data the primary modal depends on
+// (e.g. a newly created association option) so the primary re-renders.
+Turbo.StreamActions.reload_frame = function () {
+  const frameId = this.getAttribute("target")
+  if (!frameId) return
+
+  const frame = document.getElementById(frameId)
+  if (!frame || typeof frame.reload !== "function") return
+
+  frame.reload()
+}