A bounded undo/redo system that manages a fixed-size timeline of registered items with automatic overflow handling and history management.
The useTimeline composable extends useRegistry to provide undo/redo functionality with a bounded history. When the timeline reaches its size limit, older items are moved to an overflow buffer, allowing you to undo back to them while maintaining a fixed active timeline size.
ts import { createTimeline } from '@vuetify/v0' const timeline = createTimeline ({ size: 10 }) // Register actions timeline. register ({ id: 'action-1' , value: 'Created document' }) timeline. register ({ id: 'action-2' , value: 'Added title' }) timeline. register ({ id: 'action-3' , value: 'Added paragraph' }) console. log (timeline.size) // 3 // Undo the last action timeline. undo () console. log (timeline.size) // 2 // Redo the undone action timeline. redo () console. log (timeline.size) // 3 useTimeline extends useRegistry with bounded history and overflow management:
Diagram Click outside or press Escape to close
View standalone → The following API details are for the
useTimeline composable.
(_options?: TimelineOptions) => ECreates a new timeline instance.
Show code example
(_options?: TimelineContextOptions) => ContextTrinity<E>Creates a new timeline context.
Show code example
(namespace?: string) => EReturns the current timeline instance.
Show code example
booleanEnable event emission for registry operations
Default: false
numberThe maximum size of the timeline.
Default: 10
ReadonlyMap<ID, Z>The collection of tickets in the registry
numberThe number of tickets in the registry
Show code example
() => voidClear the entire registry
Show code example
(id: ID) => booleanCheck if a ticket exists by ID
Show code example
() => ID[]Get all registered IDs
Show code example
(value: unknown) => ID[] | undefinedBrowse for an ID(s) by value
Show code example
(index: number) => ID | undefinedlookup a ticket by index number
Show code example
(id: ID) => Z | undefinedGet a ticket by ID
Show code example
(id: ID, ticket?: Partial<Z>) => ZUpdate or insert a ticket by ID
Show code example
() => Z[]Get all values of registered tickets
Show code example
() => [ID, Z][]Get all entries of registered tickets
Show code example
(ticket?: Partial<Z>) => ZRegister a new ticket
Show code example
(id: ID) => voidUnregister an ticket by ID
Show code example
() => voidReset the index directory and update all tickets
Show code example
(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => Z | undefinedSeek for a ticket based on direction and optional predicate
Show code example
(event: string, cb: RegistryEventCallback) => voidListen for registry events
Show code example
(event: string, cb: RegistryEventCallback) => voidStop listening for registry events
Show code example
(event: string, data: unknown) => voidEmit an event with data
Show code example
() => voidClears the registry and removes all listeners
Show code example
(registrations: Partial<Z>[]) => Z[]Onboard multiple tickets at once
Show code example
(ids: ID[]) => voidOffboard multiple tickets at once
Show code example
<R>(fn: () => R) => RExecute operations in a batch, deferring cache invalidation and event emission until complete
Show code example
() => Z | undefinedRemoves the last registered ticket and stores it for redo
Show code example
() => Z | undefinedRestores the last undone ticket
Show code example
