diff --git a/components.js b/components.js index 1ea5b9c..30b36e9 100644 --- a/components.js +++ b/components.js @@ -1725,6 +1725,17 @@ customElements.define('strip-select', class extends HTMLElement{ behavior: 'smooth' }) } + fireEvent = () => { + this.dispatchEvent( + new CustomEvent("change", { + bubbles: true, + composed: true, + detail: { + value: this._value + } + }) + ) + } connectedCallback() { const slot = this.shadowRoot.querySelector('slot') const coverLeft = this.shadowRoot.querySelector('.cover--left') @@ -1749,12 +1760,13 @@ customElements.define('strip-select', class extends HTMLElement{ coverRight.classList.add('hide') } }) - this.stripSelect.addEventListener('change', e => { + this.stripSelect.addEventListener('option-clicked', e => { if (this._value !== e.target.value) { this._value = e.target.value slot.assignedElements().forEach(elem => elem.removeAttribute('active')) e.target.setAttribute('active', '') - e.target.scrollIntoView({behavior: "smooth", block: "nearest", inline: "center"}) + e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }) + this.fireEvent() } }) const firstOptionObserver = new IntersectionObserver(entries => { @@ -1818,12 +1830,14 @@ stripOption.innerHTML = ` border-radius: var(--border-radius); padding: 0.5rem 0.8rem; -webkit-tap-highlight-color: transparent; - } :host([active]) .strip-option{ color: var(--active-option-color); background-color: var(--active-option-backgroud-color); } + :host(:hover:not([active])) .strip-option{ + background-color: rgba(var(--text-color), 0.06); + }