plutonium 0.25.0 → 0.25.2

data/app/javascript/controllers/key_value_store_controller.js

@@ -0,0 +1,119 @@
+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.updateIndices()
+    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) {
+        // Update name attribute
+        keyInput.name = keyInput.name.replace(/\[\d+\]/, `[${index}]`)
+        // Update id attribute for Turbo compatibility
+        keyInput.id = keyInput.id.replace(/_\d+_/, `_${index}_`)
+      }
+      if (valueInput) {
+        // Update name attribute
+        valueInput.name = valueInput.name.replace(/\[\d+\]/, `[${index}]`)
+        // Update id attribute for Turbo compatibility
+        valueInput.id = valueInput.id.replace(/_\d+_/, `_${index}_`)
+      }
+    })
+  }
+
+  updatePairIndices(element, index) {
+    const inputs = element.querySelectorAll('input')
+    inputs.forEach(input => {
+      if (input.name) {
+        input.name = input.name.replace('__INDEX__', index)
+      }
+      if (input.id) {
+        input.id = input.id.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/lib/plutonium/helpers/turbo_stream_actions_helper.rb

@@ -1,7 +1,7 @@
 module Plutonium
   module Helpers
     module TurboStreamActionsHelper
-      def redirect(url)
+      def turbo_stream_redirect(url)
         turbo_stream_action_tag :redirect, url:
       end
     end

data/lib/plutonium/interaction/response/redirect.rb

@@ -12,7 +12,18 @@ module Plutonium
         # @param controller [ActionController::Base] The controller instance.
         # @return [void]
         def execute(controller)
-          controller.redirect_to(*@args, **@options)
+          controller.instance_eval do
+            url = url_for(*@args)
+
+            format.any { redirect_to(url, **@options) }
+            if helpers.current_turbo_frame == "remote_modal"
+              format.turbo_stream do
+                render turbo_stream: [
+                  helpers.turbo_stream_redirect(url)
+                ]
+              end
+            end
+          end
         end
       end
     end

data/lib/plutonium/resource/controllers/interactive_actions.rb

@@ -59,7 +59,7 @@ module Plutonium
                 if helpers.current_turbo_frame == "remote_modal"
                   format.turbo_stream do
                     render turbo_stream: [
-                      turbo_stream.redirect(return_url)
+                      helpers.turbo_stream_redirect(return_url)
                     ]
                   end
                 end
@@ -73,13 +73,6 @@ module Plutonium
                   render "errors", status: :unprocessable_entity
                 end
 
-                if helpers.current_turbo_frame == "remote_modal"
-                  format.turbo_stream do
-                    render turbo_stream: [
-                      turbo_stream.replace(:remote_modal, partial: "interactive_action_form")
-                    ]
-                  end
-                end
               end
             end
           end
@@ -123,7 +116,7 @@ module Plutonium
                 if helpers.current_turbo_frame == "remote_modal"
                   format.turbo_stream do
                     render turbo_stream: [
-                      turbo_stream.redirect(return_url)
+                      helpers.turbo_stream_redirect(return_url)
                     ]
                   end
                 end
@@ -137,13 +130,6 @@ module Plutonium
                   render "errors", status: :unprocessable_entity
                 end
 
-                if helpers.current_turbo_frame == "remote_modal"
-                  format.turbo_stream do
-                    render turbo_stream: [
-                      turbo_stream.replace(:remote_modal, partial: "interactive_action_form")
-                    ]
-                  end
-                end
               end
             end
           end
@@ -179,7 +165,7 @@ module Plutonium
           #     if helpers.current_turbo_frame == "remote_modal"
           #       format.turbo_stream do
           #         render turbo_stream: [
-          #           turbo_stream.redirect(resource_url_for(resource_class))
+          #           helpers.turbo_stream_redirect(resource_url_for(resource_class))
           #         ]
           #       end
           #     end
@@ -191,12 +177,6 @@ module Plutonium
           #       @errors = @interaction.errors
           #       render "errors", status: :unprocessable_entity
           #     end
-
-          #     if helpers.current_turbo_frame == "remote_modal"
-          #       format.turbo_stream do
-          #         render turbo_stream: turbo_stream.replace(:remote_modal, partial: "interactive_bulk_action_form")
-          #       end
-          #     end
           #   end
           # end
         end

data/lib/plutonium/ui/form/base.rb

@@ -35,6 +35,10 @@ module Plutonium
           alias_method :file_tag, :uppy_tag
           alias_method :attachment_tag, :uppy_tag
 
+          def key_value_store_tag(**, &)
+            create_component(Components::KeyValueStore, :key_value_store, **, &)
+          end
+
           def secure_association_tag(**attributes, &)
             attributes[:data_controller] = tokens(attributes[:data_controller], "slim-select") # TODO: put this behind a config
             create_component(Components::SecureAssociation, :association, **attributes, &)

data/lib/plutonium/ui/form/components/key_value_store.rb

@@ -0,0 +1,234 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Components
+        class KeyValueStore < Phlexi::Form::Components::Base
+          include Phlexi::Form::Components::Concerns::HandlesInput
+
+          DEFAULT_LIMIT = 10
+
+          def view_template
+            div(**container_attributes) do
+              render_key_value_pairs
+              render_add_button
+              render_template
+            end
+          end
+
+          protected
+
+          def build_attributes
+            super
+            attributes[:class] = [attributes[:class], "key-value-store"].compact.join(" ")
+            set_data_attributes
+          end
+
+          private
+
+          def container_attributes
+            {
+              id: attributes[:id],
+              class: attributes[:class],
+              data: {
+                controller: "key-value-store",
+                key_value_store_limit_value: limit
+              }
+            }
+          end
+
+          def set_data_attributes
+            attributes[:data] ||= {}
+            attributes[:data][:controller] = "key-value-store"
+            attributes[:data][:key_value_store_limit_value] = limit
+          end
+
+          def render_header
+            div(class: "key-value-store-header") do
+              if attributes[:label]
+                h3(class: "text-lg font-semibold text-gray-900 dark:text-white") do
+                  plain attributes[:label]
+                end
+              end
+              if attributes[:description]
+                p(class: "text-sm text-gray-500 dark:text-gray-400") do
+                  plain attributes[:description]
+                end
+              end
+            end
+          end
+
+          def render_key_value_pairs
+            div(class: "key-value-pairs space-y-2", data_key_value_store_target: "container") do
+              pairs.each_with_index do |(key, value), index|
+                render_key_value_pair(key, value, index)
+              end
+            end
+          end
+
+          def render_key_value_pair(key, value, index)
+            div(
+              class: "key-value-pair flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-700 rounded",
+              data_key_value_store_target: "pair"
+            ) do
+              # Key input
+              input(
+                type: :text,
+                placeholder: "Key",
+                value: key,
+                name: "#{field_name}[#{index}][key]",
+                id: "#{field.dom.id}_#{index}_key",
+                class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                data_key_value_store_target: "keyInput"
+              )
+
+              # Value input
+              input(
+                type: :text,
+                placeholder: "Value",
+                value: value,
+                name: "#{field_name}[#{index}][value]",
+                id: "#{field.dom.id}_#{index}_value",
+                class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                data_key_value_store_target: "valueInput"
+              )
+
+              # Remove button
+              button(
+                type: :button,
+                class: "px-2 py-1 text-red-600 hover:text-red-800 focus:outline-none",
+                data_action: "key-value-store#removePair"
+              ) do
+                plain "×"
+              end
+            end
+          end
+
+          def render_add_button
+            div(class: "key-value-store-actions mt-2") do
+              button(
+                type: :button,
+                id: "#{field.dom.id}_add_button",
+                class: "inline-flex items-center px-3 py-1 text-sm font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-700 dark:hover:bg-blue-800",
+                data: {
+                  action: "key-value-store#addPair",
+                  key_value_store_target: "addButton"
+                }
+              ) do
+                plain "+ Add Pair"
+              end
+            end
+          end
+
+          def render_template
+            template(data_key_value_store_target: "template") do
+              div(
+                class: "key-value-pair flex items-center gap-2 p-2 border border-gray-200 dark:border-gray-700 rounded",
+                data_key_value_store_target: "pair"
+              ) do
+                input(
+                  type: :text,
+                  placeholder: "Key",
+                  name: "#{field_name}[__INDEX__][key]",
+                  id: "#{field.dom.id}___INDEX___key",
+                  class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                  data_key_value_store_target: "keyInput"
+                )
+
+                input(
+                  type: :text,
+                  placeholder: "Value",
+                  name: "#{field_name}[__INDEX__][value]",
+                  id: "#{field.dom.id}___INDEX___value",
+                  class: "flex-1 px-3 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white",
+                  data_key_value_store_target: "valueInput"
+                )
+
+                button(
+                  type: :button,
+                  class: "px-2 py-1 text-red-600 hover:text-red-800 focus:outline-none",
+                  data_action: "key-value-store#removePair"
+                ) do
+                  plain "×"
+                end
+              end
+            end
+          end
+
+          def pairs
+            @pairs ||= normalize_value_to_pairs(field.value)
+          end
+
+          def normalize_value_to_pairs(value)
+            case value
+            when Hash
+              # Convert hash to array of [key, value] pairs
+              value.to_a
+            when String
+              parse_json_string(value)
+            else
+              []
+            end
+          end
+
+          def parse_json_string(value)
+            return [] if value.blank?
+
+            begin
+              parsed = JSON.parse(value)
+              case parsed
+              when Hash
+                parsed.to_a
+              else
+                []
+              end
+            rescue JSON::ParserError
+              []
+            end
+          end
+
+          def field_name
+            field.dom.name
+          end
+
+          def limit
+            attributes.fetch(:limit, DEFAULT_LIMIT)
+          end
+
+          # Override from ExtractsInput concern to normalize form parameters
+          def normalize_input(input_value)
+            case input_value
+            when Hash
+              if input_value.keys.all? { |k| k.to_s.match?(/^\d+$/) }
+                # Handle indexed form params: {"0" => {"key" => "foo", "value" => "bar"}}
+                process_indexed_params(input_value)
+              else
+                # Handle direct hash params
+                input_value.reject { |k, v| k.blank? || (v.blank? && v != false) }
+              end
+            when nil
+              {}
+            end
+          end
+
+          private
+
+          # Process indexed form parameters into a hash
+          def process_indexed_params(params)
+            params.values.each_with_object({}) do |pair, hash|
+              next unless pair.is_a?(Hash)
+
+              key = pair["key"] || pair[:key]
+              value = pair["value"] || pair[:value]
+
+              if key.present?
+                hash[key] = value
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -20,14 +20,16 @@ module Plutonium
           if helpers.current_turbo_frame == "remote_modal"
             dialog(
               closedby: "any",
-              class:
-                "rounded-md w-full max-w-3xl
-                backdrop:bg-black/60 backdrop:backdrop-blur-sm
-                top-auto md:top-1/2 md:-translate-y-1/2 left-1/2 -translate-x-1/2
-                max-h-[80%] p-6
-                hidden open:flex flex-col
-                relative opacity-0 open:opacity-100
-                transition-opacity duration-300 ease-in-out",
+              class: "rounded-md w-full max-w-3xl
+                      bg-white dark:bg-gray-800
+                      border border-gray-200 dark:border-gray-700
+                      shadow-lg dark:shadow-gray-900/20
+                      backdrop:bg-black/60 backdrop:backdrop-blur-sm
+                      top-auto md:top-1/2 md:-translate-y-1/2 left-1/2 -translate-x-1/2
+                      max-h-[80%] p-6
+                      hidden open:flex flex-col
+                      relative opacity-0 open:opacity-100
+                      transition-opacity duration-300 ease-in-out",
               data: {controller: "remote-modal"}
             ) do
               render_page_header

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.25.0"
+  VERSION = "0.25.2"
   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.3",
+  "version": "0.4.4",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",

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/plutonium.js

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

data/src/js/turbo/index.js

@@ -1,5 +1,3 @@
-import * as Turbo from "@hotwired/turbo"
-
-import "./turbo_debug"
-// import "./turbo_actions"
+import "./turbo_actions"
+// import "./turbo_debug"
 // import "./turbo_frame_monkey_patch"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.25.0
+  version: 0.25.2
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-07-01 00:00:00.000000000 Z
+date: 2025-07-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -418,6 +418,7 @@ files:
 - app/assets/plutonium.min.js
 - app/assets/plutonium.min.js.map
 - app/assets/plutonium.png
+- app/javascript/controllers/key_value_store_controller.js
 - app/views/layouts/resource.html.erb
 - app/views/layouts/rodauth.html.erb
 - app/views/plutonium/_flash.html.erb
@@ -839,6 +840,7 @@ files:
 - lib/plutonium/ui/form/components/easymde.rb
 - lib/plutonium/ui/form/components/flatpickr.rb
 - lib/plutonium/ui/form/components/intl_tel_input.rb
+- lib/plutonium/ui/form/components/key_value_store.rb
 - lib/plutonium/ui/form/components/secure_association.rb
 - lib/plutonium/ui/form/components/secure_polymorphic_association.rb
 - lib/plutonium/ui/form/components/uppy.rb
@@ -908,6 +910,7 @@ files:
 - src/js/controllers/form_controller.js
 - src/js/controllers/frame_navigator_controller.js
 - src/js/controllers/intl_tel_input_controller.js
+- src/js/controllers/key_value_store_controller.js
 - src/js/controllers/nested_resource_form_fields_controller.js
 - src/js/controllers/password_visibility_controller.js
 - src/js/controllers/register_controllers.js