@vkm-js/closeable/dist/cdn.min.js

An Alpinejs plugin that adds a closeable directive to close or fade the element.

(()=>{function s(l){l.directive("closeable",(e,{modifiers:n,expression:c},{cleanup:r})=>{e.id||(e.id=crypto.getRandomValues(new Uint32Array(1))[0].toString(36)+Date.now().toString(36));let a=()=>n.includes("icon")?`<i class="${c||"ti ti-x"}"></i>`:`
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-x">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <path d="M18 6l-12 12" />
                    <path d="M6 6l12 12" />
                </svg>
            `,t=document.createElement("button");t.id=`closeable-${e.id}`,t.type="button",t.className="absolute top-3 right-1.5 flex items-center justify-center transition-all w-8 h-8 rounded-md text-inherit active:bg-dark/10 hover:bg-dark/5 dark:hover:bg-white/5 shadow-none!",t.innerHTML=a(),e.appendChild(t);let i=()=>{if(n.includes("confirm"))confirm(()=>e.remove(),"You are about to close this window!");else if(n.includes("remove")){let o=n.findIndex(u=>u==="remove"),d=n[o+1]||"show";e.classList.remove(d)}else n.includes("none")?e.style.display="none":n.includes("hidden")?e.style.visibility="hidden":e.remove()};t.addEventListener("click",i),r(()=>t.removeEventListener("click",i))})}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(s)});})();