@flexilla/alpine-dropdown 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn.js +153 -139
- package/dist/cdn.min.js +1 -1
- package/dist/module.cjs.js +153 -139
- package/dist/module.esm.js +153 -139
- package/package.json +3 -3
package/dist/cdn.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
(() => {
|
|
2
2
|
// ../../node_modules/@flexilla/dropdown/dist/dropdown.js
|
|
3
|
-
var B = Object.defineProperty;
|
|
4
|
-
var j = (i, e, t) => e in i ? B(i, e, { enumerable: true, configurable: true, writable: true, value: t }) : i[e] = t;
|
|
5
|
-
var a = (i, e, t) => j(i, typeof e != "symbol" ? e + "" : e, t);
|
|
6
3
|
var q = Object.defineProperty;
|
|
7
|
-
var G = (
|
|
8
|
-
var
|
|
9
|
-
var V =
|
|
10
|
-
var X = ({
|
|
11
|
-
|
|
4
|
+
var G = (n, e, t) => e in n ? q(n, e, { enumerable: true, configurable: true, writable: true, value: t }) : n[e] = t;
|
|
5
|
+
var a = (n, e, t) => G(n, typeof e != "symbol" ? e + "" : e, t);
|
|
6
|
+
var V = Object.defineProperty;
|
|
7
|
+
var X = (n, e, t) => e in n ? V(n, e, { enumerable: true, configurable: true, writable: true, value: t }) : n[e] = t;
|
|
8
|
+
var p = (n, e, t) => X(n, typeof e != "symbol" ? e + "" : e, t);
|
|
9
|
+
var Y = "bottom";
|
|
10
|
+
var J = ({ reference: n, popper: e }) => {
|
|
11
|
+
if (!n || !e)
|
|
12
12
|
throw new Error("Reference or popper element is null or undefined");
|
|
13
|
-
const t = /* @__PURE__ */ new WeakMap(),
|
|
13
|
+
const t = /* @__PURE__ */ new WeakMap(), i = (o) => (t.has(o) || t.set(o, o.getBoundingClientRect()), t.get(o)), r = i(e), s = i(n);
|
|
14
14
|
return {
|
|
15
15
|
popperHeight: r.height,
|
|
16
16
|
popperWidth: r.width,
|
|
@@ -21,25 +21,25 @@
|
|
|
21
21
|
refRight: s.right
|
|
22
22
|
};
|
|
23
23
|
};
|
|
24
|
-
var
|
|
25
|
-
const r = t, s =
|
|
26
|
-
return r >= (
|
|
24
|
+
var Q = (n, e, t, i) => {
|
|
25
|
+
const r = t, s = i - (t + e);
|
|
26
|
+
return r >= (n - e) / 2 && s >= (n - e) / 2;
|
|
27
27
|
};
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
const o = r - t - s, l = t -
|
|
34
|
-
return
|
|
28
|
+
var Z = (n, e, t, i) => (n - e) / 2 <= t && t + n / 2 + e / 2 <= i;
|
|
29
|
+
var _ = (n, e, t, i, r) => t > r - i ? e() ? window.innerHeight - r : t - r : n() ? 0 : t + i;
|
|
30
|
+
var ee = (n, e, t, i) => n <= i && t - n <= e;
|
|
31
|
+
var te = (n, e, t, i) => t <= i && -n <= e;
|
|
32
|
+
var ne = (n, e, t, i, r, s) => {
|
|
33
|
+
const o = r - t - s, l = t - i, m = t + s - i + (r - t - s), c = o >= 0 ? r - i : l >= 0 ? t - i : t;
|
|
34
|
+
return n() ? 0 : e() ? m : c;
|
|
35
35
|
};
|
|
36
|
-
var
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
placement:
|
|
36
|
+
var ie = (n, e, t, i) => n <= t && e - n - i >= n;
|
|
37
|
+
var se = (n, e) => n >= e;
|
|
38
|
+
var re = ({
|
|
39
|
+
placement: n,
|
|
40
40
|
refWidth: e,
|
|
41
41
|
refTop: t,
|
|
42
|
-
refLeft:
|
|
42
|
+
refLeft: i,
|
|
43
43
|
refHeight: r,
|
|
44
44
|
popperWidth: s,
|
|
45
45
|
popperHeight: o,
|
|
@@ -47,34 +47,34 @@
|
|
|
47
47
|
windowWidth: m,
|
|
48
48
|
offsetDistance: c
|
|
49
49
|
}) => {
|
|
50
|
-
const d = m -
|
|
51
|
-
() =>
|
|
52
|
-
() =>
|
|
50
|
+
const d = m - i - e, f = i, E = l - t - r, g = t, w = () => _(
|
|
51
|
+
() => te(t, r, o, l),
|
|
52
|
+
() => ee(t, r, o, l),
|
|
53
53
|
t,
|
|
54
54
|
r,
|
|
55
55
|
o
|
|
56
|
-
), b = () =>
|
|
57
|
-
() =>
|
|
58
|
-
() =>
|
|
59
|
-
|
|
56
|
+
), b = () => ne(
|
|
57
|
+
() => ie(i, m, s, e),
|
|
58
|
+
() => se(i, s),
|
|
59
|
+
i,
|
|
60
60
|
s,
|
|
61
61
|
m,
|
|
62
62
|
e
|
|
63
|
-
),
|
|
63
|
+
), H = () => Q(s, e, i, m) ? i + e / 2 - s / 2 : b(), M = () => Z(o, r, t, l) ? t + r / 2 - o / 2 : w(), C = () => i + s <= m ? i : b(), L = () => i + e - s >= 0 ? i + e - s : b(), x = () => t + o <= l ? t : w(), j = () => t + r - o >= 0 ? t + r - o : w();
|
|
64
64
|
let u = 0, v = 0;
|
|
65
|
-
const T = t - o - c,
|
|
66
|
-
switch (
|
|
65
|
+
const T = t - o - c, A = t + r + c, I = i - s - c, D = i + e + c, W = g >= o + c, $ = E >= o + c, R = f >= s + c, N = d >= s + c;
|
|
66
|
+
switch (n.startsWith("top") ? v = W ? T : $ ? A : Math.max(T, A) : n.startsWith("bottom") ? v = $ ? A : W ? T : Math.max(A) : n.startsWith("left") ? u = R ? I : N ? D : Math.max(I, D) : n.startsWith("right") && (u = N ? D : R ? I : Math.max(D, I)), n) {
|
|
67
67
|
case "bottom":
|
|
68
68
|
case "bottom-middle":
|
|
69
69
|
case "top":
|
|
70
70
|
case "top-middle":
|
|
71
|
-
u =
|
|
71
|
+
u = H();
|
|
72
72
|
break;
|
|
73
73
|
case "left":
|
|
74
74
|
case "left-middle":
|
|
75
75
|
case "right":
|
|
76
76
|
case "right-middle":
|
|
77
|
-
v =
|
|
77
|
+
v = M();
|
|
78
78
|
break;
|
|
79
79
|
case "bottom-start":
|
|
80
80
|
case "top-start":
|
|
@@ -90,12 +90,12 @@
|
|
|
90
90
|
break;
|
|
91
91
|
case "left-end":
|
|
92
92
|
case "right-end":
|
|
93
|
-
v =
|
|
93
|
+
v = j();
|
|
94
94
|
break;
|
|
95
95
|
}
|
|
96
96
|
return { x: u, y: v };
|
|
97
97
|
};
|
|
98
|
-
var
|
|
98
|
+
var oe = class {
|
|
99
99
|
/**
|
|
100
100
|
* Flexilla Popper
|
|
101
101
|
* @param reference
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
* @param {boolean} [options.eventEffect.disableOnScroll] - Disable position updates on scroll
|
|
115
115
|
* @param {Function} [options.onUpdate] - Callback function when position updates
|
|
116
116
|
*/
|
|
117
|
-
constructor(e, t,
|
|
117
|
+
constructor(e, t, i = {}) {
|
|
118
118
|
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", () => {
|
|
119
119
|
if (!(this.reference instanceof HTMLElement))
|
|
120
120
|
throw new Error("Invalid HTMLElement for Reference Element");
|
|
@@ -129,12 +129,12 @@
|
|
|
129
129
|
}), p(this, "initPlacement", () => {
|
|
130
130
|
var d;
|
|
131
131
|
this.validateElements(), this.setInitialStyles();
|
|
132
|
-
const f = window.innerWidth, E = window.innerHeight, { popperHeight: g, popperWidth: w, refHeight: b, refWidth:
|
|
132
|
+
const f = window.innerWidth, E = window.innerHeight, { popperHeight: g, popperWidth: w, refHeight: b, refWidth: H, refLeft: M, refTop: C } = J({ reference: this.reference, popper: this.popper }), { x: L, y: x } = re(
|
|
133
133
|
{
|
|
134
134
|
placement: this.placement,
|
|
135
|
-
refWidth:
|
|
135
|
+
refWidth: H,
|
|
136
136
|
refTop: C,
|
|
137
|
-
refLeft:
|
|
137
|
+
refLeft: M,
|
|
138
138
|
popperWidth: w,
|
|
139
139
|
refHeight: b,
|
|
140
140
|
popperHeight: g,
|
|
@@ -157,15 +157,15 @@
|
|
|
157
157
|
});
|
|
158
158
|
const {
|
|
159
159
|
offsetDistance: r = 10,
|
|
160
|
-
placement: s =
|
|
160
|
+
placement: s = Y,
|
|
161
161
|
eventEffect: o = {},
|
|
162
162
|
onUpdate: l
|
|
163
|
-
} =
|
|
163
|
+
} = i;
|
|
164
164
|
if (!(e instanceof HTMLElement))
|
|
165
165
|
throw new Error("Invalid HTMLElement for Reference Element");
|
|
166
166
|
if (!(t instanceof HTMLElement))
|
|
167
167
|
throw new Error("Invalid HTMLElement for Popper");
|
|
168
|
-
if (
|
|
168
|
+
if (i.offsetDistance && typeof i.offsetDistance != "number")
|
|
169
169
|
throw new Error("OffsetDistance must be a number");
|
|
170
170
|
const { disableOnResize: m, disableOnScroll: c } = o;
|
|
171
171
|
this.isWindowEventsRegistered = false, this.reference = e, this.popper = t, this.offsetDistance = r, this.placement = s, this.disableOnResize = m || false, this.disableOnScroll = c || false, this.onUpdate = l;
|
|
@@ -181,53 +181,53 @@
|
|
|
181
181
|
this.placement = e, this.offsetDistance = t || this.offsetDistance, this.initPlacement(), this.attachWindowEvent();
|
|
182
182
|
}
|
|
183
183
|
};
|
|
184
|
-
var
|
|
185
|
-
var
|
|
186
|
-
var h = (
|
|
187
|
-
var
|
|
188
|
-
var
|
|
189
|
-
for (const [t,
|
|
190
|
-
|
|
184
|
+
var ae = Object.defineProperty;
|
|
185
|
+
var le = (n, e, t) => e in n ? ae(n, e, { enumerable: true, configurable: true, writable: true, value: t }) : n[e] = t;
|
|
186
|
+
var h = (n, e, t) => le(n, typeof e != "symbol" ? e + "" : e, t);
|
|
187
|
+
var he = (n, e = document.body) => e.querySelector(n);
|
|
188
|
+
var z = (n, e) => {
|
|
189
|
+
for (const [t, i] of Object.entries(e))
|
|
190
|
+
n.setAttribute(t, i);
|
|
191
191
|
};
|
|
192
|
-
var
|
|
193
|
-
element:
|
|
192
|
+
var de = ({
|
|
193
|
+
element: n,
|
|
194
194
|
callback: e,
|
|
195
195
|
type: t,
|
|
196
|
-
keysCheck:
|
|
196
|
+
keysCheck: i
|
|
197
197
|
}) => {
|
|
198
|
-
const r = getComputedStyle(
|
|
199
|
-
if (s !== "none" && s !== "" && !
|
|
198
|
+
const r = getComputedStyle(n), s = r.transition;
|
|
199
|
+
if (s !== "none" && s !== "" && !i.includes(s)) {
|
|
200
200
|
const o = "transitionend", l = () => {
|
|
201
|
-
|
|
201
|
+
n.removeEventListener(o, l), e();
|
|
202
202
|
};
|
|
203
|
-
|
|
203
|
+
n.addEventListener(o, l, { once: true });
|
|
204
204
|
} else
|
|
205
205
|
e();
|
|
206
206
|
};
|
|
207
|
-
var
|
|
208
|
-
element:
|
|
207
|
+
var ce = ({
|
|
208
|
+
element: n,
|
|
209
209
|
callback: e
|
|
210
210
|
}) => {
|
|
211
|
-
|
|
212
|
-
element:
|
|
211
|
+
de({
|
|
212
|
+
element: n,
|
|
213
213
|
callback: e,
|
|
214
214
|
type: "transition",
|
|
215
215
|
keysCheck: ["all 0s ease 0s", "all"]
|
|
216
216
|
});
|
|
217
217
|
};
|
|
218
|
-
var
|
|
219
|
-
const
|
|
220
|
-
|
|
218
|
+
var pe = (n, e, t) => {
|
|
219
|
+
const i = new CustomEvent(e, { detail: t });
|
|
220
|
+
n.dispatchEvent(i);
|
|
221
221
|
};
|
|
222
|
-
var y = ({ state:
|
|
223
|
-
const
|
|
224
|
-
|
|
225
|
-
"data-state":
|
|
226
|
-
}),
|
|
227
|
-
"aria-expanded": `${
|
|
222
|
+
var y = ({ state: n, trigger: e, popper: t }) => {
|
|
223
|
+
const i = n === "open";
|
|
224
|
+
z(t, {
|
|
225
|
+
"data-state": n
|
|
226
|
+
}), z(e, {
|
|
227
|
+
"aria-expanded": `${i}`
|
|
228
228
|
});
|
|
229
229
|
};
|
|
230
|
-
var
|
|
230
|
+
var me = class {
|
|
231
231
|
/**
|
|
232
232
|
* Creates an instance of CreateOverlay
|
|
233
233
|
* @param {Object} params - The initialization parameters
|
|
@@ -235,8 +235,8 @@
|
|
|
235
235
|
* @param {string | HTMLElement} params.content - The content element selector or HTMLElement
|
|
236
236
|
* @param {OverlayOptions} [params.options] - Configuration options for the overlay
|
|
237
237
|
*/
|
|
238
|
-
constructor({ trigger: e, content: t, options:
|
|
239
|
-
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", (s) => typeof s == "string" ?
|
|
238
|
+
constructor({ trigger: e, content: t, options: i = {} }) {
|
|
239
|
+
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", (s) => typeof s == "string" ? he(s) : s instanceof HTMLElement ? s : void 0), h(this, "handleDocumentClick", (s) => {
|
|
240
240
|
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());
|
|
241
241
|
}), h(this, "handleKeyDown", (s) => {
|
|
242
242
|
s.preventDefault(), this.triggerStrategy !== "hover" && s.key === "Escape" && this.contentElement.getAttribute("data-state") === "open" && (this.preventFromCloseOutside || this.hide());
|
|
@@ -282,7 +282,7 @@
|
|
|
282
282
|
throw new Error("Trigger element must be a valid HTML element");
|
|
283
283
|
if (!(this.contentElement instanceof HTMLElement))
|
|
284
284
|
throw new Error("Content element must be a valid HTML element");
|
|
285
|
-
this.options =
|
|
285
|
+
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 || false, this.preventFromCloseInside = this.options.preventCloseFromInside || false, this.defaultState = this.options.defaultState || "close", this.eventEffect = (r = this.options.popper) == null ? void 0 : r.eventEffect, this.popper = new oe(
|
|
286
286
|
this.triggerElement,
|
|
287
287
|
this.contentElement,
|
|
288
288
|
{
|
|
@@ -293,39 +293,39 @@
|
|
|
293
293
|
), this.initInstance();
|
|
294
294
|
}
|
|
295
295
|
onToggleState(e) {
|
|
296
|
-
var t,
|
|
297
|
-
(
|
|
296
|
+
var t, i;
|
|
297
|
+
(i = (t = this.options).onToggle) == null || i.call(t, { isHidden: e });
|
|
298
298
|
}
|
|
299
299
|
/**
|
|
300
300
|
* Shows the overlay
|
|
301
301
|
* Positions the overlay, adds event listeners, and triggers related callbacks
|
|
302
302
|
*/
|
|
303
303
|
show() {
|
|
304
|
-
var e, t,
|
|
304
|
+
var e, t, i, r;
|
|
305
305
|
this.popper.updatePosition(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (t = (e = this.options).beforeShow) == null || t.call(e), y({
|
|
306
306
|
state: "open",
|
|
307
307
|
popper: this.contentElement,
|
|
308
308
|
trigger: this.triggerElement
|
|
309
|
-
}), this.onToggleState(false), (r = (
|
|
309
|
+
}), this.onToggleState(false), (r = (i = this.options).onShow) == null || r.call(i);
|
|
310
310
|
}
|
|
311
311
|
/**
|
|
312
312
|
* Hides the overlay
|
|
313
313
|
* Removes event listeners and triggers related callbacks
|
|
314
314
|
*/
|
|
315
315
|
hide() {
|
|
316
|
-
var e, t,
|
|
316
|
+
var e, t, i;
|
|
317
317
|
let r = false;
|
|
318
|
-
|
|
318
|
+
pe(this.contentElement, "before-hide", {
|
|
319
319
|
setExitAction: (o) => {
|
|
320
320
|
r = o;
|
|
321
321
|
}
|
|
322
322
|
});
|
|
323
|
-
const s = (
|
|
323
|
+
const s = (i = (t = (e = this.options).beforeHide) == null ? void 0 : t.call(e)) == null ? void 0 : i.cancelAction;
|
|
324
324
|
r || s || (y({
|
|
325
325
|
state: "close",
|
|
326
326
|
popper: this.contentElement,
|
|
327
327
|
trigger: this.triggerElement
|
|
328
|
-
}), 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)),
|
|
328
|
+
}), 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)), ce({
|
|
329
329
|
element: this.contentElement,
|
|
330
330
|
callback: () => {
|
|
331
331
|
var o, l;
|
|
@@ -345,12 +345,12 @@
|
|
|
345
345
|
}), this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
|
|
346
346
|
}
|
|
347
347
|
};
|
|
348
|
-
var
|
|
349
|
-
var S = (
|
|
350
|
-
var
|
|
351
|
-
var
|
|
352
|
-
let
|
|
353
|
-
const r =
|
|
348
|
+
var P = (n, e = document.body) => e.querySelector(n);
|
|
349
|
+
var S = (n, e = document.body) => Array.from(e.querySelectorAll(n));
|
|
350
|
+
var ge = (n) => typeof n == "string" ? P(n) : n;
|
|
351
|
+
var fe = ({ containerElement: n, targetChildren: e = "a:not([disabled]), button:not([disabled])", direction: t }) => {
|
|
352
|
+
let i = false;
|
|
353
|
+
const r = ge(n) || document.body, s = typeof e == "string" ? S(e, r) : e, o = (l) => {
|
|
354
354
|
if (l.preventDefault(), r.focus(), s.length === 0)
|
|
355
355
|
return;
|
|
356
356
|
const m = l.key, c = document.activeElement;
|
|
@@ -384,53 +384,67 @@
|
|
|
384
384
|
};
|
|
385
385
|
return {
|
|
386
386
|
make: () => {
|
|
387
|
-
|
|
387
|
+
i || (document.addEventListener("keydown", o), i = true);
|
|
388
388
|
},
|
|
389
389
|
destroy: () => {
|
|
390
|
-
|
|
390
|
+
i && (document.removeEventListener("keydown", o), i = false);
|
|
391
391
|
}
|
|
392
392
|
};
|
|
393
393
|
};
|
|
394
|
-
var
|
|
395
|
-
const
|
|
396
|
-
|
|
394
|
+
var K = (n, e, t) => {
|
|
395
|
+
const i = new CustomEvent(e, { detail: t });
|
|
396
|
+
n.dispatchEvent(i);
|
|
397
397
|
};
|
|
398
|
-
function
|
|
398
|
+
function ue(n) {
|
|
399
399
|
const e = () => {
|
|
400
400
|
document.querySelector(
|
|
401
401
|
"[data-fx-component]:not([data-component-initialized])"
|
|
402
|
-
) ? requestAnimationFrame(e) :
|
|
402
|
+
) ? requestAnimationFrame(e) : n();
|
|
403
403
|
};
|
|
404
404
|
e();
|
|
405
405
|
}
|
|
406
|
-
|
|
407
|
-
|
|
406
|
+
var U = "data-fx-teleport-root";
|
|
407
|
+
var F = "data-fx-teleported";
|
|
408
|
+
var ve = {
|
|
409
|
+
append: () => {
|
|
410
|
+
},
|
|
411
|
+
remove: () => {
|
|
412
|
+
},
|
|
413
|
+
restore: () => {
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
function Ee(n, e, t = "move") {
|
|
417
|
+
var i;
|
|
418
|
+
if (!(n instanceof HTMLElement))
|
|
408
419
|
throw new Error("Source element must be an HTMLElement");
|
|
409
420
|
if (!(e instanceof HTMLElement))
|
|
410
421
|
throw new Error("Target element must be an HTMLElement");
|
|
411
422
|
if (!["move", "detachable"].includes(t))
|
|
412
423
|
throw new Error(`Invalid teleport mode: ${t}. Must be "move" or "detachable".`);
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
424
|
+
if ((i = n.parentElement) != null && i.closest(`[${U}]`))
|
|
425
|
+
return ve;
|
|
426
|
+
n.setAttribute(U, "");
|
|
427
|
+
let r = document.createComment("teleporter-placeholder");
|
|
428
|
+
const s = n.parentNode;
|
|
429
|
+
return s && s.insertBefore(r, n), t === "move" ? (n.parentNode && (e.appendChild(n), n.setAttribute(F, "")), {
|
|
416
430
|
append() {
|
|
417
|
-
|
|
431
|
+
n.parentNode !== e && (e.appendChild(n), n.setAttribute(F, ""));
|
|
418
432
|
},
|
|
419
433
|
remove() {
|
|
420
|
-
|
|
434
|
+
r != null && r.parentNode && n.parentNode && r.parentNode.insertBefore(n, r);
|
|
421
435
|
},
|
|
422
436
|
restore() {
|
|
423
|
-
|
|
437
|
+
r != null && r.parentNode && n.parentNode !== s && r.parentNode.insertBefore(n, r);
|
|
424
438
|
}
|
|
425
|
-
}) : (
|
|
439
|
+
}) : (n.parentNode && (e.appendChild(n), n.setAttribute(F, "")), {
|
|
426
440
|
append() {
|
|
427
|
-
e.contains(
|
|
441
|
+
e.contains(n) || e.appendChild(n);
|
|
428
442
|
},
|
|
429
443
|
remove() {
|
|
430
|
-
|
|
444
|
+
n.parentNode && n.remove();
|
|
431
445
|
},
|
|
432
446
|
restore() {
|
|
433
|
-
|
|
447
|
+
r != null && r.parentNode && !n.parentNode && r.parentNode.insertBefore(n, r);
|
|
434
448
|
}
|
|
435
449
|
});
|
|
436
450
|
}
|
|
@@ -438,18 +452,18 @@
|
|
|
438
452
|
static initGlobalRegistry() {
|
|
439
453
|
window.$flexillaInstances || (window.$flexillaInstances = {});
|
|
440
454
|
}
|
|
441
|
-
static register(e, t,
|
|
442
|
-
return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance:
|
|
455
|
+
static register(e, t, i) {
|
|
456
|
+
return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance: i }), i);
|
|
443
457
|
}
|
|
444
458
|
static getInstance(e, t) {
|
|
445
|
-
var
|
|
446
|
-
return this.initGlobalRegistry(), (r = (
|
|
459
|
+
var i, r;
|
|
460
|
+
return this.initGlobalRegistry(), (r = (i = window.$flexillaInstances[e]) == null ? void 0 : i.find(
|
|
447
461
|
(s) => s.element === t
|
|
448
462
|
)) == null ? void 0 : r.instance;
|
|
449
463
|
}
|
|
450
464
|
static removeInstance(e, t) {
|
|
451
465
|
this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
|
|
452
|
-
(
|
|
466
|
+
(i) => i.element !== t
|
|
453
467
|
));
|
|
454
468
|
}
|
|
455
469
|
static setup(e) {
|
|
@@ -459,7 +473,7 @@
|
|
|
459
473
|
e.setAttribute("data-component-initialized", "initialized");
|
|
460
474
|
}
|
|
461
475
|
};
|
|
462
|
-
var
|
|
476
|
+
var we = {
|
|
463
477
|
teleport: true,
|
|
464
478
|
teleportMode: "move"
|
|
465
479
|
};
|
|
@@ -492,8 +506,8 @@
|
|
|
492
506
|
});
|
|
493
507
|
a(this, "updateObserverFor", (e2) => {
|
|
494
508
|
const t2 = S("[data-dropdown-trigger]", this.contentElement);
|
|
495
|
-
for (const
|
|
496
|
-
e2.observe(
|
|
509
|
+
for (const i2 of t2)
|
|
510
|
+
e2.observe(i2, {
|
|
497
511
|
attributes: true,
|
|
498
512
|
attributeFilter: ["aria-expanded"]
|
|
499
513
|
});
|
|
@@ -508,17 +522,17 @@
|
|
|
508
522
|
this.subtriggerObserver = new MutationObserver((e2) => {
|
|
509
523
|
for (const t2 of e2)
|
|
510
524
|
if (t2.type === "attributes" && t2.attributeName === "aria-expanded") {
|
|
511
|
-
const
|
|
512
|
-
this.updateSubtriggerAttr(
|
|
525
|
+
const i2 = t2.target, r2 = i2.getAttribute("aria-expanded");
|
|
526
|
+
this.updateSubtriggerAttr(i2, r2 === "true" ? "add" : "remove");
|
|
513
527
|
}
|
|
514
528
|
}), this.updateObserverFor(this.subtriggerObserver);
|
|
515
529
|
});
|
|
516
530
|
a(this, "onToggle", ({ isHidden: e2 }) => {
|
|
517
|
-
var t2,
|
|
518
|
-
(
|
|
531
|
+
var t2, i2;
|
|
532
|
+
(i2 = (t2 = this.options).onToggle) == null || i2.call(t2, { isHidden: e2 });
|
|
519
533
|
});
|
|
520
534
|
a(this, "moveElOnInit", () => {
|
|
521
|
-
this.experimentalOptions.teleport &&
|
|
535
|
+
this.experimentalOptions.teleport && ue(() => {
|
|
522
536
|
this.experimentalOptions.teleportMode === "detachable" ? this.teleporter.remove() : this.teleporter.append();
|
|
523
537
|
});
|
|
524
538
|
});
|
|
@@ -536,14 +550,14 @@
|
|
|
536
550
|
});
|
|
537
551
|
a(this, "showHideOnArrow", (e2) => {
|
|
538
552
|
e2.preventDefault();
|
|
539
|
-
const t2 = e2.key,
|
|
540
|
-
if (
|
|
553
|
+
const t2 = e2.key, i2 = document.activeElement;
|
|
554
|
+
if (i2 != null && i2.hasAttribute("data-dropdown-trigger"))
|
|
541
555
|
switch (t2) {
|
|
542
556
|
case "ArrowRight":
|
|
543
|
-
|
|
557
|
+
i2.getAttribute("aria-expanded") !== "true" && (i2.click(), this.updateSubtriggerAttr(i2, "add"));
|
|
544
558
|
break;
|
|
545
559
|
case "ArrowLeft":
|
|
546
|
-
|
|
560
|
+
i2.getAttribute("aria-expanded") === "true" && (i2.click(), this.updateSubtriggerAttr(i2, "remove"));
|
|
547
561
|
break;
|
|
548
562
|
default:
|
|
549
563
|
return;
|
|
@@ -565,13 +579,13 @@
|
|
|
565
579
|
});
|
|
566
580
|
a(this, "onShow", () => {
|
|
567
581
|
var e2, t2;
|
|
568
|
-
|
|
582
|
+
K(this.contentElement, "dropdown-show", {
|
|
569
583
|
isHidden: false
|
|
570
584
|
}), (t2 = (e2 = this.options).onShow) == null || t2.call(e2), this.observeEl(), this.observeSubtriggers();
|
|
571
585
|
});
|
|
572
586
|
a(this, "onHide", () => {
|
|
573
587
|
var e2, t2;
|
|
574
|
-
|
|
588
|
+
K(this.contentElement, "dropdown-hide", {
|
|
575
589
|
isHidden: true
|
|
576
590
|
}), (t2 = (e2 = this.options).onHide) == null || t2.call(e2), this.moveEl(), this.triggerElement.hasAttribute("data-current-subtrigger") && this.updateSubtriggerAttr(this.triggerElement, "remove"), this.disconnectObserver();
|
|
577
591
|
});
|
|
@@ -592,22 +606,22 @@
|
|
|
592
606
|
a(this, "cleanup", () => {
|
|
593
607
|
this.disconnectObserver(), this.OverlayInstance.cleanup(), O.removeInstance("dropdown", this.contentElement);
|
|
594
608
|
});
|
|
595
|
-
const
|
|
596
|
-
if (!(
|
|
609
|
+
const i = typeof e == "string" ? P(e) : e;
|
|
610
|
+
if (!(i instanceof HTMLElement))
|
|
597
611
|
throw new Error(
|
|
598
612
|
"Invalid dropdown content element: Must provide either a valid HTMLElement or a selector string that resolves to an existing HTMLElement"
|
|
599
613
|
);
|
|
600
|
-
if (!
|
|
614
|
+
if (!i.id)
|
|
601
615
|
throw new Error("Dropdown content element must have an 'id' attribute for trigger association");
|
|
602
|
-
this.contentElement =
|
|
616
|
+
this.contentElement = i;
|
|
603
617
|
const r = O.getInstance("dropdown", this.contentElement);
|
|
604
618
|
if (r)
|
|
605
619
|
return r;
|
|
606
620
|
O.setup(this.contentElement);
|
|
607
621
|
const s = `[data-dropdown-trigger][data-dropdown-id=${this.contentElement.id}]`;
|
|
608
|
-
if (this.triggerElement =
|
|
622
|
+
if (this.triggerElement = P(s), !(this.triggerElement instanceof HTMLElement))
|
|
609
623
|
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}"`);
|
|
610
|
-
this.options = t, this.triggerStrategy = this.contentElement.dataset.triggerStrategy || this.options.triggerStrategy || "click", this.placement = this.contentElement.dataset.placement || this.options.placement || "bottom-start", this.offsetDistance = parseInt(`${this.contentElement.dataset.offsetDistance}`) || this.options.offsetDistance || 6, this.preventFromCloseOutside = this.contentElement.hasAttribute("data-prevent-close-outside") || this.options.preventFromCloseOutside || false, this.preventFromCloseInside = this.contentElement.hasAttribute("data-prevent-close-inside") || this.options.preventCloseFromInside || false, this.defaultState = this.contentElement.dataset.defaultState || this.options.defaultState || "close", this.experimentalOptions = Object.assign({},
|
|
624
|
+
this.options = t, this.triggerStrategy = this.contentElement.dataset.triggerStrategy || this.options.triggerStrategy || "click", this.placement = this.contentElement.dataset.placement || this.options.placement || "bottom-start", this.offsetDistance = parseInt(`${this.contentElement.dataset.offsetDistance}`) || this.options.offsetDistance || 6, this.preventFromCloseOutside = this.contentElement.hasAttribute("data-prevent-close-outside") || this.options.preventFromCloseOutside || false, this.preventFromCloseInside = this.contentElement.hasAttribute("data-prevent-close-inside") || this.options.preventCloseFromInside || false, this.defaultState = this.contentElement.dataset.defaultState || this.options.defaultState || "close", this.experimentalOptions = Object.assign({}, we, t.experimental), this.teleporter = Ee(this.contentElement, document.body, this.experimentalOptions.teleportMode), this.OverlayInstance = new me({
|
|
611
625
|
trigger: this.triggerElement,
|
|
612
626
|
content: this.contentElement,
|
|
613
627
|
options: {
|
|
@@ -630,7 +644,7 @@
|
|
|
630
644
|
},
|
|
631
645
|
popper: this.options.popper
|
|
632
646
|
}
|
|
633
|
-
}), this.moveElOnInit(), this.items = S("a:not([disabled]), button:not([disabled])", this.contentElement), this.navigationKeys =
|
|
647
|
+
}), this.moveElOnInit(), this.items = S("a:not([disabled]), button:not([disabled])", this.contentElement), this.navigationKeys = fe({
|
|
634
648
|
containerElement: this.contentElement,
|
|
635
649
|
targetChildren: this.items,
|
|
636
650
|
direction: "up-down"
|
|
@@ -648,15 +662,15 @@
|
|
|
648
662
|
};
|
|
649
663
|
a(k, "autoInit", (e = "[data-fx-dropdown]") => {
|
|
650
664
|
const t = S(e);
|
|
651
|
-
for (const
|
|
652
|
-
new k(
|
|
665
|
+
for (const i of t)
|
|
666
|
+
new k(i);
|
|
653
667
|
});
|
|
654
|
-
var
|
|
668
|
+
var B = k;
|
|
655
669
|
|
|
656
670
|
// src/index.js
|
|
657
671
|
function Dropdown(Alpine) {
|
|
658
672
|
Alpine.directive("dropdown", (el, {}, { cleanup }) => {
|
|
659
|
-
const dropdown_ = new
|
|
673
|
+
const dropdown_ = new B(el);
|
|
660
674
|
cleanup(() => {
|
|
661
675
|
dropdown_.cleanup();
|
|
662
676
|
});
|