@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/module.cjs.js
CHANGED
|
@@ -24,17 +24,17 @@ __export(module_exports, {
|
|
|
24
24
|
module.exports = __toCommonJS(module_exports);
|
|
25
25
|
|
|
26
26
|
// ../../node_modules/@flexilla/dropdown/dist/dropdown.js
|
|
27
|
-
var B = Object.defineProperty;
|
|
28
|
-
var j = (i, e, t) => e in i ? B(i, e, { enumerable: true, configurable: true, writable: true, value: t }) : i[e] = t;
|
|
29
|
-
var a = (i, e, t) => j(i, typeof e != "symbol" ? e + "" : e, t);
|
|
30
27
|
var q = Object.defineProperty;
|
|
31
|
-
var G = (
|
|
32
|
-
var
|
|
33
|
-
var V =
|
|
34
|
-
var X = ({
|
|
35
|
-
|
|
28
|
+
var G = (n, e, t) => e in n ? q(n, e, { enumerable: true, configurable: true, writable: true, value: t }) : n[e] = t;
|
|
29
|
+
var a = (n, e, t) => G(n, typeof e != "symbol" ? e + "" : e, t);
|
|
30
|
+
var V = Object.defineProperty;
|
|
31
|
+
var X = (n, e, t) => e in n ? V(n, e, { enumerable: true, configurable: true, writable: true, value: t }) : n[e] = t;
|
|
32
|
+
var p = (n, e, t) => X(n, typeof e != "symbol" ? e + "" : e, t);
|
|
33
|
+
var Y = "bottom";
|
|
34
|
+
var J = ({ reference: n, popper: e }) => {
|
|
35
|
+
if (!n || !e)
|
|
36
36
|
throw new Error("Reference or popper element is null or undefined");
|
|
37
|
-
const t = /* @__PURE__ */ new WeakMap(),
|
|
37
|
+
const t = /* @__PURE__ */ new WeakMap(), i = (o) => (t.has(o) || t.set(o, o.getBoundingClientRect()), t.get(o)), r = i(e), s = i(n);
|
|
38
38
|
return {
|
|
39
39
|
popperHeight: r.height,
|
|
40
40
|
popperWidth: r.width,
|
|
@@ -45,25 +45,25 @@ var X = ({ reference: i, popper: e }) => {
|
|
|
45
45
|
refRight: s.right
|
|
46
46
|
};
|
|
47
47
|
};
|
|
48
|
-
var
|
|
49
|
-
const r = t, s =
|
|
50
|
-
return r >= (
|
|
48
|
+
var Q = (n, e, t, i) => {
|
|
49
|
+
const r = t, s = i - (t + e);
|
|
50
|
+
return r >= (n - e) / 2 && s >= (n - e) / 2;
|
|
51
51
|
};
|
|
52
|
-
var
|
|
53
|
-
var
|
|
54
|
-
var
|
|
55
|
-
var
|
|
56
|
-
var
|
|
57
|
-
const o = r - t - s, l = t -
|
|
58
|
-
return
|
|
52
|
+
var Z = (n, e, t, i) => (n - e) / 2 <= t && t + n / 2 + e / 2 <= i;
|
|
53
|
+
var _ = (n, e, t, i, r) => t > r - i ? e() ? window.innerHeight - r : t - r : n() ? 0 : t + i;
|
|
54
|
+
var ee = (n, e, t, i) => n <= i && t - n <= e;
|
|
55
|
+
var te = (n, e, t, i) => t <= i && -n <= e;
|
|
56
|
+
var ne = (n, e, t, i, r, s) => {
|
|
57
|
+
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;
|
|
58
|
+
return n() ? 0 : e() ? m : c;
|
|
59
59
|
};
|
|
60
|
-
var
|
|
61
|
-
var
|
|
62
|
-
var
|
|
63
|
-
placement:
|
|
60
|
+
var ie = (n, e, t, i) => n <= t && e - n - i >= n;
|
|
61
|
+
var se = (n, e) => n >= e;
|
|
62
|
+
var re = ({
|
|
63
|
+
placement: n,
|
|
64
64
|
refWidth: e,
|
|
65
65
|
refTop: t,
|
|
66
|
-
refLeft:
|
|
66
|
+
refLeft: i,
|
|
67
67
|
refHeight: r,
|
|
68
68
|
popperWidth: s,
|
|
69
69
|
popperHeight: o,
|
|
@@ -71,34 +71,34 @@ var ie = ({
|
|
|
71
71
|
windowWidth: m,
|
|
72
72
|
offsetDistance: c
|
|
73
73
|
}) => {
|
|
74
|
-
const d = m -
|
|
75
|
-
() =>
|
|
76
|
-
() =>
|
|
74
|
+
const d = m - i - e, f = i, E = l - t - r, g = t, w = () => _(
|
|
75
|
+
() => te(t, r, o, l),
|
|
76
|
+
() => ee(t, r, o, l),
|
|
77
77
|
t,
|
|
78
78
|
r,
|
|
79
79
|
o
|
|
80
|
-
), b = () =>
|
|
81
|
-
() =>
|
|
82
|
-
() =>
|
|
83
|
-
|
|
80
|
+
), b = () => ne(
|
|
81
|
+
() => ie(i, m, s, e),
|
|
82
|
+
() => se(i, s),
|
|
83
|
+
i,
|
|
84
84
|
s,
|
|
85
85
|
m,
|
|
86
86
|
e
|
|
87
|
-
),
|
|
87
|
+
), 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();
|
|
88
88
|
let u = 0, v = 0;
|
|
89
|
-
const T = t - o - c,
|
|
90
|
-
switch (
|
|
89
|
+
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;
|
|
90
|
+
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) {
|
|
91
91
|
case "bottom":
|
|
92
92
|
case "bottom-middle":
|
|
93
93
|
case "top":
|
|
94
94
|
case "top-middle":
|
|
95
|
-
u =
|
|
95
|
+
u = H();
|
|
96
96
|
break;
|
|
97
97
|
case "left":
|
|
98
98
|
case "left-middle":
|
|
99
99
|
case "right":
|
|
100
100
|
case "right-middle":
|
|
101
|
-
v =
|
|
101
|
+
v = M();
|
|
102
102
|
break;
|
|
103
103
|
case "bottom-start":
|
|
104
104
|
case "top-start":
|
|
@@ -114,12 +114,12 @@ var ie = ({
|
|
|
114
114
|
break;
|
|
115
115
|
case "left-end":
|
|
116
116
|
case "right-end":
|
|
117
|
-
v =
|
|
117
|
+
v = j();
|
|
118
118
|
break;
|
|
119
119
|
}
|
|
120
120
|
return { x: u, y: v };
|
|
121
121
|
};
|
|
122
|
-
var
|
|
122
|
+
var oe = class {
|
|
123
123
|
/**
|
|
124
124
|
* Flexilla Popper
|
|
125
125
|
* @param reference
|
|
@@ -138,7 +138,7 @@ var se = class {
|
|
|
138
138
|
* @param {boolean} [options.eventEffect.disableOnScroll] - Disable position updates on scroll
|
|
139
139
|
* @param {Function} [options.onUpdate] - Callback function when position updates
|
|
140
140
|
*/
|
|
141
|
-
constructor(e, t,
|
|
141
|
+
constructor(e, t, i = {}) {
|
|
142
142
|
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", () => {
|
|
143
143
|
if (!(this.reference instanceof HTMLElement))
|
|
144
144
|
throw new Error("Invalid HTMLElement for Reference Element");
|
|
@@ -153,12 +153,12 @@ var se = class {
|
|
|
153
153
|
}), p(this, "initPlacement", () => {
|
|
154
154
|
var d;
|
|
155
155
|
this.validateElements(), this.setInitialStyles();
|
|
156
|
-
const f = window.innerWidth, E = window.innerHeight, { popperHeight: g, popperWidth: w, refHeight: b, refWidth:
|
|
156
|
+
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(
|
|
157
157
|
{
|
|
158
158
|
placement: this.placement,
|
|
159
|
-
refWidth:
|
|
159
|
+
refWidth: H,
|
|
160
160
|
refTop: C,
|
|
161
|
-
refLeft:
|
|
161
|
+
refLeft: M,
|
|
162
162
|
popperWidth: w,
|
|
163
163
|
refHeight: b,
|
|
164
164
|
popperHeight: g,
|
|
@@ -181,15 +181,15 @@ var se = class {
|
|
|
181
181
|
});
|
|
182
182
|
const {
|
|
183
183
|
offsetDistance: r = 10,
|
|
184
|
-
placement: s =
|
|
184
|
+
placement: s = Y,
|
|
185
185
|
eventEffect: o = {},
|
|
186
186
|
onUpdate: l
|
|
187
|
-
} =
|
|
187
|
+
} = i;
|
|
188
188
|
if (!(e instanceof HTMLElement))
|
|
189
189
|
throw new Error("Invalid HTMLElement for Reference Element");
|
|
190
190
|
if (!(t instanceof HTMLElement))
|
|
191
191
|
throw new Error("Invalid HTMLElement for Popper");
|
|
192
|
-
if (
|
|
192
|
+
if (i.offsetDistance && typeof i.offsetDistance != "number")
|
|
193
193
|
throw new Error("OffsetDistance must be a number");
|
|
194
194
|
const { disableOnResize: m, disableOnScroll: c } = o;
|
|
195
195
|
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;
|
|
@@ -205,53 +205,53 @@ var se = class {
|
|
|
205
205
|
this.placement = e, this.offsetDistance = t || this.offsetDistance, this.initPlacement(), this.attachWindowEvent();
|
|
206
206
|
}
|
|
207
207
|
};
|
|
208
|
-
var
|
|
209
|
-
var
|
|
210
|
-
var h = (
|
|
211
|
-
var
|
|
212
|
-
var
|
|
213
|
-
for (const [t,
|
|
214
|
-
|
|
208
|
+
var ae = Object.defineProperty;
|
|
209
|
+
var le = (n, e, t) => e in n ? ae(n, e, { enumerable: true, configurable: true, writable: true, value: t }) : n[e] = t;
|
|
210
|
+
var h = (n, e, t) => le(n, typeof e != "symbol" ? e + "" : e, t);
|
|
211
|
+
var he = (n, e = document.body) => e.querySelector(n);
|
|
212
|
+
var z = (n, e) => {
|
|
213
|
+
for (const [t, i] of Object.entries(e))
|
|
214
|
+
n.setAttribute(t, i);
|
|
215
215
|
};
|
|
216
|
-
var
|
|
217
|
-
element:
|
|
216
|
+
var de = ({
|
|
217
|
+
element: n,
|
|
218
218
|
callback: e,
|
|
219
219
|
type: t,
|
|
220
|
-
keysCheck:
|
|
220
|
+
keysCheck: i
|
|
221
221
|
}) => {
|
|
222
|
-
const r = getComputedStyle(
|
|
223
|
-
if (s !== "none" && s !== "" && !
|
|
222
|
+
const r = getComputedStyle(n), s = r.transition;
|
|
223
|
+
if (s !== "none" && s !== "" && !i.includes(s)) {
|
|
224
224
|
const o = "transitionend", l = () => {
|
|
225
|
-
|
|
225
|
+
n.removeEventListener(o, l), e();
|
|
226
226
|
};
|
|
227
|
-
|
|
227
|
+
n.addEventListener(o, l, { once: true });
|
|
228
228
|
} else
|
|
229
229
|
e();
|
|
230
230
|
};
|
|
231
|
-
var
|
|
232
|
-
element:
|
|
231
|
+
var ce = ({
|
|
232
|
+
element: n,
|
|
233
233
|
callback: e
|
|
234
234
|
}) => {
|
|
235
|
-
|
|
236
|
-
element:
|
|
235
|
+
de({
|
|
236
|
+
element: n,
|
|
237
237
|
callback: e,
|
|
238
238
|
type: "transition",
|
|
239
239
|
keysCheck: ["all 0s ease 0s", "all"]
|
|
240
240
|
});
|
|
241
241
|
};
|
|
242
|
-
var
|
|
243
|
-
const
|
|
244
|
-
|
|
242
|
+
var pe = (n, e, t) => {
|
|
243
|
+
const i = new CustomEvent(e, { detail: t });
|
|
244
|
+
n.dispatchEvent(i);
|
|
245
245
|
};
|
|
246
|
-
var y = ({ state:
|
|
247
|
-
const
|
|
248
|
-
|
|
249
|
-
"data-state":
|
|
250
|
-
}),
|
|
251
|
-
"aria-expanded": `${
|
|
246
|
+
var y = ({ state: n, trigger: e, popper: t }) => {
|
|
247
|
+
const i = n === "open";
|
|
248
|
+
z(t, {
|
|
249
|
+
"data-state": n
|
|
250
|
+
}), z(e, {
|
|
251
|
+
"aria-expanded": `${i}`
|
|
252
252
|
});
|
|
253
253
|
};
|
|
254
|
-
var
|
|
254
|
+
var me = class {
|
|
255
255
|
/**
|
|
256
256
|
* Creates an instance of CreateOverlay
|
|
257
257
|
* @param {Object} params - The initialization parameters
|
|
@@ -259,8 +259,8 @@ var ce = class {
|
|
|
259
259
|
* @param {string | HTMLElement} params.content - The content element selector or HTMLElement
|
|
260
260
|
* @param {OverlayOptions} [params.options] - Configuration options for the overlay
|
|
261
261
|
*/
|
|
262
|
-
constructor({ trigger: e, content: t, options:
|
|
263
|
-
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" ?
|
|
262
|
+
constructor({ trigger: e, content: t, options: i = {} }) {
|
|
263
|
+
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) => {
|
|
264
264
|
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());
|
|
265
265
|
}), h(this, "handleKeyDown", (s) => {
|
|
266
266
|
s.preventDefault(), this.triggerStrategy !== "hover" && s.key === "Escape" && this.contentElement.getAttribute("data-state") === "open" && (this.preventFromCloseOutside || this.hide());
|
|
@@ -306,7 +306,7 @@ var ce = class {
|
|
|
306
306
|
throw new Error("Trigger element must be a valid HTML element");
|
|
307
307
|
if (!(this.contentElement instanceof HTMLElement))
|
|
308
308
|
throw new Error("Content element must be a valid HTML element");
|
|
309
|
-
this.options =
|
|
309
|
+
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(
|
|
310
310
|
this.triggerElement,
|
|
311
311
|
this.contentElement,
|
|
312
312
|
{
|
|
@@ -317,39 +317,39 @@ var ce = class {
|
|
|
317
317
|
), this.initInstance();
|
|
318
318
|
}
|
|
319
319
|
onToggleState(e) {
|
|
320
|
-
var t,
|
|
321
|
-
(
|
|
320
|
+
var t, i;
|
|
321
|
+
(i = (t = this.options).onToggle) == null || i.call(t, { isHidden: e });
|
|
322
322
|
}
|
|
323
323
|
/**
|
|
324
324
|
* Shows the overlay
|
|
325
325
|
* Positions the overlay, adds event listeners, and triggers related callbacks
|
|
326
326
|
*/
|
|
327
327
|
show() {
|
|
328
|
-
var e, t,
|
|
328
|
+
var e, t, i, r;
|
|
329
329
|
this.popper.updatePosition(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (t = (e = this.options).beforeShow) == null || t.call(e), y({
|
|
330
330
|
state: "open",
|
|
331
331
|
popper: this.contentElement,
|
|
332
332
|
trigger: this.triggerElement
|
|
333
|
-
}), this.onToggleState(false), (r = (
|
|
333
|
+
}), this.onToggleState(false), (r = (i = this.options).onShow) == null || r.call(i);
|
|
334
334
|
}
|
|
335
335
|
/**
|
|
336
336
|
* Hides the overlay
|
|
337
337
|
* Removes event listeners and triggers related callbacks
|
|
338
338
|
*/
|
|
339
339
|
hide() {
|
|
340
|
-
var e, t,
|
|
340
|
+
var e, t, i;
|
|
341
341
|
let r = false;
|
|
342
|
-
|
|
342
|
+
pe(this.contentElement, "before-hide", {
|
|
343
343
|
setExitAction: (o) => {
|
|
344
344
|
r = o;
|
|
345
345
|
}
|
|
346
346
|
});
|
|
347
|
-
const s = (
|
|
347
|
+
const s = (i = (t = (e = this.options).beforeHide) == null ? void 0 : t.call(e)) == null ? void 0 : i.cancelAction;
|
|
348
348
|
r || s || (y({
|
|
349
349
|
state: "close",
|
|
350
350
|
popper: this.contentElement,
|
|
351
351
|
trigger: this.triggerElement
|
|
352
|
-
}), 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)),
|
|
352
|
+
}), 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({
|
|
353
353
|
element: this.contentElement,
|
|
354
354
|
callback: () => {
|
|
355
355
|
var o, l;
|
|
@@ -369,12 +369,12 @@ var ce = class {
|
|
|
369
369
|
}), this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
|
|
370
370
|
}
|
|
371
371
|
};
|
|
372
|
-
var
|
|
373
|
-
var S = (
|
|
374
|
-
var
|
|
375
|
-
var
|
|
376
|
-
let
|
|
377
|
-
const r =
|
|
372
|
+
var P = (n, e = document.body) => e.querySelector(n);
|
|
373
|
+
var S = (n, e = document.body) => Array.from(e.querySelectorAll(n));
|
|
374
|
+
var ge = (n) => typeof n == "string" ? P(n) : n;
|
|
375
|
+
var fe = ({ containerElement: n, targetChildren: e = "a:not([disabled]), button:not([disabled])", direction: t }) => {
|
|
376
|
+
let i = false;
|
|
377
|
+
const r = ge(n) || document.body, s = typeof e == "string" ? S(e, r) : e, o = (l) => {
|
|
378
378
|
if (l.preventDefault(), r.focus(), s.length === 0)
|
|
379
379
|
return;
|
|
380
380
|
const m = l.key, c = document.activeElement;
|
|
@@ -408,53 +408,67 @@ var me = ({ containerElement: i, targetChildren: e = "a:not([disabled]), button:
|
|
|
408
408
|
};
|
|
409
409
|
return {
|
|
410
410
|
make: () => {
|
|
411
|
-
|
|
411
|
+
i || (document.addEventListener("keydown", o), i = true);
|
|
412
412
|
},
|
|
413
413
|
destroy: () => {
|
|
414
|
-
|
|
414
|
+
i && (document.removeEventListener("keydown", o), i = false);
|
|
415
415
|
}
|
|
416
416
|
};
|
|
417
417
|
};
|
|
418
|
-
var
|
|
419
|
-
const
|
|
420
|
-
|
|
418
|
+
var K = (n, e, t) => {
|
|
419
|
+
const i = new CustomEvent(e, { detail: t });
|
|
420
|
+
n.dispatchEvent(i);
|
|
421
421
|
};
|
|
422
|
-
function
|
|
422
|
+
function ue(n) {
|
|
423
423
|
const e = () => {
|
|
424
424
|
document.querySelector(
|
|
425
425
|
"[data-fx-component]:not([data-component-initialized])"
|
|
426
|
-
) ? requestAnimationFrame(e) :
|
|
426
|
+
) ? requestAnimationFrame(e) : n();
|
|
427
427
|
};
|
|
428
428
|
e();
|
|
429
429
|
}
|
|
430
|
-
|
|
431
|
-
|
|
430
|
+
var U = "data-fx-teleport-root";
|
|
431
|
+
var F = "data-fx-teleported";
|
|
432
|
+
var ve = {
|
|
433
|
+
append: () => {
|
|
434
|
+
},
|
|
435
|
+
remove: () => {
|
|
436
|
+
},
|
|
437
|
+
restore: () => {
|
|
438
|
+
}
|
|
439
|
+
};
|
|
440
|
+
function Ee(n, e, t = "move") {
|
|
441
|
+
var i;
|
|
442
|
+
if (!(n instanceof HTMLElement))
|
|
432
443
|
throw new Error("Source element must be an HTMLElement");
|
|
433
444
|
if (!(e instanceof HTMLElement))
|
|
434
445
|
throw new Error("Target element must be an HTMLElement");
|
|
435
446
|
if (!["move", "detachable"].includes(t))
|
|
436
447
|
throw new Error(`Invalid teleport mode: ${t}. Must be "move" or "detachable".`);
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
448
|
+
if ((i = n.parentElement) != null && i.closest(`[${U}]`))
|
|
449
|
+
return ve;
|
|
450
|
+
n.setAttribute(U, "");
|
|
451
|
+
let r = document.createComment("teleporter-placeholder");
|
|
452
|
+
const s = n.parentNode;
|
|
453
|
+
return s && s.insertBefore(r, n), t === "move" ? (n.parentNode && (e.appendChild(n), n.setAttribute(F, "")), {
|
|
440
454
|
append() {
|
|
441
|
-
|
|
455
|
+
n.parentNode !== e && (e.appendChild(n), n.setAttribute(F, ""));
|
|
442
456
|
},
|
|
443
457
|
remove() {
|
|
444
|
-
|
|
458
|
+
r != null && r.parentNode && n.parentNode && r.parentNode.insertBefore(n, r);
|
|
445
459
|
},
|
|
446
460
|
restore() {
|
|
447
|
-
|
|
461
|
+
r != null && r.parentNode && n.parentNode !== s && r.parentNode.insertBefore(n, r);
|
|
448
462
|
}
|
|
449
|
-
}) : (
|
|
463
|
+
}) : (n.parentNode && (e.appendChild(n), n.setAttribute(F, "")), {
|
|
450
464
|
append() {
|
|
451
|
-
e.contains(
|
|
465
|
+
e.contains(n) || e.appendChild(n);
|
|
452
466
|
},
|
|
453
467
|
remove() {
|
|
454
|
-
|
|
468
|
+
n.parentNode && n.remove();
|
|
455
469
|
},
|
|
456
470
|
restore() {
|
|
457
|
-
|
|
471
|
+
r != null && r.parentNode && !n.parentNode && r.parentNode.insertBefore(n, r);
|
|
458
472
|
}
|
|
459
473
|
});
|
|
460
474
|
}
|
|
@@ -462,18 +476,18 @@ var O = class {
|
|
|
462
476
|
static initGlobalRegistry() {
|
|
463
477
|
window.$flexillaInstances || (window.$flexillaInstances = {});
|
|
464
478
|
}
|
|
465
|
-
static register(e, t,
|
|
466
|
-
return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance:
|
|
479
|
+
static register(e, t, i) {
|
|
480
|
+
return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance: i }), i);
|
|
467
481
|
}
|
|
468
482
|
static getInstance(e, t) {
|
|
469
|
-
var
|
|
470
|
-
return this.initGlobalRegistry(), (r = (
|
|
483
|
+
var i, r;
|
|
484
|
+
return this.initGlobalRegistry(), (r = (i = window.$flexillaInstances[e]) == null ? void 0 : i.find(
|
|
471
485
|
(s) => s.element === t
|
|
472
486
|
)) == null ? void 0 : r.instance;
|
|
473
487
|
}
|
|
474
488
|
static removeInstance(e, t) {
|
|
475
489
|
this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
|
|
476
|
-
(
|
|
490
|
+
(i) => i.element !== t
|
|
477
491
|
));
|
|
478
492
|
}
|
|
479
493
|
static setup(e) {
|
|
@@ -483,7 +497,7 @@ var O = class {
|
|
|
483
497
|
e.setAttribute("data-component-initialized", "initialized");
|
|
484
498
|
}
|
|
485
499
|
};
|
|
486
|
-
var
|
|
500
|
+
var we = {
|
|
487
501
|
teleport: true,
|
|
488
502
|
teleportMode: "move"
|
|
489
503
|
};
|
|
@@ -516,8 +530,8 @@ var k = class k2 {
|
|
|
516
530
|
});
|
|
517
531
|
a(this, "updateObserverFor", (e2) => {
|
|
518
532
|
const t2 = S("[data-dropdown-trigger]", this.contentElement);
|
|
519
|
-
for (const
|
|
520
|
-
e2.observe(
|
|
533
|
+
for (const i2 of t2)
|
|
534
|
+
e2.observe(i2, {
|
|
521
535
|
attributes: true,
|
|
522
536
|
attributeFilter: ["aria-expanded"]
|
|
523
537
|
});
|
|
@@ -532,17 +546,17 @@ var k = class k2 {
|
|
|
532
546
|
this.subtriggerObserver = new MutationObserver((e2) => {
|
|
533
547
|
for (const t2 of e2)
|
|
534
548
|
if (t2.type === "attributes" && t2.attributeName === "aria-expanded") {
|
|
535
|
-
const
|
|
536
|
-
this.updateSubtriggerAttr(
|
|
549
|
+
const i2 = t2.target, r2 = i2.getAttribute("aria-expanded");
|
|
550
|
+
this.updateSubtriggerAttr(i2, r2 === "true" ? "add" : "remove");
|
|
537
551
|
}
|
|
538
552
|
}), this.updateObserverFor(this.subtriggerObserver);
|
|
539
553
|
});
|
|
540
554
|
a(this, "onToggle", ({ isHidden: e2 }) => {
|
|
541
|
-
var t2,
|
|
542
|
-
(
|
|
555
|
+
var t2, i2;
|
|
556
|
+
(i2 = (t2 = this.options).onToggle) == null || i2.call(t2, { isHidden: e2 });
|
|
543
557
|
});
|
|
544
558
|
a(this, "moveElOnInit", () => {
|
|
545
|
-
this.experimentalOptions.teleport &&
|
|
559
|
+
this.experimentalOptions.teleport && ue(() => {
|
|
546
560
|
this.experimentalOptions.teleportMode === "detachable" ? this.teleporter.remove() : this.teleporter.append();
|
|
547
561
|
});
|
|
548
562
|
});
|
|
@@ -560,14 +574,14 @@ var k = class k2 {
|
|
|
560
574
|
});
|
|
561
575
|
a(this, "showHideOnArrow", (e2) => {
|
|
562
576
|
e2.preventDefault();
|
|
563
|
-
const t2 = e2.key,
|
|
564
|
-
if (
|
|
577
|
+
const t2 = e2.key, i2 = document.activeElement;
|
|
578
|
+
if (i2 != null && i2.hasAttribute("data-dropdown-trigger"))
|
|
565
579
|
switch (t2) {
|
|
566
580
|
case "ArrowRight":
|
|
567
|
-
|
|
581
|
+
i2.getAttribute("aria-expanded") !== "true" && (i2.click(), this.updateSubtriggerAttr(i2, "add"));
|
|
568
582
|
break;
|
|
569
583
|
case "ArrowLeft":
|
|
570
|
-
|
|
584
|
+
i2.getAttribute("aria-expanded") === "true" && (i2.click(), this.updateSubtriggerAttr(i2, "remove"));
|
|
571
585
|
break;
|
|
572
586
|
default:
|
|
573
587
|
return;
|
|
@@ -589,13 +603,13 @@ var k = class k2 {
|
|
|
589
603
|
});
|
|
590
604
|
a(this, "onShow", () => {
|
|
591
605
|
var e2, t2;
|
|
592
|
-
|
|
606
|
+
K(this.contentElement, "dropdown-show", {
|
|
593
607
|
isHidden: false
|
|
594
608
|
}), (t2 = (e2 = this.options).onShow) == null || t2.call(e2), this.observeEl(), this.observeSubtriggers();
|
|
595
609
|
});
|
|
596
610
|
a(this, "onHide", () => {
|
|
597
611
|
var e2, t2;
|
|
598
|
-
|
|
612
|
+
K(this.contentElement, "dropdown-hide", {
|
|
599
613
|
isHidden: true
|
|
600
614
|
}), (t2 = (e2 = this.options).onHide) == null || t2.call(e2), this.moveEl(), this.triggerElement.hasAttribute("data-current-subtrigger") && this.updateSubtriggerAttr(this.triggerElement, "remove"), this.disconnectObserver();
|
|
601
615
|
});
|
|
@@ -616,22 +630,22 @@ var k = class k2 {
|
|
|
616
630
|
a(this, "cleanup", () => {
|
|
617
631
|
this.disconnectObserver(), this.OverlayInstance.cleanup(), O.removeInstance("dropdown", this.contentElement);
|
|
618
632
|
});
|
|
619
|
-
const
|
|
620
|
-
if (!(
|
|
633
|
+
const i = typeof e == "string" ? P(e) : e;
|
|
634
|
+
if (!(i instanceof HTMLElement))
|
|
621
635
|
throw new Error(
|
|
622
636
|
"Invalid dropdown content element: Must provide either a valid HTMLElement or a selector string that resolves to an existing HTMLElement"
|
|
623
637
|
);
|
|
624
|
-
if (!
|
|
638
|
+
if (!i.id)
|
|
625
639
|
throw new Error("Dropdown content element must have an 'id' attribute for trigger association");
|
|
626
|
-
this.contentElement =
|
|
640
|
+
this.contentElement = i;
|
|
627
641
|
const r = O.getInstance("dropdown", this.contentElement);
|
|
628
642
|
if (r)
|
|
629
643
|
return r;
|
|
630
644
|
O.setup(this.contentElement);
|
|
631
645
|
const s = `[data-dropdown-trigger][data-dropdown-id=${this.contentElement.id}]`;
|
|
632
|
-
if (this.triggerElement =
|
|
646
|
+
if (this.triggerElement = P(s), !(this.triggerElement instanceof HTMLElement))
|
|
633
647
|
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}"`);
|
|
634
|
-
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({},
|
|
648
|
+
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({
|
|
635
649
|
trigger: this.triggerElement,
|
|
636
650
|
content: this.contentElement,
|
|
637
651
|
options: {
|
|
@@ -654,7 +668,7 @@ var k = class k2 {
|
|
|
654
668
|
},
|
|
655
669
|
popper: this.options.popper
|
|
656
670
|
}
|
|
657
|
-
}), this.moveElOnInit(), this.items = S("a:not([disabled]), button:not([disabled])", this.contentElement), this.navigationKeys =
|
|
671
|
+
}), this.moveElOnInit(), this.items = S("a:not([disabled]), button:not([disabled])", this.contentElement), this.navigationKeys = fe({
|
|
658
672
|
containerElement: this.contentElement,
|
|
659
673
|
targetChildren: this.items,
|
|
660
674
|
direction: "up-down"
|
|
@@ -672,15 +686,15 @@ var k = class k2 {
|
|
|
672
686
|
};
|
|
673
687
|
a(k, "autoInit", (e = "[data-fx-dropdown]") => {
|
|
674
688
|
const t = S(e);
|
|
675
|
-
for (const
|
|
676
|
-
new k(
|
|
689
|
+
for (const i of t)
|
|
690
|
+
new k(i);
|
|
677
691
|
});
|
|
678
|
-
var
|
|
692
|
+
var B = k;
|
|
679
693
|
|
|
680
694
|
// src/index.js
|
|
681
695
|
function Dropdown(Alpine) {
|
|
682
696
|
Alpine.directive("dropdown", (el, {}, { cleanup }) => {
|
|
683
|
-
const dropdown_ = new
|
|
697
|
+
const dropdown_ = new B(el);
|
|
684
698
|
cleanup(() => {
|
|
685
699
|
dropdown_.cleanup();
|
|
686
700
|
});
|