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