reactive-helpers

Appearance

use/listFilter ​

Interfaces ​

ListFilterOptions ​

Configuration options for initializing a list filter. Includes references to the parent state and filter functions.

Properties ​

allowedFilter? ​

optional allowedFilter?: Function | Ref<Function, Function>

A function that returns true if an item should be included, which can be reactive.

excludedFilter? ​

optional excludedFilter?: Function | Ref<Function, Function>

A function that returns true if an item should be excluded, which can be reactive.

parentState ​

parentState: object

The parent state.

calculatedObjects? ​

optional calculatedObjects?: object

The calculated objects, by object pk and then rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the calculated value and never carry a .value.

Index Signature ​

[pk: string]: object

calculatedObjectsParentStateObjectsWatchRunning? ​

optional calculatedObjectsParentStateObjectsWatchRunning?: boolean

Whether the parent state objects watch is running.

calculatedObjectsRules? ​

optional calculatedObjectsRules?: ListCalculatedRules

The rules for the calculated objects.

calculatedObjectsWatchRunning? ​

optional calculatedObjectsWatchRunning?: boolean

Whether the calculated objects watch is running.

calculatedRunning? ​

optional calculatedRunning?: boolean

Whether the calculated properties are running.

columnTotals ​

columnTotals: ShallowReactive<ColumnTotals>

Column totals for the list.

crud ​

crud: object

CRUD handlers and their configurations for the list.

crud.args ​

args: Reactive<{ } | TargetArgs>

The arguments to be passed to the crud handlers.

crud.bulkDelete ​

bulkDelete: CrudBulkDeleteFn

The bulk delete function.

crud.executeAction ​

executeAction: CrudExecuteActionFn

The execute action function.

crud.list ​

list: CrudListFn

The list function.

crud.subscribe ​

subscribe: CrudListSubscribeFn

The subscribe function.

error ​

error: Error

The error that occurred.

errored ​

errored: boolean

Whether an error has occurred.

fkForPkAndRule? ​

optional fkForPkAndRule?: object

The foreign key for each object pk and rule, crucial for navigating complex data relationships. Each entry is backed by a computed that the reactive proxy unwraps on read.

Index Signature ​

[pk: string]: object

intendToList? ​

optional intendToList?: boolean

If this is true, the list should be fetched, or re-fetched if arguments change.

intendToSubscribe? ​

optional intendToSubscribe?: boolean

If this is true, the subscription should start or restart if arguments change.

loading ​

loading: boolean

Whether the component is loading.

objAndKeyForPkAndRule? ​

optional objAndKeyForPkAndRule?: object

Maps each object pk and rule to a tuple consisting of the related object and its respective key, facilitating direct data manipulation. Reads through the reactive state unwrap the computed to the tuple itself, so .value is not used.

Index Signature ​

[pk: string]: object

objects ​

objects: ObjectsByPk

The list objects stored by their pks.

objectsInOrder ​

objectsInOrder: readonly ExistingCrudObject[]

The objects in the order specified by the list.

objectsMap ​

objectsMap: object

The map of objects stored by their pks.

objectsVersion ​

objectsVersion: number

Increments when this layer's set of object keys changes. Each layer that narrows membership publishes its own, so the value belongs to the state reporting it and is not comparable with another layer's. Watch it rather than reading it, and prefer watchMembershipChanged, which carries the same signal without exposing how it is counted.

order ​

order: readonly string[]

The order of objects in the list.

paginateInfo ​

paginateInfo: ShallowReactive<PaginateInfo>

Pagination information for the list.

params ​

params: any

Arguments passed to the server for listing operations.

pkKey ​

pkKey: string

The primary key field for the list objects.

relatedObjects? ​

optional relatedObjects?: object

The related objects, by object pk and then rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the related object (or array of related objects) and never carry a .value.

Index Signature ​

[pk: string]: object

relatedObjectsParentStateObjectsWatchRunning? ​

optional relatedObjectsParentStateObjectsWatchRunning?: boolean

Flags whether the watch on parent state objects is currently active, ensuring updates trigger as needed.

relatedObjectsRules? ​

optional relatedObjectsRules?: ListRelatedRules

