@flexilla/alpine-modal 0.0.4 → 0.1.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/README.md +68 -4
- package/dist/cdn.js +48 -13
- package/dist/cdn.min.js +1 -1
- package/dist/module.cjs.js +48 -13
- package/dist/module.esm.js +48 -13
- package/package.json +5 -3
- package/src/index.d.ts +7 -0
package/README.md
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
<h1 align="center">Alpine Modal</h1>
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
A
|
|
4
|
+
A powerful and flexible modal dialog component for <a href="https://alpinejs.dev">Alpine.js</a>, powered by Flexilla
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
Alpine Modal is a lightweight wrapper around Flexilla's modal component, providing seamless integration with Alpine.js. It offers:
|
|
10
|
+
|
|
11
|
+
- 🎯 Simple integration with Alpine.js directives
|
|
12
|
+
- 🎨 Highly customizable styling and animations
|
|
13
|
+
- 🔒 Accessibility features built-in
|
|
14
|
+
- 🛠 Event-driven API for programmatic control
|
|
7
15
|
|
|
8
16
|
## Installation
|
|
9
17
|
|
|
@@ -12,7 +20,7 @@
|
|
|
12
20
|
Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
|
|
13
21
|
|
|
14
22
|
```html
|
|
15
|
-
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/@flexilla/alpine-modal@latest/dist/cdn.min.js" defer></script>
|
|
16
24
|
```
|
|
17
25
|
|
|
18
26
|
### NPM
|
|
@@ -32,12 +40,68 @@ Alpine.plugin(PluginModal);
|
|
|
32
40
|
Alpine.start();
|
|
33
41
|
```
|
|
34
42
|
|
|
35
|
-
##
|
|
43
|
+
## Usage
|
|
36
44
|
|
|
37
|
-
|
|
45
|
+
### Basic Example
|
|
38
46
|
|
|
47
|
+
```html
|
|
48
|
+
<button data-modal-target="modal-default"
|
|
49
|
+
class="bg-neutral-800 text-white px-4 py-2 rounded-lg text-sm w-max">
|
|
50
|
+
Open Modal
|
|
51
|
+
</button>
|
|
52
|
+
|
|
53
|
+
<dialog x-data data-fx-modal x-modal data-modal-id="modal-default"
|
|
54
|
+
data-modal-overlay="inset-0 fixed bg-gray-800/20 ease-linear duration-300 transition-all data-[state=close]:opacity-0 data-[state=close]:invisible"
|
|
55
|
+
class="inset-0 w-screen h-screen justify-center items-start hidden data-[state=open]:flex p-4 fixed top-0 left-0 bg-transparent">
|
|
56
|
+
<div data-modal-content
|
|
57
|
+
class="bg-white rounded-lg overflow-hidden w-full max-w-2xl flex flex-col ease-linear transition-all duration-300 absolute top-4 z-[500]">
|
|
58
|
+
<div class="border-b border-b-gray-100 dark:border-b-gray-900 p-4 flex justify-between items-center">
|
|
59
|
+
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
60
|
+
Modal Title
|
|
61
|
+
</h2>
|
|
62
|
+
<button aria-label="close modal" data-close-modal
|
|
63
|
+
class="text-gray-700 dark:text-gray-300 rounded-full p-2 border border-gray-200 dark:border-gray-800 duration-200 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
64
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
|
|
65
|
+
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
66
|
+
</svg>
|
|
67
|
+
</button>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="px-4 py-6">
|
|
70
|
+
<!-- Your modal content here -->
|
|
71
|
+
</div>
|
|
72
|
+
<div class="border-t border-t-gray-100 dark:border-t-gray-900 p-4 flex items-center gap-x-3">
|
|
73
|
+
<button class="rounded px-4 h-8 flex items-center bg-blue-600 text-white duration-300 hover:bg-opacity-80">
|
|
74
|
+
Save
|
|
75
|
+
</button>
|
|
76
|
+
<button data-close-modal
|
|
77
|
+
class="rounded px-4 h-8 flex items-center border border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300 duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
78
|
+
Cancel
|
|
79
|
+
</button>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</dialog>
|
|
39
83
|
```
|
|
40
84
|
|
|
85
|
+
### Key Features
|
|
86
|
+
|
|
87
|
+
1. **Required Attributes**:
|
|
88
|
+
- `x-modal`: The main directive
|
|
89
|
+
- `data-modal-id`: Unique identifier for the modal
|
|
90
|
+
- `data-modal-content`: Marks the modal content container
|
|
91
|
+
- `data-close-modal`: Marks close trigger elements
|
|
92
|
+
|
|
93
|
+
2. **Styling**:
|
|
94
|
+
- Uses data attributes for state-based styling
|
|
95
|
+
- Fully customizable with utility classes
|
|
96
|
+
- Smooth transitions and animations
|
|
97
|
+
|
|
98
|
+
3. **Accessibility**:
|
|
99
|
+
- Uses native `<dialog>` element
|
|
100
|
+
- Proper ARIA attributes
|
|
101
|
+
- Keyboard navigation support
|
|
102
|
+
|
|
103
|
+
For complete documentation and advanced customization options, visit the [Flexilla Modal documentation](https://flexilla-docs.vercel.app/docs/components/modal).
|
|
104
|
+
|
|
41
105
|
## License
|
|
42
106
|
|
|
43
107
|
Copyright (c) 2025 Johnkat MJ and contributors.
|
package/dist/cdn.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// ../../node_modules/@flexilla/modal/dist/modal.js
|
|
3
|
-
var
|
|
4
|
-
var b = (o, t, e) => t in o ?
|
|
3
|
+
var w = Object.defineProperty;
|
|
4
|
+
var b = (o, t, e) => t in o ? w(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
|
|
5
5
|
var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
|
|
6
6
|
var r = (o, t = document.body) => t.querySelector(o);
|
|
7
7
|
var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
} else
|
|
33
33
|
t();
|
|
34
34
|
};
|
|
35
|
-
var
|
|
35
|
+
var p = ({ element: o, callback: t }) => {
|
|
36
36
|
g({
|
|
37
37
|
element: o,
|
|
38
38
|
callback: t,
|
|
@@ -44,6 +44,37 @@
|
|
|
44
44
|
const n = new CustomEvent(t, { detail: e });
|
|
45
45
|
o.dispatchEvent(n);
|
|
46
46
|
};
|
|
47
|
+
function A(o, t, e = "move") {
|
|
48
|
+
if (!(o instanceof HTMLElement))
|
|
49
|
+
throw new Error("Source element must be an HTMLElement");
|
|
50
|
+
if (!(t instanceof HTMLElement))
|
|
51
|
+
throw new Error("Target element must be an HTMLElement");
|
|
52
|
+
if (!["move", "detachable"].includes(e))
|
|
53
|
+
throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
|
|
54
|
+
let n = document.createComment("teleporter-placeholder");
|
|
55
|
+
const a = o.parentNode;
|
|
56
|
+
return a ? a.insertBefore(n, o) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (o.parentNode && t.appendChild(o), {
|
|
57
|
+
append() {
|
|
58
|
+
o.parentNode !== t && t.appendChild(o);
|
|
59
|
+
},
|
|
60
|
+
remove() {
|
|
61
|
+
n != null && n.parentNode && o.parentNode && n.parentNode.insertBefore(o, n);
|
|
62
|
+
},
|
|
63
|
+
restore() {
|
|
64
|
+
n != null && n.parentNode && o.parentNode !== a && n.parentNode.insertBefore(o, n);
|
|
65
|
+
}
|
|
66
|
+
}) : (o.parentNode && t.appendChild(o), {
|
|
67
|
+
append() {
|
|
68
|
+
t.contains(o) || t.appendChild(o);
|
|
69
|
+
},
|
|
70
|
+
remove() {
|
|
71
|
+
o.parentNode && o.remove();
|
|
72
|
+
},
|
|
73
|
+
restore() {
|
|
74
|
+
n != null && n.parentNode && !o.parentNode && n.parentNode.insertBefore(o, n);
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
}
|
|
47
78
|
var E = (o, t, e) => {
|
|
48
79
|
if (!(t instanceof HTMLElement))
|
|
49
80
|
throw new Error("No modal-content found");
|
|
@@ -51,7 +82,7 @@
|
|
|
51
82
|
const n = r("[data-modal-overlay]", o);
|
|
52
83
|
n instanceof HTMLElement && n.setAttribute("data-state", e);
|
|
53
84
|
};
|
|
54
|
-
var
|
|
85
|
+
var C = (o, t, e) => {
|
|
55
86
|
if (!o) {
|
|
56
87
|
t || (document.body.style.overflowY = "auto");
|
|
57
88
|
return;
|
|
@@ -77,11 +108,11 @@
|
|
|
77
108
|
));
|
|
78
109
|
}
|
|
79
110
|
};
|
|
80
|
-
var
|
|
111
|
+
var L = (o) => {
|
|
81
112
|
var t;
|
|
82
113
|
o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
|
|
83
114
|
};
|
|
84
|
-
var
|
|
115
|
+
var T = ({ modalContent: o, overlayClassName: t }) => {
|
|
85
116
|
const e = document.createElement("span");
|
|
86
117
|
return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
|
|
87
118
|
};
|
|
@@ -112,6 +143,10 @@
|
|
|
112
143
|
s(this, "overlayClassName");
|
|
113
144
|
s(this, "allowBodyScroll");
|
|
114
145
|
s(this, "initAsOpen");
|
|
146
|
+
s(this, "teleporter");
|
|
147
|
+
s(this, "moveElOnInit", () => {
|
|
148
|
+
this.teleporter.append();
|
|
149
|
+
});
|
|
115
150
|
s(this, "closeAll", (t2) => {
|
|
116
151
|
if (this.enableStackedModals)
|
|
117
152
|
return;
|
|
@@ -149,12 +184,12 @@
|
|
|
149
184
|
s(this, "showModal", () => {
|
|
150
185
|
var e2, n2, a2, i2, l2;
|
|
151
186
|
if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
|
|
152
|
-
if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement :
|
|
187
|
+
if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
|
|
153
188
|
modalContent: this.modalContent,
|
|
154
189
|
overlayClassName: this.overlayClassName
|
|
155
190
|
}), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
|
|
156
191
|
const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
|
|
157
|
-
d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"),
|
|
192
|
+
d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), p({
|
|
158
193
|
element: this.modalContent,
|
|
159
194
|
callback: () => {
|
|
160
195
|
this.modalContent.style.removeProperty("--un-modal-animation");
|
|
@@ -166,7 +201,7 @@
|
|
|
166
201
|
}
|
|
167
202
|
});
|
|
168
203
|
s(this, "closeModal", () => {
|
|
169
|
-
this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(),
|
|
204
|
+
this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), C(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || L(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
|
|
170
205
|
});
|
|
171
206
|
s(this, "closeLastAction", () => {
|
|
172
207
|
var t2, e2, n2, a2;
|
|
@@ -189,7 +224,7 @@
|
|
|
189
224
|
const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
|
|
190
225
|
this.modalContent.style.setProperty("--un-modal-animation", u);
|
|
191
226
|
}
|
|
192
|
-
|
|
227
|
+
p({
|
|
193
228
|
element: this.modalContent,
|
|
194
229
|
callback: () => {
|
|
195
230
|
n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
|
|
@@ -220,7 +255,7 @@
|
|
|
220
255
|
throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
|
|
221
256
|
this.modalContent = l;
|
|
222
257
|
const d = a.dataset.modalId;
|
|
223
|
-
this.modalId = `${d}`, this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), v.register("modal", this.modalElement, this);
|
|
258
|
+
this.modalId = `${d}`, this.teleporter = A(this.modalElement, document.body, "move"), this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), this.moveElOnInit(), v.register("modal", this.modalElement, this);
|
|
224
259
|
}
|
|
225
260
|
initializeTriggers(t, e) {
|
|
226
261
|
if (!t && e) {
|
|
@@ -252,7 +287,7 @@
|
|
|
252
287
|
* Creates and initializes a new Modal instance
|
|
253
288
|
*/
|
|
254
289
|
s(m, "init", (t, e = {}, n) => new m(t, e, n));
|
|
255
|
-
var
|
|
290
|
+
var y = m;
|
|
256
291
|
|
|
257
292
|
// src/index.js
|
|
258
293
|
function Modal(Alpine) {
|
|
@@ -280,7 +315,7 @@
|
|
|
280
315
|
);
|
|
281
316
|
return;
|
|
282
317
|
}
|
|
283
|
-
const modalInstance = new
|
|
318
|
+
const modalInstance = new y(el, {
|
|
284
319
|
dispatchEventToDocument: false
|
|
285
320
|
});
|
|
286
321
|
if (!Alpine.store("modals")) {
|
package/dist/cdn.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var I=Object.defineProperty,T=(e,t,o)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,a=(e,t,o)=>T(e,typeof t!="symbol"?t+"":t,o),v=(e,t=document.body)=>t.querySelector(e),y=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),D=({newElement:e,existingElement:t})=>{if(!(e instanceof HTMLElement)||!(t instanceof HTMLElement))throw new Error("Both parameters must be valid HTML elements.");let o=t.parentElement;if(o)o.insertBefore(e,t);else throw new Error("Existing element must have a parent element.")},k=({element:e,callback:t,type:o,keysCheck:s})=>{let l=getComputedStyle(e),d=l.animation;if(d!=="none"&&d!==""&&!s.includes(d)){let c="animationend",u=()=>{e.removeEventListener(c,u),t()};e.addEventListener(c,u,{once:!0})}else t()},A=({element:e,callback:t})=>{k({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},g=(e,t,o)=>{let s=new CustomEvent(t,{detail:o});e.dispatchEvent(s)},C=(e,t,o)=>{if(!(t instanceof HTMLElement))throw new Error("No modal-content found");e.setAttribute("aria-hidden",o==="open"?"false":"true"),e.setAttribute("data-state",o),t.setAttribute("data-state",o);let s=v("[data-modal-overlay]",e);s instanceof HTMLElement&&s.setAttribute("data-state",o)},$=(e,t,o)=>{if(!e){t||(document.body.style.overflowY="auto");return}y("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(s=>s!==o).length===0&&!t&&(document.body.style.overflowY="auto")},w=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(t,o,s){return this.initGlobalRegistry(),window.$flexillaInstances[t]||(window.$flexillaInstances[t]=[]),this.getInstance(t,o)||(window.$flexillaInstances[t].push({element:o,instance:s}),s)}static getInstance(t,o){var s,l;return this.initGlobalRegistry(),(l=(s=window.$flexillaInstances[t])==null?void 0:s.find(d=>d.element===o))==null?void 0:l.instance}static removeInstance(t,o){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(s=>s.element!==o))}},H=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},B=({modalContent:e,overlayClassName:t})=>{let o=document.createElement("span");return o.setAttribute("aria-hidden","true"),D({newElement:o,existingElement:e}),o.classList.add(...t),o.setAttribute("data-modal-overlay",""),o},f=class{constructor(t,o={},s){a(this,"modalElement"),a(this,"modalId"),a(this,"modalContent"),a(this,"triggerButtons",[]),a(this,"overlayElement"),a(this,"dispatchEventToDocument"),a(this,"options"),a(this,"state"),a(this,"animationEnter"),a(this,"animationExit"),a(this,"animateContent"),a(this,"hasDefaultOverlay"),a(this,"enableStackedModals"),a(this,"preventCloseModal"),a(this,"isKeyDownEventRegistered"),a(this,"closeButtons"),a(this,"overlayClassName"),a(this,"allowBodyScroll"),a(this,"initAsOpen"),a(this,"closeAll",n=>{if(this.enableStackedModals)return;let r=y("[data-fx-modal][data-state=open]");for(let i of r){let m=i.dataset.modalId;if(m!==n.dataset.modalId){i.blur(),v("[data-modal-overlay]",i).setAttribute("data-state","close");let h=v("[data-modal-content]",i);C(i,h,"close"),document.dispatchEvent(new CustomEvent(`modal:${m}:close`))}}}),a(this,"closeModalEsc",n=>{n.key==="Escape"&&(n.preventDefault(),this.preventCloseModal||this.hideModal())}),a(this,"initModal",(n,r)=>{var i;if(!(n instanceof HTMLDialogElement))throw new Error("Modal Element must be a valid HTMLDialog Element");let{allowBodyScroll:m,animateContent:h,preventCloseModal:E,overlayClass:p,enableStackedModals:b}=r;this.allowBodyScroll=n.hasAttribute("data-allow-body-scroll")&&n.getAttribute("data-allow-body-scroll")!=="false"||m||!1,this.preventCloseModal=n.hasAttribute("data-prevent-close-modal")&&n.getAttribute("data-prevent-close-modal")!=="false"||E||!1,this.enableStackedModals=n.hasAttribute("data-enable-stacked")&&n.getAttribute("data-enable-stacked")!=="false"||b||!1,this.overlayClassName=((i=n.dataset.modalOverlay)==null?void 0:i.split(" "))||p?.split(" ")||"",this.isKeyDownEventRegistered=!1,n.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=y("[data-close-modal]",n),this.hasDefaultOverlay=!1,v("[data-modal-overlay]",n)instanceof HTMLElement&&(this.overlayElement=v("[data-modal-overlay]",n),this.overlayElement.setAttribute("data-overlay-nature","default"),this.hasDefaultOverlay=!0),this.animateContent=h,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.overlayElement&&this.overlayElement.setAttribute("data-state","close"),this.addEvents()}),a(this,"closeModalOnX",n=>{n.preventDefault(),this.hideModal()}),a(this,"addEvents",()=>{for(let n of this.triggerButtons)n.addEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let n of this.closeButtons)n.addEventListener("click",this.closeModalOnX);this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:open`,this.showModal),this.dispatchEventToDocument&&document.addEventListener(`modal:${this.modalId}:close`,this.hideModal)}),a(this,"showModal",()=>{var n,r,i,m,h;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:B({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(n=this.overlayElement)==null||n.setAttribute("data-state","open"),g(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),C(this.modalElement,this.modalContent,"open"),A({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else C(this.modalElement,this.modalContent,"open");this.allowBodyScroll||(document.body.style.overflow="hidden"),this.isKeyDownEventRegistered||(document.addEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!0),this.modalContent.focus(),this.preventCloseModal||this.overlayElement.addEventListener("click",this.hideModal),(i=(r=this.options).onShow)==null||i.call(r),(h=(m=this.options).onToggle)==null||h.call(m,{isHidden:!1}),this.modalElement.showModal()}}),a(this,"closeModal",()=>{this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close"),this.modalElement.blur(),$(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||H(this.overlayElement),g(this.modalElement,"modal-close",{modalId:this.modalElement.id})}),a(this,"closeLastAction",()=>{var n,r,i,m;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(r=(n=this.options).onHide)==null||r.call(n),(m=(i=this.options).onToggle)==null||m.call(i,{isHidden:!0})}),a(this,"hideModal",()=>{var n,r,i,m,h;let E=!1;g(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:M=>{E=M}});let p=(i=(r=(n=this.options).beforeHide)==null?void 0:r.call(n))==null?void 0:i.cancelAction;if(E||p)return;let b=((m=this.animateContent)==null?void 0:m.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((h=this.overlayElement)==null||h.setAttribute("data-state","close"),this.modalContent.setAttribute("data-state","close"),b){let M=this.animationExit?this.animationExit:this.animateContent&&this.animateContent.exitAnimation||"";this.modalContent.style.setProperty("--un-modal-animation",M)}A({element:this.modalContent,callback:()=>{b&&this.modalContent.style.removeProperty("--un-modal-animation"),this.closeModal(),this.closeLastAction(),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),this.modalElement.close("modal-closed")}})}),a(this,"cleanup",()=>{for(let n of this.triggerButtons)n.removeEventListener("click",this.showModal);if(this.closeButtons.length>0)for(let n of this.closeButtons)n.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)}),a(this,"setOptions",({state:n,allowBodyscroll:r})=>{n&&(this.state=n),r!==void 0&&(this.allowBodyScroll=r),this.state==="open"?this.showModal():this.state==="close"&&this.hideModal()});let l=typeof t=="string"?v(t):t;if(!(l instanceof HTMLDialogElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");this.modalElement=l,this.options=o,this.state=o?.defaultState||this.modalElement.dataset.state||"close";let d=w.getInstance("modal",this.modalElement);if(d)return d;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let c=v("[data-modal-content]",l);if(!(c instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalContent=c;let u=l.dataset.modalId;this.modalId=`${u}`,this.initializeTriggers(s,u),this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,this.initModal(this.modalElement,this.options),this.state==="open"?(this.initAsOpen=!0,this.showModal()):(this.initAsOpen=!1,this.modalElement.blur(),this.modalContent.setAttribute("data-state","close"),this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close")),w.register("modal",this.modalElement,this)}initializeTriggers(t,o){if(!t&&o){let l=y(`[data-modal-target='${o}'], [data-modal-trigger][data-modal-id='${o}']`);this.triggerButtons=l;return}if(!t)return;let s=Array.isArray(t)?t:[t];this.triggerButtons=s.map(l=>{if(typeof l=="string"){let d=v(l);if(!(d instanceof HTMLElement))throw new Error(`Trigger element not found: ${l}`);return d}if(!(l instanceof HTMLElement))throw new Error("Invalid trigger element provided");return l})}};a(f,"autoInit",(e="[data-fx-modal]")=>{let t=y(e);for(let o of t)new f(o)}),a(f,"init",(e,t={},o)=>new f(e,t,o));var L=f;function S(e){e.directive("modal",(t,{},{cleanup:o})=>{let s=t.getAttribute("data-modal-id");if(!s){console.error("\u274C data-modal-id is required but missing on element:",t);return}if(!(t instanceof HTMLDialogElement)){console.error("\u274C x-modal must be used only on an HTMLDialogElement:",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 d=new L(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[s]=d;let c=()=>d.showModal(),u=()=>d.hideModal();document.addEventListener(`modal:${s}:open`,c),document.addEventListener(`modal:${s}:close`,u),o(()=>{d.cleanup(),delete e.store("modals")[s],document.removeEventListener(`modal:${s}:open`,c),document.removeEventListener(`modal:${s}:close`,u)})}),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 x=S;document.addEventListener("alpine:init",()=>{x(window.Alpine)});})();
|
|
1
|
+
(()=>{var I=Object.defineProperty,x=(e,t,n)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,l=(e,t,n)=>x(e,typeof t!="symbol"?t+"":t,n),v=(e,t=document.body)=>t.querySelector(e),p=(e,t=document.body)=>Array.from(t.querySelectorAll(e)),D=({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.")},H=({element:e,callback:t,type:n,keysCheck:o})=>{let s=getComputedStyle(e),d=s.animation;if(d!=="none"&&d!==""&&!o.includes(d)){let c="animationend",u=()=>{e.removeEventListener(c,u),t()};e.addEventListener(c,u,{once:!0})}else t()},L=({element:e,callback:t})=>{H({element:e,callback:t,type:"animation",keysCheck:["none 0s ease 0s 1 normal none running"]})},g=(e,t,n)=>{let o=new CustomEvent(t,{detail:n});e.dispatchEvent(o)};function k(e,t,n="move"){if(!(e instanceof HTMLElement))throw new Error("Source element must be an HTMLElement");if(!(t instanceof HTMLElement))throw new Error("Target element must be an HTMLElement");if(!["move","detachable"].includes(n))throw new Error(`Invalid teleport mode: ${n}. Must be "move" or "detachable".`);let o=document.createComment("teleporter-placeholder"),s=e.parentNode;return s?s.insertBefore(o,e):console.warn("Element has no parent; placeholder not inserted."),n==="move"?(e.parentNode&&t.appendChild(e),{append(){e.parentNode!==t&&t.appendChild(e)},remove(){o!=null&&o.parentNode&&e.parentNode&&o.parentNode.insertBefore(e,o)},restore(){o!=null&&o.parentNode&&e.parentNode!==s&&o.parentNode.insertBefore(e,o)}}):(e.parentNode&&t.appendChild(e),{append(){t.contains(e)||t.appendChild(e)},remove(){e.parentNode&&e.remove()},restore(){o!=null&&o.parentNode&&!e.parentNode&&o.parentNode.insertBefore(e,o)}})}var C=(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)},B=(e,t,n)=>{if(!e){t||(document.body.style.overflowY="auto");return}p("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter(o=>o!==n).length===0&&!t&&(document.body.style.overflowY="auto")},y=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,s;return this.initGlobalRegistry(),(s=(o=window.$flexillaInstances[t])==null?void 0:o.find(d=>d.element===n))==null?void 0:s.instance}static removeInstance(t,n){this.initGlobalRegistry(),window.$flexillaInstances[t]&&(window.$flexillaInstances[t]=window.$flexillaInstances[t].filter(o=>o.element!==n))}},$=e=>{var t;e instanceof HTMLElement&&((t=e.parentElement)==null||t.removeChild(e))},N=({modalContent:e,overlayClassName:t})=>{let n=document.createElement("span");return n.setAttribute("aria-hidden","true"),D({newElement:n,existingElement:e}),n.classList.add(...t),n.setAttribute("data-modal-overlay",""),n},f=class{constructor(t,n={},o){l(this,"modalElement"),l(this,"modalId"),l(this,"modalContent"),l(this,"triggerButtons",[]),l(this,"overlayElement"),l(this,"dispatchEventToDocument"),l(this,"options"),l(this,"state"),l(this,"animationEnter"),l(this,"animationExit"),l(this,"animateContent"),l(this,"hasDefaultOverlay"),l(this,"enableStackedModals"),l(this,"preventCloseModal"),l(this,"isKeyDownEventRegistered"),l(this,"closeButtons"),l(this,"overlayClassName"),l(this,"allowBodyScroll"),l(this,"initAsOpen"),l(this,"teleporter"),l(this,"moveElOnInit",()=>{this.teleporter.append()}),l(this,"closeAll",a=>{if(this.enableStackedModals)return;let r=p("[data-fx-modal][data-state=open]");for(let i of r){let m=i.dataset.modalId;if(m!==a.dataset.modalId){i.blur(),v("[data-modal-overlay]",i).setAttribute("data-state","close");let h=v("[data-modal-content]",i);C(i,h,"close"),document.dispatchEvent(new CustomEvent(`modal:${m}:close`))}}}),l(this,"closeModalEsc",a=>{a.key==="Escape"&&(a.preventDefault(),this.preventCloseModal||this.hideModal())}),l(this,"initModal",(a,r)=>{var i;if(!(a instanceof HTMLDialogElement))throw new Error("Modal Element must be a valid HTMLDialog Element");let{allowBodyScroll:m,animateContent:h,preventCloseModal:E,overlayClass:w,enableStackedModals:b}=r;this.allowBodyScroll=a.hasAttribute("data-allow-body-scroll")&&a.getAttribute("data-allow-body-scroll")!=="false"||m||!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"||b||!1,this.overlayClassName=((i=a.dataset.modalOverlay)==null?void 0:i.split(" "))||w?.split(" ")||"",this.isKeyDownEventRegistered=!1,a.setAttribute("data-allow-body-scroll",`${this.allowBodyScroll}`),this.closeButtons=p("[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=h,this.animationEnter=this.modalContent.dataset.enterAnimation||"",this.animationExit=this.modalContent.dataset.exitAnimation||"",this.overlayElement&&this.overlayElement.setAttribute("data-state","close"),this.addEvents()}),l(this,"closeModalOnX",a=>{a.preventDefault(),this.hideModal()}),l(this,"addEvents",()=>{for(let a of this.triggerButtons)a.addEventListener("click",this.showModal);if(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)}),l(this,"showModal",()=>{var a,r,i,m,h;if(!(!this.initAsOpen&&this.modalElement.getAttribute("data-state")==="open")){if(this.initAsOpen=!1,this.closeAll(this.modalElement),this.overlayElement=this.hasDefaultOverlay?this.overlayElement:N({modalContent:this.modalContent,overlayClassName:this.overlayClassName}),(a=this.overlayElement)==null||a.setAttribute("data-state","open"),g(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),C(this.modalElement,this.modalContent,"open"),L({element:this.modalContent,callback:()=>{this.modalContent.style.removeProperty("--un-modal-animation")}})}else C(this.modalElement,this.modalContent,"open");this.allowBodyScroll||(document.body.style.overflow="hidden"),this.isKeyDownEventRegistered||(document.addEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!0),this.modalContent.focus(),this.preventCloseModal||this.overlayElement.addEventListener("click",this.hideModal),(i=(r=this.options).onShow)==null||i.call(r),(h=(m=this.options).onToggle)==null||h.call(m,{isHidden:!1}),this.modalElement.showModal()}}),l(this,"closeModal",()=>{this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close"),this.modalElement.blur(),B(this.enableStackedModals||!1,this.allowBodyScroll||!1,this.modalElement),this.hasDefaultOverlay||$(this.overlayElement),g(this.modalElement,"modal-close",{modalId:this.modalElement.id})}),l(this,"closeLastAction",()=>{var a,r,i,m;this.isKeyDownEventRegistered&&(document.removeEventListener("keydown",this.closeModalEsc),this.isKeyDownEventRegistered=!1),this.modalElement.blur(),(r=(a=this.options).onHide)==null||r.call(a),(m=(i=this.options).onToggle)==null||m.call(i,{isHidden:!0})}),l(this,"hideModal",()=>{var a,r,i,m,h;let E=!1;g(this.modalElement,"before-hide",{modalId:this.modalId,setExitAction:M=>{E=M}});let w=(i=(r=(a=this.options).beforeHide)==null?void 0:r.call(a))==null?void 0:i.cancelAction;if(E||w)return;let b=((m=this.animateContent)==null?void 0:m.exitAnimation)&&this.animateContent.exitAnimation!==""||this.animationExit&&this.animationExit!=="";if((h=this.overlayElement)==null||h.setAttribute("data-state","close"),this.modalContent.setAttribute("data-state","close"),b){let M=this.animationExit?this.animationExit:this.animateContent&&this.animateContent.exitAnimation||"";this.modalContent.style.setProperty("--un-modal-animation",M)}L({element:this.modalContent,callback:()=>{b&&this.modalContent.style.removeProperty("--un-modal-animation"),this.closeModal(),this.closeLastAction(),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),this.modalElement.close("modal-closed")}})}),l(this,"cleanup",()=>{for(let a of this.triggerButtons)a.removeEventListener("click",this.showModal);if(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),y.removeInstance("modal",this.modalElement)}),l(this,"setOptions",({state:a,allowBodyscroll:r})=>{a&&(this.state=a),r!==void 0&&(this.allowBodyScroll=r),this.state==="open"?this.showModal():this.state==="close"&&this.hideModal()});let s=typeof t=="string"?v(t):t;if(!(s instanceof HTMLDialogElement))throw new Error("Modal element not found or invalid. Please provide a valid HTMLDialogElement or selector.");this.modalElement=s,this.options=n,this.state=n?.defaultState||this.modalElement.dataset.state||"close";let d=y.getInstance("modal",this.modalElement);if(d)return d;this.modalElement.hasAttribute("data-fx-modal")||this.modalElement.setAttribute("data-fx-modal","");let c=v("[data-modal-content]",s);if(!(c instanceof HTMLElement))throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");this.modalContent=c;let u=s.dataset.modalId;this.modalId=`${u}`,this.teleporter=k(this.modalElement,document.body,"move"),this.initializeTriggers(o,u),this.dispatchEventToDocument=this.options.dispatchEventToDocument||!0,this.initModal(this.modalElement,this.options),this.state==="open"?(this.initAsOpen=!0,this.showModal()):(this.initAsOpen=!1,this.modalElement.blur(),this.modalContent.setAttribute("data-state","close"),this.modalElement.setAttribute("aria-hidden","true"),this.modalElement.setAttribute("data-state","close")),this.moveElOnInit(),y.register("modal",this.modalElement,this)}initializeTriggers(t,n){if(!t&&n){let s=p(`[data-modal-target='${n}'], [data-modal-trigger][data-modal-id='${n}']`);this.triggerButtons=s;return}if(!t)return;let o=Array.isArray(t)?t:[t];this.triggerButtons=o.map(s=>{if(typeof s=="string"){let d=v(s);if(!(d instanceof HTMLElement))throw new Error(`Trigger element not found: ${s}`);return d}if(!(s instanceof HTMLElement))throw new Error("Invalid trigger element provided");return s})}};l(f,"autoInit",(e="[data-fx-modal]")=>{let t=p(e);for(let n of t)new f(n)}),l(f,"init",(e,t={},n)=>new f(e,t,n));var A=f;function S(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 instanceof HTMLDialogElement)){console.error("\u274C x-modal must be used only on an HTMLDialogElement:",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 d=new A(t,{dispatchEventToDocument:!1});e.store("modals")||e.store("modals",{}),e.store("modals")[o]=d;let c=()=>d.showModal(),u=()=>d.hideModal();document.addEventListener(`modal:${o}:open`,c),document.addEventListener(`modal:${o}:close`,u),n(()=>{d.cleanup(),delete e.store("modals")[o],document.removeEventListener(`modal:${o}:open`,c),document.removeEventListener(`modal:${o}:close`,u)})}),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 T=S;document.addEventListener("alpine:init",()=>{T(window.Alpine)});})();
|
package/dist/module.cjs.js
CHANGED
|
@@ -24,8 +24,8 @@ __export(module_exports, {
|
|
|
24
24
|
module.exports = __toCommonJS(module_exports);
|
|
25
25
|
|
|
26
26
|
// ../../node_modules/@flexilla/modal/dist/modal.js
|
|
27
|
-
var
|
|
28
|
-
var b = (o, t, e) => t in o ?
|
|
27
|
+
var w = Object.defineProperty;
|
|
28
|
+
var b = (o, t, e) => t in o ? w(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
|
|
29
29
|
var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
|
|
30
30
|
var r = (o, t = document.body) => t.querySelector(o);
|
|
31
31
|
var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
|
|
@@ -56,7 +56,7 @@ var g = ({
|
|
|
56
56
|
} else
|
|
57
57
|
t();
|
|
58
58
|
};
|
|
59
|
-
var
|
|
59
|
+
var p = ({ element: o, callback: t }) => {
|
|
60
60
|
g({
|
|
61
61
|
element: o,
|
|
62
62
|
callback: t,
|
|
@@ -68,6 +68,37 @@ var f = (o, t, e) => {
|
|
|
68
68
|
const n = new CustomEvent(t, { detail: e });
|
|
69
69
|
o.dispatchEvent(n);
|
|
70
70
|
};
|
|
71
|
+
function A(o, t, e = "move") {
|
|
72
|
+
if (!(o instanceof HTMLElement))
|
|
73
|
+
throw new Error("Source element must be an HTMLElement");
|
|
74
|
+
if (!(t instanceof HTMLElement))
|
|
75
|
+
throw new Error("Target element must be an HTMLElement");
|
|
76
|
+
if (!["move", "detachable"].includes(e))
|
|
77
|
+
throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
|
|
78
|
+
let n = document.createComment("teleporter-placeholder");
|
|
79
|
+
const a = o.parentNode;
|
|
80
|
+
return a ? a.insertBefore(n, o) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (o.parentNode && t.appendChild(o), {
|
|
81
|
+
append() {
|
|
82
|
+
o.parentNode !== t && t.appendChild(o);
|
|
83
|
+
},
|
|
84
|
+
remove() {
|
|
85
|
+
n != null && n.parentNode && o.parentNode && n.parentNode.insertBefore(o, n);
|
|
86
|
+
},
|
|
87
|
+
restore() {
|
|
88
|
+
n != null && n.parentNode && o.parentNode !== a && n.parentNode.insertBefore(o, n);
|
|
89
|
+
}
|
|
90
|
+
}) : (o.parentNode && t.appendChild(o), {
|
|
91
|
+
append() {
|
|
92
|
+
t.contains(o) || t.appendChild(o);
|
|
93
|
+
},
|
|
94
|
+
remove() {
|
|
95
|
+
o.parentNode && o.remove();
|
|
96
|
+
},
|
|
97
|
+
restore() {
|
|
98
|
+
n != null && n.parentNode && !o.parentNode && n.parentNode.insertBefore(o, n);
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
}
|
|
71
102
|
var E = (o, t, e) => {
|
|
72
103
|
if (!(t instanceof HTMLElement))
|
|
73
104
|
throw new Error("No modal-content found");
|
|
@@ -75,7 +106,7 @@ var E = (o, t, e) => {
|
|
|
75
106
|
const n = r("[data-modal-overlay]", o);
|
|
76
107
|
n instanceof HTMLElement && n.setAttribute("data-state", e);
|
|
77
108
|
};
|
|
78
|
-
var
|
|
109
|
+
var C = (o, t, e) => {
|
|
79
110
|
if (!o) {
|
|
80
111
|
t || (document.body.style.overflowY = "auto");
|
|
81
112
|
return;
|
|
@@ -101,11 +132,11 @@ var v = class {
|
|
|
101
132
|
));
|
|
102
133
|
}
|
|
103
134
|
};
|
|
104
|
-
var
|
|
135
|
+
var L = (o) => {
|
|
105
136
|
var t;
|
|
106
137
|
o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
|
|
107
138
|
};
|
|
108
|
-
var
|
|
139
|
+
var T = ({ modalContent: o, overlayClassName: t }) => {
|
|
109
140
|
const e = document.createElement("span");
|
|
110
141
|
return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
|
|
111
142
|
};
|
|
@@ -136,6 +167,10 @@ var m = class m2 {
|
|
|
136
167
|
s(this, "overlayClassName");
|
|
137
168
|
s(this, "allowBodyScroll");
|
|
138
169
|
s(this, "initAsOpen");
|
|
170
|
+
s(this, "teleporter");
|
|
171
|
+
s(this, "moveElOnInit", () => {
|
|
172
|
+
this.teleporter.append();
|
|
173
|
+
});
|
|
139
174
|
s(this, "closeAll", (t2) => {
|
|
140
175
|
if (this.enableStackedModals)
|
|
141
176
|
return;
|
|
@@ -173,12 +208,12 @@ var m = class m2 {
|
|
|
173
208
|
s(this, "showModal", () => {
|
|
174
209
|
var e2, n2, a2, i2, l2;
|
|
175
210
|
if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
|
|
176
|
-
if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement :
|
|
211
|
+
if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
|
|
177
212
|
modalContent: this.modalContent,
|
|
178
213
|
overlayClassName: this.overlayClassName
|
|
179
214
|
}), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
|
|
180
215
|
const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
|
|
181
|
-
d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"),
|
|
216
|
+
d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), p({
|
|
182
217
|
element: this.modalContent,
|
|
183
218
|
callback: () => {
|
|
184
219
|
this.modalContent.style.removeProperty("--un-modal-animation");
|
|
@@ -190,7 +225,7 @@ var m = class m2 {
|
|
|
190
225
|
}
|
|
191
226
|
});
|
|
192
227
|
s(this, "closeModal", () => {
|
|
193
|
-
this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(),
|
|
228
|
+
this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), C(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || L(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
|
|
194
229
|
});
|
|
195
230
|
s(this, "closeLastAction", () => {
|
|
196
231
|
var t2, e2, n2, a2;
|
|
@@ -213,7 +248,7 @@ var m = class m2 {
|
|
|
213
248
|
const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
|
|
214
249
|
this.modalContent.style.setProperty("--un-modal-animation", u);
|
|
215
250
|
}
|
|
216
|
-
|
|
251
|
+
p({
|
|
217
252
|
element: this.modalContent,
|
|
218
253
|
callback: () => {
|
|
219
254
|
n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
|
|
@@ -244,7 +279,7 @@ var m = class m2 {
|
|
|
244
279
|
throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
|
|
245
280
|
this.modalContent = l;
|
|
246
281
|
const d = a.dataset.modalId;
|
|
247
|
-
this.modalId = `${d}`, this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), v.register("modal", this.modalElement, this);
|
|
282
|
+
this.modalId = `${d}`, this.teleporter = A(this.modalElement, document.body, "move"), this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), this.moveElOnInit(), v.register("modal", this.modalElement, this);
|
|
248
283
|
}
|
|
249
284
|
initializeTriggers(t, e) {
|
|
250
285
|
if (!t && e) {
|
|
@@ -276,7 +311,7 @@ s(m, "autoInit", (t = "[data-fx-modal]") => {
|
|
|
276
311
|
* Creates and initializes a new Modal instance
|
|
277
312
|
*/
|
|
278
313
|
s(m, "init", (t, e = {}, n) => new m(t, e, n));
|
|
279
|
-
var
|
|
314
|
+
var y = m;
|
|
280
315
|
|
|
281
316
|
// src/index.js
|
|
282
317
|
function Modal(Alpine) {
|
|
@@ -304,7 +339,7 @@ function Modal(Alpine) {
|
|
|
304
339
|
);
|
|
305
340
|
return;
|
|
306
341
|
}
|
|
307
|
-
const modalInstance = new
|
|
342
|
+
const modalInstance = new y(el, {
|
|
308
343
|
dispatchEventToDocument: false
|
|
309
344
|
});
|
|
310
345
|
if (!Alpine.store("modals")) {
|
package/dist/module.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// ../../node_modules/@flexilla/modal/dist/modal.js
|
|
2
|
-
var
|
|
3
|
-
var b = (o, t, e) => t in o ?
|
|
2
|
+
var w = Object.defineProperty;
|
|
3
|
+
var b = (o, t, e) => t in o ? w(o, t, { enumerable: true, configurable: true, writable: true, value: e }) : o[t] = e;
|
|
4
4
|
var s = (o, t, e) => b(o, typeof t != "symbol" ? t + "" : t, e);
|
|
5
5
|
var r = (o, t = document.body) => t.querySelector(o);
|
|
6
6
|
var c = (o, t = document.body) => Array.from(t.querySelectorAll(o));
|
|
@@ -31,7 +31,7 @@ var g = ({
|
|
|
31
31
|
} else
|
|
32
32
|
t();
|
|
33
33
|
};
|
|
34
|
-
var
|
|
34
|
+
var p = ({ element: o, callback: t }) => {
|
|
35
35
|
g({
|
|
36
36
|
element: o,
|
|
37
37
|
callback: t,
|
|
@@ -43,6 +43,37 @@ var f = (o, t, e) => {
|
|
|
43
43
|
const n = new CustomEvent(t, { detail: e });
|
|
44
44
|
o.dispatchEvent(n);
|
|
45
45
|
};
|
|
46
|
+
function A(o, t, e = "move") {
|
|
47
|
+
if (!(o instanceof HTMLElement))
|
|
48
|
+
throw new Error("Source element must be an HTMLElement");
|
|
49
|
+
if (!(t instanceof HTMLElement))
|
|
50
|
+
throw new Error("Target element must be an HTMLElement");
|
|
51
|
+
if (!["move", "detachable"].includes(e))
|
|
52
|
+
throw new Error(`Invalid teleport mode: ${e}. Must be "move" or "detachable".`);
|
|
53
|
+
let n = document.createComment("teleporter-placeholder");
|
|
54
|
+
const a = o.parentNode;
|
|
55
|
+
return a ? a.insertBefore(n, o) : console.warn("Element has no parent; placeholder not inserted."), e === "move" ? (o.parentNode && t.appendChild(o), {
|
|
56
|
+
append() {
|
|
57
|
+
o.parentNode !== t && t.appendChild(o);
|
|
58
|
+
},
|
|
59
|
+
remove() {
|
|
60
|
+
n != null && n.parentNode && o.parentNode && n.parentNode.insertBefore(o, n);
|
|
61
|
+
},
|
|
62
|
+
restore() {
|
|
63
|
+
n != null && n.parentNode && o.parentNode !== a && n.parentNode.insertBefore(o, n);
|
|
64
|
+
}
|
|
65
|
+
}) : (o.parentNode && t.appendChild(o), {
|
|
66
|
+
append() {
|
|
67
|
+
t.contains(o) || t.appendChild(o);
|
|
68
|
+
},
|
|
69
|
+
remove() {
|
|
70
|
+
o.parentNode && o.remove();
|
|
71
|
+
},
|
|
72
|
+
restore() {
|
|
73
|
+
n != null && n.parentNode && !o.parentNode && n.parentNode.insertBefore(o, n);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
}
|
|
46
77
|
var E = (o, t, e) => {
|
|
47
78
|
if (!(t instanceof HTMLElement))
|
|
48
79
|
throw new Error("No modal-content found");
|
|
@@ -50,7 +81,7 @@ var E = (o, t, e) => {
|
|
|
50
81
|
const n = r("[data-modal-overlay]", o);
|
|
51
82
|
n instanceof HTMLElement && n.setAttribute("data-state", e);
|
|
52
83
|
};
|
|
53
|
-
var
|
|
84
|
+
var C = (o, t, e) => {
|
|
54
85
|
if (!o) {
|
|
55
86
|
t || (document.body.style.overflowY = "auto");
|
|
56
87
|
return;
|
|
@@ -76,11 +107,11 @@ var v = class {
|
|
|
76
107
|
));
|
|
77
108
|
}
|
|
78
109
|
};
|
|
79
|
-
var
|
|
110
|
+
var L = (o) => {
|
|
80
111
|
var t;
|
|
81
112
|
o instanceof HTMLElement && ((t = o.parentElement) == null || t.removeChild(o));
|
|
82
113
|
};
|
|
83
|
-
var
|
|
114
|
+
var T = ({ modalContent: o, overlayClassName: t }) => {
|
|
84
115
|
const e = document.createElement("span");
|
|
85
116
|
return e.setAttribute("aria-hidden", "true"), M({ newElement: e, existingElement: o }), e.classList.add(...t), e.setAttribute("data-modal-overlay", ""), e;
|
|
86
117
|
};
|
|
@@ -111,6 +142,10 @@ var m = class m2 {
|
|
|
111
142
|
s(this, "overlayClassName");
|
|
112
143
|
s(this, "allowBodyScroll");
|
|
113
144
|
s(this, "initAsOpen");
|
|
145
|
+
s(this, "teleporter");
|
|
146
|
+
s(this, "moveElOnInit", () => {
|
|
147
|
+
this.teleporter.append();
|
|
148
|
+
});
|
|
114
149
|
s(this, "closeAll", (t2) => {
|
|
115
150
|
if (this.enableStackedModals)
|
|
116
151
|
return;
|
|
@@ -148,12 +183,12 @@ var m = class m2 {
|
|
|
148
183
|
s(this, "showModal", () => {
|
|
149
184
|
var e2, n2, a2, i2, l2;
|
|
150
185
|
if (!(!this.initAsOpen && this.modalElement.getAttribute("data-state") === "open")) {
|
|
151
|
-
if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement :
|
|
186
|
+
if (this.initAsOpen = false, this.closeAll(this.modalElement), this.overlayElement = this.hasDefaultOverlay ? this.overlayElement : T({
|
|
152
187
|
modalContent: this.modalContent,
|
|
153
188
|
overlayClassName: this.overlayClassName
|
|
154
189
|
}), (e2 = this.overlayElement) == null || e2.setAttribute("data-state", "open"), f(this.modalElement, "modal-open", { modalId: this.modalId }), this.animateContent || this.animationEnter !== "") {
|
|
155
190
|
const d2 = this.animateContent ? this.animateContent.enterAnimation : this.animationEnter;
|
|
156
|
-
d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"),
|
|
191
|
+
d2 && d2 !== "" && this.modalContent.style.setProperty("--un-modal-animation", d2), E(this.modalElement, this.modalContent, "open"), p({
|
|
157
192
|
element: this.modalContent,
|
|
158
193
|
callback: () => {
|
|
159
194
|
this.modalContent.style.removeProperty("--un-modal-animation");
|
|
@@ -165,7 +200,7 @@ var m = class m2 {
|
|
|
165
200
|
}
|
|
166
201
|
});
|
|
167
202
|
s(this, "closeModal", () => {
|
|
168
|
-
this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(),
|
|
203
|
+
this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close"), this.modalElement.blur(), C(this.enableStackedModals || false, this.allowBodyScroll || false, this.modalElement), this.hasDefaultOverlay || L(this.overlayElement), f(this.modalElement, "modal-close", { modalId: this.modalElement.id });
|
|
169
204
|
});
|
|
170
205
|
s(this, "closeLastAction", () => {
|
|
171
206
|
var t2, e2, n2, a2;
|
|
@@ -188,7 +223,7 @@ var m = class m2 {
|
|
|
188
223
|
const u = this.animationExit ? this.animationExit : this.animateContent && this.animateContent.exitAnimation || "";
|
|
189
224
|
this.modalContent.style.setProperty("--un-modal-animation", u);
|
|
190
225
|
}
|
|
191
|
-
|
|
226
|
+
p({
|
|
192
227
|
element: this.modalContent,
|
|
193
228
|
callback: () => {
|
|
194
229
|
n2 && this.modalContent.style.removeProperty("--un-modal-animation"), this.closeModal(), this.closeLastAction(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), this.modalElement.close("modal-closed");
|
|
@@ -219,7 +254,7 @@ var m = class m2 {
|
|
|
219
254
|
throw new Error("Modal content element not found or invalid. Please provide a valid HTMLElement or selector.");
|
|
220
255
|
this.modalContent = l;
|
|
221
256
|
const d = a.dataset.modalId;
|
|
222
|
-
this.modalId = `${d}`, this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), v.register("modal", this.modalElement, this);
|
|
257
|
+
this.modalId = `${d}`, this.teleporter = A(this.modalElement, document.body, "move"), this.initializeTriggers(n, d), this.dispatchEventToDocument = this.options.dispatchEventToDocument || true, this.initModal(this.modalElement, this.options), this.state === "open" ? (this.initAsOpen = true, this.showModal()) : (this.initAsOpen = false, this.modalElement.blur(), this.modalContent.setAttribute("data-state", "close"), this.modalElement.setAttribute("aria-hidden", "true"), this.modalElement.setAttribute("data-state", "close")), this.moveElOnInit(), v.register("modal", this.modalElement, this);
|
|
223
258
|
}
|
|
224
259
|
initializeTriggers(t, e) {
|
|
225
260
|
if (!t && e) {
|
|
@@ -251,7 +286,7 @@ s(m, "autoInit", (t = "[data-fx-modal]") => {
|
|
|
251
286
|
* Creates and initializes a new Modal instance
|
|
252
287
|
*/
|
|
253
288
|
s(m, "init", (t, e = {}, n) => new m(t, e, n));
|
|
254
|
-
var
|
|
289
|
+
var y = m;
|
|
255
290
|
|
|
256
291
|
// src/index.js
|
|
257
292
|
function Modal(Alpine) {
|
|
@@ -279,7 +314,7 @@ function Modal(Alpine) {
|
|
|
279
314
|
);
|
|
280
315
|
return;
|
|
281
316
|
}
|
|
282
|
-
const modalInstance = new
|
|
317
|
+
const modalInstance = new y(el, {
|
|
283
318
|
dispatchEventToDocument: false
|
|
284
319
|
});
|
|
285
320
|
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.1.1",
|
|
4
4
|
"description": "AlpineJS plugin for creating Modal, Dialog, alert dialog components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
},
|
|
19
19
|
"main": "src/index.js",
|
|
20
20
|
"module": "dist/module.esm.js",
|
|
21
|
+
"types": "src/index.d.ts",
|
|
21
22
|
"scripts": {
|
|
22
23
|
"build": "node ./scripts/build.js",
|
|
23
24
|
"watch": "node ./scripts/build.js --watch",
|
|
@@ -41,6 +42,7 @@
|
|
|
41
42
|
"LICENSE",
|
|
42
43
|
"README.md",
|
|
43
44
|
"src/index.js",
|
|
45
|
+
"src/index.d.ts",
|
|
44
46
|
"package.json",
|
|
45
47
|
"dist"
|
|
46
48
|
],
|
|
@@ -64,7 +66,7 @@
|
|
|
64
66
|
"Dissmiss"
|
|
65
67
|
],
|
|
66
68
|
"dependencies": {
|
|
67
|
-
"@flexilla/modal": "^2.
|
|
69
|
+
"@flexilla/modal": "^2.3.0"
|
|
68
70
|
},
|
|
69
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "3284d6fd2a712b633d39a42d85792f730e2d7d55"
|
|
70
72
|
}
|