@flexilla/alpine-modal 0.0.0 → 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cdn.js +47 -11
  2. package/dist/cdn.min.js +1 -1
  3. package/dist/module.cjs.js +47 -11
  4. package/dist/module.esm.js +47 -11
  5. package/package.json +2 -2
  6. package/src/index.js +37 -3
package/dist/cdn.js CHANGED
@@ -31,8 +31,10 @@
31
31
  if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
32
32
  throw new Error("Both parameters must be valid HTML elements.");
33
33
  const n = e.parentElement;
34
- if (n) n.insertBefore(t, e);
35
- else throw new Error("Existing element must have a parent element.");
34
+ if (n)
35
+ n.insertBefore(t, e);
36
+ else
37
+ throw new Error("Existing element must have a parent element.");
36
38
  };
37
39
  var Q = ({
38
40
  element: t,
@@ -70,7 +72,8 @@
70
72
  return n.setAttribute("aria-hidden", "true"), J({ newElement: n, existingElement: t }), n.classList.add(...e), n.setAttribute("data-modal-overlay", ""), n;
71
73
  };
72
74
  var k = (t, e, n) => {
73
- if (!(e instanceof HTMLElement)) throw new Error("No modal-content found");
75
+ if (!(e instanceof HTMLElement))
76
+ throw new Error("No modal-content found");
74
77
  t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e.setAttribute("data-state", n);
75
78
  const a = r("[data-modal-overlay]", t);
76
79
  a instanceof HTMLElement && a.setAttribute("data-state", n);
@@ -84,19 +87,22 @@
84
87
  };
85
88
  var Z = (t, e, n) => {
86
89
  var q;
87
- if (!(t instanceof HTMLElement)) throw new Error("Modal Element must be a valid element");
90
+ if (!(t instanceof HTMLElement))
91
+ throw new Error("Modal Element must be a valid element");
88
92
  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(" ")) || "";
89
93
  let x = false;
90
94
  t.setAttribute("data-allow-body-scroll", `${p}`);
91
95
  const o = r("[data-modal-content]", t), L = H("[data-close-modal]", t);
92
96
  let i = null, S = false;
93
- 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");
97
+ 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))
98
+ throw new Error("Modal content element not found");
94
99
  const D = o.dataset.enterAnimation || "", P = o.dataset.exitAnimation || "";
95
100
  o.setAttribute("data-state", "close");
96
101
  const R = (l) => {
97
102
  l.preventDefault(), l.key === "Escape" && !F && A();
98
103
  }, X = (l) => {
99
- if (C) return;
104
+ if (C)
105
+ return;
100
106
  const w = H("[data-fx-modal][data-state=open]");
101
107
  for (const y of w)
102
108
  if (y !== l) {
@@ -132,7 +138,8 @@
132
138
  }
133
139
  });
134
140
  const w = (E = b == null ? void 0 : b()) == null ? void 0 : E.cancelAction;
135
- if (l || w) return;
141
+ if (l || w)
142
+ return;
136
143
  const y = () => {
137
144
  k(t, o, "close"), V(C, p, t), S || W(i), B(t, "modal-close", { modalId: t.id });
138
145
  }, M = () => {
@@ -179,7 +186,8 @@
179
186
  c(this, "options");
180
187
  c(this, "state");
181
188
  const d = typeof e == "string" ? r(e) : e;
182
- if (!(d instanceof HTMLElement)) throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
189
+ if (!(d instanceof HTMLElement))
190
+ throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
183
191
  this.modalElement = d, this.options = n, this.state = (n == null ? void 0 : n.defaultState) || this.modalElement.dataset.state || "close";
184
192
  const s = O.getInstance("modal", this.modalElement);
185
193
  if (s)
@@ -191,7 +199,8 @@
191
199
  };
