@llui/components 0.0.30 → 0.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion.d.ts +27 -9
- package/dist/components/accordion.d.ts.map +1 -1
- package/dist/components/accordion.js +4 -3
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/angle-slider.d.ts +15 -5
- package/dist/components/angle-slider.d.ts.map +1 -1
- package/dist/components/angle-slider.js +3 -2
- package/dist/components/angle-slider.js.map +1 -1
- package/dist/components/async-list.d.ts +18 -6
- package/dist/components/async-list.d.ts.map +1 -1
- package/dist/components/async-list.js +3 -2
- package/dist/components/async-list.js.map +1 -1
- package/dist/components/avatar.d.ts +12 -4
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +4 -3
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/carousel.d.ts +21 -7
- package/dist/components/carousel.d.ts.map +1 -1
- package/dist/components/carousel.js +8 -8
- package/dist/components/carousel.js.map +1 -1
- package/dist/components/cascade-select.d.ts +9 -3
- package/dist/components/cascade-select.d.ts.map +1 -1
- package/dist/components/cascade-select.js +4 -4
- package/dist/components/cascade-select.js.map +1 -1
- package/dist/components/checkbox.d.ts +9 -3
- package/dist/components/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox.js +4 -3
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/clipboard.d.ts +12 -4
- package/dist/components/clipboard.d.ts.map +1 -1
- package/dist/components/clipboard.js +3 -3
- package/dist/components/clipboard.js.map +1 -1
- package/dist/components/collapsible.d.ts +12 -4
- package/dist/components/collapsible.d.ts.map +1 -1
- package/dist/components/collapsible.js +2 -1
- package/dist/components/collapsible.js.map +1 -1
- package/dist/components/color-picker.d.ts +18 -6
- package/dist/components/color-picker.d.ts.map +1 -1
- package/dist/components/color-picker.js +5 -5
- package/dist/components/color-picker.js.map +1 -1
- package/dist/components/combobox.d.ts +39 -13
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +17 -9
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/context-menu.d.ts +24 -8
- package/dist/components/context-menu.d.ts.map +1 -1
- package/dist/components/context-menu.js +8 -8
- package/dist/components/context-menu.js.map +1 -1
- package/dist/components/date-input.d.ts +21 -6
- package/dist/components/date-input.d.ts.map +1 -1
- package/dist/components/date-input.js +4 -4
- package/dist/components/date-input.js.map +1 -1
- package/dist/components/date-picker.d.ts +36 -12
- package/dist/components/date-picker.d.ts.map +1 -1
- package/dist/components/date-picker.js +15 -8
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/dialog.d.ts +12 -4
- package/dist/components/dialog.d.ts.map +1 -1
- package/dist/components/dialog.js +3 -3
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/drawer.d.ts +12 -4
- package/dist/components/drawer.d.ts.map +1 -1
- package/dist/components/drawer.js +3 -3
- package/dist/components/drawer.js.map +1 -1
- package/dist/components/editable.d.ts +15 -5
- package/dist/components/editable.d.ts.map +1 -1
- package/dist/components/editable.js +14 -13
- package/dist/components/editable.js.map +1 -1
- package/dist/components/file-upload.d.ts +30 -10
- package/dist/components/file-upload.d.ts.map +1 -1
- package/dist/components/file-upload.js +10 -10
- package/dist/components/file-upload.js.map +1 -1
- package/dist/components/floating-panel.d.ts +48 -16
- package/dist/components/floating-panel.d.ts.map +1 -1
- package/dist/components/floating-panel.js +6 -6
- package/dist/components/floating-panel.js.map +1 -1
- package/dist/components/form.d.ts +18 -6
- package/dist/components/form.d.ts.map +1 -1
- package/dist/components/form.js +2 -1
- package/dist/components/form.js.map +1 -1
- package/dist/components/image-cropper.d.ts +33 -11
- package/dist/components/image-cropper.d.ts.map +1 -1
- package/dist/components/image-cropper.js +6 -6
- package/dist/components/image-cropper.js.map +1 -1
- package/dist/components/listbox.d.ts +33 -11
- package/dist/components/listbox.d.ts.map +1 -1
- package/dist/components/listbox.js +12 -4
- package/dist/components/listbox.js.map +1 -1
- package/dist/components/marquee.d.ts +21 -7
- package/dist/components/marquee.d.ts.map +1 -1
- package/dist/components/marquee.js +3 -2
- package/dist/components/marquee.js.map +1 -1
- package/dist/components/menu.d.ts +36 -12
- package/dist/components/menu.d.ts.map +1 -1
- package/dist/components/menu.js +23 -9
- package/dist/components/menu.js.map +1 -1
- package/dist/components/navigation-menu.d.ts +15 -5
- package/dist/components/navigation-menu.d.ts.map +1 -1
- package/dist/components/navigation-menu.js +8 -8
- package/dist/components/navigation-menu.js.map +1 -1
- package/dist/components/number-input.d.ts +24 -8
- package/dist/components/number-input.d.ts.map +1 -1
- package/dist/components/number-input.js +8 -8
- package/dist/components/number-input.js.map +1 -1
- package/dist/components/pagination.d.ts +21 -7
- package/dist/components/pagination.d.ts.map +1 -1
- package/dist/components/pagination.js +4 -4
- package/dist/components/pagination.js.map +1 -1
- package/dist/components/password-input.d.ts +9 -3
- package/dist/components/password-input.d.ts.map +1 -1
- package/dist/components/password-input.js +3 -3
- package/dist/components/password-input.js.map +1 -1
- package/dist/components/pin-input.d.ts +15 -5
- package/dist/components/pin-input.d.ts.map +1 -1
- package/dist/components/pin-input.js +8 -7
- package/dist/components/pin-input.js.map +1 -1
- package/dist/components/popover.d.ts +12 -4
- package/dist/components/popover.d.ts.map +1 -1
- package/dist/components/popover.js +3 -3
- package/dist/components/popover.js.map +1 -1
- package/dist/components/presence.d.ts +15 -5
- package/dist/components/presence.d.ts.map +1 -1
- package/dist/components/presence.js.map +1 -1
- package/dist/components/progress.d.ts +6 -2
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js.map +1 -1
- package/dist/components/qr-code.d.ts +9 -3
- package/dist/components/qr-code.d.ts.map +1 -1
- package/dist/components/qr-code.js.map +1 -1
- package/dist/components/radio-group.d.ts +18 -6
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +4 -3
- package/dist/components/radio-group.js.map +1 -1
- package/dist/components/rating-group.d.ts +21 -7
- package/dist/components/rating-group.d.ts.map +1 -1
- package/dist/components/rating-group.js +8 -7
- package/dist/components/rating-group.js.map +1 -1
- package/dist/components/scroll-area.d.ts +9 -3
- package/dist/components/scroll-area.d.ts.map +1 -1
- package/dist/components/scroll-area.js +5 -4
- package/dist/components/scroll-area.js.map +1 -1
- package/dist/components/select.d.ts +42 -14
- package/dist/components/select.d.ts.map +1 -1
- package/dist/components/select.js +4 -4
- package/dist/components/select.js.map +1 -1
- package/dist/components/signature-pad.d.ts +24 -8
- package/dist/components/signature-pad.d.ts.map +1 -1
- package/dist/components/signature-pad.js +3 -3
- package/dist/components/signature-pad.js.map +1 -1
- package/dist/components/slider.d.ts +21 -7
- package/dist/components/slider.d.ts.map +1 -1
- package/dist/components/slider.js.map +1 -1
- package/dist/components/sortable.d.ts +18 -6
- package/dist/components/sortable.d.ts.map +1 -1
- package/dist/components/sortable.js +11 -10
- package/dist/components/sortable.js.map +1 -1
- package/dist/components/splitter.d.ts +21 -7
- package/dist/components/splitter.d.ts.map +1 -1
- package/dist/components/splitter.js +5 -4
- package/dist/components/splitter.js.map +1 -1
- package/dist/components/steps.d.ts +21 -7
- package/dist/components/steps.d.ts.map +1 -1
- package/dist/components/steps.js +4 -4
- package/dist/components/steps.js.map +1 -1
- package/dist/components/switch.d.ts +9 -3
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +4 -3
- package/dist/components/switch.js.map +1 -1
- package/dist/components/tabs.d.ts +24 -8
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +7 -6
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/tags-input.d.ts +27 -9
- package/dist/components/tags-input.d.ts.map +1 -1
- package/dist/components/tags-input.js +10 -10
- package/dist/components/tags-input.js.map +1 -1
- package/dist/components/theme-switch.d.ts.map +1 -1
- package/dist/components/theme-switch.js +3 -2
- package/dist/components/theme-switch.js.map +1 -1
- package/dist/components/time-picker.d.ts +27 -9
- package/dist/components/time-picker.d.ts.map +1 -1
- package/dist/components/time-picker.js +10 -10
- package/dist/components/time-picker.js.map +1 -1
- package/dist/components/timer.d.ts +15 -5
- package/dist/components/timer.d.ts.map +1 -1
- package/dist/components/timer.js +4 -4
- package/dist/components/timer.js.map +1 -1
- package/dist/components/toast.d.ts +24 -8
- package/dist/components/toast.d.ts.map +1 -1
- package/dist/components/toast.js +6 -6
- package/dist/components/toast.js.map +1 -1
- package/dist/components/toc.d.ts +15 -5
- package/dist/components/toc.d.ts.map +1 -1
- package/dist/components/toc.js +2 -2
- package/dist/components/toc.js.map +1 -1
- package/dist/components/toggle-group.d.ts +15 -5
- package/dist/components/toggle-group.d.ts.map +1 -1
- package/dist/components/toggle-group.js +4 -3
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle.d.ts +9 -3
- package/dist/components/toggle.d.ts.map +1 -1
- package/dist/components/toggle.js +4 -3
- package/dist/components/toggle.js.map +1 -1
- package/dist/components/tooltip.d.ts +12 -4
- package/dist/components/tooltip.d.ts.map +1 -1
- package/dist/components/tooltip.js +3 -3
- package/dist/components/tooltip.js.map +1 -1
- package/dist/components/tour.d.ts +18 -6
- package/dist/components/tour.d.ts.map +1 -1
- package/dist/components/tour.js +6 -6
- package/dist/components/tour.js.map +1 -1
- package/dist/components/tree-view.d.ts +75 -25
- package/dist/components/tree-view.d.ts.map +1 -1
- package/dist/components/tree-view.js +18 -7
- package/dist/components/tree-view.js.map +1 -1
- package/package.json +3 -3
package/dist/components/toast.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useContext } from '@llui/dom';
|
|
1
|
+
import { useContext, tagSend } from '@llui/dom';
|
|
2
2
|
import { LocaleContext } from '../locale.js';
|
|
3
3
|
export function init(opts = {}) {
|
|
4
4
|
return {
|
|
@@ -77,10 +77,10 @@ export function connect(_get, send, opts = {}) {
|
|
|
77
77
|
'data-part': 'root',
|
|
78
78
|
'data-type': toast.type,
|
|
79
79
|
'data-id': toast.id,
|
|
80
|
-
onPointerEnter: () => send({ type: 'pause', id: toast.id }),
|
|
81
|
-
onPointerLeave: () => send({ type: 'resume', id: toast.id }),
|
|
82
|
-
onFocus: () => send({ type: 'pause', id: toast.id }),
|
|
83
|
-
onBlur: () => send({ type: 'resume', id: toast.id }),
|
|
80
|
+
onPointerEnter: tagSend(send, ['pause'], () => send({ type: 'pause', id: toast.id })),
|
|
81
|
+
onPointerLeave: tagSend(send, ['resume'], () => send({ type: 'resume', id: toast.id })),
|
|
82
|
+
onFocus: tagSend(send, ['pause'], () => send({ type: 'pause', id: toast.id })),
|
|
83
|
+
onBlur: tagSend(send, ['resume'], () => send({ type: 'resume', id: toast.id })),
|
|
84
84
|
},
|
|
85
85
|
title: {
|
|
86
86
|
id: `${toast.id}:title`,
|
|
@@ -97,7 +97,7 @@ export function connect(_get, send, opts = {}) {
|
|
|
97
97
|
'aria-label': closeLabel,
|
|
98
98
|
'data-scope': 'toast',
|
|
99
99
|
'data-part': 'close-trigger',
|
|
100
|
-
onClick: () => send({ type: 'dismiss', id: toast.id }),
|
|
100
|
+
onClick: tagSend(send, ['dismiss'], () => send({ type: 'dismiss', id: toast.id })),
|
|
101
101
|
},
|
|
102
102
|
}),
|
|
103
103
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../src/components/toast.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Send } from '@llui/dom'\nimport { useContext } from '@llui/dom'\nimport { LocaleContext } from '../locale.js'\nimport type { Locale } from '../locale.js'\n\n/**\n * Toast — ephemeral non-modal notifications rendered in a fixed region.\n * Multiple toasts can be active at once. Each has a duration after which\n * it auto-dismisses (unless paused or persistent).\n *\n * Architecture:\n * - `toast.toaster` state manages a collection of toasts.\n * - Duration countdown is handled externally — the consumer schedules\n * a `dismiss` message via setTimeout (or uses the `scheduleDismiss`\n * effect-style helper in your onEffect handler).\n */\n\nexport type ToastType = 'info' | 'success' | 'warning' | 'error' | 'loading' | 'custom'\nexport type ToastPlacement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n\nexport interface Toast {\n id: string\n type: ToastType\n title?: string\n description?: string\n /** ms until auto-dismiss. Use Infinity for persistent. */\n duration: number\n /** Whether the toast can be manually dismissed. */\n dismissable: boolean\n /** Optional pause flag — consumer sets while user hovers. */\n paused: boolean\n}\n\nexport interface ToasterState {\n toasts: Toast[]\n max: number\n placement: ToastPlacement\n}\n\nexport type ToasterMsg =\n | { type: 'create'; toast: Omit<Toast, 'paused'> & { paused?: boolean } }\n | { type: 'dismiss'; id: string }\n | { type: 'dismissAll' }\n | { type: 'update'; id: string; patch: Partial<Toast> }\n | { type: 'pause'; id: string }\n | { type: 'resume'; id: string }\n | { type: 'pauseAll' }\n | { type: 'resumeAll' }\n\nexport interface ToasterInit {\n max?: number\n placement?: ToastPlacement\n}\n\nexport function init(opts: ToasterInit = {}): ToasterState {\n return {\n toasts: [],\n max: opts.max ?? 5,\n placement: opts.placement ?? 'bottom-end',\n }\n}\n\nexport function update(state: ToasterState, msg: ToasterMsg): [ToasterState, never[]] {\n switch (msg.type) {\n case 'create': {\n const toast: Toast = { paused: false, ...msg.toast }\n const toasts = [...state.toasts, toast]\n // Enforce max — drop oldest\n const trimmed = toasts.length > state.max ? toasts.slice(-state.max) : toasts\n return [{ ...state, toasts: trimmed }, []]\n }\n case 'dismiss':\n return [{ ...state, toasts: state.toasts.filter((t) => t.id !== msg.id) }, []]\n case 'dismissAll':\n return [{ ...state, toasts: [] }, []]\n case 'update':\n return [\n {\n ...state,\n toasts: state.toasts.map((t) => (t.id === msg.id ? { ...t, ...msg.patch } : t)),\n },\n [],\n ]\n case 'pause':\n return [\n {\n ...state,\n toasts: state.toasts.map((t) => (t.id === msg.id ? { ...t, paused: true } : t)),\n },\n [],\n ]\n case 'resume':\n return [\n {\n ...state,\n toasts: state.toasts.map((t) => (t.id === msg.id ? { ...t, paused: false } : t)),\n },\n [],\n ]\n case 'pauseAll':\n return [{ ...state, toasts: state.toasts.map((t) => ({ ...t, paused: true })) }, []]\n case 'resumeAll':\n return [{ ...state, toasts: state.toasts.map((t) => ({ ...t, paused: false })) }, []]\n }\n}\n\nlet toastIdCounter = 0\nexport function nextToastId(): string {\n return `toast-${++toastIdCounter}`\n}\n\nexport interface ToastItemParts<S> {\n root: {\n role: 'status'\n 'aria-atomic': 'true'\n 'aria-live': 'polite' | 'assertive'\n id: string\n 'data-scope': 'toast'\n 'data-part': 'root'\n 'data-type': ToastType\n 'data-id': string\n onPointerEnter: (e: PointerEvent) => void\n onPointerLeave: (e: PointerEvent) => void\n onFocus: (e: FocusEvent) => void\n onBlur: (e: FocusEvent) => void\n }\n title: {\n id: string\n 'data-scope': 'toast'\n 'data-part': 'title'\n }\n description: {\n id: string\n 'data-scope': 'toast'\n 'data-part': 'description'\n }\n closeTrigger: {\n type: 'button'\n 'aria-label': string | ((s: S) => string)\n 'data-scope': 'toast'\n 'data-part': 'close-trigger'\n onClick: (e: MouseEvent) => void\n }\n}\n\nexport interface ToasterParts<S> {\n region: {\n role: 'region'\n 'aria-label': string | ((s: S) => string)\n tabIndex: -1\n 'data-scope': 'toast'\n 'data-part': 'region'\n 'data-placement': (s: S) => ToastPlacement\n }\n toast: (toast: Toast) => ToastItemParts<S>\n}\n\nexport interface ConnectOptions {\n regionLabel?: string\n closeLabel?: string\n}\n\nexport function connect<S>(\n _get: (s: S) => ToasterState,\n send: Send<ToasterMsg>,\n opts: ConnectOptions = {},\n): ToasterParts<S> {\n const locale = useContext<S, Locale>(LocaleContext)\n const regionLabel: string | ((s: S) => string) =\n opts.regionLabel ?? ((s: S) => locale(s).toast.region)\n const closeLabel: string | ((s: S) => string) =\n opts.closeLabel ?? ((s: S) => locale(s).toast.dismiss)\n\n return {\n region: {\n role: 'region',\n 'aria-label': regionLabel,\n tabIndex: -1,\n 'data-scope': 'toast',\n 'data-part': 'region',\n 'data-placement': (s) => _get(s).placement,\n },\n toast: (toast: Toast): ToastItemParts<S> => ({\n root: {\n role: 'status',\n 'aria-atomic': 'true',\n 'aria-live': toast.type === 'error' ? 'assertive' : 'polite',\n id: `${toast.id}:root`,\n 'data-scope': 'toast',\n 'data-part': 'root',\n 'data-type': toast.type,\n 'data-id': toast.id,\n onPointerEnter: () => send({ type: 'pause', id: toast.id }),\n onPointerLeave: () => send({ type: 'resume', id: toast.id }),\n onFocus: () => send({ type: 'pause', id: toast.id }),\n onBlur: () => send({ type: 'resume', id: toast.id }),\n },\n title: {\n id: `${toast.id}:title`,\n 'data-scope': 'toast',\n 'data-part': 'title',\n },\n description: {\n id: `${toast.id}:description`,\n 'data-scope': 'toast',\n 'data-part': 'description',\n },\n closeTrigger: {\n type: 'button',\n 'aria-label': closeLabel,\n 'data-scope': 'toast',\n 'data-part': 'close-trigger',\n onClick: () => send({ type: 'dismiss', id: toast.id }),\n },\n }),\n }\n}\n\nexport const toast = { init, update, connect, nextToastId }\n"]}
|
|
1
|
+
{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../src/components/toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAkE5C,MAAM,UAAU,IAAI,CAAC,OAAoB,EAAE;IACzC,OAAO;QACL,MAAM,EAAE,EAAE;QACV,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC;QAClB,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,YAAY;KAC1C,CAAA;AACH,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,KAAmB,EAAE,GAAe;IACzD,QAAQ,GAAG,CAAC,IAAI,EAAE,CAAC;QACjB,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,MAAM,KAAK,GAAU,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,KAAK,EAAE,CAAA;YACpD,MAAM,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;YACvC,4BAA4B;YAC5B,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;YAC7E,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;QAC5C,CAAC;QACD,KAAK,SAAS;YACZ,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;QAChF,KAAK,YAAY;YACf,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;QACvC,KAAK,QAAQ;YACX,OAAO;gBACL;oBACE,GAAG,KAAK;oBACR,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBAChF;gBACD,EAAE;aACH,CAAA;QACH,KAAK,OAAO;YACV,OAAO;gBACL;oBACE,GAAG,KAAK;oBACR,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBAChF;gBACD,EAAE;aACH,CAAA;QACH,KAAK,QAAQ;YACX,OAAO;gBACL;oBACE,GAAG,KAAK;oBACR,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBACjF;gBACD,EAAE;aACH,CAAA;QACH,KAAK,UAAU;YACb,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;QACtF,KAAK,WAAW;YACd,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IACzF,CAAC;AACH,CAAC;AAED,IAAI,cAAc,GAAG,CAAC,CAAA;AACtB,MAAM,UAAU,WAAW;IACzB,OAAO,SAAS,EAAE,cAAc,EAAE,CAAA;AACpC,CAAC;AAqDD,MAAM,UAAU,OAAO,CACrB,IAA4B,EAC5B,IAAsB,EACtB,OAAuB,EAAE;IAEzB,MAAM,MAAM,GAAG,UAAU,CAAY,aAAa,CAAC,CAAA;IACnD,MAAM,WAAW,GACf,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,CAAI,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;IACxD,MAAM,UAAU,GACd,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,CAAI,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAExD,OAAO;QACL,MAAM,EAAE;YACN,IAAI,EAAE,QAAQ;YACd,YAAY,EAAE,WAAW;YACzB,QAAQ,EAAE,CAAC,CAAC;YACZ,YAAY,EAAE,OAAO;YACrB,WAAW,EAAE,QAAQ;YACrB,gBAAgB,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;SAC3C;QACD,KAAK,EAAE,CAAC,KAAY,EAAqB,EAAE,CAAC,CAAC;YAC3C,IAAI,EAAE;gBACJ,IAAI,EAAE,QAAQ;gBACd,aAAa,EAAE,MAAM;gBACrB,WAAW,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ;gBAC5D,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,OAAO;gBACtB,YAAY,EAAE,OAAO;gBACrB,WAAW,EAAE,MAAM;gBACnB,WAAW,EAAE,KAAK,CAAC,IAAI;gBACvB,SAAS,EAAE,KAAK,CAAC,EAAE;gBACnB,cAAc,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;gBACrF,cAAc,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;gBACvF,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;gBAC9E,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;aAChF;YACD,KAAK,EAAE;gBACL,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,QAAQ;gBACvB,YAAY,EAAE,OAAO;gBACrB,WAAW,EAAE,OAAO;aACrB;YACD,WAAW,EAAE;gBACX,EAAE,EAAE,GAAG,KAAK,CAAC,EAAE,cAAc;gBAC7B,YAAY,EAAE,OAAO;gBACrB,WAAW,EAAE,aAAa;aAC3B;YACD,YAAY,EAAE;gBACZ,IAAI,EAAE,QAAQ;gBACd,YAAY,EAAE,UAAU;gBACxB,YAAY,EAAE,OAAO;gBACrB,WAAW,EAAE,eAAe;gBAC5B,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;aACnF;SACF,CAAC;KACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,CAAA","sourcesContent":["import type { Send } from '@llui/dom'\nimport { useContext, tagSend } from '@llui/dom'\nimport { LocaleContext } from '../locale.js'\nimport type { Locale } from '../locale.js'\n\n/**\n * Toast — ephemeral non-modal notifications rendered in a fixed region.\n * Multiple toasts can be active at once. Each has a duration after which\n * it auto-dismisses (unless paused or persistent).\n *\n * Architecture:\n * - `toast.toaster` state manages a collection of toasts.\n * - Duration countdown is handled externally — the consumer schedules\n * a `dismiss` message via setTimeout (or uses the `scheduleDismiss`\n * effect-style helper in your onEffect handler).\n */\n\nexport type ToastType = 'info' | 'success' | 'warning' | 'error' | 'loading' | 'custom'\nexport type ToastPlacement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n\nexport interface Toast {\n id: string\n type: ToastType\n title?: string\n description?: string\n /** ms until auto-dismiss. Use Infinity for persistent. */\n duration: number\n /** Whether the toast can be manually dismissed. */\n dismissable: boolean\n /** Optional pause flag — consumer sets while user hovers. */\n paused: boolean\n}\n\nexport interface ToasterState {\n toasts: Toast[]\n max: number\n placement: ToastPlacement\n}\n\nexport type ToasterMsg =\n /** @intent(\"Show a new toast notification\") */\n | { type: 'create'; toast: Omit<Toast, 'paused'> & { paused?: boolean } }\n /** @intent(\"Dismiss the toast with the given id\") */\n | { type: 'dismiss'; id: string }\n /** @intent(\"Dismiss every toast currently visible\") */\n | { type: 'dismissAll' }\n /** @intent(\"Patch fields on the toast with the given id (title, description, type, etc.)\") */\n | { type: 'update'; id: string; patch: Partial<Toast> }\n /** @intent(\"Pause auto-dismiss countdown for the toast with the given id\") */\n | { type: 'pause'; id: string }\n /** @intent(\"Resume auto-dismiss countdown for the toast with the given id\") */\n | { type: 'resume'; id: string }\n /** @intent(\"Pause auto-dismiss for every visible toast\") */\n | { type: 'pauseAll' }\n /** @intent(\"Resume auto-dismiss for every visible toast\") */\n | { type: 'resumeAll' }\n\nexport interface ToasterInit {\n max?: number\n placement?: ToastPlacement\n}\n\nexport function init(opts: ToasterInit = {}): ToasterState {\n return {\n toasts: [],\n max: opts.max ?? 5,\n placement: opts.placement ?? 'bottom-end',\n }\n}\n\nexport function update(state: ToasterState, msg: ToasterMsg): [ToasterState, never[]] {\n switch (msg.type) {\n case 'create': {\n const toast: Toast = { paused: false, ...msg.toast }\n const toasts = [...state.toasts, toast]\n // Enforce max — drop oldest\n const trimmed = toasts.length > state.max ? toasts.slice(-state.max) : toasts\n return [{ ...state, toasts: trimmed }, []]\n }\n case 'dismiss':\n return [{ ...state, toasts: state.toasts.filter((t) => t.id !== msg.id) }, []]\n case 'dismissAll':\n return [{ ...state, toasts: [] }, []]\n case 'update':\n return [\n {\n ...state,\n toasts: state.toasts.map((t) => (t.id === msg.id ? { ...t, ...msg.patch } : t)),\n },\n [],\n ]\n case 'pause':\n return [\n {\n ...state,\n toasts: state.toasts.map((t) => (t.id === msg.id ? { ...t, paused: true } : t)),\n },\n [],\n ]\n case 'resume':\n return [\n {\n ...state,\n toasts: state.toasts.map((t) => (t.id === msg.id ? { ...t, paused: false } : t)),\n },\n [],\n ]\n case 'pauseAll':\n return [{ ...state, toasts: state.toasts.map((t) => ({ ...t, paused: true })) }, []]\n case 'resumeAll':\n return [{ ...state, toasts: state.toasts.map((t) => ({ ...t, paused: false })) }, []]\n }\n}\n\nlet toastIdCounter = 0\nexport function nextToastId(): string {\n return `toast-${++toastIdCounter}`\n}\n\nexport interface ToastItemParts<S> {\n root: {\n role: 'status'\n 'aria-atomic': 'true'\n 'aria-live': 'polite' | 'assertive'\n id: string\n 'data-scope': 'toast'\n 'data-part': 'root'\n 'data-type': ToastType\n 'data-id': string\n onPointerEnter: (e: PointerEvent) => void\n onPointerLeave: (e: PointerEvent) => void\n onFocus: (e: FocusEvent) => void\n onBlur: (e: FocusEvent) => void\n }\n title: {\n id: string\n 'data-scope': 'toast'\n 'data-part': 'title'\n }\n description: {\n id: string\n 'data-scope': 'toast'\n 'data-part': 'description'\n }\n closeTrigger: {\n type: 'button'\n 'aria-label': string | ((s: S) => string)\n 'data-scope': 'toast'\n 'data-part': 'close-trigger'\n onClick: (e: MouseEvent) => void\n }\n}\n\nexport interface ToasterParts<S> {\n region: {\n role: 'region'\n 'aria-label': string | ((s: S) => string)\n tabIndex: -1\n 'data-scope': 'toast'\n 'data-part': 'region'\n 'data-placement': (s: S) => ToastPlacement\n }\n toast: (toast: Toast) => ToastItemParts<S>\n}\n\nexport interface ConnectOptions {\n regionLabel?: string\n closeLabel?: string\n}\n\nexport function connect<S>(\n _get: (s: S) => ToasterState,\n send: Send<ToasterMsg>,\n opts: ConnectOptions = {},\n): ToasterParts<S> {\n const locale = useContext<S, Locale>(LocaleContext)\n const regionLabel: string | ((s: S) => string) =\n opts.regionLabel ?? ((s: S) => locale(s).toast.region)\n const closeLabel: string | ((s: S) => string) =\n opts.closeLabel ?? ((s: S) => locale(s).toast.dismiss)\n\n return {\n region: {\n role: 'region',\n 'aria-label': regionLabel,\n tabIndex: -1,\n 'data-scope': 'toast',\n 'data-part': 'region',\n 'data-placement': (s) => _get(s).placement,\n },\n toast: (toast: Toast): ToastItemParts<S> => ({\n root: {\n role: 'status',\n 'aria-atomic': 'true',\n 'aria-live': toast.type === 'error' ? 'assertive' : 'polite',\n id: `${toast.id}:root`,\n 'data-scope': 'toast',\n 'data-part': 'root',\n 'data-type': toast.type,\n 'data-id': toast.id,\n onPointerEnter: tagSend(send, ['pause'], () => send({ type: 'pause', id: toast.id })),\n onPointerLeave: tagSend(send, ['resume'], () => send({ type: 'resume', id: toast.id })),\n onFocus: tagSend(send, ['pause'], () => send({ type: 'pause', id: toast.id })),\n onBlur: tagSend(send, ['resume'], () => send({ type: 'resume', id: toast.id })),\n },\n title: {\n id: `${toast.id}:title`,\n 'data-scope': 'toast',\n 'data-part': 'title',\n },\n description: {\n id: `${toast.id}:description`,\n 'data-scope': 'toast',\n 'data-part': 'description',\n },\n closeTrigger: {\n type: 'button',\n 'aria-label': closeLabel,\n 'data-scope': 'toast',\n 'data-part': 'close-trigger',\n onClick: tagSend(send, ['dismiss'], () => send({ type: 'dismiss', id: toast.id })),\n },\n }),\n }\n}\n\nexport const toast = { init, update, connect, nextToastId }\n"]}
|
package/dist/components/toc.d.ts
CHANGED
|
@@ -30,18 +30,28 @@ export interface TocState {
|
|
|
30
30
|
/** Ids of entries the user has manually expanded (for collapsible sub-levels). */
|
|
31
31
|
expanded: string[];
|
|
32
32
|
}
|
|
33
|
-
export type TocMsg =
|
|
33
|
+
export type TocMsg =
|
|
34
|
+
/** @humanOnly */
|
|
35
|
+
{
|
|
34
36
|
type: 'setItems';
|
|
35
37
|
items: TocEntry[];
|
|
36
|
-
}
|
|
38
|
+
}
|
|
39
|
+
/** @humanOnly */
|
|
40
|
+
| {
|
|
37
41
|
type: 'setActive';
|
|
38
42
|
id: string | null;
|
|
39
|
-
}
|
|
43
|
+
}
|
|
44
|
+
/** @intent("Toggle the expanded state of the entry with the given id") */
|
|
45
|
+
| {
|
|
40
46
|
type: 'toggleExpanded';
|
|
41
47
|
id: string;
|
|
42
|
-
}
|
|
48
|
+
}
|
|
49
|
+
/** @intent("Expand every collapsible entry") */
|
|
50
|
+
| {
|
|
43
51
|
type: 'expandAll';
|
|
44
|
-
}
|
|
52
|
+
}
|
|
53
|
+
/** @intent("Collapse every expanded entry") */
|
|
54
|
+
| {
|
|
45
55
|
type: 'collapseAll';
|
|
46
56
|
};
|
|
47
57
|
export interface TocInit {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../src/components/toc.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAKrC;;;;;;;;;;;;;;;;;;GAkBG;AAEH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,kFAAkF;IAClF,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB;AAED,MAAM,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../src/components/toc.ts"],"names":[],"mappings":"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"}
|
package/dist/components/toc.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useContext } from '@llui/dom';
|
|
1
|
+
import { useContext, tagSend } from '@llui/dom';
|
|
2
2
|
import { LocaleContext } from '../locale.js';
|
|
3
3
|
export function init(opts = {}) {
|
|
4
4
|
return {
|
|
@@ -71,7 +71,7 @@ export function connect(get, send, opts = {}) {
|
|
|
71
71
|
'data-scope': 'toc',
|
|
72
72
|
'data-part': 'expand-trigger',
|
|
73
73
|
'data-state': (s) => (isExpanded(get(s), entry.id) ? 'open' : 'closed'),
|
|
74
|
-
onClick: () => send({ type: 'toggleExpanded', id: entry.id }),
|
|
74
|
+
onClick: tagSend(send, ['toggleExpanded'], () => send({ type: 'toggleExpanded', id: entry.id })),
|
|
75
75
|
},
|
|
76
76
|
}),
|
|
77
77
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toc.js","sourceRoot":"","sources":["../../src/components/toc.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Send } from '@llui/dom'\nimport { useContext } from '@llui/dom'\nimport { LocaleContext } from '../locale.js'\nimport type { Locale } from '../locale.js'\n\n/**\n * Table of contents — a navigation list that tracks which heading is\n * currently visible in the main scroll area and highlights it. The\n * state machine tracks the flat list of heading ids and the currently\n * active one; the view layer installs an IntersectionObserver in\n * onMount to detect which heading is on screen and dispatches\n * `setActive`.\n *\n * Typical setup in onMount:\n *\n * const headings = document.querySelectorAll('h2[id], h3[id]')\n * const io = new IntersectionObserver((entries) => {\n * for (const e of entries) {\n * if (e.isIntersecting) send({ type: 'setActive', id: e.target.id })\n * }\n * }, { rootMargin: '0px 0px -80% 0px' })\n * headings.forEach((h) => io.observe(h))\n * return () => io.disconnect()\n */\n\nexport interface TocEntry {\n id: string\n label: string\n /** Nesting level (1 = top-level). */\n level: number\n}\n\nexport interface TocState {\n items: TocEntry[]\n activeId: string | null\n /** Ids of entries the user has manually expanded (for collapsible sub-levels). */\n expanded: string[]\n}\n\nexport type TocMsg =\n | { type: 'setItems'; items: TocEntry[] }\n | { type: 'setActive'; id: string | null }\n | { type: 'toggleExpanded'; id: string }\n | { type: 'expandAll' }\n | { type: 'collapseAll' }\n\nexport interface TocInit {\n items?: TocEntry[]\n activeId?: string | null\n expanded?: string[]\n}\n\nexport function init(opts: TocInit = {}): TocState {\n return {\n items: opts.items ?? [],\n activeId: opts.activeId ?? null,\n expanded: opts.expanded ?? [],\n }\n}\n\nexport function update(state: TocState, msg: TocMsg): [TocState, never[]] {\n switch (msg.type) {\n case 'setItems':\n return [{ ...state, items: msg.items }, []]\n case 'setActive':\n if (state.activeId === msg.id) return [state, []]\n return [{ ...state, activeId: msg.id }, []]\n case 'toggleExpanded': {\n const expanded = state.expanded.includes(msg.id)\n ? state.expanded.filter((id) => id !== msg.id)\n : [...state.expanded, msg.id]\n return [{ ...state, expanded }, []]\n }\n case 'expandAll':\n return [{ ...state, expanded: state.items.map((i) => i.id) }, []]\n case 'collapseAll':\n return [{ ...state, expanded: [] }, []]\n }\n}\n\nexport function isActive(state: TocState, id: string): boolean {\n return state.activeId === id\n}\n\nexport function isExpanded(state: TocState, id: string): boolean {\n return state.expanded.includes(id)\n}\n\nexport interface TocItemParts<S> {\n item: {\n 'data-scope': 'toc'\n 'data-part': 'item'\n 'data-level': string\n 'data-active': (s: S) => '' | undefined\n 'data-value': string\n }\n link: {\n href: string\n 'aria-current': (s: S) => 'location' | undefined\n 'data-scope': 'toc'\n 'data-part': 'link'\n 'data-active': (s: S) => '' | undefined\n }\n expandTrigger: {\n type: 'button'\n 'aria-expanded': (s: S) => boolean\n 'aria-label': string | ((s: S) => string)\n 'data-scope': 'toc'\n 'data-part': 'expand-trigger'\n 'data-state': (s: S) => 'open' | 'closed'\n onClick: (e: MouseEvent) => void\n }\n}\n\nexport interface TocParts<S> {\n root: {\n role: 'navigation'\n 'aria-label': string | ((s: S) => string)\n 'data-scope': 'toc'\n 'data-part': 'root'\n }\n list: {\n role: 'list'\n 'data-scope': 'toc'\n 'data-part': 'list'\n }\n item: (entry: TocEntry) => TocItemParts<S>\n}\n\nexport interface ConnectOptions {\n label?: string\n /** Prefix for href targets (default: '#'). */\n hrefPrefix?: string\n expandLabel?: string\n}\n\nexport function connect<S>(\n get: (s: S) => TocState,\n send: Send<TocMsg>,\n opts: ConnectOptions = {},\n): TocParts<S> {\n const locale = useContext<S, Locale>(LocaleContext)\n const prefix = opts.hrefPrefix ?? '#'\n const expandLabel: string | ((s: S) => string) =\n opts.expandLabel ?? ((s: S) => locale(s).toc.expand)\n\n return {\n root: {\n role: 'navigation',\n 'aria-label': opts.label ?? ((s: S) => locale(s).toc.label),\n 'data-scope': 'toc',\n 'data-part': 'root',\n },\n list: {\n role: 'list',\n 'data-scope': 'toc',\n 'data-part': 'list',\n },\n item: (entry: TocEntry): TocItemParts<S> => ({\n item: {\n 'data-scope': 'toc',\n 'data-part': 'item',\n 'data-level': String(entry.level),\n 'data-active': (s) => (isActive(get(s), entry.id) ? '' : undefined),\n 'data-value': entry.id,\n },\n link: {\n href: `${prefix}${entry.id}`,\n 'aria-current': (s) => (isActive(get(s), entry.id) ? 'location' : undefined),\n 'data-scope': 'toc',\n 'data-part': 'link',\n 'data-active': (s) => (isActive(get(s), entry.id) ? '' : undefined),\n },\n expandTrigger: {\n type: 'button',\n 'aria-expanded': (s) => isExpanded(get(s), entry.id),\n 'aria-label': expandLabel,\n 'data-scope': 'toc',\n 'data-part': 'expand-trigger',\n 'data-state': (s) => (isExpanded(get(s), entry.id) ? 'open' : 'closed'),\n onClick: () => send({ type: 'toggleExpanded', id: entry.id }),\n },\n }),\n }\n}\n\n/**\n * Install an IntersectionObserver that watches heading elements and\n * dispatches `setActive` as the user scrolls. Call from onMount and\n * invoke the returned function on unmount.\n *\n * `rootMargin` defaults to '0px 0px -80% 0px' — a heading is considered\n * active once its top edge enters the top 20% of the viewport.\n */\nexport function watchActiveHeading(\n send: Send<TocMsg>,\n selector: string = '[id][data-toc]',\n rootMargin: string = '0px 0px -80% 0px',\n): () => void {\n const headings = Array.from(document.querySelectorAll<HTMLElement>(selector))\n if (headings.length === 0) return () => {}\n const io = new IntersectionObserver(\n (entries) => {\n for (const e of entries) {\n if (e.isIntersecting) {\n send({ type: 'setActive', id: (e.target as HTMLElement).id })\n return\n }\n }\n },\n { rootMargin },\n )\n for (const h of headings) io.observe(h)\n return () => io.disconnect()\n}\n\nexport const toc = {\n init,\n update,\n connect,\n isActive,\n isExpanded,\n watchActiveHeading,\n}\n"]}
|
|
1
|
+
{"version":3,"file":"toc.js","sourceRoot":"","sources":["../../src/components/toc.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Send } from '@llui/dom'\nimport { useContext, tagSend } from '@llui/dom'\nimport { LocaleContext } from '../locale.js'\nimport type { Locale } from '../locale.js'\n\n/**\n * Table of contents — a navigation list that tracks which heading is\n * currently visible in the main scroll area and highlights it. The\n * state machine tracks the flat list of heading ids and the currently\n * active one; the view layer installs an IntersectionObserver in\n * onMount to detect which heading is on screen and dispatches\n * `setActive`.\n *\n * Typical setup in onMount:\n *\n * const headings = document.querySelectorAll('h2[id], h3[id]')\n * const io = new IntersectionObserver((entries) => {\n * for (const e of entries) {\n * if (e.isIntersecting) send({ type: 'setActive', id: e.target.id })\n * }\n * }, { rootMargin: '0px 0px -80% 0px' })\n * headings.forEach((h) => io.observe(h))\n * return () => io.disconnect()\n */\n\nexport interface TocEntry {\n id: string\n label: string\n /** Nesting level (1 = top-level). */\n level: number\n}\n\nexport interface TocState {\n items: TocEntry[]\n activeId: string | null\n /** Ids of entries the user has manually expanded (for collapsible sub-levels). */\n expanded: string[]\n}\n\nexport type TocMsg =\n /** @humanOnly */\n | { type: 'setItems'; items: TocEntry[] }\n /** @humanOnly */\n | { type: 'setActive'; id: string | null }\n /** @intent(\"Toggle the expanded state of the entry with the given id\") */\n | { type: 'toggleExpanded'; id: string }\n /** @intent(\"Expand every collapsible entry\") */\n | { type: 'expandAll' }\n /** @intent(\"Collapse every expanded entry\") */\n | { type: 'collapseAll' }\n\nexport interface TocInit {\n items?: TocEntry[]\n activeId?: string | null\n expanded?: string[]\n}\n\nexport function init(opts: TocInit = {}): TocState {\n return {\n items: opts.items ?? [],\n activeId: opts.activeId ?? null,\n expanded: opts.expanded ?? [],\n }\n}\n\nexport function update(state: TocState, msg: TocMsg): [TocState, never[]] {\n switch (msg.type) {\n case 'setItems':\n return [{ ...state, items: msg.items }, []]\n case 'setActive':\n if (state.activeId === msg.id) return [state, []]\n return [{ ...state, activeId: msg.id }, []]\n case 'toggleExpanded': {\n const expanded = state.expanded.includes(msg.id)\n ? state.expanded.filter((id) => id !== msg.id)\n : [...state.expanded, msg.id]\n return [{ ...state, expanded }, []]\n }\n case 'expandAll':\n return [{ ...state, expanded: state.items.map((i) => i.id) }, []]\n case 'collapseAll':\n return [{ ...state, expanded: [] }, []]\n }\n}\n\nexport function isActive(state: TocState, id: string): boolean {\n return state.activeId === id\n}\n\nexport function isExpanded(state: TocState, id: string): boolean {\n return state.expanded.includes(id)\n}\n\nexport interface TocItemParts<S> {\n item: {\n 'data-scope': 'toc'\n 'data-part': 'item'\n 'data-level': string\n 'data-active': (s: S) => '' | undefined\n 'data-value': string\n }\n link: {\n href: string\n 'aria-current': (s: S) => 'location' | undefined\n 'data-scope': 'toc'\n 'data-part': 'link'\n 'data-active': (s: S) => '' | undefined\n }\n expandTrigger: {\n type: 'button'\n 'aria-expanded': (s: S) => boolean\n 'aria-label': string | ((s: S) => string)\n 'data-scope': 'toc'\n 'data-part': 'expand-trigger'\n 'data-state': (s: S) => 'open' | 'closed'\n onClick: (e: MouseEvent) => void\n }\n}\n\nexport interface TocParts<S> {\n root: {\n role: 'navigation'\n 'aria-label': string | ((s: S) => string)\n 'data-scope': 'toc'\n 'data-part': 'root'\n }\n list: {\n role: 'list'\n 'data-scope': 'toc'\n 'data-part': 'list'\n }\n item: (entry: TocEntry) => TocItemParts<S>\n}\n\nexport interface ConnectOptions {\n label?: string\n /** Prefix for href targets (default: '#'). */\n hrefPrefix?: string\n expandLabel?: string\n}\n\nexport function connect<S>(\n get: (s: S) => TocState,\n send: Send<TocMsg>,\n opts: ConnectOptions = {},\n): TocParts<S> {\n const locale = useContext<S, Locale>(LocaleContext)\n const prefix = opts.hrefPrefix ?? '#'\n const expandLabel: string | ((s: S) => string) =\n opts.expandLabel ?? ((s: S) => locale(s).toc.expand)\n\n return {\n root: {\n role: 'navigation',\n 'aria-label': opts.label ?? ((s: S) => locale(s).toc.label),\n 'data-scope': 'toc',\n 'data-part': 'root',\n },\n list: {\n role: 'list',\n 'data-scope': 'toc',\n 'data-part': 'list',\n },\n item: (entry: TocEntry): TocItemParts<S> => ({\n item: {\n 'data-scope': 'toc',\n 'data-part': 'item',\n 'data-level': String(entry.level),\n 'data-active': (s) => (isActive(get(s), entry.id) ? '' : undefined),\n 'data-value': entry.id,\n },\n link: {\n href: `${prefix}${entry.id}`,\n 'aria-current': (s) => (isActive(get(s), entry.id) ? 'location' : undefined),\n 'data-scope': 'toc',\n 'data-part': 'link',\n 'data-active': (s) => (isActive(get(s), entry.id) ? '' : undefined),\n },\n expandTrigger: {\n type: 'button',\n 'aria-expanded': (s) => isExpanded(get(s), entry.id),\n 'aria-label': expandLabel,\n 'data-scope': 'toc',\n 'data-part': 'expand-trigger',\n 'data-state': (s) => (isExpanded(get(s), entry.id) ? 'open' : 'closed'),\n onClick: tagSend(send, ['toggleExpanded'], () =>\n send({ type: 'toggleExpanded', id: entry.id }),\n ),\n },\n }),\n }\n}\n\n/**\n * Install an IntersectionObserver that watches heading elements and\n * dispatches `setActive` as the user scrolls. Call from onMount and\n * invoke the returned function on unmount.\n *\n * `rootMargin` defaults to '0px 0px -80% 0px' — a heading is considered\n * active once its top edge enters the top 20% of the viewport.\n */\nexport function watchActiveHeading(\n send: Send<TocMsg>,\n selector: string = '[id][data-toc]',\n rootMargin: string = '0px 0px -80% 0px',\n): () => void {\n const headings = Array.from(document.querySelectorAll<HTMLElement>(selector))\n if (headings.length === 0) return () => {}\n const io = new IntersectionObserver(\n (entries) => {\n for (const e of entries) {\n if (e.isIntersecting) {\n send({ type: 'setActive', id: (e.target as HTMLElement).id })\n return\n }\n }\n },\n { rootMargin },\n )\n for (const h of headings) io.observe(h)\n return () => io.disconnect()\n}\n\nexport const toc = {\n init,\n update,\n connect,\n isActive,\n isExpanded,\n watchActiveHeading,\n}\n"]}
|
|
@@ -15,20 +15,30 @@ export interface ToggleGroupState {
|
|
|
15
15
|
/** In single mode, whether the active item can be deselected. */
|
|
16
16
|
deselectable: boolean;
|
|
17
17
|
}
|
|
18
|
-
export type ToggleGroupMsg =
|
|
18
|
+
export type ToggleGroupMsg =
|
|
19
|
+
/** @intent("Toggle the button with the given value (in single mode, replaces selection)") */
|
|
20
|
+
{
|
|
19
21
|
type: 'toggle';
|
|
20
22
|
value: string;
|
|
21
|
-
}
|
|
23
|
+
}
|
|
24
|
+
/** @intent("Replace the pressed-value set with the provided list") */
|
|
25
|
+
| {
|
|
22
26
|
type: 'setValue';
|
|
23
27
|
value: string[];
|
|
24
|
-
}
|
|
28
|
+
}
|
|
29
|
+
/** @humanOnly */
|
|
30
|
+
| {
|
|
25
31
|
type: 'setItems';
|
|
26
32
|
items: string[];
|
|
27
33
|
disabled?: string[];
|
|
28
|
-
}
|
|
34
|
+
}
|
|
35
|
+
/** @humanOnly */
|
|
36
|
+
| {
|
|
29
37
|
type: 'focusNext';
|
|
30
38
|
from: string;
|
|
31
|
-
}
|
|
39
|
+
}
|
|
40
|
+
/** @humanOnly */
|
|
41
|
+
| {
|
|
32
42
|
type: 'focusPrev';
|
|
33
43
|
from: string;
|
|
34
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { tagSend } from '@llui/dom';
|
|
1
2
|
import { flipArrow } from '../utils/direction.js';
|
|
2
3
|
export function init(opts = {}) {
|
|
3
4
|
return {
|
|
@@ -66,8 +67,8 @@ export function connect(get, send) {
|
|
|
66
67
|
'data-scope': 'toggle-group',
|
|
67
68
|
'data-part': 'item',
|
|
68
69
|
'data-value': value,
|
|
69
|
-
onClick: () => send({ type: 'toggle', value }),
|
|
70
|
-
onKeyDown: (e) => {
|
|
70
|
+
onClick: tagSend(send, ['toggle'], () => send({ type: 'toggle', value })),
|
|
71
|
+
onKeyDown: tagSend(send, ['focusNext', 'focusPrev', 'toggle'], (e) => {
|
|
71
72
|
const key = flipArrow(e.key, e.currentTarget);
|
|
72
73
|
switch (key) {
|
|
73
74
|
case 'ArrowRight':
|
|
@@ -86,7 +87,7 @@ export function connect(get, send) {
|
|
|
86
87
|
send({ type: 'toggle', value });
|
|
87
88
|
return;
|
|
88
89
|
}
|
|
89
|
-
},
|
|
90
|
+
}),
|
|
90
91
|
},
|
|
91
92
|
}),
|
|
92
93
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../src/components/toggle-group.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../src/components/toggle-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { tagSend } from '@llui/dom'\nimport type { Send } from '@llui/dom'\nimport { flipArrow } from '../utils/direction.js'\n\n/**\n * Toggle group — a set of toggle buttons. `type: 'single'` enforces\n * one-active-at-a-time (like a radio group but visually toggles).\n * `type: 'multiple'` allows any subset to be pressed.\n */\n\nexport type Orientation = 'horizontal' | 'vertical'\n\nexport interface ToggleGroupState {\n value: string[]\n type: 'single' | 'multiple'\n items: string[]\n disabledItems: string[]\n disabled: boolean\n orientation: Orientation\n /** In single mode, whether the active item can be deselected. */\n deselectable: boolean\n}\n\nexport type ToggleGroupMsg =\n /** @intent(\"Toggle the button with the given value (in single mode, replaces selection)\") */\n | { type: 'toggle'; value: string }\n /** @intent(\"Replace the pressed-value set with the provided list\") */\n | { type: 'setValue'; value: string[] }\n /** @humanOnly */\n | { type: 'setItems'; items: string[]; disabled?: string[] }\n /** @humanOnly */\n | { type: 'focusNext'; from: string }\n /** @humanOnly */\n | { type: 'focusPrev'; from: string }\n\nexport interface ToggleGroupInit {\n value?: string[]\n type?: 'single' | 'multiple'\n items?: string[]\n disabledItems?: string[]\n disabled?: boolean\n orientation?: Orientation\n deselectable?: boolean\n}\n\nexport function init(opts: ToggleGroupInit = {}): ToggleGroupState {\n return {\n value: opts.value ?? [],\n type: opts.type ?? 'single',\n items: opts.items ?? [],\n disabledItems: opts.disabledItems ?? [],\n disabled: opts.disabled ?? false,\n orientation: opts.orientation ?? 'horizontal',\n deselectable: opts.deselectable ?? true,\n }\n}\n\nexport function update(state: ToggleGroupState, msg: ToggleGroupMsg): [ToggleGroupState, never[]] {\n if (state.disabled) return [state, []]\n switch (msg.type) {\n case 'toggle': {\n if (state.disabledItems.includes(msg.value)) return [state, []]\n const isActive = state.value.includes(msg.value)\n if (state.type === 'multiple') {\n const next = isActive\n ? state.value.filter((v) => v !== msg.value)\n : [...state.value, msg.value]\n return [{ ...state, value: next }, []]\n }\n // single\n if (isActive) {\n if (!state.deselectable) return [state, []]\n return [{ ...state, value: [] }, []]\n }\n return [{ ...state, value: [msg.value] }, []]\n }\n case 'setValue':\n return [{ ...state, value: msg.value }, []]\n case 'setItems':\n return [\n { ...state, items: msg.items, disabledItems: msg.disabled ?? state.disabledItems },\n [],\n ]\n case 'focusNext':\n case 'focusPrev':\n return [state, []]\n }\n}\n\nexport interface ToggleGroupItemParts<S> {\n root: {\n type: 'button'\n role: 'button'\n 'aria-pressed': (s: S) => boolean\n 'aria-disabled': (s: S) => 'true' | undefined\n disabled: (s: S) => boolean\n 'data-state': (s: S) => 'on' | 'off'\n 'data-disabled': (s: S) => '' | undefined\n 'data-scope': 'toggle-group'\n 'data-part': 'item'\n 'data-value': string\n onClick: (e: MouseEvent) => void\n onKeyDown: (e: KeyboardEvent) => void\n }\n}\n\nexport interface ToggleGroupParts<S> {\n root: {\n role: 'group'\n 'aria-disabled': (s: S) => 'true' | undefined\n 'data-scope': 'toggle-group'\n 'data-part': 'root'\n 'data-orientation': (s: S) => Orientation\n 'data-disabled': (s: S) => '' | undefined\n }\n item: (value: string) => ToggleGroupItemParts<S>\n}\n\nexport function connect<S>(\n get: (s: S) => ToggleGroupState,\n send: Send<ToggleGroupMsg>,\n): ToggleGroupParts<S> {\n return {\n root: {\n role: 'group',\n 'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),\n 'data-scope': 'toggle-group',\n 'data-part': 'root',\n 'data-orientation': (s) => get(s).orientation,\n 'data-disabled': (s) => (get(s).disabled ? '' : undefined),\n },\n item: (value: string): ToggleGroupItemParts<S> => ({\n root: {\n type: 'button',\n role: 'button',\n 'aria-pressed': (s) => get(s).value.includes(value),\n 'aria-disabled': (s) =>\n get(s).disabled || get(s).disabledItems.includes(value) ? 'true' : undefined,\n disabled: (s) => get(s).disabled || get(s).disabledItems.includes(value),\n 'data-state': (s) => (get(s).value.includes(value) ? 'on' : 'off'),\n 'data-disabled': (s) =>\n get(s).disabled || get(s).disabledItems.includes(value) ? '' : undefined,\n 'data-scope': 'toggle-group',\n 'data-part': 'item',\n 'data-value': value,\n onClick: tagSend(send, ['toggle'], () => send({ type: 'toggle', value })),\n onKeyDown: tagSend(send, ['focusNext', 'focusPrev', 'toggle'], (e) => {\n const key = flipArrow(e.key, e.currentTarget as Element)\n switch (key) {\n case 'ArrowRight':\n case 'ArrowDown':\n e.preventDefault()\n send({ type: 'focusNext', from: value })\n return\n case 'ArrowLeft':\n case 'ArrowUp':\n e.preventDefault()\n send({ type: 'focusPrev', from: value })\n return\n case ' ':\n case 'Enter':\n e.preventDefault()\n send({ type: 'toggle', value })\n return\n }\n }),\n },\n }),\n }\n}\n\nexport const toggleGroup = { init, update, connect }\n"]}
|
|
@@ -8,12 +8,18 @@ export interface ToggleState {
|
|
|
8
8
|
pressed: boolean;
|
|
9
9
|
disabled: boolean;
|
|
10
10
|
}
|
|
11
|
-
export type ToggleMsg =
|
|
11
|
+
export type ToggleMsg =
|
|
12
|
+
/** @intent("Flip the toggle button's pressed state") */
|
|
13
|
+
{
|
|
12
14
|
type: 'toggle';
|
|
13
|
-
}
|
|
15
|
+
}
|
|
16
|
+
/** @intent("Set the toggle's pressed state to a specific value") */
|
|
17
|
+
| {
|
|
14
18
|
type: 'setPressed';
|
|
15
19
|
pressed: boolean;
|
|
16
|
-
}
|
|
20
|
+
}
|
|
21
|
+
/** @humanOnly */
|
|
22
|
+
| {
|
|
17
23
|
type: 'setDisabled';
|
|
18
24
|
disabled: boolean;
|
|
19
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;;GAIG;AAEH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,SAAS;AACnB,wDAAwD;AACtD;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE;AACpB,oEAAoE;GAClE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE;AAC1C,iBAAiB;GACf;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAA;AAE9C,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,UAAe,GAAG,WAAW,CAKvD;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,CAUjF;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ,CAAA;QACd,IAAI,EAAE,QAAQ,CAAA;QACd,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QACjC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;QAC7C,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,GAAG,KAAK,CAAA;QACpC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACzC,YAAY,EAAE,QAAQ,CAAA;QACtB,WAAW,EAAE,MAAM,CAAA;QACnB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QAChC,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;KACtC,CAAA;CACF;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAqB5F;AAED,eAAO,MAAM,MAAM;;;;CAA4B,CAAA"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { tagSend } from '@llui/dom';
|
|
1
2
|
export function init(opts = {}) {
|
|
2
3
|
return {
|
|
3
4
|
pressed: opts.pressed ?? false,
|
|
@@ -28,13 +29,13 @@ export function connect(get, send) {
|
|
|
28
29
|
'data-disabled': (s) => (get(s).disabled ? '' : undefined),
|
|
29
30
|
'data-scope': 'toggle',
|
|
30
31
|
'data-part': 'root',
|
|
31
|
-
onClick: () => send({ type: 'toggle' }),
|
|
32
|
-
onKeyDown: (e) => {
|
|
32
|
+
onClick: tagSend(send, ['toggle'], () => send({ type: 'toggle' })),
|
|
33
|
+
onKeyDown: tagSend(send, ['toggle'], (e) => {
|
|
33
34
|
if (e.key === ' ' || e.key === 'Enter') {
|
|
34
35
|
e.preventDefault();
|
|
35
36
|
send({ type: 'toggle' });
|
|
36
37
|
}
|
|
37
|
-
},
|
|
38
|
+
}),
|
|
38
39
|
},
|
|
39
40
|
};
|
|
40
41
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/components/toggle.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/components/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AA2BnC,MAAM,UAAU,IAAI,CAAC,OAAmB,EAAE;IACxC,OAAO;QACL,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,KAAK;QAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;KACjC,CAAA;AACH,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,KAAkB,EAAE,GAAc;IACvD,QAAQ,GAAG,CAAC,IAAI,EAAE,CAAC;QACjB,KAAK,QAAQ;YACX,IAAI,KAAK,CAAC,QAAQ;gBAAE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;YACtC,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;QACpD,KAAK,YAAY;YACf,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;QACjD,KAAK,aAAa;YAChB,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAA;IACrD,CAAC;AACH,CAAC;AAkBD,MAAM,UAAU,OAAO,CAAI,GAA0B,EAAE,IAAqB;IAC1E,OAAO;QACL,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO;YACrC,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;YAC9D,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ;YAChC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;YACpD,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YAC1D,YAAY,EAAE,QAAQ;YACtB,WAAW,EAAE,MAAM;YACnB,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;YAClE,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAgB,EAAE,EAAE;gBACxD,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACvC,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAA;gBAC1B,CAAC;YACH,CAAC,CAAC;SACH;KACF,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAA","sourcesContent":["import { tagSend } from '@llui/dom'\nimport type { Send } from '@llui/dom'\n\n/**\n * Toggle button — a button that can be pressed or not. Unlike a checkbox,\n * a toggle represents an action that is applied immediately (e.g. \"bold\" in\n * a text editor toolbar).\n */\n\nexport interface ToggleState {\n pressed: boolean\n disabled: boolean\n}\n\nexport type ToggleMsg =\n /** @intent(\"Flip the toggle button's pressed state\") */\n | { type: 'toggle' }\n /** @intent(\"Set the toggle's pressed state to a specific value\") */\n | { type: 'setPressed'; pressed: boolean }\n /** @humanOnly */\n | { type: 'setDisabled'; disabled: boolean }\n\nexport interface ToggleInit {\n pressed?: boolean\n disabled?: boolean\n}\n\nexport function init(opts: ToggleInit = {}): ToggleState {\n return {\n pressed: opts.pressed ?? false,\n disabled: opts.disabled ?? false,\n }\n}\n\nexport function update(state: ToggleState, msg: ToggleMsg): [ToggleState, never[]] {\n switch (msg.type) {\n case 'toggle':\n if (state.disabled) return [state, []]\n return [{ ...state, pressed: !state.pressed }, []]\n case 'setPressed':\n return [{ ...state, pressed: msg.pressed }, []]\n case 'setDisabled':\n return [{ ...state, disabled: msg.disabled }, []]\n }\n}\n\nexport interface ToggleParts<S> {\n root: {\n type: 'button'\n role: 'button'\n 'aria-pressed': (s: S) => boolean\n 'aria-disabled': (s: S) => 'true' | undefined\n disabled: (s: S) => boolean\n 'data-state': (s: S) => 'on' | 'off'\n 'data-disabled': (s: S) => '' | undefined\n 'data-scope': 'toggle'\n 'data-part': 'root'\n onClick: (e: MouseEvent) => void\n onKeyDown: (e: KeyboardEvent) => void\n }\n}\n\nexport function connect<S>(get: (s: S) => ToggleState, send: Send<ToggleMsg>): ToggleParts<S> {\n return {\n root: {\n type: 'button',\n role: 'button',\n 'aria-pressed': (s) => get(s).pressed,\n 'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),\n disabled: (s) => get(s).disabled,\n 'data-state': (s) => (get(s).pressed ? 'on' : 'off'),\n 'data-disabled': (s) => (get(s).disabled ? '' : undefined),\n 'data-scope': 'toggle',\n 'data-part': 'root',\n onClick: tagSend(send, ['toggle'], () => send({ type: 'toggle' })),\n onKeyDown: tagSend(send, ['toggle'], (e: KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n e.preventDefault()\n send({ type: 'toggle' })\n }\n }),\n },\n }\n}\n\nexport const toggle = { init, update, connect }\n"]}
|
|
@@ -12,13 +12,21 @@ import { type Placement } from '../utils/floating.js';
|
|
|
12
12
|
export interface TooltipState {
|
|
13
13
|
open: boolean;
|
|
14
14
|
}
|
|
15
|
-
export type TooltipMsg =
|
|
15
|
+
export type TooltipMsg =
|
|
16
|
+
/** @intent("Show the tooltip") */
|
|
17
|
+
{
|
|
16
18
|
type: 'show';
|
|
17
|
-
}
|
|
19
|
+
}
|
|
20
|
+
/** @intent("Hide the tooltip") */
|
|
21
|
+
| {
|
|
18
22
|
type: 'hide';
|
|
19
|
-
}
|
|
23
|
+
}
|
|
24
|
+
/** @intent("Toggle the tooltip's visibility") */
|
|
25
|
+
| {
|
|
20
26
|
type: 'toggle';
|
|
21
|
-
}
|
|
27
|
+
}
|
|
28
|
+
/** @intent("Set the tooltip's open state to a specific value") */
|
|
29
|
+
| {
|
|
22
30
|
type: 'setOpen';
|
|
23
31
|
open: boolean;
|
|
24
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAExD,OAAO,EAAkB,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAErE;;;;;;;;GAQG;AAEH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,CAAA;CACd;AAED,MAAM,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { show, portal, onMount, div } from '@llui/dom';
|
|
1
|
+
import { show, portal, onMount, div, tagSend } from '@llui/dom';
|
|
2
2
|
import { attachFloating } from '../utils/floating.js';
|
|
3
3
|
export function init(opts = {}) {
|
|
4
4
|
return { open: opts.open ?? false };
|
|
@@ -70,12 +70,12 @@ export function connect(get, send, opts) {
|
|
|
70
70
|
scheduleShow(0);
|
|
71
71
|
},
|
|
72
72
|
onBlur: () => scheduleHide(0),
|
|
73
|
-
onKeyDown: (e) => {
|
|
73
|
+
onKeyDown: tagSend(send, ['hide'], (e) => {
|
|
74
74
|
if (e.key === 'Escape') {
|
|
75
75
|
clearTimers();
|
|
76
76
|
send({ type: 'hide' });
|
|
77
77
|
}
|
|
78
|
-
},
|
|
78
|
+
}),
|
|
79
79
|
},
|
|
80
80
|
positioner: {
|
|
81
81
|
'data-scope': 'tooltip',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/components/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Send, TransitionOptions } from '@llui/dom'\nimport { show, portal, onMount, div } from '@llui/dom'\nimport { attachFloating, type Placement } from '../utils/floating.js'\n\n/**\n * Tooltip — hover / focus-triggered, positioned. Opens after a short delay\n * to avoid flicker from passing pointers, closes immediately on blur or\n * after a grace period on pointer leave.\n *\n * Pure reducer handles only the boolean `open` state; timing (delays,\n * debouncing) lives in the event handlers returned from `connect()`, which\n * close over per-instance timers.\n */\n\nexport interface TooltipState {\n open: boolean\n}\n\nexport type TooltipMsg =\n | { type: 'show' }\n | { type: 'hide' }\n | { type: 'toggle' }\n | { type: 'setOpen'; open: boolean }\n\nexport interface TooltipInit {\n open?: boolean\n}\n\nexport function init(opts: TooltipInit = {}): TooltipState {\n return { open: opts.open ?? false }\n}\n\nexport function update(state: TooltipState, msg: TooltipMsg): [TooltipState, never[]] {\n switch (msg.type) {\n case 'show':\n return [{ ...state, open: true }, []]\n case 'hide':\n return [{ ...state, open: false }, []]\n case 'toggle':\n return [{ ...state, open: !state.open }, []]\n case 'setOpen':\n return [{ ...state, open: msg.open }, []]\n }\n}\n\nexport interface TooltipParts<S> {\n trigger: {\n id: string\n 'aria-describedby': (s: S) => string | undefined\n 'data-state': (s: S) => 'open' | 'closed'\n 'data-scope': 'tooltip'\n 'data-part': 'trigger'\n onPointerEnter: (e: PointerEvent) => void\n onPointerLeave: (e: PointerEvent) => void\n onFocus: (e: FocusEvent) => void\n onBlur: (e: FocusEvent) => void\n onKeyDown: (e: KeyboardEvent) => void\n }\n positioner: {\n 'data-scope': 'tooltip'\n 'data-part': 'positioner'\n style: string\n }\n content: {\n role: 'tooltip'\n id: string\n 'data-state': (s: S) => 'open' | 'closed'\n 'data-scope': 'tooltip'\n 'data-part': 'content'\n onPointerEnter: (e: PointerEvent) => void\n onPointerLeave: (e: PointerEvent) => void\n }\n arrow: {\n 'data-scope': 'tooltip'\n 'data-part': 'arrow'\n }\n}\n\nexport interface ConnectOptions {\n id: string\n /** ms to wait before opening (default: 300). */\n delayOpen?: number\n /** ms to wait before closing after pointer leaves (default: 100). */\n delayClose?: number\n /** Open immediately on focus without delay (default: true). */\n openOnFocus?: boolean\n}\n\nexport function connect<S>(\n get: (s: S) => TooltipState,\n send: Send<TooltipMsg>,\n opts: ConnectOptions,\n): TooltipParts<S> {\n const base = opts.id\n const triggerId = `${base}:trigger`\n const contentId = `${base}:content`\n const delayOpen = opts.delayOpen ?? 300\n const delayClose = opts.delayClose ?? 100\n const openOnFocus = opts.openOnFocus !== false\n\n let openTimer: ReturnType<typeof setTimeout> | null = null\n let closeTimer: ReturnType<typeof setTimeout> | null = null\n\n const clearTimers = (): void => {\n if (openTimer) {\n clearTimeout(openTimer)\n openTimer = null\n }\n if (closeTimer) {\n clearTimeout(closeTimer)\n closeTimer = null\n }\n }\n\n const scheduleShow = (delay: number): void => {\n clearTimers()\n if (delay <= 0) {\n send({ type: 'show' })\n return\n }\n openTimer = setTimeout(() => {\n openTimer = null\n send({ type: 'show' })\n }, delay)\n }\n\n const scheduleHide = (delay: number): void => {\n clearTimers()\n if (delay <= 0) {\n send({ type: 'hide' })\n return\n }\n closeTimer = setTimeout(() => {\n closeTimer = null\n send({ type: 'hide' })\n }, delay)\n }\n\n return {\n trigger: {\n id: triggerId,\n 'aria-describedby': (s) => (get(s).open ? contentId : undefined),\n 'data-state': (s) => (get(s).open ? 'open' : 'closed'),\n 'data-scope': 'tooltip',\n 'data-part': 'trigger',\n onPointerEnter: () => scheduleShow(delayOpen),\n onPointerLeave: () => scheduleHide(delayClose),\n onFocus: () => {\n if (openOnFocus) scheduleShow(0)\n },\n onBlur: () => scheduleHide(0),\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n clearTimers()\n send({ type: 'hide' })\n }\n },\n },\n positioner: {\n 'data-scope': 'tooltip',\n 'data-part': 'positioner',\n style: 'position:absolute;top:0;left:0;pointer-events:none;',\n },\n content: {\n role: 'tooltip',\n id: contentId,\n 'data-state': (s) => (get(s).open ? 'open' : 'closed'),\n 'data-scope': 'tooltip',\n 'data-part': 'content',\n // Allow pointer to enter content without closing (for interactive tooltips)\n onPointerEnter: () => {\n if (closeTimer) {\n clearTimeout(closeTimer)\n closeTimer = null\n }\n },\n onPointerLeave: () => scheduleHide(delayClose),\n },\n arrow: {\n 'data-scope': 'tooltip',\n 'data-part': 'arrow',\n },\n }\n}\n\nexport interface OverlayOptions<S> {\n get: (s: S) => TooltipState\n send: Send<TooltipMsg>\n parts: TooltipParts<S>\n content: () => Node[]\n placement?: Placement\n offset?: number\n flip?: boolean\n shift?: boolean\n transition?: TransitionOptions\n target?: string | HTMLElement\n arrowSelector?: string\n}\n\nexport function overlay<S>(opts: OverlayOptions<S>): Node[] {\n const target = opts.target ?? 'body'\n const placement = opts.placement ?? 'top'\n const offset = opts.offset ?? 6\n const flip = opts.flip !== false\n const shift = opts.shift !== false\n const parts = opts.parts\n const contentId = parts.content.id\n const triggerId = parts.trigger.id\n\n return show<S, TooltipMsg>({\n when: (s) => opts.get(s).open,\n render: () =>\n portal({\n target,\n render: () => {\n onMount(() => {\n const contentEl = document.getElementById(contentId)\n const triggerEl = document.getElementById(triggerId)\n if (!contentEl || !triggerEl) return\n\n const positioner = contentEl.closest('[data-part=\"positioner\"]') as HTMLElement | null\n const floatingEl = positioner ?? contentEl\n const arrow = opts.arrowSelector\n ? (contentEl.querySelector(opts.arrowSelector) as HTMLElement | null)\n : null\n return attachFloating({\n anchor: triggerEl,\n floating: floatingEl,\n placement,\n offset,\n flip,\n shift,\n arrow: arrow ?? undefined,\n })\n })\n return [div(parts.positioner, opts.content())]\n },\n }),\n enter: opts.transition?.enter,\n leave: opts.transition?.leave,\n })\n}\n\nexport const tooltip = { init, update, connect, overlay }\n"]}
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../src/components/tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Send, TransitionOptions } from '@llui/dom'\nimport { show, portal, onMount, div, tagSend } from '@llui/dom'\nimport { attachFloating, type Placement } from '../utils/floating.js'\n\n/**\n * Tooltip — hover / focus-triggered, positioned. Opens after a short delay\n * to avoid flicker from passing pointers, closes immediately on blur or\n * after a grace period on pointer leave.\n *\n * Pure reducer handles only the boolean `open` state; timing (delays,\n * debouncing) lives in the event handlers returned from `connect()`, which\n * close over per-instance timers.\n */\n\nexport interface TooltipState {\n open: boolean\n}\n\nexport type TooltipMsg =\n /** @intent(\"Show the tooltip\") */\n | { type: 'show' }\n /** @intent(\"Hide the tooltip\") */\n | { type: 'hide' }\n /** @intent(\"Toggle the tooltip's visibility\") */\n | { type: 'toggle' }\n /** @intent(\"Set the tooltip's open state to a specific value\") */\n | { type: 'setOpen'; open: boolean }\n\nexport interface TooltipInit {\n open?: boolean\n}\n\nexport function init(opts: TooltipInit = {}): TooltipState {\n return { open: opts.open ?? false }\n}\n\nexport function update(state: TooltipState, msg: TooltipMsg): [TooltipState, never[]] {\n switch (msg.type) {\n case 'show':\n return [{ ...state, open: true }, []]\n case 'hide':\n return [{ ...state, open: false }, []]\n case 'toggle':\n return [{ ...state, open: !state.open }, []]\n case 'setOpen':\n return [{ ...state, open: msg.open }, []]\n }\n}\n\nexport interface TooltipParts<S> {\n trigger: {\n id: string\n 'aria-describedby': (s: S) => string | undefined\n 'data-state': (s: S) => 'open' | 'closed'\n 'data-scope': 'tooltip'\n 'data-part': 'trigger'\n onPointerEnter: (e: PointerEvent) => void\n onPointerLeave: (e: PointerEvent) => void\n onFocus: (e: FocusEvent) => void\n onBlur: (e: FocusEvent) => void\n onKeyDown: (e: KeyboardEvent) => void\n }\n positioner: {\n 'data-scope': 'tooltip'\n 'data-part': 'positioner'\n style: string\n }\n content: {\n role: 'tooltip'\n id: string\n 'data-state': (s: S) => 'open' | 'closed'\n 'data-scope': 'tooltip'\n 'data-part': 'content'\n onPointerEnter: (e: PointerEvent) => void\n onPointerLeave: (e: PointerEvent) => void\n }\n arrow: {\n 'data-scope': 'tooltip'\n 'data-part': 'arrow'\n }\n}\n\nexport interface ConnectOptions {\n id: string\n /** ms to wait before opening (default: 300). */\n delayOpen?: number\n /** ms to wait before closing after pointer leaves (default: 100). */\n delayClose?: number\n /** Open immediately on focus without delay (default: true). */\n openOnFocus?: boolean\n}\n\nexport function connect<S>(\n get: (s: S) => TooltipState,\n send: Send<TooltipMsg>,\n opts: ConnectOptions,\n): TooltipParts<S> {\n const base = opts.id\n const triggerId = `${base}:trigger`\n const contentId = `${base}:content`\n const delayOpen = opts.delayOpen ?? 300\n const delayClose = opts.delayClose ?? 100\n const openOnFocus = opts.openOnFocus !== false\n\n let openTimer: ReturnType<typeof setTimeout> | null = null\n let closeTimer: ReturnType<typeof setTimeout> | null = null\n\n const clearTimers = (): void => {\n if (openTimer) {\n clearTimeout(openTimer)\n openTimer = null\n }\n if (closeTimer) {\n clearTimeout(closeTimer)\n closeTimer = null\n }\n }\n\n const scheduleShow = (delay: number): void => {\n clearTimers()\n if (delay <= 0) {\n send({ type: 'show' })\n return\n }\n openTimer = setTimeout(() => {\n openTimer = null\n send({ type: 'show' })\n }, delay)\n }\n\n const scheduleHide = (delay: number): void => {\n clearTimers()\n if (delay <= 0) {\n send({ type: 'hide' })\n return\n }\n closeTimer = setTimeout(() => {\n closeTimer = null\n send({ type: 'hide' })\n }, delay)\n }\n\n return {\n trigger: {\n id: triggerId,\n 'aria-describedby': (s) => (get(s).open ? contentId : undefined),\n 'data-state': (s) => (get(s).open ? 'open' : 'closed'),\n 'data-scope': 'tooltip',\n 'data-part': 'trigger',\n onPointerEnter: () => scheduleShow(delayOpen),\n onPointerLeave: () => scheduleHide(delayClose),\n onFocus: () => {\n if (openOnFocus) scheduleShow(0)\n },\n onBlur: () => scheduleHide(0),\n onKeyDown: tagSend(send, ['hide'], (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n clearTimers()\n send({ type: 'hide' })\n }\n }),\n },\n positioner: {\n 'data-scope': 'tooltip',\n 'data-part': 'positioner',\n style: 'position:absolute;top:0;left:0;pointer-events:none;',\n },\n content: {\n role: 'tooltip',\n id: contentId,\n 'data-state': (s) => (get(s).open ? 'open' : 'closed'),\n 'data-scope': 'tooltip',\n 'data-part': 'content',\n // Allow pointer to enter content without closing (for interactive tooltips)\n onPointerEnter: () => {\n if (closeTimer) {\n clearTimeout(closeTimer)\n closeTimer = null\n }\n },\n onPointerLeave: () => scheduleHide(delayClose),\n },\n arrow: {\n 'data-scope': 'tooltip',\n 'data-part': 'arrow',\n },\n }\n}\n\nexport interface OverlayOptions<S> {\n get: (s: S) => TooltipState\n send: Send<TooltipMsg>\n parts: TooltipParts<S>\n content: () => Node[]\n placement?: Placement\n offset?: number\n flip?: boolean\n shift?: boolean\n transition?: TransitionOptions\n target?: string | HTMLElement\n arrowSelector?: string\n}\n\nexport function overlay<S>(opts: OverlayOptions<S>): Node[] {\n const target = opts.target ?? 'body'\n const placement = opts.placement ?? 'top'\n const offset = opts.offset ?? 6\n const flip = opts.flip !== false\n const shift = opts.shift !== false\n const parts = opts.parts\n const contentId = parts.content.id\n const triggerId = parts.trigger.id\n\n return show<S, TooltipMsg>({\n when: (s) => opts.get(s).open,\n render: () =>\n portal({\n target,\n render: () => {\n onMount(() => {\n const contentEl = document.getElementById(contentId)\n const triggerEl = document.getElementById(triggerId)\n if (!contentEl || !triggerEl) return\n\n const positioner = contentEl.closest('[data-part=\"positioner\"]') as HTMLElement | null\n const floatingEl = positioner ?? contentEl\n const arrow = opts.arrowSelector\n ? (contentEl.querySelector(opts.arrowSelector) as HTMLElement | null)\n : null\n return attachFloating({\n anchor: triggerEl,\n floating: floatingEl,\n placement,\n offset,\n flip,\n shift,\n arrow: arrow ?? undefined,\n })\n })\n return [div(parts.positioner, opts.content())]\n },\n }),\n enter: opts.transition?.enter,\n leave: opts.transition?.leave,\n })\n}\n\nexport const tooltip = { init, update, connect, overlay }\n"]}
|
|
@@ -39,18 +39,30 @@ export interface TourState {
|
|
|
39
39
|
/** Ids of steps already visited. */
|
|
40
40
|
visited: string[];
|
|
41
41
|
}
|
|
42
|
-
export type TourMsg =
|
|
42
|
+
export type TourMsg =
|
|
43
|
+
/** @intent("Begin the tour at the first step (or current index if resuming)") */
|
|
44
|
+
{
|
|
43
45
|
type: 'start';
|
|
44
|
-
}
|
|
46
|
+
}
|
|
47
|
+
/** @intent("Close the tour without finishing (does not reset progress)") */
|
|
48
|
+
| {
|
|
45
49
|
type: 'stop';
|
|
46
|
-
}
|
|
50
|
+
}
|
|
51
|
+
/** @intent("Advance to the next step (closes the tour after the last step)") */
|
|
52
|
+
| {
|
|
47
53
|
type: 'next';
|
|
48
|
-
}
|
|
54
|
+
}
|
|
55
|
+
/** @intent("Go back to the previous step") */
|
|
56
|
+
| {
|
|
49
57
|
type: 'prev';
|
|
50
|
-
}
|
|
58
|
+
}
|
|
59
|
+
/** @intent("Jump to a specific step by zero-based index") */
|
|
60
|
+
| {
|
|
51
61
|
type: 'goto';
|
|
52
62
|
index: number;
|
|
53
|
-
}
|
|
63
|
+
}
|
|
64
|
+
/** @humanOnly */
|
|
65
|
+
| {
|
|
54
66
|
type: 'setSteps';
|
|
55
67
|
steps: TourStep[];
|
|
56
68
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tour.d.ts","sourceRoot":"","sources":["../../src/components/tour.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAKrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,uDAAuD;IACvD,MAAM,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC/C,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,OAAO,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,MAAM,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"tour.d.ts","sourceRoot":"","sources":["../../src/components/tour.ts"],"names":[],"mappings":"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"}
|