@floegence/floe-webapp-core 0.90.1 → 0.90.2
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 +37 -37
- package/dist/components/ui/Tabs.js +159 -162
- package/dist/components/ui/tabReorder.d.ts +1 -3
- package/dist/components/ui/tabReorder.js +83 -45
- package/dist/styles.css +1 -1
- package/dist/surface.css +36 -2
- package/package.json +1 -1
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { createComponent as l, Portal as lt, use as Q, spread as ke, mergeProps as Oe, memo as Z, insert as c, effect as
|
|
2
|
-
import { createSignal as y, createUniqueId as st, onCleanup as D, onMount as dt, createEffect as I, untrack as W, Show as
|
|
1
|
+
import { createComponent as l, Portal as lt, use as Q, spread as ke, mergeProps as Oe, memo as Z, insert as c, effect as g, setAttribute as Te, addEventListener as P, className as x, template as a, delegateEvents as at } from "solid-js/web";
|
|
2
|
+
import { createSignal as y, createUniqueId as st, onCleanup as D, onMount as dt, createEffect as I, untrack as W, Show as w, batch as ge } from "solid-js";
|
|
3
3
|
import { cn as J } from "../../utils/cn.js";
|
|
4
4
|
import { useOptionalLayout as ct } from "../../context/LayoutContext.js";
|
|
5
5
|
import { useResolvedFloeConfig as ut } from "../../context/FloeConfigContext.js";
|
|
6
6
|
import { useMediaQuery as ft } from "../../hooks/useMediaQuery.js";
|
|
7
7
|
import { Button as Le } from "./Button.js";
|
|
8
|
-
import { Restore as ht, Maximize as
|
|
8
|
+
import { Restore as ht, Maximize as gt, X as wt } from "../icons/index.js";
|
|
9
9
|
import { startHotInteraction as mt } from "../../utils/hotInteraction.js";
|
|
10
10
|
import { startPointerSession as vt } from "./pointerSession.js";
|
|
11
|
-
import { resolveFloatingWindowViewport as
|
|
11
|
+
import { resolveFloatingWindowViewport as we, normalizeFloatingWindowRect as me, resolveFloatingWindowRect as xt } from "./floatingWindowGeometry.js";
|
|
12
12
|
import { observeViewport as yt } from "../../viewport.js";
|
|
13
13
|
import { createFloatingPresence as bt } from "./floatingPresence.js";
|
|
14
14
|
import { LOCAL_INTERACTION_SURFACE_ATTR as Be } from "./localInteractionSurface.js";
|
|
15
15
|
import { resolveFloatingBoundary as zt } from "./surfaceFloatingBoundary.js";
|
|
16
16
|
import { SURFACE_PORTAL_LAYER_ATTR as pt, resolveSurfacePortalHost as $t } from "./dialogSurfaceScope.js";
|
|
17
|
-
var _t = /* @__PURE__ */ a("<span hidden>"), St = /* @__PURE__ */ a("<h2 class=sr-only>"), Pt = /* @__PURE__ */ a('<div data-floe-floating-window-title-content=true class="flex h-full min-w-0 flex-1 items-center">'), It = /* @__PURE__ */ a('<div data-floe-floating-window-header-actions=true class="flex shrink-0
|
|
17
|
+
var _t = /* @__PURE__ */ a("<span hidden>"), St = /* @__PURE__ */ a("<h2 class=sr-only>"), Pt = /* @__PURE__ */ a('<div data-floe-floating-window-title-content=true class="flex h-full min-w-0 flex-1 items-center">'), It = /* @__PURE__ */ a('<div data-floe-floating-window-header-actions=true class="flex shrink-0 items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), Rt = /* @__PURE__ */ a('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-[var(--floe-line)]">'), Ct = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), At = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), Et = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), Mt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), Ft = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), kt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), Ot = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), Tt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Lt = /* @__PURE__ */ a('<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 h-full flex-1 min-w-0 items-center px-3"></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">'), Bt = /* @__PURE__ */ a('<span data-floe-floating-window-title-icon=true aria-hidden=true class="flex size-4 shrink-0 items-center justify-center">'), Dt = /* @__PURE__ */ a('<h2 class="flex min-w-0 items-center gap-2 text-xs leading-none font-medium select-none"><span class="min-w-0 truncate">');
|
|
18
18
|
function nn(i) {
|
|
19
19
|
const ve = () => i.resizable ?? !0, K = () => i.maximizable ?? !0, xe = () => i.draggable ?? !0, q = () => i.minSize ?? {
|
|
20
20
|
width: 200,
|
|
@@ -75,7 +75,7 @@ function nn(i) {
|
|
|
75
75
|
v = {
|
|
76
76
|
...e
|
|
77
77
|
};
|
|
78
|
-
const t =
|
|
78
|
+
const t = we(R(), b());
|
|
79
79
|
A = {
|
|
80
80
|
x: t.width > e.width ? (e.x - t.x) / (t.width - e.width) : A?.x ?? 0.5,
|
|
81
81
|
y: t.height > e.height ? (e.y - t.y) / (t.height - e.height) : A?.y ?? 0.5
|
|
@@ -186,7 +186,7 @@ function nn(i) {
|
|
|
186
186
|
if (typeof window > "u") return;
|
|
187
187
|
const t = R();
|
|
188
188
|
if (u() || m()) {
|
|
189
|
-
ue(
|
|
189
|
+
ue(we(t, b()));
|
|
190
190
|
return;
|
|
191
191
|
}
|
|
192
192
|
let r = me({
|
|
@@ -200,7 +200,7 @@ function nn(i) {
|
|
|
200
200
|
center: e?.center ?? !1
|
|
201
201
|
});
|
|
202
202
|
if (i.boundary !== void 0 && A && !e?.center) {
|
|
203
|
-
const o =
|
|
203
|
+
const o = we(t, b());
|
|
204
204
|
r = {
|
|
205
205
|
...r,
|
|
206
206
|
x: o.x + A.x * Math.max(0, o.width - r.width),
|
|
@@ -225,7 +225,7 @@ function nn(i) {
|
|
|
225
225
|
mobile: i.boundary === void 0 && E(),
|
|
226
226
|
mobilePadding: X
|
|
227
227
|
}) : null;
|
|
228
|
-
if (
|
|
228
|
+
if (ge(() => {
|
|
229
229
|
if (o) {
|
|
230
230
|
ue(o);
|
|
231
231
|
const S = {
|
|
@@ -261,7 +261,7 @@ function nn(i) {
|
|
|
261
261
|
} : $t({
|
|
262
262
|
owner: ee
|
|
263
263
|
}), o = zt(r, i.boundary, t?.safeArea);
|
|
264
|
-
|
|
264
|
+
ge(() => {
|
|
265
265
|
qe(!!(o && o.width > 16 && o.height > 16)), We(o ? {
|
|
266
266
|
x: o.left,
|
|
267
267
|
y: o.top,
|
|
@@ -276,7 +276,7 @@ function nn(i) {
|
|
|
276
276
|
});
|
|
277
277
|
};
|
|
278
278
|
D(yt(window, (t) => {
|
|
279
|
-
|
|
279
|
+
ge(() => {
|
|
280
280
|
De(t), W(e);
|
|
281
281
|
});
|
|
282
282
|
})), I(() => {
|
|
@@ -344,7 +344,7 @@ function nn(i) {
|
|
|
344
344
|
T(), O()?.fixedOffset, j(h === null ? e : s);
|
|
345
345
|
});
|
|
346
346
|
const nt = (e) => {
|
|
347
|
-
!xe() || m() || h !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [role="tab"], [data-floe-interactive], [
|
|
347
|
+
!xe() || m() || h !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [role="tab"], [data-floe-interactive], [contenteditable="true"]') || (e.preventDefault(), p?.cancel(), p = void 0, le = e.currentTarget instanceof HTMLElement && e.currentTarget.getBoundingClientRect().height || 32, h = e.pointerId, f = "drag", ye(!0), z = {
|
|
348
348
|
x: e.clientX,
|
|
349
349
|
y: e.clientY
|
|
350
350
|
}, F = {
|
|
@@ -396,7 +396,7 @@ function nn(i) {
|
|
|
396
396
|
}, Ae = () => {
|
|
397
397
|
!K() || m() || (h !== null && he(!0), oe(!u()), B());
|
|
398
398
|
}, ot = (e) => {
|
|
399
|
-
e.target?.closest('button, input, select, textarea, a, [role="button"], [role="tab"], [data-floe-interactive], [
|
|
399
|
+
e.target?.closest('button, input, select, textarea, a, [role="button"], [role="tab"], [data-floe-interactive], [contenteditable="true"]') || Ae();
|
|
400
400
|
}, rt = (e) => {
|
|
401
401
|
Ke(e.target) && Je();
|
|
402
402
|
}, _ = (e) => J("absolute z-10", {
|
|
@@ -412,7 +412,7 @@ function nn(i) {
|
|
|
412
412
|
return [(() => {
|
|
413
413
|
var e = _t(), t = ee;
|
|
414
414
|
return typeof t == "function" ? Q(t, e) : ee = e, e;
|
|
415
|
-
})(), l(
|
|
415
|
+
})(), l(w, {
|
|
416
416
|
get when() {
|
|
417
417
|
return M.mounted();
|
|
418
418
|
},
|
|
@@ -483,18 +483,18 @@ function nn(i) {
|
|
|
483
483
|
}
|
|
484
484
|
}), !1, !0), r.$$dblclick = ot, r.$$pointerdown = nt;
|
|
485
485
|
var Me = se;
|
|
486
|
-
return typeof Me == "function" ? Q(Me, r) : se = r, c(o, l(
|
|
486
|
+
return typeof Me == "function" ? Q(Me, r) : se = r, c(o, l(w, {
|
|
487
487
|
get when() {
|
|
488
488
|
return i.titleContent;
|
|
489
489
|
},
|
|
490
490
|
get fallback() {
|
|
491
|
-
return l(
|
|
491
|
+
return l(w, {
|
|
492
492
|
get when() {
|
|
493
493
|
return i.title;
|
|
494
494
|
},
|
|
495
495
|
get children() {
|
|
496
496
|
var n = Dt(), G = n.firstChild;
|
|
497
|
-
return c(n, l(
|
|
497
|
+
return c(n, l(w, {
|
|
498
498
|
get when() {
|
|
499
499
|
return i.titleIcon;
|
|
500
500
|
},
|
|
@@ -502,25 +502,25 @@ function nn(i) {
|
|
|
502
502
|
var Fe = Bt();
|
|
503
503
|
return c(Fe, () => i.titleIcon), Fe;
|
|
504
504
|
}
|
|
505
|
-
}), G), c(G, () => i.title),
|
|
505
|
+
}), G), c(G, () => i.title), g(() => Te(n, "id", ie())), n;
|
|
506
506
|
}
|
|
507
507
|
});
|
|
508
508
|
},
|
|
509
509
|
get children() {
|
|
510
|
-
return [l(
|
|
510
|
+
return [l(w, {
|
|
511
511
|
get when() {
|
|
512
512
|
return i.title;
|
|
513
513
|
},
|
|
514
514
|
get children() {
|
|
515
515
|
var n = St();
|
|
516
|
-
return c(n, () => i.title),
|
|
516
|
+
return c(n, () => i.title), g(() => Te(n, "id", ie())), n;
|
|
517
517
|
}
|
|
518
518
|
}), (() => {
|
|
519
519
|
var n = Pt();
|
|
520
520
|
return c(n, () => i.titleContent), n;
|
|
521
521
|
})()];
|
|
522
522
|
}
|
|
523
|
-
})), c(r, l(
|
|
523
|
+
})), c(r, l(w, {
|
|
524
524
|
get when() {
|
|
525
525
|
return i.headerActions;
|
|
526
526
|
},
|
|
@@ -528,7 +528,7 @@ function nn(i) {
|
|
|
528
528
|
var n = It(), G = n.firstChild;
|
|
529
529
|
return c(n, () => i.headerActions, G), n;
|
|
530
530
|
}
|
|
531
|
-
}), S), c(S, l(
|
|
531
|
+
}), S), c(S, l(w, {
|
|
532
532
|
get when() {
|
|
533
533
|
return Z(() => !!K())() && !m();
|
|
534
534
|
},
|
|
@@ -545,12 +545,12 @@ function nn(i) {
|
|
|
545
545
|
return Z(() => !!u())() ? i.labels?.restore ?? "Restore" : i.labels?.maximize ?? "Maximize";
|
|
546
546
|
},
|
|
547
547
|
get children() {
|
|
548
|
-
return l(
|
|
548
|
+
return l(w, {
|
|
549
549
|
get when() {
|
|
550
550
|
return u();
|
|
551
551
|
},
|
|
552
552
|
get fallback() {
|
|
553
|
-
return l(
|
|
553
|
+
return l(gt, {
|
|
554
554
|
class: "w-3 h-3"
|
|
555
555
|
});
|
|
556
556
|
},
|
|
@@ -575,11 +575,11 @@ function nn(i) {
|
|
|
575
575
|
return i.labels?.close ?? "Close";
|
|
576
576
|
},
|
|
577
577
|
get children() {
|
|
578
|
-
return l(
|
|
578
|
+
return l(wt, {
|
|
579
579
|
class: "w-3.5 h-3.5"
|
|
580
580
|
});
|
|
581
581
|
}
|
|
582
|
-
}), null), c(U, () => i.children), c(t, l(
|
|
582
|
+
}), null), c(U, () => i.children), c(t, l(w, {
|
|
583
583
|
get when() {
|
|
584
584
|
return i.footer;
|
|
585
585
|
},
|
|
@@ -587,45 +587,45 @@ function nn(i) {
|
|
|
587
587
|
var n = Rt();
|
|
588
588
|
return c(n, () => i.footer), n;
|
|
589
589
|
}
|
|
590
|
-
}), null), c(e, l(
|
|
590
|
+
}), null), c(e, l(w, {
|
|
591
591
|
get when() {
|
|
592
592
|
return Z(() => !!(ve() && !u()))() && !m();
|
|
593
593
|
},
|
|
594
594
|
get children() {
|
|
595
595
|
return [(() => {
|
|
596
596
|
var n = Ct();
|
|
597
|
-
return P(n, "pointerdown", $("n"), !0),
|
|
597
|
+
return P(n, "pointerdown", $("n"), !0), g(() => x(n, _("n"))), n;
|
|
598
598
|
})(), (() => {
|
|
599
599
|
var n = At();
|
|
600
|
-
return P(n, "pointerdown", $("s"), !0),
|
|
601
|
-
})(), l(
|
|
600
|
+
return P(n, "pointerdown", $("s"), !0), g(() => x(n, _("s"))), n;
|
|
601
|
+
})(), l(w, {
|
|
602
602
|
get when() {
|
|
603
603
|
return !E();
|
|
604
604
|
},
|
|
605
605
|
get children() {
|
|
606
606
|
return [(() => {
|
|
607
607
|
var n = Et();
|
|
608
|
-
return P(n, "pointerdown", $("e"), !0),
|
|
608
|
+
return P(n, "pointerdown", $("e"), !0), g(() => x(n, _("e"))), n;
|
|
609
609
|
})(), (() => {
|
|
610
610
|
var n = Mt();
|
|
611
|
-
return P(n, "pointerdown", $("w"), !0),
|
|
611
|
+
return P(n, "pointerdown", $("w"), !0), g(() => x(n, _("w"))), n;
|
|
612
612
|
})(), (() => {
|
|
613
613
|
var n = Ft();
|
|
614
|
-
return P(n, "pointerdown", $("ne"), !0),
|
|
614
|
+
return P(n, "pointerdown", $("ne"), !0), g(() => x(n, _("ne"))), n;
|
|
615
615
|
})(), (() => {
|
|
616
616
|
var n = kt();
|
|
617
|
-
return P(n, "pointerdown", $("nw"), !0),
|
|
617
|
+
return P(n, "pointerdown", $("nw"), !0), g(() => x(n, _("nw"))), n;
|
|
618
618
|
})(), (() => {
|
|
619
619
|
var n = Ot();
|
|
620
|
-
return P(n, "pointerdown", $("se"), !0),
|
|
620
|
+
return P(n, "pointerdown", $("se"), !0), g(() => x(n, _("se"))), n;
|
|
621
621
|
})(), (() => {
|
|
622
622
|
var n = Tt();
|
|
623
|
-
return P(n, "pointerdown", $("sw"), !0),
|
|
623
|
+
return P(n, "pointerdown", $("sw"), !0), g(() => x(n, _("sw"))), n;
|
|
624
624
|
})()];
|
|
625
625
|
}
|
|
626
626
|
})];
|
|
627
627
|
}
|
|
628
|
-
}), null),
|
|
628
|
+
}), null), g(() => x(r, J("flex shrink-0 items-center justify-between h-8", "border-b", u() ? "rounded-none" : "rounded-t-panel", xe() && !m() && (L() ? "cursor-grabbing" : "cursor-move")))), e;
|
|
629
629
|
}
|
|
630
630
|
});
|
|
631
631
|
}
|