Defines the rules for establishing relationships, such as foreign key links and sorting orders.

relatedObjectsWatchRunning? ​

optional relatedObjectsWatchRunning?: boolean

Indicates if watches on the related objects themselves are active, managing updates efficiently.

relatedRunning? ​

optional relatedRunning?: boolean

Signals whether any computations related to object relationships are currently in progress.

running? ​

optional running?: boolean

General flag that indicates if the list-related logic is processing, used to manage UI feedback or prevent concurrent operations.

subscribed? ​

optional subscribed?: boolean

Whether the subscription is active.

ListFilterProperties ​

The properties of a list filter, including its state and associated Vue composition API utilities.

Properties ​

parentState ​

parentState: object

The state of the list being filtered.

calculatedObjects? ​

optional calculatedObjects?: object

The calculated objects, by object pk and then rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the calculated value and never carry a .value.

Index Signature ​

[pk: string]: object

calculatedObjectsParentStateObjectsWatchRunning? ​

optional calculatedObjectsParentStateObjectsWatchRunning?: boolean

Whether the parent state objects watch is running.

calculatedObjectsRules? ​

optional calculatedObjectsRules?: ListCalculatedRules

The rules for the calculated objects.

calculatedObjectsWatchRunning? ​

optional calculatedObjectsWatchRunning?: boolean

Whether the calculated objects watch is running.

calculatedRunning? ​

optional calculatedRunning?: boolean

Whether the calculated properties are running.

columnTotals ​

columnTotals: ShallowReactive<ColumnTotals>

Column totals for the list.

crud ​

crud: object

CRUD handlers and their configurations for the list.

crud.args ​

args: Reactive<{ } | TargetArgs>

The arguments to be passed to the crud handlers.

crud.bulkDelete ​

bulkDelete: CrudBulkDeleteFn

The bulk delete function.

crud.executeAction ​

executeAction: CrudExecuteActionFn

The execute action function.

crud.list ​

list: CrudListFn

The list function.

crud.subscribe ​

subscribe: CrudListSubscribeFn

The subscribe function.

error ​

error: Error

The error that occurred.

errored ​

errored: boolean

Whether an error has occurred.

fkForPkAndRule? ​

optional fkForPkAndRule?: object

The foreign key for each object pk and rule, crucial for navigating complex data relationships. Each entry is backed by a computed that the reactive proxy unwraps on read.

Index Signature ​

[pk: string]: object

intendToList? ​

optional intendToList?: boolean

If this is true, the list should be fetched, or re-fetched if arguments change.

intendToSubscribe? ​

optional intendToSubscribe?: boolean

If this is true, the subscription should start or restart if arguments change.

loading ​

loading: boolean

Whether the component is loading.

objAndKeyForPkAndRule? ​

optional objAndKeyForPkAndRule?: object

Maps each object pk and rule to a tuple consisting of the related object and its respective key, facilitating direct data manipulation. Reads through the reactive state unwrap the computed to the tuple itself, so .value is not used.

Index Signature ​

[pk: string]: object

objects ​

objects: ObjectsByPk

The list objects stored by their pks.

objectsInOrder ​

objectsInOrder: readonly ExistingCrudObject[]

The objects in the order specified by the list.

objectsMap ​

objectsMap: object

The map of objects stored by their pks.

objectsVersion ​

objectsVersion: number

Increments when this layer's set of object keys changes. Each layer that narrows membership publishes its own, so the value belongs to the state reporting it and is not comparable with another layer's. Watch it rather than reading it, and prefer watchMembershipChanged, which carries the same signal without exposing how it is counted.

order ​

order: readonly string[]

The order of objects in the list.

paginateInfo ​

paginateInfo: ShallowReactive<PaginateInfo>

Pagination information for the list.

params ​

params: any

Arguments passed to the server for listing operations.

pkKey ​

pkKey: string

The primary key field for the list objects.

relatedObjects? ​

optional relatedObjects?: object

The related objects, by object pk and then rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the related object (or array of related objects) and never carry a .value.

Index Signature ​

[pk: string]: object

relatedObjectsParentStateObjectsWatchRunning? ​

optional relatedObjectsParentStateObjectsWatchRunning?: boolean

