@foldkit/ui 0.127.0 → 0.128.0
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/README.md +2 -2
- package/dist/calendar/index.d.ts +17 -23
- package/dist/calendar/index.d.ts.map +1 -1
- package/dist/calendar/index.js +16 -25
- package/dist/calendar/public.d.ts +1 -1
- package/dist/calendar/public.d.ts.map +1 -1
- package/dist/calendar/public.js +1 -1
- package/dist/checkbox/index.d.ts +47 -104
- package/dist/checkbox/index.d.ts.map +1 -1
- package/dist/checkbox/index.js +48 -87
- package/dist/checkbox/public.d.ts +2 -2
- package/dist/checkbox/public.d.ts.map +1 -1
- package/dist/checkbox/public.js +1 -1
- package/dist/combobox/multi.d.ts +19 -30
- package/dist/combobox/multi.d.ts.map +1 -1
- package/dist/combobox/multi.js +32 -53
- package/dist/combobox/public.d.ts +2 -2
- package/dist/combobox/public.d.ts.map +1 -1
- package/dist/combobox/public.js +1 -1
- package/dist/combobox/shared.d.ts +59 -35
- package/dist/combobox/shared.d.ts.map +1 -1
- package/dist/combobox/shared.js +58 -45
- package/dist/combobox/single.d.ts +36 -48
- package/dist/combobox/single.d.ts.map +1 -1
- package/dist/combobox/single.js +49 -76
- package/dist/datePicker/index.d.ts +33 -41
- package/dist/datePicker/index.d.ts.map +1 -1
- package/dist/datePicker/index.js +31 -40
- package/dist/datePicker/public.d.ts +1 -1
- package/dist/datePicker/public.d.ts.map +1 -1
- package/dist/datePicker/public.js +1 -1
- package/dist/disclosure/index.d.ts +49 -113
- package/dist/disclosure/index.d.ts.map +1 -1
- package/dist/disclosure/index.js +35 -92
- package/dist/disclosure/public.d.ts +2 -2
- package/dist/disclosure/public.d.ts.map +1 -1
- package/dist/disclosure/public.js +1 -1
- package/dist/listbox/multi.d.ts +7 -21
- package/dist/listbox/multi.d.ts.map +1 -1
- package/dist/listbox/multi.js +12 -36
- package/dist/listbox/public.d.ts +1 -1
- package/dist/listbox/public.d.ts.map +1 -1
- package/dist/listbox/shared.d.ts +28 -20
- package/dist/listbox/shared.d.ts.map +1 -1
- package/dist/listbox/shared.js +6 -7
- package/dist/listbox/single.d.ts +17 -27
- package/dist/listbox/single.d.ts.map +1 -1
- package/dist/listbox/single.js +18 -30
- package/dist/radioGroup/index.d.ts +57 -142
- package/dist/radioGroup/index.d.ts.map +1 -1
- package/dist/radioGroup/index.js +44 -119
- package/dist/radioGroup/public.d.ts +2 -2
- package/dist/radioGroup/public.d.ts.map +1 -1
- package/dist/radioGroup/public.js +1 -1
- package/dist/slider/index.d.ts +51 -27
- package/dist/slider/index.d.ts.map +1 -1
- package/dist/slider/index.js +66 -66
- package/dist/slider/public.d.ts +1 -1
- package/dist/slider/public.d.ts.map +1 -1
- package/dist/slider/public.js +1 -1
- package/dist/switch/index.d.ts +45 -92
- package/dist/switch/index.d.ts.map +1 -1
- package/dist/switch/index.js +36 -81
- package/dist/switch/public.d.ts +2 -2
- package/dist/switch/public.d.ts.map +1 -1
- package/dist/switch/public.js +1 -1
- package/dist/tabs/index.d.ts +33 -33
- package/dist/tabs/index.d.ts.map +1 -1
- package/dist/tabs/index.js +36 -49
- package/dist/toast/index.d.ts +1 -0
- package/dist/toast/index.d.ts.map +1 -1
- package/dist/toast/index.js +1 -0
- package/dist/toast/public.d.ts +2 -0
- package/dist/toast/public.d.ts.map +1 -1
- package/dist/toast/public.js +1 -0
- package/dist/toast/test.d.ts +41 -0
- package/dist/toast/test.d.ts.map +1 -0
- package/dist/toast/test.js +36 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -41,8 +41,8 @@ const view = () => {
|
|
|
41
41
|
|
|
42
42
|
Components come in two shapes:
|
|
43
43
|
|
|
44
|
-
- **Render helpers** (Button, Input, Textarea, Select, Fieldset) are stateless. Call their `view` directly with a typed config.
|
|
45
|
-
- **Submodels** (
|
|
44
|
+
- **Render helpers** (Button, Input, Textarea, Select, RadioGroup, Checkbox, Switch, Disclosure, Fieldset) are stateless. Call their `view` directly with a typed config. The controlled helpers (RadioGroup, Checkbox, Switch, Disclosure) take the current value in through their config and dispatch a parent Message when the user changes it; you store that value in your own Model.
|
|
45
|
+
- **Submodels** (Combobox, Dialog, Listbox, Menu, Popover, and the like) own a Model. Embed them with `h.submodel`, drive them through their `update`, and consume their `OutMessage` in the parent.
|
|
46
46
|
|
|
47
47
|
Every component is also available as a subpath import:
|
|
48
48
|
|
package/dist/calendar/index.d.ts
CHANGED
|
@@ -28,11 +28,6 @@ export declare const Model: S.Struct<{
|
|
|
28
28
|
readonly month: S.Int;
|
|
29
29
|
readonly day: S.Int;
|
|
30
30
|
}>>;
|
|
31
|
-
readonly maybeSelectedDate: S.Option<S.Struct<{
|
|
32
|
-
readonly year: S.Int;
|
|
33
|
-
readonly month: S.Int;
|
|
34
|
-
readonly day: S.Int;
|
|
35
|
-
}>>;
|
|
36
31
|
readonly isGridFocused: S.Boolean;
|
|
37
32
|
readonly locale: S.Struct<{
|
|
38
33
|
readonly firstDayOfWeek: S.Literals<readonly ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]>;
|
|
@@ -176,15 +171,17 @@ export type SelectedDate = typeof SelectedDate.Type;
|
|
|
176
171
|
export type InitConfig = Readonly<{
|
|
177
172
|
id: string;
|
|
178
173
|
today: CalendarDate;
|
|
179
|
-
|
|
174
|
+
initialViewDate?: CalendarDate;
|
|
180
175
|
locale?: Calendar.LocaleConfig;
|
|
181
176
|
minDate?: CalendarDate;
|
|
182
177
|
maxDate?: CalendarDate;
|
|
183
178
|
disabledDaysOfWeek?: ReadonlyArray<Calendar.DayOfWeek>;
|
|
184
179
|
disabledDates?: ReadonlyArray<CalendarDate>;
|
|
185
180
|
}>;
|
|
186
|
-
/** Creates an initial calendar model. The
|
|
187
|
-
*
|
|
181
|
+
/** Creates an initial calendar model. The selected date is owned by the
|
|
182
|
+
* parent and passed in via `ViewInputs.maybeSelectedDate`. The view month
|
|
183
|
+
* defaults to `initialViewDate` (pass the parent's selected date to open onto
|
|
184
|
+
* it), or today when omitted. */
|
|
188
185
|
export declare const init: (config: InitConfig) => Model;
|
|
189
186
|
type UpdateReturn = readonly [
|
|
190
187
|
Model,
|
|
@@ -205,16 +202,12 @@ export declare const FocusGrid: Command.CommandDefinitionWithArgs<"FocusGrid", {
|
|
|
205
202
|
*
|
|
206
203
|
* Equivalent to dispatching `ClickedDay({ date })` through `update`. */
|
|
207
204
|
export declare const selectDate: (model: Model, date: CalendarDate) => UpdateReturn;
|
|
208
|
-
/**
|
|
209
|
-
*
|
|
210
|
-
*
|
|
211
|
-
*
|
|
212
|
-
*
|
|
213
|
-
|
|
214
|
-
* the calendar. Contrast with `selectDate`, a user or programmatic
|
|
215
|
-
* *choice* that emits `SelectedDate`. Returns the model directly because
|
|
216
|
-
* it produces no commands and no OutMessage. */
|
|
217
|
-
export declare const reflectSelectedDate: Reflect<Model, Option.Option<CalendarDate>>;
|
|
205
|
+
/** Moves the calendar's view and cursor to a date without changing the
|
|
206
|
+
* selection (which the parent owns). Use it to navigate to a known date, for
|
|
207
|
+
* example when opening a date picker onto its current value so the selected
|
|
208
|
+
* month is visible. Returns the model directly because it produces no
|
|
209
|
+
* commands and no OutMessage. */
|
|
210
|
+
export declare const focusDate: Reflect<Model, CalendarDate>;
|
|
218
211
|
/** Reflects the minimum selectable date onto the model. Pass `Option.none()`
|
|
219
212
|
* to remove the minimum. Use this when the minimum derives from other Model
|
|
220
213
|
* state (e.g. a start date field whose current selection constrains an end
|
|
@@ -354,6 +347,9 @@ export type CalendarAttributes = DaysModeAttributes | MonthsModeAttributes | Yea
|
|
|
354
347
|
* selection by pattern-matching the OutMessage in their
|
|
355
348
|
* `GotCalendarMessage` handler. */
|
|
356
349
|
export type ViewInputs = Readonly<{
|
|
350
|
+
/** The selected date, read straight from the parent Model. The selected-day
|
|
351
|
+
* marker derives from it. */
|
|
352
|
+
maybeSelectedDate: Option.Option<CalendarDate>;
|
|
357
353
|
toView: (attributes: CalendarAttributes) => Html;
|
|
358
354
|
previousMonthLabel?: string;
|
|
359
355
|
nextMonthLabel?: string;
|
|
@@ -381,11 +377,6 @@ export declare const view: import("foldkit/submodel").View<S.Struct.ReadonlySide
|
|
|
381
377
|
readonly month: S.Int;
|
|
382
378
|
readonly day: S.Int;
|
|
383
379
|
}>>;
|
|
384
|
-
readonly maybeSelectedDate: S.Option<S.Struct<{
|
|
385
|
-
readonly year: S.Int;
|
|
386
|
-
readonly month: S.Int;
|
|
387
|
-
readonly day: S.Int;
|
|
388
|
-
}>>;
|
|
389
380
|
readonly isGridFocused: S.Boolean;
|
|
390
381
|
readonly locale: S.Struct<{
|
|
391
382
|
readonly firstDayOfWeek: S.Literals<readonly ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]>;
|
|
@@ -450,6 +441,9 @@ export declare const view: import("foldkit/submodel").View<S.Struct.ReadonlySide
|
|
|
450
441
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
451
442
|
readonly _tag: S.tag<"CompletedFocusGrid">;
|
|
452
443
|
}, "Type">, Readonly<{
|
|
444
|
+
/** The selected date, read straight from the parent Model. The selected-day
|
|
445
|
+
* marker derives from it. */
|
|
446
|
+
maybeSelectedDate: Option.Option<CalendarDate>;
|
|
453
447
|
toView: (attributes: CalendarAttributes) => Html;
|
|
454
448
|
previousMonthLabel?: string;
|
|
455
449
|
nextMonthLabel?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EAIN,MAAM,EACN,MAAM,IAAI,CAAC,EAEZ,MAAM,QAAQ,CAAA;AACf,OAAO,KAAK,QAAQ,MAAM,kBAAkB,CAAA;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AACpD,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAE1C,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,IAAI,EAGV,MAAM,cAAc,CAAA;AAGrB,OAAO,EAAE,KAAK,OAAO,EAAc,MAAM,kBAAkB,CAAA;AAO3D;;8EAE8E;AAC9E,eAAO,MAAM,QAAQ,kDAA0C,CAAA;AAC/D,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAA;AAE3C;;;YAGY;AACZ,eAAO,MAAM,KAAK
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/calendar/index.ts"],"names":[],"mappings":"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"}
|
package/dist/calendar/index.js
CHANGED
|
@@ -24,7 +24,6 @@ export const Model = S.Struct({
|
|
|
24
24
|
viewMonth: S.Int.check(S.isBetween({ minimum: 1, maximum: 12 })),
|
|
25
25
|
viewMode: ViewMode,
|
|
26
26
|
maybeFocusedDate: S.Option(Calendar.CalendarDate),
|
|
27
|
-
maybeSelectedDate: S.Option(Calendar.CalendarDate),
|
|
28
27
|
isGridFocused: S.Boolean,
|
|
29
28
|
locale: Calendar.LocaleConfig,
|
|
30
29
|
maybeMinDate: S.Option(Calendar.CalendarDate),
|
|
@@ -104,11 +103,12 @@ export const SelectedDate = m('SelectedDate', {
|
|
|
104
103
|
});
|
|
105
104
|
/** Union of the calendar's OutMessages. */
|
|
106
105
|
export const OutMessage = S.Union([ChangedViewMonth, SelectedDate]);
|
|
107
|
-
/** Creates an initial calendar model. The
|
|
108
|
-
*
|
|
106
|
+
/** Creates an initial calendar model. The selected date is owned by the
|
|
107
|
+
* parent and passed in via `ViewInputs.maybeSelectedDate`. The view month
|
|
108
|
+
* defaults to `initialViewDate` (pass the parent's selected date to open onto
|
|
109
|
+
* it), or today when omitted. */
|
|
109
110
|
export const init = (config) => {
|
|
110
|
-
const
|
|
111
|
-
const initialFocus = Option.getOrElse(maybeInitialSelectedDate, () => config.today);
|
|
111
|
+
const initialFocus = config.initialViewDate ?? config.today;
|
|
112
112
|
return {
|
|
113
113
|
id: config.id,
|
|
114
114
|
today: config.today,
|
|
@@ -116,7 +116,6 @@ export const init = (config) => {
|
|
|
116
116
|
viewMonth: initialFocus.month,
|
|
117
117
|
viewMode: 'Days',
|
|
118
118
|
maybeFocusedDate: Option.some(initialFocus),
|
|
119
|
-
maybeSelectedDate: maybeInitialSelectedDate,
|
|
120
119
|
isGridFocused: false,
|
|
121
120
|
locale: config.locale ?? Calendar.defaultEnglishLocale,
|
|
122
121
|
maybeMinDate: Option.fromNullishOr(config.minDate),
|
|
@@ -138,23 +137,15 @@ export const FocusGrid = Command.define('FocusGrid', { id: S.String }, Completed
|
|
|
138
137
|
*
|
|
139
138
|
* Equivalent to dispatching `ClickedDay({ date })` through `update`. */
|
|
140
139
|
export const selectDate = (model, date) => update(model, ClickedDay({ date }));
|
|
141
|
-
/**
|
|
142
|
-
*
|
|
143
|
-
*
|
|
144
|
-
*
|
|
145
|
-
*
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
export const reflectSelectedDate = Function.dual(2, (model, maybeDate) => Option.match(maybeDate, {
|
|
151
|
-
onNone: () => evo(model, { maybeSelectedDate: () => Option.none() }),
|
|
152
|
-
onSome: date => evo(model, {
|
|
153
|
-
maybeSelectedDate: () => Option.some(date),
|
|
154
|
-
maybeFocusedDate: () => Option.some(date),
|
|
155
|
-
viewYear: () => date.year,
|
|
156
|
-
viewMonth: () => date.month,
|
|
157
|
-
}),
|
|
140
|
+
/** Moves the calendar's view and cursor to a date without changing the
|
|
141
|
+
* selection (which the parent owns). Use it to navigate to a known date, for
|
|
142
|
+
* example when opening a date picker onto its current value so the selected
|
|
143
|
+
* month is visible. Returns the model directly because it produces no
|
|
144
|
+
* commands and no OutMessage. */
|
|
145
|
+
export const focusDate = Function.dual(2, (model, date) => evo(model, {
|
|
146
|
+
maybeFocusedDate: () => Option.some(date),
|
|
147
|
+
viewYear: () => date.year,
|
|
148
|
+
viewMonth: () => date.month,
|
|
158
149
|
}));
|
|
159
150
|
/** Reflects the minimum selectable date onto the model. Pass `Option.none()`
|
|
160
151
|
* to remove the minimum. Use this when the minimum derives from other Model
|
|
@@ -250,7 +241,6 @@ const currentOrFallbackFocus = (model) => Option.getOrElse(model.maybeFocusedDat
|
|
|
250
241
|
* a separate `ChangedViewMonth` signal that would race with the selection. */
|
|
251
242
|
const commitSelection = (model, date) => {
|
|
252
243
|
const nextModel = evo(model, {
|
|
253
|
-
maybeSelectedDate: () => Option.some(date),
|
|
254
244
|
maybeFocusedDate: () => Option.some(date),
|
|
255
245
|
viewYear: () => date.year,
|
|
256
246
|
viewMonth: () => date.month,
|
|
@@ -516,7 +506,8 @@ const isYearDisabled = (model, year) => Option.exists(model.maybeMinDate, min =>
|
|
|
516
506
|
Option.exists(model.maybeMaxDate, max => year > max.year);
|
|
517
507
|
const buildDaysAttributes = (model, viewInputs) => {
|
|
518
508
|
const h = html();
|
|
519
|
-
const { id, viewYear, viewMonth, maybeFocusedDate,
|
|
509
|
+
const { id, viewYear, viewMonth, maybeFocusedDate, today, locale, isGridFocused, } = model;
|
|
510
|
+
const { maybeSelectedDate } = viewInputs;
|
|
520
511
|
const previousMonthLabel = viewInputs.previousMonthLabel ?? 'Previous month';
|
|
521
512
|
const nextMonthLabel = viewInputs.nextMonthLabel ?? 'Next month';
|
|
522
513
|
const headingButtonLabel = viewInputs.daysHeadingButtonLabel ?? 'Switch to month picker';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { init, update, view, selectDate,
|
|
1
|
+
export { init, update, view, selectDate, focusDate, reflectMinDate, reflectMaxDate, reflectDisabledDates, reflectDisabledDaysOfWeek, dropToDays, Model, ViewMode, Message, OutMessage, ChangedViewMonth, SelectedDate, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, ClickedHeading, SelectedMonth, SelectedYear, PagedYears, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index.js';
|
|
2
2
|
export type { InitConfig, ViewInputs, CalendarAttributes, DaysModeAttributes, MonthsModeAttributes, YearsModeAttributes, DayCell, ColumnHeader, Week, MonthCell, YearCell, } from './index.js';
|
|
3
3
|
//# sourceMappingURL=public.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/calendar/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/calendar/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,UAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,SAAS,GACV,MAAM,YAAY,CAAA;AAEnB,YAAY,EACV,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,SAAS,EACT,QAAQ,GACT,MAAM,YAAY,CAAA"}
|
package/dist/calendar/public.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { init, update, view, selectDate,
|
|
1
|
+
export { init, update, view, selectDate, focusDate, reflectMinDate, reflectMaxDate, reflectDisabledDates, reflectDisabledDaysOfWeek, dropToDays, Model, ViewMode, Message, OutMessage, ChangedViewMonth, SelectedDate, ClickedDay, PressedKeyOnGrid, ClickedPreviousMonthButton, ClickedNextMonthButton, ClickedHeading, SelectedMonth, SelectedYear, PagedYears, FocusedGrid, BlurredGrid, RefreshedToday, CompletedFocusGrid, FocusGrid, } from './index.js';
|
package/dist/checkbox/index.d.ts
CHANGED
|
@@ -1,119 +1,62 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
/** Schema for the checkbox component's state, tracking the checked status. */
|
|
6
|
-
export declare const Model: S.Struct<{
|
|
7
|
-
readonly id: S.String;
|
|
8
|
-
readonly isChecked: S.Boolean;
|
|
9
|
-
}>;
|
|
10
|
-
export type Model = typeof Model.Type;
|
|
11
|
-
/** Sent when the user toggles the checkbox via click or Space key. */
|
|
12
|
-
export declare const Toggled: import("foldkit/schema").CallableTaggedStruct<"Toggled", {}>;
|
|
13
|
-
/** Sent to set the checked state to a specific value. Use this for
|
|
14
|
-
* programmatic state assignment (e.g. a "select all" handler that forces
|
|
15
|
-
* all child checkboxes to the same state) where `Toggled`'s flip semantics
|
|
16
|
-
* would not reliably reach the desired state. */
|
|
17
|
-
export declare const SetChecked: import("foldkit/schema").CallableTaggedStruct<"SetChecked", {
|
|
18
|
-
isChecked: S.Boolean;
|
|
19
|
-
}>;
|
|
20
|
-
/** Schema for all messages the checkbox component can produce. */
|
|
21
|
-
export declare const Message: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"Toggled", {}>, import("foldkit/schema").CallableTaggedStruct<"SetChecked", {
|
|
22
|
-
isChecked: S.Boolean;
|
|
23
|
-
}>]>;
|
|
24
|
-
export type Toggled = typeof Toggled.Type;
|
|
25
|
-
export type SetChecked = typeof SetChecked.Type;
|
|
26
|
-
export type Message = typeof Message.Type;
|
|
27
|
-
/** Sent to the parent each time the checkbox toggles. Carries the new
|
|
28
|
-
* checked state. Consumers pattern-match this in their `GotCheckboxMessage`
|
|
29
|
-
* handler to lift the toggle into a domain Message (e.g., persisting the
|
|
30
|
-
* flag, dispatching a save command). */
|
|
31
|
-
export declare const ToggledChecked: import("foldkit/schema").CallableTaggedStruct<"ToggledChecked", {
|
|
32
|
-
isChecked: S.Boolean;
|
|
33
|
-
}>;
|
|
34
|
-
/** Union of out-messages the checkbox component can produce. Surfaced as
|
|
35
|
-
* the third element of `update`'s return tuple and pattern-matched by
|
|
36
|
-
* the parent. */
|
|
37
|
-
export declare const OutMessage: S.Union<readonly [import("foldkit/schema").CallableTaggedStruct<"ToggledChecked", {
|
|
38
|
-
isChecked: S.Boolean;
|
|
39
|
-
}>]>;
|
|
40
|
-
export type ToggledChecked = typeof ToggledChecked.Type;
|
|
41
|
-
export type OutMessage = typeof OutMessage.Type;
|
|
42
|
-
/** Configuration for creating a checkbox model with `init`. */
|
|
43
|
-
export type InitConfig = Readonly<{
|
|
44
|
-
id: string;
|
|
45
|
-
isChecked?: boolean;
|
|
46
|
-
}>;
|
|
47
|
-
/** Creates an initial checkbox model from a config. Defaults to unchecked. */
|
|
48
|
-
export declare const init: (config: InitConfig) => Model;
|
|
49
|
-
/** Processes a checkbox message and returns the next model, commands,
|
|
50
|
-
* and a `ToggledChecked` OutMessage carrying the new checked state. */
|
|
51
|
-
export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command<Message>>, Option.Option<OutMessage>];
|
|
52
|
-
/** Programmatically sets the checked state. Emits a `ToggledChecked`
|
|
53
|
-
* OutMessage just like a user-initiated toggle. Use this in domain-event
|
|
54
|
-
* handlers where you need to force a specific state (e.g. "select all"). */
|
|
55
|
-
export declare const setChecked: (model: Model, isChecked: boolean) => readonly [Model, ReadonlyArray<Command<Message>>, Option.Option<OutMessage>];
|
|
56
|
-
/** Reflects an externally-sourced checked state onto the model without
|
|
57
|
-
* emitting an OutMessage. Use this to mirror external truth (saved
|
|
58
|
-
* settings, a server value) onto the checkbox without triggering the
|
|
59
|
-
* downstream reaction a user toggle would cause. Contrast with
|
|
60
|
-
* `setChecked`, which emits `ToggledChecked` so the parent reacts to a
|
|
61
|
-
* programmatic assignment the same way it reacts to a user toggle. Returns
|
|
62
|
-
* the model directly because it produces no commands and no OutMessage. */
|
|
63
|
-
export declare const reflectChecked: Reflect<Model, boolean>;
|
|
64
|
-
/** Attribute groups the checkbox component provides to the consumer's
|
|
65
|
-
* `toView` callback. Each group is a `ReadonlyArray<ChildAttribute>`:
|
|
66
|
-
* attributes published from inside Checkbox's own boundary that the
|
|
67
|
-
* consumer can spread directly into its own element attribute arrays:
|
|
1
|
+
import { type Attribute, type Html } from 'foldkit/html';
|
|
2
|
+
/** Attribute groups the checkbox provides to the consumer's `toView`
|
|
3
|
+
* callback. Each group is a `ReadonlyArray<Attribute<Message>>` the
|
|
4
|
+
* consumer spreads directly into its own element attribute arrays:
|
|
68
5
|
*
|
|
69
6
|
* ```ts
|
|
70
7
|
* toView: attributes =>
|
|
71
8
|
* h.div(
|
|
72
|
-
* [...attributes.checkbox, h.Class('my-class')
|
|
9
|
+
* [...attributes.checkbox, h.Class('my-class')],
|
|
73
10
|
* [...],
|
|
74
11
|
* )
|
|
75
12
|
* ```
|
|
76
13
|
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
export type CheckboxAttributes = Readonly<{
|
|
85
|
-
checkbox: ReadonlyArray<ChildAttribute>;
|
|
86
|
-
label: ReadonlyArray<ChildAttribute>;
|
|
87
|
-
description: ReadonlyArray<ChildAttribute>;
|
|
88
|
-
hiddenInput: ReadonlyArray<ChildAttribute>;
|
|
14
|
+
* The `checkbox` and `label` bundles carry the click and Space handlers that
|
|
15
|
+
* dispatch the configured `onToggle` Message. */
|
|
16
|
+
export type CheckboxAttributes<Message> = Readonly<{
|
|
17
|
+
checkbox: ReadonlyArray<Attribute<Message>>;
|
|
18
|
+
label: ReadonlyArray<Attribute<Message>>;
|
|
19
|
+
description: ReadonlyArray<Attribute<Message>>;
|
|
20
|
+
hiddenInput: ReadonlyArray<Attribute<Message>>;
|
|
89
21
|
}>;
|
|
90
|
-
/** Per-render view
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
|
|
95
|
-
|
|
22
|
+
/** Per-render view configuration for the stateless controlled {@link view}.
|
|
23
|
+
* Generic over `Message` (the message `onToggle` dispatches).
|
|
24
|
+
*
|
|
25
|
+
* - `isChecked`: the current checked state, read straight from the parent
|
|
26
|
+
* Model. `aria-checked` and the `data-checked` marker derive from it.
|
|
27
|
+
* - `onToggle`: dispatched with the new checked state when the user clicks
|
|
28
|
+
* the checkbox or its label, or presses Space. Handle it in the parent's
|
|
29
|
+
* `update` by storing the value.
|
|
30
|
+
* - `toView`: receives the {@link CheckboxAttributes} and lays out the
|
|
31
|
+
* checkbox. */
|
|
32
|
+
export type ViewConfig<Message> = Readonly<{
|
|
33
|
+
id: string;
|
|
34
|
+
isChecked: boolean;
|
|
35
|
+
onToggle: (isChecked: boolean) => Message;
|
|
36
|
+
toView: (attributes: CheckboxAttributes<Message>) => Html;
|
|
96
37
|
isDisabled?: boolean;
|
|
97
38
|
isIndeterminate?: boolean;
|
|
98
39
|
name?: string;
|
|
99
40
|
value?: string;
|
|
100
41
|
}>;
|
|
101
|
-
/** Renders an accessible checkbox
|
|
102
|
-
*
|
|
103
|
-
* `
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
42
|
+
/** Renders an accessible checkbox as a stateless controlled component. The
|
|
43
|
+
* parent owns the checked state (`isChecked`) and receives the new state via
|
|
44
|
+
* `onToggle` when the user toggles it.
|
|
45
|
+
*
|
|
46
|
+
* ```ts
|
|
47
|
+
* // In view:
|
|
48
|
+
* Checkbox.view<Message>({
|
|
49
|
+
* id: 'accept-terms',
|
|
50
|
+
* isChecked: model.acceptedTerms,
|
|
51
|
+
* onToggle: isChecked => ToggledTerms({ isChecked }),
|
|
52
|
+
* toView: attributes => ...,
|
|
53
|
+
* })
|
|
54
|
+
*
|
|
55
|
+
* // In update:
|
|
56
|
+
* ToggledTerms: ({ isChecked }) => [
|
|
57
|
+
* evo(model, { acceptedTerms: () => isChecked }),
|
|
58
|
+
* [],
|
|
59
|
+
* ],
|
|
60
|
+
* ``` */
|
|
61
|
+
export declare const view: <Message>(config: ViewConfig<Message>) => Html;
|
|
119
62
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/checkbox/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/checkbox/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,IAAI,EAAQ,MAAM,cAAc,CAAA;AAI9D;;;;;;;;;;;;;kDAakD;AAClD,MAAM,MAAM,kBAAkB,CAAC,OAAO,IAAI,QAAQ,CAAC;IACjD,QAAQ,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAC3C,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACxC,WAAW,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAC9C,WAAW,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;CAC/C,CAAC,CAAA;AAEF;;;;;;;;;kBASkB;AAClB,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,OAAO,CAAA;IACzC,MAAM,EAAE,CAAC,UAAU,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IACzD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC,CAAA;AAKF;;;;;;;;;;;;;;;;;;UAkBU;AACV,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IAqE3D,CAAA"}
|
package/dist/checkbox/index.js
CHANGED
|
@@ -1,84 +1,42 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { m } from 'foldkit/message';
|
|
4
|
-
import { evo } from 'foldkit/struct';
|
|
5
|
-
import { defineView } from 'foldkit/submodel';
|
|
6
|
-
// MODEL
|
|
7
|
-
/** Schema for the checkbox component's state, tracking the checked status. */
|
|
8
|
-
export const Model = S.Struct({
|
|
9
|
-
id: S.String,
|
|
10
|
-
isChecked: S.Boolean,
|
|
11
|
-
});
|
|
12
|
-
// MESSAGE
|
|
13
|
-
/** Sent when the user toggles the checkbox via click or Space key. */
|
|
14
|
-
export const Toggled = m('Toggled');
|
|
15
|
-
/** Sent to set the checked state to a specific value. Use this for
|
|
16
|
-
* programmatic state assignment (e.g. a "select all" handler that forces
|
|
17
|
-
* all child checkboxes to the same state) where `Toggled`'s flip semantics
|
|
18
|
-
* would not reliably reach the desired state. */
|
|
19
|
-
export const SetChecked = m('SetChecked', { isChecked: S.Boolean });
|
|
20
|
-
/** Schema for all messages the checkbox component can produce. */
|
|
21
|
-
export const Message = S.Union([Toggled, SetChecked]);
|
|
22
|
-
// OUT MESSAGE
|
|
23
|
-
/** Sent to the parent each time the checkbox toggles. Carries the new
|
|
24
|
-
* checked state. Consumers pattern-match this in their `GotCheckboxMessage`
|
|
25
|
-
* handler to lift the toggle into a domain Message (e.g., persisting the
|
|
26
|
-
* flag, dispatching a save command). */
|
|
27
|
-
export const ToggledChecked = m('ToggledChecked', { isChecked: S.Boolean });
|
|
28
|
-
/** Union of out-messages the checkbox component can produce. Surfaced as
|
|
29
|
-
* the third element of `update`'s return tuple and pattern-matched by
|
|
30
|
-
* the parent. */
|
|
31
|
-
export const OutMessage = S.Union([ToggledChecked]);
|
|
32
|
-
/** Creates an initial checkbox model from a config. Defaults to unchecked. */
|
|
33
|
-
export const init = (config) => ({
|
|
34
|
-
id: config.id,
|
|
35
|
-
isChecked: config.isChecked ?? false,
|
|
36
|
-
});
|
|
37
|
-
// UPDATE
|
|
38
|
-
/** Processes a checkbox message and returns the next model, commands,
|
|
39
|
-
* and a `ToggledChecked` OutMessage carrying the new checked state. */
|
|
40
|
-
export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
|
|
41
|
-
Toggled: () => {
|
|
42
|
-
const nextIsChecked = !model.isChecked;
|
|
43
|
-
return [
|
|
44
|
-
evo(model, { isChecked: () => nextIsChecked }),
|
|
45
|
-
[],
|
|
46
|
-
Option.some(ToggledChecked({ isChecked: nextIsChecked })),
|
|
47
|
-
];
|
|
48
|
-
},
|
|
49
|
-
SetChecked: ({ isChecked }) => [
|
|
50
|
-
evo(model, { isChecked: () => isChecked }),
|
|
51
|
-
[],
|
|
52
|
-
Option.some(ToggledChecked({ isChecked })),
|
|
53
|
-
],
|
|
54
|
-
}));
|
|
55
|
-
/** Programmatically sets the checked state. Emits a `ToggledChecked`
|
|
56
|
-
* OutMessage just like a user-initiated toggle. Use this in domain-event
|
|
57
|
-
* handlers where you need to force a specific state (e.g. "select all"). */
|
|
58
|
-
export const setChecked = (model, isChecked) => update(model, SetChecked({ isChecked }));
|
|
59
|
-
/** Reflects an externally-sourced checked state onto the model without
|
|
60
|
-
* emitting an OutMessage. Use this to mirror external truth (saved
|
|
61
|
-
* settings, a server value) onto the checkbox without triggering the
|
|
62
|
-
* downstream reaction a user toggle would cause. Contrast with
|
|
63
|
-
* `setChecked`, which emits `ToggledChecked` so the parent reacts to a
|
|
64
|
-
* programmatic assignment the same way it reacts to a user toggle. Returns
|
|
65
|
-
* the model directly because it produces no commands and no OutMessage. */
|
|
66
|
-
export const reflectChecked = Function.dual(2, (model, isChecked) => evo(model, { isChecked: () => isChecked }));
|
|
1
|
+
import { Match as M, Option } from 'effect';
|
|
2
|
+
import { html } from 'foldkit/html';
|
|
67
3
|
const labelId = (id) => `${id}-label`;
|
|
68
4
|
const descriptionId = (id) => `${id}-description`;
|
|
69
|
-
/** Renders an accessible checkbox
|
|
70
|
-
*
|
|
71
|
-
* `
|
|
72
|
-
|
|
5
|
+
/** Renders an accessible checkbox as a stateless controlled component. The
|
|
6
|
+
* parent owns the checked state (`isChecked`) and receives the new state via
|
|
7
|
+
* `onToggle` when the user toggles it.
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* // In view:
|
|
11
|
+
* Checkbox.view<Message>({
|
|
12
|
+
* id: 'accept-terms',
|
|
13
|
+
* isChecked: model.acceptedTerms,
|
|
14
|
+
* onToggle: isChecked => ToggledTerms({ isChecked }),
|
|
15
|
+
* toView: attributes => ...,
|
|
16
|
+
* })
|
|
17
|
+
*
|
|
18
|
+
* // In update:
|
|
19
|
+
* ToggledTerms: ({ isChecked }) => [
|
|
20
|
+
* evo(model, { acceptedTerms: () => isChecked }),
|
|
21
|
+
* [],
|
|
22
|
+
* ],
|
|
23
|
+
* ``` */
|
|
24
|
+
export const view = (config) => {
|
|
73
25
|
const h = html();
|
|
74
|
-
const { id, isChecked } =
|
|
75
|
-
const
|
|
76
|
-
const handleKeyUp = (key) => M.value(key).pipe(M.when(' ', () => Option.some(
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
26
|
+
const { id, isChecked, onToggle, toView, isDisabled = false, isIndeterminate = false, name, value: formValue = 'on', } = config;
|
|
27
|
+
const nextChecked = !isChecked;
|
|
28
|
+
const handleKeyUp = (key) => M.value(key).pipe(M.when(' ', () => Option.some(onToggle(nextChecked))), M.orElse(() => Option.none()));
|
|
29
|
+
const resolveStateAttributes = () => {
|
|
30
|
+
if (isIndeterminate) {
|
|
31
|
+
return [h.DataAttribute('indeterminate', '')];
|
|
32
|
+
}
|
|
33
|
+
else if (isChecked) {
|
|
34
|
+
return [h.DataAttribute('checked', '')];
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
return [];
|
|
38
|
+
}
|
|
39
|
+
};
|
|
82
40
|
const disabledAttributes = isDisabled
|
|
83
41
|
? [h.AriaDisabled(true), h.DataAttribute('disabled', '')]
|
|
84
42
|
: [];
|
|
@@ -88,24 +46,27 @@ export const view = defineView((model, viewInputs) => {
|
|
|
88
46
|
h.AriaLabelledBy(labelId(id)),
|
|
89
47
|
h.AriaDescribedBy(descriptionId(id)),
|
|
90
48
|
h.Tabindex(0),
|
|
91
|
-
...
|
|
49
|
+
...resolveStateAttributes(),
|
|
92
50
|
...disabledAttributes,
|
|
93
51
|
...(isDisabled
|
|
94
52
|
? []
|
|
95
|
-
: [
|
|
53
|
+
: [
|
|
54
|
+
h.OnClick(onToggle(nextChecked)),
|
|
55
|
+
h.OnKeyUpPreventDefault(handleKeyUp),
|
|
56
|
+
]),
|
|
96
57
|
];
|
|
97
58
|
const labelAttributes = [
|
|
98
59
|
h.Id(labelId(id)),
|
|
99
|
-
...(isDisabled ? [] : [h.OnClick(
|
|
60
|
+
...(isDisabled ? [] : [h.OnClick(onToggle(nextChecked))]),
|
|
100
61
|
];
|
|
101
62
|
const descriptionAttributes = [h.Id(descriptionId(id))];
|
|
102
63
|
const hiddenInputAttributes = name
|
|
103
64
|
? [h.Type('hidden'), h.Name(name), h.Value(isChecked ? formValue : '')]
|
|
104
65
|
: [];
|
|
105
|
-
return
|
|
106
|
-
checkbox:
|
|
107
|
-
label:
|
|
108
|
-
description:
|
|
109
|
-
hiddenInput:
|
|
66
|
+
return toView({
|
|
67
|
+
checkbox: checkboxAttributes,
|
|
68
|
+
label: labelAttributes,
|
|
69
|
+
description: descriptionAttributes,
|
|
70
|
+
hiddenInput: hiddenInputAttributes,
|
|
110
71
|
});
|
|
111
|
-
}
|
|
72
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export type {
|
|
1
|
+
export { view } from './index.js';
|
|
2
|
+
export type { ViewConfig, CheckboxAttributes } from './index.js';
|
|
3
3
|
//# sourceMappingURL=public.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/checkbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/checkbox/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA"}
|
package/dist/checkbox/public.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { view } from './index.js';
|