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