@sectile/dom 0.2.0 → 0.2.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/dist/accordion.d.ts +91 -0
- package/dist/accordion.d.ts.map +1 -0
- package/dist/accordion.js +289 -0
- package/dist/accordion.js.map +1 -0
- package/dist/alert-dialog.d.ts +32 -0
- package/dist/alert-dialog.d.ts.map +1 -0
- package/dist/alert-dialog.js +14 -0
- package/dist/alert-dialog.js.map +1 -0
- package/dist/calendar.d.ts +98 -0
- package/dist/calendar.d.ts.map +1 -0
- package/dist/calendar.js +296 -0
- package/dist/calendar.js.map +1 -0
- package/dist/carousel.d.ts +64 -0
- package/dist/carousel.d.ts.map +1 -0
- package/dist/carousel.js +290 -0
- package/dist/carousel.js.map +1 -0
- package/dist/cascade-select.d.ts +61 -0
- package/dist/cascade-select.d.ts.map +1 -0
- package/dist/cascade-select.js +175 -0
- package/dist/cascade-select.js.map +1 -0
- package/dist/checkbox-group.d.ts +22 -0
- package/dist/checkbox-group.d.ts.map +1 -0
- package/dist/checkbox-group.js +32 -0
- package/dist/checkbox-group.js.map +1 -0
- package/dist/checkbox.d.ts +64 -0
- package/dist/checkbox.d.ts.map +1 -0
- package/dist/checkbox.js +63 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/color-picker.d.ts +54 -0
- package/dist/color-picker.d.ts.map +1 -0
- package/dist/color-picker.js +316 -0
- package/dist/color-picker.js.map +1 -0
- package/dist/combobox.d.ts +129 -0
- package/dist/combobox.d.ts.map +1 -0
- package/dist/combobox.js +397 -0
- package/dist/combobox.js.map +1 -0
- package/dist/date-field.d.ts +42 -0
- package/dist/date-field.d.ts.map +1 -0
- package/dist/date-field.js +91 -0
- package/dist/date-field.js.map +1 -0
- package/dist/date-picker.d.ts +52 -0
- package/dist/date-picker.d.ts.map +1 -0
- package/dist/date-picker.js +127 -0
- package/dist/date-picker.js.map +1 -0
- package/dist/date-range-field.d.ts +48 -0
- package/dist/date-range-field.d.ts.map +1 -0
- package/dist/date-range-field.js +114 -0
- package/dist/date-range-field.js.map +1 -0
- package/dist/date-range-picker.d.ts +52 -0
- package/dist/date-range-picker.d.ts.map +1 -0
- package/dist/date-range-picker.js +69 -0
- package/dist/date-range-picker.js.map +1 -0
- package/dist/date-time-field.d.ts +42 -0
- package/dist/date-time-field.d.ts.map +1 -0
- package/dist/date-time-field.js +166 -0
- package/dist/date-time-field.js.map +1 -0
- package/dist/date-time-picker.d.ts +54 -0
- package/dist/date-time-picker.d.ts.map +1 -0
- package/dist/date-time-picker.js +295 -0
- package/dist/date-time-picker.js.map +1 -0
- package/dist/date-time-range-picker.d.ts +57 -0
- package/dist/date-time-range-picker.d.ts.map +1 -0
- package/dist/date-time-range-picker.js +322 -0
- package/dist/date-time-range-picker.js.map +1 -0
- package/dist/dialog.d.ts +31 -0
- package/dist/dialog.d.ts.map +1 -0
- package/dist/dialog.js +15 -0
- package/dist/dialog.js.map +1 -0
- package/dist/disclosure.d.ts +70 -0
- package/dist/disclosure.d.ts.map +1 -0
- package/dist/disclosure.js +142 -0
- package/dist/disclosure.js.map +1 -0
- package/dist/editable.d.ts +37 -0
- package/dist/editable.d.ts.map +1 -0
- package/dist/editable.js +83 -0
- package/dist/editable.js.map +1 -0
- package/dist/feed.d.ts +43 -0
- package/dist/feed.d.ts.map +1 -0
- package/dist/feed.js +151 -0
- package/dist/feed.js.map +1 -0
- package/dist/form.d.ts +82 -0
- package/dist/form.d.ts.map +1 -0
- package/dist/form.js +473 -0
- package/dist/form.js.map +1 -0
- package/dist/grid.d.ts +54 -0
- package/dist/grid.d.ts.map +1 -0
- package/dist/grid.js +172 -0
- package/dist/grid.js.map +1 -0
- package/dist/index.d.ts +109 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +61 -0
- package/dist/index.js.map +1 -0
- package/dist/internal/checked-control.d.ts +67 -0
- package/dist/internal/checked-control.d.ts.map +1 -0
- package/dist/internal/checked-control.js +137 -0
- package/dist/internal/checked-control.js.map +1 -0
- package/dist/internal/controller.d.ts +6 -0
- package/dist/internal/controller.d.ts.map +1 -0
- package/dist/internal/controller.js +35 -0
- package/dist/internal/controller.js.map +1 -0
- package/dist/internal/date-picker-cell.d.ts +2 -0
- package/dist/internal/date-picker-cell.d.ts.map +1 -0
- package/dist/internal/date-picker-cell.js +10 -0
- package/dist/internal/date-picker-cell.js.map +1 -0
- package/dist/internal/delegated-event.d.ts +2 -0
- package/dist/internal/delegated-event.d.ts.map +1 -0
- package/dist/internal/delegated-event.js +11 -0
- package/dist/internal/delegated-event.js.map +1 -0
- package/dist/internal/direction.d.ts +3 -0
- package/dist/internal/direction.d.ts.map +1 -0
- package/dist/internal/direction.js +8 -0
- package/dist/internal/direction.js.map +1 -0
- package/dist/internal/disabled-items.d.ts +6 -0
- package/dist/internal/disabled-items.d.ts.map +1 -0
- package/dist/internal/disabled-items.js +15 -0
- package/dist/internal/disabled-items.js.map +1 -0
- package/dist/internal/facade.d.ts +45 -0
- package/dist/internal/facade.d.ts.map +1 -0
- package/dist/internal/facade.js +58 -0
- package/dist/internal/facade.js.map +1 -0
- package/dist/internal/floating-position.d.ts +26 -0
- package/dist/internal/floating-position.d.ts.map +1 -0
- package/dist/internal/floating-position.js +93 -0
- package/dist/internal/floating-position.js.map +1 -0
- package/dist/internal/interaction.d.ts +14 -0
- package/dist/internal/interaction.d.ts.map +1 -0
- package/dist/internal/interaction.js +25 -0
- package/dist/internal/interaction.js.map +1 -0
- package/dist/internal/layer-binding.d.ts +16 -0
- package/dist/internal/layer-binding.d.ts.map +1 -0
- package/dist/internal/layer-binding.js +99 -0
- package/dist/internal/layer-binding.js.map +1 -0
- package/dist/internal/layer-manager.d.ts +19 -0
- package/dist/internal/layer-manager.d.ts.map +1 -0
- package/dist/internal/layer-manager.js +81 -0
- package/dist/internal/layer-manager.js.map +1 -0
- package/dist/internal/menu-control.d.ts +41 -0
- package/dist/internal/menu-control.d.ts.map +1 -0
- package/dist/internal/menu-control.js +279 -0
- package/dist/internal/menu-control.js.map +1 -0
- package/dist/internal/popup-control.d.ts +40 -0
- package/dist/internal/popup-control.d.ts.map +1 -0
- package/dist/internal/popup-control.js +189 -0
- package/dist/internal/popup-control.js.map +1 -0
- package/dist/internal/semantic-controller.d.ts +20 -0
- package/dist/internal/semantic-controller.d.ts.map +1 -0
- package/dist/internal/semantic-controller.js +42 -0
- package/dist/internal/semantic-controller.js.map +1 -0
- package/dist/internal/text-element.d.ts +16 -0
- package/dist/internal/text-element.d.ts.map +1 -0
- package/dist/internal/text-element.js +217 -0
- package/dist/internal/text-element.js.map +1 -0
- package/dist/listbox.d.ts +142 -0
- package/dist/listbox.d.ts.map +1 -0
- package/dist/listbox.js +463 -0
- package/dist/listbox.js.map +1 -0
- package/dist/menu-button.d.ts +10 -0
- package/dist/menu-button.d.ts.map +1 -0
- package/dist/menu-button.js +11 -0
- package/dist/menu-button.js.map +1 -0
- package/dist/menu.d.ts +10 -0
- package/dist/menu.d.ts.map +1 -0
- package/dist/menu.js +11 -0
- package/dist/menu.js.map +1 -0
- package/dist/menubar.d.ts +8 -0
- package/dist/menubar.d.ts.map +1 -0
- package/dist/menubar.js +11 -0
- package/dist/menubar.js.map +1 -0
- package/dist/month-picker.d.ts +5 -0
- package/dist/month-picker.d.ts.map +1 -0
- package/dist/month-picker.js +3 -0
- package/dist/month-picker.js.map +1 -0
- package/dist/month-range-picker.d.ts +4 -0
- package/dist/month-range-picker.d.ts.map +1 -0
- package/dist/month-range-picker.js +3 -0
- package/dist/month-range-picker.js.map +1 -0
- package/dist/multi-thumb-slider.d.ts +43 -0
- package/dist/multi-thumb-slider.d.ts.map +1 -0
- package/dist/multi-thumb-slider.js +190 -0
- package/dist/multi-thumb-slider.js.map +1 -0
- package/dist/navigation-menu.d.ts +8 -0
- package/dist/navigation-menu.d.ts.map +1 -0
- package/dist/navigation-menu.js +10 -0
- package/dist/navigation-menu.js.map +1 -0
- package/dist/number-field.d.ts +48 -0
- package/dist/number-field.d.ts.map +1 -0
- package/dist/number-field.js +138 -0
- package/dist/number-field.js.map +1 -0
- package/dist/pagination.d.ts +52 -0
- package/dist/pagination.d.ts.map +1 -0
- package/dist/pagination.js +199 -0
- package/dist/pagination.js.map +1 -0
- package/dist/pin-input.d.ts +31 -0
- package/dist/pin-input.d.ts.map +1 -0
- package/dist/pin-input.js +84 -0
- package/dist/pin-input.js.map +1 -0
- package/dist/popover.d.ts +54 -0
- package/dist/popover.d.ts.map +1 -0
- package/dist/popover.js +79 -0
- package/dist/popover.js.map +1 -0
- package/dist/quantity-field.d.ts +53 -0
- package/dist/quantity-field.d.ts.map +1 -0
- package/dist/quantity-field.js +190 -0
- package/dist/quantity-field.js.map +1 -0
- package/dist/radio-group.d.ts +69 -0
- package/dist/radio-group.d.ts.map +1 -0
- package/dist/radio-group.js +225 -0
- package/dist/radio-group.js.map +1 -0
- package/dist/range-calendar.d.ts +3 -0
- package/dist/range-calendar.d.ts.map +1 -0
- package/dist/range-calendar.js +2 -0
- package/dist/range-calendar.js.map +1 -0
- package/dist/rating.d.ts +23 -0
- package/dist/rating.d.ts.map +1 -0
- package/dist/rating.js +38 -0
- package/dist/rating.js.map +1 -0
- package/dist/reorder.d.ts +39 -0
- package/dist/reorder.d.ts.map +1 -0
- package/dist/reorder.js +308 -0
- package/dist/reorder.js.map +1 -0
- package/dist/select.d.ts +50 -0
- package/dist/select.d.ts.map +1 -0
- package/dist/select.js +89 -0
- package/dist/select.js.map +1 -0
- package/dist/slider.d.ts +108 -0
- package/dist/slider.d.ts.map +1 -0
- package/dist/slider.js +342 -0
- package/dist/slider.js.map +1 -0
- package/dist/spin-button.d.ts +44 -0
- package/dist/spin-button.d.ts.map +1 -0
- package/dist/spin-button.js +130 -0
- package/dist/spin-button.js.map +1 -0
- package/dist/stepper.d.ts +24 -0
- package/dist/stepper.d.ts.map +1 -0
- package/dist/stepper.js +32 -0
- package/dist/stepper.js.map +1 -0
- package/dist/switch.d.ts +45 -0
- package/dist/switch.d.ts.map +1 -0
- package/dist/switch.js +44 -0
- package/dist/switch.js.map +1 -0
- package/dist/tabs.d.ts +86 -0
- package/dist/tabs.d.ts.map +1 -0
- package/dist/tabs.js +259 -0
- package/dist/tabs.js.map +1 -0
- package/dist/tags-input.d.ts +38 -0
- package/dist/tags-input.d.ts.map +1 -0
- package/dist/tags-input.js +93 -0
- package/dist/tags-input.js.map +1 -0
- package/dist/text.d.ts +85 -0
- package/dist/text.d.ts.map +1 -0
- package/dist/text.js +225 -0
- package/dist/text.js.map +1 -0
- package/dist/time-field.d.ts +42 -0
- package/dist/time-field.d.ts.map +1 -0
- package/dist/time-field.js +59 -0
- package/dist/time-field.js.map +1 -0
- package/dist/time-range-field.d.ts +48 -0
- package/dist/time-range-field.d.ts.map +1 -0
- package/dist/time-range-field.js +98 -0
- package/dist/time-range-field.js.map +1 -0
- package/dist/timer.d.ts +32 -0
- package/dist/timer.d.ts.map +1 -0
- package/dist/timer.js +46 -0
- package/dist/timer.js.map +1 -0
- package/dist/toast.d.ts +34 -0
- package/dist/toast.d.ts.map +1 -0
- package/dist/toast.js +116 -0
- package/dist/toast.js.map +1 -0
- package/dist/toggle-button.d.ts +39 -0
- package/dist/toggle-button.d.ts.map +1 -0
- package/dist/toggle-button.js +37 -0
- package/dist/toggle-button.js.map +1 -0
- package/dist/toggle-group.d.ts +42 -0
- package/dist/toggle-group.d.ts.map +1 -0
- package/dist/toggle-group.js +91 -0
- package/dist/toggle-group.js.map +1 -0
- package/dist/toolbar.d.ts +43 -0
- package/dist/toolbar.d.ts.map +1 -0
- package/dist/toolbar.js +151 -0
- package/dist/toolbar.js.map +1 -0
- package/dist/tooltip.d.ts +44 -0
- package/dist/tooltip.d.ts.map +1 -0
- package/dist/tooltip.js +67 -0
- package/dist/tooltip.js.map +1 -0
- package/dist/tree-grid.d.ts +131 -0
- package/dist/tree-grid.d.ts.map +1 -0
- package/dist/tree-grid.js +466 -0
- package/dist/tree-grid.js.map +1 -0
- package/dist/tree-view.d.ts +104 -0
- package/dist/tree-view.d.ts.map +1 -0
- package/dist/tree-view.js +332 -0
- package/dist/tree-view.js.map +1 -0
- package/dist/window-splitter.d.ts +8 -0
- package/dist/window-splitter.d.ts.map +1 -0
- package/dist/window-splitter.js +13 -0
- package/dist/window-splitter.js.map +1 -0
- package/dist/year-picker.d.ts +3 -0
- package/dist/year-picker.d.ts.map +1 -0
- package/dist/year-picker.js +2 -0
- package/dist/year-picker.js.map +1 -0
- package/dist/year-range-picker.d.ts +3 -0
- package/dist/year-range-picker.d.ts.map +1 -0
- package/dist/year-range-picker.js +2 -0
- package/dist/year-range-picker.js.map +1 -0
- package/package.json +2 -2
package/dist/timer.js
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { applyTimerEvent, tryCreateTimerState, getTimerParts, getTimerProgress } from '@sectile/core/timer';
|
|
2
|
+
import { unwrap } from '@sectile/core/result';
|
|
3
|
+
import { createFacadeConnection } from './internal/facade.js';
|
|
4
|
+
import { createSemanticController } from './internal/semantic-controller.js';
|
|
5
|
+
export function createTimer(options) { return unwrap(tryCreateTimer(options)); }
|
|
6
|
+
export function tryCreateTimer(options) { return createFacadeConnection(options, (normalized) => tryCreateTimerConnection(normalized)); }
|
|
7
|
+
function tryCreateTimerConnection(options) { const policies = { ...(options.countdown === undefined ? {} : { countdown: options.countdown }), ...(options.startMs === undefined ? {} : { startMs: options.startMs }), ...(options.targetMs === undefined ? {} : { targetMs: options.targetMs }) }; const runtime = createSemanticController({ initial: tryCreateTimerState(policies, policies.startMs ?? 0, options.autoStart ?? false), reducer: (state, event) => applyTimerEvent(state, event, policies), toEffect: (command) => command }); return runtime.ok ? { ok: true, value: new DOMTimer(options, policies, runtime.value) } : runtime; }
|
|
8
|
+
class DOMTimer {
|
|
9
|
+
#options;
|
|
10
|
+
#policies;
|
|
11
|
+
#runtime;
|
|
12
|
+
#items = new Map();
|
|
13
|
+
#actions = new Map();
|
|
14
|
+
#interval;
|
|
15
|
+
#lastTick = Date.now();
|
|
16
|
+
constructor(options, policies, runtime) { this.#options = options; this.#policies = policies; this.#runtime = runtime; options.root.setAttribute('role', 'timer'); options.root.setAttribute('aria-live', 'off'); const intervalMs = options.intervalMs ?? 100; this.#interval = setInterval(() => { if (!this.getSnapshot().state.running)
|
|
17
|
+
return; const now = Date.now(); const elapsedMs = now - this.#lastTick; this.#lastTick = now; this.handleEvent({ type: 'tick', elapsedMs }); }, intervalMs); this.#refresh(); }
|
|
18
|
+
getSnapshot() { return this.#runtime.getSnapshot(); }
|
|
19
|
+
handleEvent(event) { if (event === 'start' || event === 'resume' || event === 'restart' || (event === 'toggle' && !this.getSnapshot().state.running))
|
|
20
|
+
this.#lastTick = Date.now(); const result = this.#runtime.handle(event); if (!result.ok)
|
|
21
|
+
return false; if (typeof event === 'object')
|
|
22
|
+
this.#options.onTick?.(result.snapshot.state.valueMs, unwrap(getTimerParts(result.snapshot.state.valueMs))); for (const command of result.commands)
|
|
23
|
+
this.#options.onComplete?.(command.valueMs); this.#refresh(); this.#options.onUpdate?.(); return true; }
|
|
24
|
+
start() { return this.handleEvent('start'); }
|
|
25
|
+
pause() { return this.handleEvent('pause'); }
|
|
26
|
+
resume() { return this.handleEvent('resume'); }
|
|
27
|
+
reset() { return this.handleEvent('reset'); }
|
|
28
|
+
restart() { return this.handleEvent('restart'); }
|
|
29
|
+
setItemAttributes(element, type) { this.#items.set(type, element); element.dataset['timerItem'] = type; this.#refresh(); }
|
|
30
|
+
setActionAttributes(element, action) { const previous = this.#actions.get(action); if (previous !== undefined)
|
|
31
|
+
previous.element.removeEventListener('click', previous.click); const click = () => { this.handleEvent(action); }; element.addEventListener('click', click); this.#actions.set(action, { element, click }); this.#refresh(); }
|
|
32
|
+
disconnect() { clearInterval(this.#interval); for (const item of this.#actions.values())
|
|
33
|
+
item.element.removeEventListener('click', item.click); this.#actions.clear(); this.#items.clear(); }
|
|
34
|
+
#refresh() { const state = this.getSnapshot().state; const parts = unwrap(getTimerParts(state.valueMs)); const progress = unwrap(getTimerProgress(state, this.#policies)); this.#options.root.dataset['state'] = state.completed ? 'complete' : state.running ? 'running' : 'idle'; this.#options.root.dataset['countdown'] = String(this.#policies.countdown === true); this.#options.root.setAttribute('aria-label', formatAccessible(parts)); if (progress === null)
|
|
35
|
+
this.#options.root.removeAttribute('aria-valuenow');
|
|
36
|
+
else
|
|
37
|
+
this.#options.root.setAttribute('aria-valuenow', String(progress)); for (const [type, element] of this.#items)
|
|
38
|
+
element.textContent = formatPart(type, parts[type]); for (const [action, { element }] of this.#actions) {
|
|
39
|
+
element.type = 'button';
|
|
40
|
+
element.dataset['timerAction'] = action;
|
|
41
|
+
element.disabled = (action === 'pause' && !state.running) || ((action === 'start' || action === 'resume') && (state.running || state.completed));
|
|
42
|
+
} }
|
|
43
|
+
}
|
|
44
|
+
function formatPart(type, value) { return String(value).padStart(type === 'milliseconds' ? 3 : type === 'days' ? 1 : 2, '0'); }
|
|
45
|
+
function formatAccessible(parts) { return `${parts.days} days, ${parts.hours} hours, ${parts.minutes} minutes, ${parts.seconds} seconds`; }
|
|
46
|
+
//# sourceMappingURL=timer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"timer.js","sourceRoot":"","sources":["../src/timer.ts"],"names":[],"mappings":"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"}
|
package/dist/toast.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { Result, StableID } from '@sectile/core';
|
|
2
|
+
import { type ToastEvent, type ToastInput, type ToastItem, type ToastPolicies, type ToastState } from '@sectile/core/toast';
|
|
3
|
+
import type { RevisionSnapshot } from '@sectile/core/revision';
|
|
4
|
+
import { type FacadeConnection } from './internal/facade.js';
|
|
5
|
+
export type { ToastInput, ToastItem, ToastKind } from '@sectile/core/toast';
|
|
6
|
+
export interface ToastOptions<ID extends StableID = StableID> extends ToastPolicies {
|
|
7
|
+
readonly root: HTMLElement;
|
|
8
|
+
readonly initialToasts?: readonly ToastInput<ID>[];
|
|
9
|
+
readonly label?: string;
|
|
10
|
+
readonly autoDismiss?: boolean;
|
|
11
|
+
readonly tickIntervalMs?: number;
|
|
12
|
+
readonly onItemsChange?: (items: readonly ToastItem<ID>[]) => void;
|
|
13
|
+
readonly onAnnounce?: (item: ToastItem<ID>) => void;
|
|
14
|
+
readonly onDismiss?: (id: ID, reason: 'manual' | 'timeout' | 'overflow') => void;
|
|
15
|
+
readonly onUpdate?: () => void;
|
|
16
|
+
}
|
|
17
|
+
export type ToastItemsChangeHandler<ID extends StableID = StableID> = NonNullable<ToastOptions<ID>['onItemsChange']>;
|
|
18
|
+
export type ToastAnnounceHandler<ID extends StableID = StableID> = NonNullable<ToastOptions<ID>['onAnnounce']>;
|
|
19
|
+
export type ToastDismissHandler<ID extends StableID = StableID> = NonNullable<ToastOptions<ID>['onDismiss']>;
|
|
20
|
+
export type ToastUpdateHandler<ID extends StableID = StableID> = NonNullable<ToastOptions<ID>['onUpdate']>;
|
|
21
|
+
export interface ToastConnection<ID extends StableID = StableID> {
|
|
22
|
+
getSnapshot(): RevisionSnapshot<ToastState<ID>>;
|
|
23
|
+
handleEvent(event: ToastEvent<ID>): boolean;
|
|
24
|
+
push(toast: ToastInput<ID>): boolean;
|
|
25
|
+
updateToast(id: ID, toast: Partial<Omit<ToastInput<ID>, 'id'>>): boolean;
|
|
26
|
+
dismiss(id: ID): boolean;
|
|
27
|
+
dismissAll(): boolean;
|
|
28
|
+
setToastAttributes(element: HTMLElement, id: ID): void;
|
|
29
|
+
setCloseButtonAttributes(element: HTMLButtonElement, id: ID): void;
|
|
30
|
+
disconnect(): void;
|
|
31
|
+
}
|
|
32
|
+
export declare function createToast<ID extends StableID>(options: ToastOptions<ID>): FacadeConnection<ToastConnection<ID>>;
|
|
33
|
+
export declare function tryCreateToast<ID extends StableID>(options: ToastOptions<ID>): Result<FacadeConnection<ToastConnection<ID>>>;
|
|
34
|
+
//# sourceMappingURL=toast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/toast.ts"],"names":[],"mappings":"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"}
|
package/dist/toast.js
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import { applyToastEvent, tryCreateToastState } from '@sectile/core/toast';
|
|
2
|
+
import { unwrap } from '@sectile/core/result';
|
|
3
|
+
import { createFacadeConnection } from './internal/facade.js';
|
|
4
|
+
import { createSemanticController } from './internal/semantic-controller.js';
|
|
5
|
+
export function createToast(options) { return unwrap(tryCreateToast(options)); }
|
|
6
|
+
export function tryCreateToast(options) { return createFacadeConnection(options, (normalized) => tryCreateToastConnection(normalized)); }
|
|
7
|
+
function tryCreateToastConnection(options) {
|
|
8
|
+
let connection;
|
|
9
|
+
const runtime = createSemanticController({
|
|
10
|
+
initial: tryCreateToastState(options.initialToasts ?? [], false, options),
|
|
11
|
+
reducer: (state, event) => applyToastEvent(state, event, options),
|
|
12
|
+
notify: (_previous, proposed) => options.onItemsChange?.(proposed.items),
|
|
13
|
+
toEffect: (command) => command,
|
|
14
|
+
});
|
|
15
|
+
if (!runtime.ok)
|
|
16
|
+
return runtime;
|
|
17
|
+
connection = new DOMToast(options, runtime.value);
|
|
18
|
+
return { ok: true, value: connection };
|
|
19
|
+
}
|
|
20
|
+
class DOMToast {
|
|
21
|
+
#options;
|
|
22
|
+
#runtime;
|
|
23
|
+
#toasts = new Map();
|
|
24
|
+
#closes = new Map();
|
|
25
|
+
#pause;
|
|
26
|
+
#resume;
|
|
27
|
+
#timer;
|
|
28
|
+
#lastTick = Date.now();
|
|
29
|
+
constructor(options, runtime) {
|
|
30
|
+
this.#options = options;
|
|
31
|
+
this.#runtime = runtime;
|
|
32
|
+
options.root.setAttribute('role', 'region');
|
|
33
|
+
options.root.setAttribute('aria-label', options.label ?? 'Notifications');
|
|
34
|
+
options.root.setAttribute('aria-live', 'polite');
|
|
35
|
+
this.#pause = () => { this.handleEvent('pause'); };
|
|
36
|
+
this.#resume = () => { this.#lastTick = Date.now(); this.handleEvent('resume'); };
|
|
37
|
+
options.root.addEventListener('mouseenter', this.#pause);
|
|
38
|
+
options.root.addEventListener('mouseleave', this.#resume);
|
|
39
|
+
options.root.addEventListener('focusin', this.#pause);
|
|
40
|
+
options.root.addEventListener('focusout', this.#resume);
|
|
41
|
+
const interval = options.tickIntervalMs ?? 100;
|
|
42
|
+
this.#timer = options.autoDismiss === false ? null : setInterval(() => {
|
|
43
|
+
if (this.getSnapshot().state.paused)
|
|
44
|
+
return;
|
|
45
|
+
const now = Date.now();
|
|
46
|
+
const elapsedMs = now - this.#lastTick;
|
|
47
|
+
this.#lastTick = now;
|
|
48
|
+
if (this.getSnapshot().state.items.some((item) => item.remainingMs !== null))
|
|
49
|
+
this.handleEvent({ type: 'tick', elapsedMs });
|
|
50
|
+
}, interval);
|
|
51
|
+
this.#refresh();
|
|
52
|
+
}
|
|
53
|
+
getSnapshot() { return this.#runtime.getSnapshot(); }
|
|
54
|
+
handleEvent(event) {
|
|
55
|
+
const result = this.#runtime.handle(event);
|
|
56
|
+
if (!result.ok)
|
|
57
|
+
return false;
|
|
58
|
+
for (const command of result.commands) {
|
|
59
|
+
if (command.type === 'announce-toast') {
|
|
60
|
+
const item = result.snapshot.state.items.find((candidate) => candidate.id === command.id);
|
|
61
|
+
if (item !== undefined)
|
|
62
|
+
this.#options.onAnnounce?.(item);
|
|
63
|
+
}
|
|
64
|
+
else
|
|
65
|
+
this.#options.onDismiss?.(command.id, command.reason);
|
|
66
|
+
}
|
|
67
|
+
this.#refresh();
|
|
68
|
+
this.#options.onUpdate?.();
|
|
69
|
+
return true;
|
|
70
|
+
}
|
|
71
|
+
push(toast) { return this.handleEvent({ type: 'push', toast }); }
|
|
72
|
+
updateToast(id, toast) { return this.handleEvent({ type: 'update', id, toast }); }
|
|
73
|
+
dismiss(id) { return this.handleEvent({ type: 'dismiss', id }); }
|
|
74
|
+
dismissAll() { return this.handleEvent('dismiss-all'); }
|
|
75
|
+
setToastAttributes(element, id) { this.#toasts.set(id, element); this.#refresh(); }
|
|
76
|
+
setCloseButtonAttributes(element, id) {
|
|
77
|
+
const previous = this.#closes.get(id);
|
|
78
|
+
if (previous !== undefined)
|
|
79
|
+
previous.element.removeEventListener('click', previous.click);
|
|
80
|
+
const click = () => { this.dismiss(id); };
|
|
81
|
+
element.addEventListener('click', click);
|
|
82
|
+
this.#closes.set(id, { element, click });
|
|
83
|
+
this.#refresh();
|
|
84
|
+
}
|
|
85
|
+
disconnect() {
|
|
86
|
+
if (this.#timer !== null)
|
|
87
|
+
clearInterval(this.#timer);
|
|
88
|
+
this.#options.root.removeEventListener('mouseenter', this.#pause);
|
|
89
|
+
this.#options.root.removeEventListener('mouseleave', this.#resume);
|
|
90
|
+
this.#options.root.removeEventListener('focusin', this.#pause);
|
|
91
|
+
this.#options.root.removeEventListener('focusout', this.#resume);
|
|
92
|
+
for (const registration of this.#closes.values())
|
|
93
|
+
registration.element.removeEventListener('click', registration.click);
|
|
94
|
+
this.#closes.clear();
|
|
95
|
+
this.#toasts.clear();
|
|
96
|
+
}
|
|
97
|
+
#refresh() {
|
|
98
|
+
const state = this.getSnapshot().state;
|
|
99
|
+
this.#options.root.dataset['paused'] = String(state.paused);
|
|
100
|
+
for (const [id, element] of this.#toasts) {
|
|
101
|
+
const item = state.items.find((candidate) => candidate.id === id);
|
|
102
|
+
element.hidden = item === undefined;
|
|
103
|
+
if (item === undefined)
|
|
104
|
+
continue;
|
|
105
|
+
element.setAttribute('role', item.kind === 'error' ? 'alert' : 'status');
|
|
106
|
+
element.dataset['state'] = 'open';
|
|
107
|
+
element.dataset['kind'] = item.kind;
|
|
108
|
+
}
|
|
109
|
+
for (const [id, { element }] of this.#closes) {
|
|
110
|
+
element.type = 'button';
|
|
111
|
+
element.setAttribute('aria-label', 'Dismiss notification');
|
|
112
|
+
element.disabled = !state.items.some((item) => item.id === id);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
//# sourceMappingURL=toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast.js","sourceRoot":"","sources":["../src/toast.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { type FacadeConnection } from './internal/facade.js';
|
|
2
|
+
import type { Result } from '@sectile/core';
|
|
3
|
+
import { type ToggleButtonEvent, type ToggleButtonState } from '@sectile/core/toggle-button';
|
|
4
|
+
import { type CheckedControlAttributes, type CheckedControlController, type DOMCheckedControl } from './internal/checked-control.js';
|
|
5
|
+
export interface ToggleButtonOptions {
|
|
6
|
+
readonly element: HTMLElement;
|
|
7
|
+
readonly pressed?: boolean;
|
|
8
|
+
readonly defaultPressed?: boolean;
|
|
9
|
+
readonly disabled?: boolean;
|
|
10
|
+
readonly readOnly?: boolean;
|
|
11
|
+
readonly onPressedChange?: (pressed: boolean) => void;
|
|
12
|
+
readonly onUpdate?: () => void;
|
|
13
|
+
}
|
|
14
|
+
export type ToggleButtonPressedChangeHandler = NonNullable<ToggleButtonOptions['onPressedChange']>;
|
|
15
|
+
export type ToggleButtonUpdateHandler = NonNullable<ToggleButtonOptions['onUpdate']>;
|
|
16
|
+
export type ToggleButtonConnection = DOMCheckedControl<ToggleButtonState, ToggleButtonEvent, boolean>;
|
|
17
|
+
export interface ToggleButtonControllerOptions {
|
|
18
|
+
readonly pressed?: boolean;
|
|
19
|
+
readonly defaultPressed?: boolean;
|
|
20
|
+
readonly disabled?: boolean;
|
|
21
|
+
readonly readOnly?: boolean;
|
|
22
|
+
readonly onPressedChange?: (pressed: boolean) => void;
|
|
23
|
+
}
|
|
24
|
+
export type ToggleButtonControllerPressedChangeHandler = NonNullable<ToggleButtonControllerOptions['onPressedChange']>;
|
|
25
|
+
export type ToggleButtonController = CheckedControlController<ToggleButtonState, ToggleButtonEvent, boolean>;
|
|
26
|
+
export interface ToggleButtonAttributeOptions {
|
|
27
|
+
readonly disabled?: boolean;
|
|
28
|
+
readonly readOnly?: boolean;
|
|
29
|
+
readonly native?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export type ToggleButtonAttributes = CheckedControlAttributes & {
|
|
32
|
+
readonly 'data-scope': 'toggle-button';
|
|
33
|
+
readonly 'data-part': 'root';
|
|
34
|
+
};
|
|
35
|
+
export declare function createToggleButtonController(options?: ToggleButtonControllerOptions): Result<ToggleButtonController>;
|
|
36
|
+
export declare function getToggleButtonAttributes(state: ToggleButtonState, options?: ToggleButtonAttributeOptions): ToggleButtonAttributes;
|
|
37
|
+
export declare function createToggleButton(options: ToggleButtonOptions): FacadeConnection<ToggleButtonConnection>;
|
|
38
|
+
export declare function tryCreateToggleButton(options: ToggleButtonOptions): Result<FacadeConnection<ToggleButtonConnection>>;
|
|
39
|
+
//# sourceMappingURL=toggle-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../src/toggle-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAErF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAAC,OAAO,EAAgF,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACxN,OAAO,EAIL,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AACvC,MAAM,WAAW,mBAAmB;IAAG,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE;AAEtR,MAAM,MAAM,gCAAgC,GAAG,WAAW,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC,CAAC;AACnG,MAAM,MAAM,yBAAyB,GAAG,WAAW,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC,CAAC;AACrF,MAAM,MAAM,sBAAsB,GAAG,iBAAiB,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAC;AACtG,MAAM,WAAW,6BAA6B;IAAG,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAAE;AAEjO,MAAM,MAAM,0CAA0C,GAAG,WAAW,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC,CAAC;AACvH,MAAM,MAAM,sBAAsB,GAAG,wBAAwB,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,OAAO,CAAC,CAAC;AAC7G,MAAM,WAAW,4BAA4B;IAAG,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE;AACrI,MAAM,MAAM,sBAAsB,GAAG,wBAAwB,GAAG;IAAE,QAAQ,CAAC,YAAY,EAAE,eAAe,CAAC;IAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzI,wBAAgB,4BAA4B,CAAC,OAAO,GAAE,6BAAkC,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAUxH;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,iBAAiB,EACxB,OAAO,GAAE,4BAAiC,GACzC,sBAAsB,CAaxB;AACD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,mBAAmB,GAAG,gBAAgB,CAAC,sBAAsB,CAAC,CAEzG;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,mBAAmB,GAAG,MAAM,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,CAEpH"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { createFacadeConnection } from './internal/facade.js';
|
|
2
|
+
import { unwrap } from '@sectile/core/result';
|
|
3
|
+
import { applyToggleButtonEvent, tryCreateToggleButtonState } from '@sectile/core/toggle-button';
|
|
4
|
+
import { createCheckedControlController, createDOMCheckedControl, getCheckedControlAttributes, } from './internal/checked-control.js';
|
|
5
|
+
export function createToggleButtonController(options = {}) {
|
|
6
|
+
return createCheckedControlController({
|
|
7
|
+
controlled: options.pressed !== undefined,
|
|
8
|
+
initial: tryCreateToggleButtonState(options.pressed ?? options.defaultPressed ?? false),
|
|
9
|
+
reducer: applyToggleButtonEvent,
|
|
10
|
+
create: tryCreateToggleButtonState,
|
|
11
|
+
read: (state) => state.pressed,
|
|
12
|
+
onChange: options.onPressedChange,
|
|
13
|
+
interaction: options,
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
export function getToggleButtonAttributes(state, options = {}) {
|
|
17
|
+
return Object.freeze({
|
|
18
|
+
...getCheckedControlAttributes({
|
|
19
|
+
attribute: 'aria-pressed',
|
|
20
|
+
value: state.pressed,
|
|
21
|
+
format: String,
|
|
22
|
+
...(options.disabled === undefined ? {} : { disabled: options.disabled }),
|
|
23
|
+
...(options.readOnly === undefined ? {} : { readOnly: options.readOnly }),
|
|
24
|
+
...(options.native === undefined ? {} : { native: options.native }),
|
|
25
|
+
}),
|
|
26
|
+
'data-scope': 'toggle-button',
|
|
27
|
+
'data-part': 'root',
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
export function createToggleButton(options) {
|
|
31
|
+
return unwrap(tryCreateToggleButton(options));
|
|
32
|
+
}
|
|
33
|
+
export function tryCreateToggleButton(options) {
|
|
34
|
+
return createFacadeConnection(options, (options) => tryCreateToggleButtonConnection(options));
|
|
35
|
+
}
|
|
36
|
+
function tryCreateToggleButtonConnection(options) { return createDOMCheckedControl({ element: options.element, attribute: 'aria-pressed', controlled: options.pressed !== undefined, initial: tryCreateToggleButtonState(options.pressed ?? options.defaultPressed ?? false), toggleEvent: 'toggle', reducer: applyToggleButtonEvent, create: tryCreateToggleButtonState, read: (state) => state.pressed, format: String, interaction: options, onChange: options.onPressedChange, onUpdate: options.onUpdate }); }
|
|
37
|
+
//# sourceMappingURL=toggle-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../src/toggle-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAyB,MAAM,sBAAsB,CAAC;AACrF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AACD,OAAO,EAAE,sBAAsB,EAAE,0BAA0B,EAA4E,MAAM,6BAA6B,CAAC;AACxN,OAAO,EACL,8BAA8B,EAC9B,uBAAuB,EACvB,2BAA2B,GAI5B,MAAM,+BAA+B,CAAC;AAavC,MAAM,UAAU,4BAA4B,CAAC,OAAO,GAAkC,EAAE;IACtF,OAAO,8BAA8B,CAAqE;QACxG,UAAU,EAAE,OAAO,CAAC,OAAO,KAAK,SAAS;QACzC,OAAO,EAAE,0BAA0B,CAAC,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,cAAc,IAAI,KAAK,CAAC;QACvF,OAAO,EAAE,sBAAsB;QAC/B,MAAM,EAAE,0BAA0B;QAClC,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO;QAC9B,QAAQ,EAAE,OAAO,CAAC,eAAe;QACjC,WAAW,EAAE,OAAO;KACrB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,yBAAyB,CACvC,KAAwB,EACxB,OAAO,GAAiC,EAAE;IAE1C,OAAO,MAAM,CAAC,MAAM,CAAC;QACnB,GAAG,2BAA2B,CAAC;YAC7B,SAAS,EAAE,cAAc;YACzB,KAAK,EAAE,KAAK,CAAC,OAAO;YACpB,MAAM,EAAE,MAAM;YACd,GAAG,CAAC,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC;YACzE,GAAG,CAAC,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC;YACzE,GAAG,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC;SACpE,CAAC;QACF,YAAY,EAAE,eAAe;QAC7B,WAAW,EAAE,MAAM;KACpB,CAAC,CAAC;AACL,CAAC;AACD,MAAM,UAAU,kBAAkB,CAAC,OAA4B;IAC7D,OAAO,MAAM,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,OAA4B;IAChE,OAAO,sBAAsB,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,+BAA+B,CAAC,OAAO,CAAC,CAAC,CAAC;AAChG,CAAC;AAED,SAAS,+BAA+B,CAAC,OAA4B,IAAoC,OAAO,uBAAuB,CAAqE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,CAAC,OAAO,KAAK,SAAS,EAAE,OAAO,EAAE,0BAA0B,CAAC,OAAO,CAAC,OAAO,IAAI,OAAO,CAAC,cAAc,IAAI,KAAK,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,sBAAsB,EAAE,MAAM,EAAE,0BAA0B,EAAE,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,eAAe,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { type FacadeConnection } from './internal/facade.js';
|
|
2
|
+
import type { Result, StableID } from '@sectile/core';
|
|
3
|
+
import type { ToggleGroupEvent, ToggleGroupState } from '@sectile/core/toggle-group';
|
|
4
|
+
import type { RevisionSnapshot } from '@sectile/core/revision';
|
|
5
|
+
import { type ListboxOptions } from './listbox.js';
|
|
6
|
+
import type { ReadingDirection } from './internal/direction.js';
|
|
7
|
+
export type ToggleGroupOptions<ID extends StableID = StableID> = Omit<ListboxOptions<ID>, 'selectionMode' | 'activationMode' | 'clearOnEscape'> & {
|
|
8
|
+
readonly multiple?: boolean;
|
|
9
|
+
readonly deselectable?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export interface ToggleGroupConnection<ID extends StableID = StableID> {
|
|
12
|
+
getSnapshot(): RevisionSnapshot<ToggleGroupState<ID>>;
|
|
13
|
+
syncControlledValues(values: {
|
|
14
|
+
readonly value?: readonly ID[];
|
|
15
|
+
readonly highlightedValue?: ID | null;
|
|
16
|
+
}): Result<RevisionSnapshot<ToggleGroupState<ID>>>;
|
|
17
|
+
setItemAttributes(element: HTMLElement, attributes: {
|
|
18
|
+
readonly id: ID;
|
|
19
|
+
readonly disabled?: boolean;
|
|
20
|
+
}): void;
|
|
21
|
+
handleEvent(event: ToggleGroupEvent<ID>): boolean;
|
|
22
|
+
handleKeyboardEvent(event: KeyboardEvent): boolean;
|
|
23
|
+
disconnect(): void;
|
|
24
|
+
}
|
|
25
|
+
export interface ToggleGroupRootAttributesOptions {
|
|
26
|
+
readonly orientation?: 'horizontal' | 'vertical';
|
|
27
|
+
readonly direction?: ReadingDirection;
|
|
28
|
+
readonly label?: string;
|
|
29
|
+
readonly disabled?: boolean;
|
|
30
|
+
readonly readOnly?: boolean;
|
|
31
|
+
}
|
|
32
|
+
export interface ToggleGroupItemAttributesOptions<ID extends StableID = StableID> {
|
|
33
|
+
readonly id: ID;
|
|
34
|
+
readonly pressed: boolean;
|
|
35
|
+
readonly highlighted: boolean;
|
|
36
|
+
readonly disabled?: boolean;
|
|
37
|
+
}
|
|
38
|
+
export declare function getToggleGroupRootAttributes(options?: ToggleGroupRootAttributesOptions): Readonly<Record<string, string | undefined>>;
|
|
39
|
+
export declare function getToggleGroupItemAttributes<ID extends StableID>(options: ToggleGroupItemAttributesOptions<ID>): Readonly<Record<string, string | number | boolean | undefined>>;
|
|
40
|
+
export declare function createToggleGroup<ID extends StableID>(options: ToggleGroupOptions<ID>): FacadeConnection<ToggleGroupConnection<ID>>;
|
|
41
|
+
export declare function tryCreateToggleGroup<ID extends StableID>(options: ToggleGroupOptions<ID>): Result<FacadeConnection<ToggleGroupConnection<ID>>>;
|
|
42
|
+
//# sourceMappingURL=toggle-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../src/toggle-group.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { createFacadeConnection } from './internal/facade.js';
|
|
2
|
+
import { unwrap } from '@sectile/core/result';
|
|
3
|
+
import { tryCreateListbox } from './listbox.js';
|
|
4
|
+
export function getToggleGroupRootAttributes(options = {}) {
|
|
5
|
+
return Object.freeze({
|
|
6
|
+
role: 'group',
|
|
7
|
+
'aria-orientation': options.orientation ?? 'horizontal',
|
|
8
|
+
dir: options.direction,
|
|
9
|
+
'aria-label': options.label,
|
|
10
|
+
'aria-disabled': options.disabled === true ? 'true' : undefined,
|
|
11
|
+
'aria-readonly': options.readOnly === true ? 'true' : undefined,
|
|
12
|
+
'data-scope': 'toggle-group',
|
|
13
|
+
'data-part': 'root',
|
|
14
|
+
'data-disabled': options.disabled === true ? '' : undefined,
|
|
15
|
+
'data-readonly': options.readOnly === true ? '' : undefined,
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
export function getToggleGroupItemAttributes(options) {
|
|
19
|
+
return Object.freeze({
|
|
20
|
+
role: 'button', type: 'button',
|
|
21
|
+
tabindex: options.disabled === true ? -1 : options.highlighted ? 0 : -1,
|
|
22
|
+
'aria-pressed': String(options.pressed),
|
|
23
|
+
'aria-disabled': options.disabled === true ? 'true' : undefined,
|
|
24
|
+
disabled: options.disabled === true ? true : undefined,
|
|
25
|
+
'data-toggle-group-id': String(options.id),
|
|
26
|
+
'data-scope': 'toggle-group', 'data-part': 'item',
|
|
27
|
+
'data-state': options.pressed ? 'on' : 'off',
|
|
28
|
+
'data-highlighted': options.highlighted ? '' : undefined,
|
|
29
|
+
'data-disabled': options.disabled === true ? '' : undefined,
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
export function createToggleGroup(options) {
|
|
33
|
+
return unwrap(tryCreateToggleGroup(options));
|
|
34
|
+
}
|
|
35
|
+
export function tryCreateToggleGroup(options) {
|
|
36
|
+
return createFacadeConnection(options, (options) => tryCreateToggleGroupConnection(options));
|
|
37
|
+
}
|
|
38
|
+
function tryCreateToggleGroupConnection(options) {
|
|
39
|
+
const result = tryCreateListbox({
|
|
40
|
+
...options,
|
|
41
|
+
activationMode: 'toggle', clearOnEscape: false,
|
|
42
|
+
orientation: options.orientation ?? 'horizontal',
|
|
43
|
+
selectionMode: options.multiple === true ? 'multiple' : 'single',
|
|
44
|
+
policies: { ...options.policies, deselectable: options.deselectable ?? options.policies?.deselectable ?? true },
|
|
45
|
+
});
|
|
46
|
+
if (!result.ok)
|
|
47
|
+
return result;
|
|
48
|
+
setRootAttributes(options.root, options);
|
|
49
|
+
return { ok: true, value: wrap(result.value, options.root) };
|
|
50
|
+
}
|
|
51
|
+
function wrap(connection, root) {
|
|
52
|
+
return Object.freeze({
|
|
53
|
+
getSnapshot: () => connection.getSnapshot(),
|
|
54
|
+
syncControlledValues: (values) => connection.syncControlledValues(values),
|
|
55
|
+
setItemAttributes: (element, attributes) => {
|
|
56
|
+
connection.setItemAttributes(element, attributes);
|
|
57
|
+
const pressed = element.getAttribute('aria-selected') ?? 'false';
|
|
58
|
+
element.setAttribute('role', 'button');
|
|
59
|
+
if (element.tagName === 'BUTTON')
|
|
60
|
+
element.setAttribute('type', 'button');
|
|
61
|
+
element.setAttribute('aria-pressed', pressed);
|
|
62
|
+
element.setAttribute('data-scope', 'toggle-group');
|
|
63
|
+
element.setAttribute('data-part', 'item');
|
|
64
|
+
element.setAttribute('data-state', pressed === 'true' ? 'on' : 'off');
|
|
65
|
+
element.setAttribute('data-toggle-group-id', String(attributes.id));
|
|
66
|
+
element.removeAttribute('aria-selected');
|
|
67
|
+
},
|
|
68
|
+
handleEvent: (event) => connection.handleEvent(mapEvent(event)),
|
|
69
|
+
handleKeyboardEvent: (event) => connection.handleKeyboardEvent(event),
|
|
70
|
+
disconnect: () => { connection.disconnect(); clearRootAttributes(root); },
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
function mapEvent(event) {
|
|
74
|
+
return typeof event === 'object'
|
|
75
|
+
? event.type === 'press' ? { type: 'toggle', id: event.id } : event
|
|
76
|
+
: event === 'press' ? 'toggle' : event;
|
|
77
|
+
}
|
|
78
|
+
function setRootAttributes(root, options) {
|
|
79
|
+
for (const [name, value] of Object.entries(getToggleGroupRootAttributes(options))) {
|
|
80
|
+
if (value === undefined)
|
|
81
|
+
root.removeAttribute(name);
|
|
82
|
+
else
|
|
83
|
+
root.setAttribute(name, value);
|
|
84
|
+
}
|
|
85
|
+
root.removeAttribute('aria-multiselectable');
|
|
86
|
+
}
|
|
87
|
+
function clearRootAttributes(root) {
|
|
88
|
+
for (const name of ['role', 'aria-orientation', 'aria-label', 'data-scope', 'data-part'])
|
|
89
|
+
root.removeAttribute(name);
|
|
90
|
+
}
|
|
91
|
+
//# sourceMappingURL=toggle-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../src/toggle-group.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { type FacadeConnection } from './internal/facade.js';
|
|
2
|
+
import type { Result, StableID } from '@sectile/core';
|
|
3
|
+
import type { RevisionSnapshot } from '@sectile/core/revision';
|
|
4
|
+
import { type ToolbarEvent, type ToolbarPolicies, type ToolbarState } from '@sectile/core/toolbar';
|
|
5
|
+
export type { ToolbarPolicies } from '@sectile/core/toolbar';
|
|
6
|
+
import type { KeyboardInput } from './tabs.js';
|
|
7
|
+
import { type ReadingDirection } from './internal/direction.js';
|
|
8
|
+
export type ToolbarEffect<ID extends StableID = StableID> = {
|
|
9
|
+
readonly type: 'focus-control';
|
|
10
|
+
readonly id: ID;
|
|
11
|
+
} | {
|
|
12
|
+
readonly type: 'invoke-control';
|
|
13
|
+
readonly id: ID;
|
|
14
|
+
};
|
|
15
|
+
export interface ToolbarOptions<ID extends StableID = StableID> {
|
|
16
|
+
readonly root: HTMLElement;
|
|
17
|
+
readonly disabled?: boolean;
|
|
18
|
+
readonly items: readonly ID[];
|
|
19
|
+
readonly policies?: ToolbarPolicies<ID>;
|
|
20
|
+
readonly disabledItems?: readonly ID[];
|
|
21
|
+
readonly highlightedValue?: ID | null;
|
|
22
|
+
readonly defaultHighlightedValue?: ID | null;
|
|
23
|
+
readonly orientation?: 'horizontal' | 'vertical';
|
|
24
|
+
readonly direction?: ReadingDirection;
|
|
25
|
+
readonly label?: string;
|
|
26
|
+
readonly onHighlightedValueChange?: (value: ID | null) => void;
|
|
27
|
+
readonly onInvoke?: (id: ID) => void;
|
|
28
|
+
readonly onUpdate?: () => void;
|
|
29
|
+
}
|
|
30
|
+
export type ToolbarHighlightedValueChangeHandler<ID extends StableID = StableID> = NonNullable<ToolbarOptions<ID>['onHighlightedValueChange']>;
|
|
31
|
+
export type ToolbarInvokeHandler<ID extends StableID = StableID> = NonNullable<ToolbarOptions<ID>['onInvoke']>;
|
|
32
|
+
export type ToolbarUpdateHandler<ID extends StableID = StableID> = NonNullable<ToolbarOptions<ID>['onUpdate']>;
|
|
33
|
+
export interface ToolbarConnection<ID extends StableID = StableID> {
|
|
34
|
+
getSnapshot(): RevisionSnapshot<ToolbarState<ID>>;
|
|
35
|
+
syncControlledValue(value: ID | null): Result<RevisionSnapshot<ToolbarState<ID>>>;
|
|
36
|
+
setItemAttributes(element: HTMLElement, id: ID, disabled?: boolean): void;
|
|
37
|
+
handleEvent(event: ToolbarEvent<ID>): boolean;
|
|
38
|
+
disconnect(): void;
|
|
39
|
+
}
|
|
40
|
+
export declare function createToolbar<ID extends StableID>(options: ToolbarOptions<ID>): FacadeConnection<ToolbarConnection<ID>>;
|
|
41
|
+
export declare function tryCreateToolbar<ID extends StableID>(options: ToolbarOptions<ID>): Result<FacadeConnection<ToolbarConnection<ID>>>;
|
|
42
|
+
export declare function toToolbarEvent<ID extends StableID = StableID>(input: KeyboardInput, orientation?: 'horizontal' | 'vertical', direction?: ReadingDirection): ToolbarEvent<ID> | null;
|
|
43
|
+
//# sourceMappingURL=toolbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../src/toolbar.ts"],"names":[],"mappings":"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"}
|