@flexilla/alpine-modal 0.0.0 → 0.0.2

package/dist/cdn.js

@@ -31,8 +31,10 @@
     if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
       throw new Error("Both parameters must be valid HTML elements.");
     const n = e.parentElement;
-    if (n) n.insertBefore(t, e);
-    else throw new Error("Existing element must have a parent element.");
+    if (n)
+      n.insertBefore(t, e);
+    else
+      throw new Error("Existing element must have a parent element.");
   };
   var Q = ({
     element: t,
@@ -70,7 +72,8 @@
     return n.setAttribute("aria-hidden", "true"), J({ newElement: n, existingElement: t }), n.classList.add(...e), n.setAttribute("data-modal-overlay", ""), n;
   };
   var k = (t, e, n) => {
-    if (!(e instanceof HTMLElement)) throw new Error("No modal-content found");
+    if (!(e instanceof HTMLElement))
+      throw new Error("No modal-content found");
     t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e.setAttribute("data-state", n);
     const a = r("[data-modal-overlay]", t);
     a instanceof HTMLElement && a.setAttribute("data-state", n);
@@ -84,19 +87,22 @@
   };
   var Z = (t, e, n) => {
     var q;
-    if (!(t instanceof HTMLElement)) throw new Error("Modal Element must be a valid element");
+    if (!(t instanceof HTMLElement))
+      throw new Error("Modal Element must be a valid element");
     const { animateContent: a, allowBodyScroll: d, preventCloseModal: s, overlayClass: f, onShow: u, onHide: h, onToggle: m, beforeHide: b, enableStackedModals: g } = n, p = d || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", F = s || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", C = g || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", K = (f == null ? void 0 : f.split(" ")) || ((q = t.dataset.modalOverlay) == null ? void 0 : q.split(" ")) || "";
     let x = false;
     t.setAttribute("data-allow-body-scroll", `${p}`);
     const o = r("[data-modal-content]", t), L = H("[data-close-modal]", t);
     let i = null, S = false;
-    if (r("[data-modal-overlay]", t) instanceof HTMLElement && (i = r("[data-modal-overlay]", t), i.setAttribute("data-overlay-nature", "default"), S = true), !(o instanceof HTMLElement)) throw new Error("Modal content element not found");
+    if (r("[data-modal-overlay]", t) instanceof HTMLElement && (i = r("[data-modal-overlay]", t), i.setAttribute("data-overlay-nature", "default"), S = true), !(o instanceof HTMLElement))
+      throw new Error("Modal content element not found");
     const D = o.dataset.enterAnimation || "", P = o.dataset.exitAnimation || "";
     o.setAttribute("data-state", "close");
     const R = (l) => {
-      l.preventDefault(), l.key === "Escape" && !F && A();
+      l.key === "Escape" && (l.preventDefault(), F || A());
     }, X = (l) => {
-      if (C) return;
+      if (C)
+        return;
       const w = H("[data-fx-modal][data-state=open]");
       for (const y of w)
         if (y !== l) {
@@ -132,7 +138,8 @@
         }
       });
       const w = (E = b == null ? void 0 : b()) == null ? void 0 : E.cancelAction;
-      if (l || w) return;
+      if (l || w)
+        return;
       const y = () => {
         k(t, o, "close"), V(C, p, t), S || W(i), B(t, "modal-close", { modalId: t.id });
       }, M = () => {
@@ -179,7 +186,8 @@
       c(this, "options");
       c(this, "state");
       const d = typeof e == "string" ? r(e) : e;
-      if (!(d instanceof HTMLElement)) throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
+      if (!(d instanceof HTMLElement))
+        throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
       this.modalElement = d, this.options = n, this.state = (n == null ? void 0 : n.defaultState) || this.modalElement.dataset.state || "close";
       const s = O.getInstance("modal", this.modalElement);
       if (s)
@@ -191,7 +199,8 @@
   };
   c(v, "autoInit", (e = "[data-fx-modal]") => {
     const n = H(e);
-    for (const a of n) new v(a);
+    for (const a of n)
+      new v(a);
   }), /**
   * Creates and initializes a new Modal instance
   * @param modal - The modal element or selector string
@@ -213,11 +222,38 @@
   // src/index.js
   function Modal(Alpine) {
     Alpine.directive("modal", (el, {}, { cleanup }) => {
-      const modal_ = new Y(el);
+      const modalId = el.getAttribute("data-modal-id");
+      if (!modalId) {
+        console.error("\u274C data-modal-id is required but missing on element:", el);
+        return;
+      }
+      const modalInstance = new Y(el);
+      if (!Alpine.store("modals")) {
+        Alpine.store("modals", {});
+      }
+      Alpine.store("modals")[modalId] = modalInstance;
+      const openHandler = () => modalInstance.showModal();
+      const closeHandler = () => modalInstance.hideModal();
+      document.addEventListener(`modal:${modalId}:open`, openHandler);
+      document.addEventListener(`modal:${modalId}:close`, closeHandler);
       cleanup(() => {
-        modal_.cleanup();
+        document.removeEventListener(`modal:${modalId}:open`, openHandler);
+        document.removeEventListener(`modal:${modalId}:close`, closeHandler);
+        modalInstance.cleanup();
+        delete Alpine.store("modals")[modalId];
       });
     });
+    Alpine.magic("modal", () => (id) => {
+      if (!Alpine.store("modals")) {
+        console.warn("\u26A0\uFE0F Alpine store for modals is not initialized.");
+        return null;
+      }
+      if (!Alpine.store("modals")[id]) {
+        console.warn(`\u26A0\uFE0F No modal instance found for ID: ${id}`);
+        return null;
+      }
+      return Alpine.store("modals")[id];
+    });
   }
   var src_default = Modal;
 

package/dist/cdn.min.js

@@ -1 +1 @@
-(()=>{var Q=Object.defineProperty,U=(e,t,a)=>t in e?Q(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,r=(e,t,a)=>U(e,typeof t!="symbol"?t+"":t,a),p=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,o;return this.initGlobalRegistry(),(o=(n=window.$flexillaInstances[t])==null?void 0:n.find(d=>d.element===a))==null?void 0:o.instance}static removeInstance(t,a){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(n=>n.element!==a))}},c=(e,t=document.body)=>t.querySelector(e),I=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),V=({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.")},W=({element:e,callback:t,type:a,keysCheck:n})=>{let o=getComputedStyle(e),d=o.animation;if(d!=="none"&&d!==""&&!n.includes(d)){let m="animationend",u=()=>{e.removeEventListener(m,u),t()};e.addEventListener(m,u,{once:!0})}else t()},Y=({element:e,callback:t})=>{W({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},G=(e,t,a)=>{let n=new CustomEvent(t,{detail:a});e.dispatchEvent(n)},j=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},X=({modalContent:e,overlayClassName:t})=>{let a=document.createElement("span");return a.setAttribute("aria-hidden","true"),V({newElement:a,existingElement:e}),a.classList.add(...t),a.setAttribute("data-modal-overlay",""),a},H=(e,t,a)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",a==="open"?"false":"true"),e.setAttribute("data-state",a),t.setAttribute("data-state",a);let n=c("[data-modal-overlay]",e);n instanceof HTMLElement&&n.setAttribute("data-state",a)},Z=(e,t,a)=>{if(!e){t||(document.body.style.overflowY="auto");return}I("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(n=>n!==a).length===0&&!t&&(document.body.style.overflowY="auto")},_=(e,t,a)=>{var n;if(!(e instanceof HTMLElement))throw new Error("Modal Element must be a valid element");let{animateContent:o,allowBodyScroll:d,preventCloseModal:m,overlayClass:u,onShow:h,onHide:E,onToggle:f,beforeHide:M,enableStackedModals:k}=a,T=d||e.hasAttribute("data-allow-body-scroll")&&e.getAttribute("data-allow-body-scroll")!=="false",J=m||e.hasAttribute("data-prevent-close-modal")&&e.getAttribute("data-prevent-close-modal")!=="false",R=k||e.hasAttribute("data-enable-stacked")&&e.getAttribute("data-enable-stacked")!=="false",K=u?.split(" ")||((n=e.dataset.modalOverlay)==null?void 0:n.split(" "))||"",A=!1;e.setAttribute("data-allow-body-scroll",`${T}`);let i=c("[data-modal-content]",e),g=I("[data-close-modal]",e),s=null,C=!1;if(c("[data-modal-overlay]",e)instanceof HTMLElement&&(s=c("[data-modal-overlay]",e),s.setAttribute("data-overlay-nature","default"),C=!0),!(i instanceof HTMLElement))throw new Error("Modal content element not found");let B=i.dataset.enterAnimation||"",N=i.dataset.exitAnimation||"";i.setAttribute("data-state","close");let q=l=>{l.preventDefault(),l.key==="Escape"&&!J&&w()},O=l=>{if(R)return;let L=I("[data-fx-modal][data-state=open]");for(let v of L)if(v!==l){let b=c("[data-modal-overlay]",v);b.setAttribute("data-state","close");let S=c("[data-modal-content]",v),x=b.getAttribute("data-overlay-nature")==="default";H(v,S,"close"),x||j(b)}},$=()=>{if(e.getAttribute("data-state")!=="open"){if(O(e),s=C?s:X({modalContent:i,overlayClassName:K}),s?.setAttribute("data-state","open"),G(e,"modal-open",{modalId:e.id}),o||B!==""){let l=o?o.enterAnimation:B;l!==""&&i.style.setProperty("--un-modal-animation",l),H(e,i,"open"),Y({element:i,callback:()=>{i.style.removeProperty("--un-modal-animation")}})}else H(e,i,"open");T||(document.body.style.overflow="hidden"),A||(document.addEventListener("keydown",q),A=!0),e.focus(),m||s.addEventListener("click",w),h?.(),f?.({isHidden:!1})}},w=()=>{var l;let L=!1;G(e,"before-hide",{modalId:e.id,setExitAction:P=>{L=P}});let v=(l=M?.())==null?void 0:l.cancelAction;if(L||v)return;let b=()=>{H(e,i,"close"),Z(R,T,e),C||j(s),G(e,"modal-close",{modalId:e.id})},S=()=>{A&&(document.removeEventListener("keydown",q),A=!1),e.blur(),E?.(),f?.({isHidden:!0})},x=o?.exitAnimation&&o.exitAnimation!==""||N!=="";if(s?.setAttribute("data-state","close"),i.setAttribute("data-state","close"),x){let P=o?o.exitAnimation||"":N;i.style.setProperty("--un-modal-animation",P)}Y({element:i,callback:()=>{x&&i.style.removeProperty("--un-modal-animation"),b(),S()}})},D=l=>{l.preventDefault(),w()};return{autoInitModal:()=>{if(t instanceof HTMLElement&&t.addEventListener("click",$),g.length>0)for(let l of g)l.addEventListener("click",D)},showModal:$,hideModal:w,isHidden:()=>e.dataset.state==="close",cleanup:()=>{if(t instanceof HTMLElement&&t.removeEventListener("click",$),g.length>0)for(let l of g)l.removeEventListener("click",D);!m&&s instanceof HTMLElement&&s.removeEventListener("click",w),p.removeInstance("modal",e)}}},y=class{constructor(t,a={},n){r(this,"modalElement"),r(this,"showModal"),r(this,"hideModal"),r(this,"cleanup"),r(this,"isHidden"),r(this,"options"),r(this,"state");let o=typeof t=="string"?c(t):t;if(!(o instanceof HTMLElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalElement=o,this.options=a,this.state=a?.defaultState||this.modalElement.dataset.state||"close";let d=p.getInstance("modal",this.modalElement);if(d)return d;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let m=o.dataset.modalId,u=(typeof n=="string"?c(n):n)||c(`[data-modal-target='${m}']`),{showModal:h,hideModal:E,autoInitModal:f,isHidden:M,cleanup:k}=_(o,u,this.options);this.state==="open"&&h(),f(),this.showModal=h,this.hideModal=E,this.isHidden=M,this.cleanup=k,p.register("modal",this.modalElement,this)}};r(y,"autoInit",(e="[data-fx-modal]")=>{let t=I(e);for(let a of t)new y(a)}),r(y,"init",(e,t={},a)=>new y(e,t,a));var F=y;function ee(e){e.directive("modal",(t,{},{cleanup:a})=>{let n=new F(t);a(()=>{n.cleanup()})})}var z=ee;document.addEventListener("alpine:init",()=>{z(window.Alpine)});})();
+(()=>{var Q=Object.defineProperty,U=(e,t,a)=>t in e?Q(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,m=(e,t,a)=>U(e,typeof t!="symbol"?t+"":t,a),y=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,o;return this.initGlobalRegistry(),(o=(n=window.$flexillaInstances[t])==null?void 0:n.find(i=>i.element===a))==null?void 0:o.instance}static removeInstance(t,a){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(n=>n.element!==a))}},c=(e,t=document.body)=>t.querySelector(e),H=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),V=({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.")},W=({element:e,callback:t,type:a,keysCheck:n})=>{let o=getComputedStyle(e),i=o.animation;if(i!=="none"&&i!==""&&!n.includes(i)){let r="animationend",u=()=>{e.removeEventListener(r,u),t()};e.addEventListener(r,u,{once:!0})}else t()},Y=({element:e,callback:t})=>{W({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},G=(e,t,a)=>{let n=new CustomEvent(t,{detail:a});e.dispatchEvent(n)},j=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},X=({modalContent:e,overlayClassName:t})=>{let a=document.createElement("span");return a.setAttribute("aria-hidden","true"),V({newElement:a,existingElement:e}),a.classList.add(...t),a.setAttribute("data-modal-overlay",""),a},I=(e,t,a)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",a==="open"?"false":"true"),e.setAttribute("data-state",a),t.setAttribute("data-state",a);let n=c("[data-modal-overlay]",e);n instanceof HTMLElement&&n.setAttribute("data-state",a)},Z=(e,t,a)=>{if(!e){t||(document.body.style.overflowY="auto");return}H("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(n=>n!==a).length===0&&!t&&(document.body.style.overflowY="auto")},_=(e,t,a)=>{var n;if(!(e instanceof HTMLElement))throw new Error("Modal Element must be a valid element");let{animateContent:o,allowBodyScroll:i,preventCloseModal:r,overlayClass:u,onShow:h,onHide:p,onToggle:f,beforeHide:M,enableStackedModals:k}=a,$=i||e.hasAttribute("data-allow-body-scroll")&&e.getAttribute("data-allow-body-scroll")!=="false",J=r||e.hasAttribute("data-prevent-close-modal")&&e.getAttribute("data-prevent-close-modal")!=="false",N=k||e.hasAttribute("data-enable-stacked")&&e.getAttribute("data-enable-stacked")!=="false",K=u?.split(" ")||((n=e.dataset.modalOverlay)==null?void 0:n.split(" "))||"",g=!1;e.setAttribute("data-allow-body-scroll",`${$}`);let s=c("[data-modal-content]",e),L=H("[data-close-modal]",e),d=null,T=!1;if(c("[data-modal-overlay]",e)instanceof HTMLElement&&(d=c("[data-modal-overlay]",e),d.setAttribute("data-overlay-nature","default"),T=!0),!(s instanceof HTMLElement))throw new Error("Modal content element not found");let R=s.dataset.enterAnimation||"",q=s.dataset.exitAnimation||"";s.setAttribute("data-state","close");let B=l=>{l.key==="Escape"&&(l.preventDefault(),J||w())},O=l=>{if(N)return;let A=H("[data-fx-modal][data-state=open]");for(let v of A)if(v!==l){let b=c("[data-modal-overlay]",v);b.setAttribute("data-state","close");let S=c("[data-modal-content]",v),x=b.getAttribute("data-overlay-nature")==="default";I(v,S,"close"),x||j(b)}},C=()=>{if(e.getAttribute("data-state")!=="open"){if(O(e),d=T?d:X({modalContent:s,overlayClassName:K}),d?.setAttribute("data-state","open"),G(e,"modal-open",{modalId:e.id}),o||R!==""){let l=o?o.enterAnimation:R;l!==""&&s.style.setProperty("--un-modal-animation",l),I(e,s,"open"),Y({element:s,callback:()=>{s.style.removeProperty("--un-modal-animation")}})}else I(e,s,"open");$||(document.body.style.overflow="hidden"),g||(document.addEventListener("keydown",B),g=!0),e.focus(),r||d.addEventListener("click",w),h?.(),f?.({isHidden:!1})}},w=()=>{var l;let A=!1;G(e,"before-hide",{modalId:e.id,setExitAction:P=>{A=P}});let v=(l=M?.())==null?void 0:l.cancelAction;if(A||v)return;let b=()=>{I(e,s,"close"),Z(N,$,e),T||j(d),G(e,"modal-close",{modalId:e.id})},S=()=>{g&&(document.removeEventListener("keydown",B),g=!1),e.blur(),p?.(),f?.({isHidden:!0})},x=o?.exitAnimation&&o.exitAnimation!==""||q!=="";if(d?.setAttribute("data-state","close"),s.setAttribute("data-state","close"),x){let P=o?o.exitAnimation||"":q;s.style.setProperty("--un-modal-animation",P)}Y({element:s,callback:()=>{x&&s.style.removeProperty("--un-modal-animation"),b(),S()}})},D=l=>{l.preventDefault(),w()};return{autoInitModal:()=>{if(t instanceof HTMLElement&&t.addEventListener("click",C),L.length>0)for(let l of L)l.addEventListener("click",D)},showModal:C,hideModal:w,isHidden:()=>e.dataset.state==="close",cleanup:()=>{if(t instanceof HTMLElement&&t.removeEventListener("click",C),L.length>0)for(let l of L)l.removeEventListener("click",D);!r&&d instanceof HTMLElement&&d.removeEventListener("click",w),y.removeInstance("modal",e)}}},E=class{constructor(t,a={},n){m(this,"modalElement"),m(this,"showModal"),m(this,"hideModal"),m(this,"cleanup"),m(this,"isHidden"),m(this,"options"),m(this,"state");let o=typeof t=="string"?c(t):t;if(!(o instanceof HTMLElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalElement=o,this.options=a,this.state=a?.defaultState||this.modalElement.dataset.state||"close";let i=y.getInstance("modal",this.modalElement);if(i)return i;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let r=o.dataset.modalId,u=(typeof n=="string"?c(n):n)||c(`[data-modal-target='${r}']`),{showModal:h,hideModal:p,autoInitModal:f,isHidden:M,cleanup:k}=_(o,u,this.options);this.state==="open"&&h(),f(),this.showModal=h,this.hideModal=p,this.isHidden=M,this.cleanup=k,y.register("modal",this.modalElement,this)}};m(E,"autoInit",(e="[data-fx-modal]")=>{let t=H(e);for(let a of t)new E(a)}),m(E,"init",(e,t={},a)=>new E(e,t,a));var z=E;function ee(e){e.directive("modal",(t,{},{cleanup:a})=>{let n=t.getAttribute("data-modal-id");if(!n){console.error("\u274C data-modal-id is required but missing on element:",t);return}let o=new z(t);e.store("modals")||e.store("modals",{}),e.store("modals")[n]=o;let i=()=>o.showModal(),r=()=>o.hideModal();document.addEventListener(`modal:${n}:open`,i),document.addEventListener(`modal:${n}:close`,r),a(()=>{document.removeEventListener(`modal:${n}:open`,i),document.removeEventListener(`modal:${n}:close`,r),o.cleanup(),delete e.store("modals")[n]})}),e.magic("modal",()=>t=>e.store("modals")?e.store("modals")[t]?e.store("modals")[t]:(console.warn(`\u26A0\uFE0F No modal instance found for ID: ${t}`),null):(console.warn("\u26A0\uFE0F Alpine store for modals is not initialized."),null))}var F=ee;document.addEventListener("alpine:init",()=>{F(window.Alpine)});})();

package/dist/module.cjs.js

@@ -55,8 +55,10 @@ var J = ({
   if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
     throw new Error("Both parameters must be valid HTML elements.");
   const n = e.parentElement;
-  if (n) n.insertBefore(t, e);
-  else throw new Error("Existing element must have a parent element.");
+  if (n)
+    n.insertBefore(t, e);
+  else
+    throw new Error("Existing element must have a parent element.");
 };
 var Q = ({
   element: t,
@@ -94,7 +96,8 @@ var U = ({ modalContent: t, overlayClassName: e }) => {
   return n.setAttribute("aria-hidden", "true"), J({ newElement: n, existingElement: t }), n.classList.add(...e), n.setAttribute("data-modal-overlay", ""), n;
 };
 var k = (t, e, n) => {
-  if (!(e instanceof HTMLElement)) throw new Error("No modal-content found");
+  if (!(e instanceof HTMLElement))
+    throw new Error("No modal-content found");
   t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e.setAttribute("data-state", n);
   const a = r("[data-modal-overlay]", t);
   a instanceof HTMLElement && a.setAttribute("data-state", n);
@@ -108,19 +111,22 @@ var V = (t, e, n) => {
 };
 var Z = (t, e, n) => {
   var q;
-  if (!(t instanceof HTMLElement)) throw new Error("Modal Element must be a valid element");
+  if (!(t instanceof HTMLElement))
+    throw new Error("Modal Element must be a valid element");
   const { animateContent: a, allowBodyScroll: d, preventCloseModal: s, overlayClass: f, onShow: u, onHide: h, onToggle: m, beforeHide: b, enableStackedModals: g } = n, p = d || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", F = s || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", C = g || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", K = (f == null ? void 0 : f.split(" ")) || ((q = t.dataset.modalOverlay) == null ? void 0 : q.split(" ")) || "";
   let x = false;
   t.setAttribute("data-allow-body-scroll", `${p}`);
   const o = r("[data-modal-content]", t), L = H("[data-close-modal]", t);
   let i = null, S = false;
-  if (r("[data-modal-overlay]", t) instanceof HTMLElement && (i = r("[data-modal-overlay]", t), i.setAttribute("data-overlay-nature", "default"), S = true), !(o instanceof HTMLElement)) throw new Error("Modal content element not found");
+  if (r("[data-modal-overlay]", t) instanceof HTMLElement && (i = r("[data-modal-overlay]", t), i.setAttribute("data-overlay-nature", "default"), S = true), !(o instanceof HTMLElement))
+    throw new Error("Modal content element not found");
   const D = o.dataset.enterAnimation || "", P = o.dataset.exitAnimation || "";
   o.setAttribute("data-state", "close");
   const R = (l) => {
-    l.preventDefault(), l.key === "Escape" && !F && A();
+    l.key === "Escape" && (l.preventDefault(), F || A());
   }, X = (l) => {
-    if (C) return;
+    if (C)
+      return;
     const w = H("[data-fx-modal][data-state=open]");
     for (const y of w)
       if (y !== l) {
@@ -156,7 +162,8 @@ var Z = (t, e, n) => {
       }
     });
     const w = (E = b == null ? void 0 : b()) == null ? void 0 : E.cancelAction;
-    if (l || w) return;
+    if (l || w)
+      return;
     const y = () => {
       k(t, o, "close"), V(C, p, t), S || W(i), B(t, "modal-close", { modalId: t.id });
     }, M = () => {
@@ -203,7 +210,8 @@ var v = class v2 {
     c(this, "options");
     c(this, "state");
     const d = typeof e == "string" ? r(e) : e;
-    if (!(d instanceof HTMLElement)) throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
+    if (!(d instanceof HTMLElement))
+      throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
     this.modalElement = d, this.options = n, this.state = (n == null ? void 0 : n.defaultState) || this.modalElement.dataset.state || "close";
     const s = O.getInstance("modal", this.modalElement);
     if (s)
@@ -215,7 +223,8 @@ var v = class v2 {
 };
 c(v, "autoInit", (e = "[data-fx-modal]") => {
   const n = H(e);
-  for (const a of n) new v(a);
+  for (const a of n)
+    new v(a);
 }), /**
 * Creates and initializes a new Modal instance
 * @param modal - The modal element or selector string
@@ -237,11 +246,38 @@ var Y = v;
 // src/index.js
 function Modal(Alpine) {
   Alpine.directive("modal", (el, {}, { cleanup }) => {
-    const modal_ = new Y(el);
+    const modalId = el.getAttribute("data-modal-id");
+    if (!modalId) {
+      console.error("\u274C data-modal-id is required but missing on element:", el);
+      return;
+    }
+    const modalInstance = new Y(el);
+    if (!Alpine.store("modals")) {
+      Alpine.store("modals", {});
+    }
+    Alpine.store("modals")[modalId] = modalInstance;
+    const openHandler = () => modalInstance.showModal();
+    const closeHandler = () => modalInstance.hideModal();
+    document.addEventListener(`modal:${modalId}:open`, openHandler);
+    document.addEventListener(`modal:${modalId}:close`, closeHandler);
     cleanup(() => {
-      modal_.cleanup();
+      document.removeEventListener(`modal:${modalId}:open`, openHandler);
+      document.removeEventListener(`modal:${modalId}:close`, closeHandler);
+      modalInstance.cleanup();
+      delete Alpine.store("modals")[modalId];
     });
   });
+  Alpine.magic("modal", () => (id) => {
+    if (!Alpine.store("modals")) {
+      console.warn("\u26A0\uFE0F Alpine store for modals is not initialized.");
+      return null;
+    }
+    if (!Alpine.store("modals")[id]) {
+      console.warn(`\u26A0\uFE0F No modal instance found for ID: ${id}`);
+      return null;
+    }
+    return Alpine.store("modals")[id];
+  });
 }
 var src_default = Modal;
 

package/dist/module.esm.js

@@ -30,8 +30,10 @@ var J = ({
   if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
     throw new Error("Both parameters must be valid HTML elements.");
   const n = e.parentElement;
-  if (n) n.insertBefore(t, e);
-  else throw new Error("Existing element must have a parent element.");
+  if (n)
+    n.insertBefore(t, e);
+  else
+    throw new Error("Existing element must have a parent element.");
 };
 var Q = ({
   element: t,
@@ -69,7 +71,8 @@ var U = ({ modalContent: t, overlayClassName: e }) => {
   return n.setAttribute("aria-hidden", "true"), J({ newElement: n, existingElement: t }), n.classList.add(...e), n.setAttribute("data-modal-overlay", ""), n;
 };
 var k = (t, e, n) => {
-  if (!(e instanceof HTMLElement)) throw new Error("No modal-content found");
+  if (!(e instanceof HTMLElement))
+    throw new Error("No modal-content found");
   t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e.setAttribute("data-state", n);
   const a = r("[data-modal-overlay]", t);
   a instanceof HTMLElement && a.setAttribute("data-state", n);
@@ -83,19 +86,22 @@ var V = (t, e, n) => {
 };
 var Z = (t, e, n) => {
   var q;
-  if (!(t instanceof HTMLElement)) throw new Error("Modal Element must be a valid element");
+  if (!(t instanceof HTMLElement))
+    throw new Error("Modal Element must be a valid element");
   const { animateContent: a, allowBodyScroll: d, preventCloseModal: s, overlayClass: f, onShow: u, onHide: h, onToggle: m, beforeHide: b, enableStackedModals: g } = n, p = d || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", F = s || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", C = g || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", K = (f == null ? void 0 : f.split(" ")) || ((q = t.dataset.modalOverlay) == null ? void 0 : q.split(" ")) || "";
   let x = false;
   t.setAttribute("data-allow-body-scroll", `${p}`);
   const o = r("[data-modal-content]", t), L = H("[data-close-modal]", t);
   let i = null, S = false;
-  if (r("[data-modal-overlay]", t) instanceof HTMLElement && (i = r("[data-modal-overlay]", t), i.setAttribute("data-overlay-nature", "default"), S = true), !(o instanceof HTMLElement)) throw new Error("Modal content element not found");
+  if (r("[data-modal-overlay]", t) instanceof HTMLElement && (i = r("[data-modal-overlay]", t), i.setAttribute("data-overlay-nature", "default"), S = true), !(o instanceof HTMLElement))
+    throw new Error("Modal content element not found");
   const D = o.dataset.enterAnimation || "", P = o.dataset.exitAnimation || "";
   o.setAttribute("data-state", "close");
   const R = (l) => {
-    l.preventDefault(), l.key === "Escape" && !F && A();
+    l.key === "Escape" && (l.preventDefault(), F || A());
   }, X = (l) => {
-    if (C) return;
+    if (C)
+      return;
     const w = H("[data-fx-modal][data-state=open]");
     for (const y of w)
       if (y !== l) {
@@ -131,7 +137,8 @@ var Z = (t, e, n) => {
       }
     });
     const w = (E = b == null ? void 0 : b()) == null ? void 0 : E.cancelAction;
-    if (l || w) return;
+    if (l || w)
+      return;
     const y = () => {
       k(t, o, "close"), V(C, p, t), S || W(i), B(t, "modal-close", { modalId: t.id });
     }, M = () => {
@@ -178,7 +185,8 @@ var v = class v2 {
     c(this, "options");
     c(this, "state");
     const d = typeof e == "string" ? r(e) : e;
-    if (!(d instanceof HTMLElement)) throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
+    if (!(d instanceof HTMLElement))
+      throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
     this.modalElement = d, this.options = n, this.state = (n == null ? void 0 : n.defaultState) || this.modalElement.dataset.state || "close";
     const s = O.getInstance("modal", this.modalElement);
     if (s)
@@ -190,7 +198,8 @@ var v = class v2 {
 };
 c(v, "autoInit", (e = "[data-fx-modal]") => {
   const n = H(e);
-  for (const a of n) new v(a);
+  for (const a of n)
+    new v(a);
 }), /**
 * Creates and initializes a new Modal instance
 * @param modal - The modal element or selector string
@@ -212,11 +221,38 @@ var Y = v;
 // src/index.js
 function Modal(Alpine) {
   Alpine.directive("modal", (el, {}, { cleanup }) => {
-    const modal_ = new Y(el);
+    const modalId = el.getAttribute("data-modal-id");
+    if (!modalId) {
+      console.error("\u274C data-modal-id is required but missing on element:", el);
+      return;
+    }
+    const modalInstance = new Y(el);
+    if (!Alpine.store("modals")) {
+      Alpine.store("modals", {});
+    }
+    Alpine.store("modals")[modalId] = modalInstance;
+    const openHandler = () => modalInstance.showModal();
+    const closeHandler = () => modalInstance.hideModal();
+    document.addEventListener(`modal:${modalId}:open`, openHandler);
+    document.addEventListener(`modal:${modalId}:close`, closeHandler);
     cleanup(() => {
-      modal_.cleanup();
+      document.removeEventListener(`modal:${modalId}:open`, openHandler);
+      document.removeEventListener(`modal:${modalId}:close`, closeHandler);
+      modalInstance.cleanup();
+      delete Alpine.store("modals")[modalId];
     });
   });
+  Alpine.magic("modal", () => (id) => {
+    if (!Alpine.store("modals")) {
+      console.warn("\u26A0\uFE0F Alpine store for modals is not initialized.");
+      return null;
+    }
+    if (!Alpine.store("modals")[id]) {
+      console.warn(`\u26A0\uFE0F No modal instance found for ID: ${id}`);
+      return null;
+    }
+    return Alpine.store("modals")[id];
+  });
 }
 var src_default = Modal;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexilla/alpine-modal",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "description": "AlpineJS plugin for creating Modal, Dialog, alert dialog components",
   "type": "module",
   "private": false,
@@ -64,7 +64,7 @@
     "Dissmiss"
   ],
   "dependencies": {
-    "@flexilla/modal": "^2.0.9"
+    "@flexilla/modal": "^2.0.11"
   },
-  "gitHead": "3c7ea3f74d67ac5d9ab2817d747ad7127eb542b5"
+  "gitHead": "914deac1d6de6fddf509270e52d8aa1925def7af"
 }

package/src/index.js

@@ -2,11 +2,45 @@ import { Modal as FlexillaModal } from "@flexilla/modal";
 
 function Modal(Alpine) {
     Alpine.directive("modal", (el, {}, { cleanup }) => {
-        const modal_ = new FlexillaModal(el);
+        const modalId = el.getAttribute("data-modal-id");
+
+        if (!modalId) {
+            console.error("❌ data-modal-id is required but missing on element:", el);
+            return;
+        }
+
+        const modalInstance = new FlexillaModal(el);
+        if (!Alpine.store("modals")) {
+            Alpine.store("modals", {});
+        }
+
+        Alpine.store("modals")[modalId] = modalInstance;
+
+        const openHandler = () => modalInstance.showModal();
+        const closeHandler = () => modalInstance.hideModal();
+
+        document.addEventListener(`modal:${modalId}:open`, openHandler);
+        document.addEventListener(`modal:${modalId}:close`, closeHandler);
+
         cleanup(() => {
-            modal_.cleanup()
+            document.removeEventListener(`modal:${modalId}:open`, openHandler);
+            document.removeEventListener(`modal:${modalId}:close`, closeHandler);
+            modalInstance.cleanup();
+            delete Alpine.store("modals")[modalId];
         });
     });
+
+    Alpine.magic("modal", () => (id) => {
+        if (!Alpine.store("modals")) {
+            console.warn("⚠️ Alpine store for modals is not initialized.");
+            return null;
+        }
+        if (!Alpine.store("modals")[id]) {
+            console.warn(`⚠️ No modal instance found for ID: ${id}`);
+            return null;
+        }
+        return Alpine.store("modals")[id];
+    });
 }
 
-export default Modal;
+export default Modal;