admin_suite 0.2.7 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5150c2ac986138055644b1e6f52c61ee774efc62e27a951a34d4ca9943fe7d8
-  data.tar.gz: 57729f5a0e760f26111c7f73aeec78a7493a1b849ba12bd50c992ebfbaf6c034
+  metadata.gz: 663de764696e7dc2696e54b4bb43381fe83ee33b74b9d212269ff6d25433466b
+  data.tar.gz: 9e9c6f145e86d4c8a0d1087cdc2d45c752da1fbbe9f1d4219d7b8874ebcc5291
 SHA512:
-  metadata.gz: e99ac448e983647cb570ae875e0681e138895c7783a6538ee6aa0b898e93001c3dd65b8dcf6b882885c83ef35042f55c29ef2e75f00d77025af6de58254be7b4
-  data.tar.gz: df3a565311c4a10df7603eaa776bf1a3e4ed3f2cea6dc6445b3702986887c900f13c0af272af4bb006bb9af921b8d0ec545b8f049b12dbb2078cd77d69eddb2d
+  metadata.gz: b23ab5d74fe3658980016cb8e7df4c1fe09a87601590b98b09dd43f3ece53c3d40f6cbc159aec035daec52525b8dbdbdf0da34ad8846061465ec9de05a270ae4
+  data.tar.gz: b70e3d18ec3aba0acd78fea6ee74efbec8201546253483abd00f1443e3411e37c9f98b065df6cf04f51ec3df28d9fa5e4ad90738781119f616c3c71db44f6130

data/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.8] - 2026-03-23
+
+### Added
+
+- **Dependent searchable select** field type (`:dependent_select`) — cascading dropdowns where a child field's options filter by the selected parent value. Uses `parent_field:` option and `[label, value, group]` collection triples.
+- **Stimulus entry point** (`admin_suite_application.js`) — automatically imports and registers all 12 AdminSuite Stimulus controllers on `window.Stimulus`.
+- `parent_field` attribute on `FieldDefinition` for linking dependent fields.
+
+### Fixed
+
+- **Stimulus controllers not loading** — engine controllers were pinned via importmap but never imported. Added explicit entry point in layout via `<script type="module">`.
+- **Searchable select change propagation** — `applyOption()` now dispatches a `change` event on the hidden input, enabling dependent field chaining.
+
+### Security
+
+- New `dependent_searchable_select_controller.js` uses safe DOM construction (`createElement`/`textContent`/`appendChild`) instead of `innerHTML` template literals.
+
 ## [0.2.6] - 2026-02-21
 
 ### Added

data/app/helpers/admin_suite/base_helper.rb

@@ -1117,6 +1117,62 @@ module AdminSuite
       end
     end
 
+    def render_dependent_searchable_select(_f, field, resource)
+      param_key = resource.class.model_name.param_key
+      current_value = resource.public_send(field.name)
+      collection = field.collection.is_a?(Proc) ? field.collection.call : field.collection
+
+      # Collection format: [[label, value, group], ...] — triples with group for filtering
+      all_options_json = if collection.is_a?(Array)
+        collection.map { |opt|
+          if opt.is_a?(Array) && opt.size >= 3
+            { value: opt[1], label: opt[0], group: opt[2] }
+          elsif opt.is_a?(Array)
+            { value: opt[1], label: opt[0] }
+          else
+            { value: opt, label: opt.to_s.humanize }
+          end
+        }.to_json
+      else
+        "[]"
+      end
+
+      parent_selector = if field.parent_field
+        "[name=\"#{param_key}[#{field.parent_field}]\"]"
+      else
+        ""
+      end
+
+      current_label = if current_value.present? && collection.is_a?(Array)
+        match = collection.find { |opt| opt.is_a?(Array) ? opt[1].to_s == current_value.to_s : opt.to_s == current_value.to_s }
+        match.is_a?(Array) ? match[0] : match.to_s
+      else
+        current_value
+      end
+
+      content_tag(:div,
+        data: {
+          controller: "admin-suite--dependent-searchable-select",
+          "admin-suite--dependent-searchable-select-all-options-value": all_options_json,
+          "admin-suite--dependent-searchable-select-parent-selector-value": parent_selector
+        },
+        class: "relative") do
+        concat(hidden_field_tag("#{param_key}[#{field.name}]", current_value,
+          data: { "admin-suite--dependent-searchable-select-target": "input" }))
+        concat(text_field_tag(nil, current_label,
+          class: "form-input w-full",
+          placeholder: field.placeholder || "Search...",
+          autocomplete: "off",
+          data: {
+            "admin-suite--dependent-searchable-select-target": "search",
+            action: "input->admin-suite--dependent-searchable-select#search focus->admin-suite--dependent-searchable-select#open keydown->admin-suite--dependent-searchable-select#keydown"
+          }))
+        concat(content_tag(:div, "",
+          class: "absolute z-40 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg shadow-lg hidden max-h-60 overflow-y-auto",
+          data: { "admin-suite--dependent-searchable-select-target": "dropdown" }))
+      end
+    end
+
     def render_multi_select(_f, field, resource)
       param_key = resource.class.model_name.param_key
       current_values =

