Jorge Manrubia
57 lines
1.4 KiB
JavaScript
57 lines
1.4 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
#hiddenField
|
|
|
|
static targets = [ "label", "item", "hiddenFieldTemplate" ]
|
|
static values = {
|
|
selectPropertyName: { type: String, default: "aria-checked" },
|
|
defaultValue: String
|
|
}
|
|
|
|
connect() {
|
|
this.labelTarget.textContent = this.#selectedLabel
|
|
}
|
|
|
|
change(event) {
|
|
const item = event.target.closest("[role='checkbox']")
|
|
if (item) {
|
|
this.#selectedItem = item
|
|
}
|
|
}
|
|
|
|
get #selectedLabel() {
|
|
return this.#selectedItem?.dataset?.comboboxLabel || ""
|
|
}
|
|
|
|
get #selectedItem() {
|
|
return this.itemTargets.find(item => item.getAttribute(this.selectPropertyNameValue) === "true")
|
|
}
|
|
|
|
set #selectedItem(item) {
|
|
this.#clearSelection()
|
|
item.setAttribute(this.selectPropertyNameValue, "true")
|
|
this.labelTarget.textContent = this.#selectedLabel
|
|
this.hiddenField.value = item.dataset.comboboxValue
|
|
}
|
|
|
|
#clearSelection() {
|
|
this.itemTargets.forEach(target => {
|
|
target.setAttribute(this.selectPropertyNameValue, "false")
|
|
})
|
|
}
|
|
|
|
get hiddenField() {
|
|
if (!this.#hiddenField) {
|
|
this.#hiddenField = this.#buildHiddenField()
|
|
}
|
|
return this.#hiddenField
|
|
}
|
|
|
|
#buildHiddenField() {
|
|
const [field] = this.hiddenFieldTemplateTarget.content.cloneNode(true).children
|
|
this.element.appendChild(field)
|
|
return field
|
|
}
|
|
}
|