@vpaulo/vp-accordion
Version:
Accordion component
2 lines (1 loc) • 2.67 kB
JavaScript
class e extends HTMLElement{constructor(){super(),this._multiple=!1,this._shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["multiple"]}set multiple(e){this._multiple=""===e}get multiple(){return this._multiple}onChange(e){this.multiple||this.panels.forEach((t=>{t!==e.target&&e.detail.isOpen&&t.removeAttribute("open")}))}attributeChangedCallback(e,t,n){"multiple"===e&&(this.multiple=n)}connectedCallback(){this._shadow.innerHTML=this.render(),this.addEventListener("vp-panel:change",this.onChange),customElements.whenDefined("vp-panel").then((()=>{[...this.panels]=this.querySelectorAll("vp-panel")}))}disconnectedCallback(){this.removeEventListener("vp-panel:change",this.onChange)}render(){return"<slot></slot>"}}const t=e.prototype.connectedCallback,n=e.prototype.render;Object.assign(e.prototype,{connectedCallback:function(){t&&t.call(this)},render:function(){if(n)return this.getStyles()+n.call(this)},getStyles:function(){return'<style>.vp-accordion{list-style-type:none;margin:0;padding:0;overflow:hidden}.vp-accordion>:nth-child(n+2){margin-top:20px}.vp-accordion__tab{overflow:hidden;width:100%}.vp-accordion__label{display:flex;justify-content:space-between;cursor:pointer;font-size:20px;line-height:1.4;color:#222}.vp-accordion__label:hover{color:#666}.vp-accordion__label::after{content:"";width:1.4em;height:1.4em;text-align:center;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:50% 50%}.vp-accordion__content{max-height:0;padding:0 1em;transition:all .2s;font-size:15px;font-weight:normal;line-height:1.5;color:#666}.vp-accordion__input{position:absolute;opacity:0;z-index:-1}.vp-accordion__input:checked+.vp-accordion__label::after{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%3C%2Fsvg%3E")}.vp-accordion__input:checked~.vp-accordion__content{max-height:100vh;margin-top:20px}</style>'}}),window.customElements.get("vp-accordion")||(window.AccordionElement=e,window.customElements.define("vp-accordion",e));