refactor(command): split dialog controller, use Stimulus outlets

Introduce ruby-ui--command-dialog controller for the trigger/template
wrapper and keep ruby-ui--command for the cloned dialog instance. The
trigger declares a ruby-ui--command outlet matched by a marker attribute
on the cloned dialog wrapper. Outlet connect/disconnect callbacks track
the active dialog, replacing the static class field and avoiding both
querySelector and same-identifier dual-personality controller code.

- New: command_dialog_controller.js (trigger + content target + outlet)
- Strip open/openValue/content target from command_controller.js
- Rename trigger actions to ruby-ui--command-dialog#open
- Add ruby_ui__command_dialog_instance marker on cloned dialog

Author: djalmaaraujo

docs/app/javascript/controllers/index.js

@@ -40,6 +40,9 @@ application.register("ruby-ui--combobox", RubyUi__ComboboxController)
 import RubyUi__CommandController from "./ruby_ui/command_controller"
 application.register("ruby-ui--command", RubyUi__CommandController)
 
+import RubyUi__CommandDialogController from "./ruby_ui/command_dialog_controller"
+application.register("ruby-ui--command-dialog", RubyUi__CommandDialogController)
+
 import RubyUi__ContextMenuController from "./ruby_ui/context_menu_controller"
 application.register("ruby-ui--context-menu", RubyUi__ContextMenuController)
 

docs/app/javascript/controllers/ruby_ui/command_controller.js

