@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
|
@@ -0,0 +1,536 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// builds/module.js
|
|
20
|
+
var module_exports = {};
|
|
21
|
+
__export(module_exports, {
|
|
22
|
+
default: () => module_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(module_exports);
|
|
25
|
+
|
|
26
|
+
// ../../node_modules/@flexilla/dropdown/dist/dropdown.js
|
|
27
|
+
var j = Object.defineProperty;
|
|
28
|
+
var q = (s, e, t) => e in s ? j(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
|
|
29
|
+
var l = (s, e, t) => q(s, typeof e != "symbol" ? e + "" : e, t);
|
|
30
|
+
var B = Object.defineProperty;
|
|
31
|
+
var N = (s, e, t) => e in s ? B(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
|
|
32
|
+
var h = (s, e, t) => N(s, typeof e != "symbol" ? e + "" : e, t);
|
|
33
|
+
var J = "bottom";
|
|
34
|
+
var Q = ({ reference: s, popper: e }) => {
|
|
35
|
+
if (!s || !e)
|
|
36
|
+
throw new Error("Reference or popper element is null or undefined");
|
|
37
|
+
const t = /* @__PURE__ */ new WeakMap(), n = (r) => (t.has(r) || t.set(r, r.getBoundingClientRect()), t.get(r)), o = n(e), i = n(s);
|
|
38
|
+
return {
|
|
39
|
+
popperHeight: o.height,
|
|
40
|
+
popperWidth: o.width,
|
|
41
|
+
refHeight: i.height,
|
|
42
|
+
refWidth: i.width,
|
|
43
|
+
refLeft: i.left,
|
|
44
|
+
refTop: i.top,
|
|
45
|
+
refRight: i.right
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
var V = Object.defineProperty;
|
|
49
|
+
var X = (s, e, t) => e in s ? V(s, e, { enumerable: true, configurable: true, writable: true, value: t }) : s[e] = t;
|
|
50
|
+
var p = (s, e, t) => X(s, typeof e != "symbol" ? e + "" : e, t);
|
|
51
|
+
var Y = (s, e, t, n) => {
|
|
52
|
+
const o = t, i = n - (t + e);
|
|
53
|
+
return o >= (s - e) / 2 && i >= (s - e) / 2;
|
|
54
|
+
};
|
|
55
|
+
var Z = (s, e, t, n) => (s - e) / 2 <= t && t + s / 2 + e / 2 <= n;
|
|
56
|
+
var _ = (s, e, t, n, o) => t > o - n ? e() ? window.innerHeight - o : t - o : s() ? 0 : t + n;
|
|
57
|
+
var ee = (s, e, t, n) => s <= n && t - s <= e;
|
|
58
|
+
var te = (s, e, t, n) => t <= n && -s <= e;
|
|
59
|
+
var ne = (s, e, t, n, o, i) => {
|
|
60
|
+
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;
|
|
61
|
+
return s() ? 0 : e() ? m : d;
|
|
62
|
+
};
|
|
63
|
+
var se = (s, e, t, n) => s <= t && e - s - n >= s;
|
|
64
|
+
var ie = (s, e) => s >= e;
|
|
65
|
+
var oe = ({
|
|
66
|
+
placement: s,
|
|
67
|
+
refWidth: e,
|
|
68
|
+
refTop: t,
|
|
69
|
+
refLeft: n,
|
|
70
|
+
refHeight: o,
|
|
71
|
+
popperWidth: i,
|
|
72
|
+
popperHeight: r,
|
|
73
|
+
windowHeight: a,
|
|
74
|
+
windowWidth: m,
|
|
75
|
+
offsetDistance: d
|
|
76
|
+
}) => {
|
|
77
|
+
const c = m - n - e, f = n, v = a - t - o, g = t, w = () => _(
|
|
78
|
+
() => te(t, o, r, a),
|
|
79
|
+
() => ee(t, o, r, a),
|
|
80
|
+
t,
|
|
81
|
+
o,
|
|
82
|
+
r
|
|
83
|
+
), y = () => ne(
|
|
84
|
+
() => se(n, m, i, e),
|
|
85
|
+
() => ie(n, i),
|
|
86
|
+
n,
|
|
87
|
+
i,
|
|
88
|
+
m,
|
|
89
|
+
e
|
|
90
|
+
), 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();
|
|
91
|
+
let u = 0, E = 0;
|
|
92
|
+
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;
|
|
93
|
+
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) {
|
|
94
|
+
case "bottom":
|
|
95
|
+
case "bottom-middle":
|
|
96
|
+
case "top":
|
|
97
|
+
case "top-middle":
|
|
98
|
+
u = H();
|
|
99
|
+
break;
|
|
100
|
+
case "left":
|
|
101
|
+
case "left-middle":
|
|
102
|
+
case "right":
|
|
103
|
+
case "right-middle":
|
|
104
|
+
E = C();
|
|
105
|
+
break;
|
|
106
|
+
case "bottom-start":
|
|
107
|
+
case "top-start":
|
|
108
|
+
u = T();
|
|
109
|
+
break;
|
|
110
|
+
case "bottom-end":
|
|
111
|
+
case "top-end":
|
|
112
|
+
u = O();
|
|
113
|
+
break;
|
|
114
|
+
case "left-start":
|
|
115
|
+
case "right-start":
|
|
116
|
+
E = L();
|
|
117
|
+
break;
|
|
118
|
+
case "left-end":
|
|
119
|
+
case "right-end":
|
|
120
|
+
E = G();
|
|
121
|
+
break;
|
|
122
|
+
}
|
|
123
|
+
return { x: u, y: E };
|
|
124
|
+
};
|
|
125
|
+
var re = class {
|
|
126
|
+
/**
|
|
127
|
+
* Flexilla Popper
|
|
128
|
+
* @param reference
|
|
129
|
+
* @param popper
|
|
130
|
+
* @param options
|
|
131
|
+
*/
|
|
132
|
+
/**
|
|
133
|
+
* Creates an instance of CreatePopper
|
|
134
|
+
* @param {HTMLElement} reference - The reference element to position against
|
|
135
|
+
* @param {HTMLElement} popper - The element to be positioned
|
|
136
|
+
* @param {PopperOptions} [options] - Configuration options
|
|
137
|
+
* @param {number} [options.offsetDistance] - Distance between popper and reference element
|
|
138
|
+
* @param {Placement} [options.placement] - Preferred placement of the popper
|
|
139
|
+
* @param {Object} [options.eventEffect] - Event handling configuration
|
|
140
|
+
* @param {boolean} [options.eventEffect.disableOnResize] - Disable position updates on window resize
|
|
141
|
+
* @param {boolean} [options.eventEffect.disableOnScroll] - Disable position updates on scroll
|
|
142
|
+
* @param {Function} [options.onUpdate] - Callback function when position updates
|
|
143
|
+
*/
|
|
144
|
+
constructor(e, t, n = {}) {
|
|
145
|
+
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", () => {
|
|
146
|
+
if (!(this.reference instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Reference Element");
|
|
147
|
+
if (!(this.popper instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Popper");
|
|
148
|
+
if (typeof this.offsetDistance != "number") throw new Error("OffsetDistance must be a number");
|
|
149
|
+
}), p(this, "setPopperStyleProperty", (c, f) => {
|
|
150
|
+
this.popper.style.setProperty("--fx-popper-placement-x", `${c}px`), this.popper.style.setProperty("--fx-popper-placement-y", `${f}px`);
|
|
151
|
+
}), p(this, "setInitialStyles", () => {
|
|
152
|
+
this.popper.style.setProperty("--fx-popper-placement-x", ""), this.popper.style.setProperty("--fx-popper-placement-y", "");
|
|
153
|
+
}), p(this, "initPlacement", () => {
|
|
154
|
+
var c;
|
|
155
|
+
this.validateElements(), this.setInitialStyles();
|
|
156
|
+
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(
|
|
157
|
+
{
|
|
158
|
+
placement: this.placement,
|
|
159
|
+
refWidth: H,
|
|
160
|
+
refTop: T,
|
|
161
|
+
refLeft: C,
|
|
162
|
+
popperWidth: w,
|
|
163
|
+
refHeight: y,
|
|
164
|
+
popperHeight: g,
|
|
165
|
+
windowHeight: v,
|
|
166
|
+
windowWidth: f,
|
|
167
|
+
offsetDistance: this.offsetDistance
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
this.setPopperStyleProperty(O, L), (c = this.onUpdate) == null || c.call(this, { x: O, y: L, placement: this.placement });
|
|
171
|
+
}), p(this, "removeWindowEvents", () => {
|
|
172
|
+
this.isWindowEventsRegistered && (!this.disableOnResize && window.removeEventListener("resize", this.updatePosition), !this.disableOnScroll && window.removeEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = false);
|
|
173
|
+
}), p(this, "attachWindowEvent", () => {
|
|
174
|
+
this.isWindowEventsRegistered && this.removeWindowEvents(), this.disableOnResize || window.addEventListener("resize", this.updatePosition), this.disableOnScroll || window.addEventListener("scroll", this.updatePosition), this.isWindowEventsRegistered = true;
|
|
175
|
+
}), p(this, "resetPosition", () => {
|
|
176
|
+
this.setInitialStyles();
|
|
177
|
+
}), p(this, "updatePosition", () => {
|
|
178
|
+
this.initPlacement(), this.attachWindowEvent();
|
|
179
|
+
}), p(this, "cleanupEvents", () => {
|
|
180
|
+
this.setInitialStyles(), this.removeWindowEvents();
|
|
181
|
+
});
|
|
182
|
+
const {
|
|
183
|
+
offsetDistance: o = 10,
|
|
184
|
+
placement: i = J,
|
|
185
|
+
eventEffect: r = {},
|
|
186
|
+
onUpdate: a
|
|
187
|
+
} = n;
|
|
188
|
+
if (!(e instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Reference Element");
|
|
189
|
+
if (!(t instanceof HTMLElement)) throw new Error("Invalid HTMLElement for Popper");
|
|
190
|
+
if (n.offsetDistance && typeof n.offsetDistance != "number") throw new Error("OffsetDistance must be a number");
|
|
191
|
+
const { disableOnResize: m, disableOnScroll: d } = r;
|
|
192
|
+
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;
|
|
193
|
+
}
|
|
194
|
+
/**
|
|
195
|
+
* Updates popper configuration and recalculates position
|
|
196
|
+
* @public
|
|
197
|
+
* @param {Object} options - New configuration options
|
|
198
|
+
* @param {Placement} options.placement - New placement value
|
|
199
|
+
* @param {number} [options.offsetDistance] - New offset distance
|
|
200
|
+
*/
|
|
201
|
+
setOptions({ placement: e, offsetDistance: t }) {
|
|
202
|
+
this.placement = e, this.offsetDistance = t || this.offsetDistance, this.initPlacement(), this.attachWindowEvent();
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
var ae = (s, e = document.body) => e.querySelector(s);
|
|
206
|
+
var A = (s, e) => {
|
|
207
|
+
for (const [t, n] of Object.entries(e))
|
|
208
|
+
s.setAttribute(t, n);
|
|
209
|
+
};
|
|
210
|
+
var le = ({
|
|
211
|
+
element: s,
|
|
212
|
+
callback: e,
|
|
213
|
+
type: t,
|
|
214
|
+
keysCheck: n
|
|
215
|
+
}) => {
|
|
216
|
+
const o = getComputedStyle(s), i = o.transition;
|
|
217
|
+
if (i !== "none" && i !== "" && !n.includes(i)) {
|
|
218
|
+
const r = "transitionend", a = () => {
|
|
219
|
+
s.removeEventListener(r, a), e();
|
|
220
|
+
};
|
|
221
|
+
s.addEventListener(r, a, { once: true });
|
|
222
|
+
} else
|
|
223
|
+
e();
|
|
224
|
+
};
|
|
225
|
+
var he = ({
|
|
226
|
+
element: s,
|
|
227
|
+
callback: e
|
|
228
|
+
}) => {
|
|
229
|
+
le({
|
|
230
|
+
element: s,
|
|
231
|
+
callback: e,
|
|
232
|
+
type: "transition",
|
|
233
|
+
keysCheck: ["all 0s ease 0s", "all"]
|
|
234
|
+
});
|
|
235
|
+
};
|
|
236
|
+
var b = ({ state: s, trigger: e, popper: t }) => {
|
|
237
|
+
A(t, {
|
|
238
|
+
"data-state": s
|
|
239
|
+
}), A(e, {
|
|
240
|
+
"aria-expanded": `${s}`
|
|
241
|
+
});
|
|
242
|
+
};
|
|
243
|
+
var ce = class {
|
|
244
|
+
/**
|
|
245
|
+
* Creates an instance of CreateOverlay
|
|
246
|
+
* @param {Object} params - The initialization parameters
|
|
247
|
+
* @param {string | HTMLElement} params.trigger - The trigger element selector or HTMLElement
|
|
248
|
+
* @param {string | HTMLElement} params.content - The content element selector or HTMLElement
|
|
249
|
+
* @param {OverlayOptions} [params.options] - Configuration options for the overlay
|
|
250
|
+
* @throws {Error} When trigger or content elements are invalid
|
|
251
|
+
*/
|
|
252
|
+
constructor({ trigger: e, content: t, options: n = {} }) {
|
|
253
|
+
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) => {
|
|
254
|
+
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());
|
|
255
|
+
}), h(this, "handleKeyDown", (i) => {
|
|
256
|
+
i.preventDefault(), this.triggerStrategy !== "hover" && i.key === "Escape" && this.contentElement.getAttribute("data-state") === "open" && (this.preventFromCloseOutside || this.hide());
|
|
257
|
+
}), h(this, "toggleStateOnClick", () => {
|
|
258
|
+
(this.contentElement.dataset.state || "close") === "close" ? (this.show(), this.triggerStrategy === "hover" && this.addEventOnMouseEnter()) : this.hide();
|
|
259
|
+
}), h(this, "hideOnMouseLeaseTrigger", () => {
|
|
260
|
+
setTimeout(() => {
|
|
261
|
+
this.contentElement.matches(":hover") || this.hide();
|
|
262
|
+
}, 150);
|
|
263
|
+
}), h(this, "hideOnMouseLeave", () => {
|
|
264
|
+
setTimeout(() => {
|
|
265
|
+
this.triggerElement.matches(":hover") || this.hide();
|
|
266
|
+
}, 150);
|
|
267
|
+
}), h(this, "addEventOnMouseEnter", () => {
|
|
268
|
+
this.triggerElement.addEventListener("mouseleave", this.hideOnMouseLeaseTrigger), this.contentElement.addEventListener("mouseleave", this.hideOnMouseLeave);
|
|
269
|
+
}), h(this, "showOnMouseEnter", () => {
|
|
270
|
+
this.show(), this.addEventOnMouseEnter();
|
|
271
|
+
}), h(this, "setShowOptions", ({ placement: i, offsetDistance: r }) => {
|
|
272
|
+
var a, m, d, c;
|
|
273
|
+
this.popper.setOptions({
|
|
274
|
+
placement: i,
|
|
275
|
+
offsetDistance: r
|
|
276
|
+
}), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (m = (a = this.options).beforeShow) == null || m.call(a), b({
|
|
277
|
+
state: "open",
|
|
278
|
+
popper: this.contentElement,
|
|
279
|
+
trigger: this.triggerElement
|
|
280
|
+
}), this.onToggleState(false), (c = (d = this.options).onShow) == null || c.call(d);
|
|
281
|
+
}), h(this, "setPopperOptions", ({ placement: i, offsetDistance: r }) => {
|
|
282
|
+
this.popper.setOptions({
|
|
283
|
+
placement: i,
|
|
284
|
+
offsetDistance: r
|
|
285
|
+
});
|
|
286
|
+
}), h(this, "cleanup", () => {
|
|
287
|
+
this.triggerElement.removeEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.removeEventListener("mouseenter", this.showOnMouseEnter);
|
|
288
|
+
});
|
|
289
|
+
var o;
|
|
290
|
+
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");
|
|
291
|
+
if (!(this.contentElement instanceof HTMLElement)) throw new Error("Content element must be a valid HTML element");
|
|
292
|
+
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(
|
|
293
|
+
this.triggerElement,
|
|
294
|
+
this.contentElement,
|
|
295
|
+
{
|
|
296
|
+
placement: this.placement,
|
|
297
|
+
offsetDistance: this.offsetDistance,
|
|
298
|
+
eventEffect: this.eventEffect
|
|
299
|
+
}
|
|
300
|
+
), this.initInstance();
|
|
301
|
+
}
|
|
302
|
+
onToggleState(e) {
|
|
303
|
+
var t, n;
|
|
304
|
+
(n = (t = this.options).onToggle) == null || n.call(t, { isHidden: e });
|
|
305
|
+
}
|
|
306
|
+
/**
|
|
307
|
+
* Shows the overlay
|
|
308
|
+
* Positions the overlay, adds event listeners, and triggers related callbacks
|
|
309
|
+
*/
|
|
310
|
+
show() {
|
|
311
|
+
var e, t, n, o;
|
|
312
|
+
this.popper.updatePosition(), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("click", this.handleDocumentClick), (t = (e = this.options).beforeShow) == null || t.call(e), b({
|
|
313
|
+
state: "open",
|
|
314
|
+
popper: this.contentElement,
|
|
315
|
+
trigger: this.triggerElement
|
|
316
|
+
}), this.onToggleState(false), (o = (n = this.options).onShow) == null || o.call(n);
|
|
317
|
+
}
|
|
318
|
+
/**
|
|
319
|
+
* Hides the overlay
|
|
320
|
+
* Removes event listeners and triggers related callbacks
|
|
321
|
+
*/
|
|
322
|
+
hide() {
|
|
323
|
+
var e, t;
|
|
324
|
+
(t = (e = this.options).beforeHide) == null || t.call(e), b({
|
|
325
|
+
state: "close",
|
|
326
|
+
popper: this.contentElement,
|
|
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)), he({
|
|
329
|
+
element: this.contentElement,
|
|
330
|
+
callback: () => {
|
|
331
|
+
var n, o;
|
|
332
|
+
this.onToggleState(true), this.popper.cleanupEvents(), (o = (n = this.options).onHide) == null || o.call(n);
|
|
333
|
+
}
|
|
334
|
+
});
|
|
335
|
+
}
|
|
336
|
+
initInstance() {
|
|
337
|
+
b({
|
|
338
|
+
state: this.defaultState,
|
|
339
|
+
popper: this.contentElement,
|
|
340
|
+
trigger: this.triggerElement
|
|
341
|
+
}), this.defaultState === "open" ? this.show() : b({
|
|
342
|
+
state: "close",
|
|
343
|
+
popper: this.contentElement,
|
|
344
|
+
trigger: this.triggerElement
|
|
345
|
+
}), this.triggerElement.addEventListener("click", this.toggleStateOnClick), this.triggerStrategy === "hover" && this.triggerElement.addEventListener("mouseenter", this.showOnMouseEnter);
|
|
346
|
+
}
|
|
347
|
+
};
|
|
348
|
+
var W = (s, e = document.body) => e.querySelector(s);
|
|
349
|
+
var U = (s, e = document.body) => Array.from(e.querySelectorAll(s));
|
|
350
|
+
var de = (s) => typeof s == "string" ? W(s) : s;
|
|
351
|
+
var pe = ({ containerElement: s, targetChildren: e = "a:not([disabled]), button:not([disabled])", direction: t }) => {
|
|
352
|
+
let n = false;
|
|
353
|
+
const o = de(s) || document.body, i = typeof e == "string" ? U(e, o) : e, r = (a) => {
|
|
354
|
+
if (a.preventDefault(), o.focus(), i.length === 0) return;
|
|
355
|
+
const m = a.key, d = document.activeElement;
|
|
356
|
+
let c = i.findIndex((g) => g === d);
|
|
357
|
+
if (c === -1) {
|
|
358
|
+
m === "ArrowUp" || m === "ArrowLeft" ? i[i.length - 1].focus() : i[0].focus();
|
|
359
|
+
return;
|
|
360
|
+
}
|
|
361
|
+
const f = (g) => g > 0 ? g - 1 : i.length - 1, v = (g) => g < i.length - 1 ? g + 1 : 0;
|
|
362
|
+
switch (m) {
|
|
363
|
+
case "ArrowDown":
|
|
364
|
+
a.preventDefault(), c = v(c);
|
|
365
|
+
break;
|
|
366
|
+
case "ArrowRight":
|
|
367
|
+
break;
|
|
368
|
+
case "ArrowUp":
|
|
369
|
+
a.preventDefault(), c = f(c);
|
|
370
|
+
break;
|
|
371
|
+
case "ArrowLeft":
|
|
372
|
+
break;
|
|
373
|
+
case "Home":
|
|
374
|
+
a.preventDefault(), c = 0;
|
|
375
|
+
break;
|
|
376
|
+
case "End":
|
|
377
|
+
a.preventDefault(), c = i.length - 1;
|
|
378
|
+
break;
|
|
379
|
+
default:
|
|
380
|
+
return;
|
|
381
|
+
}
|
|
382
|
+
i[c] !== d && i[c].focus();
|
|
383
|
+
};
|
|
384
|
+
return {
|
|
385
|
+
make: () => {
|
|
386
|
+
n || (document.addEventListener("keydown", r), n = true);
|
|
387
|
+
},
|
|
388
|
+
destroy: () => {
|
|
389
|
+
n && (document.removeEventListener("keydown", r), n = false);
|
|
390
|
+
}
|
|
391
|
+
};
|
|
392
|
+
};
|
|
393
|
+
var K = (s, e, t) => {
|
|
394
|
+
const n = new CustomEvent(e, { detail: t });
|
|
395
|
+
s.dispatchEvent(n);
|
|
396
|
+
};
|
|
397
|
+
var x = class {
|
|
398
|
+
static initGlobalRegistry() {
|
|
399
|
+
window.$flexillaInstances || (window.$flexillaInstances = {});
|
|
400
|
+
}
|
|
401
|
+
static register(e, t, n) {
|
|
402
|
+
return this.initGlobalRegistry(), window.$flexillaInstances[e] || (window.$flexillaInstances[e] = []), this.getInstance(e, t) || (window.$flexillaInstances[e].push({ element: t, instance: n }), n);
|
|
403
|
+
}
|
|
404
|
+
static getInstance(e, t) {
|
|
405
|
+
var n, o;
|
|
406
|
+
return this.initGlobalRegistry(), (o = (n = window.$flexillaInstances[e]) == null ? void 0 : n.find(
|
|
407
|
+
(i) => i.element === t
|
|
408
|
+
)) == null ? void 0 : o.instance;
|
|
409
|
+
}
|
|
410
|
+
static removeInstance(e, t) {
|
|
411
|
+
this.initGlobalRegistry(), window.$flexillaInstances[e] && (window.$flexillaInstances[e] = window.$flexillaInstances[e].filter(
|
|
412
|
+
(n) => n.element !== t
|
|
413
|
+
));
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
var S = class S2 {
|
|
417
|
+
/**
|
|
418
|
+
* Creates a new Dropdown instance
|
|
419
|
+
* @param dropdown - The dropdown content element or selector
|
|
420
|
+
* @param options - Configuration options for the dropdown
|
|
421
|
+
* @throws {Error} If provided elements are not valid HTMLElements
|
|
422
|
+
*/
|
|
423
|
+
constructor(e, t = {}) {
|
|
424
|
+
l(this, "triggerElement");
|
|
425
|
+
l(this, "contentElement");
|
|
426
|
+
l(this, "options");
|
|
427
|
+
l(this, "OverlayInstance");
|
|
428
|
+
l(this, "navigationKeys");
|
|
429
|
+
l(this, "triggerStrategy");
|
|
430
|
+
l(this, "placement");
|
|
431
|
+
l(this, "offsetDistance");
|
|
432
|
+
l(this, "preventFromCloseOutside");
|
|
433
|
+
l(this, "preventFromCloseInside");
|
|
434
|
+
l(this, "defaultState");
|
|
435
|
+
l(this, "onToggle", ({ isHidden: e2 }) => {
|
|
436
|
+
var t2, n2;
|
|
437
|
+
(n2 = (t2 = this.options).onToggle) == null || n2.call(t2, { isHidden: e2 });
|
|
438
|
+
});
|
|
439
|
+
l(this, "beforeShow", () => {
|
|
440
|
+
this.contentElement.focus(), this.navigationKeys.make();
|
|
441
|
+
});
|
|
442
|
+
l(this, "beforeHide", () => {
|
|
443
|
+
this.contentElement.blur(), this.navigationKeys.destroy();
|
|
444
|
+
});
|
|
445
|
+
l(this, "onShow", () => {
|
|
446
|
+
var e2, t2;
|
|
447
|
+
K(this.contentElement, "dropdown-show", {
|
|
448
|
+
isHidden: false
|
|
449
|
+
}), (t2 = (e2 = this.options).onShow) == null || t2.call(e2);
|
|
450
|
+
});
|
|
451
|
+
l(this, "onHide", () => {
|
|
452
|
+
var e2, t2;
|
|
453
|
+
K(this.contentElement, "dropdown-hide", {
|
|
454
|
+
isHidden: true
|
|
455
|
+
}), (t2 = (e2 = this.options).onHide) == null || t2.call(e2);
|
|
456
|
+
});
|
|
457
|
+
l(this, "show", () => {
|
|
458
|
+
this.OverlayInstance.show();
|
|
459
|
+
});
|
|
460
|
+
l(this, "hide", () => {
|
|
461
|
+
this.OverlayInstance.hide();
|
|
462
|
+
});
|
|
463
|
+
l(this, "setShowOptions", ({ placement: e2, offsetDistance: t2 }) => {
|
|
464
|
+
this.OverlayInstance.setShowOptions({ placement: e2, offsetDistance: t2 });
|
|
465
|
+
});
|
|
466
|
+
l(this, "cleanup", () => {
|
|
467
|
+
this.OverlayInstance.cleanup(), x.removeInstance("dropdown", this.contentElement);
|
|
468
|
+
});
|
|
469
|
+
const n = typeof e == "string" ? W(e) : e;
|
|
470
|
+
if (!(n instanceof HTMLElement))
|
|
471
|
+
throw new Error(
|
|
472
|
+
"Invalid dropdown content element: Must provide either a valid HTMLElement or a selector string that resolves to an existing HTMLElement"
|
|
473
|
+
);
|
|
474
|
+
if (!n.id)
|
|
475
|
+
throw new Error("Dropdown content element must have an 'id' attribute for trigger association");
|
|
476
|
+
this.contentElement = n;
|
|
477
|
+
const o = x.getInstance("dropdown", this.contentElement);
|
|
478
|
+
if (o)
|
|
479
|
+
return o;
|
|
480
|
+
const i = `[data-dropdown-trigger][data-dropdown-id=${this.contentElement.id}]`;
|
|
481
|
+
if (this.triggerElement = W(i), !(this.triggerElement instanceof HTMLElement))
|
|
482
|
+
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}"`);
|
|
483
|
+
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({
|
|
484
|
+
trigger: this.triggerElement,
|
|
485
|
+
content: this.contentElement,
|
|
486
|
+
options: {
|
|
487
|
+
placement: this.placement,
|
|
488
|
+
offsetDistance: this.offsetDistance,
|
|
489
|
+
triggerStrategy: this.triggerStrategy,
|
|
490
|
+
preventFromCloseOutside: this.preventFromCloseOutside,
|
|
491
|
+
preventCloseFromInside: this.preventFromCloseInside,
|
|
492
|
+
defaultState: this.defaultState,
|
|
493
|
+
beforeShow: this.beforeShow,
|
|
494
|
+
beforeHide: this.beforeHide,
|
|
495
|
+
onShow: this.onShow,
|
|
496
|
+
onHide: this.onHide,
|
|
497
|
+
onToggle: ({ isHidden: r }) => {
|
|
498
|
+
this.onToggle({ isHidden: r });
|
|
499
|
+
},
|
|
500
|
+
popper: this.options.popper
|
|
501
|
+
}
|
|
502
|
+
}), this.navigationKeys = pe({
|
|
503
|
+
containerElement: this.contentElement,
|
|
504
|
+
targetChildren: "a:not([disabled]), button:not([disabled])",
|
|
505
|
+
direction: "up-down"
|
|
506
|
+
}), x.register("dropdown", this.contentElement, this);
|
|
507
|
+
}
|
|
508
|
+
/**
|
|
509
|
+
* Initializes a single dropdown instance
|
|
510
|
+
* @param dropdown - The dropdown element or selector
|
|
511
|
+
* @param options - Configuration options for the dropdown
|
|
512
|
+
* @returns A new Dropdown instance
|
|
513
|
+
*/
|
|
514
|
+
static init(e, t = {}) {
|
|
515
|
+
new S2(e, t);
|
|
516
|
+
}
|
|
517
|
+
};
|
|
518
|
+
l(S, "autoInit", (e = "[data-fx-dropdown]") => {
|
|
519
|
+
const t = U(e);
|
|
520
|
+
for (const n of t) new S(n);
|
|
521
|
+
});
|
|
522
|
+
var z = S;
|
|
523
|
+
|
|
524
|
+
// src/index.js
|
|
525
|
+
function Dropdown(Alpine) {
|
|
526
|
+
Alpine.directive("dropdown", (el, {}, { cleanup }) => {
|
|
527
|
+
const dropdown_ = new z(el);
|
|
528
|
+
cleanup(() => {
|
|
529
|
+
dropdown_.cleanup();
|
|
530
|
+
});
|
|
531
|
+
});
|
|
532
|
+
}
|
|
533
|
+
var src_default = Dropdown;
|
|
534
|
+
|
|
535
|
+
// builds/module.js
|
|
536
|
+
var module_default = src_default;
|