@flexilla/alpine-tabs/dist/cdn.min.js

AlpineJS plugin for creating collapsible components

(()=>{var M=Object.defineProperty,D=(e,t,a)=>t in e?M(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,s=(e,t,a)=>D(e,typeof t!="symbol"?t+"":t,a),p=(e,t=document.body)=>t.querySelector(e),b=(e,t=document.body)=>{let a=T(e,t);return Array.from(a).find(n=>n.parentElement===t)},T=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),$=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let a=t.parentElement;if(a)a.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},E=(e,t)=>{for(let[a,n]of Object.entries(t))e.setAttribute(a,n)},I=(e,t,a)=>{let n=new CustomEvent(t,{detail:a});e.dispatchEvent(n)},O=({container:e,attributeToWatch:t,onChildAdded:a})=>{let n=new MutationObserver(r=>{for(let d of r)if(d.type==="childList"&&Array.from(d.addedNodes).some(l=>l instanceof HTMLElement&&l.hasAttribute(t))){a();break}});return n.observe(e,{childList:!0}),()=>{n.disconnect()}},k="true",N="false",C="inactive",L="active",S="cubic-bezier(.48,1.55,.28,1)",G={className:"",transformDuration:0,transformEasing:""},V=({activeTabTrigger:e,indicatorClassName:t,tabList:a})=>{if(!t||t==="")return;let n=document.createElement("span");E(n,{"data-tab-indicator":"","aria-hidden":"true"});let r=t.split(" ");n.classList.add(...r);let d=e.parentElement===a?e:e.parentElement;return $({newElement:n,existingElement:d}),n},y=({triggerElement:e,indicator_:t,transformDuration:a=300,transformEasing:n="ease"})=>{t instanceof HTMLElement&&t.animate([{top:t.style.top,left:t.style.left,width:t.style.width,height:t.style.height},{top:`${e.offsetTop}px`,left:`${e.offsetLeft}px`,width:`${e.offsetWidth}px`,height:`${e.offsetHeight}px`}],{fill:"both",duration:a,easing:n})},q=(e,t)=>{for(let a of t)a!==e&&(E(a,{"data-state":C,tabindex:"-1"}),a instanceof HTMLAnchorElement&&a.setAttribute("aria-selected","false"))},R=({indicatorTransformDuration:e,indicatorTransformEaseing:t,indicator:a,triggerElement:n,tabList:r})=>{!(a instanceof HTMLSpanElement)||!(n instanceof HTMLElement)||y({triggerElement:n,indicator_:a,transformDuration:e,transformEasing:t})},_=(e,t)=>{for(let a of t)a!==e&&(E(a,{"data-state":C,"aria-hidden":k}),a.hidden=!0)},A=({triggerElement:e,tabTriggers:t,tabsPanelContainer:a,showAnimation:n,indicatorTransformDuration:r,indicatorTransformEaseing:d,tabList:l})=>{let c=b("[data-tab-panel][data-state=active]",a);if(c instanceof HTMLElement&&(E(c,{"data-state":"hidden"}),c.hidden=!0),!(e instanceof HTMLElement))return;let h=b(`[data-tab-panel]#${e.getAttribute("data-target")}`,a);if(!(h instanceof HTMLElement))return;q(e,t),h.hidden=!1,E(h,{"data-state":L,"aria-hidden":N}),E(e,{"data-state":L,tabindex:"0"}),e instanceof HTMLAnchorElement&&e.setAttribute("aria-selected","true"),n&&n!==""&&h.style.setProperty("--un-tab-show-animation",`${n}`);let m=p("[data-tab-indicator]",l);y({triggerElement:e,indicator_:m,transformDuration:r,transformEasing:d});let g=b("[data-fx-tabs]",h);if(g instanceof HTMLElement){let u=b("[data-tab-list-wrapper]",g)||g,f=b("[data-tab-list]",u),i=f.querySelector("[data-tabs-trigger][data-state=active]"),o=f.querySelector("span[data-tab-indicator]");o instanceof HTMLSpanElement&&i instanceof HTMLElement&&!g.hasAttribute("data-nested-indicator-seteled")&&(g.setAttribute("data-nested-indicator-seteled",""),R({indicatorTransformDuration:r,indicatorTransformEaseing:d,indicator:o,triggerElement:i,tabList:f}))}return{currentTabPanel:h}},z=(e,t)=>{let a=t.findIndex(l=>l.getAttribute("data-state")===L),n=e.key==="ArrowUp"||e.key==="ArrowLeft"?-1:1,r=l=>!t[l].hasAttribute("disabled"),d=(l,c,h)=>{let m=(l+c+h)%h;for(;!r(m);)m=(m+c+h)%h;return m};if(e.key==="ArrowUp"||e.key==="ArrowDown"||e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault();let l=d(a,n,t.length),c=t[l];c.focus(),c.click()}},v=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,a,n){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,a)||(window.$flexillaInstances[t].push({element:a,instance:n}),n)}static getInstance(t,a){var n,r;return this.initGlobalRegistry(),(r=(n=window.$flexillaInstances[t])==null?void 0:n.find(d=>d.element===a))==null?void 0:r.instance}static removeInstance(t,a){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(n=>n.element!==a))}},w=class{constructor(t,a={}){s(this,"tabsElement"),s(this,"options"),s(this,"indicatorOptions"),s(this,"defaultTabValue"),s(this,"showAnimation"),s(this,"tabList"),s(this,"tabPanels"),s(this,"tabTriggers"),s(this,"activeTabTrigger"),s(this,"indicatorClassName"),s(this,"indicatorTransformEaseing"),s(this,"indicatorTransformDuration"),s(this,"panelsContainer"),s(this,"cleanupObserver",null),s(this,"getDefActivePanelValue",i=>{let o=b("[data-tab-panel][data-state=active]",i);return o?.getAttribute("id")}),s(this,"handleGlobalTabChanges",i=>{if(i.ariaSelected==="true"||this.activeTabTrigger===i)return;this.activeTabTrigger=i;let o=A({triggerElement:i,tabTriggers:this.tabTriggers,tabsPanelContainer:this.panelsContainer,showAnimation:this.showAnimation,indicatorTransformDuration:this.indicatorTransformDuration,indicatorTransformEaseing:this.indicatorTransformEaseing,tabList:this.tabList});this.options.onChangeTab&&this.options.onChangeTab({currentTrigger:i,currentPanel:o?.currentTabPanel}),I(this.tabsElement,"change-tab",{currentTrigger:i,currentPanel:o?.currentTabPanel})}),s(this,"handleTabChanges",i=>{let o=i.currentTarget;i.preventDefault(),this.handleGlobalTabChanges(o)}),s(this,"handleKeyEventChanges",i=>{z(i,this.tabTriggers)}),s(this,"cleanupSingle",i=>{i instanceof HTMLElement&&(i.removeEventListener("click",this.handleTabChanges),i.removeEventListener("keydown",this.handleKeyEventChanges))}),s(this,"cleanup",()=>{if(this.tabsElement){for(let i of this.tabTriggers)this.cleanupSingle(i);this.cleanupObserver&&(this.cleanupObserver(),this.cleanupObserver=null),v.removeInstance("tabs",this.tabsElement),this.tabTriggers=[],this.tabPanels=[]}}),s(this,"reload",()=>{this.cleanup();let i=b("[data-tab-list-wrapper]",this.tabsElement)||this.tabsElement;this.tabList=b("[data-tab-list]",i);let o=T("[data-tab-panel]",this.panelsContainer);this.tabPanels=o.filter(H=>H.parentElement===this.panelsContainer),this.validateTabElements(this.tabList,this.tabPanels),this.tabTriggers=T("[data-tabs-trigger]",this.tabList),this.initTabs()}),s(this,"changeTab",i=>{let o=p(`[data-tabs-trigger][data-target='${i}']`,this.tabList);o instanceof HTMLElement&&this.handleGlobalTabChanges(o)});let n=typeof t=="string"?p(t):t;if(!(n instanceof HTMLElement))throw new Error("Please Provide a valid HTMLElement for the tabs component");this.tabsElement=n;let r=v.getInstance("tabs",this.tabsElement);if(r)return r;this.panelsContainer=b("[data-panels-container]",this.tabsElement)||this.tabsElement,this.options=a,this.indicatorOptions=this.options.indicatorOptions||G;let{defaultValue:d,animationOnShow:l}=this.options;this.defaultTabValue=d||this.tabsElement.dataset.defaultValue||this.getDefActivePanelValue(this.panelsContainer)||"",this.showAnimation=l||this.tabsElement.dataset.showAnimation||"";let c=b("[data-tab-list-wrapper]",this.tabsElement)||this.tabsElement;this.tabList=b("[data-tab-list]",c);let h=T("[data-tab-panel]",this.panelsContainer);if(this.tabPanels=h.filter(i=>i.parentElement===this.panelsContainer),this.validateTabElements(this.tabList,this.tabPanels),this.tabTriggers=T("[data-tabs-trigger]",this.tabList),this.tabTriggers.length<=0)throw new Error("No trigger found, Tab component must have at least one trigger");let m=p("[data-tabs-trigger][data-state=active]",this.tabList);this.activeTabTrigger=p(`[data-tabs-trigger][data-target='${this.defaultTabValue}']`,this.tabList)||m||this.tabTriggers[0];let{transformEasing:g,transformDuration:u,className:f}=this.indicatorOptions;this.indicatorClassName=f||this.tabsElement.getAttribute("data-indicator-class-name")||"",this.indicatorTransformEaseing=g||this.tabsElement.dataset.indicatorTransformEasing||S,this.indicatorTransformDuration=u||parseInt(this.tabsElement.dataset.indicatorTransformDuration||"")||400,this.initTabs()}validateTabElements(t,a){if(!(t instanceof HTMLElement))throw new Error("TabList Element is required, tabList must have a data-tab-list attribute and be direct descendant of the tabs or must be wrapped inside another element with data-tab-list-wrapper");if(!a.every(n=>n instanceof HTMLElement))throw new Error("TabPanels Element are required, tabPanels must have a data-tab-panel attribute and be direct descendant of the tabs or the panels container (data-panels-container)")}initTabs(){this.tabsElement.hasAttribute("data-fx-tabs")||this.tabsElement.setAttribute("data-fx-tabs",""),this.initializeTab({tabTriggers:this.tabTriggers,tabPanels:this.tabPanels,tabsPanelContainer:this.panelsContainer,showAnimation:this.showAnimation,indicatorTransformDuration:this.indicatorTransformDuration,indicatorTransformEaseing:this.indicatorTransformEaseing,activeTabTrigger:this.activeTabTrigger,indicatorClassName:this.indicatorClassName,tabList:this.tabList}),this.cleanupObserver=O({container:this.panelsContainer,attributeToWatch:"data-tab-panel",onChildAdded:this.reload}),v.register("tabs",this.tabsElement,this)}attachTriggerEvents(t){t instanceof HTMLElement&&(t.addEventListener("click",this.handleTabChanges),t.addEventListener("keydown",this.handleKeyEventChanges))}initializeTab({tabTriggers:t,tabPanels:a,tabsPanelContainer:n,showAnimation:r,indicatorTransformDuration:d,indicatorTransformEaseing:l,activeTabTrigger:c,indicatorClassName:h,tabList:m}){V({activeTabTrigger:c,indicatorClassName:h,tabList:m});for(let f of t)this.attachTriggerEvents(f);let g=b(`[data-tab-panel]#${c.getAttribute("data-target")}`,n);_(g,a);let u=A({triggerElement:c,tabTriggers:t,tabsPanelContainer:n,showAnimation:r,indicatorTransformDuration:d,indicatorTransformEaseing:l,tabList:m});this.options.onChangeTab&&this.options.onChangeTab({currentTrigger:c,currentPanel:u?.currentTabPanel})}};s(w,"autoInit",(e="[data-fx-tabs]")=>{let t=T(e);for(let a of t)new w(a)}),s(w,"init",(e,t)=>new w(e,t));var P=w;function K(e){e.directive("tabs",(t,{},{cleanup:a})=>{let n=new P(t);a(()=>{n.cleanup()})})}var x=K;document.addEventListener("alpine:init",()=>{x(window.Alpine)});})();