@flexilla/alpine-modal 0.2.0 → 0.3.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 (5) hide show
  1. package/dist/cdn.js +143 -127
  2. package/dist/cdn.min.js +1 -1
  3. package/dist/module.cjs.js +143 -127
  4. package/dist/module.esm.js +143 -127
  5. package/package.json +3 -3
package/dist/module.esm.js CHANGED
@@ -1,119 +1,133 @@
1
1
  // ../../node_modules/@flexilla/modal/dist/modal.js
2
2
  var w = Object.defineProperty;
3
- var b = (o, t, e) => t in o ? w(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
4
- var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
5
- var r = (o, t = document.body) => t.querySelector(o);
6
- var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
3
+ var b = (n, t, e) => t in n ? w(n, t, { enumerable: true, configurable: true, writable: true, value: e }) : n[t] = e;
4
+ var i = (n, t, e) => b(n, typeof t != "symbol" ? t + "" : t, e);
5
+ var r = (n, t = document.body) => t.querySelector(n);
6
+ var u = (n, t = document.body) => Array.from(t.querySelectorAll(n));
7
7
  var M = ({
8
- newElement: o,
8
+ newElement: n,
9
9
  existingElement: t
10
10
  }) => {
11
- if (!(o instanceof HTMLElement) || !(t instanceof HTMLElement))
11
+ if (!(n instanceof HTMLElement) || !(t instanceof HTMLElement))
12
12
  throw new Error("Both parameters must be valid HTML elements.");
13
13
  const e = t.parentElement;
14
14
  if (e)
15
- e.insertBefore(o, t);
15
+ e.insertBefore(n, t);
16
16
  else
17
17
  throw new Error("Existing element must have a parent element.");
18
18
  };
19
- var g = ({
20
- element: o,
19
+ var A = ({
20
+ element: n,
21
21
  callback: t,
22
22
  type: e,
23
- keysCheck: n
23
+ keysCheck: o
24
24
  }) => {
25
- const a = getComputedStyle(o), i = a.animation;
26
- if (i !== "none" && i !== "" && !n.includes(i)) {
25
+ const a = getComputedStyle(n), s = a.animation;
26
+ if (s !== "none" && s !== "" && !o.includes(s)) {
27
27
  const l = "animationend", d = () => {
28
- o.removeEventListener(l, d), t();
28
+ n.removeEventListener(l, d), t();
29
29
  };
30
- o.addEventListener(l, d, { once: true });
30
+ n.addEventListener(l, d, { once: true });
31
31
  } else
32
32
  t();
33
33
  };
34
- var p = ({ element: o, callback: t }) => {
35
- g({
36
- element: o,
34
+ var p = ({ element: n, callback: t }) => {
35
+ A({
36
+ element: n,
37
37
  callback: t,
38
38
  type: "animation",
39
39
  keysCheck: ["none 0s ease 0s 1 normal none running"]
40
40
  });
41
41
  };
42
- var f = (o, t, e) => {
43
- const n = new CustomEvent(t, { detail: e });
44
- o.dispatchEvent(n);
42
+ var E = (n, t, e) => {
43
+ const o = new CustomEvent(t, { detail: e });
44
+ n.dispatchEvent(o);
45
45
  };
46
- function A(o, t, e = "move") {
47
- if (!(o instanceof HTMLElement))
46
+ function g(n) {
47
+ const t = () => {
48
+ document.querySelector(
49
+ "[data-fx-component]:not([data-component-initialized])"
50
+ ) ? requestAnimationFrame(t) : n();
51
+ };
52
+ t();
53
+ }
54
+ function C(n, t, e = "move") {
55
+ if (!(n instanceof HTMLElement))
48
56
  throw new Error("Source element must be an HTMLElement");
49
57
  if (!(t instanceof HTMLElement))
50
58
  throw new Error("Target element must be an HTMLElement");
51
59
  if (!["move", "detachable"].includes(e))
52
60
  throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
53
- let n = document.createComment("teleporter-placeholder");
54
- const a = o.parentNode;
55
- return a ? a.insertBefore(n, o) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (o.parentNode && t.appendChild(o), {
61
+ let o = document.createComment("teleporter-placeholder");
62
+ const a = n.parentNode;
63
+ return a ? a.insertBefore(o, n) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (n.parentNode && t.appendChild(n), {
56
64
  append() {
57
- o.parentNode !== t && t.appendChild(o);
65
+ n.parentNode !== t && t.appendChild(n);
58
66
  },
59
67
  remove() {
60
- n != null && n.parentNode && o.parentNode && n.parentNode.insertBefore(o, n);
68
+ o != null && o.parentNode && n.parentNode && o.parentNode.insertBefore(n, o);
61
69
  },
62
70
  restore() {
63
- n != null && n.parentNode && o.parentNode !== a && n.parentNode.insertBefore(o, n);
71
+ o != null && o.parentNode && n.parentNode !== a && o.parentNode.insertBefore(n, o);
64
72
  }
65
- }) : (o.parentNode && t.appendChild(o), {
73
+ }) : (n.parentNode && t.appendChild(n), {
66
74
  append() {
67
- t.contains(o) || t.appendChild(o);
75
+ t.contains(n) || t.appendChild(n);
68
76
  },
69
77
  remove() {
70
- o.parentNode && o.remove();
78
+ n.parentNode && n.remove();
71
79
  },
72
80
  restore() {
73
- n != null && n.parentNode && !o.parentNode && n.parentNode.insertBefore(o, n);
81
+ o != null && o.parentNode && !n.parentNode && o.parentNode.insertBefore(n, o);
74
82
  }
75
83
  });
76
84
  }
77
- var E = (o, t, e) => {
85
+ var v = (n, t, e) => {
78
86
  if (!(t instanceof HTMLElement))
79
87
  throw new Error("No modal-content found");
80
- o.setAttribute("aria-hidden", e === "open" ? "false" : "true"), o.setAttribute("data-state", e), t.setAttribute("data-state", e);
81
- const n = r("[data-modal-overlay]", o);
82
- n instanceof HTMLElement && n.setAttribute("data-state", e);
88
+ n.setAttribute("aria-hidden", e === "open" ? "false" : "true"), n.setAttribute("data-state", e), t.setAttribute("data-state", e);
89
+ const o = r("[data-modal-overlay]", n);
90
+ o instanceof HTMLElement && o.setAttribute("data-state", e);
83
91
  };
84
- var C = (o, t, e) => {
85
- if (!o) {
92
+ var L = (n, t, e) => {
93
+ if (!n) {
86
94
  t || (document.body.style.overflowY = "auto");
87
95
  return;
88
96
  }
89
- c("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((i) => i !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
97
+ u("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((s) => s !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
90
98
  };
91
- var v = class {
99
+ var c = class {
92
100
  static initGlobalRegistry() {
93
101
  window.$flexillaInstances || (window.$flexillaInstances = {});
94
102
  }
95
- static register(t, e, n) {
96
- return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
103
+ static register(t, e, o) {
104
+ return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: o }), o);
97
105
  }
98
106
  static getInstance(t, e) {
99
- var n, a;
100
- return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
101
- (i) => i.element === e
107
+ var o, a;
108
+ return this.initGlobalRegistry(), (a = (o = window.$flexillaInstances[t]) == null ? void 0 : o.find(
109
+ (s) => s.element === e
102
110
  )) == null ? void 0 : a.instance;
103
111
  }
104
112
  static removeInstance(t, e) {
105
113
  this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
106
- (n) => n.element !== e
114
+ (o) => o.element !== e
107
115
  ));
108
116
  }
117
+ static setup(t) {
118
+ t.setAttribute("data-fx-component", "fx");
119
+ }
120
+ static initialized(t) {
121
+ t.setAttribute("data-component-initialized", "initialized");
122
+ }
109
123
  };
110
- var L = (o) => {
124
+ var x = (n) => {
111
125
  var t;
112
- o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
126
+ n instanceof HTMLElement && ((t = n.parentElement) == null || t.removeChild(n));
113
127
  };
114
- var T = ({ modalContent: o, overlayClassName: t }) => {
128
+ var T = ({ modalContent: n, overlayClassName: t }) => {
115
129
  const e = document.createElement("span");
116
- return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
130
+ return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: n }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
117
131
  };
118
132
  var m = class m2 {
119
133
  /**
@@ -122,57 +136,59 @@ var m = class m2 {
122
136
  * @param options - Configuration options for the modal behavior
123
137
  * @param triggerElements - Optional trigger elements or selectors that open the modal
124
138
  */
125
- constructor(t, e = {}, n) {
126
- s(this, "modalElement");
127
- s(this, "modalId");
128
- s(this, "modalContent");
129
- s(this, "triggerButtons", []);
130
- s(this, "overlayElement");
131
- s(this, "dispatchEventToDocument");
132
- s(this, "options");
133
- s(this, "state");
134
- s(this, "animationEnter");
135
- s(this, "animationExit");
136
- s(this, "animateContent");
137
- s(this, "hasDefaultOverlay");
138
- s(this, "enableStackedModals");
139
- s(this, "preventCloseModal");
140
- s(this, "isKeyDownEventRegistered");
141
- s(this, "closeButtons");
142
- s(this, "overlayClassName");
143
- s(this, "allowBodyScroll");
144
- s(this, "initAsOpen");
145
- s(this, "teleporter");
146
- s(this, "moveElOnInit", () => {
147
- this.teleporter.append();
139
+ constructor(t, e = {}, o) {
140
+ i(this, "modalElement");
141
+ i(this, "modalId");
142
+ i(this, "modalContent");
143
+ i(this, "triggerButtons", []);
144
+ i(this, "overlayElement");
145
+ i(this, "dispatchEventToDocument");
146
+ i(this, "options");
147
+ i(this, "state");
148
+ i(this, "animationEnter");
149
+ i(this, "animationExit");
150
+ i(this, "animateContent");
151
+ i(this, "hasDefaultOverlay");
152
+ i(this, "enableStackedModals");
153
+ i(this, "preventCloseModal");
154
+ i(this, "isKeyDownEventRegistered");
155
+ i(this, "closeButtons");
156
+ i(this, "overlayClassName");
157
+ i(this, "allowBodyScroll");
158
+ i(this, "initAsOpen");
159
+ i(this, "teleporter");
160
+ i(this, "moveElOnInit", () => {
161
+ g(() => {
162
+ this.teleporter.append();
163
+ });
148
164
  });
149
- s(this, "closeAll", (t2) => {
165
+ i(this, "closeAll", (t2) => {
150
166
  if (this.enableStackedModals)
151
167
  return;
152
- const e2 = c("[data-fx-modal][data-state=open]");
153
- for (const n2 of e2) {
154
- const a2 = n2.dataset.modalId;
168
+ const e2 = u("[data-fx-modal][data-state=open]");
169
+ for (const o2 of e2) {
170
+ const a2 = o2.dataset.modalId;
155
171
  if (a2 !== t2.dataset.modalId) {
156
- n2.blur(), r("[data-modal-overlay]", n2).setAttribute("data-state", "close");
157
- const l2 = r("[data-modal-content]", n2);
158
- E(n2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${a2}:close`));
172
+ o2.blur(), r("[data-modal-overlay]", o2).setAttribute("data-state", "close");
173
+ const l2 = r("[data-modal-content]", o2);
174
+ v(o2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${a2}:close`));
159
175
  }
160
176
  }
161
177
  });
162
- s(this, "closeModalEsc", (t2) => {
178
+ i(this, "closeModalEsc", (t2) => {
163
179
  t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
164
180
  });
165
- s(this, "initModal", (t2, e2) => {
181
+ i(this, "initModal", (t2, e2) => {
166
182
  var h;
167
183
  if (!(t2 instanceof HTMLDialogElement))
168
184
  throw new Error("Modal Element must be a valid HTMLDialog Element");
169
- const { allowBodyScroll: n2, animateContent: a2, preventCloseModal: i2, overlayClass: l2, enableStackedModals: d2 } = e2;
170
- this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || n2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || i2 || false, this.enableStackedModals = t2.hasAttribute("data-enable-stacked") && t2.getAttribute("data-enable-stacked") !== "false" || d2 || false, this.overlayClassName = ((h = t2.dataset.modalOverlay) == null ? void 0 : h.split(" ")) || (l2 == null ? void 0 : l2.split(" ")) || "", this.isKeyDownEventRegistered = false, t2.setAttribute("data-allow-body-scroll", `${this.allowBodyScroll}`), this.closeButtons = c("[data-close-modal]", t2), this.hasDefaultOverlay = false, r("[data-modal-overlay]", t2) instanceof HTMLElement && (this.overlayElement = r("[data-modal-overlay]", t2), this.overlayElement.setAttribute("data-overlay-nature", "default"), this.hasDefaultOverlay = true), this.animateContent = a2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
185
+ const { allowBodyScroll: o2, animateContent: a2, preventCloseModal: s2, overlayClass: l2, enableStackedModals: d2 } = e2;
186
+ this.allowBodyScroll = t2.hasAttribute("data-allow-body-scroll") && t2.getAttribute("data-allow-body-scroll") !== "false" || o2 || false, this.preventCloseModal = t2.hasAttribute("data-prevent-close-modal") && t2.getAttribute("data-prevent-close-modal") !== "false" || s2 || false, this.enableStackedModals = t2.hasAttribute("data-enable-stacked") && t2.getAttribute("data-enable-stacked") !== "false" || d2 || false, this.overlayClassName = ((h = t2.dataset.modalOverlay) == null ? void 0 : h.split(" ")) || (l2 == null ? void 0 : l2.split(" ")) || "", this.isKeyDownEventRegistered = false, t2.setAttribute("data-allow-body-scroll", `${this.allowBodyScroll}`), this.closeButtons = u("[data-close-modal]", t2), this.hasDefaultOverlay = false, r("[data-modal-overlay]", t2) instanceof HTMLElement && (this.overlayElement = r("[data-modal-overlay]", t2), this.overlayElement.setAttribute("data-overlay-nature", "default"), this.hasDefaultOverlay = true), this.animateContent = a2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.overlayElement && this.overlayElement.setAttribute("data-state", "close"), this.addEvents();
171
187
  });
172
- s(this, "closeModalOnX", (t2) => {
188
+ i(this, "closeModalOnX", (t2) => {
173
189
  t2.preventDefault(), this.hideModal();
174
190
  });
175
- s(this, "addEvents", () => {
191
+ i(this, "addEvents", () => {
176
192
  for (const t2 of this.triggerButtons)
177
193
  t2.addEventListener("click", this.showModal);
178
194
  if (this.closeButtons.length > 0)
@@ -180,97 +196,97 @@ var m = class m2 {
180
196
  t2.addEventListener("click", this.closeModalOnX);
181
197
  this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
182
198
  });
183
- s(this, "showModal", () => {
184
- var e2, n2, a2, i2, l2;
199
+ i(this, "showModal", () => {
200
+ var e2, o2, a2, s2, l2;
185
201
  if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
186
202
  if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
187
203
  modalContent: this.modalContent,
188
204
  overlayClassName: this.overlayClassName
189
- }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
205
+ }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), E(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
190
206
  const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
191
- d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), p({
207
+ d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), v(this.modalElement, this.modalContent, "open"), p({
192
208
  element: this.modalContent,
193
209
  callback: () => {
194
210
  this.modalContent.style.removeProperty("--un-modal-animation");
195
211
  }
196
212
  });
197
213
  } else
198
- E(this.modalElement, this.modalContent, "open");
199
- this.allowBodyScroll || (document.body.style.overflow = "hidden"), this.isKeyDownEventRegistered || (document.addEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = true), this.modalContent.focus(), this.preventCloseModal || this.overlayElement.addEventListener("click", this.hideModal), (a2 = (n2 = this.options).onShow) == null || a2.call(n2), (l2 = (i2 = this.options).onToggle) == null || l2.call(i2, { isHidden: false }), this.modalElement.showModal();
214
+ v(this.modalElement, this.modalContent, "open");
215
+ this.allowBodyScroll || (document.body.style.overflow = "hidden"), this.isKeyDownEventRegistered || (document.addEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = true), this.modalContent.focus(), this.preventCloseModal || this.overlayElement.addEventListener("click", this.hideModal), (a2 = (o2 = this.options).onShow) == null || a2.call(o2), (l2 = (s2 = this.options).onToggle) == null || l2.call(s2, { isHidden: false }), this.modalElement.showModal();
200
216
  }
201
217
  });
202
- s(this, "closeModal", () => {
203
- this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), C(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || L(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
218
+ i(this, "closeModal", () => {
219
+ this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), L(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || x(this.overlayElement), E(this.modalElement, "modal-close", { modalId: this.modalElement.id });
204
220
  });
205
- s(this, "closeLastAction", () => {
206
- var t2, e2, n2, a2;
207
- this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (a2 = (n2 = this.options).onToggle) == null || a2.call(n2, { isHidden: true });
221
+ i(this, "closeLastAction", () => {
222
+ var t2, e2, o2, a2;
223
+ this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (e2 = (t2 = this.options).onHide) == null || e2.call(t2), (a2 = (o2 = this.options).onToggle) == null || a2.call(o2, { isHidden: true });
208
224
  });
209
- s(this, "hideModal", () => {
210
- var a2, i2, l2, d2, h;
225
+ i(this, "hideModal", () => {
226
+ var a2, s2, l2, d2, h;
211
227
  let t2 = false;
212
- f(this.modalElement, "before-hide", {
228
+ E(this.modalElement, "before-hide", {
213
229
  modalId: this.modalId,
214
- setExitAction: (u) => {
215
- t2 = u;
230
+ setExitAction: (f) => {
231
+ t2 = f;
216
232
  }
217
233
  });
218
- const e2 = (l2 = (i2 = (a2 = this.options).beforeHide) == null ? void 0 : i2.call(a2)) == null ? void 0 : l2.cancelAction;
234
+ const e2 = (l2 = (s2 = (a2 = this.options).beforeHide) == null ? void 0 : s2.call(a2)) == null ? void 0 : l2.cancelAction;
219
235
  if (t2 || e2)
220
236
  return;
221
- const n2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
222
- if ((h = this.overlayElement) == null || h.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), n2) {
223
- const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
224
- this.modalContent.style.setProperty("--un-modal-animation", u);
237
+ const o2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
238
+ if ((h = this.overlayElement) == null || h.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), o2) {
239
+ const f = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
240
+ this.modalContent.style.setProperty("--un-modal-animation", f);
225
241
  }
226
242
  p({
227
243
  element: this.modalContent,
228
244
  callback: () => {
229
- n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
245
+ o2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
230
246
  }
231
247
  });
232
248
  });
233
- s(this, "cleanup", () => {
249
+ i(this, "cleanup", () => {
234
250
  for (const t2 of this.triggerButtons)
235
251
  t2.removeEventListener("click", this.showModal);
236
252
  if (this.closeButtons.length > 0)
237
253
  for (const t2 of this.closeButtons)
238
254
  t2.removeEventListener("click", this.closeModalOnX);
239
- !this.preventCloseModal && this.overlayElement instanceof HTMLElement && this.overlayElement.removeEventListener("click", this.hideModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:close`, this.hideModal), v.removeInstance("modal", this.modalElement);
255
+ !this.preventCloseModal && this.overlayElement instanceof HTMLElement && this.overlayElement.removeEventListener("click", this.hideModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.removeEventListener(`modal:${this.modalId}:close`, this.hideModal), c.removeInstance("modal", this.modalElement);
240
256
  });
241
- s(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
257
+ i(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
242
258
  t2 && (this.state = t2), e2 !== void 0 && (this.allowBodyScroll = e2), this.state === "open" ? this.showModal() : this.state === "close" && this.hideModal();
243
259
  });
244
260
  const a = typeof t == "string" ? r(t) : t;
245
261
  if (!(a instanceof HTMLDialogElement))
246
262
  throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");
247
263
  this.modalElement = a, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
248
- const i = v.getInstance("modal", this.modalElement);
249
- if (i)
250
- return i;
264
+ const s = c.getInstance("modal", this.modalElement);
265
+ if (s)
266
+ return s;
251
267
  this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
252
268
  const l = r("[data-modal-content]", a);
253
269
  if (!(l instanceof HTMLElement))
254
270
  throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
255
- this.modalContent = l;
271
+ c.setup(this.modalElement), this.modalContent = l;
256
272
  const d = a.dataset.modalId;
257
- this.modalId = `${d}`, this.teleporter = A(this.modalElement, document.body, "move"), this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), this.moveElOnInit(), v.register("modal", this.modalElement, this);
273
+ this.modalId = `${d}`, this.teleporter = C(this.modalElement, document.body, "move"), this.initializeTriggers(o, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), this.moveElOnInit(), c.register("modal", this.modalElement, this), c.initialized(this.modalElement);
258
274
  }
259
275
  initializeTriggers(t, e) {
260
276
  if (!t && e) {
261
- const a = c(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
277
+ const a = u(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
262
278
  this.triggerButtons = a;
263
279
  return;
264
280
  }
265
281
  if (!t)
266
282
  return;
267
- const n = Array.isArray(t) ? t : [t];
268
- this.triggerButtons = n.map((a) => {
283
+ const o = Array.isArray(t) ? t : [t];
284
+ this.triggerButtons = o.map((a) => {
269
285
  if (typeof a == "string") {
270
- const i = r(a);
271
- if (!(i instanceof HTMLElement))
286
+ const s = r(a);
287
+ if (!(s instanceof HTMLElement))
272
288
  throw new Error(`Trigger element not found: ${a}`);
273
- return i;
289
+ return s;
274
290
  }
275
291
  if (!(a instanceof HTMLElement))
276
292
  throw new Error("Invalid trigger element provided");
@@ -278,14 +294,14 @@ var m = class m2 {
278
294
  });
279
295
  }
280
296
  };
281
- s(m, "autoInit", (t = "[data-fx-modal]") => {
282
- const e = c(t);
283
- for (const n of e)
284
- new m(n);
297
+ i(m, "autoInit", (t = "[data-fx-modal]") => {
298
+ const e = u(t);
299
+ for (const o of e)
300
+ new m(o);
285
301
  }), /**
286
302
  * Creates and initializes a new Modal instance
287
303
  */
288
- s(m, "init", (t, e = {}, n) => new m(t, e, n));
304
+ i(m, "init", (t, e = {}, o) => new m(t, e, o));
289
305
  var y = m;
290
306
 
291
307
  // src/index.js
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flexilla/alpine-modal",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "AlpineJS plugin for creating Modal, Dialog, alert dialog components",
5
5
  "type": "module",
6
6
  "private": false,
@@ -66,7 +66,7 @@
66
66
  "Dissmiss"
67
67
  ],
68
68
  "dependencies": {
69
- "@flexilla/modal": "^2.3.1"
69
+ "@flexilla/modal": "^2.3.4"
70
70
  },
71
- "gitHead": "869394b528d21d4842486a7396449aa9fbe3cbcb"
71
+ "gitHead": "9ac916234e8bb129724224819f3b59420b34081f"
72
72
  }