plutonium 0.25.1 → 0.26.0

data/lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb

@@ -91,12 +91,18 @@ module Plutonium
           # @param [Symbol] name The name of the nested resource field
           # @raise [ArgumentError] if the nested input definition is missing required configuration
           def render_nested_resource_field(name)
+            nested_input_definition = resource_definition.defined_nested_inputs[name]
+            condition = nested_input_definition[:options]&.fetch(:condition, nil)
+            if condition && !instance_exec(&condition)
+              return
+            end
+
             context = NestedFieldContext.new(
               name: name,
               definition: build_nested_fields_definition(name),
               resource_class: resource_class,
               resource_definition: resource_definition,
-              object_class: resource_definition.defined_nested_inputs[name][:options]&.fetch(:object_class, nil)
+              object_class: nested_input_definition[:options]&.fetch(:object_class, nil)
             )
 
             render_nested_field_container(context) do
@@ -171,7 +177,7 @@ module Plutonium
           end
 
           def render_template_for_nested_fields(context, options, nesting_method:)
-            template_tag data_nested_resource_form_fields_target: "template" do
+            template data_nested_resource_form_fields_target: "template" do
               send(nesting_method, context.name, as: context.nested_fields_input_param, **options, template: true) do |nested|
                 render_nested_fields_fieldset(nested, context)
               end

data/lib/plutonium/ui/page/interactive_action.rb

@@ -32,6 +32,29 @@ module Plutonium
                       transition-opacity duration-300 ease-in-out",
               data: {controller: "remote-modal"}
             ) do
+              # Close button
+              button(
+                type: "button",
+                class: "absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200",
+                data: {action: "remote-modal#close"},
+                "aria-label": "Close dialog"
+              ) do
+                svg(
+                  class: "w-5 h-5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  viewBox: "0 0 24 24",
+                  xmlns: "http://www.w3.org/2000/svg"
+                ) do |s|
+                  s.path(
+                    stroke_linecap: "round",
+                    stroke_linejoin: "round",
+                    stroke_width: "2",
+                    d: "M6 18L18 6M6 6l12 12"
+                  )
+                end
+              end
+
               render_page_header
               render partial("interactive_action_form")
             end

data/lib/plutonium/ui/table/resource.rb

@@ -60,7 +60,7 @@ module Plutonium
               column_options = column_definition[:options] || {}
 
               # Check for conditional rendering
-              condition = column_options[:condition] || display_options[:condition] || field_options[:condition]
+              condition = column_options[:condition]
               conditionally_hidden = condition && !instance_exec(&condition)
               next if conditionally_hidden
 

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.25.1"
+  VERSION = "0.26.0"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.4.4",
+  "version": "0.4.8",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",

data/src/css/slim_select.css

@@ -309,3 +309,40 @@
 .ss-main.ss-valid .ss-values .ss-placeholder {
   @apply text-green-700 dark:text-green-500;
 }
+
+/* Modal-specific styles for SlimSelect dropdown */
+.ss-dropdown-container {
+  position: absolute;
+  z-index: 9999;
+  inset: 40% 0px auto;
+}
+
+.ss-dropdown-container .ss-content {
+  position: static !important;
+  transform: none !important;
+  width: 100% !important;
+  border-radius: 0 !important;
+  margin: 0 !important;
+  pointer-events: none !important; /* Disabled by default */
+}
+
+/* When active (dropdown is expanded), enable pointer events */
+.ss-dropdown-container.ss-active .ss-content {
+  pointer-events: auto !important;
+}
+
+.ss-dropdown-container .ss-list {
+  max-height: 250px !important;
+  overflow-y: auto !important;
+}
+
+/* Ensure the dropdown doesn't block other elements when closed */
+.ss-dropdown-container:not(:has(.ss-content)),
+.ss-dropdown-container:not(.ss-active) {
+  pointer-events: none !important;
+}
+
+/* Prevent interaction with closed dropdown */
+.ss-dropdown-container:not(.ss-active) * {
+  pointer-events: none !important;
+}

data/src/js/controllers/key_value_store_controller.js

