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