@@ -3,16 +3,7 @@ import Fuse from "fuse.js";
 
 // Connects to data-controller="ruby-ui--command"
 export default class extends Controller {
-  static targets = ["input", "group", "item", "empty", "content"];
-
-  static values = {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-  };
-
-  static openInstance = null;
+  static targets = ["input", "group", "item", "empty"];
 
   connect() {
     this.selectedIndex = -1;
@@ -21,40 +12,9 @@ export default class extends Controller {
       return;
     }
 
-    this.constructor.openInstance = this;
     this.inputTarget.focus();
     this.searchIndex = this.buildSearchIndex();
     this.toggleVisibility(this.emptyTargets, false);
-
-    if (this.openValue && this.hasContentTarget) {
-      this.open();
-    }
-  }
-
-  disconnect() {
-    if (this.constructor.openInstance === this) {
-      this.constructor.openInstance = null;
-    }
-  }
-
-  open(e) {
-    if (e) {
-      e.preventDefault();
-    }
-
-    if (!this.hasContentTarget) {
-      return;
-    }
-
-    const openInstance = this.constructor.openInstance;
-    if (openInstance) {
-      openInstance.focusInput();
-      return;
-    }
-
-    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
-    // prevent scroll on body
-    document.body.classList.add("overflow-hidden");
   }
 
   dismiss() {
@@ -64,6 +24,10 @@ export default class extends Controller {
     this.element.remove();
   }
 
+  focusInput() {
+    this.inputTarget?.focus();
+  }
+
   filter(e) {
     // Deselect any previously selected item
     this.deselectAll();
@@ -159,8 +123,4 @@ export default class extends Controller {
     this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
     this.selectedIndex = -1;
   }
-
-  focusInput() {
-    this.inputTarget?.focus();
-  }
 }

docs/app/javascript/controllers/ruby_ui/command_dialog_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--command-dialog"
+export default class extends Controller {
+  static targets = ["content"];
+  static outlets = ["ruby-ui--command"];
+
+  rubyUiCommandOutletConnected(controller) {
+    this.openOutlet = controller;
+  }
+
+  rubyUiCommandOutletDisconnected() {
+    this.openOutlet = null;
+  }
+
+  open(e) {
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (!this.hasContentTarget) {
+      return;
+    }
+
+    if (this.openOutlet) {
+      this.openOutlet.focusInput();
+      return;
+    }
+
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    // prevent scroll on body
+    document.body.classList.add("overflow-hidden");
+  }
+}

gem/lib/ruby_ui/command/command_controller.js

@@ -3,16 +3,7 @@ import Fuse from "fuse.js";
 
 // Connects to data-controller="ruby-ui--command"
 export default class extends Controller {
-  static targets = ["input", "group", "item", "empty", "content"];
-
-  static values = {
-    open: {
-      type: Boolean,
-      default: false,
-    },
-  };
-
-  static openInstance = null;
+  static targets = ["input", "group", "item", "empty"];
 
   connect() {
     this.selectedIndex = -1;
@@ -21,40 +12,9 @@ export default class extends Controller {
       return;
     }
 
-    this.constructor.openInstance = this;
     this.inputTarget.focus();
     this.searchIndex = this.buildSearchIndex();
     this.toggleVisibility(this.emptyTargets, false);
-
-    if (this.openValue && this.hasContentTarget) {
-      this.open();
-    }
-  }
-
-  disconnect() {
-    if (this.constructor.openInstance === this) {
-      this.constructor.openInstance = null;
-    }
-  }
-
-  open(e) {
-    if (e) {
-      e.preventDefault();
-    }
-
-    if (!this.hasContentTarget) {
-      return;
-    }
-
-    const openInstance = this.constructor.openInstance;
-    if (openInstance) {
-      openInstance.focusInput();
-      return;
-    }
-
-    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
-    // prevent scroll on body
-    document.body.classList.add("overflow-hidden");
   }
 
   dismiss() {
@@ -64,6 +24,10 @@ export default class extends Controller {
     this.element.remove();
   }
 
+  focusInput() {
+    this.inputTarget?.focus();
+  }
+
   filter(e) {
     // Deselect any previously selected item
     this.deselectAll();
@@ -159,8 +123,4 @@ export default class extends Controller {
     this.itemTargets.forEach((item) => this.toggleAriaSelected(item, false));
     this.selectedIndex = -1;
   }
-
-  focusInput() {
-    this.inputTarget?.focus();
-  }
 }

gem/lib/ruby_ui/command/command_dialog.rb

@@ -10,7 +10,10 @@ def view_template(&)
 
     def default_attrs
       {
-        data: {controller: "ruby-ui--command"}
+        data: {
+          controller: "ruby-ui--command-dialog",
+          ruby_ui__command_dialog_ruby_ui__command_outlet: "[data-ruby-ui--command-dialog-instance]"
+        }
       }
     end
   end

gem/lib/ruby_ui/command/command_dialog_content.rb

@@ -17,8 +17,8 @@ def initialize(size: :md, **attrs)
     end
 
     def view_template(&block)
-      template(data: {ruby_ui__command_target: "content"}) do
-        div(data: {controller: "ruby-ui--command"}) do
+      template(data: {ruby_ui__command_dialog_target: "content"}) do
+        div(data: {controller: "ruby-ui--command", ruby_ui__command_dialog_instance: true}) do
           backdrop
           div(**attrs, &block)
         end

gem/lib/ruby_ui/command/command_dialog_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--command-dialog"
+export default class extends Controller {
+  static targets = ["content"];
+  static outlets = ["ruby-ui--command"];
+
+  rubyUiCommandOutletConnected(controller) {
+    this.openOutlet = controller;
+  }
+
+  rubyUiCommandOutletDisconnected() {
+    this.openOutlet = null;
+  }
+
+  open(e) {
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (!this.hasContentTarget) {
+      return;
+    }
+
+    if (this.openOutlet) {
+      this.openOutlet.focusInput();
+      return;
+    }
+
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    // prevent scroll on body
+    document.body.classList.add("overflow-hidden");
+  }
+}

gem/lib/ruby_ui/command/command_dialog_trigger.rb

@@ -8,7 +8,7 @@ class CommandDialogTrigger < Base
     ].freeze
 
     def initialize(keybindings: DEFAULT_KEYBINDINGS, **attrs)
-      @keybindings = keybindings.map { |kb| "#{kb}->ruby-ui--command#open" }
+      @keybindings = keybindings.map { |kb| "#{kb}->ruby-ui--command-dialog#open" }
       super(**attrs)
     end
 
@@ -21,7 +21,7 @@ def view_template(&)
     def default_attrs
       {
         data: {
-          action: ["click->ruby-ui--command#open", @keybindings.join(" ")]
+          action: ["click->ruby-ui--command-dialog#open", @keybindings.join(" ")]
         }
       }
     end