@@ -0,0 +1,109 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="key-value-store"
+export default class extends Controller {
+  static targets = ["container", "pair", "template", "addButton", "keyInput", "valueInput"]
+  static values = { limit: Number }
+
+  connect() {
+    this.updateIndices()
+    this.updateAddButtonState()
+  }
+
+  addPair(event) {
+    event.preventDefault()
+
+    if (this.pairTargets.length >= this.limitValue) {
+      return
+    }
+
+    const template = this.templateTarget
+    const newPair = template.content.cloneNode(true)
+    const index = this.pairTargets.length
+
+    // Update the template placeholders with actual indices
+    this.updatePairIndices(newPair, index)
+
+    this.containerTarget.appendChild(newPair)
+    this.updateAddButtonState()
+
+    // Focus on the key input of the new pair
+    const newKeyInput = this.containerTarget.lastElementChild.querySelector('[data-key-value-store-target="keyInput"]')
+    if (newKeyInput) {
+      newKeyInput.focus()
+    }
+  }
+
+  removePair(event) {
+    event.preventDefault()
+
+    const pair = event.target.closest('[data-key-value-store-target="pair"]')
+    if (pair) {
+      pair.remove()
+      this.updateIndices()
+      this.updateAddButtonState()
+    }
+  }
+
+  updateIndices() {
+    this.pairTargets.forEach((pair, index) => {
+      const keyInput = pair.querySelector('[data-key-value-store-target="keyInput"]')
+      const valueInput = pair.querySelector('[data-key-value-store-target="valueInput"]')
+
+      if (keyInput) {
+        keyInput.name = keyInput.name.replace(/\[\d+\]/, `[${index}]`)
+      }
+      if (valueInput) {
+        valueInput.name = valueInput.name.replace(/\[\d+\]/, `[${index}]`)
+      }
+    })
+  }
+
+  updatePairIndices(element, index) {
+    const inputs = element.querySelectorAll('input')
+    inputs.forEach(input => {
+      if (input.name) {
+        input.name = input.name.replace('__INDEX__', index)
+      }
+    })
+  }
+
+  updateAddButtonState() {
+    const addButton = this.addButtonTarget
+    if (this.pairTargets.length >= this.limitValue) {
+      addButton.disabled = true
+      addButton.classList.add('opacity-50', 'cursor-not-allowed')
+    } else {
+      addButton.disabled = false
+      addButton.classList.remove('opacity-50', 'cursor-not-allowed')
+    }
+  }
+
+  // Serialize the current key-value pairs to JSON
+  toJSON() {
+    const pairs = {}
+    this.pairTargets.forEach(pair => {
+      const keyInput = pair.querySelector('[data-key-value-store-target="keyInput"]')
+      const valueInput = pair.querySelector('[data-key-value-store-target="valueInput"]')
+
+      if (keyInput && valueInput && keyInput.value.trim()) {
+        pairs[keyInput.value.trim()] = valueInput.value
+      }
+    })
+    return JSON.stringify(pairs)
+  }
+
+  // Get the current key-value pairs as an object
+  toObject() {
+    const pairs = {}
+    this.pairTargets.forEach(pair => {
+      const keyInput = pair.querySelector('[data-key-value-store-target="keyInput"]')
+      const valueInput = pair.querySelector('[data-key-value-store-target="valueInput"]')
+
+      if (keyInput && valueInput && keyInput.value.trim()) {
+        pairs[keyInput.value.trim()] = valueInput.value
+      }
+    })
+    return pairs
+  }
+}

data/src/js/controllers/register_controllers.js

@@ -19,6 +19,7 @@ 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"
 
 export default function (application) {
   // Register controllers here
@@ -42,4 +43,5 @@ export default function (application) {
   application.register("attachment-preview", AttachmentPreviewController)
   application.register("attachment-preview-container", AttachmentPreviewContainerController)
   application.register("remote-modal", RemoteModalController)
+  application.register("key-value-store", KeyValueStoreController)
 }

data/src/js/controllers/remote_modal_controller.js

@@ -2,23 +2,30 @@ import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="remote-modal"
 export default class extends Controller {
-    connect() {
-        // Store original scroll position
-        this.originalScrollPosition = window.scrollY;
+  connect() {
+    // Store original scroll position
+    this.originalScrollPosition = window.scrollY;
 
-        // Show the modal
-        this.element.showModal();
-        // Add close event listener
-        this.element.addEventListener('close', this.handleClose.bind(this));
-    }
+    // Show the modal
+    this.element.showModal();
+    // Add close event listener
+    this.element.addEventListener("close", this.handleClose.bind(this));
+  }
 
-    disconnect() {
-        // Clean up event listener when controller is disconnected
-        this.element.removeEventListener('close', this.handleClose);
-    }
+  close() {
+    // Close the modal
+    this.element.close();
+    // Restore the original scroll position
+    window.scrollTo(0, this.originalScrollPosition);
+  }
 
-    handleClose() {
-        // Restore the original scroll position after dialog closes
-        window.scrollTo(0, this.originalScrollPosition);
-    }
-}
+  disconnect() {
+    // Clean up event listener when controller is disconnected
+    this.element.removeEventListener("close", this.handleClose);
+  }
+
+  handleClose() {
+    // Restore the original scroll position after dialog closes
+    window.scrollTo(0, this.originalScrollPosition);
+  }
+}

