@floegence/floe-webapp-core 0.74.0 → 0.75.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/dist/components/ui/Dialog.js +48 -48
- package/dist/components/ui/FloatingWindow.js +197 -197
- package/dist/reload-placeholder.js +34 -32
- package/dist/viewport.d.ts +4 -1
- package/dist/viewport.js +55 -50
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { createComponent as o, use as G, setAttribute as f, style as ne, Portal as ae, spread as I, mergeProps as M, memo as C, insert as
|
|
2
|
-
import { createSignal as
|
|
1
|
+
import { createComponent as o, use as G, setAttribute as f, style as ne, Portal as ae, spread as I, mergeProps as M, memo as C, insert as l, effect as S, className as q, template as m } from "solid-js/web";
|
|
2
|
+
import { createSignal as D, onMount as ie, onCleanup as E, createUniqueId as le, createEffect as K, createMemo as U, Show as g, untrack as V } from "solid-js";
|
|
3
3
|
import { cn as y } from "../../utils/cn.js";
|
|
4
4
|
import { Button as j } from "./Button.js";
|
|
5
5
|
import { X as de } from "../icons/index.js";
|
|
@@ -11,11 +11,11 @@ import { createFloatingPresence as we } from "./floatingPresence.js";
|
|
|
11
11
|
import { useDialogPlacement as ye } from "./DialogPlacementContext.js";
|
|
12
12
|
import { observeViewport as xe, viewportStyle as pe } from "../../viewport.js";
|
|
13
13
|
import { resolveFloatingBoundary as $e } from "./surfaceFloatingBoundary.js";
|
|
14
|
-
var Ae = /* @__PURE__ */ m("<span aria-hidden=true>"), Ce = /* @__PURE__ */ m('<h2 class="text-sm font-semibold">'), _e = /* @__PURE__ */ m('<div data-floe-dialog-header class="flex shrink-0 items-start justify-between p-3 border-b border-border"><div>'), ke = /* @__PURE__ */ m('<p class="mb-3 shrink-0 text-sm text-muted-foreground last:mb-0">'), Oe = /* @__PURE__ */ m('<div data-floe-dialog-footer class="flex shrink-0 items-center justify-end gap-2 p-3 border-t border-border">'), Re = /* @__PURE__ */ m("<div><div></div><div><div data-floe-surface=floating><div data-floe-dialog-body>"),
|
|
15
|
-
const
|
|
14
|
+
var Ae = /* @__PURE__ */ m("<span aria-hidden=true>"), Ce = /* @__PURE__ */ m('<h2 class="text-sm font-semibold">'), _e = /* @__PURE__ */ m('<div data-floe-dialog-header class="flex shrink-0 items-start justify-between p-3 border-b border-border"><div>'), ke = /* @__PURE__ */ m('<p class="mb-3 shrink-0 text-sm text-muted-foreground last:mb-0">'), Oe = /* @__PURE__ */ m('<div data-floe-dialog-footer class="flex shrink-0 items-center justify-end gap-2 p-3 border-t border-border">'), Re = /* @__PURE__ */ m("<div><div></div><div><div data-floe-surface=floating><div data-floe-dialog-body>"), Se = /* @__PURE__ */ m("<h2 class=sr-only>");
|
|
15
|
+
const De = {
|
|
16
16
|
display: "none"
|
|
17
17
|
};
|
|
18
|
-
function
|
|
18
|
+
function Pe(e) {
|
|
19
19
|
if (typeof queueMicrotask == "function") {
|
|
20
20
|
queueMicrotask(e);
|
|
21
21
|
return;
|
|
@@ -36,11 +36,11 @@ function Be(e) {
|
|
|
36
36
|
window.clearTimeout(e);
|
|
37
37
|
}
|
|
38
38
|
function Fe(e) {
|
|
39
|
-
const x = ye(), [
|
|
39
|
+
const x = ye(), [n, W] = D();
|
|
40
40
|
ie(() => E(xe(window, W)));
|
|
41
|
-
const c = le(),
|
|
41
|
+
const c = le(), P = () => `dialog-${c}-title`, H = () => `dialog-${c}-description`;
|
|
42
42
|
let T;
|
|
43
|
-
const [k, Y] =
|
|
43
|
+
const [k, Y] = D(null), [L, X] = D(0), [J, Q] = D(0), B = () => e.presentation === "side-drawer", u = () => e.presentation === "bottom-drawer", s = we({
|
|
44
44
|
open: () => e.open && !!k() && L() > 0,
|
|
45
45
|
get exitDurationMs() {
|
|
46
46
|
return u() ? 180 : 160;
|
|
@@ -48,8 +48,8 @@ function Fe(e) {
|
|
|
48
48
|
}), p = () => s.mounted() && !!k() && L() > 0;
|
|
49
49
|
K(() => e.onPresenceChange?.(p())), E(() => e.onPresenceChange?.(!1));
|
|
50
50
|
const ee = (t) => {
|
|
51
|
-
Y(t),
|
|
52
|
-
V(k) === t && X((
|
|
51
|
+
Y(t), Pe(() => {
|
|
52
|
+
V(k) === t && X((d) => d + 1);
|
|
53
53
|
});
|
|
54
54
|
}, O = U(() => p() ? ue({
|
|
55
55
|
owner: k()
|
|
@@ -58,42 +58,42 @@ function Fe(e) {
|
|
|
58
58
|
boundaryHost: null,
|
|
59
59
|
mountHost: null,
|
|
60
60
|
mode: "global"
|
|
61
|
-
}), $ = () => `dialog-boundary-${c}`,
|
|
61
|
+
}), $ = () => `dialog-boundary-${c}`, a = () => x.mode() === "auto" && z(O()), te = () => a() ? be(O()) : void 0, N = () => e.globalZIndex ?? x.globalZIndex(), F = (t) => me($e(t, void 0, V(n)?.safeArea) ?? he(t), t), re = () => F(O()), R = U(() => (J(), n(), re())), oe = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${_}="${$()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${_}="${$()}"]`) : !1;
|
|
62
62
|
return K(() => {
|
|
63
63
|
const t = O();
|
|
64
|
-
if (!p() || !
|
|
64
|
+
if (!p() || !a() || typeof window > "u")
|
|
65
65
|
return;
|
|
66
|
-
let
|
|
66
|
+
let d = !1, h = null, i = Z(F(t));
|
|
67
67
|
const b = () => {
|
|
68
|
-
if (
|
|
68
|
+
if (d || !z(t))
|
|
69
69
|
return;
|
|
70
70
|
const r = Z(F(t));
|
|
71
|
-
r !==
|
|
71
|
+
r !== i && (i = r, Q((v) => v + 1));
|
|
72
72
|
}, A = () => {
|
|
73
|
-
|
|
73
|
+
d || (h = Te(() => {
|
|
74
74
|
b(), A();
|
|
75
75
|
}));
|
|
76
76
|
};
|
|
77
77
|
A(), E(() => {
|
|
78
|
-
|
|
78
|
+
d = !0, h !== null && Be(h);
|
|
79
79
|
});
|
|
80
80
|
}), ce({
|
|
81
81
|
open: p,
|
|
82
82
|
root: () => T,
|
|
83
83
|
containsTarget: oe,
|
|
84
84
|
onClose: () => e.onOpenChange(!1),
|
|
85
|
-
lockBodyScroll: () => !
|
|
85
|
+
lockBodyScroll: () => !a(),
|
|
86
86
|
trapFocus: !0,
|
|
87
|
-
closeOnEscape: () =>
|
|
87
|
+
closeOnEscape: () => a() ? "inside" : !0,
|
|
88
88
|
escapeKeyPhase: () => e.escapeKeyPhase ?? "capture",
|
|
89
89
|
blockHotkeys: !0,
|
|
90
90
|
// Block scroll bleed outside the dialog while keeping the dialog content scrollable.
|
|
91
|
-
blockWheel: () =>
|
|
92
|
-
blockTouchMove: () =>
|
|
91
|
+
blockWheel: () => a() ? "none" : "outside",
|
|
92
|
+
blockTouchMove: () => a() ? "none" : "outside",
|
|
93
93
|
restoreFocus: !0
|
|
94
94
|
}), [(() => {
|
|
95
95
|
var t = Ae();
|
|
96
|
-
return G(ee, t), f(t, "data-floe-dialog-owner-anchor", c), ne(t,
|
|
96
|
+
return G(ee, t), f(t, "data-floe-dialog-owner-anchor", c), ne(t, De), t;
|
|
97
97
|
})(), o(g, {
|
|
98
98
|
get when() {
|
|
99
99
|
return p();
|
|
@@ -104,10 +104,10 @@ function Fe(e) {
|
|
|
104
104
|
return te();
|
|
105
105
|
},
|
|
106
106
|
get children() {
|
|
107
|
-
var t = Re(),
|
|
107
|
+
var t = Re(), d = t.firstChild, h = d.nextSibling, i = h.firstChild, b = i.firstChild;
|
|
108
108
|
f(t, "data-floe-dialog-overlay-root", c), I(t, M({
|
|
109
109
|
get "data-floe-dialog-mode"() {
|
|
110
|
-
return
|
|
110
|
+
return a() ? "surface" : "global";
|
|
111
111
|
},
|
|
112
112
|
get "data-floe-dialog-presentation"() {
|
|
113
113
|
return e.presentation ?? "dialog";
|
|
@@ -125,22 +125,22 @@ function Fe(e) {
|
|
|
125
125
|
[_]: $()
|
|
126
126
|
}), {
|
|
127
127
|
get class() {
|
|
128
|
-
return y(
|
|
128
|
+
return y(a() ? "absolute z-20 box-border p-3" : y("fixed box-border p-4", N() === void 0 && "z-50"), u() && "floe-bottom-drawer-overlay", B() && "floe-side-drawer-overlay", s.exiting() && !u() && "pointer-events-none");
|
|
129
129
|
},
|
|
130
130
|
get style() {
|
|
131
|
-
return C(() => !!
|
|
131
|
+
return C(() => !!a())() ? {
|
|
132
132
|
left: `${R().left}px`,
|
|
133
133
|
top: `${R().top}px`,
|
|
134
134
|
width: `${R().width}px`,
|
|
135
135
|
height: `${R().height}px`
|
|
136
136
|
} : {
|
|
137
|
-
...
|
|
137
|
+
...n() ? pe(n()) : {
|
|
138
138
|
inset: "0"
|
|
139
139
|
},
|
|
140
|
-
"--floe-dialog-safe-top": `${
|
|
141
|
-
"--floe-dialog-safe-right": `${
|
|
142
|
-
"--floe-dialog-safe-bottom": `${
|
|
143
|
-
"--floe-dialog-safe-left": `${
|
|
140
|
+
"--floe-dialog-safe-top": `${(n()?.safeArea.top ?? 0) / (n()?.fixedScale ?? 1)}px`,
|
|
141
|
+
"--floe-dialog-safe-right": `${(n()?.safeArea.right ?? 0) / (n()?.fixedScale ?? 1)}px`,
|
|
142
|
+
"--floe-dialog-safe-bottom": `${(n()?.safeArea.bottom ?? 0) / (n()?.fixedScale ?? 1)}px`,
|
|
143
|
+
"--floe-dialog-safe-left": `${(n()?.safeArea.left ?? 0) / (n()?.fixedScale ?? 1)}px`,
|
|
144
144
|
"padding-top": "max(var(--floe-dialog-gap-y, 1rem), var(--floe-dialog-safe-top))",
|
|
145
145
|
"padding-right": "max(var(--floe-dialog-gap-x, 1rem), var(--floe-dialog-safe-right))",
|
|
146
146
|
"padding-bottom": "max(var(--floe-dialog-gap-y, 1rem), var(--floe-dialog-safe-bottom))",
|
|
@@ -148,26 +148,26 @@ function Fe(e) {
|
|
|
148
148
|
"z-index": N()
|
|
149
149
|
};
|
|
150
150
|
}
|
|
151
|
-
}), !1, !0), f(
|
|
151
|
+
}), !1, !0), f(d, "data-floe-dialog-backdrop", c), I(d, M(() => ({
|
|
152
152
|
[_]: $()
|
|
153
153
|
}), {
|
|
154
154
|
get "data-floating-presence"() {
|
|
155
155
|
return s.state();
|
|
156
156
|
},
|
|
157
157
|
get class() {
|
|
158
|
-
return y("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", u() ? "floe-bottom-drawer-backdrop" :
|
|
158
|
+
return y("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", u() ? "floe-bottom-drawer-backdrop" : a() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
|
|
159
159
|
},
|
|
160
160
|
onClick: () => {
|
|
161
161
|
!s.exiting() && e.closeOnBackdropClick !== !1 && e.onOpenChange(!1);
|
|
162
162
|
}
|
|
163
163
|
}), !1, !1);
|
|
164
164
|
var A = T;
|
|
165
|
-
return typeof A == "function" ? G(A,
|
|
165
|
+
return typeof A == "function" ? G(A, i) : T = i, f(i, "data-floe-dialog-panel", c), I(i, M(() => ({
|
|
166
166
|
[_]: $(),
|
|
167
167
|
[ge]: "true"
|
|
168
168
|
}), {
|
|
169
169
|
get class() {
|
|
170
|
-
return y(
|
|
170
|
+
return y(a() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "floe-floating-presence", u() ? "floe-bottom-drawer-panel" : B() ? "floe-side-drawer-panel" : "floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
|
|
171
171
|
},
|
|
172
172
|
style: {
|
|
173
173
|
"max-height": "100%",
|
|
@@ -182,17 +182,17 @@ function Fe(e) {
|
|
|
182
182
|
},
|
|
183
183
|
role: "dialog",
|
|
184
184
|
get "aria-modal"() {
|
|
185
|
-
return
|
|
185
|
+
return a() ? void 0 : "true";
|
|
186
186
|
},
|
|
187
187
|
get "aria-labelledby"() {
|
|
188
|
-
return C(() => !!e.title)() ?
|
|
188
|
+
return C(() => !!e.title)() ? P() : void 0;
|
|
189
189
|
},
|
|
190
190
|
get "aria-describedby"() {
|
|
191
191
|
return C(() => !!e.bodyDescription)() ? H() : void 0;
|
|
192
192
|
},
|
|
193
193
|
onKeyDown: (r) => e.onKeyDown?.(r),
|
|
194
194
|
tabIndex: -1
|
|
195
|
-
}), !1, !0), i
|
|
195
|
+
}), !1, !0), l(i, o(g, {
|
|
196
196
|
get when() {
|
|
197
197
|
return e.header === void 0;
|
|
198
198
|
},
|
|
@@ -202,8 +202,8 @@ function Fe(e) {
|
|
|
202
202
|
return e.title;
|
|
203
203
|
},
|
|
204
204
|
get children() {
|
|
205
|
-
var r =
|
|
206
|
-
return
|
|
205
|
+
var r = Se();
|
|
206
|
+
return l(r, () => e.title), S(() => f(r, "id", P())), r;
|
|
207
207
|
}
|
|
208
208
|
}), C(() => e.header)];
|
|
209
209
|
},
|
|
@@ -214,15 +214,15 @@ function Fe(e) {
|
|
|
214
214
|
},
|
|
215
215
|
get children() {
|
|
216
216
|
var r = _e(), v = r.firstChild;
|
|
217
|
-
return
|
|
217
|
+
return l(v, o(g, {
|
|
218
218
|
get when() {
|
|
219
219
|
return e.title;
|
|
220
220
|
},
|
|
221
221
|
get children() {
|
|
222
222
|
var w = Ce();
|
|
223
|
-
return
|
|
223
|
+
return l(w, () => e.title), S(() => f(w, "id", P())), w;
|
|
224
224
|
}
|
|
225
|
-
})),
|
|
225
|
+
})), l(r, o(j, {
|
|
226
226
|
variant: "ghost-destructive",
|
|
227
227
|
size: "icon",
|
|
228
228
|
class: "-my-2 -mr-2 h-[46px] w-[46px] shrink-0 sm:my-0 sm:-mr-1 sm:h-6 sm:w-6",
|
|
@@ -239,23 +239,23 @@ function Fe(e) {
|
|
|
239
239
|
}
|
|
240
240
|
});
|
|
241
241
|
}
|
|
242
|
-
}), b),
|
|
242
|
+
}), b), l(b, o(g, {
|
|
243
243
|
get when() {
|
|
244
244
|
return e.bodyDescription;
|
|
245
245
|
},
|
|
246
246
|
get children() {
|
|
247
247
|
var r = ke();
|
|
248
|
-
return
|
|
248
|
+
return l(r, () => e.bodyDescription), S(() => f(r, "id", H())), r;
|
|
249
249
|
}
|
|
250
|
-
}), null),
|
|
250
|
+
}), null), l(b, () => e.children, null), l(i, o(g, {
|
|
251
251
|
get when() {
|
|
252
252
|
return e.footer;
|
|
253
253
|
},
|
|
254
254
|
get children() {
|
|
255
255
|
var r = Oe();
|
|
256
|
-
return
|
|
256
|
+
return l(r, () => e.footer), r;
|
|
257
257
|
}
|
|
258
|
-
}), null),
|
|
258
|
+
}), null), S((r) => {
|
|
259
259
|
var v = y("pointer-events-none relative z-[1] flex h-full w-full", B() ? "items-stretch justify-end" : u() ? "items-end justify-center" : "items-center justify-center"), w = y("min-h-0 flex-1 overflow-auto overscroll-contain p-3", e.contentClass);
|
|
260
260
|
return v !== r.e && q(h, r.e = v), w !== r.t && q(b, r.t = w), r;
|
|
261
261
|
}, {
|