@foldkit/ui 0.127.0 → 0.128.1
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 +5 -5
package/dist/radioGroup/index.js
CHANGED
|
@@ -1,90 +1,38 @@
|
|
|
1
|
-
import { Array,
|
|
2
|
-
import
|
|
3
|
-
import * as Dom from 'foldkit/dom';
|
|
4
|
-
import { childAttributes, html, } from 'foldkit/html';
|
|
5
|
-
import { m } from 'foldkit/message';
|
|
6
|
-
import { evo } from 'foldkit/struct';
|
|
7
|
-
import { defineView, } from 'foldkit/submodel';
|
|
1
|
+
import { Array, Match as M, Option, Predicate, Schema as S, String, pipe, } from 'effect';
|
|
2
|
+
import { html } from 'foldkit/html';
|
|
8
3
|
import { idSelector } from '../internal/selectors.js';
|
|
9
4
|
import { keyToIndex } from '../keyboard.js';
|
|
10
5
|
// MODEL
|
|
11
6
|
/** Controls the radio group layout direction and which arrow keys navigate between options. */
|
|
12
7
|
export const Orientation = S.Literals(['Horizontal', 'Vertical']);
|
|
13
|
-
|
|
14
|
-
export const Model = S.Struct({
|
|
15
|
-
id: S.String,
|
|
16
|
-
selectedValue: S.Option(S.String),
|
|
17
|
-
orientation: Orientation,
|
|
18
|
-
});
|
|
19
|
-
// MESSAGE
|
|
20
|
-
/** Sent when a radio option is selected via click or keyboard navigation. */
|
|
21
|
-
export const SelectedOption = m('SelectedOption', {
|
|
22
|
-
value: S.String,
|
|
23
|
-
index: S.Number,
|
|
24
|
-
});
|
|
25
|
-
/** Sent when the focus-option command completes. */
|
|
26
|
-
export const CompletedFocusOption = m('CompletedFocusOption');
|
|
27
|
-
/** Union of all messages the radio group component can produce. */
|
|
28
|
-
export const Message = S.Union([SelectedOption, CompletedFocusOption]);
|
|
29
|
-
// OUT MESSAGE
|
|
30
|
-
/** Sent to the parent when an option is committed. Carries the selected
|
|
31
|
-
* value and its index. Generic over `Value extends string`: the runtime
|
|
32
|
-
* schema stores `value: string`, but the type-level OutMessage exposes
|
|
33
|
-
* `value: Value` so consumers who supply `options: ReadonlyArray<MyUnion>`
|
|
34
|
-
* receive `value: MyUnion` from the factory's `update` without casting at
|
|
35
|
-
* the call site. The cast is fenced inside this module's `update` return,
|
|
36
|
-
* sound because the value was selected from the options array the
|
|
37
|
-
* consumer supplied. */
|
|
38
|
-
export const Selected = m('Selected', { value: S.String, index: S.Number });
|
|
39
|
-
export const OutMessage = S.Union([Selected]);
|
|
40
|
-
/** Creates an initial radio group model from a config. Defaults to no selection and vertical orientation. */
|
|
41
|
-
export const init = (config) => ({
|
|
42
|
-
id: config.id,
|
|
43
|
-
selectedValue: Option.fromNullishOr(config.selectedValue),
|
|
44
|
-
orientation: config.orientation ?? 'Vertical',
|
|
45
|
-
});
|
|
46
|
-
// UPDATE
|
|
8
|
+
// VIEW
|
|
47
9
|
const optionId = (id, index) => `${id}-option-${index}`;
|
|
48
|
-
/** Moves focus to the radio option at the given index. */
|
|
49
|
-
export const FocusOption = Command.define('FocusOption', { id: S.String, index: S.Number }, CompletedFocusOption)(({ id, index }) => Dom.focus(idSelector(optionId(id, index))).pipe(Effect.ignore, Effect.as(CompletedFocusOption())));
|
|
50
|
-
const withInternalUpdateReturn = M.withReturnType();
|
|
51
|
-
/** Processes a radio group message and returns the next model, commands, and
|
|
52
|
-
* optional OutMessage. Generic over `Value extends string`: pass the consumer's
|
|
53
|
-
* union type at the call site to receive `Selected({ value: MyUnion })` without
|
|
54
|
-
* casting. Defaults to `string`. */
|
|
55
|
-
export const update = (model, message) => {
|
|
56
|
-
const result = M.value(message).pipe(withInternalUpdateReturn, M.tagsExhaustive({
|
|
57
|
-
SelectedOption: ({ value, index }) => [
|
|
58
|
-
evo(model, { selectedValue: () => Option.some(value) }),
|
|
59
|
-
[FocusOption({ id: model.id, index })],
|
|
60
|
-
Option.some(Selected({ value, index })),
|
|
61
|
-
],
|
|
62
|
-
CompletedFocusOption: () => [model, [], Option.none()],
|
|
63
|
-
}));
|
|
64
|
-
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
|
|
65
|
-
return result;
|
|
66
|
-
};
|
|
67
|
-
/** Programmatically selects a value in the radio group, updating the model
|
|
68
|
-
* and returning focus commands plus a `Selected` OutMessage. */
|
|
69
|
-
export const select = (model, value, options) => pipe(options, Array.findFirstIndex(option => option === value), Option.match({
|
|
70
|
-
onNone: () => [model, [], Option.none()],
|
|
71
|
-
onSome: index => update(model, SelectedOption({ value, index })),
|
|
72
|
-
}));
|
|
73
|
-
/** Reflects an externally-sourced selection onto the model without
|
|
74
|
-
* emitting an OutMessage or running the focus command. Use this to mirror
|
|
75
|
-
* external truth (a URL parameter, restored storage, a server push) onto
|
|
76
|
-
* the radio group's selection. Contrast with `select`, which represents a
|
|
77
|
-
* user or programmatic *choice*: it focuses the option and emits
|
|
78
|
-
* `Selected`. Takes no `options` (unlike `select`) because it sets the
|
|
79
|
-
* value directly rather than deriving a focus index. Returns the model
|
|
80
|
-
* directly because it produces no commands and no OutMessage. */
|
|
81
|
-
export const reflectSelectedValue = Function.dual(2, (model, maybeValue) => evo(model, { selectedValue: () => maybeValue }));
|
|
82
10
|
const labelId = (id, index) => `${id}-option-${index}-label`;
|
|
83
11
|
const descriptionId = (id, index) => `${id}-option-${index}-description`;
|
|
84
|
-
|
|
12
|
+
/** Renders an accessible radio group as a stateless controlled component. The
|
|
13
|
+
* parent owns the selection (`selectedValue`) and receives the parent's own
|
|
14
|
+
* Message via `onSelect` when an option is chosen. Moving focus onto the
|
|
15
|
+
* newly-active option is the radio group's own concern: it happens inside the
|
|
16
|
+
* component's click and keydown handlers, so the parent's `update` only stores
|
|
17
|
+
* the value.
|
|
18
|
+
*
|
|
19
|
+
* ```ts
|
|
20
|
+
* // In view:
|
|
21
|
+
* RadioGroup.view<Tool, Message>({
|
|
22
|
+
* id: TOOL_RADIO_GROUP_ID,
|
|
23
|
+
* selectedValue: Option.some(model.tool),
|
|
24
|
+
* options: TOOLS,
|
|
25
|
+
* ariaLabel: 'Tool',
|
|
26
|
+
* onSelect: tool => SelectedTool({ tool }),
|
|
27
|
+
* toView: ({ group, options }) => ...,
|
|
28
|
+
* })
|
|
29
|
+
*
|
|
30
|
+
* // In update:
|
|
31
|
+
* SelectedTool: ({ tool }) => [evo(model, { tool: () => tool }), []],
|
|
32
|
+
* ``` */
|
|
33
|
+
export const view = (config) => {
|
|
85
34
|
const h = html();
|
|
86
|
-
const { id, selectedValue } =
|
|
87
|
-
const { options, ariaLabel, toView, isOptionDisabled: isOptionDisabledFn, isDisabled: isGroupDisabled = false, name, orientation = model.orientation, } = viewInputs;
|
|
35
|
+
const { id, selectedValue, options, onSelect, ariaLabel, toView, orientation = 'Vertical', isOptionDisabled: isOptionDisabledFn, isDisabled: isGroupDisabled = false, name, } = config;
|
|
88
36
|
const isDisabled = (index) => {
|
|
89
37
|
if (isGroupDisabled) {
|
|
90
38
|
return true;
|
|
@@ -95,7 +43,11 @@ const internalView = defineView((model, viewInputs) => {
|
|
|
95
43
|
return pipe(options, Array.get(index), Option.exists(option => isOptionDisabledFn(option, index)));
|
|
96
44
|
};
|
|
97
45
|
const selectedIndex = Option.flatMap(selectedValue, value => Array.findFirstIndex(options, option => option === value));
|
|
98
|
-
const
|
|
46
|
+
const firstEnabledIndex = pipe(options.length, Array.makeBy(index => index), Array.findFirst(Predicate.not(isDisabled)), Option.getOrElse(() => 0));
|
|
47
|
+
// NOTE: The selected index only becomes the roving tab stop when it is
|
|
48
|
+
// enabled. A disabled selected option would otherwise be the group's sole
|
|
49
|
+
// tab stop with no keydown handler, stranding keyboard navigation.
|
|
50
|
+
const focusedIndex = pipe(selectedIndex, Option.filter(Predicate.not(isDisabled)), Option.getOrElse(() => firstEnabledIndex));
|
|
99
51
|
const { nextKey, previousKey } = M.value(orientation).pipe(M.when('Horizontal', () => ({
|
|
100
52
|
nextKey: 'ArrowRight',
|
|
101
53
|
previousKey: 'ArrowLeft',
|
|
@@ -104,10 +56,11 @@ const internalView = defineView((model, viewInputs) => {
|
|
|
104
56
|
previousKey: 'ArrowUp',
|
|
105
57
|
})), M.exhaustive);
|
|
106
58
|
const resolveKeyIndex = keyToIndex(nextKey, previousKey, options.length, focusedIndex, isDisabled);
|
|
107
|
-
const
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
})
|
|
59
|
+
const selectionAt = (index) => pipe(options, Array.get(index), Option.map(value => ({
|
|
60
|
+
focusSelector: idSelector(optionId(id, index)),
|
|
61
|
+
message: onSelect(value),
|
|
62
|
+
})));
|
|
63
|
+
const handleKeyDown = (currentIndex) => (key) => M.value(key).pipe(M.whenOr(nextKey, previousKey, 'Home', 'End', 'PageUp', 'PageDown', () => selectionAt(resolveKeyIndex(key))), M.when(' ', () => selectionAt(currentIndex)), M.orElse(() => Option.none()));
|
|
111
64
|
const optionInfos = Array.map(options, (value, index) => {
|
|
112
65
|
const isSelected = Option.exists(selectedIndex, selectedIdx => selectedIdx === index);
|
|
113
66
|
const isFocusable = index === focusedIndex;
|
|
@@ -134,8 +87,8 @@ const internalView = defineView((model, viewInputs) => {
|
|
|
134
87
|
...(isOptionDisabledNow
|
|
135
88
|
? []
|
|
136
89
|
: [
|
|
137
|
-
h.
|
|
138
|
-
h.
|
|
90
|
+
h.OnClickFocus(idSelector(optionId(id, index)), onSelect(value)),
|
|
91
|
+
h.OnKeyDownFocus(handleKeyDown(index)),
|
|
139
92
|
]),
|
|
140
93
|
];
|
|
141
94
|
const labelAttributes = [h.Id(labelId(id, index))];
|
|
@@ -146,9 +99,9 @@ const internalView = defineView((model, viewInputs) => {
|
|
|
146
99
|
isSelected,
|
|
147
100
|
isActive: isFocusable,
|
|
148
101
|
isDisabled: isOptionDisabledNow,
|
|
149
|
-
option:
|
|
150
|
-
label:
|
|
151
|
-
description:
|
|
102
|
+
option: optionAttributes,
|
|
103
|
+
label: labelAttributes,
|
|
104
|
+
description: descriptionAttributes,
|
|
152
105
|
};
|
|
153
106
|
});
|
|
154
107
|
const groupAttributes = [
|
|
@@ -162,37 +115,9 @@ const internalView = defineView((model, viewInputs) => {
|
|
|
162
115
|
h.Value(value),
|
|
163
116
|
])), Option.getOrElse(() => []));
|
|
164
117
|
return toView({
|
|
165
|
-
group:
|
|
118
|
+
group: groupAttributes,
|
|
166
119
|
options: optionInfos,
|
|
167
120
|
selectedValue,
|
|
168
|
-
hiddenInput:
|
|
121
|
+
hiddenInput: hiddenInputAttributes,
|
|
169
122
|
});
|
|
170
|
-
}
|
|
171
|
-
/** Pairs the radio group's `view` and `update` (and `select`) behind a
|
|
172
|
-
* single Value-typed entry point. Declaring the radio group once at
|
|
173
|
-
* module scope ensures the OutMessage's `value` field carries the
|
|
174
|
-
* consumer's union type without an `as` cast at the call site:
|
|
175
|
-
*
|
|
176
|
-
* ```ts
|
|
177
|
-
* const ToolRadioGroup = RadioGroup.create<Tool>()
|
|
178
|
-
*
|
|
179
|
-
* // In view:
|
|
180
|
-
* h.submodel({ view: ToolRadioGroup.view, ... })
|
|
181
|
-
*
|
|
182
|
-
* // In update:
|
|
183
|
-
* const [next, commands, maybeOutMessage] = ToolRadioGroup.update(model, message)
|
|
184
|
-
* // maybeOutMessage: Option<RadioGroup.OutMessage<Tool>>
|
|
185
|
-
* ```
|
|
186
|
-
*
|
|
187
|
-
* The view's `ViewInputs.options` stays typed `ReadonlyArray<string>`;
|
|
188
|
-
* consumers can pass a `ReadonlyArray<MyUnion>` (assignable) and the
|
|
189
|
-
* fenced cast inside `update` types the OutMessage's `value` as
|
|
190
|
-
* `MyUnion`. */
|
|
191
|
-
export const create = () => ({
|
|
192
|
-
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
|
|
193
|
-
view: internalView,
|
|
194
|
-
update: (model, message) => update(model, message),
|
|
195
|
-
select: (model, value, options) => select(model, value, options),
|
|
196
|
-
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
|
|
197
|
-
reflectSelectedValue: reflectSelectedValue,
|
|
198
|
-
});
|
|
123
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export type {
|
|
1
|
+
export { view, Orientation } from './index.js';
|
|
2
|
+
export type { ViewConfig, RenderInfo, OptionInfo } from './index.js';
|
|
3
3
|
//# sourceMappingURL=public.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/radioGroup/public.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/radioGroup/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE9C,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { view, Orientation } from './index.js';
|
package/dist/slider/index.d.ts
CHANGED
|
@@ -3,11 +3,13 @@ import type { Command } from 'foldkit/command';
|
|
|
3
3
|
import { type ChildAttribute, type Html } from 'foldkit/html';
|
|
4
4
|
import { type Reflect } from 'foldkit/submodel';
|
|
5
5
|
import * as Subscription from 'foldkit/subscription';
|
|
6
|
-
/** Schema for the slider component's state.
|
|
7
|
-
*
|
|
6
|
+
/** Schema for the slider component's private interaction state. The current
|
|
7
|
+
* value is owned by the parent and passed in via `ViewInputs.value`, so it is
|
|
8
|
+
* not stored here. `min`/`max`/`step` are configuration the drag subscription
|
|
9
|
+
* reads to map pointer positions into values. `dragState` tracks the active
|
|
10
|
+
* drag phase and captures the pre-drag value so Escape can restore it. */
|
|
8
11
|
export declare const Model: S.Struct<{
|
|
9
12
|
readonly id: S.String;
|
|
10
|
-
readonly value: S.Number;
|
|
11
13
|
readonly min: S.Number;
|
|
12
14
|
readonly max: S.Number;
|
|
13
15
|
readonly step: S.Number;
|
|
@@ -16,13 +18,18 @@ export declare const Model: S.Struct<{
|
|
|
16
18
|
}>]>;
|
|
17
19
|
}>;
|
|
18
20
|
export type Model = typeof Model.Type;
|
|
19
|
-
/** The user pressed the thumb. Starts a drag without changing the value.
|
|
20
|
-
|
|
21
|
+
/** The user pressed the thumb. Starts a drag without changing the value. The
|
|
22
|
+
* view supplies `originValue`, the current value, so Escape can restore it. */
|
|
23
|
+
export declare const PressedThumb: import("foldkit/schema").CallableTaggedStruct<"PressedThumb", {
|
|
24
|
+
originValue: S.Number;
|
|
25
|
+
}>;
|
|
21
26
|
/** The user pressed the track. Starts a drag and snaps the value to the
|
|
22
27
|
* cursor position. Ignored while already dragging, which absorbs the bubble
|
|
23
|
-
* from a thumb press so the value is not shifted.
|
|
28
|
+
* from a thumb press so the value is not shifted. `originValue` is the current
|
|
29
|
+
* value the drag restores to on Escape. */
|
|
24
30
|
export declare const PressedPointer: import("foldkit/schema").CallableTaggedStruct<"PressedPointer", {
|
|
25
31
|
value: S.Number;
|
|
32
|
+
originValue: S.Number;
|
|
26
33
|
}>;
|
|
27
34
|
/** The pointer moved during a drag, producing a new snapped value from the
|
|
28
35
|
* cursor position within the track. */
|
|
@@ -33,9 +40,11 @@ export declare const MovedDragPointer: import("foldkit/schema").CallableTaggedSt
|
|
|
33
40
|
export declare const ReleasedDragPointer: import("foldkit/schema").CallableTaggedStruct<"ReleasedDragPointer", {}>;
|
|
34
41
|
/** Escape was pressed during a drag. Restores the value from the drag origin. */
|
|
35
42
|
export declare const CancelledDrag: import("foldkit/schema").CallableTaggedStruct<"CancelledDrag", {}>;
|
|
36
|
-
/** The user pressed a keyboard navigation key on the focused thumb.
|
|
43
|
+
/** The user pressed a keyboard navigation key on the focused thumb. The view
|
|
44
|
+
* supplies `value`, the current value, to compute the next one from. */
|
|
37
45
|
export declare const PressedKeyboardNavigation: import("foldkit/schema").CallableTaggedStruct<"PressedKeyboardNavigation", {
|
|
38
46
|
direction: S.Literals<readonly ["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>;
|
|
47
|
+
value: S.Number;
|
|
39
48
|
}>;
|
|
40
49
|
/** Union of all messages the slider component can produce. */
|
|
41
50
|
export declare const Message: S.Union<[
|
|
@@ -70,36 +79,35 @@ export type InitConfig = Readonly<{
|
|
|
70
79
|
min: number;
|
|
71
80
|
max: number;
|
|
72
81
|
step: number;
|
|
73
|
-
initialValue: number;
|
|
74
82
|
}>;
|
|
75
|
-
/** Creates an initial slider model from a config. The
|
|
76
|
-
*
|
|
83
|
+
/** Creates an initial slider model from a config. The value lives in the
|
|
84
|
+
* parent Model; initialize it there and snap it with {@link snapAndClamp}. */
|
|
77
85
|
export declare const init: (config: InitConfig) => Model;
|
|
86
|
+
/** Snaps a value to the nearest step and clamps it into `[min, max]`. Exported
|
|
87
|
+
* so a parent can conform the value it owns to the slider's range, for example
|
|
88
|
+
* when seeding the initial value or reacting to an external update. */
|
|
89
|
+
export declare const snapAndClamp: (value: number, min: number, max: number, step: number) => number;
|
|
78
90
|
/** Computes the fraction (0–1) of a value between min and max. Returns 0 when
|
|
79
91
|
* the range has zero width. */
|
|
80
|
-
export declare const fractionOfValue: (
|
|
92
|
+
export declare const fractionOfValue: (value: number, min: number, max: number) => number;
|
|
81
93
|
type UpdateReturn = readonly [
|
|
82
94
|
Model,
|
|
83
95
|
ReadonlyArray<Command<Message>>,
|
|
84
96
|
Option.Option<OutMessage>
|
|
85
97
|
];
|
|
86
98
|
/** Processes a slider message and returns the next model, commands, and an
|
|
87
|
-
* optional out-message for the parent.
|
|
99
|
+
* optional out-message for the parent. The value lives in the parent Model:
|
|
100
|
+
* the view supplies the current value on the messages that need it, and value
|
|
101
|
+
* changes surface as `ChangedValue` rather than mutating this Model. */
|
|
88
102
|
export declare const update: (model: Model, message: Message) => UpdateReturn;
|
|
89
|
-
/** Reflects an externally-driven range onto the slider.
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
* structural range change cannot leave the value out of bounds. */
|
|
103
|
+
/** Reflects an externally-driven range onto the slider. Use this when min/max
|
|
104
|
+
* derive from external state (e.g. a bounded buffer whose first/last index
|
|
105
|
+
* shifts over time). The parent owns the value, so conform it to the new range
|
|
106
|
+
* in the same update with {@link snapAndClamp}. */
|
|
94
107
|
export declare const reflectRange: Reflect<Model, Readonly<{
|
|
95
108
|
min: number;
|
|
96
109
|
max: number;
|
|
97
110
|
}>>;
|
|
98
|
-
/** Reflects an externally-driven value onto the slider, snapped and clamped
|
|
99
|
-
* into range; a no-op while the user is dragging, since drag state owns the
|
|
100
|
-
* value. Does not emit `ChangedValue`; use when the value is being driven by
|
|
101
|
-
* external state rather than user input. */
|
|
102
|
-
export declare const reflectValue: Reflect<Model, number>;
|
|
103
111
|
/** Builds slider drag subscriptions, looking up the track
|
|
104
112
|
* element through the supplied root resolver. Use this when the slider is
|
|
105
113
|
* rendered inside a Shadow DOM. The root is read lazily so consumers can
|
|
@@ -107,7 +115,6 @@ export declare const reflectValue: Reflect<Model, number>;
|
|
|
107
115
|
export declare const subscriptionsForRoot: (getTrackRoot: () => Document | ShadowRoot) => {
|
|
108
116
|
readonly dragPointer: Subscription.EntryWithoutKeepAlive<S.Struct.ReadonlySide<{
|
|
109
117
|
readonly id: S.String;
|
|
110
|
-
readonly value: S.Number;
|
|
111
118
|
readonly min: S.Number;
|
|
112
119
|
readonly max: S.Number;
|
|
113
120
|
readonly step: S.Number;
|
|
@@ -118,9 +125,11 @@ export declare const subscriptionsForRoot: (getTrackRoot: () => Document | Shado
|
|
|
118
125
|
readonly _tag: S.tag<"CancelledDrag">;
|
|
119
126
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
120
127
|
readonly _tag: S.tag<"PressedThumb">;
|
|
128
|
+
originValue: S.Number;
|
|
121
129
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
122
130
|
readonly _tag: S.tag<"PressedPointer">;
|
|
123
131
|
value: S.Number;
|
|
132
|
+
originValue: S.Number;
|
|
124
133
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
125
134
|
readonly _tag: S.tag<"MovedDragPointer">;
|
|
126
135
|
value: S.Number;
|
|
@@ -129,6 +138,7 @@ export declare const subscriptionsForRoot: (getTrackRoot: () => Document | Shado
|
|
|
129
138
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
130
139
|
readonly _tag: S.tag<"PressedKeyboardNavigation">;
|
|
131
140
|
direction: S.Literals<readonly ["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>;
|
|
141
|
+
value: S.Number;
|
|
132
142
|
}, "Type">, S.Struct.ReadonlySide<{
|
|
133
143
|
readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
|
|
134
144
|
readonly id: S.String;
|
|
@@ -139,7 +149,6 @@ export declare const subscriptionsForRoot: (getTrackRoot: () => Document | Shado
|
|
|
139
149
|
};
|
|
140
150
|
readonly dragEscape: Subscription.EntryWithoutKeepAlive<S.Struct.ReadonlySide<{
|
|
141
151
|
readonly id: S.String;
|
|
142
|
-
readonly value: S.Number;
|
|
143
152
|
readonly min: S.Number;
|
|
144
153
|
readonly max: S.Number;
|
|
145
154
|
readonly step: S.Number;
|
|
@@ -150,9 +159,11 @@ export declare const subscriptionsForRoot: (getTrackRoot: () => Document | Shado
|
|
|
150
159
|
readonly _tag: S.tag<"CancelledDrag">;
|
|
151
160
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
152
161
|
readonly _tag: S.tag<"PressedThumb">;
|
|
162
|
+
originValue: S.Number;
|
|
153
163
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
154
164
|
readonly _tag: S.tag<"PressedPointer">;
|
|
155
165
|
value: S.Number;
|
|
166
|
+
originValue: S.Number;
|
|
156
167
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
157
168
|
readonly _tag: S.tag<"MovedDragPointer">;
|
|
158
169
|
value: S.Number;
|
|
@@ -161,6 +172,7 @@ export declare const subscriptionsForRoot: (getTrackRoot: () => Document | Shado
|
|
|
161
172
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
162
173
|
readonly _tag: S.tag<"PressedKeyboardNavigation">;
|
|
163
174
|
direction: S.Literals<readonly ["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>;
|
|
175
|
+
value: S.Number;
|
|
164
176
|
}, "Type">, S.Struct.ReadonlySide<{
|
|
165
177
|
readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
|
|
166
178
|
}, "Type">, never> & {
|
|
@@ -171,7 +183,6 @@ export declare const subscriptionsForRoot: (getTrackRoot: () => Document | Shado
|
|
|
171
183
|
export declare const subscriptions: {
|
|
172
184
|
readonly dragPointer: Subscription.EntryWithoutKeepAlive<S.Struct.ReadonlySide<{
|
|
173
185
|
readonly id: S.String;
|
|
174
|
-
readonly value: S.Number;
|
|
175
186
|
readonly min: S.Number;
|
|
176
187
|
readonly max: S.Number;
|
|
177
188
|
readonly step: S.Number;
|
|
@@ -182,9 +193,11 @@ export declare const subscriptions: {
|
|
|
182
193
|
readonly _tag: S.tag<"CancelledDrag">;
|
|
183
194
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
184
195
|
readonly _tag: S.tag<"PressedThumb">;
|
|
196
|
+
originValue: S.Number;
|
|
185
197
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
186
198
|
readonly _tag: S.tag<"PressedPointer">;
|
|
187
199
|
value: S.Number;
|
|
200
|
+
originValue: S.Number;
|
|
188
201
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
189
202
|
readonly _tag: S.tag<"MovedDragPointer">;
|
|
190
203
|
value: S.Number;
|
|
@@ -193,6 +206,7 @@ export declare const subscriptions: {
|
|
|
193
206
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
194
207
|
readonly _tag: S.tag<"PressedKeyboardNavigation">;
|
|
195
208
|
direction: S.Literals<readonly ["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>;
|
|
209
|
+
value: S.Number;
|
|
196
210
|
}, "Type">, S.Struct.ReadonlySide<{
|
|
197
211
|
readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
|
|
198
212
|
readonly id: S.String;
|
|
@@ -203,7 +217,6 @@ export declare const subscriptions: {
|
|
|
203
217
|
};
|
|
204
218
|
readonly dragEscape: Subscription.EntryWithoutKeepAlive<S.Struct.ReadonlySide<{
|
|
205
219
|
readonly id: S.String;
|
|
206
|
-
readonly value: S.Number;
|
|
207
220
|
readonly min: S.Number;
|
|
208
221
|
readonly max: S.Number;
|
|
209
222
|
readonly step: S.Number;
|
|
@@ -214,9 +227,11 @@ export declare const subscriptions: {
|
|
|
214
227
|
readonly _tag: S.tag<"CancelledDrag">;
|
|
215
228
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
216
229
|
readonly _tag: S.tag<"PressedThumb">;
|
|
230
|
+
originValue: S.Number;
|
|
217
231
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
218
232
|
readonly _tag: S.tag<"PressedPointer">;
|
|
219
233
|
value: S.Number;
|
|
234
|
+
originValue: S.Number;
|
|
220
235
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
221
236
|
readonly _tag: S.tag<"MovedDragPointer">;
|
|
222
237
|
value: S.Number;
|
|
@@ -225,6 +240,7 @@ export declare const subscriptions: {
|
|
|
225
240
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
226
241
|
readonly _tag: S.tag<"PressedKeyboardNavigation">;
|
|
227
242
|
direction: S.Literals<readonly ["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>;
|
|
243
|
+
value: S.Number;
|
|
228
244
|
}, "Type">, S.Struct.ReadonlySide<{
|
|
229
245
|
readonly dragActivity: S.Literals<readonly ["Idle", "Active"]>;
|
|
230
246
|
}, "Type">, never> & {
|
|
@@ -245,6 +261,9 @@ export type SliderAttributes = Readonly<{
|
|
|
245
261
|
}>;
|
|
246
262
|
/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
|
|
247
263
|
export type ViewInputs = Readonly<{
|
|
264
|
+
/** The current value, read straight from the parent Model. The thumb
|
|
265
|
+
* position, `aria-valuenow`, and the filled track all derive from it. */
|
|
266
|
+
value: number;
|
|
248
267
|
toView: (attributes: SliderAttributes) => Html;
|
|
249
268
|
ariaLabel?: string;
|
|
250
269
|
ariaLabelledBy?: string;
|
|
@@ -264,7 +283,6 @@ export type ViewInputs = Readonly<{
|
|
|
264
283
|
* end. Pointer drag is handled by the component's drag subscriptions. */
|
|
265
284
|
export declare const view: import("foldkit/submodel").View<S.Struct.ReadonlySide<{
|
|
266
285
|
readonly id: S.String;
|
|
267
|
-
readonly value: S.Number;
|
|
268
286
|
readonly min: S.Number;
|
|
269
287
|
readonly max: S.Number;
|
|
270
288
|
readonly step: S.Number;
|
|
@@ -275,9 +293,11 @@ export declare const view: import("foldkit/submodel").View<S.Struct.ReadonlySide
|
|
|
275
293
|
readonly _tag: S.tag<"CancelledDrag">;
|
|
276
294
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
277
295
|
readonly _tag: S.tag<"PressedThumb">;
|
|
296
|
+
originValue: S.Number;
|
|
278
297
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
279
298
|
readonly _tag: S.tag<"PressedPointer">;
|
|
280
299
|
value: S.Number;
|
|
300
|
+
originValue: S.Number;
|
|
281
301
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
282
302
|
readonly _tag: S.tag<"MovedDragPointer">;
|
|
283
303
|
value: S.Number;
|
|
@@ -286,7 +306,11 @@ export declare const view: import("foldkit/submodel").View<S.Struct.ReadonlySide
|
|
|
286
306
|
}, "Type"> | S.Struct.ReadonlySide<{
|
|
287
307
|
readonly _tag: S.tag<"PressedKeyboardNavigation">;
|
|
288
308
|
direction: S.Literals<readonly ["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>;
|
|
309
|
+
value: S.Number;
|
|
289
310
|
}, "Type">, Readonly<{
|
|
311
|
+
/** The current value, read straight from the parent Model. The thumb
|
|
312
|
+
* position, `aria-valuenow`, and the filled track all derive from it. */
|
|
313
|
+
value: number;
|
|
290
314
|
toView: (attributes: SliderAttributes) => Html;
|
|
291
315
|
ariaLabel?: string;
|
|
292
316
|
ariaLabelledBy?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,MAAM,EACN,MAAM,IAAI,CAAC,EAIZ,MAAM,QAAQ,CAAA;AACf,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAC9C,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,IAAI,EAGV,MAAM,cAAc,CAAA;AAIrB,OAAO,EAAE,KAAK,OAAO,EAAc,MAAM,kBAAkB,CAAA;AAC3D,OAAO,KAAK,YAAY,MAAM,sBAAsB,CAAA;AASpD;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slider/index.ts"],"names":[],"mappings":"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"}
|