@floegence/floe-webapp-core 0.90.7 → 0.90.8
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/Checkbox.js +76 -70
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { createComponent as
|
|
1
|
+
import { createComponent as l, insert as a, effect as f, className as h, setAttribute as m, spread as A, mergeProps as B, template as v, use as N, memo as G } from "solid-js/web";
|
|
2
2
|
import { splitProps as P, createUniqueId as U, Switch as V, Match as j, Show as b, For as J, useContext as K, createEffect as Q, createContext as R } from "solid-js";
|
|
3
3
|
import { useFormControl as T } from "./formFieldContext.js";
|
|
4
4
|
import { cn as d } from "../../utils/cn.js";
|
|
5
|
-
var W = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 6l3 3 5-6">'), X = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M2 6h8">'), Y = /* @__PURE__ */ v("<div role=group>"), Z = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=indicator data-floe-choice-kind=checkbox aria-hidden=true>"), ee = /* @__PURE__ */ v("<input>"), $ = /* @__PURE__ */ v("<span>"), re = /* @__PURE__ */ v('<div class="flex flex-col">'), te = /* @__PURE__ */ v(
|
|
5
|
+
var W = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M2 6l3 3 5-6">'), X = /* @__PURE__ */ v('<svg viewBox="0 0 12 12"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round><path d="M2 6h8">'), Y = /* @__PURE__ */ v("<div role=group>"), Z = /* @__PURE__ */ v("<div data-floe-surface=inset data-floe-surface-part=indicator data-floe-choice-kind=checkbox aria-hidden=true>"), ee = /* @__PURE__ */ v("<input>"), $ = /* @__PURE__ */ v("<span>"), re = /* @__PURE__ */ v('<div class="flex flex-col">'), te = /* @__PURE__ */ v("<label data-floe-checkbox-target><div>"), ne = /* @__PURE__ */ v("<label data-floe-surface-part=choice><span class=font-medium>"), oe = /* @__PURE__ */ v('<div class="absolute top-2 right-2"><svg class="w-4 h-4 text-[var(--floe-accent-ink)]"fill=currentColor viewBox="0 0 20 20"><path fill-rule=evenodd d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"clip-rule=evenodd>'), le = /* @__PURE__ */ v('<label data-floe-surface-part=choice><div class="flex items-start gap-3"><div class="flex items-center justify-center pt-0.5"></div><div class="flex flex-col flex-1 min-w-0">'), ae = /* @__PURE__ */ v('<div class="absolute top-1.5 right-1.5"><div class="w-4 h-4 rounded-full bg-primary flex items-center justify-center">'), ie = /* @__PURE__ */ v("<label data-floe-surface-part=choice>"), se = /* @__PURE__ */ v("<div>");
|
|
6
6
|
const E = R();
|
|
7
7
|
function ce() {
|
|
8
8
|
return K(E);
|
|
@@ -63,22 +63,22 @@ function fe(p) {
|
|
|
63
63
|
function ve(p) {
|
|
64
64
|
const [s, x] = P(p, ["value", "onChange", "size", "orientation", "variant", "disabled", "class", "children"]), e = () => s.variant ?? "default", M = {
|
|
65
65
|
value: () => s.value ?? [],
|
|
66
|
-
onChange: (
|
|
67
|
-
const u = s.value ?? [], w = y ? [...u,
|
|
66
|
+
onChange: (g, y) => {
|
|
67
|
+
const u = s.value ?? [], w = y ? [...u, g] : u.filter((k) => k !== g);
|
|
68
68
|
s.onChange?.(w);
|
|
69
69
|
},
|
|
70
70
|
size: () => s.size ?? "md",
|
|
71
71
|
variant: e,
|
|
72
72
|
disabled: () => s.disabled ?? !1
|
|
73
73
|
}, S = () => {
|
|
74
|
-
const
|
|
75
|
-
return
|
|
74
|
+
const g = e(), y = s.orientation === "horizontal";
|
|
75
|
+
return g === "button" ? d("inline-flex rounded-group border border-[var(--floe-line)] overflow-hidden", y ? "flex-row" : "flex-col") : g === "card" || g === "tile" ? d("grid gap-2", y ? "grid-flow-col auto-cols-fr" : "grid-cols-1") : d("flex", y ? "flex-row flex-wrap gap-4" : "flex-col gap-2");
|
|
76
76
|
};
|
|
77
|
-
return
|
|
77
|
+
return l(E.Provider, {
|
|
78
78
|
value: M,
|
|
79
79
|
get children() {
|
|
80
|
-
var
|
|
81
|
-
return A(
|
|
80
|
+
var g = Y();
|
|
81
|
+
return A(g, B({
|
|
82
82
|
get "data-floe-surface"() {
|
|
83
83
|
return e() === "button" ? "inset" : void 0;
|
|
84
84
|
},
|
|
@@ -88,40 +88,40 @@ function ve(p) {
|
|
|
88
88
|
get class() {
|
|
89
89
|
return d(S(), s.class);
|
|
90
90
|
}
|
|
91
|
-
}, x), !1, !0), a(
|
|
91
|
+
}, x), !1, !0), a(g, () => s.children), g;
|
|
92
92
|
}
|
|
93
93
|
});
|
|
94
94
|
}
|
|
95
95
|
function he(p) {
|
|
96
|
-
const s = T(), x = ce(), [e, M] = P(p, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), S = U(),
|
|
96
|
+
const s = T(), x = ce(), [e, M] = P(p, ["value", "checked", "onChange", "label", "description", "icon", "size", "variant", "indeterminate", "ref", "class", "disabled", "id"]), S = U(), g = () => e.id ?? (x ? S : s.id) ?? S, y = () => x !== void 0, u = () => e.size ?? x?.size() ?? "md", w = () => e.variant ?? x?.variant() ?? "default", k = () => e.disabled ?? (x?.disabled() || s.disabled || !1), c = () => y() && e.value ? x.value().includes(e.value) : e.checked ?? !1, H = () => {
|
|
97
97
|
k() || (y() && e.value ? x.onChange(e.value, !c()) : e.onChange?.(!c()));
|
|
98
98
|
}, q = () => (() => {
|
|
99
99
|
var t = Z();
|
|
100
|
-
return a(t,
|
|
100
|
+
return a(t, l(b, {
|
|
101
101
|
get when() {
|
|
102
102
|
return e.indeterminate;
|
|
103
103
|
},
|
|
104
104
|
get children() {
|
|
105
|
-
return
|
|
105
|
+
return l(fe, {
|
|
106
106
|
get class() {
|
|
107
107
|
return d(C[u()].icon, "transition-transform duration-[var(--floe-duration-fast)]");
|
|
108
108
|
}
|
|
109
109
|
});
|
|
110
110
|
}
|
|
111
|
-
}), null), a(t,
|
|
111
|
+
}), null), a(t, l(b, {
|
|
112
112
|
get when() {
|
|
113
113
|
return G(() => !e.indeterminate)() && c();
|
|
114
114
|
},
|
|
115
115
|
get children() {
|
|
116
|
-
return
|
|
116
|
+
return l(O, {
|
|
117
117
|
get class() {
|
|
118
118
|
return d(C[u()].icon, "transition-transform duration-[var(--floe-duration-fast)]");
|
|
119
119
|
}
|
|
120
120
|
});
|
|
121
121
|
}
|
|
122
122
|
}), null), f((r) => {
|
|
123
|
-
var
|
|
124
|
-
return
|
|
123
|
+
var n = c() || e.indeterminate ? "true" : void 0, o = d("rounded-xs border transition-[background-color,border-color,color,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "flex items-center justify-center", C[u()].box, c() || e.indeterminate ? "border-primary bg-primary text-primary-foreground" : "border-[var(--floe-control-edge)] bg-transparent hover:border-[var(--floe-control-edge-hover)]", k() && "cursor-not-allowed");
|
|
124
|
+
return n !== r.e && m(t, "data-floe-selected", r.e = n), o !== r.t && h(t, r.t = o), r;
|
|
125
125
|
}, {
|
|
126
126
|
e: void 0,
|
|
127
127
|
t: void 0
|
|
@@ -131,14 +131,14 @@ function he(p) {
|
|
|
131
131
|
return Q(() => {
|
|
132
132
|
r && (r.indeterminate = e.indeterminate ?? !1);
|
|
133
133
|
}), (() => {
|
|
134
|
-
var
|
|
135
|
-
return N((
|
|
136
|
-
r =
|
|
137
|
-
},
|
|
134
|
+
var n = ee();
|
|
135
|
+
return N((o) => {
|
|
136
|
+
r = o, typeof e.ref == "function" && e.ref(o);
|
|
137
|
+
}, n), A(n, B(s, {
|
|
138
138
|
"data-floe-choice-input": "",
|
|
139
139
|
type: "checkbox",
|
|
140
140
|
get id() {
|
|
141
|
-
return
|
|
141
|
+
return g();
|
|
142
142
|
},
|
|
143
143
|
get value() {
|
|
144
144
|
return e.value;
|
|
@@ -152,61 +152,67 @@ function he(p) {
|
|
|
152
152
|
get disabled() {
|
|
153
153
|
return k();
|
|
154
154
|
},
|
|
155
|
-
onClick: (
|
|
156
|
-
(p.readOnly ?? s.readOnly) &&
|
|
155
|
+
onClick: (o) => {
|
|
156
|
+
(p.readOnly ?? s.readOnly) && o.preventDefault();
|
|
157
157
|
},
|
|
158
158
|
onChange: H,
|
|
159
159
|
get class() {
|
|
160
160
|
return t.class ?? "sr-only peer";
|
|
161
161
|
}
|
|
162
|
-
}, M), !1, !1),
|
|
162
|
+
}, M), !1, !1), n;
|
|
163
163
|
})();
|
|
164
164
|
};
|
|
165
|
-
return
|
|
165
|
+
return l(V, {
|
|
166
166
|
get children() {
|
|
167
|
-
return [
|
|
167
|
+
return [l(j, {
|
|
168
168
|
get when() {
|
|
169
169
|
return w() === "default";
|
|
170
170
|
},
|
|
171
171
|
get children() {
|
|
172
172
|
var t = te(), r = t.firstChild;
|
|
173
|
-
return a(r,
|
|
173
|
+
return a(r, l(I, {}), null), a(r, l(q, {}), null), a(t, l(b, {
|
|
174
174
|
get when() {
|
|
175
175
|
return e.label || e.description;
|
|
176
176
|
},
|
|
177
177
|
get children() {
|
|
178
|
-
var
|
|
179
|
-
return a(
|
|
178
|
+
var n = re();
|
|
179
|
+
return a(n, l(b, {
|
|
180
180
|
get when() {
|
|
181
181
|
return e.label;
|
|
182
182
|
},
|
|
183
183
|
get children() {
|
|
184
|
-
var
|
|
185
|
-
return a(
|
|
184
|
+
var o = $();
|
|
185
|
+
return a(o, () => e.label), f(() => h(o, d("text-foreground", C[u()].label))), o;
|
|
186
186
|
}
|
|
187
|
-
}), null), a(
|
|
187
|
+
}), null), a(n, l(b, {
|
|
188
188
|
get when() {
|
|
189
189
|
return e.description;
|
|
190
190
|
},
|
|
191
191
|
get children() {
|
|
192
|
-
var
|
|
193
|
-
return a(
|
|
192
|
+
var o = $();
|
|
193
|
+
return a(o, () => e.description), f(() => h(o, d("text-[var(--floe-ink-soft)]", C[u()].description))), o;
|
|
194
194
|
}
|
|
195
|
-
}), null),
|
|
195
|
+
}), null), n;
|
|
196
196
|
}
|
|
197
|
-
}), null), f(() =>
|
|
197
|
+
}), null), f((n) => {
|
|
198
|
+
var o = d("inline-flex gap-2 cursor-pointer select-none", e.description ? "items-start" : "items-center", k() && "opacity-50 cursor-not-allowed", e.class), i = d("relative flex items-center justify-center", e.description && "pt-0.5");
|
|
199
|
+
return o !== n.e && h(t, n.e = o), i !== n.t && h(r, n.t = i), n;
|
|
200
|
+
}, {
|
|
201
|
+
e: void 0,
|
|
202
|
+
t: void 0
|
|
203
|
+
}), t;
|
|
198
204
|
}
|
|
199
|
-
}),
|
|
205
|
+
}), l(j, {
|
|
200
206
|
get when() {
|
|
201
207
|
return w() === "button";
|
|
202
208
|
},
|
|
203
209
|
get children() {
|
|
204
210
|
var t = ne(), r = t.firstChild;
|
|
205
|
-
return a(t,
|
|
211
|
+
return a(t, l(I, {
|
|
206
212
|
class: "sr-only"
|
|
207
|
-
}), r), a(r, () => e.label), f((
|
|
208
|
-
var
|
|
209
|
-
return
|
|
213
|
+
}), r), a(r, () => e.label), f((n) => {
|
|
214
|
+
var o = c() ? "inset" : "raised", i = c() ? "true" : void 0, _ = w(), z = d("cursor-pointer select-none transition-colors duration-[var(--floe-duration-fast)]", "border-r border-[var(--floe-line)] last:border-r-0", de[u()], c() ? "bg-[var(--primary)] text-[var(--primary-foreground)] border-[var(--primary)]" : "bg-transparent text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)] hover:text-[var(--floe-ink)]", k() && "opacity-50 cursor-not-allowed", e.class);
|
|
215
|
+
return o !== n.e && m(t, "data-floe-surface", n.e = o), i !== n.t && m(t, "data-floe-selected", n.t = i), _ !== n.a && m(t, "data-floe-choice-variant", n.a = _), z !== n.o && h(t, n.o = z), n;
|
|
210
216
|
}, {
|
|
211
217
|
e: void 0,
|
|
212
218
|
t: void 0,
|
|
@@ -214,31 +220,31 @@ function he(p) {
|
|
|
214
220
|
o: void 0
|
|
215
221
|
}), t;
|
|
216
222
|
}
|
|
217
|
-
}),
|
|
223
|
+
}), l(j, {
|
|
218
224
|
get when() {
|
|
219
225
|
return w() === "card";
|
|
220
226
|
},
|
|
221
227
|
get children() {
|
|
222
|
-
var t = le(), r = t.firstChild,
|
|
223
|
-
return a(t,
|
|
228
|
+
var t = le(), r = t.firstChild, n = r.firstChild, o = n.nextSibling;
|
|
229
|
+
return a(t, l(I, {
|
|
224
230
|
class: "sr-only"
|
|
225
|
-
}), r), a(
|
|
231
|
+
}), r), a(n, l(q, {})), a(o, l(b, {
|
|
226
232
|
get when() {
|
|
227
233
|
return e.label;
|
|
228
234
|
},
|
|
229
235
|
get children() {
|
|
230
236
|
var i = $();
|
|
231
|
-
return a(i, () => e.label), f(() =>
|
|
237
|
+
return a(i, () => e.label), f(() => h(i, d("font-medium text-foreground", C[u()].label))), i;
|
|
232
238
|
}
|
|
233
|
-
}), null), a(
|
|
239
|
+
}), null), a(o, l(b, {
|
|
234
240
|
get when() {
|
|
235
241
|
return e.description;
|
|
236
242
|
},
|
|
237
243
|
get children() {
|
|
238
244
|
var i = $();
|
|
239
|
-
return a(i, () => e.description), f(() =>
|
|
245
|
+
return a(i, () => e.description), f(() => h(i, d("text-[var(--floe-ink-soft)] mt-0.5", C[u()].description))), i;
|
|
240
246
|
}
|
|
241
|
-
}), null), a(t,
|
|
247
|
+
}), null), a(t, l(b, {
|
|
242
248
|
get when() {
|
|
243
249
|
return c();
|
|
244
250
|
},
|
|
@@ -247,7 +253,7 @@ function he(p) {
|
|
|
247
253
|
}
|
|
248
254
|
}), null), f((i) => {
|
|
249
255
|
var _ = c() ? "inset" : "raised", z = c() ? "true" : void 0, D = w(), F = d("relative cursor-pointer select-none rounded-group border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", ue[u()], c() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", k() && "opacity-50 cursor-not-allowed", e.class);
|
|
250
|
-
return _ !== i.e && m(t, "data-floe-surface", i.e = _), z !== i.t && m(t, "data-floe-selected", i.t = z), D !== i.a && m(t, "data-floe-choice-variant", i.a = D), F !== i.o &&
|
|
256
|
+
return _ !== i.e && m(t, "data-floe-surface", i.e = _), z !== i.t && m(t, "data-floe-selected", i.t = z), D !== i.a && m(t, "data-floe-choice-variant", i.a = D), F !== i.o && h(t, i.o = F), i;
|
|
251
257
|
}, {
|
|
252
258
|
e: void 0,
|
|
253
259
|
t: void 0,
|
|
@@ -255,58 +261,58 @@ function he(p) {
|
|
|
255
261
|
o: void 0
|
|
256
262
|
}), t;
|
|
257
263
|
}
|
|
258
|
-
}),
|
|
264
|
+
}), l(j, {
|
|
259
265
|
get when() {
|
|
260
266
|
return w() === "tile";
|
|
261
267
|
},
|
|
262
268
|
get children() {
|
|
263
269
|
var t = ie();
|
|
264
|
-
return a(t,
|
|
270
|
+
return a(t, l(I, {
|
|
265
271
|
class: "sr-only"
|
|
266
|
-
}), null), a(t,
|
|
272
|
+
}), null), a(t, l(b, {
|
|
267
273
|
get when() {
|
|
268
274
|
return e.icon;
|
|
269
275
|
},
|
|
270
276
|
children: (r) => {
|
|
271
|
-
const
|
|
277
|
+
const n = r();
|
|
272
278
|
return (() => {
|
|
273
|
-
var
|
|
274
|
-
return a(
|
|
279
|
+
var o = se();
|
|
280
|
+
return a(o, l(n, {
|
|
275
281
|
get class() {
|
|
276
282
|
return L[u()].icon;
|
|
277
283
|
}
|
|
278
|
-
})), f(() =>
|
|
284
|
+
})), f(() => h(o, d("mb-2 transition-colors duration-[var(--floe-duration-fast)]", c() ? "text-[var(--floe-accent-ink)]" : "text-[var(--floe-ink-quiet)]"))), o;
|
|
279
285
|
})();
|
|
280
286
|
}
|
|
281
|
-
}), null), a(t,
|
|
287
|
+
}), null), a(t, l(b, {
|
|
282
288
|
get when() {
|
|
283
289
|
return e.label;
|
|
284
290
|
},
|
|
285
291
|
get children() {
|
|
286
292
|
var r = $();
|
|
287
|
-
return a(r, () => e.label), f(() =>
|
|
293
|
+
return a(r, () => e.label), f(() => h(r, d("font-medium transition-colors duration-[var(--floe-duration-fast)]", C[u()].label, c() ? "text-[var(--floe-ink)]" : "text-[var(--floe-ink-soft)]"))), r;
|
|
288
294
|
}
|
|
289
|
-
}), null), a(t,
|
|
295
|
+
}), null), a(t, l(b, {
|
|
290
296
|
get when() {
|
|
291
297
|
return e.description;
|
|
292
298
|
},
|
|
293
299
|
get children() {
|
|
294
300
|
var r = $();
|
|
295
|
-
return a(r, () => e.description), f(() =>
|
|
301
|
+
return a(r, () => e.description), f(() => h(r, d("text-[var(--floe-ink-soft)] mt-0.5", C[u()].description))), r;
|
|
296
302
|
}
|
|
297
|
-
}), null), a(t,
|
|
303
|
+
}), null), a(t, l(b, {
|
|
298
304
|
get when() {
|
|
299
305
|
return c();
|
|
300
306
|
},
|
|
301
307
|
get children() {
|
|
302
|
-
var r = ae(),
|
|
303
|
-
return a(
|
|
308
|
+
var r = ae(), n = r.firstChild;
|
|
309
|
+
return a(n, l(O, {
|
|
304
310
|
class: "w-2.5 h-2.5 text-primary-foreground"
|
|
305
311
|
})), r;
|
|
306
312
|
}
|
|
307
313
|
}), null), f((r) => {
|
|
308
|
-
var
|
|
309
|
-
return
|
|
314
|
+
var n = c() ? "inset" : "raised", o = c() ? "true" : void 0, i = w(), _ = d("relative flex flex-col items-center justify-center cursor-pointer select-none", "rounded-control border transition-[background-color,border-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)] text-center", L[u()].container, c() ? "border-[var(--floe-accent-line)] bg-[var(--floe-state-selected)]" : "border-[var(--floe-line)] bg-transparent hover:border-[var(--floe-line-strong)] hover:bg-[var(--floe-state-hover)]", k() && "opacity-50 cursor-not-allowed", e.class);
|
|
315
|
+
return n !== r.e && m(t, "data-floe-surface", r.e = n), o !== r.t && m(t, "data-floe-selected", r.t = o), i !== r.a && m(t, "data-floe-choice-variant", r.a = i), _ !== r.o && h(t, r.o = _), r;
|
|
310
316
|
}, {
|
|
311
317
|
e: void 0,
|
|
312
318
|
t: void 0,
|
|
@@ -320,13 +326,13 @@ function he(p) {
|
|
|
320
326
|
}
|
|
321
327
|
function pe(p) {
|
|
322
328
|
const [s, x] = P(p, ["options"]);
|
|
323
|
-
return
|
|
329
|
+
return l(ve, B(x, {
|
|
324
330
|
get children() {
|
|
325
|
-
return
|
|
331
|
+
return l(J, {
|
|
326
332
|
get each() {
|
|
327
333
|
return s.options;
|
|
328
334
|
},
|
|
329
|
-
children: (e) =>
|
|
335
|
+
children: (e) => l(he, {
|
|
330
336
|
get value() {
|
|
331
337
|
return e.value;
|
|
332
338
|
},
|