@floegence/floe-webapp-core 0.91.3 → 0.91.5
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/PromptCard.js +105 -100
- package/dist/components/ui/SegmentedControl.js +38 -38
- package/dist/components/ui/Select.d.ts +2 -0
- package/dist/components/ui/Select.js +41 -41
- package/dist/floe.css +2 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,96 +1,100 @@
|
|
|
1
|
-
import { createComponent as u, Portal as
|
|
2
|
-
import { createUniqueId as
|
|
1
|
+
import { createComponent as u, Portal as ye, use as J, setAttribute as y, insert as d, spread as we, mergeProps as Se, effect as N, setStyleProperty as M, className as Ce, template as O, delegateEvents as Me } from "solid-js/web";
|
|
2
|
+
import { createUniqueId as ke, createSignal as z, onCleanup as Z, createMemo as F, createEffect as W, untrack as p, Show as E } from "solid-js";
|
|
3
3
|
import { useOverlayMask as Pe } from "../../hooks/useOverlayMask.js";
|
|
4
|
-
import { deferAfterPaint as
|
|
5
|
-
import { ensureSurfacePortalInteractionTracking as
|
|
6
|
-
import { cn as
|
|
7
|
-
import { readViewportSnapshot as
|
|
8
|
-
import { X as
|
|
9
|
-
import { Button as
|
|
4
|
+
import { deferAfterPaint as ue } from "../../utils/defer.js";
|
|
5
|
+
import { ensureSurfacePortalInteractionTracking as Ee, resolveSurfacePortalHost as $e, resolveSurfacePortalScale as De, resolveSurfacePortalBoundaryRect as Le, projectSurfacePortalPosition as Ae, readFreshInteractionSnapshot as Te, resolveSurfacePortalMount as Ie, isSurfacePortalMode as ze } from "./dialogSurfaceScope.js";
|
|
6
|
+
import { cn as fe } from "../../utils/cn.js";
|
|
7
|
+
import { readViewportSnapshot as Fe, observeViewport as Oe } from "../../viewport.js";
|
|
8
|
+
import { X as Be, Plus as He, ArrowUp as qe } from "../icons/index.js";
|
|
9
|
+
import { Button as ee } from "./Button.js";
|
|
10
10
|
import { Select as Re } from "./Select.js";
|
|
11
11
|
import { createFloatingPresence as Ve } from "./floatingPresence.js";
|
|
12
|
-
var
|
|
13
|
-
function
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
let
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
var _e = /* @__PURE__ */ O("<span class=floe-prompt-card-icon aria-hidden=true>"), Ne = /* @__PURE__ */ O("<div class=floe-prompt-card-references>"), We = /* @__PURE__ */ O("<input type=file multiple hidden tabindex=-1>"), Xe = /* @__PURE__ */ O("<div class=floe-prompt-card-feedback>"), Ke = /* @__PURE__ */ O("<div class=floe-prompt-card-positioner><div role=dialog aria-modal=false tabindex=-1 data-floe-prompt-card data-floe-input-surface data-floe-surface=floating data-floe-local-interaction-surface=true><header class=floe-prompt-card-header><h2></h2></header><div><div class=floe-prompt-card-question></div><div class=floe-prompt-card-composer><div class=floe-prompt-card-field><textarea class=floe-prompt-card-input rows=2></textarea></div><div class=floe-prompt-card-actions><div class=floe-prompt-card-tools>");
|
|
13
|
+
function at(t) {
|
|
14
|
+
Ee();
|
|
15
|
+
const te = ke(), [me, ne] = z(!1), [he, ae] = z(!1), c = () => t.busy || me();
|
|
16
|
+
let X = !1;
|
|
17
|
+
Z(() => {
|
|
18
|
+
X = !0;
|
|
19
19
|
});
|
|
20
|
-
const [h,
|
|
20
|
+
const [h, ge] = z(Fe(window)), [$, ve] = z(), [K, be] = z({
|
|
21
21
|
width: 0,
|
|
22
22
|
height: 0
|
|
23
|
-
}),
|
|
23
|
+
}), xe = F((n) => t.open ? t.anchor : n), w = Ve({
|
|
24
24
|
open: () => t.open,
|
|
25
|
-
element:
|
|
25
|
+
element: $
|
|
26
26
|
});
|
|
27
|
-
let
|
|
28
|
-
const
|
|
29
|
-
t.open && !c() && !t.inputDisabled &&
|
|
27
|
+
let g, U, D = !1, j, B;
|
|
28
|
+
const Q = () => queueMicrotask(() => {
|
|
29
|
+
!X && t.open && !c() && !t.inputDisabled && g?.isConnected && g.focus({
|
|
30
|
+
preventScroll: !0
|
|
31
|
+
});
|
|
32
|
+
}), Y = (n) => {
|
|
33
|
+
t.open && !c() && !t.inputDisabled && n.length && (t.attachment?.onFiles(n), Q());
|
|
30
34
|
};
|
|
31
35
|
W(() => {
|
|
32
|
-
(!t.open || c() || t.inputDisabled) &&
|
|
36
|
+
(!t.open || c() || t.inputDisabled) && ae(!1);
|
|
33
37
|
});
|
|
34
|
-
const
|
|
38
|
+
const L = F(() => !w.mounted() || t.portalScope === "viewport" ? {
|
|
35
39
|
host: null,
|
|
36
40
|
boundaryHost: null,
|
|
37
41
|
mountHost: null,
|
|
38
42
|
mode: "global"
|
|
39
43
|
} : $e({
|
|
40
44
|
owner: t.owner
|
|
41
|
-
})), H = () =>
|
|
45
|
+
})), H = () => ze(L()), A = F(() => (h(), K(), H() ? De(L()) : {
|
|
42
46
|
x: h().fixedScale,
|
|
43
47
|
y: h().fixedScale
|
|
44
48
|
}));
|
|
45
49
|
W(() => {
|
|
46
|
-
|
|
50
|
+
w.mounted() && Z(Oe(window, ge));
|
|
47
51
|
}), W(() => {
|
|
48
|
-
const n =
|
|
49
|
-
if (!
|
|
50
|
-
const a = () =>
|
|
52
|
+
const n = $();
|
|
53
|
+
if (!w.mounted() || !n) return;
|
|
54
|
+
const a = () => be((s) => {
|
|
51
55
|
const f = n.offsetWidth, m = n.offsetHeight;
|
|
52
56
|
return s.width === f && s.height === m ? s : {
|
|
53
57
|
width: f,
|
|
54
58
|
height: m
|
|
55
59
|
};
|
|
56
60
|
}), i = new ResizeObserver(a);
|
|
57
|
-
i.observe(n), a(),
|
|
61
|
+
i.observe(n), a(), Z(() => i.disconnect());
|
|
58
62
|
});
|
|
59
|
-
const
|
|
60
|
-
const n = h(), a = H() ?
|
|
63
|
+
const S = F(() => {
|
|
64
|
+
const n = h(), a = H() ? Le(L()) : n.visible, i = n.visible.width < 640 ? 8 : 12, s = t.viewportInsets, f = Math.max(n.visible.left, a.left) + Math.max(n.safeArea.left, s?.left ?? 0) + i, m = Math.max(n.visible.top, a.top) + Math.max(n.safeArea.top, s?.top ?? 0) + i, C = Math.min(n.visible.right, a.right) - Math.max(n.safeArea.right, s?.right ?? 0) - i, k = Math.min(n.visible.bottom, a.bottom) - Math.max(n.safeArea.bottom, s?.bottom ?? 0) - i, o = Math.max(0, C - f), v = Math.min(K().width * A().x, o), P = Math.max(0, k - m), e = Math.min(K().height * A().y, P), r = xe(), l = (R, V, _) => Math.max(V, Math.min(R, _)), b = l(r ? r.x + 8 : f + (o - v) / 2, f, C - v), x = !r || r.y + 8 + e <= k, T = r ? x ? r.y + 8 : r.y - e - 8 : m + Math.max(0, (P - e) * 0.32), I = l(T, m, k - e);
|
|
61
65
|
return {
|
|
62
|
-
x:
|
|
66
|
+
x: b,
|
|
63
67
|
y: I,
|
|
64
68
|
availableWidth: o,
|
|
65
|
-
maxHeight:
|
|
66
|
-
side: !r || I !== T ? "edge" :
|
|
67
|
-
originX: r ? l(r.x -
|
|
69
|
+
maxHeight: P,
|
|
70
|
+
side: !r || I !== T ? "edge" : x ? "bottom" : "top",
|
|
71
|
+
originX: r ? l(r.x - b, 16, v - 16) : v / 2
|
|
68
72
|
};
|
|
69
|
-
}),
|
|
70
|
-
x: (
|
|
71
|
-
y: (
|
|
72
|
-
}),
|
|
73
|
-
c() || !t.open ||
|
|
74
|
-
!t.open &&
|
|
73
|
+
}), ie = F(() => H() ? Ae(S(), L()) : {
|
|
74
|
+
x: (S().x + h().fixedOffset.left) / h().fixedScale,
|
|
75
|
+
y: (S().y + h().fixedOffset.top) / h().fixedScale
|
|
76
|
+
}), q = (n) => {
|
|
77
|
+
c() || !t.open || D || (t.onClose(), n && ue(() => p(() => {
|
|
78
|
+
!t.open && U?.isConnected && U.focus({
|
|
75
79
|
preventScroll: !0
|
|
76
80
|
});
|
|
77
81
|
})));
|
|
78
82
|
};
|
|
79
83
|
W(() => {
|
|
80
84
|
if (!t.open) return;
|
|
81
|
-
const n = document.activeElement, i = t.owner ??
|
|
82
|
-
i && !
|
|
83
|
-
!t.open || t.autoFocus === !1 || !
|
|
85
|
+
const n = document.activeElement, i = t.owner ?? Te()?.target?.closest("button, a[href], input, [tabindex]") ?? (n instanceof HTMLElement && n !== document.body ? n : void 0);
|
|
86
|
+
i && !p($)?.contains(i) && !t.containsTarget?.(i) && (U = i), queueMicrotask(() => {
|
|
87
|
+
!t.open || t.autoFocus === !1 || !g?.isConnected || (g.focus({
|
|
84
88
|
preventScroll: !0
|
|
85
|
-
}),
|
|
89
|
+
}), g.setSelectionRange(g.value.length, g.value.length));
|
|
86
90
|
});
|
|
87
91
|
}), Pe({
|
|
88
92
|
open: () => t.open,
|
|
89
|
-
root:
|
|
90
|
-
containsTarget: (n) => !!(n instanceof Node &&
|
|
91
|
-
onClose: () =>
|
|
93
|
+
root: $,
|
|
94
|
+
containsTarget: (n) => !!(n instanceof Node && $()?.contains(n)) || !!t.containsTarget?.(n) || !!(n instanceof Node && document.getElementById(B?.getAttribute("aria-controls") ?? "")?.parentElement?.contains(n)),
|
|
95
|
+
onClose: () => q(!0),
|
|
92
96
|
onInteractOutside: (n) => {
|
|
93
|
-
n.type === "pointerdown" &&
|
|
97
|
+
n.type === "pointerdown" && q(!1);
|
|
94
98
|
},
|
|
95
99
|
// Related previews belong to pointer ownership, but own their Escape command.
|
|
96
100
|
closeOnEscape: "none",
|
|
@@ -101,41 +105,41 @@ function nt(t) {
|
|
|
101
105
|
restoreFocus: !1,
|
|
102
106
|
blockHotkeys: !1
|
|
103
107
|
});
|
|
104
|
-
const
|
|
105
|
-
!t.open || c() || t.submitDisabled || (
|
|
106
|
-
if (!
|
|
108
|
+
const re = () => {
|
|
109
|
+
!t.open || c() || t.submitDisabled || (ne(!0), ue(() => p(() => {
|
|
110
|
+
if (!X)
|
|
107
111
|
try {
|
|
108
112
|
t.open && t.onSubmit();
|
|
109
113
|
} finally {
|
|
110
|
-
|
|
114
|
+
ne(!1);
|
|
111
115
|
}
|
|
112
116
|
})));
|
|
113
117
|
};
|
|
114
|
-
return u(
|
|
118
|
+
return u(E, {
|
|
115
119
|
get when() {
|
|
116
|
-
return
|
|
120
|
+
return w.mounted();
|
|
117
121
|
},
|
|
118
122
|
get children() {
|
|
119
|
-
return u(
|
|
123
|
+
return u(ye, {
|
|
120
124
|
get mount() {
|
|
121
|
-
return
|
|
125
|
+
return Ie(L());
|
|
122
126
|
},
|
|
123
127
|
get children() {
|
|
124
|
-
var n =
|
|
128
|
+
var n = Ke(), a = n.firstChild, i = a.firstChild, s = i.firstChild, f = i.nextSibling, m = f.firstChild, C = m.nextSibling, k = C.firstChild, o = k.firstChild, v = k.nextSibling, P = v.firstChild;
|
|
125
129
|
return a.$$keydown = (e) => {
|
|
126
|
-
e.key !== "Escape" || e.defaultPrevented || e.isComposing ||
|
|
127
|
-
}, a.$$focusin = () => t.onActivate?.(), a.$$pointerdown = () => t.onActivate?.(),
|
|
130
|
+
e.key !== "Escape" || e.defaultPrevented || e.isComposing || D || B?.getAttribute("aria-expanded") === "true" && B.contains(e.target) || (e.preventDefault(), e.stopPropagation(), q(!0));
|
|
131
|
+
}, a.$$focusin = () => t.onActivate?.(), a.$$pointerdown = () => t.onActivate?.(), J(ve, a), y(a, "aria-labelledby", te), d(i, u(E, {
|
|
128
132
|
get when() {
|
|
129
133
|
return t.icon;
|
|
130
134
|
},
|
|
131
135
|
get children() {
|
|
132
|
-
var e =
|
|
136
|
+
var e = _e();
|
|
133
137
|
return d(e, () => t.icon), e;
|
|
134
138
|
}
|
|
135
|
-
}), s),
|
|
139
|
+
}), s), y(s, "id", te), d(s, () => t.title), d(i, u(ee, {
|
|
136
140
|
variant: "ghost",
|
|
137
141
|
size: "icon",
|
|
138
|
-
icon:
|
|
142
|
+
icon: Be,
|
|
139
143
|
class: "floe-prompt-card-close",
|
|
140
144
|
get disabled() {
|
|
141
145
|
return c();
|
|
@@ -146,55 +150,55 @@ function nt(t) {
|
|
|
146
150
|
get "aria-label"() {
|
|
147
151
|
return t.closeLabel;
|
|
148
152
|
},
|
|
149
|
-
onClick: () =>
|
|
150
|
-
}), null),
|
|
153
|
+
onClick: () => q(!0)
|
|
154
|
+
}), null), we(f, Se(() => t.bodyProps, {
|
|
151
155
|
get class() {
|
|
152
|
-
return
|
|
156
|
+
return fe("floe-prompt-card-body", t.bodyProps?.class);
|
|
153
157
|
}
|
|
154
|
-
}), !1, !0), d(m, () => t.question),
|
|
155
|
-
!t.attachment || !e.dataTransfer?.files.length || (e.preventDefault(),
|
|
156
|
-
}),
|
|
158
|
+
}), !1, !0), d(m, () => t.question), C.addEventListener("drop", (e) => {
|
|
159
|
+
!t.attachment || !e.dataTransfer?.files.length || (e.preventDefault(), Y(Array.from(e.dataTransfer.files)));
|
|
160
|
+
}), C.addEventListener("dragover", (e) => {
|
|
157
161
|
t.attachment && !c() && !t.inputDisabled && e.dataTransfer?.types.includes("Files") && e.preventDefault();
|
|
158
162
|
}), o.$$keydown = (e) => {
|
|
159
|
-
e.key === "Enter" && !e.shiftKey && !e.isComposing && !
|
|
163
|
+
e.key === "Enter" && !e.shiftKey && !e.isComposing && !D && (e.preventDefault(), re());
|
|
160
164
|
}, o.addEventListener("compositionend", (e) => {
|
|
161
|
-
|
|
165
|
+
D = !1, t.onValueChange(e.currentTarget.value);
|
|
162
166
|
}), o.addEventListener("compositionupdate", (e) => t.onValueChange(e.currentTarget.value)), o.addEventListener("compositionstart", () => {
|
|
163
|
-
|
|
167
|
+
D = !0;
|
|
164
168
|
}), o.$$input = (e) => t.onValueChange(e.currentTarget.value), o.addEventListener("paste", (e) => {
|
|
165
|
-
!t.attachment || !e.clipboardData?.files.length || (e.preventDefault(),
|
|
166
|
-
}),
|
|
167
|
-
|
|
168
|
-
}, o), d(
|
|
169
|
+
!t.attachment || !e.clipboardData?.files.length || (e.preventDefault(), Y(Array.from(e.clipboardData.files)));
|
|
170
|
+
}), J((e) => {
|
|
171
|
+
g = e, t.editorRef?.(e);
|
|
172
|
+
}, o), d(C, u(E, {
|
|
169
173
|
get when() {
|
|
170
174
|
return t.references;
|
|
171
175
|
},
|
|
172
176
|
get children() {
|
|
173
|
-
var e =
|
|
177
|
+
var e = Ne();
|
|
174
178
|
return d(e, () => t.references), N(() => e.inert = !!c()), e;
|
|
175
179
|
}
|
|
176
|
-
}),
|
|
180
|
+
}), v), d(P, u(E, {
|
|
177
181
|
get when() {
|
|
178
182
|
return t.attachment;
|
|
179
183
|
},
|
|
180
184
|
get children() {
|
|
181
185
|
return [(() => {
|
|
182
|
-
var e =
|
|
186
|
+
var e = We();
|
|
183
187
|
e.addEventListener("change", (l) => {
|
|
184
|
-
|
|
185
|
-
});
|
|
186
|
-
var r =
|
|
187
|
-
return typeof r == "function" ?
|
|
188
|
-
var
|
|
189
|
-
return
|
|
188
|
+
Y(Array.from(l.currentTarget.files ?? [])), l.currentTarget.value = "";
|
|
189
|
+
}), e.addEventListener("cancel", Q);
|
|
190
|
+
var r = j;
|
|
191
|
+
return typeof r == "function" ? J(r, e) : j = e, N((l) => {
|
|
192
|
+
var b = t.attachment?.accept, x = c() || t.inputDisabled;
|
|
193
|
+
return b !== l.e && y(e, "accept", l.e = b), x !== l.t && (e.disabled = l.t = x), l;
|
|
190
194
|
}, {
|
|
191
195
|
e: void 0,
|
|
192
196
|
t: void 0
|
|
193
197
|
}), e;
|
|
194
|
-
})(), u(
|
|
198
|
+
})(), u(ee, {
|
|
195
199
|
variant: "ghost",
|
|
196
200
|
size: "icon",
|
|
197
|
-
icon:
|
|
201
|
+
icon: He,
|
|
198
202
|
class: "floe-prompt-card-attach",
|
|
199
203
|
get disabled() {
|
|
200
204
|
return c() || t.inputDisabled;
|
|
@@ -205,10 +209,10 @@ function nt(t) {
|
|
|
205
209
|
get title() {
|
|
206
210
|
return t.attachment?.label;
|
|
207
211
|
},
|
|
208
|
-
onClick: () =>
|
|
212
|
+
onClick: () => j?.click()
|
|
209
213
|
})];
|
|
210
214
|
}
|
|
211
|
-
}), null), d(
|
|
215
|
+
}), null), d(P, u(E, {
|
|
212
216
|
get when() {
|
|
213
217
|
return t.selection;
|
|
214
218
|
},
|
|
@@ -219,9 +223,10 @@ function nt(t) {
|
|
|
219
223
|
},
|
|
220
224
|
class: "floe-prompt-card-selection",
|
|
221
225
|
get open() {
|
|
222
|
-
return
|
|
226
|
+
return he();
|
|
223
227
|
},
|
|
224
|
-
onOpenChange:
|
|
228
|
+
onOpenChange: ae,
|
|
229
|
+
onOptionSelect: Q,
|
|
225
230
|
get zIndex() {
|
|
226
231
|
return (t.zIndex ?? 100) + 1;
|
|
227
232
|
},
|
|
@@ -252,10 +257,10 @@ function nt(t) {
|
|
|
252
257
|
}
|
|
253
258
|
});
|
|
254
259
|
}
|
|
255
|
-
}), null), d(
|
|
260
|
+
}), null), d(v, u(ee, {
|
|
256
261
|
variant: "primary",
|
|
257
262
|
size: "icon",
|
|
258
|
-
icon:
|
|
263
|
+
icon: qe,
|
|
259
264
|
class: "floe-prompt-card-submit",
|
|
260
265
|
get disabled() {
|
|
261
266
|
return t.submitDisabled;
|
|
@@ -272,18 +277,18 @@ function nt(t) {
|
|
|
272
277
|
get "aria-label"() {
|
|
273
278
|
return t.submitLabel;
|
|
274
279
|
},
|
|
275
|
-
onClick:
|
|
276
|
-
}), null), d(f, u(
|
|
280
|
+
onClick: re
|
|
281
|
+
}), null), d(f, u(E, {
|
|
277
282
|
get when() {
|
|
278
283
|
return t.feedback;
|
|
279
284
|
},
|
|
280
285
|
get children() {
|
|
281
|
-
var e =
|
|
286
|
+
var e = Xe();
|
|
282
287
|
return d(e, () => t.feedback), e;
|
|
283
288
|
}
|
|
284
289
|
}), null), N((e) => {
|
|
285
|
-
var r = H() ? "absolute" : "fixed", l = `${
|
|
286
|
-
return r !== e.e &&
|
|
290
|
+
var r = H() ? "absolute" : "fixed", l = `${ie().x}px`, b = `${ie().y}px`, x = `${S().availableWidth / A().x}px`, T = `${S().maxHeight / A().y}px`, I = `${S().originX / A().x}px`, G = t.zIndex ?? 100, R = fe("floe-prompt-card floe-floating-presence", t.class), V = S().side, _ = w.state(), oe = w.exiting(), le = w.exiting() ? "true" : void 0, ce = t.inputLabel, se = t.placeholder, de = c() || t.inputDisabled;
|
|
291
|
+
return r !== e.e && M(n, "position", e.e = r), l !== e.t && M(n, "left", e.t = l), b !== e.a && M(n, "top", e.a = b), x !== e.o && M(n, "--floe-prompt-max-width", e.o = x), T !== e.i && M(n, "--floe-prompt-max-height", e.i = T), I !== e.n && M(n, "--floe-prompt-origin-x", e.n = I), G !== e.s && M(n, "z-index", e.s = G), R !== e.h && Ce(a, e.h = R), V !== e.r && y(a, "data-floating-side", e.r = V), _ !== e.d && y(a, "data-floating-presence", e.d = _), oe !== e.l && (a.inert = e.l = oe), le !== e.u && y(a, "aria-hidden", e.u = le), ce !== e.c && y(o, "aria-label", e.c = ce), se !== e.w && y(o, "placeholder", e.w = se), de !== e.m && (o.disabled = e.m = de), e;
|
|
287
292
|
}, {
|
|
288
293
|
e: void 0,
|
|
289
294
|
t: void 0,
|
|
@@ -306,7 +311,7 @@ function nt(t) {
|
|
|
306
311
|
}
|
|
307
312
|
});
|
|
308
313
|
}
|
|
309
|
-
|
|
314
|
+
Me(["pointerdown", "focusin", "keydown", "input"]);
|
|
310
315
|
export {
|
|
311
|
-
|
|
316
|
+
at as PromptCard
|
|
312
317
|
};
|
|
@@ -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,
|
|
@@ -24,6 +24,8 @@ export interface SelectBaseProps {
|
|
|
24
24
|
open?: boolean;
|
|
25
25
|
defaultOpen?: boolean;
|
|
26
26
|
onOpenChange?: (open: boolean) => void;
|
|
27
|
+
/** Runs after an enabled option is chosen, including reselecting its current value. */
|
|
28
|
+
onOptionSelect?: (option: SelectOption) => void;
|
|
27
29
|
loading?: boolean;
|
|
28
30
|
error?: string;
|
|
29
31
|
onRetry?: () => void;
|