45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
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}))
|
|
}
|
|
}
|