@floegence/floe-webapp-core 0.78.8 → 0.78.9
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.
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { createComponent as
|
|
1
|
+
import { createComponent as r, use as G, setAttribute as u, 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
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";
|
|
6
6
|
import { useResolvedFloeConfig as se } from "../../context/FloeConfigContext.js";
|
|
7
7
|
import { useOverlayMask as ce } from "../../hooks/useOverlayMask.js";
|
|
8
|
-
import { resolveSurfacePortalHost as
|
|
8
|
+
import { resolveSurfacePortalHost as fe, DIALOG_SURFACE_BOUNDARY_ATTR as _, SURFACE_PORTAL_LAYER_ATTR as ue, DIALOG_SURFACE_HOST_ATTR as ge, isSurfacePortalMode as z, projectSurfacePortalRect as me, resolveSurfacePortalBoundaryRect as he, resolveSurfacePortalMount as be } from "./dialogSurfaceScope.js";
|
|
9
9
|
import { LOCAL_INTERACTION_SURFACE_ATTR as ve } from "./localInteractionSurface.js";
|
|
10
10
|
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-
|
|
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-[length:var(--floe-type-body)] leading-[var(--floe-line-body)] 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
15
|
const De = {
|
|
16
16
|
display: "none"
|
|
17
17
|
};
|
|
@@ -40,10 +40,10 @@ function Fe(e) {
|
|
|
40
40
|
ie(() => E(xe(window, W)));
|
|
41
41
|
const c = le(), P = () => `dialog-${c}-title`, H = () => `dialog-${c}-description`;
|
|
42
42
|
let T;
|
|
43
|
-
const [k, Y] = D(null), [L, X] = D(0), [J, Q] = D(0), B = () => e.presentation === "side-drawer",
|
|
43
|
+
const [k, Y] = D(null), [L, X] = D(0), [J, Q] = D(0), B = () => e.presentation === "side-drawer", f = () => e.presentation === "bottom-drawer", s = we({
|
|
44
44
|
open: () => e.open && !!k() && L() > 0,
|
|
45
45
|
get exitDurationMs() {
|
|
46
|
-
return
|
|
46
|
+
return f() ? 180 : 160;
|
|
47
47
|
}
|
|
48
48
|
}), p = () => s.mounted() && !!k() && L() > 0;
|
|
49
49
|
K(() => e.onPresenceChange?.(p())), E(() => e.onPresenceChange?.(!1));
|
|
@@ -51,14 +51,14 @@ function Fe(e) {
|
|
|
51
51
|
Y(t), Pe(() => {
|
|
52
52
|
V(k) === t && X((d) => d + 1);
|
|
53
53
|
});
|
|
54
|
-
}, O = U(() => p() ?
|
|
54
|
+
}, O = U(() => p() ? fe({
|
|
55
55
|
owner: k()
|
|
56
56
|
}) : {
|
|
57
57
|
host: null,
|
|
58
58
|
boundaryHost: null,
|
|
59
59
|
mountHost: null,
|
|
60
60
|
mode: "global"
|
|
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),
|
|
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), oe = () => F(O()), R = U(() => (J(), n(), oe())), re = (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
64
|
if (!p() || !a() || typeof window > "u")
|
|
@@ -67,8 +67,8 @@ function Fe(e) {
|
|
|
67
67
|
const b = () => {
|
|
68
68
|
if (d || !z(t))
|
|
69
69
|
return;
|
|
70
|
-
const
|
|
71
|
-
|
|
70
|
+
const o = Z(F(t));
|
|
71
|
+
o !== i && (i = o, Q((v) => v + 1));
|
|
72
72
|
}, A = () => {
|
|
73
73
|
d || (h = Te(() => {
|
|
74
74
|
b(), A();
|
|
@@ -80,7 +80,7 @@ function Fe(e) {
|
|
|
80
80
|
}), ce({
|
|
81
81
|
open: p,
|
|
82
82
|
root: () => T,
|
|
83
|
-
containsTarget:
|
|
83
|
+
containsTarget: re,
|
|
84
84
|
onClose: () => e.onOpenChange(!1),
|
|
85
85
|
lockBodyScroll: () => !a(),
|
|
86
86
|
trapFocus: !0,
|
|
@@ -93,19 +93,19 @@ function Fe(e) {
|
|
|
93
93
|
restoreFocus: !0
|
|
94
94
|
}), [(() => {
|
|
95
95
|
var t = Ae();
|
|
96
|
-
return G(ee, t),
|
|
97
|
-
})(),
|
|
96
|
+
return G(ee, t), u(t, "data-floe-dialog-owner-anchor", c), ne(t, De), t;
|
|
97
|
+
})(), r(g, {
|
|
98
98
|
get when() {
|
|
99
99
|
return p();
|
|
100
100
|
},
|
|
101
101
|
get children() {
|
|
102
|
-
return
|
|
102
|
+
return r(ae, {
|
|
103
103
|
get mount() {
|
|
104
104
|
return te();
|
|
105
105
|
},
|
|
106
106
|
get children() {
|
|
107
107
|
var t = Re(), d = t.firstChild, h = d.nextSibling, i = h.firstChild, b = i.firstChild;
|
|
108
|
-
|
|
108
|
+
u(t, "data-floe-dialog-overlay-root", c), I(t, M({
|
|
109
109
|
get "data-floe-dialog-mode"() {
|
|
110
110
|
return a() ? "surface" : "global";
|
|
111
111
|
},
|
|
@@ -121,11 +121,11 @@ function Fe(e) {
|
|
|
121
121
|
}, {
|
|
122
122
|
[ve]: "true"
|
|
123
123
|
}, () => ({
|
|
124
|
-
[
|
|
124
|
+
[ue]: "true",
|
|
125
125
|
[_]: $()
|
|
126
126
|
}), {
|
|
127
127
|
get class() {
|
|
128
|
-
return y(a() ? "absolute z-20 box-border p-3" : y("fixed box-border p-4", N() === void 0 && "z-50"),
|
|
128
|
+
return y(a() ? "absolute z-20 box-border p-3" : y("fixed box-border p-4", N() === void 0 && "z-50"), f() && "floe-bottom-drawer-overlay", B() && "floe-side-drawer-overlay", s.exiting() && !f() && "pointer-events-none");
|
|
129
129
|
},
|
|
130
130
|
get style() {
|
|
131
131
|
return C(() => !!a())() ? {
|
|
@@ -148,26 +148,26 @@ function Fe(e) {
|
|
|
148
148
|
"z-index": N()
|
|
149
149
|
};
|
|
150
150
|
}
|
|
151
|
-
}), !1, !0),
|
|
151
|
+
}), !1, !0), u(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",
|
|
158
|
+
return y("absolute inset-0 floe-floating-presence floe-floating-backdrop", e.closeOnBackdropClick === !1 ? "cursor-default" : "cursor-pointer", f() ? "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, i) : T = i,
|
|
165
|
+
return typeof A == "function" ? G(A, i) : T = i, u(i, "data-floe-dialog-panel", c), I(i, M(() => ({
|
|
166
166
|
[_]: $(),
|
|
167
167
|
[ge]: "true"
|
|
168
168
|
}), {
|
|
169
169
|
get class() {
|
|
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",
|
|
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", f() ? "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%",
|
|
@@ -178,7 +178,7 @@ function Fe(e) {
|
|
|
178
178
|
return s.state();
|
|
179
179
|
},
|
|
180
180
|
get inert() {
|
|
181
|
-
return C(() => !!
|
|
181
|
+
return C(() => !!f())() && s.exiting();
|
|
182
182
|
},
|
|
183
183
|
role: "dialog",
|
|
184
184
|
get "aria-modal"() {
|
|
@@ -190,39 +190,39 @@ function Fe(e) {
|
|
|
190
190
|
get "aria-describedby"() {
|
|
191
191
|
return C(() => !!e.bodyDescription)() ? H() : void 0;
|
|
192
192
|
},
|
|
193
|
-
onKeyDown: (
|
|
193
|
+
onKeyDown: (o) => e.onKeyDown?.(o),
|
|
194
194
|
tabIndex: -1
|
|
195
|
-
}), !1, !0), l(i,
|
|
195
|
+
}), !1, !0), l(i, r(g, {
|
|
196
196
|
get when() {
|
|
197
197
|
return e.header === void 0;
|
|
198
198
|
},
|
|
199
199
|
get fallback() {
|
|
200
|
-
return [
|
|
200
|
+
return [r(g, {
|
|
201
201
|
get when() {
|
|
202
202
|
return e.title;
|
|
203
203
|
},
|
|
204
204
|
get children() {
|
|
205
|
-
var
|
|
206
|
-
return l(
|
|
205
|
+
var o = Se();
|
|
206
|
+
return l(o, () => e.title), S(() => u(o, "id", P())), o;
|
|
207
207
|
}
|
|
208
208
|
}), C(() => e.header)];
|
|
209
209
|
},
|
|
210
210
|
get children() {
|
|
211
|
-
return
|
|
211
|
+
return r(g, {
|
|
212
212
|
get when() {
|
|
213
213
|
return e.title;
|
|
214
214
|
},
|
|
215
215
|
get children() {
|
|
216
|
-
var
|
|
217
|
-
return l(v,
|
|
216
|
+
var o = _e(), v = o.firstChild;
|
|
217
|
+
return l(v, r(g, {
|
|
218
218
|
get when() {
|
|
219
219
|
return e.title;
|
|
220
220
|
},
|
|
221
221
|
get children() {
|
|
222
222
|
var w = Ce();
|
|
223
|
-
return l(w, () => e.title), S(() =>
|
|
223
|
+
return l(w, () => e.title), S(() => u(w, "id", P())), w;
|
|
224
224
|
}
|
|
225
|
-
})), l(
|
|
225
|
+
})), l(o, r(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",
|
|
@@ -231,33 +231,33 @@ function Fe(e) {
|
|
|
231
231
|
return e.closeLabel ?? "Close";
|
|
232
232
|
},
|
|
233
233
|
get children() {
|
|
234
|
-
return
|
|
234
|
+
return r(de, {
|
|
235
235
|
class: "w-3.5 h-3.5"
|
|
236
236
|
});
|
|
237
237
|
}
|
|
238
|
-
}), null),
|
|
238
|
+
}), null), o;
|
|
239
239
|
}
|
|
240
240
|
});
|
|
241
241
|
}
|
|
242
|
-
}), b), l(b,
|
|
242
|
+
}), b), l(b, r(g, {
|
|
243
243
|
get when() {
|
|
244
244
|
return e.bodyDescription;
|
|
245
245
|
},
|
|
246
246
|
get children() {
|
|
247
|
-
var
|
|
248
|
-
return l(
|
|
247
|
+
var o = ke();
|
|
248
|
+
return l(o, () => e.bodyDescription), S(() => u(o, "id", H())), o;
|
|
249
249
|
}
|
|
250
|
-
}), null), l(b, () => e.children, null), l(i,
|
|
250
|
+
}), null), l(b, () => e.children, null), l(i, r(g, {
|
|
251
251
|
get when() {
|
|
252
252
|
return e.footer;
|
|
253
253
|
},
|
|
254
254
|
get children() {
|
|
255
|
-
var
|
|
256
|
-
return l(
|
|
255
|
+
var o = Oe();
|
|
256
|
+
return l(o, () => e.footer), o;
|
|
257
257
|
}
|
|
258
|
-
}), null), S((
|
|
259
|
-
var v = y("pointer-events-none relative z-[1] flex h-full w-full", B() ? "items-stretch justify-end" :
|
|
260
|
-
return v !==
|
|
258
|
+
}), null), S((o) => {
|
|
259
|
+
var v = y("pointer-events-none relative z-[1] flex h-full w-full", B() ? "items-stretch justify-end" : f() ? "items-end justify-center" : "items-center justify-center"), w = y("min-h-0 flex-1 overflow-auto overscroll-contain p-3", e.contentClass);
|
|
260
|
+
return v !== o.e && q(h, o.e = v), w !== o.t && q(b, o.t = w), o;
|
|
261
261
|
}, {
|
|
262
262
|
e: void 0,
|
|
263
263
|
t: void 0
|
|
@@ -269,7 +269,7 @@ function Fe(e) {
|
|
|
269
269
|
}
|
|
270
270
|
function We(e) {
|
|
271
271
|
const x = se();
|
|
272
|
-
return
|
|
272
|
+
return r(Fe, {
|
|
273
273
|
get open() {
|
|
274
274
|
return e.open;
|
|
275
275
|
},
|
|
@@ -286,7 +286,7 @@ function We(e) {
|
|
|
286
286
|
return e.globalZIndex;
|
|
287
287
|
},
|
|
288
288
|
get footer() {
|
|
289
|
-
return [
|
|
289
|
+
return [r(j, {
|
|
290
290
|
variant: "ghost",
|
|
291
291
|
onClick: () => e.onOpenChange(!1),
|
|
292
292
|
get disabled() {
|
|
@@ -295,7 +295,7 @@ function We(e) {
|
|
|
295
295
|
get children() {
|
|
296
296
|
return e.cancelText ?? x.config.strings.confirmDialog.cancel;
|
|
297
297
|
}
|
|
298
|
-
}),
|
|
298
|
+
}), r(j, {
|
|
299
299
|
get variant() {
|
|
300
300
|
return e.variant === "destructive" ? "destructive" : "primary";
|
|
301
301
|
},
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { insert as u, createComponent as d, template as
|
|
1
|
+
import { insert as u, createComponent as d, template as c, effect as k, className as $, setAttribute as h, delegateEvents as y } from "solid-js/web";
|
|
2
2
|
import { For as _, onCleanup as C, Show as x } from "solid-js";
|
|
3
3
|
import { createStore as M, produce as w } from "solid-js/store";
|
|
4
4
|
import { createSimpleContext as S } from "./createSimpleContext.js";
|
|
5
5
|
import { cn as N } from "../utils/cn.js";
|
|
6
|
-
var T = /* @__PURE__ */
|
|
6
|
+
var T = /* @__PURE__ */ c('<div class="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm">'), D = /* @__PURE__ */ c('<svg class="w-4 h-4 text-info"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10></circle><path d="M12 16v-4M12 8h.01">'), B = /* @__PURE__ */ c('<svg class="w-4 h-4 text-success"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M5 13l4 4L19 7">'), L = /* @__PURE__ */ c('<svg class="w-4 h-4 text-warning"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">'), A = /* @__PURE__ */ c('<svg class="w-4 h-4 text-error"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10></circle><path stroke-linecap=round d="M15 9l-6 6M9 9l6 6">'), E = /* @__PURE__ */ c('<p class="mt-1 text-[length:var(--floe-type-body)] leading-[var(--floe-line-body)] text-muted-foreground">'), j = /* @__PURE__ */ c('<button type=button class="mt-2 text-[length:var(--floe-type-control)] font-medium text-foreground hover:underline focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2">'), z = /* @__PURE__ */ c('<div><div class="flex items-start gap-3"><span class="flex-shrink-0 mt-0.5"></span><div class="flex-1 min-w-0"><p class="font-medium text-sm"></p></div><button type=button class="flex-shrink-0 text-muted-foreground hover:text-foreground transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2"aria-label=Dismiss><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path stroke-linecap=round stroke-linejoin=round d="M6 18L18 6M6 6l12 12">');
|
|
7
7
|
const F = 5e3;
|
|
8
8
|
function I() {
|
|
9
9
|
const [i, a] = M({
|
|
@@ -14,18 +14,18 @@ function I() {
|
|
|
14
14
|
});
|
|
15
15
|
const s = (t) => {
|
|
16
16
|
const e = n.get(t);
|
|
17
|
-
e && (clearTimeout(e), n.delete(t)), a(w((
|
|
18
|
-
|
|
17
|
+
e && (clearTimeout(e), n.delete(t)), a(w((l) => {
|
|
18
|
+
l.notifications = l.notifications.filter((r) => r.id !== t);
|
|
19
19
|
}));
|
|
20
20
|
}, f = (t) => {
|
|
21
|
-
const e = `notification-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
|
|
21
|
+
const e = `notification-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, l = t.duration ?? F;
|
|
22
22
|
if (a(w((r) => {
|
|
23
23
|
r.notifications.push({
|
|
24
24
|
...t,
|
|
25
25
|
id: e
|
|
26
26
|
});
|
|
27
|
-
})),
|
|
28
|
-
const r = setTimeout(() => s(e),
|
|
27
|
+
})), l > 0) {
|
|
28
|
+
const r = setTimeout(() => s(e), l);
|
|
29
29
|
n.set(e, r);
|
|
30
30
|
}
|
|
31
31
|
return e;
|
|
@@ -97,8 +97,8 @@ function R(i) {
|
|
|
97
97
|
error: () => A()
|
|
98
98
|
}, s = () => i.notification.type === "error" || i.notification.type === "warning" ? "alert" : "status", f = () => s() === "alert" ? "assertive" : "polite";
|
|
99
99
|
return (() => {
|
|
100
|
-
var t = z(), e = t.firstChild,
|
|
101
|
-
return u(
|
|
100
|
+
var t = z(), e = t.firstChild, l = e.firstChild, r = l.nextSibling, p = r.firstChild, b = r.nextSibling;
|
|
101
|
+
return u(l, () => n[i.notification.type]()), u(p, () => i.notification.title), u(r, d(x, {
|
|
102
102
|
get when() {
|
|
103
103
|
return i.notification.message;
|
|
104
104
|
},
|