@floegence/floe-webapp-core 0.91.3 → 0.91.4
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,7 +1,7 @@
|
|
|
1
|
-
import { use as
|
|
2
|
-
import { splitProps as I, createSignal as J, createEffect as K, onMount as Q, onCleanup as
|
|
1
|
+
import { use as k, spread as V, mergeProps as q, insert as $, createComponent as E, memo as B, effect as N, setAttribute as p, className as T, setStyleProperty as x, template as A, delegateEvents as G } from "solid-js/web";
|
|
2
|
+
import { splitProps as I, createSignal as J, createEffect as K, onMount as Q, onCleanup as j, For as U, untrack as X } from "solid-js";
|
|
3
3
|
import { cn as z } from "../../utils/cn.js";
|
|
4
|
-
var Y = /* @__PURE__ */
|
|
4
|
+
var Y = /* @__PURE__ */ A("<div role=group data-floe-surface=inset data-floe-surface-part=rail><span aria-hidden=true>"), Z = /* @__PURE__ */ A('<button type=button role=radio data-floe-surface-part=segment data-floe-interactive=item><span class="inline-flex items-center gap-1.5"><span class=floe-segmented-control__label>');
|
|
5
5
|
const ee = {
|
|
6
6
|
sm: {
|
|
7
7
|
container: "p-0.5 gap-0.5",
|
|
@@ -19,18 +19,18 @@ const ee = {
|
|
|
19
19
|
icon: "w-4 h-4"
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
-
function ne(
|
|
23
|
-
const [r,
|
|
24
|
-
let
|
|
22
|
+
function ne(D) {
|
|
23
|
+
const [r, H] = I(D, ["value", "onChange", "options", "size", "disabled", "class"]);
|
|
24
|
+
let c, f;
|
|
25
25
|
const h = /* @__PURE__ */ new Map(), [s, S] = J();
|
|
26
|
-
let
|
|
26
|
+
let u, m, b;
|
|
27
27
|
const y = () => {
|
|
28
28
|
const o = h.get(r.value);
|
|
29
|
-
if (!
|
|
30
|
-
|
|
29
|
+
if (!c || !o) {
|
|
30
|
+
m?.cancel(), S(void 0), b = void 0;
|
|
31
31
|
return;
|
|
32
32
|
}
|
|
33
|
-
if (!o.offsetWidth || !
|
|
33
|
+
if (!o.offsetWidth || !c.getClientRects().length) return;
|
|
34
34
|
const n = {
|
|
35
35
|
x: o.offsetLeft,
|
|
36
36
|
y: o.offsetTop,
|
|
@@ -38,40 +38,40 @@ function ne(L) {
|
|
|
38
38
|
height: o.offsetHeight
|
|
39
39
|
}, v = X(s);
|
|
40
40
|
if (v && Object.keys(n).every((a) => n[a] === v[a]) && b === r.value) return;
|
|
41
|
-
const e = v && b !== r.value &&
|
|
41
|
+
const e = v && b !== r.value && f && !window.matchMedia("(prefers-reduced-motion: reduce), (forced-colors: active)").matches ? getComputedStyle(f) : void 0, l = e ? {
|
|
42
42
|
transform: e.transform,
|
|
43
43
|
width: e.width
|
|
44
44
|
} : void 0;
|
|
45
|
-
if (
|
|
46
|
-
const a = getComputedStyle(d);
|
|
47
|
-
|
|
45
|
+
if (m?.cancel(), S(n), b = r.value, l && f) {
|
|
46
|
+
const a = getComputedStyle(c), i = a.getPropertyValue("--floe-duration-slow").trim(), d = parseFloat(i) * (i.endsWith("ms") ? 1 : 1e3);
|
|
47
|
+
m = f.animate([l, {
|
|
48
48
|
transform: `translate(${n.x}px, ${n.y}px)`,
|
|
49
49
|
width: `${n.width}px`
|
|
50
50
|
}], {
|
|
51
51
|
// Position changes need visible travel: the fast entrance curve
|
|
52
52
|
// covers almost 90% of this short rail in its first 60ms.
|
|
53
|
-
duration:
|
|
53
|
+
duration: Number.isFinite(d) ? d : 280,
|
|
54
54
|
easing: a.getPropertyValue("--floe-ease-in-out").trim() || "ease-in-out"
|
|
55
|
-
}),
|
|
55
|
+
}), m.id = "floe-segmented-selection";
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
58
|
K(() => {
|
|
59
59
|
r.value, r.options, r.size, y();
|
|
60
60
|
}), Q(() => {
|
|
61
61
|
if (typeof ResizeObserver < "u") {
|
|
62
|
-
|
|
63
|
-
for (const o of h.values())
|
|
62
|
+
u = new ResizeObserver(y), u.observe(c);
|
|
63
|
+
for (const o of h.values()) u.observe(o);
|
|
64
64
|
}
|
|
65
65
|
y();
|
|
66
|
-
}),
|
|
67
|
-
|
|
66
|
+
}), j(() => {
|
|
67
|
+
u?.disconnect(), m?.cancel();
|
|
68
68
|
});
|
|
69
|
-
const P = () => r.size ?? "md", w = () => ee[P()],
|
|
69
|
+
const P = () => r.size ?? "md", w = () => ee[P()], L = (o, n) => {
|
|
70
70
|
r.disabled || n || o !== r.value && r.onChange(o);
|
|
71
71
|
};
|
|
72
72
|
return (() => {
|
|
73
|
-
var o = Y(), n = o.firstChild, v =
|
|
74
|
-
typeof v == "function" ?
|
|
73
|
+
var o = Y(), n = o.firstChild, v = c;
|
|
74
|
+
typeof v == "function" ? k(v, o) : c = o, V(o, q({
|
|
75
75
|
get "data-floe-segmented-pill"() {
|
|
76
76
|
return s() ? "true" : void 0;
|
|
77
77
|
},
|
|
@@ -81,30 +81,30 @@ function ne(L) {
|
|
|
81
81
|
get class() {
|
|
82
82
|
return z("floe-segmented-control relative inline-flex items-center border", "rounded-group", "text-[length:var(--floe-type-control)] leading-[var(--floe-line-control)]", w().container, r.disabled && "opacity-50 pointer-events-none", r.class);
|
|
83
83
|
}
|
|
84
|
-
},
|
|
85
|
-
var C =
|
|
86
|
-
return typeof C == "function" ?
|
|
84
|
+
}, H), !1, !0);
|
|
85
|
+
var C = f;
|
|
86
|
+
return typeof C == "function" ? k(C, n) : f = n, $(o, E(U, {
|
|
87
87
|
get each() {
|
|
88
88
|
return r.options;
|
|
89
89
|
},
|
|
90
90
|
children: (e) => {
|
|
91
91
|
const l = () => r.value === e.value, a = () => r.disabled || e.disabled;
|
|
92
92
|
return (() => {
|
|
93
|
-
var i = Z(),
|
|
94
|
-
return i.$$click = () =>
|
|
95
|
-
h.set(e.value, t),
|
|
96
|
-
|
|
93
|
+
var i = Z(), d = i.firstChild, g = d.firstChild;
|
|
94
|
+
return i.$$click = () => L(e.value, e.disabled), k((t) => {
|
|
95
|
+
h.set(e.value, t), u?.observe(t), j(() => {
|
|
96
|
+
u?.unobserve(t), h.delete(e.value);
|
|
97
97
|
});
|
|
98
|
-
}, i),
|
|
98
|
+
}, i), $(d, (() => {
|
|
99
99
|
var t = B(() => !!e.icon);
|
|
100
|
-
return () => t() &&
|
|
100
|
+
return () => t() && E(e.icon, {
|
|
101
101
|
get class() {
|
|
102
102
|
return w().icon;
|
|
103
103
|
}
|
|
104
104
|
});
|
|
105
|
-
})(),
|
|
106
|
-
var _ = e.label,
|
|
107
|
-
return _ !== t.e && p(i, "aria-label", t.e = _),
|
|
105
|
+
})(), g), $(g, () => e.label), N((t) => {
|
|
106
|
+
var _ = e.label, F = e.label, M = l() ? "raised" : "flat", O = l(), R = a(), W = z("floe-segmented-control__item relative font-medium cursor-pointer border", "transition-[background-color,border-color,color,box-shadow] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--floe-plane)]", w().button, l() ? "text-[var(--primary-foreground)]" : "text-[var(--floe-ink-soft)] hover:text-foreground", a() && "cursor-not-allowed opacity-50");
|
|
107
|
+
return _ !== t.e && p(i, "aria-label", t.e = _), F !== t.t && p(i, "title", t.t = F), M !== t.a && p(i, "data-floe-surface", t.a = M), O !== t.o && p(i, "aria-checked", t.o = O), R !== t.i && (i.disabled = t.i = R), W !== t.n && T(i, t.n = W), t;
|
|
108
108
|
}, {
|
|
109
109
|
e: void 0,
|
|
110
110
|
t: void 0,
|
|
@@ -115,9 +115,9 @@ function ne(L) {
|
|
|
115
115
|
}), i;
|
|
116
116
|
})();
|
|
117
117
|
}
|
|
118
|
-
}), null),
|
|
119
|
-
var l = z("floe-segmented-control__pill", P() === "lg" ? "rounded-md" : "rounded-sm"), a = s() ? "visible" : "hidden", i = `translate(${s()?.x ?? 0}px, ${s()?.y ?? 0}px)`,
|
|
120
|
-
return l !== e.e &&
|
|
118
|
+
}), null), N((e) => {
|
|
119
|
+
var l = z("floe-segmented-control__pill", P() === "lg" ? "rounded-md" : "rounded-sm"), a = s() ? "visible" : "hidden", i = `translate(${s()?.x ?? 0}px, ${s()?.y ?? 0}px)`, d = `${s()?.width ?? 0}px`, g = `${s()?.height ?? 0}px`;
|
|
120
|
+
return l !== e.e && T(n, e.e = l), a !== e.t && x(n, "visibility", e.t = a), i !== e.a && x(n, "transform", e.a = i), d !== e.o && x(n, "width", e.o = d), g !== e.i && x(n, "height", e.i = g), e;
|
|
121
121
|
}, {
|
|
122
122
|
e: void 0,
|
|
123
123
|
t: void 0,
|