data/app/javascript/admin_suite_application.js

@@ -0,0 +1,44 @@
+import { Application } from "@hotwired/stimulus"
+
+// Reuse the host app's Stimulus application if available, otherwise start a new one
+const application = window.Stimulus || Application.start()
+window.Stimulus ||= application
+
+import SearchableSelectController from "controllers/admin_suite/searchable_select_controller"
+application.register("admin-suite--searchable-select", SearchableSelectController)
+
+import ToggleSwitchController from "controllers/admin_suite/toggle_switch_controller"
+application.register("admin-suite--toggle-switch", ToggleSwitchController)
+
+import TagSelectController from "controllers/admin_suite/tag_select_controller"
+application.register("admin-suite--tag-select", TagSelectController)
+
+import FileUploadController from "controllers/admin_suite/file_upload_controller"
+application.register("admin-suite--file-upload", FileUploadController)
+
+import MarkdownEditorController from "controllers/admin_suite/markdown_editor_controller"
+application.register("admin-suite--markdown-editor", MarkdownEditorController)
+
+import JsonEditorController from "controllers/admin_suite/json_editor_controller"
+application.register("admin-suite--json-editor", JsonEditorController)
+
+import CodeEditorController from "controllers/admin_suite/code_editor_controller"
+application.register("admin-suite--code-editor", CodeEditorController)
+
+import LiveFilterController from "controllers/admin_suite/live_filter_controller"
+application.register("admin-suite--live-filter", LiveFilterController)
+
+import ClickActionsController from "controllers/admin_suite/click_actions_controller"
+application.register("admin-suite--click-actions", ClickActionsController)
+
+import ClipboardController from "controllers/admin_suite/clipboard_controller"
+application.register("admin-suite--clipboard", ClipboardController)
+
+import SidebarController from "controllers/admin_suite/sidebar_controller"
+application.register("admin-suite--sidebar", SidebarController)
+
+import FlashController from "controllers/admin_suite/flash_controller"
+application.register("admin-suite--flash", FlashController)
+
+import DependentSearchableSelectController from "controllers/admin_suite/dependent_searchable_select_controller"
+application.register("admin-suite--dependent-searchable-select", DependentSearchableSelectController)

data/app/javascript/controllers/admin_suite/dependent_searchable_select_controller.js