192
200
  c(v, "autoInit", (e = "[data-fx-modal]") => {
193
201
  const n = H(e);
194
- for (const a of n) new v(a);
202
+ for (const a of n)
203
+ new v(a);
195
204
  }), /**
196
205
  * Creates and initializes a new Modal instance
197
206
  * @param modal - The modal element or selector string
@@ -213,11 +222,38 @@
213
222
  // src/index.js
214
223
  function Modal(Alpine) {
215
224
  Alpine.directive("modal", (el, {}, { cleanup }) => {
216
- const modal_ = new Y(el);
225
+ const modalId = el.getAttribute("data-modal-id");
226
+ if (!modalId) {
227
+ console.error("\u274C data-modal-id is required but missing on element:", el);
228
+ return;
229
+ }
230
+ const modalInstance = new Y(el);
231
+ if (!Alpine.store("modals")) {
232
+ Alpine.store("modals", {});
233
+ }
234
+ Alpine.store("modals")[modalId] = modalInstance;
235
+ const openHandler = () => modalInstance.showModal();
236
+ const closeHandler = () => modalInstance.hideModal();
237
+ document.addEventListener(`modal:${modalId}:open`, openHandler);
238
+ document.addEventListener(`modal:${modalId}:close`, closeHandler);
217
239
  cleanup(() => {
218
- modal_.cleanup();
240
+ document.removeEventListener(`modal:${modalId}:open`, openHandler);
241
+ document.removeEventListener(`modal:${modalId}:close`, closeHandler);
242
+ modalInstance.cleanup();
243
+ delete Alpine.store("modals")[modalId];
219
244
  });
220
245
  });
246
+ Alpine.magic("modal", () => (id) => {
247
+ if (!Alpine.store("modals")) {
248
+ console.warn("\u26A0\uFE0F Alpine store for modals is not initialized.");
249
+ return null;
250
+ }
251
+ if (!Alpine.store("modals")[id]) {
252
+ console.warn(`\u26A0\uFE0F No modal instance found for ID: ${id}`);
253
+ return null;
254
+ }
255
+ return Alpine.store("modals")[id];
256
+ });
221
257
  }
222
258
  var src_default = Modal;
223
259
 
package/dist/cdn.min.js CHANGED
@@ -1 +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)});})();
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,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.preventDefault(),l.key==="Escape"&&!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 CHANGED
@@ -55,8 +55,10 @@ var J = ({
55
55
  if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
56
56
  throw new Error("Both parameters must be valid HTML elements.");
57
57
  const n = e.parentElement;
58
- if (n) n.insertBefore(t, e);
59
- else throw new Error("Existing element must have a parent element.");
58
+ if (n)
59
+ n.insertBefore(t, e);
60
+ else
61
+ throw new Error("Existing element must have a parent element.");
60
62
  };
61
63
  var Q = ({
62
64
  element: t,
@@ -94,7 +96,8 @@ var U = ({ modalContent: t, overlayClassName: e }) => {
94
96
  return n.setAttribute("aria-hidden", "true"), J({ newElement: n, existingElement: t }), n.classList.add(...e), n.setAttribute("data-modal-overlay", ""), n;
95
97
  };
96
98
  var k = (t, e, n) => {
97
- if (!(e instanceof HTMLElement)) throw new Error("No modal-content found");
99
+ if (!(e instanceof HTMLElement))
100
+ throw new Error("No modal-content found");
98
101
  t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e.setAttribute("data-state", n);
99
102
  const a = r("[data-modal-overlay]", t);
100
103
  a instanceof HTMLElement && a.setAttribute("data-state", n);
@@ -108,19 +111,22 @@ var V = (t, e, n) => {
108
111
  };
109
112
  var Z = (t, e, n) => {
110
113
  var q;
111
- if (!(t instanceof HTMLElement)) throw new Error("Modal Element must be a valid element");
114
+ if (!(t instanceof HTMLElement))
115
+ throw new Error("Modal Element must be a valid element");
112
116
  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(" ")) || "";
113
117
  let x = false;
114
118
  t.setAttribute("data-allow-body-scroll", `${p}`);
115
119
  const o = r("[data-modal-content]", t), L = H("[data-close-modal]", t);
116
120
  let i = null, S = false;
117
- 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");
121
+ 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))
122
+ throw new Error("Modal content element not found");
118
123
  const D = o.dataset.enterAnimation || "", P = o.dataset.exitAnimation || "";
119
124
  o.setAttribute("data-state", "close");
120
125
  const R = (l) => {
121
126
  l.preventDefault(), l.key === "Escape" && !F && A();
122
127
  }, X = (l) => {
123
- if (C) return;
128
+ if (C)
129
+ return;
124
130
  const w = H("[data-fx-modal][data-state=open]");
125
131
  for (const y of w)
126
132
  if (y !== l) {
@@ -156,7 +162,8 @@ var Z = (t, e, n) => {
156
162
  }
157
163
  });
158
164
  const w = (E = b == null ? void 0 : b()) == null ? void 0 : E.cancelAction;
159
- if (l || w) return;
165
+ if (l || w)
166
+ return;
160
167
  const y = () => {
161
168
  k(t, o, "close"), V(C, p, t), S || W(i), B(t, "modal-close", { modalId: t.id });
162
169
  }, M = () => {
@@ -203,7 +210,8 @@ var v = class v2 {
203
210
  c(this, "options");
204
211
  c(this, "state");
205
212
  const d = typeof e == "string" ? r(e) : e;
206
- if (!(d instanceof HTMLElement)) throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
213
+ if (!(d instanceof HTMLElement))
214
+ throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
207
215
  this.modalElement = d, this.options = n, this.state = (n == null ? void 0 : n.defaultState) || this.modalElement.dataset.state || "close";
208
216
  const s = O.getInstance("modal", this.modalElement);
209
217
  if (s)
@@ -215,7 +223,8 @@ var v = class v2 {
215
223
  };
216
224
  c(v, "autoInit", (e = "[data-fx-modal]") => {
217
225
  const n = H(e);
218
- for (const a of n) new v(a);
226
+ for (const a of n)
227
+ new v(a);
219
228
  }), /**
220
229
  * Creates and initializes a new Modal instance
221
230
  * @param modal - The modal element or selector string
@@ -237,11 +246,38 @@ var Y = v;
237
246
  // src/index.js
238
247
  function Modal(Alpine) {
239
248
  Alpine.directive("modal", (el, {}, { cleanup }) => {
240
- const modal_ = new Y(el);
249
+ const modalId = el.getAttribute("data-modal-id");
250
+ if (!modalId) {
251
+ console.error("\u274C data-modal-id is required but missing on element:", el);
252
+ return;
253
+ }
254
+ const modalInstance = new Y(el);
255
+ if (!Alpine.store("modals")) {
256
+ Alpine.store("modals", {});
257
+ }
258
+ Alpine.store("modals")[modalId] = modalInstance;
259
+ const openHandler = () => modalInstance.showModal();
260
+ const closeHandler = () => modalInstance.hideModal();
261
+ document.addEventListener(`modal:${modalId}:open`, openHandler);
262
+ document.addEventListener(`modal:${modalId}:close`, closeHandler);
241
263
  cleanup(() => {
242
- modal_.cleanup();
264
+ document.removeEventListener(`modal:${modalId}:open`, openHandler);
265
+ document.removeEventListener(`modal:${modalId}:close`, closeHandler);
266
+ modalInstance.cleanup();
267
+ delete Alpine.store("modals")[modalId];
243
268
  });
244
269
  });
270
+ Alpine.magic("modal", () => (id) => {
271
+ if (!Alpine.store("modals")) {
272
+ console.warn("\u26A0\uFE0F Alpine store for modals is not initialized.");
273
+ return null;
274
+ }
275
+ if (!Alpine.store("modals")[id]) {
276
+ console.warn(`\u26A0\uFE0F No modal instance found for ID: ${id}`);
277
+ return null;
278
+ }
279
+ return Alpine.store("modals")[id];
280
+ });
245
281
  }
246
282
  var src_default = Modal;
247
283
 
package/dist/module.esm.js CHANGED
@@ -30,8 +30,10 @@ var J = ({
30
30
  if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
31
31
  throw new Error("Both parameters must be valid HTML elements.");
32
32
  const n = e.parentElement;
33
- if (n) n.insertBefore(t, e);
34
- else throw new Error("Existing element must have a parent element.");
33
+ if (n)
34
+ n.insertBefore(t, e);
35
+ else
36
+ throw new Error("Existing element must have a parent element.");
35
37
  };
36
38
  var Q = ({
37
39
  element: t,
@@ -69,7 +71,8 @@ var U = ({ modalContent: t, overlayClassName: e }) => {
69
71
  return n.setAttribute("aria-hidden", "true"), J({ newElement: n, existingElement: t }), n.classList.add(...e), n.setAttribute("data-modal-overlay", ""), n;
70
72
  };
71
73
  var k = (t, e, n) => {
72
- if (!(e instanceof HTMLElement)) throw new Error("No modal-content found");
74
+ if (!(e instanceof HTMLElement))
75
+ throw new Error("No modal-content found");
73
76
  t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e.setAttribute("data-state", n);
74
77
  const a = r("[data-modal-overlay]", t);
75
78
  a instanceof HTMLElement && a.setAttribute("data-state", n);
@@ -83,19 +86,22 @@ var V = (t, e, n) => {
83
86
  };
84
87
  var Z = (t, e, n) => {
85
88
  var q;
86
- if (!(t instanceof HTMLElement)) throw new Error("Modal Element must be a valid element");
89
+ if (!(t instanceof HTMLElement))
90
+ throw new Error("Modal Element must be a valid element");
87
91
  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(" ")) || "";
88
92
  let x = false;
89
93
  t.setAttribute("data-allow-body-scroll", `${p}`);
90
94
  const o = r("[data-modal-content]", t), L = H("[data-close-modal]", t);
91
95
  let i = null, S = false;
92
- 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");
96
+ 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))
97
+ throw new Error("Modal content element not found");
93
98
  const D = o.dataset.enterAnimation || "", P = o.dataset.exitAnimation || "";
94
99
  o.setAttribute("data-state", "close");
95
100
  const R = (l) => {
96
101
  l.preventDefault(), l.key === "Escape" && !F && A();
97
102
  }, X = (l) => {
98
- if (C) return;
103
+ if (C)
104
+ return;
99
105
  const w = H("[data-fx-modal][data-state=open]");
100
106
  for (const y of w)
101
107
  if (y !== l) {
@@ -131,7 +137,8 @@ var Z = (t, e, n) => {
131
137
  }
132
138
  });
133
139
  const w = (E = b == null ? void 0 : b()) == null ? void 0 : E.cancelAction;
134
- if (l || w) return;
140
+ if (l || w)
141
+ return;
135
142
  const y = () => {
136
143
  k(t, o, "close"), V(C, p, t), S || W(i), B(t, "modal-close", { modalId: t.id });
137
144
  }, M = () => {
@@ -178,7 +185,8 @@ var v = class v2 {
178
185
  c(this, "options");
179
186
  c(this, "state");
180
187
  const d = typeof e == "string" ? r(e) : e;
181
- if (!(d instanceof HTMLElement)) throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
188
+ if (!(d instanceof HTMLElement))
189
+ throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
182
190
  this.modalElement = d, this.options = n, this.state = (n == null ? void 0 : n.defaultState) || this.modalElement.dataset.state || "close";
183
191
  const s = O.getInstance("modal", this.modalElement);
184
192
  if (s)
@@ -190,7 +198,8 @@ var v = class v2 {
190
198
  };
191
199
  c(v, "autoInit", (e = "[data-fx-modal]") => {
192
200
  const n = H(e);
193
- for (const a of n) new v(a);
201
+ for (const a of n)
202
+ new v(a);
194
203
  }), /**
195
204
  * Creates and initializes a new Modal instance
196
205
  * @param modal - The modal element or selector string
@@ -212,11 +221,38 @@ var Y = v;
212
221
  // src/index.js
213
222
  function Modal(Alpine) {
214
223
  Alpine.directive("modal", (el, {}, { cleanup }) => {
215
- const modal_ = new Y(el);
224
+ const modalId = el.getAttribute("data-modal-id");
225
+ if (!modalId) {
226
+ console.error("\u274C data-modal-id is required but missing on element:", el);
227
+ return;
228
+ }
229
+ const modalInstance = new Y(el);
230
+ if (!Alpine.store("modals")) {
231
+ Alpine.store("modals", {});
232
+ }
233
+ Alpine.store("modals")[modalId] = modalInstance;
234
+ const openHandler = () => modalInstance.showModal();
235
+ const closeHandler = () => modalInstance.hideModal();
236
+ document.addEventListener(`modal:${modalId}:open`, openHandler);
237
+ document.addEventListener(`modal:${modalId}:close`, closeHandler);
216
238
  cleanup(() => {
217
- modal_.cleanup();
239
+ document.removeEventListener(`modal:${modalId}:open`, openHandler);
240
+ document.removeEventListener(`modal:${modalId}:close`, closeHandler);
241
+ modalInstance.cleanup();
242
+ delete Alpine.store("modals")[modalId];
218
243
  });
219
244
  });
245
+ Alpine.magic("modal", () => (id) => {
246
+ if (!Alpine.store("modals")) {
247
+ console.warn("\u26A0\uFE0F Alpine store for modals is not initialized.");
248
+ return null;
249
+ }
250
+ if (!Alpine.store("modals")[id]) {
251
+ console.warn(`\u26A0\uFE0F No modal instance found for ID: ${id}`);
252
+ return null;
253
+ }
254
+ return Alpine.store("modals")[id];
255
+ });
220
256
  }
221
257
  var src_default = Modal;
222
258
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flexilla/alpine-modal",
3
- "version": "0.0.0",
3
+ "version": "0.0.1",
4
4
  "description": "AlpineJS plugin for creating Modal, Dialog, alert dialog components",
5
5
  "type": "module",
6
6
  "private": false,
@@ -66,5 +66,5 @@
66
66
  "dependencies": {
67
67
  "@flexilla/modal": "^2.0.9"
68
68
  },
69
- "gitHead": "3c7ea3f74d67ac5d9ab2817d747ad7127eb542b5"
69
+ "gitHead": "2de9f4208852d8b159dfd7a84c4e8d03f9d53a86"
70
70
  }
package/src/index.js CHANGED
@@ -2,11 +2,45 @@ import { Modal as FlexillaModal } from "@flexilla/modal";
2
2
 
3
3
  function Modal(Alpine) {
4
4
  Alpine.directive("modal", (el, {}, { cleanup }) => {
5
- const modal_ = new FlexillaModal(el);
5
+ const modalId = el.getAttribute("data-modal-id");
6
+
7
+ if (!modalId) {
8
+ console.error("❌ data-modal-id is required but missing on element:", el);
9
+ return;
10
+ }
11
+
12
+ const modalInstance = new FlexillaModal(el);
13
+ if (!Alpine.store("modals")) {
14
+ Alpine.store("modals", {});
15
+ }
16
+
17
+ Alpine.store("modals")[modalId] = modalInstance;
18
+
19
+ const openHandler = () => modalInstance.showModal();
20
+ const closeHandler = () => modalInstance.hideModal();
21
+
22
+ document.addEventListener(`modal:${modalId}:open`, openHandler);
23
+ document.addEventListener(`modal:${modalId}:close`, closeHandler);
24
+
6
25
  cleanup(() => {
7
- modal_.cleanup()
26
+ document.removeEventListener(`modal:${modalId}:open`, openHandler);
27
+ document.removeEventListener(`modal:${modalId}:close`, closeHandler);
28
+ modalInstance.cleanup();
29
+ delete Alpine.store("modals")[modalId];
8
30
  });
9
31
  });
32
+
33
+ Alpine.magic("modal", () => (id) => {
34
+ if (!Alpine.store("modals")) {
35
+ console.warn("⚠️ Alpine store for modals is not initialized.");
36
+ return null;
37
+ }
38
+ if (!Alpine.store("modals")[id]) {
39
+ console.warn(`⚠️ No modal instance found for ID: ${id}`);
40
+ return null;
41
+ }
42
+ return Alpine.store("modals")[id];
43
+ });
10
44
  }
11
45
 
12
- export default Modal;
46
+ export default Modal;