@flexilla/alpine-offcanvas 0.0.0 → 0.0.1

package/dist/cdn.js

@@ -12,8 +12,10 @@
     if (!(s instanceof HTMLElement) || !(t instanceof HTMLElement))
       throw new Error("Both parameters must be valid HTML elements.");
     const e = t.parentElement;
-    if (e) e.insertBefore(s, t);
-    else throw new Error("Existing element must have a parent element.");
+    if (e)
+      e.insertBefore(s, t);
+    else
+      throw new Error("Existing element must have a parent element.");
   };
   var k = ({
     element: s,
@@ -59,9 +61,11 @@
   };
   var B = (s, t) => {
     const e = s;
-    if (e === "" || !e) return;
+    if (e === "" || !e)
+      return;
     const n = document.createElement("div");
-    if (n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "visible"), n.setAttribute("data-fx-offcanvas-overlay", ""), n.setAttribute("data-offcanvas-el", t), e === "") return;
+    if (n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "visible"), n.setAttribute("data-fx-offcanvas-overlay", ""), n.setAttribute("data-offcanvas-el", t), e === "")
+      return;
     const a = e.split(" ");
     return e !== "" && n.classList.add(...a), n;
   };
@@ -72,7 +76,8 @@
     document.body.style.overflow = s === "open" ? "hidden" : "", document.body.style.overflowY = s === "open" ? "hidden" : "auto";
   };
   var x = (s, t) => {
-    if (s === t) return;
+    if (s === t)
+      return;
     s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "close");
     const e = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s.getAttribute("id")}]`, s.parentElement);
     e instanceof HTMLElement && p(e);
@@ -80,7 +85,8 @@
   var I = (s) => {
     const t = d("[data-fx-offcanvas][data-state=open]");
     if (!(t.length <= 0))
-      for (const e of t) x(e, s);
+      for (const e of t)
+        x(e, s);
   };
   var h = class {
     static initGlobalRegistry() {
@@ -139,7 +145,8 @@
           setExitAction: (g) => {
             t2 = g;
           }
-        }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2) return;
+        }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2)
+          return;
         const n2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${n2}]`);
         a2 instanceof HTMLElement && p(a2), C(
           this.offCanvasElement,
@@ -154,7 +161,8 @@
         this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
       });
       const n = typeof t == "string" ? m(t) : t;
-      if (!(n instanceof HTMLElement)) throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
+      if (!(n instanceof HTMLElement))
+        throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
       const a = h.getInstance("offcanvas", n);
       if (a)
         return a;
@@ -184,10 +192,12 @@
       e instanceof HTMLElement && (y({ newElement: e, existingElement: this.offCanvasElement }), this.staticBackdrop || e.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), v(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
     }
     initCloseBtns() {
-      for (const t of this.offCanvasCloseBtns) t.addEventListener("click", this.closeOffCanvas);
+      for (const t of this.offCanvasCloseBtns)
+        t.addEventListener("click", this.closeOffCanvas);
     }
     initTriggers() {
-      for (const t of this.offCanvasTriggers) t.addEventListener("click", this.changeState);
+      for (const t of this.offCanvasTriggers)
+        t.addEventListener("click", this.changeState);
     }
     setupOffcanvas() {
       this.initTriggers(), this.initCloseBtns();
@@ -241,7 +251,8 @@
   };
   o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
     const e = d(t);
