tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.module.js

A set of Stimulus components (tabs, dropdowns, modals, toggles, autosave, etc) for TailwindCSS users

var x=Object.defineProperty;var V=(t,s,e)=>s in t?x(t,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[s]=e;var i=(t,s,e)=>V(t,typeof s!="symbol"?s+"":s,e);import{Controller as y}from"@hotwired/stimulus";async function n(t,s,e={}){s?await T(t,e):await b(t,e)}async function T(t,s={}){let{transitionClasses:e,fromClasses:a,toClasses:o,toggleClass:r}=C("Enter",t,s);return v(t,{firstFrame(){t.classList.add(...e.split(" ")),t.classList.add(...a.split(" ")),t.classList.remove(...o.split(" ")),t.classList.remove(...r.split(" "))},secondFrame(){t.classList.remove(...a.split(" ")),t.classList.add(...o.split(" "))},ending(){t.classList.remove(...e.split(" "))}})}async function b(t,s={}){let{transitionClasses:e,fromClasses:a,toClasses:o,toggleClass:r}=C("Leave",t,s);return v(t,{firstFrame(){t.classList.add(...a.split(" ")),t.classList.remove(...o.split(" ")),t.classList.add(...e.split(" "))},secondFrame(){t.classList.remove(...a.split(" ")),t.classList.add(...o.split(" "))},ending(){t.classList.remove(...e.split(" ")),t.classList.add(...r.split(" "))}})}function C(t,s,e){return{transitionClasses:s.dataset[`transition${t}`]||e[t.toLowerCase()]||t.toLowerCase(),fromClasses:s.dataset[`transition${t}From`]||e[`${t.toLowerCase()}From`]||`${t.toLowerCase()}-from`,toClasses:s.dataset[`transition${t}To`]||e[`${t.toLowerCase()}To`]||`${t.toLowerCase()}-to`,toggleClass:s.dataset.toggleClass||e.toggleClass||e.toggle||"hidden"}}function L(t){t._stimulus_transition={timeout:null,interrupted:!1}}function I(t){t._stimulus_transition&&t._stimulus_transition.interrupt&&t._stimulus_transition.interrupt()}function v(t,s){t._stimulus_transition&&I(t);let e,a,o;return L(t),t._stimulus_transition.cleanup=()=>{a||s.firstFrame(),o||s.secondFrame(),s.ending(),t._stimulus_transition=null},t._stimulus_transition.interrupt=()=>{e=!0,t._stimulus_transition.timeout&&clearTimeout(t._stimulus_transition.timeout),t._stimulus_transition.cleanup()},new Promise(r=>{e||requestAnimationFrame(()=>{e||(s.firstFrame(),a=!0,requestAnimationFrame(()=>{e||(s.secondFrame(),o=!0,t._stimulus_transition&&(t._stimulus_transition.timeout=setTimeout(()=>{if(e){r();return}t._stimulus_transition.cleanup(),r()},w(t))))}))})})}function w(t){let s=Number(getComputedStyle(t).transitionDuration.replace(/,.*/,"").replace("s",""))*1e3,e=Number(getComputedStyle(t).transitionDelay.replace(/,.*/,"").replace("s",""))*1e3;return s===0&&(s=Number(getComputedStyle(t).animationDuration.replace("s",""))*1e3),s+e}var g=class extends y{connect(){setTimeout(()=>{T(this.element)},this.showDelayValue),this.hasDismissAfterValue&&setTimeout(()=>{this.close()},this.dismissAfterValue)}close(){b(this.element).then(()=>{this.element.remove()})}};i(g,"values",{dismissAfter:Number,showDelay:{type:Number,default:0}});import{Controller as A}from"@hotwired/stimulus";var h=class extends A{connect(){this.timeout=null}save(){clearTimeout(this.timeout),this.timeout=setTimeout(()=>{this.statusTarget.textContent=this.submittingTextValue,this.formTarget.requestSubmit()},this.submitDurationValue)}success(){this.setStatus(this.successTextValue)}error(){this.setStatus(this.errorTextValue)}setStatus(t){this.statusTarget.textContent=t,this.timeout=setTimeout(()=>{this.statusTarget.textContent=""},this.statusDurationValue)}};i(h,"targets",["form","status"]),i(h,"values",{submitDuration:{type:Number,default:1e3},statusDuration:{type:Number,default:2e3},submittingText:{type:String,default:"Saving..."},successText:{type:String,default:"Saved!"},errorText:{type:String,default:"Unable to save."}});import{Controller as _}from"@hotwired/stimulus";var c=class extends _{update(){this.preview=this.colorTarget.value}set preview(t){this.previewTarget.style[this.styleValue]=t;let s=this._getContrastYIQ(t);this.styleValue==="color"?this.previewTarget.style.backgroundColor=s:this.previewTarget.style.color=s}_getContrastYIQ(t){t=t.replace("#","");let s=128,e=parseInt(t.substr(0,2),16),a=parseInt(t.substr(2,2),16),o=parseInt(t.substr(4,2),16);return(e*299+a*587+o*114)/1e3>=s?"#000":"#fff"}};i(c,"targets",["preview","color"]),i(c,"values",{style:{type:String,default:"backgroundColor"}});import{Controller as D}from"@hotwired/stimulus";var l=class extends D{connect(){this.boundBeforeCache=this.beforeCache.bind(this),document.addEventListener("turbo:before-cache",this.boundBeforeCache)}disconnect(){document.removeEventListener("turbo:before-cache",this.boundBeforeCache)}openValueChanged(){n(this.menuTarget,this.openValue,this.transitionOptions),this.openValue===!0&&this.hasMenuItemTarget&&this.menuItemTargets[0].focus()}show(){this.openValue=!0}close(){this.openValue=!1}hide(t){this.closeOnClickOutsideValue&&t.target.nodeType&&this.element.contains(t.target)===!1&&this.openValue&&(this.openValue=!1),this.closeOnEscapeValue&&t.key==="Escape"&&this.openValue&&(this.openValue=!1)}toggle(){this.openValue=!this.openValue}nextItem(t){t.preventDefault(),this.menuItemTargets[this.nextIndex].focus()}previousItem(t){t.preventDefault(),this.menuItemTargets[this.previousIndex].focus()}get currentItemIndex(){return this.menuItemTargets.indexOf(document.activeElement)}get nextIndex(){return Math.min(this.currentItemIndex+1,this.menuItemTargets.length-1)}get previousIndex(){return Math.max(this.currentItemIndex-1,0)}get transitionOptions(){return{enter:this.hasEnterClass?this.enterClasses.join(" "):"transition ease-out duration-100",enterFrom:this.hasEnterFromClass?this.enterFromClasses.join(" "):"transform opacity-0 scale-95",enterTo:this.hasEnterToClass?this.enterToClasses.join(" "):"transform opacity-100 scale-100",leave:this.hasLeaveClass?this.leaveClasses.join(" "):"transition ease-in duration-75",leaveFrom:this.hasLeaveFromClass?this.leaveFromClasses.join(" "):"transform opacity-100 scale-100",leaveTo:this.hasLeaveToClass?this.leaveToClasses.join(" "):"transform opacity-0 scale-95",toggleClass:this.hasToggleClass?this.toggleClasses.join(" "):"hidden"}}beforeCache(){this.openValue=!1,this.menuTarget.classList.add(this.transitionOptions.toggleClass)}};i(l,"targets",["menu","button","menuItem"]),i(l,"values",{open:{type:Boolean,default:!1},closeOnEscape:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0}}),i(l,"classes",["enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","toggle"]);import{Controller as F}from"@hotwired/stimulus";var d=class extends F{connect(){this.openValue&&this.open(),this.boundBeforeCache=this.beforeCache.bind(this),document.addEventListener("turbo:before-cache",this.boundBeforeCache)}disconnect(){document.removeEventListener("turbo:before-cache",this.boundBeforeCache)}open(){this.dialogTarget.showModal()}close(){this.dialogTarget.setAttribute("closing",""),Promise.all(this.dialogTarget.getAnimations().map(t=>t.finished)).then(()=>{this.dialogTarget.removeAttribute("closing"),this.dialogTarget.close()})}backdropClose(t){t.target.nodeName=="DIALOG"&&this.close()}show(){this.dialogTarget.show()}hide(){this.close()}beforeCache(){this.close()}};i(d,"targets",["dialog"]),i(d,"values",{open:Boolean});import{Controller as B}from"@hotwired/stimulus";var f=class extends B{openValueChanged(){n(this.contentTarget,this.openValue),this.shouldAutoDismiss&&this.scheduleDismissal()}show(t){this.shouldAutoDismiss&&this.scheduleDismissal(),this.openValue=!0}hide(){this.openValue=!1}toggle(){this.openValue=!this.openValue}get shouldAutoDismiss(){return this.openValue&&this.hasDismissAfterValue}scheduleDismissal(){this.hasDismissAfterValue&&(this.cancelDismissal(),this.timeoutId=setTimeout(()=>{this.hide(),this.timeoutId=void 0},this.dismissAfterValue))}cancelDismissal(){typeof this.timeoutId=="number"&&(clearTimeout(this.timeoutId),this.timeoutId=void 0)}};i(f,"targets",["content"]),i(f,"values",{dismissAfter:Number,open:{type:Boolean,default:!1}});import{Controller as E}from"@hotwired/stimulus";var m=class extends E{connect(){this.openValue&&this.open(),this.boundBeforeCache=this.beforeCache,document.addEventListener("turbo:before-cache",this.boundBeforeCache)}disconnect(){document.removeEventListener("turbo:before-cache",this.boundBeforeCache)}open(){this.dialogTarget.showModal()}close(){this.dialogTarget.setAttribute("closing",""),Promise.all(this.dialogTarget.getAnimations().map(t=>t.finished)).then(()=>{this.dialogTarget.removeAttribute("closing"),this.dialogTarget.close()})}backdropClose(t){t.target.nodeName=="DIALOG"&&this.close()}show(){this.open()}hide(){this.close()}beforeCache(){this.close()}};i(m,"targets",["dialog"]),i(m,"values",{open:Boolean});import{Controller as S}from"@hotwired/stimulus";var u=class extends S{initialize(){this.updateAnchorValue&&this.anchor&&(this.indexValue=this.tabTargets.findIndex(t=>t.id===this.anchor))}connect(){this.showTab()}change(t){t.currentTarget.tagName==="SELECT"?this.indexValue=t.currentTarget.selectedIndex:t.currentTarget.dataset.index?this.indexValue=t.currentTarget.dataset.index:t.currentTarget.dataset.id?this.indexValue=this.tabTargets.findIndex(s=>s.id==t.currentTarget.dataset.id):this.indexValue=this.tabTargets.indexOf(t.currentTarget)}nextTab(){this.indexValue=Math.min(this.indexValue+1,this.tabsCount-1)}previousTab(){this.indexValue=Math.max(this.indexValue-1,0)}firstTab(){this.indexValue=0}lastTab(){this.indexValue=this.tabsCount-1}indexValueChanged(){if(this.showTab(),this.dispatch("tab-change",{target:this.tabTargets[this.indexValue],detail:{activeIndex:this.indexValue}}),this.updateAnchorValue){let t=this.tabTargets[this.indexValue].id;if(this.scrollToAnchorValue)location.hash=t;else{let e=window.location.href.split("#")[0]+"#"+t;typeof Turbo<"u"?Turbo.navigator.history.replace(new URL(e)):history.replaceState({},document.title,e)}}}showTab(){this.panelTargets.forEach((t,s)=>{let e=this.tabTargets[s];s===this.indexValue?(t.classList.remove("hidden"),e.ariaSelected="true",e.dataset.active=!0,this.hasInactiveTabClass&&e?.classList?.remove(...this.inactiveTabClasses),this.hasActiveTabClass&&e?.classList?.add(...this.activeTabClasses)):(t.classList.add("hidden"),e.ariaSelected=null,delete e.dataset.active,this.hasActiveTabClass&&e?.classList?.remove(...this.activeTabClasses),this.hasInactiveTabClass&&e?.classList?.add(...this.inactiveTabClasses))}),this.hasSelectTarget&&(this.selectTarget.selectedIndex=this.indexValue),this.scrollActiveTabIntoViewValue&&this.scrollToActiveTab()}scrollToActiveTab(){let t=this.element.querySelector("[aria-selected]");t&&t.scrollIntoView({inline:"center"})}get tabsCount(){return this.tabTargets.length}get anchor(){return document.URL.split("#").length>1?document.URL.split("#")[1]:null}};i(u,"classes",["activeTab","inactiveTab"]),i(u,"targets",["tab","panel","select"]),i(u,"values",{index:0,updateAnchor:Boolean,scrollToAnchor:Boolean,scrollActiveTabIntoView:Boolean});import{Controller as N}from"@hotwired/stimulus";var p=class extends N{toggle(t){this.openValue=!this.openValue,this.animate()}toggleInput(t){this.openValue=t.target.checked,this.animate()}hide(){this.openValue=!1,this.animate()}show(){this.openValue=!0,this.animate()}animate(){this.toggleableTargets.forEach(t=>{n(t,this.openValue)})}};i(p,"targets",["toggleable"]),i(p,"values",{open:{type:Boolean,default:!1}});export{g as Alert,h as Autosave,c as ColorPreview,l as Dropdown,d as Modal,f as Popover,m as Slideover,u as Tabs,p as Toggle,n as transition};