@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 +226 -193
- package/dist/cdn.min.js +1 -1
- package/dist/module.cjs.js +226 -193
- package/dist/module.esm.js +226 -193
- package/package.json +3 -3
- package/src/index.js +34 -9
package/dist/cdn.js
CHANGED
|
@@ -1,246 +1,279 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// ../../node_modules/@flexilla/modal/dist/modal.js
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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 (!(
|
|
12
|
+
if (!(o instanceof HTMLElement) || !(t instanceof HTMLElement))
|
|
32
13
|
throw new Error("Both parameters must be valid HTML elements.");
|
|
33
|
-
const
|
|
34
|
-
if (
|
|
35
|
-
|
|
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
|
|
40
|
-
element:
|
|
41
|
-
callback:
|
|
42
|
-
type:
|
|
43
|
-
keysCheck:
|
|
20
|
+
var L = ({
|
|
21
|
+
element: o,
|
|
22
|
+
callback: t,
|
|
23
|
+
type: e,
|
|
24
|
+
keysCheck: n
|
|
44
25
|
}) => {
|
|
45
|
-
const
|
|
46
|
-
if (
|
|
47
|
-
const
|
|
48
|
-
|
|
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
|
-
|
|
31
|
+
o.addEventListener(l, d, { once: true });
|
|
51
32
|
} else
|
|
52
|
-
|
|
33
|
+
t();
|
|
53
34
|
};
|
|
54
|
-
var
|
|
55
|
-
|
|
56
|
-
element:
|
|
57
|
-
callback:
|
|
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
|
|
63
|
-
const
|
|
64
|
-
|
|
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
|
|
71
|
-
|
|
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
|
-
|
|
78
|
-
const
|
|
79
|
-
|
|
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
|
|
82
|
-
if (!
|
|
83
|
-
|
|
54
|
+
var B = (o, t, e) => {
|
|
55
|
+
if (!o) {
|
|
56
|
+
t || (document.body.style.overflowY = "auto");
|
|
84
57
|
return;
|
|
85
58
|
}
|
|
86
|
-
|
|
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
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
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
|
|
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(
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
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 =
|
|
192
|
-
const
|
|
193
|
-
if (
|
|
194
|
-
return
|
|
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
|
|
197
|
-
|
|
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
|
-
|
|
201
|
-
const
|
|
202
|
-
for (const
|
|
203
|
-
new
|
|
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
|
-
|
|
220
|
-
var
|
|
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(
|
|
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
|
|
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
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
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)});})();
|