-    for (const n of e) new c(n);
+    for (const n of e)
+      new c(n);
   }), /**
   * Creates a new instance of Offcanvas with the given element and options.
   * This is an alternative to using the constructor directly.
@@ -264,11 +275,41 @@
   // src/index.js
   function Offcanvas(Alpine) {
     Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
+      const offcanvasId = el.getAttribute("id");
+      if (!modalId) {
+        console.error("\u274C id is required but missing on element:", el);
+        return;
+      }
       const offcanvas_ = new E(el);
+      if (!Alpine.store("sheets")) {
+        Alpine.store("sheets", {});
+      }
+      Alpine.store("sheets")[offcanvasId] = modal_;
+      const openHandler = () => offcanvas_.open();
+      const closeHandler = () => offcanvas_.close();
+      document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
+      document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
       cleanup(() => {
+        document.removeEventListener(`sheet:${modalId}:open`, openHandler);
+        document.removeEventListener(
+          `sheet:${offcanvasId}:close`,
+          closeHandler
+        );
         offcanvas_.cleanup();
+        delete Alpine.store("sheets")[modalId];
       });
     });
+    Alpine.magic("offcanvas", (el) => (id) => {
+      if (!Alpine.store("sheets")) {
+        console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized.");
+        return null;
+      }
+      if (!Alpine.store("sheets")[id]) {
+        console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${id}`);
+        return null;
+      }
+      return Alpine.store("sheets")[id];
+    });
   }
   var src_default = Offcanvas;
 

package/dist/cdn.min.js

@@ -1 +1 @@
-(()=>{var L=Object.defineProperty,I=(e,t,n)=>t in e?L(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,i=(e,t,n)=>I(e,typeof t!="symbol"?t+"":t,n),C=(e,t=document.body)=>t.querySelector(e),m=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),S=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let n=t.parentElement;if(n)n.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},T=({element:e,callback:t,type:n,keysCheck:a})=>{let s=getComputedStyle(e),o=s.transition;if(o!=="none"&&o!==""&&!a.includes(o)){let l="transitionend",d=()=>{e.removeEventListener(l,d),t()};e.addEventListener(l,d,{once:!0})}else t()},$=({element:e,callback:t})=>{T({element:e,callback:t,type:"transition",keysCheck:["all 0s ease 0s","all"]})},E=(e,t,n)=>{let a=new CustomEvent(t,{detail:n});e.dispatchEvent(a)},H=e=>{var t;return(t=e.parentElement)==null?void 0:t.removeChild(e)},k=e=>{e.setAttribute("data-state","invisible"),$({element:e,callback(){H(e)}})},M=(e,t)=>{let n=e;if(n===""||!n)return;let a=document.createElement("div");if(a.setAttribute("aria-hidden","true"),a.setAttribute("data-state","visible"),a.setAttribute("data-fx-offcanvas-overlay",""),a.setAttribute("data-offcanvas-el",t),n==="")return;let s=n.split(" ");return n!==""&&a.classList.add(...s),a},y=(e,t,n)=>{e.setAttribute("aria-hidden",n==="open"?"false":"true"),e.setAttribute("data-state",n),t||W(n)},W=e=>{document.body.style.overflow=e==="open"?"hidden":"",document.body.style.overflowY=e==="open"?"hidden":"auto"},G=(e,t)=>{if(e===t)return;e.setAttribute("aria-hidden","true"),e.setAttribute("data-state","close");let n=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${e.getAttribute("id")}]`,e.parentElement);n instanceof HTMLElement&&k(n)},R=e=>{let t=m("[data-fx-offcanvas][data-state=open]");if(!(t.length<=0))for(let n of t)G(n,e)},r=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,n,a){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,n)||(window.$flexillaInstances[t].push({element:n,instance:a}),a)}static getInstance(t,n){var a,s;return this.initGlobalRegistry(),(s=(a=window.$flexillaInstances[t])==null?void 0:a.find(o=>o.element===n))==null?void 0:s.instance}static removeInstance(t,n){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(a=>a.element!==n))}},c=class{constructor(t,n={}){i(this,"offCanvasElement"),i(this,"offCanvasTriggers"),i(this,"offCanvasCloseBtns"),i(this,"allowBodyScroll"),i(this,"staticBackdrop"),i(this,"backdrop"),i(this,"options"),i(this,"closeWhenClickOutSide",f=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",h=!this.offCanvasElement.contains(f.target)&&![...this.offCanvasTriggers].includes(f.target);v&&h&&this.closeOffCanvas()}),i(this,"closeOffCanvas",()=>{var f,v,h,b,w;let g=!1;if(E(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:B=>{g=B}}),((h=(v=(f=this.options).beforeHide)==null?void 0:v.call(f))==null?void 0:h.cancelAction)||g)return;let x=this.offCanvasElement.getAttribute("id"),u=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${x}]`);u instanceof HTMLElement&&k(u),y(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!u&&document.removeEventListener("click",this.closeWhenClickOutSide),(w=(b=this.options).onHide)==null||w.call(b),E(this.offCanvasElement,"offcanvas-close",{offcanvasId:this.offCanvasElement.id})}),i(this,"closeWithEsc",f=>{f.preventDefault(),f.key==="Escape"&&this.closeOffCanvas()}),i(this,"changeState",()=>{this.offCanvasElement.getAttribute("data-state")==="open"?this.closeOffCanvas():this.openOffCanvas()});let a=typeof t=="string"?C(t):t;if(!(a instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");let s=r.getInstance("offcanvas",a);if(s)return s;this.options=n;let{staticBackdrop:o,allowBodyScroll:l,backdrop:d}=this.options;this.offCanvasElement=a,this.setupAttributes(),this.staticBackdrop=o||a.hasAttribute("data-static-backdrop")&&a.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=l||a.hasAttribute("data-allow-body-scroll")&&a.dataset.allowBodyScroll!=="false"||!1;let p=this.offCanvasElement.getAttribute("id");this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,p),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,p,this.offCanvasElement),this.backdrop=d||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.setupOffcanvas(),r.register("offcanvas",this.offCanvasElement,this)}findOffCanvasElements(t,n,a,s){return n?m(`${t}`,s):m(`${t}[data-target=${a}]`)}setupAttributes(){this.offCanvasElement.hasAttribute("data-fx-offcanvas")||this.offCanvasElement.setAttribute("data-fx-offcanvas","")}openOffCanvas(){var t,n,a,s;(n=(t=this.options).beforeShow)==null||n.call(t),R(this.offCanvasElement),y(this.offCanvasElement,this.allowBodyScroll,"open");let o=this.offCanvasElement.getAttribute("id"),l=M(this.backdrop,o);l instanceof HTMLElement&&(S({newElement:l,existingElement:this.offCanvasElement}),this.staticBackdrop||l.addEventListener("click",this.closeOffCanvas)),document.addEventListener("keydown",this.closeWithEsc),(s=(a=this.options).onShow)==null||s.call(a),E(this.offCanvasElement,"offcanvas-open",{offcanvasId:this.offCanvasElement.id})}initCloseBtns(){for(let t of this.offCanvasCloseBtns)t.addEventListener("click",this.closeOffCanvas)}initTriggers(){for(let t of this.offCanvasTriggers)t.addEventListener("click",this.changeState)}setupOffcanvas(){this.initTriggers(),this.initCloseBtns()}open(){this.openOffCanvas()}close(){this.closeOffCanvas()}cleanup(){for(let t of this.offCanvasTriggers)t.removeEventListener("click",this.changeState);for(let t of this.offCanvasCloseBtns)t.removeEventListener("click",this.closeOffCanvas);document.removeEventListener("keydown",this.closeWithEsc),this.allowBodyScroll||document.removeEventListener("click",this.closeWhenClickOutSide),r.removeInstance("offcanvas",this.offCanvasElement)}};i(c,"autoInit",(e="[data-fx-offcanvas]")=>{let t=m(e);for(let n of t)new c(n)}),i(c,"init",(e,t={})=>new c(e,t));var A=c;function q(e){e.directive("offcanvas",(t,{},{cleanup:n})=>{let a=new A(t);n(()=>{a.cleanup()})})}var O=q;document.addEventListener("alpine:init",()=>{O(window.Alpine)});})();
+(()=>{var B=Object.defineProperty,A=(t,e,n)=>e in t?B(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,o=(t,e,n)=>A(t,typeof e!="symbol"?e+"":e,n),C=(t,e=document.body)=>e.querySelector(t),m=(t,e=document.body)=>Array.from(e.querySelectorAll(t)),S=({newElement:t,existingElement:e})=>{if(!(t instanceof HTMLElement)||!(e instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let n=e.parentElement;if(n)n.insertBefore(t,e);else throw new Error("Existing element must have a parent element.")},$=({element:t,callback:e,type:n,keysCheck:s})=>{let a=getComputedStyle(t),i=a.transition;if(i!=="none"&&i!==""&&!s.includes(i)){let l="transitionend",d=()=>{t.removeEventListener(l,d),e()};t.addEventListener(l,d,{once:!0})}else e()},T=({element:t,callback:e})=>{$({element:t,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},E=(t,e,n)=>{let s=new CustomEvent(e,{detail:n});t.dispatchEvent(s)},H=t=>{var e;return(e=t.parentElement)==null?void 0:e.removeChild(t)},k=t=>{t.setAttribute("data-state","invisible"),T({element:t,callback(){H(t)}})},M=(t,e)=>{let n=t;if(n===""||!n)return;let s=document.createElement("div");if(s.setAttribute("aria-hidden","true"),s.setAttribute("data-state","visible"),s.setAttribute("data-fx-offcanvas-overlay",""),s.setAttribute("data-offcanvas-el",e),n==="")return;let a=n.split(" ");return n!==""&&s.classList.add(...a),s},y=(t,e,n)=>{t.setAttribute("aria-hidden",n==="open"?"false":"true"),t.setAttribute("data-state",n),e||W(n)},W=t=>{document.body.style.overflow=t==="open"?"hidden":"",document.body.style.overflowY=t==="open"?"hidden":"auto"},G=(t,e)=>{if(t===e)return;t.setAttribute("aria-hidden","true"),t.setAttribute("data-state","close");let n=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`,t.parentElement);n instanceof HTMLElement&&k(n)},R=t=>{let e=m("[data-fx-offcanvas][data-state=open]");if(!(e.length<=0))for(let n of e)G(n,t)},c=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,n,s){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,n)||(window.$flexillaInstances[e].push({element:n,instance:s}),s)}static getInstance(e,n){var s,a;return this.initGlobalRegistry(),(a=(s=window.$flexillaInstances[e])==null?void 0:s.find(i=>i.element===n))==null?void 0:a.instance}static removeInstance(e,n){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(s=>s.element!==n))}},r=class{constructor(e,n={}){o(this,"offCanvasElement"),o(this,"offCanvasTriggers"),o(this,"offCanvasCloseBtns"),o(this,"allowBodyScroll"),o(this,"staticBackdrop"),o(this,"backdrop"),o(this,"options"),o(this,"closeWhenClickOutSide",f=>{let v=this.offCanvasElement.getAttribute("data-state")==="open",h=!this.offCanvasElement.contains(f.target)&&![...this.offCanvasTriggers].includes(f.target);v&&h&&this.closeOffCanvas()}),o(this,"closeOffCanvas",()=>{var f,v,h,b,w;let g=!1;if(E(this.offCanvasElement,"offcanvas-before-hide",{offcanvasId:this.offCanvasElement.id,setExitAction:x=>{g=x}}),((h=(v=(f=this.options).beforeHide)==null?void 0:v.call(f))==null?void 0:h.cancelAction)||g)return;let I=this.offCanvasElement.getAttribute("id"),u=C(`[data-fx-offcanvas-overlay][data-offcanvas-el=${I}]`);u instanceof HTMLElement&&k(u),y(this.offCanvasElement,this.allowBodyScroll,"close"),document.removeEventListener("keydown",this.closeWithEsc),!this.allowBodyScroll&&!u&&document.removeEventListener("click",this.closeWhenClickOutSide),(w=(b=this.options).onHide)==null||w.call(b),E(this.offCanvasElement,"offcanvas-close",{offcanvasId:this.offCanvasElement.id})}),o(this,"closeWithEsc",f=>{f.preventDefault(),f.key==="Escape"&&this.closeOffCanvas()}),o(this,"changeState",()=>{this.offCanvasElement.getAttribute("data-state")==="open"?this.closeOffCanvas():this.openOffCanvas()});let s=typeof e=="string"?C(e):e;if(!(s instanceof HTMLElement))throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");let a=c.getInstance("offcanvas",s);if(a)return a;this.options=n;let{staticBackdrop:i,allowBodyScroll:l,backdrop:d}=this.options;this.offCanvasElement=s,this.setupAttributes(),this.staticBackdrop=i||s.hasAttribute("data-static-backdrop")&&s.dataset.staticBackdrop!=="false"||!1,this.allowBodyScroll=l||s.hasAttribute("data-allow-body-scroll")&&s.dataset.allowBodyScroll!=="false"||!1;let p=this.offCanvasElement.getAttribute("id");this.offCanvasTriggers=this.findOffCanvasElements("[data-offcanvas-trigger]",!1,p),this.offCanvasCloseBtns=this.findOffCanvasElements("[data-offcanvas-close]",!0,p,this.offCanvasElement),this.backdrop=d||this.offCanvasElement.dataset.offcanvasBackdrop||"",this.setupOffcanvas(),c.register("offcanvas",this.offCanvasElement,this)}findOffCanvasElements(e,n,s,a){return n?m(`${e}`,a):m(`${e}[data-target=${s}]`)}setupAttributes(){this.offCanvasElement.hasAttribute("data-fx-offcanvas")||this.offCanvasElement.setAttribute("data-fx-offcanvas","")}openOffCanvas(){var e,n,s,a;(n=(e=this.options).beforeShow)==null||n.call(e),R(this.offCanvasElement),y(this.offCanvasElement,this.allowBodyScroll,"open");let i=this.offCanvasElement.getAttribute("id"),l=M(this.backdrop,i);l instanceof HTMLElement&&(S({newElement:l,existingElement:this.offCanvasElement}),this.staticBackdrop||l.addEventListener("click",this.closeOffCanvas)),document.addEventListener("keydown",this.closeWithEsc),(a=(s=this.options).onShow)==null||a.call(s),E(this.offCanvasElement,"offcanvas-open",{offcanvasId:this.offCanvasElement.id})}initCloseBtns(){for(let e of this.offCanvasCloseBtns)e.addEventListener("click",this.closeOffCanvas)}initTriggers(){for(let e of this.offCanvasTriggers)e.addEventListener("click",this.changeState)}setupOffcanvas(){this.initTriggers(),this.initCloseBtns()}open(){this.openOffCanvas()}close(){this.closeOffCanvas()}cleanup(){for(let e of this.offCanvasTriggers)e.removeEventListener("click",this.changeState);for(let e of this.offCanvasCloseBtns)e.removeEventListener("click",this.closeOffCanvas);document.removeEventListener("keydown",this.closeWithEsc),this.allowBodyScroll||document.removeEventListener("click",this.closeWhenClickOutSide),c.removeInstance("offcanvas",this.offCanvasElement)}};o(r,"autoInit",(t="[data-fx-offcanvas]")=>{let e=m(t);for(let n of e)new r(n)}),o(r,"init",(t,e={})=>new r(t,e));var O=r;function q(t){t.directive("offcanvas",(e,{},{cleanup:n})=>{let s=e.getAttribute("id");if(!modalId){console.error("\u274C id is required but missing on element:",e);return}let a=new O(e);t.store("sheets")||t.store("sheets",{}),t.store("sheets")[s]=modal_;let i=()=>a.open(),l=()=>a.close();document.addEventListener(`sheet:${s}:open`,i),document.addEventListener(`sheet:${s}:close`,l),n(()=>{document.removeEventListener(`sheet:${modalId}:open`,i),document.removeEventListener(`sheet:${s}:close`,l),a.cleanup(),delete t.store("sheets")[modalId]})}),t.magic("offcanvas",e=>n=>t.store("sheets")?t.store("sheets")[n]?t.store("sheets")[n]:(console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${n}`),null):(console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized."),null))}var L=q;document.addEventListener("alpine:init",()=>{L(window.Alpine)});})();

package/dist/module.cjs.js

@@ -36,8 +36,10 @@ var y = ({
   if (!(s instanceof HTMLElement) || !(t instanceof HTMLElement))
     throw new Error("Both parameters must be valid HTML elements.");
   const e = t.parentElement;
-  if (e) e.insertBefore(s, t);
-  else throw new Error("Existing element must have a parent element.");
+  if (e)
+    e.insertBefore(s, t);
+  else
+    throw new Error("Existing element must have a parent element.");
 };
 var k = ({
   element: s,
@@ -83,9 +85,11 @@ var p = (s) => {
 };
 var B = (s, t) => {
   const e = s;
-  if (e === "" || !e) return;
+  if (e === "" || !e)
+    return;
   const n = document.createElement("div");
-  if (n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "visible"), n.setAttribute("data-fx-offcanvas-overlay", ""), n.setAttribute("data-offcanvas-el", t), e === "") return;
+  if (n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "visible"), n.setAttribute("data-fx-offcanvas-overlay", ""), n.setAttribute("data-offcanvas-el", t), e === "")
+    return;
   const a = e.split(" ");
   return e !== "" && n.classList.add(...a), n;
 };
@@ -96,7 +100,8 @@ var S = (s) => {
   document.body.style.overflow = s === "open" ? "hidden" : "", document.body.style.overflowY = s === "open" ? "hidden" : "auto";
 };
 var x = (s, t) => {
-  if (s === t) return;
+  if (s === t)
+    return;
   s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "close");
   const e = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s.getAttribute("id")}]`, s.parentElement);
   e instanceof HTMLElement && p(e);
@@ -104,7 +109,8 @@ var x = (s, t) => {
 var I = (s) => {
   const t = d("[data-fx-offcanvas][data-state=open]");
   if (!(t.length <= 0))
-    for (const e of t) x(e, s);
+    for (const e of t)
+      x(e, s);
 };
 var h = class {
   static initGlobalRegistry() {
@@ -163,7 +169,8 @@ var c = class c2 {
         setExitAction: (g) => {
           t2 = g;
         }
-      }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2) return;
+      }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2)
+        return;
       const n2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${n2}]`);
       a2 instanceof HTMLElement && p(a2), C(
         this.offCanvasElement,
@@ -178,7 +185,8 @@ var c = class c2 {
       this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
     });
     const n = typeof t == "string" ? m(t) : t;
-    if (!(n instanceof HTMLElement)) throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
+    if (!(n instanceof HTMLElement))
+      throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
     const a = h.getInstance("offcanvas", n);
     if (a)
       return a;
@@ -208,10 +216,12 @@ var c = class c2 {
     e instanceof HTMLElement && (y({ newElement: e, existingElement: this.offCanvasElement }), this.staticBackdrop || e.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), v(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
   }
   initCloseBtns() {
-    for (const t of this.offCanvasCloseBtns) t.addEventListener("click", this.closeOffCanvas);
+    for (const t of this.offCanvasCloseBtns)
+      t.addEventListener("click", this.closeOffCanvas);
   }
   initTriggers() {
-    for (const t of this.offCanvasTriggers) t.addEventListener("click", this.changeState);
+    for (const t of this.offCanvasTriggers)
+      t.addEventListener("click", this.changeState);
   }
   setupOffcanvas() {
     this.initTriggers(), this.initCloseBtns();
@@ -265,7 +275,8 @@ var c = class c2 {
 };
 o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
   const e = d(t);
-  for (const n of e) new c(n);
+  for (const n of e)
+    new c(n);
 }), /**
 * Creates a new instance of Offcanvas with the given element and options.
 * This is an alternative to using the constructor directly.
@@ -288,11 +299,41 @@ var E = c;
 // src/index.js
 function Offcanvas(Alpine) {
   Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
+    const offcanvasId = el.getAttribute("id");
+    if (!modalId) {
+      console.error("\u274C id is required but missing on element:", el);
+      return;
+    }
     const offcanvas_ = new E(el);
+    if (!Alpine.store("sheets")) {
+      Alpine.store("sheets", {});
+    }
+    Alpine.store("sheets")[offcanvasId] = modal_;
+    const openHandler = () => offcanvas_.open();
+    const closeHandler = () => offcanvas_.close();
+    document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
+    document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
     cleanup(() => {
+      document.removeEventListener(`sheet:${modalId}:open`, openHandler);
+      document.removeEventListener(
+        `sheet:${offcanvasId}:close`,
+        closeHandler
+      );
       offcanvas_.cleanup();
+      delete Alpine.store("sheets")[modalId];
     });
   });
+  Alpine.magic("offcanvas", (el) => (id) => {
+    if (!Alpine.store("sheets")) {
+      console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized.");
+      return null;
+    }
+    if (!Alpine.store("sheets")[id]) {
+      console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${id}`);
+      return null;
+    }
+    return Alpine.store("sheets")[id];
+  });
 }
 var src_default = Offcanvas;
 

package/dist/module.esm.js

@@ -11,8 +11,10 @@ var y = ({
   if (!(s instanceof HTMLElement) || !(t instanceof HTMLElement))
     throw new Error("Both parameters must be valid HTML elements.");
   const e = t.parentElement;
-  if (e) e.insertBefore(s, t);
-  else throw new Error("Existing element must have a parent element.");
+  if (e)
+    e.insertBefore(s, t);
+  else
+    throw new Error("Existing element must have a parent element.");
 };
 var k = ({
   element: s,
@@ -58,9 +60,11 @@ var p = (s) => {
 };
 var B = (s, t) => {
   const e = s;
-  if (e === "" || !e) return;
+  if (e === "" || !e)
+    return;
   const n = document.createElement("div");
-  if (n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "visible"), n.setAttribute("data-fx-offcanvas-overlay", ""), n.setAttribute("data-offcanvas-el", t), e === "") return;
+  if (n.setAttribute("aria-hidden", "true"), n.setAttribute("data-state", "visible"), n.setAttribute("data-fx-offcanvas-overlay", ""), n.setAttribute("data-offcanvas-el", t), e === "")
+    return;
   const a = e.split(" ");
   return e !== "" && n.classList.add(...a), n;
 };
@@ -71,7 +75,8 @@ var S = (s) => {
   document.body.style.overflow = s === "open" ? "hidden" : "", document.body.style.overflowY = s === "open" ? "hidden" : "auto";
 };
 var x = (s, t) => {
-  if (s === t) return;
+  if (s === t)
+    return;
   s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "close");
   const e = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s.getAttribute("id")}]`, s.parentElement);
   e instanceof HTMLElement && p(e);
@@ -79,7 +84,8 @@ var x = (s, t) => {
 var I = (s) => {
   const t = d("[data-fx-offcanvas][data-state=open]");
   if (!(t.length <= 0))
-    for (const e of t) x(e, s);
+    for (const e of t)
+      x(e, s);
 };
 var h = class {
   static initGlobalRegistry() {
@@ -138,7 +144,8 @@ var c = class c2 {
         setExitAction: (g) => {
           t2 = g;
         }
-      }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2) return;
+      }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2)
+        return;
       const n2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${n2}]`);
       a2 instanceof HTMLElement && p(a2), C(
         this.offCanvasElement,
@@ -153,7 +160,8 @@ var c = class c2 {
       this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
     });
     const n = typeof t == "string" ? m(t) : t;
-    if (!(n instanceof HTMLElement)) throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
+    if (!(n instanceof HTMLElement))
+      throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
     const a = h.getInstance("offcanvas", n);
     if (a)
       return a;
@@ -183,10 +191,12 @@ var c = class c2 {
     e instanceof HTMLElement && (y({ newElement: e, existingElement: this.offCanvasElement }), this.staticBackdrop || e.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), v(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
   }
   initCloseBtns() {
-    for (const t of this.offCanvasCloseBtns) t.addEventListener("click", this.closeOffCanvas);
+    for (const t of this.offCanvasCloseBtns)
+      t.addEventListener("click", this.closeOffCanvas);
   }
   initTriggers() {
-    for (const t of this.offCanvasTriggers) t.addEventListener("click", this.changeState);
+    for (const t of this.offCanvasTriggers)
+      t.addEventListener("click", this.changeState);
   }
   setupOffcanvas() {
     this.initTriggers(), this.initCloseBtns();
@@ -240,7 +250,8 @@ var c = class c2 {
 };
 o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
   const e = d(t);
-  for (const n of e) new c(n);
+  for (const n of e)
+    new c(n);
 }), /**
 * Creates a new instance of Offcanvas with the given element and options.
 * This is an alternative to using the constructor directly.
@@ -263,11 +274,41 @@ var E = c;
 // src/index.js
 function Offcanvas(Alpine) {
   Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
+    const offcanvasId = el.getAttribute("id");
+    if (!modalId) {
+      console.error("\u274C id is required but missing on element:", el);
+      return;
+    }
     const offcanvas_ = new E(el);
+    if (!Alpine.store("sheets")) {
+      Alpine.store("sheets", {});
+    }
+    Alpine.store("sheets")[offcanvasId] = modal_;
+    const openHandler = () => offcanvas_.open();
+    const closeHandler = () => offcanvas_.close();
+    document.addEventListener(`sheet:${offcanvasId}:open`, openHandler);
+    document.addEventListener(`sheet:${offcanvasId}:close`, closeHandler);
     cleanup(() => {
+      document.removeEventListener(`sheet:${modalId}:open`, openHandler);
+      document.removeEventListener(
+        `sheet:${offcanvasId}:close`,
+        closeHandler
+      );
       offcanvas_.cleanup();
+      delete Alpine.store("sheets")[modalId];
     });
   });
+  Alpine.magic("offcanvas", (el) => (id) => {
+    if (!Alpine.store("sheets")) {
+      console.warn("\u26A0\uFE0F Alpine store for Offcanvas is not initialized.");
+      return null;
+    }
+    if (!Alpine.store("sheets")[id]) {
+      console.warn(`\u26A0\uFE0F No offcanvas instance found for ID: ${id}`);
+      return null;
+    }
+    return Alpine.store("sheets")[id];
+  });
 }
 var src_default = Offcanvas;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexilla/alpine-offcanvas",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "AlpineJS plugin for adding offcanvas functionality to your AlpineJS components",
   "type": "module",
   "private": false,
@@ -60,5 +60,5 @@
   "dependencies": {
     "@flexilla/offcanvas": "^2.0.10"
   },
-  "gitHead": "3c7ea3f74d67ac5d9ab2817d747ad7127eb542b5"
+  "gitHead": "2de9f4208852d8b159dfd7a84c4e8d03f9d53a86"
 }

package/src/index.js

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