createProgress
A composable for tracking progress across one or more segments, with percentage computation and indeterminate state detection.
Usage
The createProgress composable creates a progress instance backed by createModel. Each segment registers as a model ticket with a ShallowRef<number> value. The total, percent, and indeterminate state are computed reactively from all registered segments.
import { createProgress } from '@vuetify/v0'
const progress = createProgress({ max: 100 })
// Register segments
const first = progress.register(50)
const second = progress.register(25)
progress.total.value // 75
progress.percent.value // 75
progress.isIndeterminate.value // false
// Update a segment
first.value.value = 80
progress.total.value // 105 → clamped to 100
progress.percent.value // 100
// Convert raw value to percentage
progress.fromValue(50) // 50
// Unregister
first.unregister()
progress.total.value // 25Architecture
createProgress extends createModel with sum-based aggregation:
Each segment is a model ticket whose value is a ShallowRef<number>. All segments stay selected (multiple: true, enroll: true) so selectedValues always reflects the full set. The total sums all segment values and clamps to [min, max]. The percent normalizes the total to 0–100.
Reactivity
| Property | Reactive | Notes |
|---|---|---|
segments | Computed — sorted list of registered segment tickets | |
selectedValues | Computed — array of current segment values | |
total | Computed — sum of segment values, clamped to [min, max] | |
percent | Computed — total as percentage of range | |
isIndeterminate | Computed — true when no segments or all values are 0 |
Segment values are ShallowRef Each ticket’s value is a ShallowRef<number>. Updating it (ticket.value.value = 80) triggers recomputation of total and percent automatically.
Examples
File Upload Tracker
Demonstrates standalone createProgress usage — no component needed. Each uploaded file registers a segment and simulates progress via a timer.
| File | Role |
|---|---|
useUpload.ts | Composable — wraps createProgress with file-upload semantics |
upload.vue | Demo — add files and watch individual + aggregate progress |
Functions
createProgress
(options?: ProgressOptions) => ProgressContextCreates a progress instance with model-based segment tracking.
createProgressContext
(_options?: ProgressContextOptions) => ContextTrinity<ProgressContext>Creates a progress context for dependency injection.
useProgress
(namespace?: string) => ProgressContextReturns the current progress instance from context.
Options
Properties
selectedValues
ComputedRef<Set<E["value"] extends Ref<infer U, infer U> ? U : E["value"]>>Computed Set of selected ticket values
min
numbermax
numbersegments
ComputedRef<ProgressTicket[]>total
Readonly<Ref<number, number>>percent
Readonly<Ref<number, number>>isIndeterminate
Readonly<Ref<boolean, boolean>>Methods
move
(id: ID, toIndex: number) => E | undefinedSeek for a ticket based on direction and optional predicate
seek
(direction?: "first" | "last", from?: number, predicate?: (ticket) => boolean) => E | undefinedon
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<E, K>) => voidListen for registry events
off
<K extends Extensible<RegistryEventName>>(event: K, cb: EventHandler<E, K>) => voidStop listening for registry events
emit
<K extends Extensible<RegistryEventName>>(event: K, data: EventPayload<E, K>) => voidEmit an event with data
batch
<R>(fn: () => R) => RExecute operations in a batch, deferring cache invalidation and event emission until complete
fromValue
(value: number) => number