API
Here are the available methods that you can use to build your component.
const catalog = useCatalog<City, Filters>();
Storage
entries
ComputedRef<T[]>
The current list of entries based on the provided options.
selectedEntries
ComputedRef<T[]>
The selected entries when selection is enabled.
hasPrevious
ComputedRef<boolean>
Useful when displaying or controlling components' state based on entries availability.
hasNext
ComputedRef<boolean>
Useful when displaying or controlling components' state based on entries availability.
mode
ComputedRef<UseCatalogMode>
Returns the current mode.
layout
ComputedRef<UseCatalogLayout>
Returns the current layout.
aggregates
ComputedRef<UseCatalogAggregates<F>>
Returns the current aggregates.
initialAggregates
ComputedRef<UseCatalogAggregates<F>>
Returns the initial aggregates. Useful when you want to compare changes or reset state.
total
ComputedRef<number>
Displays the total number of available entries. Useful when using pages as mode.
page
ComputedRef<number>
Returns the current page number.
pages
ComputedRef<UseCatalogPage<T>[]>
Returns the loaded pages and their entries.
pagesCount
ComputedRef<number>
Returns the available pages' count.
selectable
ComputedRef<boolean>
Returns the status of the selection functionality.
selected
ComputedRef<string[]>
Returns the keys of the selected entries.
state
ComputedRef<TState>
Returns the current UI state.
error
ComputedRef<string | undefined>
Returns the current error.
Methods
init
() => Promise<void>
Initializes the catalog if it was not initialized already.
refresh
() => Promise<void>
Refreshes the catalog at the current aggregates value.
reset
() => Promise<void>
Resets the catalog to its original state.
loadPage
(value: number) => Promise<void>
Loads a specific page.
loadPrevious
() => Promise<void>
Loads the previous page if available.
loadNext
() => Promise<void>
Loads the next page if available.
filter
(value: F) => Promise<void>
Updates the aggregates value, resets the state, and loads the initial page.
setMode
(value: UseCatalogMode) => void
Sets the mode value.
setLayout
(value: UseCatalogLayout) => void
Sets the layout value.
setCache
(value: boolean) => void
Sets the cache value.
toggleSelectable
() => void
Enables and disables the status of the selection functionality.
isSelected
(value: T) => boolean
Checks if an entry is selected.
addSelected
(value: T) => void
Adds an entry to selection.
removeSelected
(value: T) => void
Removes an entry from selection.
toggleSelected
(value: T) => void
Adds or removes an entry from selection.
selectAll
() => void
Adds all entries in the current page to selection.
unselectAll
() => void
Removes all entries in the current page from selection.