data/src/js/controllers/slim_select_controller.js

@@ -1,25 +1,218 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="slim-select"
 export default class extends Controller {
   connect() {
+    const settings = {};
+    const modal = document.querySelector('[data-controller="remote-modal"]');
+
+    if (modal) {
+      // Create a dedicated container div right after the select element
+      this.dropdownContainer = document.createElement("div");
+      this.dropdownContainer.className = "ss-dropdown-container";
+
+      // Make the select wrapper position relative to contain the absolute dropdown
+      const selectWrapper = this.element.parentNode;
+      const originalPosition = getComputedStyle(selectWrapper).position;
+      if (originalPosition === "static") {
+        selectWrapper.style.position = "relative";
+        this.modifiedSelectWrapper = selectWrapper;
+      }
+
+      // Insert the container right after the select element
+      this.element.parentNode.insertBefore(
+        this.dropdownContainer,
+        this.element.nextSibling
+      );
+
+      settings.contentLocation = this.dropdownContainer;
+      settings.contentPosition = "absolute";
+      settings.openPosition = "auto";
+    }
+
     this.slimSelect = new SlimSelect({
-      select: this.element
-    })
-    this.element.setAttribute("data-action", "turbo:morph-element->slim-select#reconnect")
+      select: this.element,
+      settings: settings,
+    });
+
+    // Add event listeners for better positioning
+    this.handleDropdownPosition();
+
+    // Bind event handlers for proper cleanup
+    this.boundHandleDropdownOpen = this.handleDropdownOpen.bind(this);
+    this.boundHandleDropdownClose = this.handleDropdownClose.bind(this);
+
+    // Add event listeners to properly handle dropdown visibility
+    this.element.addEventListener("ss:open", this.boundHandleDropdownOpen);
+    this.element.addEventListener("ss:close", this.boundHandleDropdownClose);
+
+    // Add mutation observer to track aria-expanded attribute
+    this.setupAriaObserver();
+
+    this.element.setAttribute(
+      "data-action",
+      "turbo:morph-element->slim-select#reconnect"
+    );
+  }
+
+  handleDropdownPosition() {
+    if (this.dropdownContainer) {
+      // Reposition dropdown when window resizes or scrolls
+      const repositionDropdown = () => {
+        const selectRect = this.element.getBoundingClientRect();
+
+        // Calculate if there's enough space below
+        const spaceBelow = window.innerHeight - selectRect.bottom;
+        const spaceAbove = selectRect.top;
+
+        if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+          // Position above if not enough space below
+          this.dropdownContainer.style.top = "auto";
+          this.dropdownContainer.style.bottom = "100%";
+          this.dropdownContainer.style.borderRadius = "0.375rem 0.375rem 0 0";
+        } else {
+          // Position below (default)
+          this.dropdownContainer.style.bottom = "auto";
+          this.dropdownContainer.style.borderRadius = "0 0 0.375rem 0.375rem";
+        }
+      };
+
+      // Initial positioning
+      setTimeout(repositionDropdown, 0);
+
+      // Reposition on events
+      window.addEventListener("resize", repositionDropdown);
+      window.addEventListener("scroll", repositionDropdown);
+
+      // Store references for cleanup
+      this.repositionDropdown = repositionDropdown;
+    }
+  }
+
+  handleDropdownOpen() {
+    if (this.dropdownContainer) {
+      // When dropdown opens, ensure our container is properly sized
+      this.dropdownContainer.style.height = "auto";
+      this.dropdownContainer.style.overflow = "visible";
+
+      // Add open class for better CSS targeting
+      this.dropdownContainer.classList.add("ss-active");
+
+      // Ensure this dropdown appears above others
+      const allContainers = document.querySelectorAll(".ss-dropdown-container");
+      allContainers.forEach((container) => {
+        if (container !== this.dropdownContainer) {
+          container.style.zIndex = "9999";
+        }
+      });
+      this.dropdownContainer.style.zIndex = "10000";
+    }
+  }
+
+  handleDropdownClose() {
+    if (this.dropdownContainer) {
+      // Remove active class
+      this.dropdownContainer.classList.remove("ss-active");
+    }
+  }
+
+  setupAriaObserver() {
+    // Track aria-expanded attribute on the select element or its wrapper
+    if (this.element) {
+      this.ariaObserver = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.attributeName === "aria-expanded") {
+            const expanded =
+              mutation.target.getAttribute("aria-expanded") === "true";
+            if (expanded) {
+              this.handleDropdownOpen();
+            } else {
+              this.handleDropdownClose();
+            }
+          }
+        });
+      });
+
+      // Look for the actual element that gets the aria-expanded attribute
+      const possibleTargets = [
+        this.element,
+        this.element.parentNode.querySelector(".ss-main"),
+        this.element.parentNode.querySelector("[aria-expanded]"),
+      ];
+
+      const target = possibleTargets.find(
+        (el) => el && el.hasAttribute && el.hasAttribute("aria-expanded")
+      );
+
+      if (target) {
+        this.ariaObserver.observe(target, {
+          attributes: true,
+          attributeFilter: ["aria-expanded"],
+        });
+
+        // Check initial state
+        const expanded = target.getAttribute("aria-expanded") === "true";
+        if (expanded) {
+          this.handleDropdownOpen();
+        } else {
+          this.handleDropdownClose();
+        }
+      }
+    }
   }
 
   disconnect() {
+    // Clean up event listeners
+    if (this.element) {
+      if (this.boundHandleDropdownOpen) {
+        this.element.removeEventListener(
+          "ss:open",
+          this.boundHandleDropdownOpen
+        );
+      }
+      if (this.boundHandleDropdownClose) {
+        this.element.removeEventListener(
+          "ss:close",
+          this.boundHandleDropdownClose
+        );
+      }
+    }
+
+    // Disconnect observer
+    if (this.ariaObserver) {
+      this.ariaObserver.disconnect();
+      this.ariaObserver = null;
+    }
+
     if (this.slimSelect) {
-      this.slimSelect.destroy()
-      this.slimSelect = null
+      this.slimSelect.destroy();
+      this.slimSelect = null;
+    }
+
+    // Clean up event listeners
+    if (this.repositionDropdown) {
+      window.removeEventListener("resize", this.repositionDropdown);
+      window.removeEventListener("scroll", this.repositionDropdown);
+      this.repositionDropdown = null;
+    }
+
+    // Clean up the dropdown container if it exists
+    if (this.dropdownContainer && this.dropdownContainer.parentNode) {
+      this.dropdownContainer.parentNode.removeChild(this.dropdownContainer);
+      this.dropdownContainer = null;
+    }
+
+    // Restore original positioning if we modified it
+    if (this.modifiedSelectWrapper) {
+      this.modifiedSelectWrapper.style.position = "";
+      this.modifiedSelectWrapper = null;
     }
   }
 
   reconnect() {
-    this.disconnect()
+    this.disconnect();
     // dispatch this on the next frame.
     // there's some funny issue where my elements get removed from the DOM
-    setTimeout(() => this.connect(), 10)
+    setTimeout(() => this.connect(), 10);
   }
 }

data/src/js/core.js

@@ -1,3 +1,4 @@
 import registerControllers from "./controllers/register_controllers.js"
-
 export { registerControllers }
+
+import "./turbo"

data/src/js/plutonium.js

@@ -1,7 +1,7 @@
+import "@hotwired/turbo"
+
 import { Application } from "@hotwired/stimulus"
 const application = Application.start()
 
 import { registerControllers } from "./core"
 registerControllers(application)
-
-import "./turbo"