32 lines
884 B
JavaScript
32 lines
884 B
JavaScript
SearchableDropdown = {
|
|
mounted() {
|
|
this.el.addEventListener("input", (e) => {
|
|
const query = e.target.value.toLowerCase();
|
|
const dropdownId = this.el.dataset.dropdownId;
|
|
const optionsContainer = document.querySelector(`#${dropdownId}-options`);
|
|
const options = optionsContainer.querySelectorAll("li button");
|
|
|
|
options.forEach((option) => {
|
|
const text = option.textContent.toLowerCase();
|
|
option.parentElement.style.display = text.includes(query)
|
|
? "block"
|
|
: "none";
|
|
});
|
|
});
|
|
},
|
|
};
|
|
|
|
const DropdownAnimation = {
|
|
mounted() {
|
|
this.el.addEventListener("transitionend", (e) => {
|
|
if (
|
|
e.propertyName === "opacity" &&
|
|
this.el.classList.contains("fade-out")
|
|
) {
|
|
this.el.classList.add("hidden");
|
|
}
|
|
});
|
|
},
|
|
};
|
|
|
|
export { SearchableDropdown, DropdownAnimation };
|