39 lines
1016 B
JavaScript
39 lines
1016 B
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
static targets = [ "label", "item" ]
|
|
static values = { selectPropertyName: { type: String, default: "aria-checked" } }
|
|
|
|
connect() {
|
|
this.labelTarget.textContent = this.#selectedLabel
|
|
}
|
|
|
|
change(event) {
|
|
const item = event.target.closest("[role='checkbox']")
|
|
if (item) {
|
|
this.#selectedItem = item
|
|
}
|
|
}
|
|
|
|
get #selectedLabel() {
|
|
const label = this.#selectedItem.querySelector("[data-combobox-label]")
|
|
return label.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
|
|
}
|
|
|
|
#clearSelection() {
|
|
this.itemTargets.forEach(target => {
|
|
target.setAttribute(this.selectPropertyNameValue, "false")
|
|
})
|
|
}
|
|
}
|