@flexilla/alpine-offcanvas 0.0.0

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 (8) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +45 -0
  3. package/dist/cdn.js +279 -0
  4. package/dist/cdn.min.js +1 -0
  5. package/dist/module.cjs.js +300 -0
  6. package/dist/module.esm.js +278 -0
  7. package/package.json +64 -0
  8. package/src/index.js +12 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024-2025 Unoforge
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,45 @@
1
+ <h1 align="center">Alpine Offcanvas</h1>
2
+
3
+ <p align="center">
4
+ Simple Interactif Offcanvas Directive for <a href="https://alpinejs.dev">Alpine.js</a>
5
+ </p>
6
+
7
+
8
+ ## Installation
9
+
10
+ ### CDN
11
+
12
+ Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
13
+
14
+ ```html
15
+
16
+ ```
17
+
18
+ ### NPM
19
+
20
+ ```shell
21
+ npm install @flexilla/alpine-offcanvas
22
+ ```
23
+
24
+ Add the `x-offcanvas` directive to your project by importing the package **before** starting Alpine.
25
+
26
+ ```js
27
+ import Alpine from 'alpinejs';
28
+ import PluginOffcanvas from '@flexilla/alpine-offcanvas';
29
+
30
+ Alpine.plugin(PluginOffcanvas);
31
+
32
+ Alpine.start();
33
+ ```
34
+
35
+ ## Usage
36
+
37
+ ```html
38
+
39
+ ```
40
+
41
+ ## License
42
+
43
+ Copyright (c) 2025 Johnkat MJ and contributors.
44
+
45
+ Licensed under the MIT license, see [LICENSE](LICENSE) for details.
package/dist/cdn.js ADDED
@@ -0,0 +1,279 @@
1
+ (() => {
2
+ // ../../node_modules/@flexilla/offcanvas/dist/offcanvas.js
3
+ var b = Object.defineProperty;
4
+ var w = (s, t, e) => t in s ? b(s, t, { enumerable: true, configurable: true, writable: true, value: e }) : s[t] = e;
5
+ var o = (s, t, e) => w(s, typeof t != "symbol" ? t + "" : t, e);
6
+ var m = (s, t = document.body) => t.querySelector(s);
7
+ var d = (s, t = document.body) => Array.from(t.querySelectorAll(s));
8
+ var y = ({
9
+ newElement: s,
10
+ existingElement: t
11
+ }) => {
12
+ if (!(s instanceof HTMLElement) || !(t instanceof HTMLElement))
13
+ throw new Error("Both parameters must be valid HTML elements.");
14
+ const e = t.parentElement;
15
+ if (e) e.insertBefore(s, t);
16
+ else throw new Error("Existing element must have a parent element.");
17
+ };
18
+ var k = ({
19
+ element: s,
20
+ callback: t,
21
+ type: e,
22
+ keysCheck: n
23
+ }) => {
24
+ const a = getComputedStyle(s), i = a.transition;
25
+ if (i !== "none" && i !== "" && !n.includes(i)) {
26
+ const l = "transitionend", f = () => {
27
+ s.removeEventListener(l, f), t();
28
+ };
29
+ s.addEventListener(l, f, { once: true });
30
+ } else
31
+ t();
32
+ };
33
+ var O = ({
34
+ element: s,
35
+ callback: t
36
+ }) => {
37
+ k({
38
+ element: s,
39
+ callback: t,
40
+ type: "transition",
41
+ keysCheck: ["all 0s ease 0s", "all"]
42
+ });
43
+ };
44
+ var v = (s, t, e) => {
45
+ const n = new CustomEvent(t, { detail: e });
46
+ s.dispatchEvent(n);
47
+ };
48
+ var A = (s) => {
49
+ var t;
50
+ return (t = s.parentElement) == null ? void 0 : t.removeChild(s);
51
+ };
52
+ var p = (s) => {
53
+ s.setAttribute("data-state", "invisible"), O({
54
+ element: s,
55
+ callback() {
56
+ A(s);
57
+ }
58
+ });
59
+ };
60
+ var B = (s, t) => {
61
+ const e = s;
62
+ if (e === "" || !e) return;
63
+ const n = document.createElement("div");
64
+ 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;
65
+ const a = e.split(" ");
66
+ return e !== "" && n.classList.add(...a), n;
67
+ };
68
+ var C = (s, t, e) => {
69
+ s.setAttribute("aria-hidden", e === "open" ? "false" : "true"), s.setAttribute("data-state", e), t || S(e);
70
+ };
71
+ var S = (s) => {
72
+ document.body.style.overflow = s === "open" ? "hidden" : "", document.body.style.overflowY = s === "open" ? "hidden" : "auto";
73
+ };
74
+ var x = (s, t) => {
75
+ if (s === t) return;
76
+ s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "close");
77
+ const e = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s.getAttribute("id")}]`, s.parentElement);
78
+ e instanceof HTMLElement && p(e);
79
+ };
80
+ var I = (s) => {
81
+ const t = d("[data-fx-offcanvas][data-state=open]");
82
+ if (!(t.length <= 0))
83
+ for (const e of t) x(e, s);
84
+ };
85
+ var h = class {
86
+ static initGlobalRegistry() {
87
+ window.$flexillaInstances || (window.$flexillaInstances = {});
88
+ }
89
+ static register(t, e, n) {
90
+ return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
91
+ }
92
+ static getInstance(t, e) {
93
+ var n, a;
94
+ return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
95
+ (i) => i.element === e
96
+ )) == null ? void 0 : a.instance;
97
+ }
98
+ static removeInstance(t, e) {
99
+ this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
100
+ (n) => n.element !== e
101
+ ));
102
+ }
103
+ };
104
+ var c = class c2 {
105
+ /**
106
+ * Creates an instance of Offcanvas.
107
+ * @param offcanvas - The offcanvas element selector or HTMLElement
108
+ * @param options - Configuration options for the offcanvas
109
+ * @throws {Error} When the provided element is not a valid HTMLElement
110
+ *
111
+ * @example
112
+ * ```ts
113
+ * const offcanvas = new Offcanvas('#sidebar', {
114
+ * allowBodyScroll: true, // Allow scrolling when offcanvas is open
115
+ * staticBackdrop: false, // Close when clicking outside
116
+ * backdrop: 'dark', // Backdrop appearance
117
+ * onShow: () => console.log('Offcanvas shown'),
118
+ * onHide: () => console.log('Offcanvas hidden')
119
+ * });
120
+ * ```
121
+ */
122
+ constructor(t, e = {}) {
123
+ o(this, "offCanvasElement");
124
+ o(this, "offCanvasTriggers");
125
+ o(this, "offCanvasCloseBtns");
126
+ o(this, "allowBodyScroll");
127
+ o(this, "staticBackdrop");
128
+ o(this, "backdrop");
129
+ o(this, "options");
130
+ o(this, "closeWhenClickOutSide", (t2) => {
131
+ const e2 = this.offCanvasElement.getAttribute("data-state") === "open", n2 = !this.offCanvasElement.contains(t2.target) && ![...this.offCanvasTriggers].includes(t2.target);
132
+ e2 && n2 && this.closeOffCanvas();
133
+ });
134
+ o(this, "closeOffCanvas", () => {
135
+ var i2, l2, f2, r2, u;
136
+ let t2 = false;
137
+ if (v(this.offCanvasElement, "offcanvas-before-hide", {
138
+ offcanvasId: this.offCanvasElement.id,
139
+ setExitAction: (g) => {
140
+ t2 = g;
141
+ }
142
+ }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2) return;
143
+ const n2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${n2}]`);
144
+ a2 instanceof HTMLElement && p(a2), C(
145
+ this.offCanvasElement,
146
+ this.allowBodyScroll,
147
+ "close"
148
+ ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (u = (r2 = this.options).onHide) == null || u.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
149
+ });
150
+ o(this, "closeWithEsc", (t2) => {
151
+ t2.preventDefault(), t2.key === "Escape" && this.closeOffCanvas();
152
+ });
153
+ o(this, "changeState", () => {
154
+ this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
155
+ });
156
+ const n = typeof t == "string" ? m(t) : t;
157
+ if (!(n instanceof HTMLElement)) throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
158
+ const a = h.getInstance("offcanvas", n);
159
+ if (a)
160
+ return a;
161
+ this.options = e;
162
+ const { staticBackdrop: i, allowBodyScroll: l, backdrop: f } = this.options;
163
+ this.offCanvasElement = n, this.setupAttributes(), this.staticBackdrop = i || n.hasAttribute("data-static-backdrop") && n.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || n.hasAttribute("data-allow-body-scroll") && n.dataset.allowBodyScroll !== "false" || false;
164
+ const r = this.offCanvasElement.getAttribute("id");
165
+ this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = f || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.setupOffcanvas(), h.register("offcanvas", this.offCanvasElement, this);
166
+ }
167
+ findOffCanvasElements(t, e, n, a) {
168
+ return e ? d(`${t}`, a) : d(`${t}[data-target=${n}]`);
169
+ }
170
+ setupAttributes() {
171
+ this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
172
+ }
173
+ openOffCanvas() {
174
+ var n, a, i, l;
175
+ (a = (n = this.options).beforeShow) == null || a.call(n), I(this.offCanvasElement), C(
176
+ this.offCanvasElement,
177
+ this.allowBodyScroll,
178
+ "open"
179
+ );
180
+ const t = this.offCanvasElement.getAttribute("id"), e = B(
181
+ this.backdrop,
182
+ t
183
+ );
184
+ 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 });
185
+ }
186
+ initCloseBtns() {
187
+ for (const t of this.offCanvasCloseBtns) t.addEventListener("click", this.closeOffCanvas);
188
+ }
189
+ initTriggers() {
190
+ for (const t of this.offCanvasTriggers) t.addEventListener("click", this.changeState);
191
+ }
192
+ setupOffcanvas() {
193
+ this.initTriggers(), this.initCloseBtns();
194
+ }
195
+ /**
196
+ * Opens the offcanvas element.
197
+ * This method will trigger the beforeShow callback if provided,
198
+ * show the backdrop if configured, and finally trigger the onShow callback.
199
+ *
200
+ * @example
201
+ * ```ts
202
+ * const offcanvas = new Offcanvas('#sidebar');
203
+ * offcanvas.open();
204
+ * ```
205
+ */
206
+ open() {
207
+ this.openOffCanvas();
208
+ }
209
+ /**
210
+ * Closes the offcanvas element.
211
+ * This method will trigger the beforeHide callback if provided,
212
+ * remove the backdrop if present, and finally trigger the onHide callback.
213
+ *
214
+ * @example
215
+ * ```ts
216
+ * const offcanvas = new Offcanvas('#sidebar');
217
+ * offcanvas.close();
218
+ * ```
219
+ */
220
+ close() {
221
+ this.closeOffCanvas();
222
+ }
223
+ /**
224
+ * Cleans up the offcanvas instance by removing event listeners and references.
225
+ * Call this method when the offcanvas component is no longer needed to prevent memory leaks.
226
+ *
227
+ * @example
228
+ * ```ts
229
+ * const offcanvas = new Offcanvas('#sidebar');
230
+ * // ... use offcanvas ...
231
+ * offcanvas.cleanup();
232
+ * ```
233
+ */
234
+ cleanup() {
235
+ for (const t of this.offCanvasTriggers)
236
+ t.removeEventListener("click", this.changeState);
237
+ for (const t of this.offCanvasCloseBtns)
238
+ t.removeEventListener("click", this.closeOffCanvas);
239
+ document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), h.removeInstance("offcanvas", this.offCanvasElement);
240
+ }
241
+ };
242
+ o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
243
+ const e = d(t);
244
+ for (const n of e) new c(n);
245
+ }), /**
246
+ * Creates a new instance of Offcanvas with the given element and options.
247
+ * This is an alternative to using the constructor directly.
248
+ *
249
+ * @param offcanvas - The offcanvas element selector or HTMLElement
250
+ * @param options - Configuration options for the offcanvas
251
+ * @returns A new Offcanvas instance
252
+ *
253
+ * @example
254
+ * ```ts
255
+ * const offcanvas = Offcanvas.init('#sidebar', {
256
+ * allowBodyScroll: true,
257
+ * staticBackdrop: false
258
+ * });
259
+ * ```
260
+ */
261
+ o(c, "init", (t, e = {}) => new c(t, e));
262
+ var E = c;
263
+
264
+ // src/index.js
265
+ function Offcanvas(Alpine) {
266
+ Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
267
+ const offcanvas_ = new E(el);
268
+ cleanup(() => {
269
+ offcanvas_.cleanup();
270
+ });
271
+ });
272
+ }
273
+ var src_default = Offcanvas;
274
+
275
+ // builds/cdn.js
276
+ document.addEventListener("alpine:init", () => {
277
+ src_default(window.Alpine);
278
+ });
279
+ })();
package/dist/cdn.min.js ADDED
@@ -0,0 +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)});})();
package/dist/module.cjs.js ADDED
@@ -0,0 +1,300 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+
19
+ // builds/module.js
20
+ var module_exports = {};
21
+ __export(module_exports, {
22
+ default: () => module_default
23
+ });
24
+ module.exports = __toCommonJS(module_exports);
25
+
26
+ // ../../node_modules/@flexilla/offcanvas/dist/offcanvas.js
27
+ var b = Object.defineProperty;
28
+ var w = (s, t, e) => t in s ? b(s, t, { enumerable: true, configurable: true, writable: true, value: e }) : s[t] = e;
29
+ var o = (s, t, e) => w(s, typeof t != "symbol" ? t + "" : t, e);
30
+ var m = (s, t = document.body) => t.querySelector(s);
31
+ var d = (s, t = document.body) => Array.from(t.querySelectorAll(s));
32
+ var y = ({
33
+ newElement: s,
34
+ existingElement: t
35
+ }) => {
36
+ if (!(s instanceof HTMLElement) || !(t instanceof HTMLElement))
37
+ throw new Error("Both parameters must be valid HTML elements.");
38
+ const e = t.parentElement;
39
+ if (e) e.insertBefore(s, t);
40
+ else throw new Error("Existing element must have a parent element.");
41
+ };
42
+ var k = ({
43
+ element: s,
44
+ callback: t,
45
+ type: e,
46
+ keysCheck: n
47
+ }) => {
48
+ const a = getComputedStyle(s), i = a.transition;
49
+ if (i !== "none" && i !== "" && !n.includes(i)) {
50
+ const l = "transitionend", f = () => {
51
+ s.removeEventListener(l, f), t();
52
+ };
53
+ s.addEventListener(l, f, { once: true });
54
+ } else
55
+ t();
56
+ };
57
+ var O = ({
58
+ element: s,
59
+ callback: t
60
+ }) => {
61
+ k({
62
+ element: s,
63
+ callback: t,
64
+ type: "transition",
65
+ keysCheck: ["all 0s ease 0s", "all"]
66
+ });
67
+ };
68
+ var v = (s, t, e) => {
69
+ const n = new CustomEvent(t, { detail: e });
70
+ s.dispatchEvent(n);
71
+ };
72
+ var A = (s) => {
73
+ var t;
74
+ return (t = s.parentElement) == null ? void 0 : t.removeChild(s);
75
+ };
76
+ var p = (s) => {
77
+ s.setAttribute("data-state", "invisible"), O({
78
+ element: s,
79
+ callback() {
80
+ A(s);
81
+ }
82
+ });
83
+ };
84
+ var B = (s, t) => {
85
+ const e = s;
86
+ if (e === "" || !e) return;
87
+ const n = document.createElement("div");
88
+ 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;
89
+ const a = e.split(" ");
90
+ return e !== "" && n.classList.add(...a), n;
91
+ };
92
+ var C = (s, t, e) => {
93
+ s.setAttribute("aria-hidden", e === "open" ? "false" : "true"), s.setAttribute("data-state", e), t || S(e);
94
+ };
95
+ var S = (s) => {
96
+ document.body.style.overflow = s === "open" ? "hidden" : "", document.body.style.overflowY = s === "open" ? "hidden" : "auto";
97
+ };
98
+ var x = (s, t) => {
99
+ if (s === t) return;
100
+ s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "close");
101
+ const e = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s.getAttribute("id")}]`, s.parentElement);
102
+ e instanceof HTMLElement && p(e);
103
+ };
104
+ var I = (s) => {
105
+ const t = d("[data-fx-offcanvas][data-state=open]");
106
+ if (!(t.length <= 0))
107
+ for (const e of t) x(e, s);
108
+ };
109
+ var h = class {
110
+ static initGlobalRegistry() {
111
+ window.$flexillaInstances || (window.$flexillaInstances = {});
112
+ }
113
+ static register(t, e, n) {
114
+ return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
115
+ }
116
+ static getInstance(t, e) {
117
+ var n, a;
118
+ return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
119
+ (i) => i.element === e
120
+ )) == null ? void 0 : a.instance;
121
+ }
122
+ static removeInstance(t, e) {
123
+ this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
124
+ (n) => n.element !== e
125
+ ));
126
+ }
127
+ };
128
+ var c = class c2 {
129
+ /**
130
+ * Creates an instance of Offcanvas.
131
+ * @param offcanvas - The offcanvas element selector or HTMLElement
132
+ * @param options - Configuration options for the offcanvas
133
+ * @throws {Error} When the provided element is not a valid HTMLElement
134
+ *
135
+ * @example
136
+ * ```ts
137
+ * const offcanvas = new Offcanvas('#sidebar', {
138
+ * allowBodyScroll: true, // Allow scrolling when offcanvas is open
139
+ * staticBackdrop: false, // Close when clicking outside
140
+ * backdrop: 'dark', // Backdrop appearance
141
+ * onShow: () => console.log('Offcanvas shown'),
142
+ * onHide: () => console.log('Offcanvas hidden')
143
+ * });
144
+ * ```
145
+ */
146
+ constructor(t, e = {}) {
147
+ o(this, "offCanvasElement");
148
+ o(this, "offCanvasTriggers");
149
+ o(this, "offCanvasCloseBtns");
150
+ o(this, "allowBodyScroll");
151
+ o(this, "staticBackdrop");
152
+ o(this, "backdrop");
153
+ o(this, "options");
154
+ o(this, "closeWhenClickOutSide", (t2) => {
155
+ const e2 = this.offCanvasElement.getAttribute("data-state") === "open", n2 = !this.offCanvasElement.contains(t2.target) && ![...this.offCanvasTriggers].includes(t2.target);
156
+ e2 && n2 && this.closeOffCanvas();
157
+ });
158
+ o(this, "closeOffCanvas", () => {
159
+ var i2, l2, f2, r2, u;
160
+ let t2 = false;
161
+ if (v(this.offCanvasElement, "offcanvas-before-hide", {
162
+ offcanvasId: this.offCanvasElement.id,
163
+ setExitAction: (g) => {
164
+ t2 = g;
165
+ }
166
+ }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2) return;
167
+ const n2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${n2}]`);
168
+ a2 instanceof HTMLElement && p(a2), C(
169
+ this.offCanvasElement,
170
+ this.allowBodyScroll,
171
+ "close"
172
+ ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (u = (r2 = this.options).onHide) == null || u.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
173
+ });
174
+ o(this, "closeWithEsc", (t2) => {
175
+ t2.preventDefault(), t2.key === "Escape" && this.closeOffCanvas();
176
+ });
177
+ o(this, "changeState", () => {
178
+ this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
179
+ });
180
+ const n = typeof t == "string" ? m(t) : t;
181
+ if (!(n instanceof HTMLElement)) throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
182
+ const a = h.getInstance("offcanvas", n);
183
+ if (a)
184
+ return a;
185
+ this.options = e;
186
+ const { staticBackdrop: i, allowBodyScroll: l, backdrop: f } = this.options;
187
+ this.offCanvasElement = n, this.setupAttributes(), this.staticBackdrop = i || n.hasAttribute("data-static-backdrop") && n.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || n.hasAttribute("data-allow-body-scroll") && n.dataset.allowBodyScroll !== "false" || false;
188
+ const r = this.offCanvasElement.getAttribute("id");
189
+ this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = f || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.setupOffcanvas(), h.register("offcanvas", this.offCanvasElement, this);
190
+ }
191
+ findOffCanvasElements(t, e, n, a) {
192
+ return e ? d(`${t}`, a) : d(`${t}[data-target=${n}]`);
193
+ }
194
+ setupAttributes() {
195
+ this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
196
+ }
197
+ openOffCanvas() {
198
+ var n, a, i, l;
199
+ (a = (n = this.options).beforeShow) == null || a.call(n), I(this.offCanvasElement), C(
200
+ this.offCanvasElement,
201
+ this.allowBodyScroll,
202
+ "open"
203
+ );
204
+ const t = this.offCanvasElement.getAttribute("id"), e = B(
205
+ this.backdrop,
206
+ t
207
+ );
208
+ 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 });
209
+ }
210
+ initCloseBtns() {
211
+ for (const t of this.offCanvasCloseBtns) t.addEventListener("click", this.closeOffCanvas);
212
+ }
213
+ initTriggers() {
214
+ for (const t of this.offCanvasTriggers) t.addEventListener("click", this.changeState);
215
+ }
216
+ setupOffcanvas() {
217
+ this.initTriggers(), this.initCloseBtns();
218
+ }
219
+ /**
220
+ * Opens the offcanvas element.
221
+ * This method will trigger the beforeShow callback if provided,
222
+ * show the backdrop if configured, and finally trigger the onShow callback.
223
+ *
224
+ * @example
225
+ * ```ts
226
+ * const offcanvas = new Offcanvas('#sidebar');
227
+ * offcanvas.open();
228
+ * ```
229
+ */
230
+ open() {
231
+ this.openOffCanvas();
232
+ }
233
+ /**
234
+ * Closes the offcanvas element.
235
+ * This method will trigger the beforeHide callback if provided,
236
+ * remove the backdrop if present, and finally trigger the onHide callback.
237
+ *
238
+ * @example
239
+ * ```ts
240
+ * const offcanvas = new Offcanvas('#sidebar');
241
+ * offcanvas.close();
242
+ * ```
243
+ */
244
+ close() {
245
+ this.closeOffCanvas();
246
+ }
247
+ /**
248
+ * Cleans up the offcanvas instance by removing event listeners and references.
249
+ * Call this method when the offcanvas component is no longer needed to prevent memory leaks.
250
+ *
251
+ * @example
252
+ * ```ts
253
+ * const offcanvas = new Offcanvas('#sidebar');
254
+ * // ... use offcanvas ...
255
+ * offcanvas.cleanup();
256
+ * ```
257
+ */
258
+ cleanup() {
259
+ for (const t of this.offCanvasTriggers)
260
+ t.removeEventListener("click", this.changeState);
261
+ for (const t of this.offCanvasCloseBtns)
262
+ t.removeEventListener("click", this.closeOffCanvas);
263
+ document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), h.removeInstance("offcanvas", this.offCanvasElement);
264
+ }
265
+ };
266
+ o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
267
+ const e = d(t);
268
+ for (const n of e) new c(n);
269
+ }), /**
270
+ * Creates a new instance of Offcanvas with the given element and options.
271
+ * This is an alternative to using the constructor directly.
272
+ *
273
+ * @param offcanvas - The offcanvas element selector or HTMLElement
274
+ * @param options - Configuration options for the offcanvas
275
+ * @returns A new Offcanvas instance
276
+ *
277
+ * @example
278
+ * ```ts
279
+ * const offcanvas = Offcanvas.init('#sidebar', {
280
+ * allowBodyScroll: true,
281
+ * staticBackdrop: false
282
+ * });
283
+ * ```
284
+ */
285
+ o(c, "init", (t, e = {}) => new c(t, e));
286
+ var E = c;
287
+
288
+ // src/index.js
289
+ function Offcanvas(Alpine) {
290
+ Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
291
+ const offcanvas_ = new E(el);
292
+ cleanup(() => {
293
+ offcanvas_.cleanup();
294
+ });
295
+ });
296
+ }
297
+ var src_default = Offcanvas;
298
+
299
+ // builds/module.js
300
+ var module_default = src_default;
package/dist/module.esm.js ADDED
@@ -0,0 +1,278 @@
1
+ // ../../node_modules/@flexilla/offcanvas/dist/offcanvas.js
2
+ var b = Object.defineProperty;
3
+ var w = (s, t, e) => t in s ? b(s, t, { enumerable: true, configurable: true, writable: true, value: e }) : s[t] = e;
4
+ var o = (s, t, e) => w(s, typeof t != "symbol" ? t + "" : t, e);
5
+ var m = (s, t = document.body) => t.querySelector(s);
6
+ var d = (s, t = document.body) => Array.from(t.querySelectorAll(s));
7
+ var y = ({
8
+ newElement: s,
9
+ existingElement: t
10
+ }) => {
11
+ if (!(s instanceof HTMLElement) || !(t instanceof HTMLElement))
12
+ throw new Error("Both parameters must be valid HTML elements.");
13
+ const e = t.parentElement;
14
+ if (e) e.insertBefore(s, t);
15
+ else throw new Error("Existing element must have a parent element.");
16
+ };
17
+ var k = ({
18
+ element: s,
19
+ callback: t,
20
+ type: e,
21
+ keysCheck: n
22
+ }) => {
23
+ const a = getComputedStyle(s), i = a.transition;
24
+ if (i !== "none" && i !== "" && !n.includes(i)) {
25
+ const l = "transitionend", f = () => {
26
+ s.removeEventListener(l, f), t();
27
+ };
28
+ s.addEventListener(l, f, { once: true });
29
+ } else
30
+ t();
31
+ };
32
+ var O = ({
33
+ element: s,
34
+ callback: t
35
+ }) => {
36
+ k({
37
+ element: s,
38
+ callback: t,
39
+ type: "transition",
40
+ keysCheck: ["all 0s ease 0s", "all"]
41
+ });
42
+ };
43
+ var v = (s, t, e) => {
44
+ const n = new CustomEvent(t, { detail: e });
45
+ s.dispatchEvent(n);
46
+ };
47
+ var A = (s) => {
48
+ var t;
49
+ return (t = s.parentElement) == null ? void 0 : t.removeChild(s);
50
+ };
51
+ var p = (s) => {
52
+ s.setAttribute("data-state", "invisible"), O({
53
+ element: s,
54
+ callback() {
55
+ A(s);
56
+ }
57
+ });
58
+ };
59
+ var B = (s, t) => {
60
+ const e = s;
61
+ if (e === "" || !e) return;
62
+ const n = document.createElement("div");
63
+ 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;
64
+ const a = e.split(" ");
65
+ return e !== "" && n.classList.add(...a), n;
66
+ };
67
+ var C = (s, t, e) => {
68
+ s.setAttribute("aria-hidden", e === "open" ? "false" : "true"), s.setAttribute("data-state", e), t || S(e);
69
+ };
70
+ var S = (s) => {
71
+ document.body.style.overflow = s === "open" ? "hidden" : "", document.body.style.overflowY = s === "open" ? "hidden" : "auto";
72
+ };
73
+ var x = (s, t) => {
74
+ if (s === t) return;
75
+ s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "close");
76
+ const e = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s.getAttribute("id")}]`, s.parentElement);
77
+ e instanceof HTMLElement && p(e);
78
+ };
79
+ var I = (s) => {
80
+ const t = d("[data-fx-offcanvas][data-state=open]");
81
+ if (!(t.length <= 0))
82
+ for (const e of t) x(e, s);
83
+ };
84
+ var h = class {
85
+ static initGlobalRegistry() {
86
+ window.$flexillaInstances || (window.$flexillaInstances = {});
87
+ }
88
+ static register(t, e, n) {
89
+ return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
90
+ }
91
+ static getInstance(t, e) {
92
+ var n, a;
93
+ return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
94
+ (i) => i.element === e
95
+ )) == null ? void 0 : a.instance;
96
+ }
97
+ static removeInstance(t, e) {
98
+ this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
99
+ (n) => n.element !== e
100
+ ));
101
+ }
102
+ };
103
+ var c = class c2 {
104
+ /**
105
+ * Creates an instance of Offcanvas.
106
+ * @param offcanvas - The offcanvas element selector or HTMLElement
107
+ * @param options - Configuration options for the offcanvas
108
+ * @throws {Error} When the provided element is not a valid HTMLElement
109
+ *
110
+ * @example
111
+ * ```ts
112
+ * const offcanvas = new Offcanvas('#sidebar', {
113
+ * allowBodyScroll: true, // Allow scrolling when offcanvas is open
114
+ * staticBackdrop: false, // Close when clicking outside
115
+ * backdrop: 'dark', // Backdrop appearance
116
+ * onShow: () => console.log('Offcanvas shown'),
117
+ * onHide: () => console.log('Offcanvas hidden')
118
+ * });
119
+ * ```
120
+ */
121
+ constructor(t, e = {}) {
122
+ o(this, "offCanvasElement");
123
+ o(this, "offCanvasTriggers");
124
+ o(this, "offCanvasCloseBtns");
125
+ o(this, "allowBodyScroll");
126
+ o(this, "staticBackdrop");
127
+ o(this, "backdrop");
128
+ o(this, "options");
129
+ o(this, "closeWhenClickOutSide", (t2) => {
130
+ const e2 = this.offCanvasElement.getAttribute("data-state") === "open", n2 = !this.offCanvasElement.contains(t2.target) && ![...this.offCanvasTriggers].includes(t2.target);
131
+ e2 && n2 && this.closeOffCanvas();
132
+ });
133
+ o(this, "closeOffCanvas", () => {
134
+ var i2, l2, f2, r2, u;
135
+ let t2 = false;
136
+ if (v(this.offCanvasElement, "offcanvas-before-hide", {
137
+ offcanvasId: this.offCanvasElement.id,
138
+ setExitAction: (g) => {
139
+ t2 = g;
140
+ }
141
+ }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2) return;
142
+ const n2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${n2}]`);
143
+ a2 instanceof HTMLElement && p(a2), C(
144
+ this.offCanvasElement,
145
+ this.allowBodyScroll,
146
+ "close"
147
+ ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (u = (r2 = this.options).onHide) == null || u.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
148
+ });
149
+ o(this, "closeWithEsc", (t2) => {
150
+ t2.preventDefault(), t2.key === "Escape" && this.closeOffCanvas();
151
+ });
152
+ o(this, "changeState", () => {
153
+ this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
154
+ });
155
+ const n = typeof t == "string" ? m(t) : t;
156
+ if (!(n instanceof HTMLElement)) throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
157
+ const a = h.getInstance("offcanvas", n);
158
+ if (a)
159
+ return a;
160
+ this.options = e;
161
+ const { staticBackdrop: i, allowBodyScroll: l, backdrop: f } = this.options;
162
+ this.offCanvasElement = n, this.setupAttributes(), this.staticBackdrop = i || n.hasAttribute("data-static-backdrop") && n.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || n.hasAttribute("data-allow-body-scroll") && n.dataset.allowBodyScroll !== "false" || false;
163
+ const r = this.offCanvasElement.getAttribute("id");
164
+ this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = f || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.setupOffcanvas(), h.register("offcanvas", this.offCanvasElement, this);
165
+ }
166
+ findOffCanvasElements(t, e, n, a) {
167
+ return e ? d(`${t}`, a) : d(`${t}[data-target=${n}]`);
168
+ }
169
+ setupAttributes() {
170
+ this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
171
+ }
172
+ openOffCanvas() {
173
+ var n, a, i, l;
174
+ (a = (n = this.options).beforeShow) == null || a.call(n), I(this.offCanvasElement), C(
175
+ this.offCanvasElement,
176
+ this.allowBodyScroll,
177
+ "open"
178
+ );
179
+ const t = this.offCanvasElement.getAttribute("id"), e = B(
180
+ this.backdrop,
181
+ t
182
+ );
183
+ 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 });
184
+ }
185
+ initCloseBtns() {
186
+ for (const t of this.offCanvasCloseBtns) t.addEventListener("click", this.closeOffCanvas);
187
+ }
188
+ initTriggers() {
189
+ for (const t of this.offCanvasTriggers) t.addEventListener("click", this.changeState);
190
+ }
191
+ setupOffcanvas() {
192
+ this.initTriggers(), this.initCloseBtns();
193
+ }
194
+ /**
195
+ * Opens the offcanvas element.
196
+ * This method will trigger the beforeShow callback if provided,
197
+ * show the backdrop if configured, and finally trigger the onShow callback.
198
+ *
199
+ * @example
200
+ * ```ts
201
+ * const offcanvas = new Offcanvas('#sidebar');
202
+ * offcanvas.open();
203
+ * ```
204
+ */
205
+ open() {
206
+ this.openOffCanvas();
207
+ }
208
+ /**
209
+ * Closes the offcanvas element.
210
+ * This method will trigger the beforeHide callback if provided,
211
+ * remove the backdrop if present, and finally trigger the onHide callback.
212
+ *
213
+ * @example
214
+ * ```ts
215
+ * const offcanvas = new Offcanvas('#sidebar');
216
+ * offcanvas.close();
217
+ * ```
218
+ */
219
+ close() {
220
+ this.closeOffCanvas();
221
+ }
222
+ /**
223
+ * Cleans up the offcanvas instance by removing event listeners and references.
224
+ * Call this method when the offcanvas component is no longer needed to prevent memory leaks.
225
+ *
226
+ * @example
227
+ * ```ts
228
+ * const offcanvas = new Offcanvas('#sidebar');
229
+ * // ... use offcanvas ...
230
+ * offcanvas.cleanup();
231
+ * ```
232
+ */
233
+ cleanup() {
234
+ for (const t of this.offCanvasTriggers)
235
+ t.removeEventListener("click", this.changeState);
236
+ for (const t of this.offCanvasCloseBtns)
237
+ t.removeEventListener("click", this.closeOffCanvas);
238
+ document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), h.removeInstance("offcanvas", this.offCanvasElement);
239
+ }
240
+ };
241
+ o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
242
+ const e = d(t);
243
+ for (const n of e) new c(n);
244
+ }), /**
245
+ * Creates a new instance of Offcanvas with the given element and options.
246
+ * This is an alternative to using the constructor directly.
247
+ *
248
+ * @param offcanvas - The offcanvas element selector or HTMLElement
249
+ * @param options - Configuration options for the offcanvas
250
+ * @returns A new Offcanvas instance
251
+ *
252
+ * @example
253
+ * ```ts
254
+ * const offcanvas = Offcanvas.init('#sidebar', {
255
+ * allowBodyScroll: true,
256
+ * staticBackdrop: false
257
+ * });
258
+ * ```
259
+ */
260
+ o(c, "init", (t, e = {}) => new c(t, e));
261
+ var E = c;
262
+
263
+ // src/index.js
264
+ function Offcanvas(Alpine) {
265
+ Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
266
+ const offcanvas_ = new E(el);
267
+ cleanup(() => {
268
+ offcanvas_.cleanup();
269
+ });
270
+ });
271
+ }
272
+ var src_default = Offcanvas;
273
+
274
+ // builds/module.js
275
+ var module_default = src_default;
276
+ export {
277
+ module_default as default
278
+ };
package/package.json ADDED
@@ -0,0 +1,64 @@
1
+ {
2
+ "name": "@flexilla/alpine-offcanvas",
3
+ "version": "0.0.0",
4
+ "description": "AlpineJS plugin for adding offcanvas functionality to your AlpineJS components",
5
+ "type": "module",
6
+ "private": false,
7
+ "publishConfig": {
8
+ "access": "public"
9
+ },
10
+ "license": "MIT",
11
+ "author": {
12
+ "name": "Johnkat MJ",
13
+ "url": "https://github.com/johnkat-mj"
14
+ },
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "git+https://github.com/unoforge/alpine-plugin.git"
18
+ },
19
+ "main": "src/index.js",
20
+ "module": "dist/module.esm.js",
21
+ "scripts": {
22
+ "build": "node ./scripts/build.js",
23
+ "watch": "node ./scripts/build.js --watch",
24
+ "lint": "eslint .",
25
+ "lint-fix": "eslint . --fix"
26
+ },
27
+ "bugs": {
28
+ "url": "https://github.com/unoforge/alpine-plugin/issues"
29
+ },
30
+ "homepage": "https://github.com/unoforge/alpine-plugin/packages/alpine-offcanvas/README.md",
31
+ "devDependencies": {
32
+ "brotli-size": "^4.0.0",
33
+ "esbuild": "^0.25.1",
34
+ "eslint-plugin-import": "^2.31.0",
35
+ "eslint-plugin-node": "^11.1.0",
36
+ "eslint-plugin-promise": "^7.2.1",
37
+ "eslint-plugin-standard": "^4.1.0",
38
+ "lint-staged": "^15.5.0"
39
+ },
40
+ "files": [
41
+ "LICENSE",
42
+ "README.md",
43
+ "src/index.js",
44
+ "package.json",
45
+ "dist"
46
+ ],
47
+ "keywords": [
48
+ "AlpineJS",
49
+ "Offcanvas",
50
+ "Alpine SliderOver",
51
+ "Toggle Slider",
52
+ "Alpine Plugin Offcanvas",
53
+ "Alpine Plugin",
54
+ "Alpinejs Pugin",
55
+ "component",
56
+ "interactive",
57
+ "intercative component",
58
+ "Flexilla"
59
+ ],
60
+ "dependencies": {
61
+ "@flexilla/offcanvas": "^2.0.10"
62
+ },
63
+ "gitHead": "3c7ea3f74d67ac5d9ab2817d747ad7127eb542b5"
64
+ }
package/src/index.js ADDED
@@ -0,0 +1,12 @@
1
+ import { OffCanvas as FlexillaOffcanvas } from "@flexilla/offcanvas";
2
+
3
+ function Offcanvas(Alpine) {
4
+ Alpine.directive("offcanvas", (el, {}, { cleanup }) => {
5
+ const offcanvas_ = new FlexillaOffcanvas(el)
6
+ cleanup(() => {
7
+ offcanvas_.cleanup()
8
+ });
9
+ });
10
+ }
11
+
12
+ export default Offcanvas;