@radioactive-labs/plutonium 0.35.1 → 0.37.0

package/src/js/controllers/register_controllers.js

@@ -22,6 +22,7 @@ import RemoteModalController from "./remote_modal_controller.js"
 import KeyValueStoreController from "./key_value_store_controller.js"
 import BulkActionsController from "./bulk_actions_controller.js"
 import FilterPanelController from "./filter_panel_controller.js"
+import TextareaAutogrowController from "./textarea_autogrow_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -48,4 +49,5 @@ export default function (application) {
   application.register("key-value-store", KeyValueStoreController)
   application.register("bulk-actions", BulkActionsController)
   application.register("filter-panel", FilterPanelController)
+  application.register("textarea-autogrow", TextareaAutogrowController)
 }

package/src/js/controllers/textarea_autogrow_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    maxHeight: { type: Number, default: 0 } // 0 means use CSS max-height or 50vh
+  }
+
+  connect() {
+    this.resize()
+    this.element.addEventListener("input", this.resize)
+    window.addEventListener("resize", this.resize)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("input", this.resize)
+    window.removeEventListener("resize", this.resize)
+  }
+
+  resize = () => {
+    const element = this.element
+    const maxHeight = this.#getMaxHeight()
+
+    // Reset to auto to get the natural scroll height
+    element.style.height = "auto"
+    element.style.overflow = "hidden"
+
+    const scrollHeight = element.scrollHeight
+
+    if (maxHeight > 0 && scrollHeight > maxHeight) {
+      element.style.height = `${maxHeight}px`
+      element.style.overflow = "auto"
+    } else {
+      element.style.height = `${scrollHeight}px`
+    }
+  }
+
+  #getMaxHeight() {
+    if (this.maxHeightValue > 0) {
+      return this.maxHeightValue
+    }
+
+    // Check for CSS max-height
+    const computedStyle = window.getComputedStyle(this.element)
+    const cssMaxHeight = computedStyle.maxHeight
+
+    if (cssMaxHeight && cssMaxHeight !== "none") {
+      const parsed = parseFloat(cssMaxHeight)
+      if (!isNaN(parsed) && parsed > 0) {
+        return parsed
+      }
+    }
+
+    // Default to 300px
+    return 300
+  }
+}