@flexilla/alpine-offcanvas 0.3.0 → 0.3.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 (5) hide show
  1. package/dist/cdn.js +136 -122
  2. package/dist/cdn.min.js +1 -1
  3. package/dist/module.cjs.js +136 -122
  4. package/dist/module.esm.js +136 -122
  5. package/package.json +3 -4
package/dist/module.cjs.js CHANGED
@@ -24,159 +24,173 @@ __export(module_exports, {
24
24
  module.exports = __toCommonJS(module_exports);
25
25
 
26
26
  // ../../node_modules/@flexilla/offcanvas/dist/offcanvas.js
27
- var g = Object.defineProperty;
28
- var w = (t, e, n) => e in t ? g(t, e, { enumerable: true, configurable: true, writable: true, value: n }) : t[e] = n;
29
- var o = (t, e, n) => w(t, typeof e != "symbol" ? e + "" : e, n);
30
- var m = (t, e = document.body) => e.querySelector(t);
31
- var h = (t, e = document.body) => Array.from(e.querySelectorAll(t));
32
- var y = ({
33
- newElement: t,
34
- existingElement: e
27
+ var y = Object.defineProperty;
28
+ var A = (e, t, n) => t in e ? y(e, t, { enumerable: true, configurable: true, writable: true, value: n }) : e[t] = n;
29
+ var o = (e, t, n) => A(e, typeof t != "symbol" ? t + "" : t, n);
30
+ var u = (e, t = document.body) => t.querySelector(e);
31
+ var v = (e, t = document.body) => Array.from(t.querySelectorAll(e));
32
+ var k = ({
33
+ newElement: e,
34
+ existingElement: t
35
35
  }) => {
36
- if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
36
+ if (!(e instanceof HTMLElement) || !(t instanceof HTMLElement))
37
37
  throw new Error("Both parameters must be valid HTML elements.");
38
- const n = e.parentElement;
38
+ const n = t.parentElement;
39
39
  if (n)
40
- n.insertBefore(t, e);
40
+ n.insertBefore(e, t);
41
41
  else
42
42
  throw new Error("Existing element must have a parent element.");
43
43
  };
44
- var k = ({
45
- element: t,
46
- callback: e,
44
+ var O = ({
45
+ element: e,
46
+ callback: t,
47
47
  type: n,
48
48
  keysCheck: s
49
49
  }) => {
50
- const a = getComputedStyle(t), i = a.transition;
50
+ const a = getComputedStyle(e), i = a.transition;
51
51
  if (i !== "none" && i !== "" && !s.includes(i)) {
52
- const l = "transitionend", c = () => {
53
- t.removeEventListener(l, c), e();
52
+ const l = "transitionend", f = () => {
53
+ e.removeEventListener(l, f), t();
54
54
  };
55
- t.addEventListener(l, c, { once: true });
55
+ e.addEventListener(l, f, { once: true });
56
56
  } else
57
- e();
57
+ t();
58
58
  };
59
- var O = ({
60
- element: t,
61
- callback: e
59
+ var B = ({
60
+ element: e,
61
+ callback: t
62
62
  }) => {
63
- k({
64
- element: t,
65
- callback: e,
63
+ O({
64
+ element: e,
65
+ callback: t,
66
66
  type: "transition",
67
67
  keysCheck: ["all 0s ease 0s", "all"]
68
68
  });
69
69
  };
70
- var v = (t, e, n) => {
71
- const s = new CustomEvent(e, { detail: n });
72
- t.dispatchEvent(s);
70
+ var h = (e, t, n) => {
71
+ const s = new CustomEvent(t, { detail: n });
72
+ e.dispatchEvent(s);
73
73
  };
74
- function B(t) {
75
- const e = () => {
74
+ function I(e) {
75
+ const t = () => {
76
76
  document.querySelector(
77
77
  "[data-fx-component]:not([data-component-initialized])"
78
- ) ? requestAnimationFrame(e) : t();
78
+ ) ? requestAnimationFrame(t) : e();
79
79
  };
80
- e();
80
+ t();
81
81
  }
82
- function A(t, e, n = "move") {
83
- if (!(t instanceof HTMLElement))
84
- throw new Error("Source element must be an HTMLElement");
82
+ var E = "data-fx-teleport-root";
83
+ var m = "data-fx-teleported";
84
+ var L = {
85
+ append: () => {
86
+ },
87
+ remove: () => {
88
+ },
89
+ restore: () => {
90
+ }
91
+ };
92
+ function S(e, t, n = "move") {
93
+ var s;
85
94
  if (!(e instanceof HTMLElement))
95
+ throw new Error("Source element must be an HTMLElement");
96
+ if (!(t instanceof HTMLElement))
86
97
  throw new Error("Target element must be an HTMLElement");
87
98
  if (!["move", "detachable"].includes(n))
88
99
  throw new Error(`Invalid teleport mode: ${n}. Must be "move" or "detachable".`);
89
- let s = document.createComment("teleporter-placeholder");
90
- const a = t.parentNode;
91
- return a ? a.insertBefore(s, t) : console.warn("Element has no parent; placeholder not inserted."), n === "move" ? (t.parentNode && e.appendChild(t), {
100
+ if ((s = e.parentElement) != null && s.closest(`[${E}]`))
101
+ return L;
102
+ e.setAttribute(E, "");
103
+ let a = document.createComment("teleporter-placeholder");
104
+ const i = e.parentNode;
105
+ return i && i.insertBefore(a, e), n === "move" ? (e.parentNode && (t.appendChild(e), e.setAttribute(m, "")), {
92
106
  append() {
93
- t.parentNode !== e && e.appendChild(t);
107
+ e.parentNode !== t && (t.appendChild(e), e.setAttribute(m, ""));
94
108
  },
95
109
  remove() {
96
- s != null && s.parentNode && t.parentNode && s.parentNode.insertBefore(t, s);
110
+ a != null && a.parentNode && e.parentNode && a.parentNode.insertBefore(e, a);
97
111
  },
98
112
  restore() {
99
- s != null && s.parentNode && t.parentNode !== a && s.parentNode.insertBefore(t, s);
113
+ a != null && a.parentNode && e.parentNode !== i && a.parentNode.insertBefore(e, a);
100
114
  }
101
- }) : (t.parentNode && e.appendChild(t), {
115
+ }) : (e.parentNode && (t.appendChild(e), e.setAttribute(m, "")), {
102
116
  append() {
103
- e.contains(t) || e.appendChild(t);
117
+ t.contains(e) || t.appendChild(e);
104
118
  },
105
119
  remove() {
106
- t.parentNode && t.remove();
120
+ e.parentNode && e.remove();
107
121
  },
108
122
  restore() {
109
- s != null && s.parentNode && !t.parentNode && s.parentNode.insertBefore(t, s);
123
+ a != null && a.parentNode && !e.parentNode && a.parentNode.insertBefore(e, a);
110
124
  }
111
125
  });
112
126
  }
113
- var I = (t) => {
114
- var e;
115
- return (e = t.parentElement) == null ? void 0 : e.removeChild(t);
127
+ var T = (e) => {
128
+ var t;
129
+ return (t = e.parentElement) == null ? void 0 : t.removeChild(e);
116
130
  };
117
- var C = (t) => {
118
- t.setAttribute("data-state", "invisible"), O({
119
- element: t,
131
+ var g = (e) => {
132
+ e.setAttribute("data-state", "invisible"), B({
133
+ element: e,
120
134
  callback() {
121
- I(t);
135
+ T(e);
122
136
  }
123
137
  });
124
138
  };
125
- var L = (t, e) => {
126
- const n = t;
139
+ var x = (e, t) => {
140
+ const n = e;
127
141
  if (n === "" || !n)
128
142
  return;
129
143
  const s = document.createElement("div");
130
- if (s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "visible"), s.setAttribute("data-fx-offcanvas-overlay", ""), s.setAttribute("data-offcanvas-el", e), n === "")
144
+ if (s.setAttribute("aria-hidden", "true"), s.setAttribute("data-state", "visible"), s.setAttribute("data-fx-offcanvas-overlay", ""), s.setAttribute("data-offcanvas-el", t), n === "")
131
145
  return;
132
146
  const a = n.split(" ");
133
147
  return n !== "" && s.classList.add(...a), s;
134
148
  };
135
- var u = (t, e, n) => {
136
- t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e || S(n);
149
+ var C = (e, t, n) => {
150
+ e.setAttribute("aria-hidden", n === "open" ? "false" : "true"), e.setAttribute("data-state", n), t || $(n);
137
151
  };
138
- var S = (t) => {
139
- document.body.style.overflow = t === "open" ? "hidden" : "", document.body.style.overflowY = t === "open" ? "hidden" : "auto";
152
+ var $ = (e) => {
153
+ document.body.style.overflow = e === "open" ? "hidden" : "", document.body.style.overflowY = e === "open" ? "hidden" : "auto";
140
154
  };
141
- var T = (t, e) => {
142
- if (t === e)
155
+ var N = (e, t) => {
156
+ if (e === t)
143
157
  return;
144
- t.setAttribute("aria-hidden", "true"), t.setAttribute("data-state", "close");
145
- const n = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${t.getAttribute("id")}]`, t.parentElement);
146
- n instanceof HTMLElement && C(n);
158
+ e.setAttribute("aria-hidden", "true"), e.setAttribute("data-state", "close");
159
+ const n = u(`[data-fx-offcanvas-overlay][data-offcanvas-el=${e.getAttribute("id")}]`, e.parentElement);
160
+ n instanceof HTMLElement && g(n);
147
161
  };
148
- var x = (t) => {
149
- const e = h("[data-fx-offcanvas][data-state=open]");
150
- if (!(e.length <= 0))
151
- for (const n of e)
152
- T(n, t);
162
+ var H = (e) => {
163
+ const t = v("[data-fx-offcanvas][data-state=open]");
164
+ if (!(t.length <= 0))
165
+ for (const n of t)
166
+ N(n, e);
153
167
  };
154
168
  var d = class {
155
169
  static initGlobalRegistry() {
156
170
  window.$flexillaInstances || (window.$flexillaInstances = {});
157
171
  }
158
- static register(e, n, s) {
159
- return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, n) || (window.$flexillaInstances[e].push({ element: n, instance: s }), s);
172
+ static register(t, n, s) {
173
+ return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, n) || (window.$flexillaInstances[t].push({ element: n, instance: s }), s);
160
174
  }
161
- static getInstance(e, n) {
175
+ static getInstance(t, n) {
162
176
  var s, a;
163
- return this.initGlobalRegistry(), (a = (s = window.$flexillaInstances[e]) == null ? void 0 : s.find(
177
+ return this.initGlobalRegistry(), (a = (s = window.$flexillaInstances[t]) == null ? void 0 : s.find(
164
178
  (i) => i.element === n
165
179
  )) == null ? void 0 : a.instance;
166
180
  }
167
- static removeInstance(e, n) {
168
- this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
181
+ static removeInstance(t, n) {
182
+ this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
169
183
  (s) => s.element !== n
170
184
  ));
171
185
  }
172
- static setup(e) {
173
- e.setAttribute("data-fx-component", "fx");
186
+ static setup(t) {
187
+ t.setAttribute("data-fx-component", "fx");
174
188
  }
175
- static initialized(e) {
176
- e.setAttribute("data-component-initialized", "initialized");
189
+ static initialized(t) {
190
+ t.setAttribute("data-component-initialized", "initialized");
177
191
  }
178
192
  };
179
- var f = class f2 {
193
+ var c = class c2 {
180
194
  /**
181
195
  * Creates an instance of Offcanvas.
182
196
  * @param offcanvas - The offcanvas element selector or HTMLElement
@@ -194,7 +208,7 @@ var f = class f2 {
194
208
  * });
195
209
  * ```
196
210
  */
197
- constructor(e, n = {}) {
211
+ constructor(t, n = {}) {
198
212
  o(this, "offCanvasElement");
199
213
  o(this, "offCanvasTriggers");
200
214
  o(this, "offCanvasCloseBtns");
@@ -206,34 +220,34 @@ var f = class f2 {
206
220
  o(this, "options");
207
221
  o(this, "teleporter");
208
222
  o(this, "moveElOnInit", () => {
209
- B(() => this.teleporter.append());
223
+ I(() => this.teleporter.append());
210
224
  });
211
- o(this, "closeWhenClickOutSide", (e2) => {
212
- const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(e2.target) && ![...this.offCanvasTriggers].includes(e2.target);
225
+ o(this, "closeWhenClickOutSide", (t2) => {
226
+ const n2 = this.offCanvasElement.getAttribute("data-state") === "open", s2 = !this.offCanvasElement.contains(t2.target) && ![...this.offCanvasTriggers].includes(t2.target);
213
227
  n2 && s2 && this.closeOffCanvas();
214
228
  });
215
229
  o(this, "closeOffCanvas", () => {
216
- var i2, l2, c2, r2, p;
217
- let e2 = false;
218
- if (v(this.offCanvasElement, "offcanvas-before-hide", {
230
+ var i2, l2, f2, r2, p;
231
+ let t2 = false;
232
+ if (h(this.offCanvasElement, "offcanvas-before-hide", {
219
233
  offcanvasId: this.offCanvasElement.id,
220
- setExitAction: (b) => {
221
- e2 = b;
234
+ setExitAction: (w) => {
235
+ t2 = w;
222
236
  }
223
- }), ((c2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : c2.cancelAction) || e2)
237
+ }), ((f2 = (l2 = (i2 = this.options).beforeHide) == null ? void 0 : l2.call(i2)) == null ? void 0 : f2.cancelAction) || t2)
224
238
  return;
225
- const s2 = this.offCanvasElement.getAttribute("id"), a2 = m(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s2}]`);
226
- a2 instanceof HTMLElement && C(a2), this.offCanvasElement.blur(), u(
239
+ const s2 = this.offCanvasElement.getAttribute("id"), a2 = u(`[data-fx-offcanvas-overlay][data-offcanvas-el=${s2}]`);
240
+ a2 instanceof HTMLElement && g(a2), this.offCanvasElement.blur(), C(
227
241
  this.offCanvasElement,
228
242
  this.allowBodyScroll,
229
243
  "close"
230
- ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (r2 = this.options).onHide) == null || p.call(r2), v(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
244
+ ), document.removeEventListener("keydown", this.closeWithEsc), !this.allowBodyScroll && !a2 && document.removeEventListener("click", this.closeWhenClickOutSide), (p = (r2 = this.options).onHide) == null || p.call(r2), h(this.offCanvasElement, "offcanvas-close", { offcanvasId: this.offCanvasElement.id });
231
245
  });
232
- o(this, "closeWithEsc", (e2) => {
233
- e2.key === "Escape" && (e2.preventDefault(), this.closeOffCanvas());
246
+ o(this, "closeWithEsc", (t2) => {
247
+ t2.key === "Escape" && (t2.preventDefault(), this.closeOffCanvas());
234
248
  });
235
- o(this, "closeFromCloseBtn", (e2) => {
236
- e2.target.blur(), this.closeOffCanvas();
249
+ o(this, "closeFromCloseBtn", (t2) => {
250
+ t2.target.blur(), this.closeOffCanvas();
237
251
  });
238
252
  o(this, "changeState", () => {
239
253
  this.offCanvasElement.getAttribute("data-state") === "open" ? this.closeOffCanvas() : this.openOffCanvas();
@@ -244,10 +258,10 @@ var f = class f2 {
244
258
  o(this, "close", () => {
245
259
  this.closeOffCanvas();
246
260
  });
247
- o(this, "setOptions", ({ allowBodyscroll: e2 }) => {
248
- e2 !== void 0 && (this.allowBodyScroll = e2);
261
+ o(this, "setOptions", ({ allowBodyscroll: t2 }) => {
262
+ t2 !== void 0 && (this.allowBodyScroll = t2);
249
263
  });
250
- const s = typeof e == "string" ? m(e) : e;
264
+ const s = typeof t == "string" ? u(t) : t;
251
265
  if (!(s instanceof HTMLElement))
252
266
  throw new Error("Invalid Offcanvas, the provided Element is not a valid HTMLElement");
253
267
  this.offCanvasElement = s;
@@ -255,39 +269,39 @@ var f = class f2 {
255
269
  if (a)
256
270
  return a;
257
271
  d.setup(this.offCanvasElement), this.options = n;
258
- const { staticBackdrop: i, allowBodyScroll: l, backdrop: c } = this.options;
272
+ const { staticBackdrop: i, allowBodyScroll: l, backdrop: f } = this.options;
259
273
  this.setupAttributes(), this.staticBackdrop = i || s.hasAttribute("data-static-backdrop") && s.dataset.staticBackdrop !== "false" || false, this.allowBodyScroll = l || s.hasAttribute("data-allow-body-scroll") && s.dataset.allowBodyScroll !== "false" || false;
260
274
  const r = this.offCanvasElement.getAttribute("id");
261
275
  if (!r || r === "")
262
276
  throw new Error("\u274C id is required but missing on element:");
263
- this.offCanvasId = r, this.offCanvasTriggers = this.findOffCanvasElements("[data-offcanvas-trigger]", false, r), this.offCanvasCloseBtns = this.findOffCanvasElements("[data-offcanvas-close]", true, r, this.offCanvasElement), this.backdrop = c || this.offCanvasElement.dataset.offcanvasBackdrop || "", this.dispatchEventToDocument = this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.teleporter = A(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
277
+ this.offCanvasId = r, 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.dispatchEventToDocument = this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.teleporter = S(this.offCanvasElement, document.body, "move"), this.setupOffcanvas(), this.moveElOnInit(), d.register("offcanvas", this.offCanvasElement, this), d.initialized(this.offCanvasElement);
264
278
  }
265
- findOffCanvasElements(e, n, s, a) {
266
- return n ? h(`${e}`, a) : h(`${e}[data-target=${s}]`);
279
+ findOffCanvasElements(t, n, s, a) {
280
+ return n ? v(`${t}`, a) : v(`${t}[data-target=${s}]`);
267
281
  }
268
282
  setupAttributes() {
269
283
  this.offCanvasElement.hasAttribute("data-fx-offcanvas") || this.offCanvasElement.setAttribute("data-fx-offcanvas", "");
270
284
  }
271
285
  openOffCanvas() {
272
286
  var s, a, i, l;
273
- (a = (s = this.options).beforeShow) == null || a.call(s), x(this.offCanvasElement), u(
287
+ (a = (s = this.options).beforeShow) == null || a.call(s), H(this.offCanvasElement), C(
274
288
  this.offCanvasElement,
275
289
  this.allowBodyScroll,
276
290
  "open"
277
291
  );
278
- const e = this.offCanvasElement.getAttribute("id"), n = L(
292
+ const t = this.offCanvasElement.getAttribute("id"), n = x(
279
293
  this.backdrop,
280
- e
294
+ t
281
295
  );
282
- n instanceof HTMLElement && (y({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.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 });
296
+ n instanceof HTMLElement && (k({ newElement: n, existingElement: this.offCanvasElement }), this.staticBackdrop || n.addEventListener("click", this.closeOffCanvas)), document.addEventListener("keydown", this.closeWithEsc), (l = (i = this.options).onShow) == null || l.call(i), h(this.offCanvasElement, "offcanvas-open", { offcanvasId: this.offCanvasElement.id });
283
297
  }
284
298
  initCloseBtns() {
285
- for (const e of this.offCanvasCloseBtns)
286
- e.addEventListener("click", this.closeFromCloseBtn);
299
+ for (const t of this.offCanvasCloseBtns)
300
+ t.addEventListener("click", this.closeFromCloseBtn);
287
301
  }
288
302
  initTriggers() {
289
- for (const e of this.offCanvasTriggers)
290
- e.addEventListener("click", this.changeState);
303
+ for (const t of this.offCanvasTriggers)
304
+ t.addEventListener("click", this.changeState);
291
305
  }
292
306
  setupOffcanvas() {
293
307
  this.initTriggers(), this.initCloseBtns(), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:open`, this.open), this.dispatchEventToDocument && document.addEventListener(`sheet:${this.offCanvasId}:close`, this.close);
@@ -304,17 +318,17 @@ var f = class f2 {
304
318
  * ```
305
319
  */
306
320
  cleanup() {
307
- for (const e of this.offCanvasTriggers)
308
- e.removeEventListener("click", this.changeState);
309
- for (const e of this.offCanvasCloseBtns)
310
- e.removeEventListener("click", this.closeOffCanvas);
321
+ for (const t of this.offCanvasTriggers)
322
+ t.removeEventListener("click", this.changeState);
323
+ for (const t of this.offCanvasCloseBtns)
324
+ t.removeEventListener("click", this.closeOffCanvas);
311
325
  document.removeEventListener("keydown", this.closeWithEsc), this.allowBodyScroll || document.removeEventListener("click", this.closeWhenClickOutSide), this.dispatchEventToDocument && document.removeEventListener(`sheet:${this.offCanvasId}:open`, this.open), this.dispatchEventToDocument && document.removeEventListener(`sheet:${this.offCanvasId}:close`, this.close), d.removeInstance("offcanvas", this.offCanvasElement);
312
326
  }
313
327
  };
314
- o(f, "autoInit", (e = "[data-fx-offcanvas]") => {
315
- const n = h(e);
328
+ o(c, "autoInit", (t = "[data-fx-offcanvas]") => {
329
+ const n = v(t);
316
330
  for (const s of n)
317
- new f(s);
331
+ new c(s);
318
332
  }), /**
319
333
  * This is an alternative to using the constructor directly.
320
334
  * @param offcanvas - The offcanvas element selector or HTMLElement
@@ -329,8 +343,8 @@ o(f, "autoInit", (e = "[data-fx-offcanvas]") => {
329
343
  * });
330
344
  * ```
331
345
  */
332
- o(f, "init", (e, n = {}) => new f(e, n));
333
- var E = f;
346
+ o(c, "init", (t, n = {}) => new c(t, n));
347
+ var b = c;
334
348
 
335
349
  // src/index.js
336
350
  function Offcanvas(Alpine) {
@@ -340,7 +354,7 @@ function Offcanvas(Alpine) {
340
354
  console.error("\u274C id is required but missing on element:", el);
341
355
  return;
342
356
  }
343
- const offcanvas_ = new E(el);
357
+ const offcanvas_ = new b(el);
344
358
  if (!Alpine.store("sheets")) {
345
359
  Alpine.store("sheets", {});
346
360
  }