@@ -0,0 +1,228 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Dependent Searchable Select Controller (Admin Suite)
+ *
+ * Extends searchable-select behavior with parent-field filtering.
+ * Options are filtered by `group` matching the parent field's current value.
+ *
+ * Usage:
+ *   data-controller="admin-suite--dependent-searchable-select"
+ *   data-admin-suite--dependent-searchable-select-all-options-value="<%= options.to_json %>"
+ *   data-admin-suite--dependent-searchable-select-parent-selector-value="#parent_field_id"
+ *
+ * Each option in allOptions should have: { value, label, group }
+ * The `group` field is matched against the parent field's value.
+ */
+export default class extends Controller {
+  static targets = ["input", "search", "dropdown"]
+  static values = {
+    allOptions: { type: Array, default: [] },
+    parentSelector: { type: String, default: "" },
+  }
+
+  connect() {
+    this.isOpen = false
+    this.selectedIndex = -1
+    this.parentFilteredOptions = [...this.allOptionsValue]
+
+    this.clickOutside = this.clickOutside.bind(this)
+    document.addEventListener("click", this.clickOutside)
+
+    this.bindParent()
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.clickOutside)
+
+    if (this._parentField && this._onParentChange) {
+      this._parentField.removeEventListener("change", this._onParentChange)
+    }
+  }
+
+  bindParent() {
+    const selector = this.parentSelectorValue
+    if (!selector) return
+
+    this._parentField = document.querySelector(selector)
+    if (!this._parentField) return
+
+    this._onParentChange = this.onParentChange.bind(this)
+    this._parentField.addEventListener("change", this._onParentChange)
+
+    // Apply initial filter if parent already has a value
+    if (this._parentField.value) {
+      this.filterByParent(this._parentField.value)
+    }
+  }
+
+  onParentChange() {
+    const parentValue = this._parentField ? this._parentField.value : ""
+    this.filterByParent(parentValue)
+
+    // Clear current selection if it no longer belongs to the new parent group
+    const currentValue = this.inputTarget.value
+    if (currentValue) {
+      const stillValid = this.parentFilteredOptions.some(
+        (opt) => String(opt.value) === String(currentValue),
+      )
+      if (!stillValid) {
+        this.inputTarget.value = ""
+        this.searchTarget.value = ""
+        this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+      }
+    }
+
+    if (this.isOpen) {
+      this.renderDropdown()
+    }
+  }
+
+  filterByParent(parentValue) {
+    if (!parentValue) {
+      this.parentFilteredOptions = [...this.allOptionsValue]
+    } else {
+      this.parentFilteredOptions = this.allOptionsValue.filter(
+        (opt) => String(opt.group) === String(parentValue),
+      )
+    }
+  }
+
+  open() {
+    this.isOpen = true
+    this.filteredOptions = [...this.parentFilteredOptions]
+    this.renderDropdown()
+    this.dropdownTarget.classList.remove("hidden")
+  }
+
+  close() {
+    this.isOpen = false
+    this.dropdownTarget.classList.add("hidden")
+    this.selectedIndex = -1
+  }
+
+  clickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  search() {
+    const query = this.searchTarget.value.toLowerCase().trim()
+
+    if (query) {
+      this.filteredOptions = this.parentFilteredOptions.filter((opt) =>
+        opt.label.toLowerCase().includes(query),
+      )
+    } else {
+      this.filteredOptions = [...this.parentFilteredOptions]
+    }
+
+    this.renderDropdown()
+
+    if (!this.isOpen) this.open()
+  }
+
+  select(event) {
+    const btn = event.currentTarget
+    const value = btn.dataset.value
+    const label = btn.dataset.label
+
+    this.inputTarget.value = value
+    this.searchTarget.value = label
+    this.close()
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+
+  keydown(event) {
+    const opts = this.filteredOptions || this.parentFilteredOptions
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        if (!this.isOpen) {
+          this.filteredOptions = [...this.parentFilteredOptions]
+          this.open()
+          break
+        }
+        this.selectedIndex = Math.min(this.selectedIndex + 1, opts.length - 1)
+        this.renderDropdown()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.selectedIndex = Math.max(this.selectedIndex - 1, 0)
+        this.renderDropdown()
+        break
+      case "Enter":
+        event.preventDefault()
+        if (this.selectedIndex >= 0 && opts[this.selectedIndex]) {
+          const opt = opts[this.selectedIndex]
+          this.inputTarget.value = opt.value
+          this.searchTarget.value = opt.label
+          this.close()
+          this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+        }
+        break
+      case "Escape":
+        this.close()
+        break
+    }
+  }
+
+  renderDropdown() {
+    const opts = this.filteredOptions || this.parentFilteredOptions
+
+    // Clear existing content using safe DOM manipulation (avoids innerHTML XSS risk)
+    while (this.dropdownTarget.firstChild) {
+      this.dropdownTarget.removeChild(this.dropdownTarget.firstChild)
+    }
+
+    if (!opts.length) {
+      const empty = document.createElement("div")
+      empty.className = "px-3 py-2 text-sm text-slate-400"
+      empty.textContent = "No results found"
+      this.dropdownTarget.appendChild(empty)
+      return
+    }
+
+    opts.forEach((opt, index) => {
+      const btn = document.createElement("button")
+      btn.type = "button"
+      btn.className = [
+        "block w-full text-left px-3 py-2 text-sm hover:bg-slate-100",
+        index === this.selectedIndex ? "bg-slate-100" : "",
+        "text-slate-700",
+      ]
+        .filter(Boolean)
+        .join(" ")
+      btn.dataset.action =
+        "click->admin-suite--dependent-searchable-select#select"
+      btn.dataset.value = this.escapeAttr(String(opt.value))
+      btn.dataset.label = this.escapeAttr(String(opt.label))
+
+      // Label text node
+      btn.appendChild(document.createTextNode(opt.label))
+
+      // Optional group badge
+      if (opt.group) {
+        const badge = document.createElement("span")
+        badge.className =
+          "ml-2 text-xs text-slate-400 font-normal"
+        badge.textContent = opt.group
+        btn.appendChild(badge)
+      }
+
+      this.dropdownTarget.appendChild(btn)
+    })
+  }
+
+  // Escapes a string for use in HTML data attributes
+  escapeAttr(value) {
+    return String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+  }
+}

