alpinejs-flux
Version:
Simplifies the process of applying CSS classes with x-transition as a template and makes them reusable within single attribute.
2 lines (1 loc) • 1.29 kB
JavaScript
(()=>{function l(i){let[t,n,r,o="",e=""]=i,s=`${t} ${o}`.trim(),a=`${t} ${e}`.trim();return{"x-transition:enter":s,"x-transition:enter-start":n,"x-transition:enter-end":r,"x-transition:leave":a,"x-transition:leave-start":r,"x-transition:leave-end":n}}function x(i){let t={};for(let n in i){let r=i[n];t[`x-transition:${n}`]=r}return t}function d(i,t=null){if(!t)throw new Error("x-flux: Template "+i+" does not exist in the config.");try{return Array.isArray(t)?l(t):x(t)}catch{throw new Error("x-flux: Only accept array or object.")}}function c(i,t,n){let r=d(t,n);if(!r)throw new Error("x-flux: No transitions found for "+t);for(let o in r){let e=r[o];i.setAttribute(o,e)}i.removeAttribute("x-flux")}function u(i,t,n,r=null){i.magic(t,o=>()=>{c(o,n,r)})}function f(i){let t=i.split("-");if(t.length===1)return i;let n=t.slice(1).map(r=>r.charAt(0).toUpperCase()+r.slice(1));return t[0]+n.join("")}function p(i,t){i.directive("flux",(n,{expression:r},{evaluate:o})=>{let e=o(r),s=Array.isArray(e)?"":e,a=s?t[s]:e;c(n,s,a)}).before("transition");for(let n in t){let r=f(n),o=t[n]||null;u(i,r,n,o)}i.magic("flux",n=>(r="",o=null,e=!0)=>{if(o){let a=f(r);t[r]=o,u(i,a,r,o)}if(!e)return;let s=t[r]||null;c(n,r,s)})}document.addEventListener("alpine:init",()=>window.Alpine.plugin(p));})();