Flags whether the watch on parent state objects is currently active, ensuring updates trigger as needed.

relatedObjectsRules? ​

optional relatedObjectsRules?: ListRelatedRules

Defines the rules for establishing relationships, such as foreign key links and sorting orders.

relatedObjectsWatchRunning? ​

optional relatedObjectsWatchRunning?: boolean

Indicates if watches on the related objects themselves are active, managing updates efficiently.

relatedRunning? ​

optional relatedRunning?: boolean

Signals whether any computations related to object relationships are currently in progress.

running? ​

optional running?: boolean

General flag that indicates if the list-related logic is processing, used to manage UI feedback or prevent concurrent operations.

subscribed? ​

optional subscribed?: boolean

Whether the subscription is active.

state ​

state: object

The reactive state managing the filter logic and results.

allowedFilter? ​

optional allowedFilter?: Function

Function to determine if an item should be included based on custom logic.

calculatedObjects? ​

optional calculatedObjects?: object

The calculated objects, by object pk and then rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the calculated value and never carry a .value.

Index Signature ​

[pk: string]: object

calculatedObjectsParentStateObjectsWatchRunning? ​

optional calculatedObjectsParentStateObjectsWatchRunning?: boolean

Whether the parent state objects watch is running.

calculatedObjectsRules? ​

optional calculatedObjectsRules?: ListCalculatedRules

The rules for the calculated objects.

calculatedObjectsWatchRunning? ​

optional calculatedObjectsWatchRunning?: boolean

Whether the calculated objects watch is running.

calculatedRunning? ​

optional calculatedRunning?: boolean

Whether the calculated properties are running.

columnTotals ​

columnTotals: ShallowReactive<ColumnTotals>

Column totals for the list.

crud ​

crud: object

CRUD handlers and their configurations for the list.

crud.args ​

args: Reactive<{ } | TargetArgs>

The arguments to be passed to the crud handlers.

crud.bulkDelete ​

bulkDelete: CrudBulkDeleteFn

The bulk delete function.

crud.executeAction ​

executeAction: CrudExecuteActionFn

The execute action function.

crud.list ​

list: CrudListFn

The list function.

crud.subscribe ​

subscribe: CrudListSubscribeFn

The subscribe function.

error ​

error: Error

The error that occurred.

errored ​

errored: boolean

Whether an error has occurred.

excludedFilter? ​

optional excludedFilter?: Function

Function to determine if an item should be excluded based on custom logic.

fkForPkAndRule? ​

optional fkForPkAndRule?: object

The foreign key for each object pk and rule, crucial for navigating complex data relationships. Each entry is backed by a computed that the reactive proxy unwraps on read.

Index Signature ​

[pk: string]: object

intendToList? ​

optional intendToList?: boolean

If this is true, the list should be fetched, or re-fetched if arguments change.

intendToSubscribe? ​

optional intendToSubscribe?: boolean

If this is true, the subscription should start or restart if arguments change.

loading ​

loading: boolean

Whether the component is loading.

objAndKeyForPkAndRule? ​

optional objAndKeyForPkAndRule?: object

Maps each object pk and rule to a tuple consisting of the related object and its respective key, facilitating direct data manipulation. Reads through the reactive state unwrap the computed to the tuple itself, so .value is not used.

Index Signature ​

[pk: string]: object

objects ​

objects: ObjectsByPk

The list objects stored by their pks.

objectsInOrder ​

objectsInOrder: readonly ExistingCrudObject[]

The objects in the order specified by the list.

objectsMap ​

objectsMap: object

The map of objects stored by their pks.

objectsVersion ​

objectsVersion: number

Increments when this layer's set of object keys changes. Each layer that narrows membership publishes its own, so the value belongs to the state reporting it and is not comparable with another layer's. Watch it rather than reading it, and prefer watchMembershipChanged, which carries the same signal without exposing how it is counted.

order ​

order: readonly string[]

The order of objects in the list.

paginateInfo ​

paginateInfo: ShallowReactive<PaginateInfo>

Pagination information for the list.

params ​

params: any

Arguments passed to the server for listing operations.

pkKey ​

pkKey: string

The primary key field for the list objects.

relatedObjects? ​

optional relatedObjects?: object