data/app/javascript/controllers/admin_suite/searchable_select_controller.js

@@ -195,6 +195,7 @@ export default class extends Controller {
     this.inputTarget.value = value
     this.searchTarget.value = label
     this.close()
+    this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
   }
 
   async createOption(label) {

data/app/views/layouts/admin_suite/application.html.erb

@@ -35,6 +35,7 @@
 
     <% if respond_to?(:javascript_importmap_tags) %>
       <%= javascript_importmap_tags %>
+      <%= javascript_import_module_tag "admin_suite_application" %>
     <% end %>
   </head>
 

data/config/importmap.rb

@@ -1 +1,2 @@
+pin "admin_suite_application", to: "admin_suite_application.js"
 pin_all_from File.expand_path("../app/javascript/controllers", __dir__), under: "controllers"

data/lib/admin/base/resource.rb

@@ -380,7 +380,8 @@ module Admin
             preview: options[:preview] != false,
             variants: options[:variants],
             label_color: options[:label_color],
-            label_size: options[:label_size]
+            label_size: options[:label_size],
+            parent_field: options[:parent_field]
           )
         end
 
@@ -406,7 +407,7 @@ module Admin
         :name, :type, :required, :label, :help, :placeholder,
         :collection, :create_url, :accept, :rows, :readonly,
         :if_condition, :unless_condition, :multiple, :creatable,
-        :preview, :variants, :label_color, :label_size,
+        :preview, :variants, :label_color, :label_size, :parent_field,
         keyword_init: true
       )
 

data/lib/admin_suite/ui/field_renderer_registry.rb

@@ -58,6 +58,10 @@ AdminSuite::UI::FieldRendererRegistry.register(:searchable_select) do |view, f,
   view.render_searchable_select(f, field, resource)
 end
 
+AdminSuite::UI::FieldRendererRegistry.register(:dependent_select) do |view, f, field, resource, _field_class|
+  view.render_dependent_searchable_select(f, field, resource)
+end
+
 AdminSuite::UI::FieldRendererRegistry.register(:multi_select) do |view, f, field, resource, _field_class|
   view.render_multi_select(f, field, resource)
 end

data/lib/admin_suite/version.rb

@@ -2,7 +2,7 @@
 
 module AdminSuite
   module Version
-    VERSION = "0.2.7"
+    VERSION = "0.2.8"
   end
 
   # Backward-compatible constant.

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: admin_suite
 version: !ruby/object:Gem::Version
-  version: 0.2.7
+  version: 0.2.8
 platform: ruby
 authors:
 - TechWright Labs
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-28 00:00:00.000000000 Z
+date: 2026-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -136,9 +136,11 @@ files:
 - app/helpers/admin_suite/panels_helper.rb
 - app/helpers/admin_suite/resources_helper.rb
 - app/helpers/admin_suite/theme_helper.rb
+- app/javascript/admin_suite_application.js
 - app/javascript/controllers/admin_suite/click_actions_controller.js
 - app/javascript/controllers/admin_suite/clipboard_controller.js
 - app/javascript/controllers/admin_suite/code_editor_controller.js
+- app/javascript/controllers/admin_suite/dependent_searchable_select_controller.js
 - app/javascript/controllers/admin_suite/file_upload_controller.js
 - app/javascript/controllers/admin_suite/flash_controller.js
 - app/javascript/controllers/admin_suite/json_editor_controller.js