@cesarfernandoig/alpine-responsive-plugin
Version:
A lightweight Alpine.js plugin that simplifies managing conditional attributes in responsive designs.
2 lines (1 loc) • 849 B
JavaScript
function l(e){let t=window.matchMedia("(min-width: 768px)"),i=e.reactive({isMobile:!t.matches,isDesktop:t.matches});return t.addEventListener("change",s=>{i.isMobile=!s.matches,i.isDesktop=s.matches}),i}var f=e=>()=>(t,i=null)=>e.isMobile?t:i;function n(e,t,i,s){t=="class"?(i!=null&&e.classList.remove(...i.split(" ")),s!=null&&e.classList.add(...s.split(" "))):s!=null?e.setAttribute(t,s):e.hasAttribute(t)&&e.removeAttribute(t)}var b=e=>(t,{expression:i},{evaluate:s,effect:d})=>{d(()=>{let m=s(i);if(e.isMobile)for(let[o,r]of Object.entries(m)){let[a,c]=Array.isArray(r)?r:[r,null];n(t,o,c,a)}else if(e.isDesktop)for(let[o,r]of Object.entries(m)){let[a,c]=Array.isArray(r)?r:[r,null];n(t,o,a,c)}})};function u(e){let t=l(e);e.magic("media",()=>t),e.magic("getMobileValue",f(t)),e.directive("mobileattributes",b(t))}var y=u;export{y as default};