The related objects, by object pk and then rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the related object (or array of related objects) and never carry a .value.

Index Signature ​

[pk: string]: object

relatedObjectsParentStateObjectsWatchRunning? ​

optional relatedObjectsParentStateObjectsWatchRunning?: boolean

Flags whether the watch on parent state objects is currently active, ensuring updates trigger as needed.

relatedObjectsRules? ​

optional relatedObjectsRules?: ListRelatedRules

Defines the rules for establishing relationships, such as foreign key links and sorting orders.

relatedObjectsWatchRunning? ​

optional relatedObjectsWatchRunning?: boolean

Indicates if watches on the related objects themselves are active, managing updates efficiently.

relatedRunning? ​

optional relatedRunning?: boolean

Signals whether any computations related to object relationships are currently in progress.

running? ​

optional running?: boolean

General flag that indicates if the list-related logic is processing, used to manage UI feedback or prevent concurrent operations.

subscribed? ​

optional subscribed?: boolean

Whether the subscription is active.

stop ​

stop: () => void

A function to stop the effect scope and clean up resources.

Returns ​

void

watchMembershipChanged ​

watchMembershipChanged: WatchMembershipChanged

Registers a callback for changes to the set of object keys this layer holds. The watcher belongs to the effect scope active where it is called, not to this layer, so stopping this layer silences it without disposing it.

ListFilterRawState ​

Defines the structure of the reactive state used by the list filter. This state includes both filters and the results of applying these filters to a list.

Properties ​

allowedFilter? ​

optional allowedFilter?: Function

Function to determine if an item should be included based on custom logic.

excludedFilter? ​

optional excludedFilter?: Function

Function to determine if an item should be excluded based on custom logic.

Type Aliases ​

ListFilter ​

ListFilter = ListFilterProperties

Represents an instance of a list filter, including its state and associated Vue composition API utilities.

Type Parameters ​

ListFilterAllowedFilter ​

ListFilterAllowedFilter = Function

A function that returns true if an item should be included.

Type Parameters ​

ListFilterExcludedFilter ​

ListFilterExcludedFilter = Function

A function that returns true if an item should be excluded.

Type Parameters ​

ListFilterParentRawState ​

ListFilterParentRawState = ListInstanceRawState & Partial<ListSubscriptionRawState> & Partial<ListRelatedRawState> & Partial<ListCalculatedRawState>

The raw, pre-unwrapped parent state consumed by the list filter mixin, aggregating the upstream list composable states.

Type Parameters ​

ListFilterParentState ​

ListFilterParentState = UnwrapNestedRefs

The parent state for a list filter.

Type Parameters ​

ListFilterState ​

ListFilterState = UnwrapNestedRefs

Describes the combined state from various list-related composables that might interact with the list filter.

Type Parameters ​

ObjectsInOrderRefs ​

ObjectsInOrderRefs = Ref[]

An array of Vue refs to the list's existing objects in their current order.

Type Parameters ​

Functions ​

useListFilter() ​

useListFilter(options): ListFilterProperties

Initializes and manages a list filter instance, setting up reactive states and dependencies to dynamically adjust the visible items based on the provided filter functions.

Parameters ​

options ​

ListFilterOptions

The options for the list filter including filters and parent state.

Returns ​

ListFilterProperties

A fully configured list filter instance, providing reactive filtered results.

Example ​

vue
<script setup>
import { defineProps, reactive, toRef, computed } from 'vue';
import { useListInstance, useListFilter } from '@arrai-innovations/reactive-helpers';

const props = defineProps({
    someListFilter: String
});

const listInstance = useListInstance({ props });
const filterConditions = reactive({
    allowedFilter: (item) => item.isActive,
    excludedFilter: (item) => !item.isValid
});

const listFilter = useListFilter({
    parentState: listInstance.state,
    ...filterConditions
});
// listFilter.state.objectsInOrder now contains the reactive filtered items from listInstance.state.objectsInOrder
</script>

useListFilters() ​

useListFilters(listFilterArgs): object

Helper function to create multiple instances of list filters based on provided configurations.

Parameters ​

listFilterArgs ​

Configuration for each filter instance.

Returns ​

object

An object containing instances of list filters.