@radioactive-labs/plutonium 0.4.4 → 0.4.6

package/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
+  }
+}

package/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)
 }

package/src/js/core.js

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