feat: step input for room type selection

2025-11-25 16:42:39 +01:00
parent c1364a458b
commit 126fce9687
6 changed files with 104 additions and 18 deletions
@@ -0,0 +1,44 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static targets = ['field', 'display', 'buttonInc', 'buttonDec']
+
+    static values = {
+        current: Number,
+        min: Number,
+        max: Number
+    }
+
+    connect() {
+        this.currentValue = parseInt(this.fieldTarget.value) || 0
+        this.updateForm()
+    }
+
+    increase() {
+        if (null !== this.maxValue && this.currentValue >= this.maxValue) {
+            return
+        }
+        this.currentValue = this.currentValue + 1
+        this.updateForm()
+    }
+
+    decrease() {
+        if (null !== this.minValue && this.currentValue <= this.minValue) {
+            return
+        }
+        this.currentValue = this.currentValue - 1
+        this.updateForm()
+    }
+
+    updateForm() {
+        this.displayTarget.innerText = this.currentValue
+        this.fieldTarget.value = this.currentValue
+
+        this.buttonIncTarget.disabled = null !== this.maxValue && this.currentValue >= this.maxValue
+        this.buttonDecTarget.disabled = null !== this.minValue && this.currentValue <= this.minValue
+
+        // Trigger change event to fire HTMX request
+        this.fieldTarget.dispatchEvent(new Event('change', {bubbles: true}))
+    }
+}