@flexilla/alpine-modal 0.0.1 → 0.0.3

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.
package/dist/cdn.js CHANGED
@@ -1,246 +1,279 @@
1
1
  (() => {
2
2
  // ../../node_modules/@flexilla/modal/dist/modal.js
3
- var j = Object.defineProperty;
4
- var z = (t, e, n) => e in t ? j(t, e, { enumerable: true, configurable: true, writable: true, value: n }) : t[e] = n;
5
- var c = (t, e, n) => z(t, typeof e != "symbol" ? e + "" : e, n);
6
- var O = class {
7
- static initGlobalRegistry() {
8
- window.$flexillaInstances || (window.$flexillaInstances = {});
9
- }
10
- static register(e, n, a) {
11
- return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, n) || (window.$flexillaInstances[e].push({ element: n, instance: a }), a);
12
- }
13
- static getInstance(e, n) {
14
- var a, d;
15
- return this.initGlobalRegistry(), (d = (a = window.$flexillaInstances[e]) == null ? void 0 : a.find(
16
- (s) => s.element === n
17
- )) == null ? void 0 : d.instance;
18
- }
19
- static removeInstance(e, n) {
20
- this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
21
- (a) => a.element !== n
22
- ));
23
- }
24
- };
25
- var r = (t, e = document.body) => e.querySelector(t);
26
- var H = (t, e = document.body) => Array.from(e.querySelectorAll(t));
27
- var J = ({
28
- newElement: t,
29
- existingElement: e
3
+ var C = Object.defineProperty;
4
+ var x = (o, t, e) => t in o ? C(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
5
+ var a = (o, t, e) => x(o, typeof t != "symbol" ? t + "" : t, e);
6
+ var r = (o, t = document.body) => t.querySelector(o);
7
+ var u = (o, t = document.body) => Array.from(t.querySelectorAll(o));
8
+ var I = ({
9
+ newElement: o,
10
+ existingElement: t
30
11
  }) => {
31
- if (!(t instanceof HTMLElement) || !(e instanceof HTMLElement))
12
+ if (!(o instanceof HTMLElement) || !(t instanceof HTMLElement))
32
13
  throw new Error("Both parameters must be valid HTML elements.");
33
- const n = e.parentElement;
34
- if (n)
35
- n.insertBefore(t, e);
14
+ const e = t.parentElement;
15
+ if (e)
16
+ e.insertBefore(o, t);
36
17
  else
37
18
  throw new Error("Existing element must have a parent element.");
38
19
  };
39
- var Q = ({
40
- element: t,
41
- callback: e,
42
- type: n,
43
- keysCheck: a
20
+ var L = ({
21
+ element: o,
22
+ callback: t,
23
+ type: e,
24
+ keysCheck: n
44
25
  }) => {
45
- const d = getComputedStyle(t), s = d.animation;
46
- if (s !== "none" && s !== "" && !a.includes(s)) {
47
- const f = "animationend", u = () => {
48
- t.removeEventListener(f, u), e();
26
+ const s = getComputedStyle(o), i = s.animation;
27
+ if (i !== "none" && i !== "" && !n.includes(i)) {
28
+ const l = "animationend", d = () => {
29
+ o.removeEventListener(l, d), t();
49
30
  };
50
- t.addEventListener(f, u, { once: true });
31
+ o.addEventListener(l, d, { once: true });
51
32
  } else
52
- e();
33
+ t();
53
34
  };
54
- var N = ({ element: t, callback: e }) => {
55
- Q({
56
- element: t,
57
- callback: e,
35
+ var g = ({ element: o, callback: t }) => {
36
+ L({
37
+ element: o,
38
+ callback: t,
58
39
  type: "animation",
59
40
  keysCheck: ["none 0s ease 0s 1 normal none running"]
60
41
  });
61
42
  };
62
- var B = (t, e, n) => {
63
- const a = new CustomEvent(e, { detail: n });
64
- t.dispatchEvent(a);
65
- };
66
- var W = (t) => {
67
- var e;
68
- t instanceof HTMLElement && ((e = t.parentElement) == null || e.removeChild(t));
43
+ var v = (o, t, e) => {
44
+ const n = new CustomEvent(t, { detail: e });
45
+ o.dispatchEvent(n);
69
46
  };
70
- var U = ({ modalContent: t, overlayClassName: e }) => {
71
- const n = document.createElement("span");
72
- return n.setAttribute("aria-hidden", "true"), J({ newElement: n, existingElement: t }), n.classList.add(...e), n.setAttribute("data-modal-overlay", ""), n;
73
- };
74
- var k = (t, e, n) => {
75
- if (!(e instanceof HTMLElement))
47
+ var f = (o, t, e) => {
48
+ if (!(t instanceof HTMLElement))
76
49
  throw new Error("No modal-content found");
77
- t.setAttribute("aria-hidden", n === "open" ? "false" : "true"), t.setAttribute("data-state", n), e.setAttribute("data-state", n);
78
- const a = r("[data-modal-overlay]", t);
79
- a instanceof HTMLElement && a.setAttribute("data-state", n);
50
+ o.setAttribute("aria-hidden", e === "open" ? "false" : "true"), o.setAttribute("data-state", e), t.setAttribute("data-state", e);
51
+ const n = r("[data-modal-overlay]", o);
52
+ n instanceof HTMLElement && n.setAttribute("data-state", e);
80
53
  };
81
- var V = (t, e, n) => {
82
- if (!t) {
83
- e || (document.body.style.overflowY = "auto");
54
+ var B = (o, t, e) => {
55
+ if (!o) {
56
+ t || (document.body.style.overflowY = "auto");
84
57
  return;
85
58
  }
86
- H("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((s) => s !== n).length === 0 && !e && (document.body.style.overflowY = "auto");
59
+ 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");
87
60
  };
88
- var Z = (t, e, n) => {
89
- var q;
90
- if (!(t instanceof HTMLElement))
91
- throw new Error("Modal Element must be a valid element");
92
- const { animateContent: a, allowBodyScroll: d, preventCloseModal: s, overlayClass: f, onShow: u, onHide: h, onToggle: m, beforeHide: b, enableStackedModals: g } = n, p = d || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", F = s || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", C = g || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", K = (f == null ? void 0 : f.split(" ")) || ((q = t.dataset.modalOverlay) == null ? void 0 : q.split(" ")) || "";
93
- let x = false;
94
- t.setAttribute("data-allow-body-scroll", `${p}`);
95
- const o = r("[data-modal-content]", t), L = H("[data-close-modal]", t);
96
- let i = null, S = false;
97
- if (r("[data-modal-overlay]", t) instanceof HTMLElement && (i = r("[data-modal-overlay]", t), i.setAttribute("data-overlay-nature", "default"), S = true), !(o instanceof HTMLElement))
98
- throw new Error("Modal content element not found");
99
- const D = o.dataset.enterAnimation || "", P = o.dataset.exitAnimation || "";
100
- o.setAttribute("data-state", "close");
101
- const R = (l) => {
102
- l.preventDefault(), l.key === "Escape" && !F && A();
103
- }, X = (l) => {
104
- if (C)
105
- return;
106
- const w = H("[data-fx-modal][data-state=open]");
107
- for (const y of w)
108
- if (y !== l) {
109
- const M = r("[data-modal-overlay]", y);
110
- M.setAttribute("data-state", "close");
111
- const I = r("[data-modal-content]", y), E = M.getAttribute("data-overlay-nature") === "default";
112
- k(y, I, "close"), E || W(M);
113
- }
114
- }, T = () => {
115
- if (t.getAttribute("data-state") !== "open") {
116
- if (X(t), i = S ? i : U({
117
- modalContent: o,
118
- overlayClassName: K
119
- }), i == null || i.setAttribute("data-state", "open"), B(t, "modal-open", { modalId: t.id }), a || D !== "") {
120
- const w = a ? a.enterAnimation : D;
121
- w !== "" && o.style.setProperty("--un-modal-animation", w), k(t, o, "open"), N({
122
- element: o,
123
- callback: () => {
124
- o.style.removeProperty("--un-modal-animation");
125
- }
126
- });
127
- } else
128
- k(t, o, "open");
129
- p || (document.body.style.overflow = "hidden"), x || (document.addEventListener("keydown", R), x = true), t.focus(), s || i.addEventListener("click", A), u == null || u(), m == null || m({ isHidden: false });
130
- }
131
- }, A = () => {
132
- var E;
133
- let l = false;
134
- B(t, "before-hide", {
135
- modalId: t.id,
136
- setExitAction: ($) => {
137
- l = $;
138
- }
139
- });
140
- const w = (E = b == null ? void 0 : b()) == null ? void 0 : E.cancelAction;
141
- if (l || w)
142
- return;
143
- const y = () => {
144
- k(t, o, "close"), V(C, p, t), S || W(i), B(t, "modal-close", { modalId: t.id });
145
- }, M = () => {
146
- x && (document.removeEventListener("keydown", R), x = false), t.blur(), h == null || h(), m == null || m({ isHidden: true });
147
- }, I = (a == null ? void 0 : a.exitAnimation) && a.exitAnimation !== "" || P !== "";
148
- if (i == null || i.setAttribute("data-state", "close"), o.setAttribute("data-state", "close"), I) {
149
- const $ = a ? a.exitAnimation || "" : P;
150
- o.style.setProperty("--un-modal-animation", $);
151
- }
152
- N({
153
- element: o,
154
- callback: () => {
155
- I && o.style.removeProperty("--un-modal-animation"), y(), M();
156
- }
157
- });
158
- }, G = (l) => {
159
- l.preventDefault(), A();
160
- };
161
- return { autoInitModal: () => {
162
- if (e instanceof HTMLElement && e.addEventListener("click", T), L.length > 0)
163
- for (const l of L)
164
- l.addEventListener("click", G);
165
- }, showModal: T, hideModal: A, isHidden: () => t.dataset.state === "close", cleanup: () => {
166
- if (e instanceof HTMLElement && e.removeEventListener("click", T), L.length > 0)
167
- for (const l of L)
168
- l.removeEventListener("click", G);
169
- !s && i instanceof HTMLElement && i.removeEventListener("click", A), O.removeInstance("modal", t);
170
- } };
61
+ var E = class {
62
+ static initGlobalRegistry() {
63
+ window.$flexillaInstances || (window.$flexillaInstances = {});
64
+ }
65
+ static register(t, e, n) {
66
+ return this.initGlobalRegistry(), window.$flexillaInstances[t] || (window.$flexillaInstances[t] = []), this.getInstance(t, e) || (window.$flexillaInstances[t].push({ element: e, instance: n }), n);
67
+ }
68
+ static getInstance(t, e) {
69
+ var n, s;
70
+ return this.initGlobalRegistry(), (s = (n = window.$flexillaInstances[t]) == null ? void 0 : n.find(
71
+ (i) => i.element === e
72
+ )) == null ? void 0 : s.instance;
73
+ }
74
+ static removeInstance(t, e) {
75
+ this.initGlobalRegistry(), window.$flexillaInstances[t] && (window.$flexillaInstances[t] = window.$flexillaInstances[t].filter(
76
+ (n) => n.element !== e
77
+ ));
78
+ }
79
+ };
80
+ var k = (o) => {
81
+ var t;
82
+ o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
83
+ };
84
+ var T = ({ modalContent: o, overlayClassName: t }) => {
85
+ const e = document.createElement("span");
86
+ return e.setAttribute("aria-hidden", "true"), I({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
171
87
  };
172
- var v = class v2 {
88
+ var h = class h2 {
173
89
  /**
174
90
  * Creates a new Modal instance
175
91
  * @param modal - The modal element or selector string to initialize
176
92
  * @param options - Configuration options for the modal behavior
177
93
  * @param triggerElement - Optional trigger element or selector that opens the modal
178
- * @throws {Error} When the provided modal element is invalid or cannot be found
179
94
  */
180
- constructor(e, n = {}, a) {
181
- c(this, "modalElement");
182
- c(this, "showModal");
183
- c(this, "hideModal");
184
- c(this, "cleanup");
185
- c(this, "isHidden");
186
- c(this, "options");
187
- c(this, "state");
188
- const d = typeof e == "string" ? r(e) : e;
189
- if (!(d instanceof HTMLElement))
95
+ constructor(t, e = {}, n) {
96
+ a(this, "modalElement");
97
+ a(this, "modalId");
98
+ a(this, "modalContent");
99
+ a(this, "triggerButton");
100
+ a(this, "overlayElement");
101
+ a(this, "dispatchEventToDocument");
102
+ a(this, "options");
103
+ a(this, "state");
104
+ a(this, "animationEnter");
105
+ a(this, "animationExit");
106
+ a(this, "animateContent");
107
+ a(this, "hasDefaultOverlay");
108
+ a(this, "enableStackedModals");
109
+ a(this, "preventCloseModal");
110
+ a(this, "isKeyDownEventRegistered");
111
+ a(this, "closeButtons");
112
+ a(this, "overlayClassName");
113
+ a(this, "allowBodyScroll");
114
+ a(this, "initAsOpen");
115
+ a(this, "closeAll", (t2) => {
116
+ if (this.enableStackedModals)
117
+ return;
118
+ const e2 = u("[data-fx-modal][data-state=open]");
119
+ for (const n2 of e2) {
120
+ const s2 = n2.dataset.modalId;
121
+ if (s2 !== t2.dataset.modalId) {
122
+ n2.blur(), r("[data-modal-overlay]", n2).setAttribute("data-state", "close");
123
+ const l2 = r("[data-modal-content]", n2);
124
+ f(n2, l2, "close"), document.dispatchEvent(new CustomEvent(`modal:${s2}:close`));
125
+ }
126
+ }
127
+ });
128
+ a(this, "closeModalEsc", (t2) => {
129
+ t2.key === "Escape" && (t2.preventDefault(), this.preventCloseModal || this.hideModal());
130
+ });
131
+ a(this, "initModal", (t2, e2) => {
132
+ var m2;
133
+ if (!(t2 instanceof HTMLElement))
134
+ throw new Error("Modal Element must be a valid element");
135
+ const { allowBodyScroll: n2, animateContent: s2, preventCloseModal: i2, overlayClass: l2, enableStackedModals: d2 } = e2;
136
+ 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");
137
+ });
138
+ a(this, "closeModalOnX", (t2) => {
139
+ t2.preventDefault(), this.hideModal();
140
+ });
141
+ a(this, "addEvents", () => {
142
+ if (this.triggerButton instanceof HTMLElement && this.triggerButton.addEventListener("click", this.showModal), this.closeButtons.length > 0)
143
+ for (const t2 of this.closeButtons)
144
+ t2.addEventListener("click", this.closeModalOnX);
145
+ this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:open`, this.showModal), this.dispatchEventToDocument && document.addEventListener(`modal:${this.modalId}:close`, this.hideModal);
146
+ });
147
+ a(this, "showModal", () => {
148
+ var e2, n2, s2, i2, l2;
149
+ if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
150
+ if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
151
+ modalContent: this.modalContent,
152
+ overlayClassName: this.overlayClassName
153
+ }), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), v(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
154
+ const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
155
+ d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), f(this.modalElement, this.modalContent, "open"), g({
156
+ element: this.modalContent,
157
+ callback: () => {
158
+ this.modalContent.style.removeProperty("--un-modal-animation");
159
+ }
160
+ });
161
+ } else
162
+ f(this.modalElement, this.modalContent, "open");
163
+ 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 });
164
+ }
165
+ });
166
+ a(this, "hideModal", () => {
167
+ var l2, d2, m2, y, w;
168
+ let t2 = false;
169
+ v(this.modalElement, "before-hide", {
170
+ modalId: this.modalId,
171
+ setExitAction: (c) => {
172
+ t2 = c;
173
+ }
174
+ });
175
+ const e2 = (m2 = (d2 = (l2 = this.options).beforeHide) == null ? void 0 : d2.call(l2)) == null ? void 0 : m2.cancelAction;
176
+ if (t2 || e2)
177
+ return;
178
+ const n2 = () => {
179
+ 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 });
180
+ }, s2 = () => {
181
+ var c, p, b, M;
182
+ 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 });
183
+ }, i2 = ((y = this.animateContent) == null ? void 0 : y.exitAnimation) && this.animateContent.exitAnimation !== "" || this.animationExit && this.animationExit !== "";
184
+ if ((w = this.overlayElement) == null || w.setAttribute("data-state", "close"), this.modalContent.setAttribute("data-state", "close"), i2) {
185
+ const c = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
186
+ this.modalContent.style.setProperty("--un-modal-animation", c);
187
+ }
188
+ g({
189
+ element: this.modalContent,
190
+ callback: () => {
191
+ i2 && this.modalContent.style.removeProperty("--un-modal-animation"), n2(), s2();
192
+ }
193
+ });
194
+ });
195
+ a(this, "cleanup", () => {
196
+ if (this.triggerButton instanceof HTMLElement && this.triggerButton.removeEventListener("click", this.showModal), this.closeButtons.length > 0)
197
+ for (const t2 of this.closeButtons)
198
+ t2.removeEventListener("click", this.closeModalOnX);
199
+ !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);
200
+ });
201
+ const s = typeof t == "string" ? r(t) : t;
202
+ if (!(s instanceof HTMLElement))
190
203
  throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");
191
- this.modalElement = d, this.options = n, this.state = (n == null ? void 0 : n.defaultState) || this.modalElement.dataset.state || "close";
192
- const s = O.getInstance("modal", this.modalElement);
193
- if (s)
194
- return s;
204
+ this.modalElement = s, this.options = e, this.state = (e == null ? void 0 : e.defaultState) || this.modalElement.dataset.state || "close";
205
+ const i = E.getInstance("modal", this.modalElement);
206
+ if (i)
207
+ return i;
195
208
  this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", "");
196
- const f = d.dataset.modalId, u = (typeof a == "string" ? r(a) : a) || r(`[data-modal-target='${f}']`), { showModal: h, hideModal: m, autoInitModal: b, isHidden: g, cleanup: p } = Z(d, u, this.options);
197
- this.state === "open" && h(), b(), this.showModal = h, this.hideModal = m, this.isHidden = g, this.cleanup = p, O.register("modal", this.modalElement, this);
209
+ const l = r("[data-modal-content]", s);
210
+ if (!(l instanceof HTMLElement))
211
+ throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
212
+ this.modalContent = l;
213
+ const d = s.dataset.modalId;
214
+ this.modalId = `${d}`;
215
+ const m = (typeof n == "string" ? r(n) : n) || r(`[data-modal-target='${d}']`);
216
+ 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);
198
217
  }
199
218
  };
200
- c(v, "autoInit", (e = "[data-fx-modal]") => {
201
- const n = H(e);
202
- for (const a of n)
203
- new v(a);
219
+ a(h, "autoInit", (t = "[data-fx-modal]") => {
220
+ const e = u(t);
221
+ for (const n of e)
222
+ new h(n);
204
223
  }), /**
205
224
  * Creates and initializes a new Modal instance
206
- * @param modal - The modal element or selector string
207
- * @param options - Configuration options for the modal
208
- * @param triggerElement - Optional trigger element or selector
209
- * @returns {Modal} A new Modal instance
210
- *
211
- * @example
212
- * ```typescript
213
- * const modal = Modal.init('#myModal', {
214
- * defaultState: 'open',
215
- * allowBodyScroll: true
216
- * });
217
- * ```
218
225
  */
219
- c(v, "init", (e, n = {}, a) => new v(e, n, a));
220
- var Y = v;
226
+ a(h, "init", (t, e = {}, n) => new h(t, e, n));
227
+ var A = h;
221
228
 
222
229
  // src/index.js
223
230
  function Modal(Alpine) {
224
231
  Alpine.directive("modal", (el, {}, { cleanup }) => {
225
232
  const modalId = el.getAttribute("data-modal-id");
226
233
  if (!modalId) {
227
- console.error("\u274C data-modal-id is required but missing on element:", el);
234
+ console.error(
235
+ "\u274C data-modal-id is required but missing on element:",
236
+ el
237
+ );
238
+ return;
239
+ }
240
+ const content = el.querySelector("[data-modal-content]");
241
+ if (!content) {
242
+ console.error(
243
+ "\u274C data-modal-content Element is required but missing in Modal Element:",
244
+ el
245
+ );
228
246
  return;
229
247
  }
230
- const modalInstance = new Y(el);
248
+ const trigger = document.querySelector(
249
+ `[data-modal-trigger][data-modal-id="${modalId}"]`
250
+ );
251
+ const modalInstance = new A(el, {
252
+ dispatchEventToDocument: false
253
+ });
231
254
  if (!Alpine.store("modals")) {
232
255
  Alpine.store("modals", {});
233
256
  }
234
257
  Alpine.store("modals")[modalId] = modalInstance;
235
- const openHandler = () => modalInstance.showModal();
236
- const closeHandler = () => modalInstance.hideModal();
237
- document.addEventListener(`modal:${modalId}:open`, openHandler);
238
- document.addEventListener(`modal:${modalId}:close`, closeHandler);
258
+ const showModal = () => {
259
+ modalInstance.showModal();
260
+ };
261
+ const hideModal = () => {
262
+ modalInstance.hideModal();
263
+ };
264
+ document.addEventListener(`modal:${modalId}:open`, showModal);
265
+ document.addEventListener(`modal:${modalId}:close`, hideModal);
266
+ if (trigger instanceof HTMLElement) {
267
+ trigger.addEventListener("click", showModal);
268
+ }
239
269
  cleanup(() => {
240
- document.removeEventListener(`modal:${modalId}:open`, openHandler);
241
- document.removeEventListener(`modal:${modalId}:close`, closeHandler);
242
270
  modalInstance.cleanup();
243
271
  delete Alpine.store("modals")[modalId];
272
+ if (trigger instanceof HTMLElement) {
273
+ trigger.removeEventListener("click", showModal);
274
+ }
275
+ document.removeEventListener(`modal:${modalId}:open`, showModal);
276
+ document.removeEventListener(`modal:${modalId}:close`, hideModal);
244
277
  });
245
278
  });
246
279
  Alpine.magic("modal", () => (id) => {
package/dist/cdn.min.js CHANGED
@@ -1 +1 @@
1
- (()=>{var Q=Object.defineProperty,U=(e,t,a)=>t in e?Q(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,m=(e,t,a)=>U(e,typeof t!="symbol"?t+"":t,a),y=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,a,n){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,a)||(window.$flexillaInstances[t].push({element:a,instance:n}),n)}static getInstance(t,a){var n,o;return this.initGlobalRegistry(),(o=(n=window.$flexillaInstances[t])==null?void 0:n.find(i=>i.element===a))==null?void 0:o.instance}static removeInstance(t,a){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(n=>n.element!==a))}},c=(e,t=document.body)=>t.querySelector(e),H=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),V=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let a=t.parentElement;if(a)a.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},W=({element:e,callback:t,type:a,keysCheck:n})=>{let o=getComputedStyle(e),i=o.animation;if(i!=="none"&&i!==""&&!n.includes(i)){let r="animationend",u=()=>{e.removeEventListener(r,u),t()};e.addEventListener(r,u,{once:!0})}else t()},Y=({element:e,callback:t})=>{W({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},G=(e,t,a)=>{let n=new CustomEvent(t,{detail:a});e.dispatchEvent(n)},j=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},X=({modalContent:e,overlayClassName:t})=>{let a=document.createElement("span");return a.setAttribute("aria-hidden","true"),V({newElement:a,existingElement:e}),a.classList.add(...t),a.setAttribute("data-modal-overlay",""),a},I=(e,t,a)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",a==="open"?"false":"true"),e.setAttribute("data-state",a),t.setAttribute("data-state",a);let n=c("[data-modal-overlay]",e);n instanceof HTMLElement&&n.setAttribute("data-state",a)},Z=(e,t,a)=>{if(!e){t||(document.body.style.overflowY="auto");return}H("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(n=>n!==a).length===0&&!t&&(document.body.style.overflowY="auto")},_=(e,t,a)=>{var n;if(!(e instanceof HTMLElement))throw new Error("Modal Element must be a valid element");let{animateContent:o,allowBodyScroll:i,preventCloseModal:r,overlayClass:u,onShow:h,onHide:p,onToggle:f,beforeHide:M,enableStackedModals:k}=a,$=i||e.hasAttribute("data-allow-body-scroll")&&e.getAttribute("data-allow-body-scroll")!=="false",J=r||e.hasAttribute("data-prevent-close-modal")&&e.getAttribute("data-prevent-close-modal")!=="false",N=k||e.hasAttribute("data-enable-stacked")&&e.getAttribute("data-enable-stacked")!=="false",K=u?.split(" ")||((n=e.dataset.modalOverlay)==null?void 0:n.split(" "))||"",g=!1;e.setAttribute("data-allow-body-scroll",`${$}`);let s=c("[data-modal-content]",e),L=H("[data-close-modal]",e),d=null,T=!1;if(c("[data-modal-overlay]",e)instanceof HTMLElement&&(d=c("[data-modal-overlay]",e),d.setAttribute("data-overlay-nature","default"),T=!0),!(s instanceof HTMLElement))throw new Error("Modal content element not found");let R=s.dataset.enterAnimation||"",q=s.dataset.exitAnimation||"";s.setAttribute("data-state","close");let B=l=>{l.preventDefault(),l.key==="Escape"&&!J&&w()},O=l=>{if(N)return;let A=H("[data-fx-modal][data-state=open]");for(let v of A)if(v!==l){let b=c("[data-modal-overlay]",v);b.setAttribute("data-state","close");let S=c("[data-modal-content]",v),x=b.getAttribute("data-overlay-nature")==="default";I(v,S,"close"),x||j(b)}},C=()=>{if(e.getAttribute("data-state")!=="open"){if(O(e),d=T?d:X({modalContent:s,overlayClassName:K}),d?.setAttribute("data-state","open"),G(e,"modal-open",{modalId:e.id}),o||R!==""){let l=o?o.enterAnimation:R;l!==""&&s.style.setProperty("--un-modal-animation",l),I(e,s,"open"),Y({element:s,callback:()=>{s.style.removeProperty("--un-modal-animation")}})}else I(e,s,"open");$||(document.body.style.overflow="hidden"),g||(document.addEventListener("keydown",B),g=!0),e.focus(),r||d.addEventListener("click",w),h?.(),f?.({isHidden:!1})}},w=()=>{var l;let A=!1;G(e,"before-hide",{modalId:e.id,setExitAction:P=>{A=P}});let v=(l=M?.())==null?void 0:l.cancelAction;if(A||v)return;let b=()=>{I(e,s,"close"),Z(N,$,e),T||j(d),G(e,"modal-close",{modalId:e.id})},S=()=>{g&&(document.removeEventListener("keydown",B),g=!1),e.blur(),p?.(),f?.({isHidden:!0})},x=o?.exitAnimation&&o.exitAnimation!==""||q!=="";if(d?.setAttribute("data-state","close"),s.setAttribute("data-state","close"),x){let P=o?o.exitAnimation||"":q;s.style.setProperty("--un-modal-animation",P)}Y({element:s,callback:()=>{x&&s.style.removeProperty("--un-modal-animation"),b(),S()}})},D=l=>{l.preventDefault(),w()};return{autoInitModal:()=>{if(t instanceof HTMLElement&&t.addEventListener("click",C),L.length>0)for(let l of L)l.addEventListener("click",D)},showModal:C,hideModal:w,isHidden:()=>e.dataset.state==="close",cleanup:()=>{if(t instanceof HTMLElement&&t.removeEventListener("click",C),L.length>0)for(let l of L)l.removeEventListener("click",D);!r&&d instanceof HTMLElement&&d.removeEventListener("click",w),y.removeInstance("modal",e)}}},E=class{constructor(t,a={},n){m(this,"modalElement"),m(this,"showModal"),m(this,"hideModal"),m(this,"cleanup"),m(this,"isHidden"),m(this,"options"),m(this,"state");let o=typeof t=="string"?c(t):t;if(!(o instanceof HTMLElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalElement=o,this.options=a,this.state=a?.defaultState||this.modalElement.dataset.state||"close";let i=y.getInstance("modal",this.modalElement);if(i)return i;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let r=o.dataset.modalId,u=(typeof n=="string"?c(n):n)||c(`[data-modal-target='${r}']`),{showModal:h,hideModal:p,autoInitModal:f,isHidden:M,cleanup:k}=_(o,u,this.options);this.state==="open"&&h(),f(),this.showModal=h,this.hideModal=p,this.isHidden=M,this.cleanup=k,y.register("modal",this.modalElement,this)}};m(E,"autoInit",(e="[data-fx-modal]")=>{let t=H(e);for(let a of t)new E(a)}),m(E,"init",(e,t={},a)=>new E(e,t,a));var z=E;function ee(e){e.directive("modal",(t,{},{cleanup:a})=>{let n=t.getAttribute("data-modal-id");if(!n){console.error("\u274C data-modal-id is required but missing on element:",t);return}let o=new z(t);e.store("modals")||e.store("modals",{}),e.store("modals")[n]=o;let i=()=>o.showModal(),r=()=>o.hideModal();document.addEventListener(`modal:${n}:open`,i),document.addEventListener(`modal:${n}:close`,r),a(()=>{document.removeEventListener(`modal:${n}:open`,i),document.removeEventListener(`modal:${n}:close`,r),o.cleanup(),delete e.store("modals")[n]})}),e.magic("modal",()=>t=>e.store("modals")?e.store("modals")[t]?e.store("modals")[t]:(console.warn(`\u26A0\uFE0F No modal instance found for ID: ${t}`),null):(console.warn("\u26A0\uFE0F Alpine store for modals is not initialized."),null))}var F=ee;document.addEventListener("alpine:init",()=>{F(window.Alpine)});})();
1
+ (()=>{var H=Object.defineProperty,S=(e,t,n)=>t in e?H(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,s=(e,t,n)=>S(e,typeof t!="symbol"?t+"":t,n),v=(e,t=document.body)=>t.querySelector(e),g=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),O=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let n=t.parentElement;if(n)n.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},R=({element:e,callback:t,type:n,keysCheck:o})=>{let d=getComputedStyle(e),i=d.animation;if(i!=="none"&&i!==""&&!o.includes(i)){let r="animationend",m=()=>{e.removeEventListener(r,m),t()};e.addEventListener(r,m,{once:!0})}else t()},T=({element:e,callback:t})=>{R({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},L=(e,t,n)=>{let o=new CustomEvent(t,{detail:n});e.dispatchEvent(o)},b=(e,t,n)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",n==="open"?"false":"true"),e.setAttribute("data-state",n),t.setAttribute("data-state",n);let o=v("[data-modal-overlay]",e);o instanceof HTMLElement&&o.setAttribute("data-state",n)},N=(e,t,n)=>{if(!e){t||(document.body.style.overflowY="auto");return}g("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(o=>o!==n).length===0&&!t&&(document.body.style.overflowY="auto")},w=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,n,o){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,n)||(window.$flexillaInstances[t].push({element:n,instance:o}),o)}static getInstance(t,n){var o,d;return this.initGlobalRegistry(),(d=(o=window.$flexillaInstances[t])==null?void 0:o.find(i=>i.element===n))==null?void 0:d.instance}static removeInstance(t,n){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(o=>o.element!==n))}},P=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},q=({modalContent:e,overlayClassName:t})=>{let n=document.createElement("span");return n.setAttribute("aria-hidden","true"),O({newElement:n,existingElement:e}),n.classList.add(...t),n.setAttribute("data-modal-overlay",""),n},y=class{constructor(t,n={},o){s(this,"modalElement"),s(this,"modalId"),s(this,"modalContent"),s(this,"triggerButton"),s(this,"overlayElement"),s(this,"dispatchEventToDocument"),s(this,"options"),s(this,"state"),s(this,"animationEnter"),s(this,"animationExit"),s(this,"animateContent"),s(this,"hasDefaultOverlay"),s(this,"enableStackedModals"),s(this,"preventCloseModal"),s(this,"isKeyDownEventRegistered"),s(this,"closeButtons"),s(this,"overlayClassName"),s(this,"allowBodyScroll"),s(this,"initAsOpen"),s(this,"closeAll",a=>{if(this.enableStackedModals)return;let h=g("[data-fx-modal][data-state=open]");for(let l of h){let c=l.dataset.modalId;if(c!==a.dataset.modalId){l.blur(),v("[data-modal-overlay]",l).setAttribute("data-state","close");let u=v("[data-modal-content]",l);b(l,u,"close"),document.dispatchEvent(new CustomEvent(`modal:${c}:close`))}}}),s(this,"closeModalEsc",a=>{a.key==="Escape"&&(a.preventDefault(),this.preventCloseModal||this.hideModal())}),s(this,"initModal",(a,h)=>{var l;if(!(a instanceof HTMLElement))throw new Error("Modal Element must be a valid element");let{allowBodyScroll:c,animateContent:u,preventCloseModal:E,overlayClass:M,enableStackedModals:C}=h;this.allowBodyScroll=a.hasAttribute("data-allow-body-scroll")&&a.getAttribute("data-allow-body-scroll")!=="false"||c||!1,this.preventCloseModal=a.hasAttribute("data-prevent-close-modal")&&a.getAttribute("data-prevent-close-modal")!=="false"||E||!1,this.enableStackedModals=a.hasAttribute("data-enable-stacked")&&a.getAttribute("data-enable-stacked")!=="false"||C||!1,this.overlayClassName=((l=a.dataset.modalOverlay)==null?void 0:l.split(" "))||M?.split(" ")||"",this.isKeyDownEventRegistered=!1,a.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=g("[data-close-modal]",a),this.hasDefaultOverlay=!1,v("[data-modal-overlay]",a)instanceof HTMLElement&&(this.overlayElement=v("[data-modal-overlay]",a),this.overlayElement.setAttribute("data-overlay-nature","default"),this.hasDefaultOverlay=!0),this.animateContent=u,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.modalContent.setAttribute("data-state","close")}),s(this,"closeModalOnX",a=>{a.preventDefault(),this.hideModal()}),s(this,"addEvents",()=>{if(this.triggerButton instanceof HTMLElement&&this.triggerButton.addEventListener("click",this.showModal),this.closeButtons.length>0)for(let a of this.closeButtons)a.addEventListener("click",this.closeModalOnX);this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:close`,this.hideModal)}),s(this,"showModal",()=>{var a,h,l,c,u;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:q({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(a=this.overlayElement)==null||a.setAttribute("data-state","open"),L(this.modalElement,"modal-open",{modalId:this.modalId}),this.animateContent||this.animationEnter!==""){let E=this.animateContent?this.animateContent.enterAnimation:this.animationEnter;E&&E!==""&&this.modalContent.style.setProperty("--un-modal-animation",E),b(this.modalElement,this.modalContent,"open"),T({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else b(this.modalElement,this.modalContent,"open");this.allowBodyScroll||(document.body.style.overflow="hidden"),this.isKeyDownEventRegistered||(document.addEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!0),this.modalElement.focus(),this.preventCloseModal||this.overlayElement.addEventListener("click",this.hideModal),(l=(h=this.options).onShow)==null||l.call(h),(u=(c=this.options).onToggle)==null||u.call(c,{isHidden:!1})}}),s(this,"hideModal",()=>{var a,h,l,c,u;let E=!1;L(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:f=>{E=f}});let M=(l=(h=(a=this.options).beforeHide)==null?void 0:h.call(a))==null?void 0:l.cancelAction;if(E||M)return;let C=()=>{b(this.modalElement,this.modalContent,"close"),N(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||P(this.overlayElement),L(this.modalElement,"modal-close",{modalId:this.modalElement.id})},B=()=>{var f,I,x,k;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(I=(f=this.options).onHide)==null||I.call(f),(k=(x=this.options).onToggle)==null||k.call(x,{isHidden:!0})},A=((c=this.animateContent)==null?void 0:c.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((u=this.overlayElement)==null||u.setAttribute("data-state","close"),this.modalContent.setAttribute("data-state","close"),A){let f=this.animationExit?this.animationExit:this.animateContent&&this.animateContent.exitAnimation||"";this.modalContent.style.setProperty("--un-modal-animation",f)}T({element:this.modalContent,callback:()=>{A&&this.modalContent.style.removeProperty("--un-modal-animation"),C(),B()}})}),s(this,"cleanup",()=>{if(this.triggerButton instanceof HTMLElement&&this.triggerButton.removeEventListener("click",this.showModal),this.closeButtons.length>0)for(let a of this.closeButtons)a.removeEventListener("click",this.closeModalOnX);!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),w.removeInstance("modal",this.modalElement)});let d=typeof t=="string"?v(t):t;if(!(d instanceof HTMLElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalElement=d,this.options=n,this.state=n?.defaultState||this.modalElement.dataset.state||"close";let i=w.getInstance("modal",this.modalElement);if(i)return i;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let r=v("[data-modal-content]",d);if(!(r instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalContent=r;let m=d.dataset.modalId;this.modalId=`${m}`;let p=(typeof o=="string"?v(o):o)||v(`[data-modal-target='${m}']`);this.triggerButton=p,this.initModal(this.modalElement,this.options),this.addEvents(),this.state==="open"?(this.initAsOpen=!0,this.showModal()):this.initAsOpen=!1,this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,w.register("modal",this.modalElement,this)}};s(y,"autoInit",(e="[data-fx-modal]")=>{let t=g(e);for(let n of t)new y(n)}),s(y,"init",(e,t={},n)=>new y(e,t,n));var $=y;function K(e){e.directive("modal",(t,{},{cleanup:n})=>{let o=t.getAttribute("data-modal-id");if(!o){console.error("\u274C data-modal-id is required but missing on element:",t);return}if(!t.querySelector("[data-modal-content]")){console.error("\u274C data-modal-content Element is required but missing in Modal Element:",t);return}let i=document.querySelector(`[data-modal-trigger][data-modal-id="${o}"]`),r=new $(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[o]=r;let m=()=>{r.showModal()},p=()=>{r.hideModal()};document.addEventListener(`modal:${o}:open`,m),document.addEventListener(`modal:${o}:close`,p),i instanceof HTMLElement&&i.addEventListener("click",m),n(()=>{r.cleanup(),delete e.store("modals")[o],i instanceof HTMLElement&&i.removeEventListener("click",m),document.removeEventListener(`modal:${o}:open`,m),document.removeEventListener(`modal:${o}:close`,p)})}),e.magic("modal",()=>t=>e.store("modals")?e.store("modals")[t]?e.store("modals")[t]:(console.warn(`\u26A0\uFE0F No modal instance found for ID: ${t}`),null):(console.warn("\u26A0\uFE0F Alpine store for modals is not initialized."),null))}var D=K;document.addEventListener("alpine:init",()=>{D(window.Alpine)});})();