@flexilla/alpine-dropdown 0.0.0
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/LICENSE +21 -0
- package/README.md +45 -0
- package/dist/cdn.js +515 -0
- package/dist/cdn.min.js +1 -0
- package/dist/module.cjs.js +536 -0
- package/dist/module.esm.js +514 -0
- package/package.json +64 -0
- package/src/index.js +12 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-2025 Unoforge
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<h1 align="center">Alpine Offcanvas</h1>
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
Simple Interactif Offcanvas Directive for <a href="https://alpinejs.dev">Alpine.js</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
### CDN
|
|
11
|
+
|
|
12
|
+
Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
|
|
13
|
+
|
|
14
|
+
```html
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### NPM
|
|
19
|
+
|
|
20
|
+
```shell
|
|
21
|
+
npm install @flexilla/alpine-offcanvas
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Add the `x-offcanvas` directive to your project by importing the package **before** starting Alpine.
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
import Alpine from 'alpinejs';
|
|
28
|
+
import PluginOffcanvas from '@flexilla/alpine-offcanvas';
|
|
29
|
+
|
|
30
|
+
Alpine.plugin(PluginOffcanvas);
|
|
31
|
+
|
|
32
|
+
Alpine.start();
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Usage
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## License
|
|
42
|
+
|
|
43
|
+
Copyright (c) 2025 Johnkat MJ and contributors.
|
|
44
|
+
|
|
45
|
+
Licensed under the MIT license, see [LICENSE](LICENSE) for details.
|
package/dist/cdn.js
ADDED
|
@@ -0,0 +1,515 @@
|
|
|
1
|
+
(() => {
|
|
2
|
+
// ../../node_modules/@flexilla/dropdown/dist/dropdown.js
|
|
3
|
+
var j = Object.defineProperty;
|
|
4
|
+
var q = (s, e, t) => e in s ? j(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
|
|
5
|
+
var l = (s, e, t) => q(s, typeof e != "symbol" ? e + "" : e, t);
|
|
6
|
+
var B = Object.defineProperty;
|
|
7
|
+
var N = (s, e, t) => e in s ? B(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
|
|
8
|
+
var h = (s, e, t) => N(s, typeof e != "symbol" ? e + "" : e, t);
|
|
9
|
+
var J = "bottom";
|
|
10
|
+
var Q = ({ reference: s, popper: e }) => {
|
|
11
|
+
if (!s || !e)
|
|
12
|
+
throw new Error("Reference or popper element is null or undefined");
|
|
13
|
+
const t = /* @__PURE__ */ new WeakMap(), n = (r) => (t.has(r) || t.set(r, r.getBoundingClientRect()), t.get(r)), o = n(e), i = n(s);
|
|
14
|
+
return {
|
|
15
|
+
popperHeight: o.height,
|
|
16
|
+
popperWidth: o.width,
|
|
17
|
+
refHeight: i.height,
|
|
18
|
+
refWidth: i.width,
|
|
19
|
+
refLeft: i.left,
|
|
20
|
+
refTop: i.top,
|
|
21
|
+
refRight: i.right
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
var V = Object.defineProperty;
|
|
25
|
+
var X = (s, e, t) => e in s ? V(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
|
|
26
|
+
var p = (s, e, t) => X(s, typeof e != "symbol" ? e + "" : e, t);
|
|
27
|
+
var Y = (s, e, t, n) => {
|
|
28
|
+
const o = t, i = n - (t + e);
|
|
29
|
+
return o >= (s - e) / 2 && i >= (s - e) / 2;
|
|
30
|
+
};
|
|
31
|
+
var Z = (s, e, t, n) => (s - e) / 2 <= t && t + s / 2 + e / 2 <= n;
|
|
32
|
+
var _ = (s, e, t, n, o) => t > o - n ? e() ? window.innerHeight - o : t - o : s() ? 0 : t + n;
|
|
33
|
+
var ee = (s, e, t, n) => s <= n && t - s <= e;
|
|
34
|
+
var te = (s, e, t, n) => t <= n && -s <= e;
|
|
35
|
+
var ne = (s, e, t, n, o, i) => {
|
|
36
|
+
const r = o - t - i, a = t - n, m = t + i - n + (o - t - i), d = r >= 0 ? o - n : a >= 0 ? t - n : t;
|
|
37
|
+
return s() ? 0 : e() ? m : d;
|
|
38
|
+
};
|
|
39
|
+
var se = (s, e, t, n) => s <= t && e - s - n >= s;
|
|
40
|
+
var ie = (s, e) => s >= e;
|
|
41
|
+
var oe = ({
|
|
42
|
+
placement: s,
|
|
43
|
+
refWidth: e,
|
|
44
|
+
refTop: t,
|
|
45
|
+
refLeft: n,
|
|
46
|
+
refHeight: o,
|
|
47
|
+
popperWidth: i,
|
|
48
|
+
popperHeight: r,
|
|
49
|
+
windowHeight: a,
|
|
50
|
+
windowWidth: m,
|
|
51
|
+
offsetDistance: d
|
|
52
|
+
}) => {
|
|
53
|
+
const c = m - n - e, f = n, v = a - t - o, g = t, w = () => _(
|
|
54
|
+
() => te(t, o, r, a),
|
|
55
|
+
() => ee(t, o, r, a),
|
|
56
|
+
t,
|
|
57
|
+
o,
|
|
58
|
+
r
|
|
59
|
+
), y = () => ne(
|
|
60
|
+
() => se(n, m, i, e),
|
|
61
|
+
() => ie(n, i),
|
|
62
|
+
n,
|
|
63
|
+
i,
|
|
64
|
+
m,
|
|
65
|
+
e
|
|
66
|
+
), H = () => Y(i, e, n, m) ? n + e / 2 - i / 2 : y(), C = () => Z(r, o, t, a) ? t + o / 2 - r / 2 : w(), T = () => n + i <= m ? n : y(), O = () => n + e - i >= 0 ? n + e - i : y(), L = () => t + r <= a ? t : w(), G = () => t + o - r >= 0 ? t + o - r : w();
|
|
67
|
+
let u = 0, E = 0;
|
|
68
|
+
const M = t - r - d, k = t + o + d, I = n - i - d, D = n + e + d, P = g >= r + d, F = v >= r + d, R = f >= i + d, $ = c >= i + d;
|
|
69
|
+
switch (s.startsWith("top") ? E = P ? M : F ? k : Math.max(M, k) : s.startsWith("bottom") ? E = F ? k : P ? M : Math.max(k) : s.startsWith("left") ? u = R ? I : $ ? D : Math.max(I, D) : s.startsWith("right") && (u = $ ? D : R ? I : Math.max(D, I)), s) {
|
|
70
|
+
case "bottom":
|
|
71
|
+
case "bottom-middle":
|
|
72
|
+
case "top":
|
|
73
|
+
case "top-middle":
|
|
74
|
+
u = H();
|
|
75
|
+
break;
|
|
76
|
+
case "left":
|
|
77
|
+
case "left-middle":
|
|
78
|
+
case "right":
|
|
79
|
+
case "right-middle":
|
|
80
|
+
E = C();
|
|
81
|
+
break;
|
|
82
|
+
case "bottom-start":
|
|
83
|
+
case "top-start":
|
|
84
|
+
u = T();
|
|
85
|
+
break;
|
|
86
|
+
case "bottom-end":
|
|
87
|
+
case "top-end":
|
|
88
|
+
u = O();
|
|
89
|
+
break;
|
|
90
|
+
case "left-start":
|
|
91
|
+
case "right-start":
|
|
92
|
+
E = L();
|
|
93
|
+
break;
|
|
94
|
+
case "left-end":
|
|
95
|
+
case "right-end":
|
|
96
|
+
E = G();
|
|
97
|
+
break;
|
|
98
|
+
}
|
|
99
|
+
return { x: u, y: E };
|
|
100
|
+
};
|
|
101
|
+
var re = class {
|
|
102
|
+
/**
|
|
103
|
+
* Flexilla Popper
|
|
104
|
+
* @param reference
|
|
105
|
+
* @param popper
|
|
106
|
+
* @param options
|
|
107
|
+
*/
|
|
108
|
+
/**
|
|
109
|
+
* Creates an instance of CreatePopper
|
|
110
|
+
* @param {HTMLElement} reference - The reference element to position against
|
|
111
|
+
* @param {HTMLElement} popper - The element to be positioned
|
|
112
|
+
* @param {PopperOptions} [options] - Configuration options
|
|
113
|
+
* @param {number} [options.offsetDistance] - Distance between popper and reference element
|
|
114
|
+
* @param {Placement} [options.placement] - Preferred placement of the popper
|
|
115
|
+
* @param {Object} [options.eventEffect] - Event handling configuration
|
|
116
|
+
* @param {boolean} [options.eventEffect.disableOnResize] - Disable position updates on window resize
|
|
117
|
+
* @param {boolean} [options.eventEffect.disableOnScroll] - Disable position updates on scroll
|
|
118
|
+
* @param {Function} [options.onUpdate] - Callback function when position updates
|
|
119
|
+
*/
|
|
120
|
+
constructor(e, t, n = {}) {
|
|
121
|
+
p(this, "reference"), p(this, "popper"), p(this, "offsetDistance"), p(this, "placement"), p(this, "disableOnResize"), p(this, "disableOnScroll"), p(this, "onUpdate"), p(this, "isWindowEventsRegistered"), p(this, "validateElements", () => {
|
|
122
|
+
if (!(this.reference instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Reference Element");
|
|
123
|
+
if (!(this.popper instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Popper");
|
|
124
|
+
if (typeof this.offsetDistance != "number") throw new Error("OffsetDistance must be a number");
|
|
125
|
+
}), p(this, "setPopperStyleProperty", (c, f) => {
|
|
126
|
+
this.popper.style.setProperty("--fx-popper-placement-x", `${c}px`), this.popper.style.setProperty("--fx-popper-placement-y", `${f}px`);
|
|
127
|
+
}), p(this, "setInitialStyles", () => {
|
|
128
|
+
this.popper.style.setProperty("--fx-popper-placement-x", ""), this.popper.style.setProperty("--fx-popper-placement-y", "");
|
|
129
|
+
}), p(this, "initPlacement", () => {
|
|
130
|
+
var c;
|
|
131
|
+
this.validateElements(), this.setInitialStyles();
|
|
132
|
+
const f = window.innerWidth, v = window.innerHeight, { popperHeight: g, popperWidth: w, refHeight: y, refWidth: H, refLeft: C, refTop: T } = Q({ reference: this.reference, popper: this.popper }), { x: O, y: L } = oe(
|
|
133
|
+
{
|
|
134
|
+
placement: this.placement,
|
|
135
|
+
refWidth: H,
|
|
136
|
+
refTop: T,
|
|
137
|
+
refLeft: C,
|
|
138
|
+
popperWidth: w,
|
|
139
|
+
refHeight: y,
|
|
140
|
+
popperHeight: g,
|
|
141
|
+
windowHeight: v,
|
|
142
|
+
windowWidth: f,
|
|
143
|
+
offsetDistance: this.offsetDistance
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
this.setPopperStyleProperty(O, L), (c = this.onUpdate) == null || c.call(this, { x: O, y: L, placement: this.placement });
|
|
147
|
+
}), p(this, "removeWindowEvents", () => {
|
|
148
|
+
this.isWindowEventsRegistered && (!this.disableOnResize && window.removeEventListener("resize", this.updatePosition), !this.disableOnScroll && window.removeEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = false);
|
|
149
|
+
}), p(this, "attachWindowEvent", () => {
|
|
150
|
+
this.isWindowEventsRegistered && this.removeWindowEvents(), this.disableOnResize || window.addEventListener("resize", this.updatePosition), this.disableOnScroll || window.addEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = true;
|
|
151
|
+
}), p(this, "resetPosition", () => {
|
|
152
|
+
this.setInitialStyles();
|
|
153
|
+
}), p(this, "updatePosition", () => {
|
|
154
|
+
this.initPlacement(), this.attachWindowEvent();
|
|
155
|
+
}), p(this, "cleanupEvents", () => {
|
|
156
|
+
this.setInitialStyles(), this.removeWindowEvents();
|
|
157
|
+
});
|
|
158
|
+
const {
|
|
159
|
+
offsetDistance: o = 10,
|
|
160
|
+
placement: i = J,
|
|
161
|
+
eventEffect: r = {},
|
|
162
|
+
onUpdate: a
|
|
163
|
+
} = n;
|
|
164
|
+
if (!(e instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Reference Element");
|
|
165
|
+
if (!(t instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Popper");
|
|
166
|
+
if (n.offsetDistance && typeof n.offsetDistance != "number") throw new Error("OffsetDistance must be a number");
|
|
167
|
+
const { disableOnResize: m, disableOnScroll: d } = r;
|
|
168
|
+
this.isWindowEventsRegistered = false, this.reference = e, this.popper = t, this.offsetDistance = o, this.placement = i, this.disableOnResize = m || false, this.disableOnScroll = d || false, this.onUpdate = a;
|
|
169
|
+
}
|
|
170
|
+
/**
|
|
171
|
+
* Updates popper configuration and recalculates position
|
|
172
|
+
* @public
|
|
173
|
+
* @param {Object} options - New configuration options
|
|
174
|
+
* @param {Placement} options.placement - New placement value
|
|
175
|
+
* @param {number} [options.offsetDistance] - New offset distance
|
|
176
|
+
*/
|
|
177
|
+
setOptions({ placement: e, offsetDistance: t }) {
|
|
178
|
+
this.placement = e, this.offsetDistance = t || this.offsetDistance, this.initPlacement(), this.attachWindowEvent();
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
var ae = (s, e = document.body) => e.querySelector(s);
|
|
182
|
+
var A = (s, e) => {
|
|
183
|
+
for (const [t, n] of Object.entries(e))
|
|
184
|
+
s.setAttribute(t, n);
|
|
185
|
+
};
|
|
186
|
+
var le = ({
|
|
187
|
+
element: s,
|
|
188
|
+
callback: e,
|
|
189
|
+
type: t,
|
|
190
|
+
keysCheck: n
|
|
191
|
+
}) => {
|
|
192
|
+
const o = getComputedStyle(s), i = o.transition;
|
|
193
|
+
if (i !== "none" && i !== "" && !n.includes(i)) {
|
|
194
|
+
const r = "transitionend", a = () => {
|
|
195
|
+
s.removeEventListener(r, a), e();
|
|
196
|
+
};
|
|
197
|
+
s.addEventListener(r, a, { once: true });
|
|
198
|
+
} else
|
|
199
|
+
e();
|
|
200
|
+
};
|
|
201
|
+
var he = ({
|
|
202
|
+
element: s,
|
|
203
|
+
callback: e
|
|
204
|
+
}) => {
|
|
205
|
+
le({
|
|
206
|
+
element: s,
|
|
207
|
+
callback: e,
|
|
208
|
+
type: "transition",
|
|
209
|
+
keysCheck: ["all 0s ease 0s", "all"]
|
|
210
|
+
});
|
|
211
|
+
};
|
|
212
|
+
var b = ({ state: s, trigger: e, popper: t }) => {
|
|
213
|
+
A(t, {
|
|
214
|
+
"data-state": s
|
|
215
|
+
}), A(e, {
|
|
216
|
+
"aria-expanded": `${s}`
|
|
217
|
+
});
|
|
218
|
+
};
|
|
219
|
+
var ce = class {
|
|
220
|
+
/**
|
|
221
|
+
* Creates an instance of CreateOverlay
|
|
222
|
+
* @param {Object} params - The initialization parameters
|
|
223
|
+
* @param {string | HTMLElement} params.trigger - The trigger element selector or HTMLElement
|
|
224
|
+
* @param {string | HTMLElement} params.content - The content element selector or HTMLElement
|
|
225
|
+
* @param {OverlayOptions} [params.options] - Configuration options for the overlay
|
|
226
|
+
* @throws {Error} When trigger or content elements are invalid
|
|
227
|
+
*/
|
|
228
|
+
constructor({ trigger: e, content: t, options: n = {} }) {
|
|
229
|
+
h(this, "triggerElement"), h(this, "contentElement"), h(this, "triggerStrategy"), h(this, "placement"), h(this, "offsetDistance"), h(this, "preventFromCloseOutside"), h(this, "preventFromCloseInside"), h(this, "options"), h(this, "defaultState"), h(this, "popper"), h(this, "eventEffect"), h(this, "getElement", (i) => typeof i == "string" ? ae(i) : i instanceof HTMLElement ? i : void 0), h(this, "handleDocumentClick", (i) => {
|
|
230
|
+
this.contentElement.getAttribute("data-state") === "open" && (!this.triggerElement.contains(i.target) && !this.preventFromCloseInside && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(i.target) && !this.contentElement.contains(i.target) && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(i.target) && !this.contentElement.contains(i.target) && !this.preventFromCloseOutside ? this.hide() : !this.triggerElement.contains(i.target) && this.contentElement.contains(i.target) && !this.preventFromCloseInside && this.hide());
|
|
231
|
+
}), h(this, "handleKeyDown", (i) => {
|
|
232
|
+
i.preventDefault(), this.triggerStrategy !== "hover" && i.key === "Escape" && this.contentElement.getAttribute("data-state") === "open" && (this.preventFromCloseOutside || this.hide());
|
|
233
|
+
}), h(this, "toggleStateOnClick", () => {
|
|
234
|
+
(this.contentElement.dataset.state || "close") === "close" ? (this.show(), this.triggerStrategy === "hover" && this.addEventOnMouseEnter()) : this.hide();
|
|
235
|
+
}), h(this, "hideOnMouseLeaseTrigger", () => {
|
|
236
|
+
setTimeout(() => {
|
|
237
|
+
this.contentElement.matches(":hover") || this.hide();
|
|
238
|
+
}, 150);
|
|
239
|
+
}), h(this, "hideOnMouseLeave", () => {
|
|
240
|
+
setTimeout(() => {
|
|
241
|
+
this.triggerElement.matches(":hover") || this.hide();
|
|
242
|
+
}, 150);
|
|
243
|
+
}), h(this, "addEventOnMouseEnter", () => {
|
|
244
|
+
this.triggerElement.addEventListener("mouseleave", this.hideOnMouseLeaseTrigger), this.contentElement.addEventListener("mouseleave", this.hideOnMouseLeave);
|
|
245
|
+
}), h(this, "showOnMouseEnter", () => {
|
|
246
|
+
this.show(), this.addEventOnMouseEnter();
|
|
247
|
+
}), h(this, "setShowOptions", ({ placement: i, offsetDistance: r }) => {
|
|
248
|
+
var a, m, d, c;
|
|
249
|
+
this.popper.setOptions({
|
|
250
|
+
placement: i,
|
|
251
|
+
offsetDistance: r
|
|
252
|
+
}), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (m = (a = this.options).beforeShow) == null || m.call(a), b({
|
|
253
|
+
state: "open",
|
|
254
|
+
popper: this.contentElement,
|
|
255
|
+
trigger: this.triggerElement
|
|
256
|
+
}), this.onToggleState(false), (c = (d = this.options).onShow) == null || c.call(d);
|
|
257
|
+
}), h(this, "setPopperOptions", ({ placement: i, offsetDistance: r }) => {
|
|
258
|
+
this.popper.setOptions({
|
|
259
|
+
placement: i,
|
|
260
|
+
offsetDistance: r
|
|
261
|
+
});
|
|
262
|
+
}), h(this, "cleanup", () => {
|
|
263
|
+
this.triggerElement.removeEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.removeEventListener("mouseenter", this.showOnMouseEnter);
|
|
264
|
+
});
|
|
265
|
+
var o;
|
|
266
|
+
if (this.contentElement = this.getElement(t), this.triggerElement = this.getElement(e), !(this.triggerElement instanceof HTMLElement)) throw new Error("Trigger element must be a valid HTML element");
|
|
267
|
+
if (!(this.contentElement instanceof HTMLElement)) throw new Error("Content element must be a valid HTML element");
|
|
268
|
+
this.options = n, this.triggerStrategy = this.options.triggerStrategy || "click", this.placement = this.options.placement || "bottom", this.offsetDistance = this.options.offsetDistance || 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || false, this.preventFromCloseInside = this.options.preventCloseFromInside || false, this.defaultState = this.options.defaultState || "close", this.eventEffect = (o = this.options.popper) == null ? void 0 : o.eventEffect, this.popper = new re(
|
|
269
|
+
this.triggerElement,
|
|
270
|
+
this.contentElement,
|
|
271
|
+
{
|
|
272
|
+
placement: this.placement,
|
|
273
|
+
offsetDistance: this.offsetDistance,
|
|
274
|
+
eventEffect: this.eventEffect
|
|
275
|
+
}
|
|
276
|
+
), this.initInstance();
|
|
277
|
+
}
|
|
278
|
+
onToggleState(e) {
|
|
279
|
+
var t, n;
|
|
280
|
+
(n = (t = this.options).onToggle) == null || n.call(t, { isHidden: e });
|
|
281
|
+
}
|
|
282
|
+
/**
|
|
283
|
+
* Shows the overlay
|
|
284
|
+
* Positions the overlay, adds event listeners, and triggers related callbacks
|
|
285
|
+
*/
|
|
286
|
+
show() {
|
|
287
|
+
var e, t, n, o;
|
|
288
|
+
this.popper.updatePosition(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (t = (e = this.options).beforeShow) == null || t.call(e), b({
|
|
289
|
+
state: "open",
|
|
290
|
+
popper: this.contentElement,
|
|
291
|
+
trigger: this.triggerElement
|
|
292
|
+
}), this.onToggleState(false), (o = (n = this.options).onShow) == null || o.call(n);
|
|
293
|
+
}
|
|
294
|
+
/**
|
|
295
|
+
* Hides the overlay
|
|
296
|
+
* Removes event listeners and triggers related callbacks
|
|
297
|
+
*/
|
|
298
|
+
hide() {
|
|
299
|
+
var e, t;
|
|
300
|
+
(t = (e = this.options).beforeHide) == null || t.call(e), b({
|
|
301
|
+
state: "close",
|
|
302
|
+
popper: this.contentElement,
|
|
303
|
+
trigger: this.triggerElement
|
|
304
|
+
}), this.triggerStrategy === "click" && document.removeEventListener("click", this.handleDocumentClick), document.removeEventListener("keydown", this.handleKeyDown), this.triggerStrategy === "hover" && (this.triggerElement.removeEventListener("mouseleave", this.hideOnMouseLeaseTrigger), this.contentElement.removeEventListener("mouseleave", this.hideOnMouseLeave)), he({
|
|
305
|
+
element: this.contentElement,
|
|
306
|
+
callback: () => {
|
|
307
|
+
var n, o;
|
|
308
|
+
this.onToggleState(true), this.popper.cleanupEvents(), (o = (n = this.options).onHide) == null || o.call(n);
|
|
309
|
+
}
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
initInstance() {
|
|
313
|
+
b({
|
|
314
|
+
state: this.defaultState,
|
|
315
|
+
popper: this.contentElement,
|
|
316
|
+
trigger: this.triggerElement
|
|
317
|
+
}), this.defaultState === "open" ? this.show() : b({
|
|
318
|
+
state: "close",
|
|
319
|
+
popper: this.contentElement,
|
|
320
|
+
trigger: this.triggerElement
|
|
321
|
+
}), this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
|
|
322
|
+
}
|
|
323
|
+
};
|
|
324
|
+
var W = (s, e = document.body) => e.querySelector(s);
|
|
325
|
+
var U = (s, e = document.body) => Array.from(e.querySelectorAll(s));
|
|
326
|
+
var de = (s) => typeof s == "string" ? W(s) : s;
|
|
327
|
+
var pe = ({ containerElement: s, targetChildren: e = "a:not([disabled]), button:not([disabled])", direction: t }) => {
|
|
328
|
+
let n = false;
|
|
329
|
+
const o = de(s) || document.body, i = typeof e == "string" ? U(e, o) : e, r = (a) => {
|
|
330
|
+
if (a.preventDefault(), o.focus(), i.length === 0) return;
|
|
331
|
+
const m = a.key, d = document.activeElement;
|
|
332
|
+
let c = i.findIndex((g) => g === d);
|
|
333
|
+
if (c === -1) {
|
|
334
|
+
m === "ArrowUp" || m === "ArrowLeft" ? i[i.length - 1].focus() : i[0].focus();
|
|
335
|
+
return;
|
|
336
|
+
}
|
|
337
|
+
const f = (g) => g > 0 ? g - 1 : i.length - 1, v = (g) => g < i.length - 1 ? g + 1 : 0;
|
|
338
|
+
switch (m) {
|
|
339
|
+
case "ArrowDown":
|
|
340
|
+
a.preventDefault(), c = v(c);
|
|
341
|
+
break;
|
|
342
|
+
case "ArrowRight":
|
|
343
|
+
break;
|
|
344
|
+
case "ArrowUp":
|
|
345
|
+
a.preventDefault(), c = f(c);
|
|
346
|
+
break;
|
|
347
|
+
case "ArrowLeft":
|
|
348
|
+
break;
|
|
349
|
+
case "Home":
|
|
350
|
+
a.preventDefault(), c = 0;
|
|
351
|
+
break;
|
|
352
|
+
case "End":
|
|
353
|
+
a.preventDefault(), c = i.length - 1;
|
|
354
|
+
break;
|
|
355
|
+
default:
|
|
356
|
+
return;
|
|
357
|
+
}
|
|
358
|
+
i[c] !== d && i[c].focus();
|
|
359
|
+
};
|
|
360
|
+
return {
|
|
361
|
+
make: () => {
|
|
362
|
+
n || (document.addEventListener("keydown", r), n = true);
|
|
363
|
+
},
|
|
364
|
+
destroy: () => {
|
|
365
|
+
n && (document.removeEventListener("keydown", r), n = false);
|
|
366
|
+
}
|
|
367
|
+
};
|
|
368
|
+
};
|
|
369
|
+
var K = (s, e, t) => {
|
|
370
|
+
const n = new CustomEvent(e, { detail: t });
|
|
371
|
+
s.dispatchEvent(n);
|
|
372
|
+
};
|
|
373
|
+
var x = class {
|
|
374
|
+
static initGlobalRegistry() {
|
|
375
|
+
window.$flexillaInstances || (window.$flexillaInstances = {});
|
|
376
|
+
}
|
|
377
|
+
static register(e, t, n) {
|
|
378
|
+
return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance: n }), n);
|
|
379
|
+
}
|
|
380
|
+
static getInstance(e, t) {
|
|
381
|
+
var n, o;
|
|
382
|
+
return this.initGlobalRegistry(), (o = (n = window.$flexillaInstances[e]) == null ? void 0 : n.find(
|
|
383
|
+
(i) => i.element === t
|
|
384
|
+
)) == null ? void 0 : o.instance;
|
|
385
|
+
}
|
|
386
|
+
static removeInstance(e, t) {
|
|
387
|
+
this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
|
|
388
|
+
(n) => n.element !== t
|
|
389
|
+
));
|
|
390
|
+
}
|
|
391
|
+
};
|
|
392
|
+
var S = class S2 {
|
|
393
|
+
/**
|
|
394
|
+
* Creates a new Dropdown instance
|
|
395
|
+
* @param dropdown - The dropdown content element or selector
|
|
396
|
+
* @param options - Configuration options for the dropdown
|
|
397
|
+
* @throws {Error} If provided elements are not valid HTMLElements
|
|
398
|
+
*/
|
|
399
|
+
constructor(e, t = {}) {
|
|
400
|
+
l(this, "triggerElement");
|
|
401
|
+
l(this, "contentElement");
|
|
402
|
+
l(this, "options");
|
|
403
|
+
l(this, "OverlayInstance");
|
|
404
|
+
l(this, "navigationKeys");
|
|
405
|
+
l(this, "triggerStrategy");
|
|
406
|
+
l(this, "placement");
|
|
407
|
+
l(this, "offsetDistance");
|
|
408
|
+
l(this, "preventFromCloseOutside");
|
|
409
|
+
l(this, "preventFromCloseInside");
|
|
410
|
+
l(this, "defaultState");
|
|
411
|
+
l(this, "onToggle", ({ isHidden: e2 }) => {
|
|
412
|
+
var t2, n2;
|
|
413
|
+
(n2 = (t2 = this.options).onToggle) == null || n2.call(t2, { isHidden: e2 });
|
|
414
|
+
});
|
|
415
|
+
l(this, "beforeShow", () => {
|
|
416
|
+
this.contentElement.focus(), this.navigationKeys.make();
|
|
417
|
+
});
|
|
418
|
+
l(this, "beforeHide", () => {
|
|
419
|
+
this.contentElement.blur(), this.navigationKeys.destroy();
|
|
420
|
+
});
|
|
421
|
+
l(this, "onShow", () => {
|
|
422
|
+
var e2, t2;
|
|
423
|
+
K(this.contentElement, "dropdown-show", {
|
|
424
|
+
isHidden: false
|
|
425
|
+
}), (t2 = (e2 = this.options).onShow) == null || t2.call(e2);
|
|
426
|
+
});
|
|
427
|
+
l(this, "onHide", () => {
|
|
428
|
+
var e2, t2;
|
|
429
|
+
K(this.contentElement, "dropdown-hide", {
|
|
430
|
+
isHidden: true
|
|
431
|
+
}), (t2 = (e2 = this.options).onHide) == null || t2.call(e2);
|
|
432
|
+
});
|
|
433
|
+
l(this, "show", () => {
|
|
434
|
+
this.OverlayInstance.show();
|
|
435
|
+
});
|
|
436
|
+
l(this, "hide", () => {
|
|
437
|
+
this.OverlayInstance.hide();
|
|
438
|
+
});
|
|
439
|
+
l(this, "setShowOptions", ({ placement: e2, offsetDistance: t2 }) => {
|
|
440
|
+
this.OverlayInstance.setShowOptions({ placement: e2, offsetDistance: t2 });
|
|
441
|
+
});
|
|
442
|
+
l(this, "cleanup", () => {
|
|
443
|
+
this.OverlayInstance.cleanup(), x.removeInstance("dropdown", this.contentElement);
|
|
444
|
+
});
|
|
445
|
+
const n = typeof e == "string" ? W(e) : e;
|
|
446
|
+
if (!(n instanceof HTMLElement))
|
|
447
|
+
throw new Error(
|
|
448
|
+
"Invalid dropdown content element: Must provide either a valid HTMLElement or a selector string that resolves to an existing HTMLElement"
|
|
449
|
+
);
|
|
450
|
+
if (!n.id)
|
|
451
|
+
throw new Error("Dropdown content element must have an 'id' attribute for trigger association");
|
|
452
|
+
this.contentElement = n;
|
|
453
|
+
const o = x.getInstance("dropdown", this.contentElement);
|
|
454
|
+
if (o)
|
|
455
|
+
return o;
|
|
456
|
+
const i = `[data-dropdown-trigger][data-dropdown-id=${this.contentElement.id}]`;
|
|
457
|
+
if (this.triggerElement = W(i), !(this.triggerElement instanceof HTMLElement))
|
|
458
|
+
throw new Error(`No valid trigger element found. Ensure a trigger element exists with attributes: data-dropdown-trigger and data-dropdown-id="${this.contentElement.id}"`);
|
|
459
|
+
this.options = t, this.triggerStrategy = this.options.triggerStrategy || this.contentElement.dataset.triggerStrategy || "click", this.placement = this.options.placement || this.contentElement.dataset.placement || "bottom-start", this.offsetDistance = this.options.offsetDistance || parseInt(`${this.contentElement.dataset.offsetDistance}`) | 6, this.preventFromCloseOutside = this.options.preventFromCloseOutside || this.contentElement.hasAttribute("data-prevent-close-outside") || false, this.preventFromCloseInside = this.options.preventCloseFromInside || this.contentElement.hasAttribute("data-prevent-close-inside") || false, this.defaultState = this.options.defaultState || this.contentElement.dataset.defaultState || "close", this.OverlayInstance = new ce({
|
|
460
|
+
trigger: this.triggerElement,
|
|
461
|
+
content: this.contentElement,
|
|
462
|
+
options: {
|
|
463
|
+
placement: this.placement,
|
|
464
|
+
offsetDistance: this.offsetDistance,
|
|
465
|
+
triggerStrategy: this.triggerStrategy,
|
|
466
|
+
preventFromCloseOutside: this.preventFromCloseOutside,
|
|
467
|
+
preventCloseFromInside: this.preventFromCloseInside,
|
|
468
|
+
defaultState: this.defaultState,
|
|
469
|
+
beforeShow: this.beforeShow,
|
|
470
|
+
beforeHide: this.beforeHide,
|
|
471
|
+
onShow: this.onShow,
|
|
472
|
+
onHide: this.onHide,
|
|
473
|
+
onToggle: ({ isHidden: r }) => {
|
|
474
|
+
this.onToggle({ isHidden: r });
|
|
475
|
+
},
|
|
476
|
+
popper: this.options.popper
|
|
477
|
+
}
|
|
478
|
+
}), this.navigationKeys = pe({
|
|
479
|
+
containerElement: this.contentElement,
|
|
480
|
+
targetChildren: "a:not([disabled]), button:not([disabled])",
|
|
481
|
+
direction: "up-down"
|
|
482
|
+
}), x.register("dropdown", this.contentElement, this);
|
|
483
|
+
}
|
|
484
|
+
/**
|
|
485
|
+
* Initializes a single dropdown instance
|
|
486
|
+
* @param dropdown - The dropdown element or selector
|
|
487
|
+
* @param options - Configuration options for the dropdown
|
|
488
|
+
* @returns A new Dropdown instance
|
|
489
|
+
*/
|
|
490
|
+
static init(e, t = {}) {
|
|
491
|
+
new S2(e, t);
|
|
492
|
+
}
|
|
493
|
+
};
|
|
494
|
+
l(S, "autoInit", (e = "[data-fx-dropdown]") => {
|
|
495
|
+
const t = U(e);
|
|
496
|
+
for (const n of t) new S(n);
|
|
497
|
+
});
|
|
498
|
+
var z = S;
|
|
499
|
+
|
|
500
|
+
// src/index.js
|
|
501
|
+
function Dropdown(Alpine) {
|
|
502
|
+
Alpine.directive("dropdown", (el, {}, { cleanup }) => {
|
|
503
|
+
const dropdown_ = new z(el);
|
|
504
|
+
cleanup(() => {
|
|
505
|
+
dropdown_.cleanup();
|
|
506
|
+
});
|
|
507
|
+
});
|
|
508
|
+
}
|
|
509
|
+
var src_default = Dropdown;
|
|
510
|
+
|
|
511
|
+
// builds/cdn.js
|
|
512
|
+
document.addEventListener("alpine:init", () => {
|
|
513
|
+
src_default(window.Alpine);
|
|
514
|
+
});
|
|
515
|
+
})();
|
package/dist/cdn.min.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{var J=Object.defineProperty,Q=(n,e,t)=>e in n?J(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,h=(n,e,t)=>Q(n,typeof e!="symbol"?e+"":e,t),V=Object.defineProperty,X=(n,e,t)=>e in n?V(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,l=(n,e,t)=>X(n,typeof e!="symbol"?e+"":e,t),Y="bottom",Z=({reference:n,popper:e})=>{if(!n||!e)throw new Error("Reference or popper element is null or undefined");let t=new WeakMap,i=r=>(t.has(r)||t.set(r,r.getBoundingClientRect()),t.get(r)),o=i(e),s=i(n);return{popperHeight:o.height,popperWidth:o.width,refHeight:s.height,refWidth:s.width,refLeft:s.left,refTop:s.top,refRight:s.right}},_=Object.defineProperty,ee=(n,e,t)=>e in n?_(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,m=(n,e,t)=>ee(n,typeof e!="symbol"?e+"":e,t),te=(n,e,t,i)=>{let o=t,s=i-(t+e);return o>=(n-e)/2&&s>=(n-e)/2},ne=(n,e,t,i)=>(n-e)/2<=t&&t+n/2+e/2<=i,ie=(n,e,t,i,o)=>t>o-i?e()?window.innerHeight-o:t-o:n()?0:t+i,se=(n,e,t,i)=>n<=i&&t-n<=e,oe=(n,e,t,i)=>t<=i&&-n<=e,re=(n,e,t,i,o,s)=>{let r=o-t-s,a=t-i,c=t+s-i+(o-t-s),p=r>=0?o-i:a>=0?t-i:t;return n()?0:e()?c:p},ae=(n,e,t,i)=>n<=t&&e-n-i>=n,le=(n,e)=>n>=e,he=({placement:n,refWidth:e,refTop:t,refLeft:i,refHeight:o,popperWidth:s,popperHeight:r,windowHeight:a,windowWidth:c,offsetDistance:p})=>{let d=c-i-e,f=i,E=a-t-o,g=t,w=()=>ie(()=>oe(t,o,r,a),()=>se(t,o,r,a),t,o,r),y=()=>re(()=>ae(i,c,s,e),()=>le(i,s),i,s,c,e),I=()=>te(s,e,i,c)?i+e/2-s/2:y(),C=()=>ne(r,o,t,a)?t+o/2-r/2:w(),T=()=>i+s<=c?i:y(),O=()=>i+e-s>=0?i+e-s:y(),L=()=>t+r<=a?t:w(),N=()=>t+o-r>=0?t+o-r:w(),u=0,v=0,M=t-r-p,D=t+o+p,H=i-s-p,k=i+e+p,R=g>=r+p,$=E>=r+p,A=f>=s+p,K=d>=s+p;switch(n.startsWith("top")?v=R?M:$?D:Math.max(M,D):n.startsWith("bottom")?v=$?D:R?M:Math.max(D):n.startsWith("left")?u=A?H:K?k:Math.max(H,k):n.startsWith("right")&&(u=K?k:A?H:Math.max(k,H)),n){case"bottom":case"bottom-middle":case"top":case"top-middle":u=I();break;case"left":case"left-middle":case"right":case"right-middle":v=C();break;case"bottom-start":case"top-start":u=T();break;case"bottom-end":case"top-end":u=O();break;case"left-start":case"right-start":v=L();break;case"left-end":case"right-end":v=N();break}return{x:u,y:v}},x=class{constructor(e,t,i={}){m(this,"reference"),m(this,"popper"),m(this,"offsetDistance"),m(this,"placement"),m(this,"disableOnResize"),m(this,"disableOnScroll"),m(this,"onUpdate"),m(this,"isWindowEventsRegistered"),m(this,"validateElements",()=>{if(!(this.reference instanceof HTMLElement))throw new Error("Invalid HTMLElement for Reference Element");if(!(this.popper instanceof HTMLElement))throw new Error("Invalid HTMLElement for Popper");if(typeof this.offsetDistance!="number")throw new Error("OffsetDistance must be a number")}),m(this,"setPopperStyleProperty",(d,f)=>{this.popper.style.setProperty("--fx-popper-placement-x",`${d}px`),this.popper.style.setProperty("--fx-popper-placement-y",`${f}px`)}),m(this,"setInitialStyles",()=>{this.popper.style.setProperty("--fx-popper-placement-x",""),this.popper.style.setProperty("--fx-popper-placement-y","")}),m(this,"initPlacement",()=>{var d;this.validateElements(),this.setInitialStyles();let f=window.innerWidth,E=window.innerHeight,{popperHeight:g,popperWidth:w,refHeight:y,refWidth:I,refLeft:C,refTop:T}=Z({reference:this.reference,popper:this.popper}),{x:O,y:L}=he({placement:this.placement,refWidth:I,refTop:T,refLeft:C,popperWidth:w,refHeight:y,popperHeight:g,windowHeight:E,windowWidth:f,offsetDistance:this.offsetDistance});this.setPopperStyleProperty(O,L),(d=this.onUpdate)==null||d.call(this,{x:O,y:L,placement:this.placement})}),m(this,"removeWindowEvents",()=>{this.isWindowEventsRegistered&&(!this.disableOnResize&&window.removeEventListener("resize",this.updatePosition),!this.disableOnScroll&&window.removeEventListener("scroll",this.updatePosition),this.isWindowEventsRegistered=!1)}),m(this,"attachWindowEvent",()=>{this.isWindowEventsRegistered&&this.removeWindowEvents(),this.disableOnResize||window.addEventListener("resize",this.updatePosition),this.disableOnScroll||window.addEventListener("scroll",this.updatePosition),this.isWindowEventsRegistered=!0}),m(this,"resetPosition",()=>{this.setInitialStyles()}),m(this,"updatePosition",()=>{this.initPlacement(),this.attachWindowEvent()}),m(this,"cleanupEvents",()=>{this.setInitialStyles(),this.removeWindowEvents()});let{offsetDistance:o=10,placement:s=Y,eventEffect:r={},onUpdate:a}=i;if(!(e instanceof HTMLElement))throw new Error("Invalid HTMLElement for Reference Element");if(!(t instanceof HTMLElement))throw new Error("Invalid HTMLElement for Popper");if(i.offsetDistance&&typeof i.offsetDistance!="number")throw new Error("OffsetDistance must be a number");let{disableOnResize:c,disableOnScroll:p}=r;this.isWindowEventsRegistered=!1,this.reference=e,this.popper=t,this.offsetDistance=o,this.placement=s,this.disableOnResize=c||!1,this.disableOnScroll=p||!1,this.onUpdate=a}setOptions({placement:e,offsetDistance:t}){this.placement=e,this.offsetDistance=t||this.offsetDistance,this.initPlacement(),this.attachWindowEvent()}},ce=(n,e=document.body)=>e.querySelector(n),z=(n,e)=>{for(let[t,i]of Object.entries(e))n.setAttribute(t,i)},de=({element:n,callback:e,type:t,keysCheck:i})=>{let o=getComputedStyle(n),s=o.transition;if(s!=="none"&&s!==""&&!i.includes(s)){let r="transitionend",a=()=>{n.removeEventListener(r,a),e()};n.addEventListener(r,a,{once:!0})}else e()},pe=({element:n,callback:e})=>{de({element:n,callback:e,type:"transition",keysCheck:["all 0s ease 0s","all"]})},b=({state:n,trigger:e,popper:t})=>{z(t,{"data-state":n}),z(e,{"aria-expanded":`${n}`})},W=class{constructor({trigger:e,content:t,options:i={}}){l(this,"triggerElement"),l(this,"contentElement"),l(this,"triggerStrategy"),l(this,"placement"),l(this,"offsetDistance"),l(this,"preventFromCloseOutside"),l(this,"preventFromCloseInside"),l(this,"options"),l(this,"defaultState"),l(this,"popper"),l(this,"eventEffect"),l(this,"getElement",s=>typeof s=="string"?ce(s):s instanceof HTMLElement?s:void 0),l(this,"handleDocumentClick",s=>{this.contentElement.getAttribute("data-state")==="open"&&(!this.triggerElement.contains(s.target)&&!this.preventFromCloseInside&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(s.target)&&!this.contentElement.contains(s.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(s.target)&&!this.contentElement.contains(s.target)&&!this.preventFromCloseOutside?this.hide():!this.triggerElement.contains(s.target)&&this.contentElement.contains(s.target)&&!this.preventFromCloseInside&&this.hide())}),l(this,"handleKeyDown",s=>{s.preventDefault(),this.triggerStrategy!=="hover"&&s.key==="Escape"&&this.contentElement.getAttribute("data-state")==="open"&&(this.preventFromCloseOutside||this.hide())}),l(this,"toggleStateOnClick",()=>{(this.contentElement.dataset.state||"close")==="close"?(this.show(),this.triggerStrategy==="hover"&&this.addEventOnMouseEnter()):this.hide()}),l(this,"hideOnMouseLeaseTrigger",()=>{setTimeout(()=>{this.contentElement.matches(":hover")||this.hide()},150)}),l(this,"hideOnMouseLeave",()=>{setTimeout(()=>{this.triggerElement.matches(":hover")||this.hide()},150)}),l(this,"addEventOnMouseEnter",()=>{this.triggerElement.addEventListener("mouseleave",this.hideOnMouseLeaseTrigger),this.contentElement.addEventListener("mouseleave",this.hideOnMouseLeave)}),l(this,"showOnMouseEnter",()=>{this.show(),this.addEventOnMouseEnter()}),l(this,"setShowOptions",({placement:s,offsetDistance:r})=>{var a,c,p,d;this.popper.setOptions({placement:s,offsetDistance:r}),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(c=(a=this.options).beforeShow)==null||c.call(a),b({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(d=(p=this.options).onShow)==null||d.call(p)}),l(this,"setPopperOptions",({placement:s,offsetDistance:r})=>{this.popper.setOptions({placement:s,offsetDistance:r})}),l(this,"cleanup",()=>{this.triggerElement.removeEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.removeEventListener("mouseenter",this.showOnMouseEnter)});var o;if(this.contentElement=this.getElement(t),this.triggerElement=this.getElement(e),!(this.triggerElement instanceof HTMLElement))throw new Error("Trigger element must be a valid HTML element");if(!(this.contentElement instanceof HTMLElement))throw new Error("Content element must be a valid HTML element");this.options=i,this.triggerStrategy=this.options.triggerStrategy||"click",this.placement=this.options.placement||"bottom",this.offsetDistance=this.options.offsetDistance||6,this.preventFromCloseOutside=this.options.preventFromCloseOutside||!1,this.preventFromCloseInside=this.options.preventCloseFromInside||!1,this.defaultState=this.options.defaultState||"close",this.eventEffect=(o=this.options.popper)==null?void 0:o.eventEffect,this.popper=new x(this.triggerElement,this.contentElement,{placement:this.placement,offsetDistance:this.offsetDistance,eventEffect:this.eventEffect}),this.initInstance()}onToggleState(e){var t,i;(i=(t=this.options).onToggle)==null||i.call(t,{isHidden:e})}show(){var e,t,i,o;this.popper.updatePosition(),document.addEventListener("keydown",this.handleKeyDown),document.addEventListener("click",this.handleDocumentClick),(t=(e=this.options).beforeShow)==null||t.call(e),b({state:"open",popper:this.contentElement,trigger:this.triggerElement}),this.onToggleState(!1),(o=(i=this.options).onShow)==null||o.call(i)}hide(){var e,t;(t=(e=this.options).beforeHide)==null||t.call(e),b({state:"close",popper:this.contentElement,trigger:this.triggerElement}),this.triggerStrategy==="click"&&document.removeEventListener("click",this.handleDocumentClick),document.removeEventListener("keydown",this.handleKeyDown),this.triggerStrategy==="hover"&&(this.triggerElement.removeEventListener("mouseleave",this.hideOnMouseLeaseTrigger),this.contentElement.removeEventListener("mouseleave",this.hideOnMouseLeave)),pe({element:this.contentElement,callback:()=>{var i,o;this.onToggleState(!0),this.popper.cleanupEvents(),(o=(i=this.options).onHide)==null||o.call(i)}})}initInstance(){b({state:this.defaultState,popper:this.contentElement,trigger:this.triggerElement}),this.defaultState==="open"?this.show():b({state:"close",popper:this.contentElement,trigger:this.triggerElement}),this.triggerElement.addEventListener("click",this.toggleStateOnClick),this.triggerStrategy==="hover"&&this.triggerElement.addEventListener("mouseenter",this.showOnMouseEnter)}},P=(n,e=document.body)=>e.querySelector(n),j=(n,e=document.body)=>Array.from(e.querySelectorAll(n)),me=n=>typeof n=="string"?P(n):n,ge=({containerElement:n,targetChildren:e="a:not([disabled]), button:not([disabled])",direction:t})=>{let i=!1,o=me(n)||document.body,s=typeof e=="string"?j(e,o):e,r=a=>{if(a.preventDefault(),o.focus(),s.length===0)return;let c=a.key,p=document.activeElement,d=s.findIndex(g=>g===p);if(d===-1){c==="ArrowUp"||c==="ArrowLeft"?s[s.length-1].focus():s[0].focus();return}let f=g=>g>0?g-1:s.length-1,E=g=>g<s.length-1?g+1:0;switch(c){case"ArrowDown":a.preventDefault(),d=E(d);break;case"ArrowRight":break;case"ArrowUp":a.preventDefault(),d=f(d);break;case"ArrowLeft":break;case"Home":a.preventDefault(),d=0;break;case"End":a.preventDefault(),d=s.length-1;break;default:return}s[d]!==p&&s[d].focus()};return{make:()=>{i||(document.addEventListener("keydown",r),i=!0)},destroy:()=>{i&&(document.removeEventListener("keydown",r),i=!1)}}},U=(n,e,t)=>{let i=new CustomEvent(e,{detail:t});n.dispatchEvent(i)},S=class{static initGlobalRegistry(){window.$flexillaInstances||(window.$flexillaInstances={})}static register(e,t,i){return this.initGlobalRegistry(),window.$flexillaInstances[e]||(window.$flexillaInstances[e]=[]),this.getInstance(e,t)||(window.$flexillaInstances[e].push({element:t,instance:i}),i)}static getInstance(e,t){var i,o;return this.initGlobalRegistry(),(o=(i=window.$flexillaInstances[e])==null?void 0:i.find(s=>s.element===t))==null?void 0:o.instance}static removeInstance(e,t){this.initGlobalRegistry(),window.$flexillaInstances[e]&&(window.$flexillaInstances[e]=window.$flexillaInstances[e].filter(i=>i.element!==t))}},F=class G{constructor(e,t={}){h(this,"triggerElement"),h(this,"contentElement"),h(this,"options"),h(this,"OverlayInstance"),h(this,"navigationKeys"),h(this,"triggerStrategy"),h(this,"placement"),h(this,"offsetDistance"),h(this,"preventFromCloseOutside"),h(this,"preventFromCloseInside"),h(this,"defaultState"),h(this,"onToggle",({isHidden:r})=>{var a,c;(c=(a=this.options).onToggle)==null||c.call(a,{isHidden:r})}),h(this,"beforeShow",()=>{this.contentElement.focus(),this.navigationKeys.make()}),h(this,"beforeHide",()=>{this.contentElement.blur(),this.navigationKeys.destroy()}),h(this,"onShow",()=>{var r,a;U(this.contentElement,"dropdown-show",{isHidden:!1}),(a=(r=this.options).onShow)==null||a.call(r)}),h(this,"onHide",()=>{var r,a;U(this.contentElement,"dropdown-hide",{isHidden:!0}),(a=(r=this.options).onHide)==null||a.call(r)}),h(this,"show",()=>{this.OverlayInstance.show()}),h(this,"hide",()=>{this.OverlayInstance.hide()}),h(this,"setShowOptions",({placement:r,offsetDistance:a})=>{this.OverlayInstance.setShowOptions({placement:r,offsetDistance:a})}),h(this,"cleanup",()=>{this.OverlayInstance.cleanup(),S.removeInstance("dropdown",this.contentElement)});let i=typeof e=="string"?P(e):e;if(!(i instanceof HTMLElement))throw new Error("Invalid dropdown content element: Must provide either a valid HTMLElement or a selector string that resolves to an existing HTMLElement");if(!i.id)throw new Error("Dropdown content element must have an 'id' attribute for trigger association");this.contentElement=i;let o=S.getInstance("dropdown",this.contentElement);if(o)return o;let s=`[data-dropdown-trigger][data-dropdown-id=${this.contentElement.id}]`;if(this.triggerElement=P(s),!(this.triggerElement instanceof HTMLElement))throw new Error(`No valid trigger element found. Ensure a trigger element exists with attributes: data-dropdown-trigger and data-dropdown-id="${this.contentElement.id}"`);this.options=t,this.triggerStrategy=this.options.triggerStrategy||this.contentElement.dataset.triggerStrategy||"click",this.placement=this.options.placement||this.contentElement.dataset.placement||"bottom-start",this.offsetDistance=this.options.offsetDistance||parseInt(`${this.contentElement.dataset.offsetDistance}`)|6,this.preventFromCloseOutside=this.options.preventFromCloseOutside||this.contentElement.hasAttribute("data-prevent-close-outside")||!1,this.preventFromCloseInside=this.options.preventCloseFromInside||this.contentElement.hasAttribute("data-prevent-close-inside")||!1,this.defaultState=this.options.defaultState||this.contentElement.dataset.defaultState||"close",this.OverlayInstance=new W({trigger:this.triggerElement,content:this.contentElement,options:{placement:this.placement,offsetDistance:this.offsetDistance,triggerStrategy:this.triggerStrategy,preventFromCloseOutside:this.preventFromCloseOutside,preventCloseFromInside:this.preventFromCloseInside,defaultState:this.defaultState,beforeShow:this.beforeShow,beforeHide:this.beforeHide,onShow:this.onShow,onHide:this.onHide,onToggle:({isHidden:r})=>{this.onToggle({isHidden:r})},popper:this.options.popper}}),this.navigationKeys=ge({containerElement:this.contentElement,targetChildren:"a:not([disabled]), button:not([disabled])",direction:"up-down"}),S.register("dropdown",this.contentElement,this)}static init(e,t={}){new G(e,t)}};h(F,"autoInit",(n="[data-fx-dropdown]")=>{let e=j(n);for(let t of e)new F(t)});var q=F;function fe(n){n.directive("dropdown",(e,{},{cleanup:t})=>{let i=new q(e);t(()=>{i.cleanup()})})}var B=fe;document.addEventListener("alpine:init",()=>{B(window.Alpine)});})();
|