@flexilla/alpine-modal 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cdn.js +136 -114
  2. package/dist/cdn.min.js +1 -1
  3. package/dist/module.cjs.js +136 -114
  4. package/dist/module.esm.js +136 -114
  5. package/package.json +3 -3
  6. package/src/index.js +9 -15
package/dist/module.cjs.js CHANGED
@@ -24,12 +24,12 @@ __export(module_exports, {
24
24
  module.exports = __toCommonJS(module_exports);
25
25
 
26
26
  // ../../node_modules/@flexilla/modal/dist/modal.js
27
- var C = Object.defineProperty;
28
- var x = (o, t, e) => t in o ? C(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
29
- var a = (o, t, e) => x(o, typeof t != "symbol" ? t + "" : t, e);
27
+ var p = Object.defineProperty;
28
+ var b = (o, t, e) => t in o ? p(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
29
+ var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
30
30
  var r = (o, t = document.body) => t.querySelector(o);
31
- var u = (o, t = document.body) => Array.from(t.querySelectorAll(o));
32
- var I = ({
31
+ var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
32
+ var M = ({
33
33
  newElement: o,
34
34
  existingElement: t
35
35
  }) => {
@@ -41,13 +41,13 @@ var I = ({
41
41
  else
42
42
  throw new Error("Existing element must have a parent element.");
43
43
  };
44
- var L = ({
44
+ var g = ({
45
45
  element: o,
46
46
  callback: t,
47
47
  type: e,
48
48
  keysCheck: n
49
49
  }) => {
50
- const s = getComputedStyle(o), i = s.animation;
50
+ const a = getComputedStyle(o), i = a.animation;
51
51
  if (i !== "none" && i !== "" && !n.includes(i)) {
52
52
  const l = "animationend", d = () => {
53
53
  o.removeEventListener(l, d), t();
@@ -56,33 +56,33 @@ var L = ({
56
56
  } else
57
57
  t();
58
58
  };
59
- var g = ({ element: o, callback: t }) => {
60
- L({
59
+ var y = ({ element: o, callback: t }) => {
60
+ g({
61
61
  element: o,
62
62
  callback: t,
63
63
  type: "animation",
64
64
  keysCheck: ["none 0s ease 0s 1 normal none running"]
65
65
  });
66
66
  };
67
- var v = (o, t, e) => {
67
+ var f = (o, t, e) => {
68
68
  const n = new CustomEvent(t, { detail: e });
69
69
  o.dispatchEvent(n);
70
70
  };
71
- var f = (o, t, e) => {
71
+ var E = (o, t, e) => {
72
72
  if (!(t instanceof HTMLElement))
73
73
  throw new Error("No modal-content found");
74
74
  o.setAttribute("aria-hidden", e === "open" ? "false" : "true"), o.setAttribute("data-state", e), t.setAttribute("data-state", e);
75
75
  const n = r("[data-modal-overlay]", o);
76
76
  n instanceof HTMLElement && n.setAttribute("data-state", e);
77
77
  };
78
- var B = (o, t, e) => {
78
+ var A = (o, t, e) => {
79
79
  if (!o) {
80
80
  t || (document.body.style.overflowY = "auto");
81
81
  return;
82
82
  }
83
- u("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((i) => i !== e).length === 0 && !t && (document.body.style.overflowY = "auto");
83
+ 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");
84
84
  };
85
- var E = class {
85
+ var v = class {
86
86
  static initGlobalRegistry() {
87
87
  window.$flexillaInstances || (window.$flexillaInstances = {});
88
88
  }
@@ -90,10 +90,10 @@ var E = class {
90
90
  return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
91
91
  }
92
92
  static getInstance(t, e) {
93
- var n, s;
94
- return this.initGlobalRegistry(), (s = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
93
+ var n, a;
94
+ return this.initGlobalRegistry(), (a = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
95
95
  (i) => i.element === e
96
- )) == null ? void 0 : s.instance;
96
+ )) == null ? void 0 : a.instance;
97
97
  }
98
98
  static removeInstance(t, e) {
99
99
  this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
@@ -101,154 +101,182 @@ var E = class {
101
101
  ));
102
102
  }
103
103
  };
104
- var k = (o) => {
104
+ var C = (o) => {
105
105
  var t;
106
106
  o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
107
107
  };
108
- var T = ({ modalContent: o, overlayClassName: t }) => {
108
+ var x = ({ modalContent: o, overlayClassName: t }) => {
109
109
  const e = document.createElement("span");
110
- return e.setAttribute("aria-hidden", "true"), I({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
110
+ return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
111
111
  };
112
- var h = class h2 {
112
+ var m = class m2 {
113
113
  /**
114
114
  * Creates a new Modal instance
115
115
  * @param modal - The modal element or selector string to initialize
116
116
  * @param options - Configuration options for the modal behavior
117
- * @param triggerElement - Optional trigger element or selector that opens the modal
117
+ * @param triggerElements - Optional trigger elements or selectors that open the modal
118
118
  */
119
119
  constructor(t, e = {}, n) {
120
- a(this, "modalElement");
121
- a(this, "modalId");
122
- a(this, "modalContent");
123
- a(this, "triggerButton");
124
- a(this, "overlayElement");
125
- a(this, "dispatchEventToDocument");
126
- a(this, "options");
127
- a(this, "state");
128
- a(this, "animationEnter");
129
- a(this, "animationExit");
130
- a(this, "animateContent");
131
- a(this, "hasDefaultOverlay");
132
- a(this, "enableStackedModals");
133
- a(this, "preventCloseModal");
134
- a(this, "isKeyDownEventRegistered");
135
- a(this, "closeButtons");
136
- a(this, "overlayClassName");
137
- a(this, "allowBodyScroll");
138
- a(this, "initAsOpen");
139
- a(this, "closeAll", (t2) => {
120
+ s(this, "modalElement");
121
+ s(this, "modalId");
122
+ s(this, "modalContent");
123
+ s(this, "triggerButtons", []);
124
+ s(this, "overlayElement");
125
+ s(this, "dispatchEventToDocument");
126
+ s(this, "options");
127
+ s(this, "state");
128
+ s(this, "animationEnter");
129
+ s(this, "animationExit");
130
+ s(this, "animateContent");
131
+ s(this, "hasDefaultOverlay");
132
+ s(this, "enableStackedModals");
133
+ s(this, "preventCloseModal");
134
+ s(this, "isKeyDownEventRegistered");
135
+ s(this, "closeButtons");
136
+ s(this, "overlayClassName");
137
+ s(this, "allowBodyScroll");
138
+ s(this, "initAsOpen");
139
+ s(this, "closeAll", (t2) => {
140
140
  if (this.enableStackedModals)
141
141
  return;
142
- const e2 = u("[data-fx-modal][data-state=open]");
142
+ const e2 = c("[data-fx-modal][data-state=open]");
143
143
  for (const n2 of e2) {
144
- const s2 = n2.dataset.modalId;
145
- if (s2 !== t2.dataset.modalId) {
144
+ const a2 = n2.dataset.modalId;
145
+ if (a2 !== t2.dataset.modalId) {
146
146
  n2.blur(), r("[data-modal-overlay]", n2).setAttribute("data-state", "close");
147
147
  const l2 = r("[data-modal-content]", n2);
148
- f(n2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${s2}:close`));
148
+ E(n2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${a2}:close`));
149
149
  }
150
150
  }
151
151
  });
152
- a(this, "closeModalEsc", (t2) => {
152
+ s(this, "closeModalEsc", (t2) => {
153
153
  t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
154
154
  });
155
- a(this, "initModal", (t2, e2) => {
156
- var m2;
157
- if (!(t2 instanceof HTMLElement))
158
- throw new Error("Modal Element must be a valid element");
159
- const { allowBodyScroll: n2, animateContent: s2, preventCloseModal: i2, overlayClass: l2, enableStackedModals: d2 } = e2;
160
- 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 = ((m2 = t2.dataset.modalOverlay) == null ? void 0 : m2.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 = s2, this.animationEnter = this.modalContent.dataset.enterAnimation || "", this.animationExit = this.modalContent.dataset.exitAnimation || "", this.modalContent.setAttribute("data-state", "close");
155
+ s(this, "initModal", (t2, e2) => {
156
+ var h;
157
+ if (!(t2 instanceof HTMLDialogElement))
158
+ throw new Error("Modal Element must be a valid HTMLDialog Element");
159
+ const { allowBodyScroll: n2, animateContent: a2, preventCloseModal: i2, overlayClass: l2, enableStackedModals: d2 } = e2;
160
+ 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();
161
161
  });
162
- a(this, "closeModalOnX", (t2) => {
162
+ s(this, "closeModalOnX", (t2) => {
163
163
  t2.preventDefault(), this.hideModal();
164
164
  });
165
- a(this, "addEvents", () => {
166
- if (this.triggerButton instanceof HTMLElement && this.triggerButton.addEventListener("click", this.showModal), this.closeButtons.length > 0)
165
+ s(this, "addEvents", () => {
166
+ for (const t2 of this.triggerButtons)
167
+ t2.addEventListener("click", this.showModal);
168
+ if (this.closeButtons.length > 0)
167
169
  for (const t2 of this.closeButtons)
168
170
  t2.addEventListener("click", this.closeModalOnX);
169
171
  this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
170
172
  });
171
- a(this, "showModal", () => {
172
- var e2, n2, s2, i2, l2;
173
+ s(this, "showModal", () => {
174
+ var e2, n2, a2, i2, l2;
173
175
  if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
174
- if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
176
+ if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : x({
175
177
  modalContent: this.modalContent,
176
178
  overlayClassName: this.overlayClassName
177
- }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), v(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
179
+ }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
178
180
  const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
179
- d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), f(this.modalElement, this.modalContent, "open"), g({
181
+ d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), y({
180
182
  element: this.modalContent,
181
183
  callback: () => {
182
184
  this.modalContent.style.removeProperty("--un-modal-animation");
183
185
  }
184
186
  });
185
187
  } else
186
- f(this.modalElement, this.modalContent, "open");
187
- this.allowBodyScroll || (document.body.style.overflow = "hidden"), this.isKeyDownEventRegistered || (document.addEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = true), this.modalElement.focus(), this.preventCloseModal || this.overlayElement.addEventListener("click", this.hideModal), (s2 = (n2 = this.options).onShow) == null || s2.call(n2), (l2 = (i2 = this.options).onToggle) == null || l2.call(i2, { isHidden: false });
188
+ E(this.modalElement, this.modalContent, "open");
189
+ 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();
188
190
  }
189
191
  });
190
- a(this, "hideModal", () => {
191
- var l2, d2, m2, y, w;
192
+ s(this, "closeModal", () => {
193
+ this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), A(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || C(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
194
+ });
195
+ s(this, "closeLastAction", () => {
196
+ var t2, e2, n2, a2;
197
+ 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 });
198
+ });
199
+ s(this, "hideModal", () => {
200
+ var a2, i2, l2, d2, h;
192
201
  let t2 = false;
193
- v(this.modalElement, "before-hide", {
202
+ f(this.modalElement, "before-hide", {
194
203
  modalId: this.modalId,
195
- setExitAction: (c) => {
196
- t2 = c;
204
+ setExitAction: (u) => {
205
+ t2 = u;
197
206
  }
198
207
  });
199
- const e2 = (m2 = (d2 = (l2 = this.options).beforeHide) == null ? void 0 : d2.call(l2)) == null ? void 0 : m2.cancelAction;
208
+ const e2 = (l2 = (i2 = (a2 = this.options).beforeHide) == null ? void 0 : i2.call(a2)) == null ? void 0 : l2.cancelAction;
200
209
  if (t2 || e2)
201
210
  return;
202
- const n2 = () => {
203
- f(this.modalElement, this.modalContent, "close"), B(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || k(this.overlayElement), v(this.modalElement, "modal-close", { modalId: this.modalElement.id });
204
- }, s2 = () => {
205
- var c, p, b, M;
206
- this.isKeyDownEventRegistered && (document.removeEventListener("keydown", this.closeModalEsc), this.isKeyDownEventRegistered = false), this.modalElement.blur(), (p = (c = this.options).onHide) == null || p.call(c), (M = (b = this.options).onToggle) == null || M.call(b, { isHidden: true });
207
- }, i2 = ((y = this.animateContent) == null ? void 0 : y.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
208
- if ((w = this.overlayElement) == null || w.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), i2) {
209
- const c = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
210
- this.modalContent.style.setProperty("--un-modal-animation", c);
211
+ const n2 = ((d2 = this.animateContent) == null ? void 0 : d2.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
212
+ if ((h = this.overlayElement) == null || h.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), n2) {
213
+ const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
214
+ this.modalContent.style.setProperty("--un-modal-animation", u);
211
215
  }
212
- g({
216
+ y({
213
217
  element: this.modalContent,
214
218
  callback: () => {
215
- i2 && this.modalContent.style.removeProperty("--un-modal-animation"), n2(), s2();
219
+ n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
216
220
  }
217
221
  });
218
222
  });
219
- a(this, "cleanup", () => {
220
- if (this.triggerButton instanceof HTMLElement && this.triggerButton.removeEventListener("click", this.showModal), this.closeButtons.length > 0)
223
+ s(this, "cleanup", () => {
224
+ for (const t2 of this.triggerButtons)
225
+ t2.removeEventListener("click", this.showModal);
226
+ if (this.closeButtons.length > 0)
221
227
  for (const t2 of this.closeButtons)
222
228
  t2.removeEventListener("click", this.closeModalOnX);
223
- !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), E.removeInstance("modal", this.modalElement);
229
+ !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);
230
+ });
231
+ s(this, "setOptions", ({ state: t2, allowBodyscroll: e2 }) => {
232
+ t2 && (this.state = t2), e2 !== void 0 && (this.allowBodyScroll = e2), this.state === "open" ? this.showModal() : this.state === "close" && this.hideModal();
224
233
  });
225
- const s = typeof t == "string" ? r(t) : t;
226
- if (!(s instanceof HTMLElement))
227
- throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
228
- this.modalElement = s, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
229
- const i = E.getInstance("modal", this.modalElement);
234
+ const a = typeof t == "string" ? r(t) : t;
235
+ if (!(a instanceof HTMLDialogElement))
236
+ throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");
237
+ this.modalElement = a, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
238
+ const i = v.getInstance("modal", this.modalElement);
230
239
  if (i)
231
240
  return i;
232
241
  this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
233
- const l = r("[data-modal-content]", s);
242
+ const l = r("[data-modal-content]", a);
234
243
  if (!(l instanceof HTMLElement))
235
244
  throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
236
245
  this.modalContent = l;
237
- const d = s.dataset.modalId;
238
- this.modalId = `${d}`;
239
- const m = (typeof n == "string" ? r(n) : n) || r(`[data-modal-target='${d}']`);
240
- this.triggerButton = m, this.initModal(this.modalElement, this.options), this.addEvents(), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : this.initAsOpen = false, this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, E.register("modal", this.modalElement, this);
246
+ const d = a.dataset.modalId;
247
+ this.modalId = `${d}`, 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")), v.register("modal", this.modalElement, this);
248
+ }
249
+ initializeTriggers(t, e) {
250
+ if (!t && e) {
251
+ const a = c(`[data-modal-target='${e}'], [data-modal-trigger][data-modal-id='${e}']`);
252
+ this.triggerButtons = a;
253
+ return;
254
+ }
255
+ if (!t)
256
+ return;
257
+ const n = Array.isArray(t) ? t : [t];
258
+ this.triggerButtons = n.map((a) => {
259
+ if (typeof a == "string") {
260
+ const i = r(a);
261
+ if (!(i instanceof HTMLElement))
262
+ throw new Error(`Trigger element not found: ${a}`);
263
+ return i;
264
+ }
265
+ if (!(a instanceof HTMLElement))
266
+ throw new Error("Invalid trigger element provided");
267
+ return a;
268
+ });
241
269
  }
242
270
  };
243
- a(h, "autoInit", (t = "[data-fx-modal]") => {
244
- const e = u(t);
271
+ s(m, "autoInit", (t = "[data-fx-modal]") => {
272
+ const e = c(t);
245
273
  for (const n of e)
246
- new h(n);
274
+ new m(n);
247
275
  }), /**
248
276
  * Creates and initializes a new Modal instance
249
277
  */
250
- a(h, "init", (t, e = {}, n) => new h(t, e, n));
251
- var A = h;
278
+ s(m, "init", (t, e = {}, n) => new m(t, e, n));
279
+ var w = m;
252
280
 
253
281
  // src/index.js
254
282
  function Modal(Alpine) {
@@ -261,6 +289,13 @@ function Modal(Alpine) {
261
289
  );
262
290
  return;
263
291
  }
292
+ if (!(el instanceof HTMLDialogElement)) {
293
+ console.error(
294
+ "\u274C x-modal must be used only on an HTMLDialogElement:",
295
+ el
296
+ );
297
+ return;
298
+ }
264
299
  const content = el.querySelector("[data-modal-content]");
265
300
  if (!content) {
266
301
  console.error(
@@ -269,33 +304,20 @@ function Modal(Alpine) {
269
304
  );
270
305
  return;
271
306
  }
272
- const trigger = document.querySelector(
273
- `[data-modal-trigger][data-modal-id="${modalId}"]`
274
- );
275
- const modalInstance = new A(el, {
307
+ const modalInstance = new w(el, {
276
308
  dispatchEventToDocument: false
277
309
  });
278
310
  if (!Alpine.store("modals")) {
279
311
  Alpine.store("modals", {});
280
312
  }
281
313
  Alpine.store("modals")[modalId] = modalInstance;
282
- const showModal = () => {
283
- modalInstance.showModal();
284
- };
285
- const hideModal = () => {
286
- modalInstance.hideModal();
287
- };
314
+ const showModal = () => modalInstance.showModal();
315
+ const hideModal = () => modalInstance.hideModal();
288
316
  document.addEventListener(`modal:${modalId}:open`, showModal);
289
317
  document.addEventListener(`modal:${modalId}:close`, hideModal);
290
- if (trigger instanceof HTMLElement) {
291
- trigger.addEventListener("click", showModal);
292
- }
293
318
  cleanup(() => {
294
319
  modalInstance.cleanup();
295
320
  delete Alpine.store("modals")[modalId];
296
- if (trigger instanceof HTMLElement) {
297
- trigger.removeEventListener("click", showModal);
298
- }
299
321
  document.removeEventListener(`modal:${modalId}:open`, showModal);
300
322
  document.removeEventListener(`modal:${modalId}:close`, hideModal);
301
323
  });