@floegence/floe-webapp-core 0.52.11 → 0.52.13
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/components/ui/FloatingWindow.d.ts +11 -0
- package/dist/components/ui/FloatingWindow.js +324 -277
- package/dist/components/ui/SurfaceFloatingPanel.d.ts +4 -0
- package/dist/components/ui/SurfaceFloatingPanel.js +169 -80
- package/dist/components/ui/dialogSurfaceScope.js +74 -71
- package/dist/components/ui/pointerSession.d.ts +4 -0
- package/dist/components/ui/pointerSession.js +23 -15
- package/dist/components/ui/surfaceFloatingPanelGeometry.d.ts +1 -1
- package/dist/components/ui/surfaceFloatingPanelGeometry.js +36 -36
- package/package.json +1 -1
|
@@ -1,59 +1,81 @@
|
|
|
1
|
-
import { createComponent as
|
|
2
|
-
import {
|
|
3
|
-
import { cn as
|
|
4
|
-
import { useLayout as
|
|
5
|
-
import { Button as
|
|
6
|
-
import { Restore as
|
|
7
|
-
import { startHotInteraction as
|
|
8
|
-
import { startPointerSession as
|
|
9
|
-
import { resolveFloatingWindowViewport as
|
|
10
|
-
import { createFloatingPresence as
|
|
11
|
-
import { LOCAL_INTERACTION_SURFACE_ATTR as
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { createComponent as l, Portal as Ve, spread as pe, mergeProps as $e, memo as J, insert as u, effect as f, setAttribute as Ge, addEventListener as b, className as w, template as s, use as _e, delegateEvents as Je } from "solid-js/web";
|
|
2
|
+
import { createSignal as g, createUniqueId as Ze, onCleanup as C, onMount as Ke, createEffect as R, Show as z, batch as Se, untrack as Qe } from "solid-js";
|
|
3
|
+
import { cn as B } from "../../utils/cn.js";
|
|
4
|
+
import { useLayout as et } from "../../context/LayoutContext.js";
|
|
5
|
+
import { Button as Ie } from "./Button.js";
|
|
6
|
+
import { Restore as tt, Maximize as nt, X as it } from "../icons/index.js";
|
|
7
|
+
import { startHotInteraction as ot } from "../../utils/hotInteraction.js";
|
|
8
|
+
import { startPointerSession as rt } from "./pointerSession.js";
|
|
9
|
+
import { resolveFloatingWindowViewport as Z, normalizeFloatingWindowRect as lt, resolveFloatingWindowRect as at } from "./floatingWindowGeometry.js";
|
|
10
|
+
import { createFloatingPresence as st } from "./floatingPresence.js";
|
|
11
|
+
import { LOCAL_INTERACTION_SURFACE_ATTR as Pe } from "./localInteractionSurface.js";
|
|
12
|
+
import { readSurfaceSafeArea as dt, resolveFloatingBoundary as ct } from "./surfaceFloatingBoundary.js";
|
|
13
|
+
import { SURFACE_PORTAL_LAYER_ATTR as ut, resolveSurfacePortalHost as ft, SURFACE_FLOATING_LAYER_ATTR as ht } from "./dialogSurfaceScope.js";
|
|
14
|
+
var wt = /* @__PURE__ */ s("<span hidden>"), gt = /* @__PURE__ */ s('<h2 class="text-xs leading-none font-medium truncate select-none">'), mt = /* @__PURE__ */ s('<div data-floe-floating-window-header-actions=true class="flex shrink-0 cursor-default items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), vt = /* @__PURE__ */ s('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-border">'), yt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), xt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), bt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), zt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), pt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), $t = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), _t = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), St = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), It = /* @__PURE__ */ s('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0 px-2"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="flex-1 overflow-auto p-3">');
|
|
15
|
+
function Dt(n) {
|
|
16
|
+
const K = () => n.resizable ?? !0, Q = () => n.draggable ?? !0, ee = () => n.minSize ?? {
|
|
16
17
|
width: 200,
|
|
17
18
|
height: 150
|
|
18
|
-
},
|
|
19
|
+
}, te = () => n.maxSize ?? {
|
|
19
20
|
width: 1 / 0,
|
|
20
21
|
height: 1 / 0
|
|
21
|
-
}
|
|
22
|
+
};
|
|
23
|
+
let D;
|
|
24
|
+
const Re = dt(), [F, ne] = g({}), [Ae, ie] = g(1 / 0), [H, oe] = g(!0), h = () => !!(n.compactBelow && Ae() < n.compactBelow), _ = () => ({
|
|
25
|
+
top: (F().top ?? 0) + (n.viewportInsets?.top ?? 0),
|
|
26
|
+
right: (F().right ?? 0) + (n.viewportInsets?.right ?? 0),
|
|
27
|
+
bottom: (F().bottom ?? 0) + (n.viewportInsets?.bottom ?? 0),
|
|
28
|
+
left: (F().left ?? 0) + (n.viewportInsets?.left ?? 0)
|
|
29
|
+
}), Ee = () => n.zIndex ?? 100, Ce = Ze(), Fe = et(), L = () => Fe.isMobile(), re = 16, le = () => `floating-window-${Ce}-title`, [N, Le] = g(n.defaultPosition ?? {
|
|
22
30
|
x: 0,
|
|
23
31
|
y: 0
|
|
24
|
-
}), [
|
|
32
|
+
}), [Y, ke] = g(n.defaultSize ?? {
|
|
25
33
|
width: 400,
|
|
26
34
|
height: 300
|
|
27
|
-
}), [
|
|
28
|
-
open: () =>
|
|
35
|
+
}), [c, Me] = g(!1), [k, ae] = g(!1), [M, se] = g(!1), [Te, q] = g(!1), S = st({
|
|
36
|
+
open: () => n.open,
|
|
29
37
|
exitDurationMs: 120
|
|
30
|
-
})
|
|
31
|
-
let
|
|
38
|
+
});
|
|
39
|
+
let de = {
|
|
32
40
|
x: 0,
|
|
33
41
|
y: 0
|
|
34
|
-
},
|
|
42
|
+
}, ce = {
|
|
35
43
|
x: 0,
|
|
36
44
|
y: 0,
|
|
37
45
|
width: 0,
|
|
38
46
|
height: 0
|
|
39
|
-
},
|
|
47
|
+
}, ue = {
|
|
40
48
|
x: 0,
|
|
41
49
|
y: 0
|
|
42
|
-
},
|
|
50
|
+
}, fe = {
|
|
43
51
|
x: 0,
|
|
44
52
|
y: 0,
|
|
45
53
|
width: 0,
|
|
46
54
|
height: 0
|
|
47
|
-
},
|
|
55
|
+
}, he = "se", a, d = null, T, m = null, A = {
|
|
48
56
|
x: 0,
|
|
49
57
|
y: 0
|
|
50
|
-
},
|
|
51
|
-
x:
|
|
52
|
-
y:
|
|
53
|
-
width:
|
|
54
|
-
height:
|
|
55
|
-
}
|
|
56
|
-
|
|
58
|
+
}, I = null, W = null, X = !1, p = {
|
|
59
|
+
x: n.defaultPosition?.x ?? 0,
|
|
60
|
+
y: n.defaultPosition?.y ?? 0,
|
|
61
|
+
width: n.defaultSize?.width ?? 400,
|
|
62
|
+
height: n.defaultSize?.height ?? 300
|
|
63
|
+
}, v = {
|
|
64
|
+
...p
|
|
65
|
+
}, $;
|
|
66
|
+
const we = (e) => {
|
|
67
|
+
v = {
|
|
68
|
+
...e
|
|
69
|
+
};
|
|
70
|
+
const t = Z({
|
|
71
|
+
width: window.innerWidth,
|
|
72
|
+
height: window.innerHeight
|
|
73
|
+
}, _());
|
|
74
|
+
$ = {
|
|
75
|
+
x: t.width > e.width ? (e.x - t.x) / (t.width - e.width) : $?.x ?? 0.5,
|
|
76
|
+
y: t.height > e.height ? (e.y - t.y) / (t.height - e.height) : $?.y ?? 0.5
|
|
77
|
+
};
|
|
78
|
+
}, We = {
|
|
57
79
|
n: "ns-resize",
|
|
58
80
|
s: "ns-resize",
|
|
59
81
|
e: "ew-resize",
|
|
@@ -62,255 +84,261 @@ function St(i) {
|
|
|
62
84
|
nw: "nwse-resize",
|
|
63
85
|
se: "nwse-resize",
|
|
64
86
|
sw: "nesw-resize"
|
|
65
|
-
},
|
|
87
|
+
}, U = (e, t) => {
|
|
66
88
|
if (!e) {
|
|
67
|
-
|
|
89
|
+
W?.(), W = null;
|
|
68
90
|
return;
|
|
69
91
|
}
|
|
70
|
-
|
|
71
|
-
kind:
|
|
92
|
+
W?.(), W = ot({
|
|
93
|
+
kind: m === "resize" ? "resize" : "drag",
|
|
72
94
|
cursor: t,
|
|
73
95
|
lockUserSelect: !0
|
|
74
96
|
});
|
|
75
|
-
},
|
|
76
|
-
|
|
77
|
-
},
|
|
78
|
-
const e =
|
|
97
|
+
}, ge = (e) => {
|
|
98
|
+
p = e, a && (a.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, a.style.width = `${e.width}px`, a.style.height = `${e.height}px`);
|
|
99
|
+
}, Oe = () => {
|
|
100
|
+
const e = N(), t = Y();
|
|
79
101
|
return {
|
|
80
102
|
x: e.x,
|
|
81
103
|
y: e.y,
|
|
82
104
|
width: t.width,
|
|
83
105
|
height: t.height
|
|
84
106
|
};
|
|
85
|
-
},
|
|
86
|
-
|
|
107
|
+
}, j = (e) => {
|
|
108
|
+
p = e, Le((t) => t.x === e.x && t.y === e.y ? t : {
|
|
87
109
|
x: e.x,
|
|
88
110
|
y: e.y
|
|
89
|
-
}),
|
|
111
|
+
}), ke((t) => t.width === e.width && t.height === e.height ? t : {
|
|
90
112
|
width: e.width,
|
|
91
113
|
height: e.height
|
|
92
114
|
});
|
|
93
|
-
},
|
|
115
|
+
}, Be = () => {
|
|
94
116
|
try {
|
|
95
|
-
|
|
117
|
+
a?.focus({
|
|
96
118
|
preventScroll: !0
|
|
97
119
|
});
|
|
98
120
|
} catch {
|
|
99
121
|
}
|
|
100
|
-
},
|
|
122
|
+
}, De = (e) => {
|
|
101
123
|
const t = e instanceof Element ? e : null;
|
|
102
124
|
return t ? t.closest('button, input, select, textarea, a, [role="button"], [tabindex]:not([tabindex="-1"])') === null : !0;
|
|
103
|
-
},
|
|
104
|
-
const
|
|
105
|
-
return !!(
|
|
106
|
-
},
|
|
107
|
-
if (!
|
|
108
|
-
const e =
|
|
125
|
+
}, V = (e) => !!a && e instanceof Node && a.contains(e), He = (e) => {
|
|
126
|
+
const o = (e instanceof Element ? e : null)?.closest('[role="menu"]')?.closest(`[${ht}="true"]`);
|
|
127
|
+
return !!(o && a?.contains(o));
|
|
128
|
+
}, Ne = () => {
|
|
129
|
+
if (!a) return null;
|
|
130
|
+
const e = a.getBoundingClientRect();
|
|
109
131
|
return {
|
|
110
132
|
x: e.left,
|
|
111
133
|
y: e.top,
|
|
112
134
|
width: e.width,
|
|
113
135
|
height: e.height
|
|
114
136
|
};
|
|
115
|
-
},
|
|
116
|
-
|
|
117
|
-
mode:
|
|
118
|
-
pointer:
|
|
119
|
-
dragStartPos:
|
|
120
|
-
dragStartRect:
|
|
121
|
-
resizeStartPos:
|
|
122
|
-
resizeStartRect:
|
|
123
|
-
resizeHandle:
|
|
124
|
-
minSize:
|
|
125
|
-
maxSize:
|
|
137
|
+
}, me = () => {
|
|
138
|
+
n.open && (d === null || m === null || typeof window > "u" || ge(at({
|
|
139
|
+
mode: m,
|
|
140
|
+
pointer: A,
|
|
141
|
+
dragStartPos: de,
|
|
142
|
+
dragStartRect: ce,
|
|
143
|
+
resizeStartPos: ue,
|
|
144
|
+
resizeStartRect: fe,
|
|
145
|
+
resizeHandle: he,
|
|
146
|
+
minSize: ee(),
|
|
147
|
+
maxSize: te(),
|
|
126
148
|
viewport: {
|
|
127
149
|
width: window.innerWidth,
|
|
128
150
|
height: window.innerHeight
|
|
129
151
|
},
|
|
130
|
-
viewportInsets:
|
|
131
|
-
mobile:
|
|
132
|
-
mobilePadding:
|
|
152
|
+
viewportInsets: _(),
|
|
153
|
+
mobile: L(),
|
|
154
|
+
mobilePadding: re
|
|
133
155
|
})));
|
|
134
|
-
},
|
|
156
|
+
}, E = (e) => {
|
|
135
157
|
if (typeof window > "u") return;
|
|
136
158
|
const t = {
|
|
137
159
|
width: window.innerWidth,
|
|
138
160
|
height: window.innerHeight
|
|
139
161
|
};
|
|
140
|
-
if (
|
|
141
|
-
|
|
162
|
+
if (c() || h()) {
|
|
163
|
+
j(Z(t, _()));
|
|
142
164
|
return;
|
|
143
165
|
}
|
|
144
|
-
|
|
145
|
-
rect:
|
|
146
|
-
minSize:
|
|
147
|
-
maxSize:
|
|
166
|
+
let r = lt({
|
|
167
|
+
rect: v,
|
|
168
|
+
minSize: ee(),
|
|
169
|
+
maxSize: te(),
|
|
148
170
|
viewport: t,
|
|
149
|
-
viewportInsets:
|
|
150
|
-
mobile:
|
|
151
|
-
mobilePadding:
|
|
171
|
+
viewportInsets: _(),
|
|
172
|
+
mobile: n.boundary === void 0 && L(),
|
|
173
|
+
mobilePadding: re,
|
|
152
174
|
center: e?.center ?? !1
|
|
153
|
-
})
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
175
|
+
});
|
|
176
|
+
if (n.boundary !== void 0 && $ && !e?.center) {
|
|
177
|
+
const o = Z(t, _());
|
|
178
|
+
r = {
|
|
179
|
+
...r,
|
|
180
|
+
x: o.x + $.x * Math.max(0, o.width - r.width),
|
|
181
|
+
y: o.y + $.y * Math.max(0, o.height - r.height)
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
if (j(r), !$) {
|
|
185
|
+
const o = {
|
|
186
|
+
width: v.width,
|
|
187
|
+
height: v.height
|
|
188
|
+
};
|
|
189
|
+
we(r), Object.assign(v, o);
|
|
190
|
+
}
|
|
191
|
+
}, ve = (e) => {
|
|
192
|
+
I !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(I), I = null), e && me();
|
|
193
|
+
const t = e ? Ne() ?? p : null;
|
|
194
|
+
Se(() => {
|
|
195
|
+
if (t) {
|
|
196
|
+
j(t);
|
|
197
|
+
const r = {
|
|
198
|
+
width: v.width,
|
|
199
|
+
height: v.height
|
|
200
|
+
};
|
|
201
|
+
we(t), m === "drag" && Object.assign(v, r);
|
|
202
|
+
}
|
|
203
|
+
d = null, m = null, ae(!1), se(!1);
|
|
204
|
+
}), U(!1, ""), T = void 0;
|
|
205
|
+
}, G = (e = !1) => {
|
|
206
|
+
T ? T.stop({
|
|
162
207
|
commit: e
|
|
163
|
-
}) :
|
|
208
|
+
}) : ve(e);
|
|
164
209
|
};
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
210
|
+
C(() => G(!1)), Ke(() => {
|
|
211
|
+
let e = 0;
|
|
212
|
+
const t = () => {
|
|
213
|
+
if (n.boundary !== void 0) {
|
|
214
|
+
const o = ct(ft({
|
|
215
|
+
owner: D
|
|
216
|
+
}), n.boundary, Re), P = o ? {
|
|
217
|
+
top: o.top,
|
|
218
|
+
left: o.left,
|
|
219
|
+
right: window.innerWidth - o.right,
|
|
220
|
+
bottom: window.innerHeight - o.bottom
|
|
221
|
+
} : {};
|
|
222
|
+
Se(() => {
|
|
223
|
+
oe(!!(o && o.width > 16 && o.height > 16)), ie(o?.width ?? 0), ne((O) => JSON.stringify(O) === JSON.stringify(P) ? O : P);
|
|
224
|
+
});
|
|
225
|
+
} else
|
|
226
|
+
oe(!0), ie(window.innerWidth), ne((o) => Object.keys(o).length ? {} : o);
|
|
227
|
+
e = requestAnimationFrame(t);
|
|
228
|
+
};
|
|
229
|
+
t(), C(() => cancelAnimationFrame(e)), n.open || E({
|
|
230
|
+
center: !n.defaultPosition
|
|
168
231
|
});
|
|
169
|
-
const
|
|
170
|
-
|
|
232
|
+
const r = () => {
|
|
233
|
+
d === null && E({
|
|
171
234
|
center: !1
|
|
172
235
|
});
|
|
173
236
|
};
|
|
174
|
-
window.addEventListener("resize",
|
|
175
|
-
}),
|
|
176
|
-
if (!
|
|
177
|
-
|
|
178
|
-
const e = !
|
|
179
|
-
|
|
237
|
+
window.addEventListener("resize", r), C(() => window.removeEventListener("resize", r));
|
|
238
|
+
}), R(() => {
|
|
239
|
+
if (!n.open) return;
|
|
240
|
+
L();
|
|
241
|
+
const e = !X && !n.defaultPosition, t = () => {
|
|
242
|
+
E({
|
|
180
243
|
center: e
|
|
181
|
-
}),
|
|
244
|
+
}), X = !0;
|
|
182
245
|
};
|
|
183
246
|
if (typeof requestAnimationFrame > "u") {
|
|
184
247
|
t();
|
|
185
248
|
return;
|
|
186
249
|
}
|
|
187
250
|
requestAnimationFrame(t);
|
|
188
|
-
}),
|
|
189
|
-
!
|
|
251
|
+
}), R(() => {
|
|
252
|
+
_(), h(), !(!n.open || !X || d !== null) && Qe(() => E({
|
|
190
253
|
center: !1
|
|
191
|
-
}))
|
|
192
|
-
}),
|
|
193
|
-
if (!
|
|
254
|
+
}));
|
|
255
|
+
}), R(() => {
|
|
256
|
+
if (!n.open) return;
|
|
194
257
|
const e = (t) => {
|
|
195
258
|
if (t.key !== "Escape") return;
|
|
196
|
-
const
|
|
197
|
-
!
|
|
259
|
+
const r = typeof document < "u" ? document.activeElement : null;
|
|
260
|
+
!V(t.target) && !V(r) || He(t.target) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), n.onOpenChange(!1));
|
|
198
261
|
};
|
|
199
|
-
document.addEventListener("keydown", e, !0),
|
|
200
|
-
}),
|
|
201
|
-
if (!
|
|
202
|
-
|
|
262
|
+
document.addEventListener("keydown", e, !0), C(() => document.removeEventListener("keydown", e, !0));
|
|
263
|
+
}), R(() => {
|
|
264
|
+
if (!n.open) {
|
|
265
|
+
q(!1), G(!1);
|
|
203
266
|
return;
|
|
204
267
|
}
|
|
205
|
-
|
|
206
|
-
}),
|
|
207
|
-
if (!
|
|
208
|
-
const e = (
|
|
209
|
-
|
|
210
|
-
}, t = (
|
|
211
|
-
e(
|
|
212
|
-
},
|
|
213
|
-
e(
|
|
268
|
+
q(!0);
|
|
269
|
+
}), R(() => {
|
|
270
|
+
if (!n.open) return;
|
|
271
|
+
const e = (o) => {
|
|
272
|
+
q(V(o));
|
|
273
|
+
}, t = (o) => {
|
|
274
|
+
e(o.target);
|
|
275
|
+
}, r = (o) => {
|
|
276
|
+
e(o.target);
|
|
214
277
|
};
|
|
215
|
-
document.addEventListener("pointerdown", t), document.addEventListener("focusin",
|
|
216
|
-
document.removeEventListener("pointerdown", t), document.removeEventListener("focusin",
|
|
278
|
+
document.addEventListener("pointerdown", t), document.addEventListener("focusin", r), C(() => {
|
|
279
|
+
document.removeEventListener("pointerdown", t), document.removeEventListener("focusin", r);
|
|
217
280
|
});
|
|
218
|
-
}),
|
|
219
|
-
if (!
|
|
220
|
-
const e =
|
|
221
|
-
|
|
281
|
+
}), R(() => {
|
|
282
|
+
if (!n.open) return;
|
|
283
|
+
const e = Oe();
|
|
284
|
+
d === null ? ge(e) : p = e;
|
|
222
285
|
});
|
|
223
|
-
const
|
|
224
|
-
!
|
|
286
|
+
const Ye = (e) => {
|
|
287
|
+
!Q() || c() || h() || d !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [data-floe-floating-window-header-actions]') || (e.preventDefault(), d = e.pointerId, m = "drag", ae(!0), de = {
|
|
225
288
|
x: e.clientX,
|
|
226
289
|
y: e.clientY
|
|
227
|
-
},
|
|
228
|
-
...
|
|
229
|
-
},
|
|
290
|
+
}, ce = {
|
|
291
|
+
...p
|
|
292
|
+
}, A = {
|
|
230
293
|
x: e.clientX,
|
|
231
294
|
y: e.clientY
|
|
232
|
-
},
|
|
233
|
-
},
|
|
234
|
-
!
|
|
295
|
+
}, U(!0, "grabbing"), xe(e));
|
|
296
|
+
}, y = (e) => (t) => {
|
|
297
|
+
!K() || c() || h() || d !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), d = t.pointerId, m = "resize", se(!0), he = e, ue = {
|
|
235
298
|
x: t.clientX,
|
|
236
299
|
y: t.clientY
|
|
237
|
-
},
|
|
238
|
-
...
|
|
239
|
-
},
|
|
300
|
+
}, fe = {
|
|
301
|
+
...p
|
|
302
|
+
}, A = {
|
|
240
303
|
x: t.clientX,
|
|
241
304
|
y: t.clientY
|
|
242
|
-
},
|
|
243
|
-
},
|
|
244
|
-
|
|
245
|
-
},
|
|
246
|
-
if (!(
|
|
305
|
+
}, U(!0, We[e]), xe(t));
|
|
306
|
+
}, ye = () => {
|
|
307
|
+
I = null, me();
|
|
308
|
+
}, qe = (e) => {
|
|
309
|
+
if (!(d === null || e.pointerId !== d) && m !== null && (A = {
|
|
247
310
|
x: e.clientX,
|
|
248
311
|
y: e.clientY
|
|
249
|
-
},
|
|
312
|
+
}, I === null)) {
|
|
250
313
|
if (typeof requestAnimationFrame > "u") {
|
|
251
|
-
|
|
314
|
+
ye();
|
|
252
315
|
return;
|
|
253
316
|
}
|
|
254
|
-
|
|
317
|
+
I = requestAnimationFrame(ye);
|
|
255
318
|
}
|
|
256
|
-
},
|
|
257
|
-
|
|
319
|
+
}, xe = (e) => {
|
|
320
|
+
T = rt({
|
|
258
321
|
pointerEvent: e,
|
|
259
|
-
captureEl:
|
|
260
|
-
onMove:
|
|
322
|
+
captureEl: a,
|
|
323
|
+
onMove: qe,
|
|
261
324
|
onEnd: ({
|
|
262
325
|
commit: t,
|
|
263
|
-
reason:
|
|
264
|
-
snapshot:
|
|
326
|
+
reason: r,
|
|
327
|
+
snapshot: o
|
|
265
328
|
}) => {
|
|
266
|
-
|
|
267
|
-
x:
|
|
268
|
-
y:
|
|
269
|
-
},
|
|
329
|
+
A = {
|
|
330
|
+
x: o.latestClientX,
|
|
331
|
+
y: o.latestClientY
|
|
332
|
+
}, ve(t || r === "pointer_cancel");
|
|
270
333
|
}
|
|
271
334
|
});
|
|
272
|
-
},
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
width: t.size.width,
|
|
280
|
-
height: t.size.height
|
|
281
|
-
},
|
|
282
|
-
minSize: M(),
|
|
283
|
-
maxSize: T(),
|
|
284
|
-
viewport: {
|
|
285
|
-
width: window.innerWidth,
|
|
286
|
-
height: window.innerHeight
|
|
287
|
-
},
|
|
288
|
-
viewportInsets: z(),
|
|
289
|
-
mobile: _(),
|
|
290
|
-
mobilePadding: D,
|
|
291
|
-
center: !1
|
|
292
|
-
})), Z(!1);
|
|
293
|
-
return;
|
|
294
|
-
}
|
|
295
|
-
const e = X();
|
|
296
|
-
Se({
|
|
297
|
-
position: {
|
|
298
|
-
x: e.x,
|
|
299
|
-
y: e.y
|
|
300
|
-
},
|
|
301
|
-
size: {
|
|
302
|
-
width: e.width,
|
|
303
|
-
height: e.height
|
|
304
|
-
}
|
|
305
|
-
}), P(ge({
|
|
306
|
-
width: window.innerWidth,
|
|
307
|
-
height: window.innerHeight
|
|
308
|
-
}, z())), Z(!0);
|
|
309
|
-
}, Le = (e) => {
|
|
310
|
-
e.target?.closest("button, [data-floe-floating-window-header-actions]") || de();
|
|
311
|
-
}, ke = (e) => {
|
|
312
|
-
Re(e.target) && Pe();
|
|
313
|
-
}, g = (e) => k("absolute z-10", {
|
|
335
|
+
}, be = () => {
|
|
336
|
+
d !== null && G(!0), !h() && (Me(!c()), E());
|
|
337
|
+
}, Xe = (e) => {
|
|
338
|
+
e.target?.closest("button, [data-floe-floating-window-header-actions]") || be();
|
|
339
|
+
}, Ue = (e) => {
|
|
340
|
+
De(e.target) && Be();
|
|
341
|
+
}, x = (e) => B("absolute z-10", {
|
|
314
342
|
n: "cursor-ns-resize top-0 left-2 right-2 h-1",
|
|
315
343
|
s: "cursor-ns-resize bottom-0 left-2 right-2 h-1",
|
|
316
344
|
e: "cursor-ew-resize right-0 top-2 bottom-2 w-1",
|
|
@@ -320,178 +348,197 @@ function St(i) {
|
|
|
320
348
|
se: "cursor-nwse-resize bottom-0 right-0 w-2 h-2",
|
|
321
349
|
sw: "cursor-nesw-resize bottom-0 left-0 w-2 h-2"
|
|
322
350
|
}[e]);
|
|
323
|
-
return
|
|
351
|
+
return [(() => {
|
|
352
|
+
var e = wt(), t = D;
|
|
353
|
+
return typeof t == "function" ? _e(t, e) : D = e, e;
|
|
354
|
+
})(), l(z, {
|
|
324
355
|
get when() {
|
|
325
356
|
return S.mounted();
|
|
326
357
|
},
|
|
327
358
|
get children() {
|
|
328
|
-
return
|
|
359
|
+
return l(Ve, {
|
|
329
360
|
get children() {
|
|
330
|
-
var e =
|
|
331
|
-
return typeof
|
|
361
|
+
var e = It(), t = e.firstChild, r = t.firstChild, o = r.firstChild, P = o.nextSibling, O = r.nextSibling, ze = a;
|
|
362
|
+
return typeof ze == "function" ? _e(ze, e) : a = e, pe(e, $e({
|
|
332
363
|
get "data-floating-presence"() {
|
|
333
364
|
return S.state();
|
|
334
365
|
},
|
|
335
366
|
get "aria-hidden"() {
|
|
336
|
-
return S.exiting() ? "true" : void 0;
|
|
367
|
+
return S.exiting() || !H() ? "true" : void 0;
|
|
368
|
+
},
|
|
369
|
+
get inert() {
|
|
370
|
+
return S.exiting() || !H();
|
|
371
|
+
},
|
|
372
|
+
get "data-floe-floating-window-compact"() {
|
|
373
|
+
return h() ? "true" : void 0;
|
|
337
374
|
}
|
|
338
375
|
}, {
|
|
339
|
-
[
|
|
376
|
+
[Pe]: "true"
|
|
340
377
|
}, {
|
|
341
378
|
get class() {
|
|
342
|
-
return
|
|
379
|
+
return B("fixed left-0 top-0 z-[100] flex flex-col", (k() || M()) && "select-none", S.exiting() && "pointer-events-none");
|
|
343
380
|
},
|
|
344
381
|
get style() {
|
|
345
382
|
return {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
"
|
|
383
|
+
visibility: H() ? void 0 : "hidden",
|
|
384
|
+
width: `${Y().width}px`,
|
|
385
|
+
height: `${Y().height}px`,
|
|
386
|
+
transform: `translate3d(${N().x}px, ${N().y}px, 0)`,
|
|
387
|
+
"z-index": Ee(),
|
|
388
|
+
"will-change": k() ? "transform" : M() ? "transform, width, height" : void 0
|
|
351
389
|
};
|
|
352
390
|
},
|
|
353
391
|
role: "dialog",
|
|
354
392
|
get "aria-labelledby"() {
|
|
355
|
-
return
|
|
393
|
+
return J(() => !!n.title)() ? le() : void 0;
|
|
356
394
|
},
|
|
357
395
|
tabIndex: -1,
|
|
358
|
-
onPointerDown:
|
|
359
|
-
}), !1, !0),
|
|
360
|
-
[
|
|
396
|
+
onPointerDown: Ue
|
|
397
|
+
}), !1, !0), pe(t, $e({
|
|
398
|
+
[ut]: "true"
|
|
361
399
|
}, {
|
|
362
400
|
"data-floe-floating-window-surface": "true",
|
|
363
401
|
"data-floe-surface": "floating",
|
|
364
402
|
get "data-floe-surface-interacting"() {
|
|
365
|
-
return
|
|
403
|
+
return k() || M() ? "true" : void 0;
|
|
366
404
|
},
|
|
367
405
|
get "data-floe-floating-window-state"() {
|
|
368
|
-
return
|
|
406
|
+
return Te() ? "active" : "inactive";
|
|
369
407
|
}
|
|
370
408
|
}, {
|
|
371
|
-
[
|
|
409
|
+
[Pe]: "true"
|
|
372
410
|
}, {
|
|
373
411
|
get class() {
|
|
374
|
-
return
|
|
412
|
+
return B("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (k() || M()) && "floe-floating-presence--suspended", c() && "rounded-none", n.class);
|
|
375
413
|
},
|
|
376
414
|
get style() {
|
|
377
415
|
return {
|
|
378
|
-
"border-radius":
|
|
416
|
+
"border-radius": c() ? "0" : "10px"
|
|
379
417
|
};
|
|
380
418
|
},
|
|
381
419
|
get "data-floating-presence"() {
|
|
382
420
|
return S.state();
|
|
383
421
|
}
|
|
384
|
-
}), !1, !0),
|
|
422
|
+
}), !1, !0), r.$$dblclick = Xe, r.$$pointerdown = Ye, u(o, l(z, {
|
|
385
423
|
get when() {
|
|
386
|
-
return
|
|
424
|
+
return n.title;
|
|
387
425
|
},
|
|
388
426
|
get children() {
|
|
389
|
-
var
|
|
390
|
-
return
|
|
427
|
+
var i = gt();
|
|
428
|
+
return u(i, () => n.title), f(() => Ge(i, "id", le())), i;
|
|
391
429
|
}
|
|
392
|
-
})),
|
|
430
|
+
})), u(r, l(z, {
|
|
393
431
|
get when() {
|
|
394
|
-
return
|
|
432
|
+
return n.headerActions;
|
|
395
433
|
},
|
|
396
434
|
get children() {
|
|
397
|
-
var
|
|
398
|
-
return
|
|
435
|
+
var i = mt(), je = i.firstChild;
|
|
436
|
+
return u(i, () => n.headerActions, je), i;
|
|
399
437
|
}
|
|
400
|
-
}),
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
"data-floe-floating-window-control": "maximize",
|
|
404
|
-
class: "h-full w-9 shrink-0 rounded-none border-0 px-0 active:scale-100",
|
|
405
|
-
onClick: (n) => {
|
|
406
|
-
n.stopPropagation(), de();
|
|
407
|
-
},
|
|
408
|
-
get "aria-label"() {
|
|
409
|
-
return u() ? "Restore" : "Maximize";
|
|
438
|
+
}), P), u(P, l(z, {
|
|
439
|
+
get when() {
|
|
440
|
+
return !h();
|
|
410
441
|
},
|
|
411
442
|
get children() {
|
|
412
|
-
return
|
|
413
|
-
|
|
414
|
-
|
|
443
|
+
return l(Ie, {
|
|
444
|
+
variant: "ghost",
|
|
445
|
+
size: "icon",
|
|
446
|
+
"data-floe-floating-window-control": "maximize",
|
|
447
|
+
class: "h-full w-9 shrink-0 rounded-none border-0 px-0 active:scale-100",
|
|
448
|
+
onClick: (i) => {
|
|
449
|
+
i.stopPropagation(), be();
|
|
415
450
|
},
|
|
416
|
-
get
|
|
417
|
-
return
|
|
418
|
-
class: "w-3 h-3"
|
|
419
|
-
});
|
|
451
|
+
get "aria-label"() {
|
|
452
|
+
return J(() => !!c())() ? n.labels?.restore ?? "Restore" : n.labels?.maximize ?? "Maximize";
|
|
420
453
|
},
|
|
421
454
|
get children() {
|
|
422
|
-
return
|
|
423
|
-
|
|
455
|
+
return l(z, {
|
|
456
|
+
get when() {
|
|
457
|
+
return c();
|
|
458
|
+
},
|
|
459
|
+
get fallback() {
|
|
460
|
+
return l(nt, {
|
|
461
|
+
class: "w-3 h-3"
|
|
462
|
+
});
|
|
463
|
+
},
|
|
464
|
+
get children() {
|
|
465
|
+
return l(tt, {
|
|
466
|
+
class: "w-3 h-3"
|
|
467
|
+
});
|
|
468
|
+
}
|
|
424
469
|
});
|
|
425
470
|
}
|
|
426
471
|
});
|
|
427
472
|
}
|
|
428
|
-
}), null),
|
|
473
|
+
}), null), u(P, l(Ie, {
|
|
429
474
|
variant: "ghost-destructive",
|
|
430
475
|
size: "icon",
|
|
431
476
|
"data-floe-floating-window-control": "close",
|
|
432
477
|
class: "h-full w-10 shrink-0 rounded-none border-0 px-0 active:scale-100",
|
|
433
|
-
onClick: (
|
|
434
|
-
|
|
478
|
+
onClick: (i) => {
|
|
479
|
+
i.stopPropagation(), n.onOpenChange(!1);
|
|
480
|
+
},
|
|
481
|
+
get "aria-label"() {
|
|
482
|
+
return n.labels?.close ?? "Close";
|
|
435
483
|
},
|
|
436
|
-
"aria-label": "Close",
|
|
437
484
|
get children() {
|
|
438
|
-
return
|
|
485
|
+
return l(it, {
|
|
439
486
|
class: "w-3.5 h-3.5"
|
|
440
487
|
});
|
|
441
488
|
}
|
|
442
|
-
}), null),
|
|
489
|
+
}), null), u(O, () => n.children), u(t, l(z, {
|
|
443
490
|
get when() {
|
|
444
|
-
return
|
|
491
|
+
return n.footer;
|
|
445
492
|
},
|
|
446
493
|
get children() {
|
|
447
|
-
var
|
|
448
|
-
return
|
|
494
|
+
var i = vt();
|
|
495
|
+
return u(i, () => n.footer), i;
|
|
449
496
|
}
|
|
450
|
-
}), null),
|
|
497
|
+
}), null), u(t, l(z, {
|
|
451
498
|
get when() {
|
|
452
|
-
return
|
|
499
|
+
return J(() => !!(K() && !c()))() && !h();
|
|
453
500
|
},
|
|
454
501
|
get children() {
|
|
455
502
|
return [(() => {
|
|
456
|
-
var
|
|
457
|
-
return
|
|
503
|
+
var i = yt();
|
|
504
|
+
return b(i, "pointerdown", y("n"), !0), f(() => w(i, x("n"))), i;
|
|
458
505
|
})(), (() => {
|
|
459
|
-
var
|
|
460
|
-
return
|
|
461
|
-
})(),
|
|
506
|
+
var i = xt();
|
|
507
|
+
return b(i, "pointerdown", y("s"), !0), f(() => w(i, x("s"))), i;
|
|
508
|
+
})(), l(z, {
|
|
462
509
|
get when() {
|
|
463
|
-
return !
|
|
510
|
+
return !L();
|
|
464
511
|
},
|
|
465
512
|
get children() {
|
|
466
513
|
return [(() => {
|
|
467
|
-
var
|
|
468
|
-
return
|
|
514
|
+
var i = bt();
|
|
515
|
+
return b(i, "pointerdown", y("e"), !0), f(() => w(i, x("e"))), i;
|
|
469
516
|
})(), (() => {
|
|
470
|
-
var
|
|
471
|
-
return
|
|
517
|
+
var i = zt();
|
|
518
|
+
return b(i, "pointerdown", y("w"), !0), f(() => w(i, x("w"))), i;
|
|
472
519
|
})(), (() => {
|
|
473
|
-
var
|
|
474
|
-
return
|
|
520
|
+
var i = pt();
|
|
521
|
+
return b(i, "pointerdown", y("ne"), !0), f(() => w(i, x("ne"))), i;
|
|
475
522
|
})(), (() => {
|
|
476
|
-
var
|
|
477
|
-
return
|
|
523
|
+
var i = $t();
|
|
524
|
+
return b(i, "pointerdown", y("nw"), !0), f(() => w(i, x("nw"))), i;
|
|
478
525
|
})(), (() => {
|
|
479
|
-
var
|
|
480
|
-
return
|
|
526
|
+
var i = _t();
|
|
527
|
+
return b(i, "pointerdown", y("se"), !0), f(() => w(i, x("se"))), i;
|
|
481
528
|
})(), (() => {
|
|
482
|
-
var
|
|
483
|
-
return
|
|
529
|
+
var i = St();
|
|
530
|
+
return b(i, "pointerdown", y("sw"), !0), f(() => w(i, x("sw"))), i;
|
|
484
531
|
})()];
|
|
485
532
|
}
|
|
486
533
|
})];
|
|
487
534
|
}
|
|
488
|
-
}), null), f(() =>
|
|
535
|
+
}), null), f(() => w(r, B("flex shrink-0 items-center justify-between h-8", "border-b", c() ? "rounded-none" : "rounded-t-md", Q() && !c() && !h() && "cursor-move"))), e;
|
|
489
536
|
}
|
|
490
537
|
});
|
|
491
538
|
}
|
|
492
|
-
});
|
|
539
|
+
})];
|
|
493
540
|
}
|
|
494
|
-
|
|
541
|
+
Je(["pointerdown", "dblclick"]);
|
|
495
542
|
export {
|
|
496
|
-
|
|
543
|
+
Dt as FloatingWindow
|
|
497
544
|
};
|