@projectfive/v-composables v1.0.0

Composables

useLoading

import { useLoading } from '@projectfive/v-composables';

const { startLoading, stopLoading, isLoading } = useLoading();

Props

• default - (empty / ref(new Set())) - empty = global state, otherwise local state.

Returns

• startLoading - (function) pass string-id
• stopLoading - (function) pass string-id
• isLoading - (computed-boolean)

useItems

import { useItems } from '@projectfive/v-composables';

const {
    // Items
    items,
    getItems,
    atBottom,
    resetPagination,

    // Filters
    isFiltered,
    resetFilters,
    filterOptions,
    appliedFilters,
    appliedFiltersPretty,
} = useItems<itemtype>({
    defaults,
    defaultParams,
    onChange,
    endpoint,
    filterOnChange,
    loadStates,
});

Props

• defaults - passed to useFilters - see useFilters.
• onChange - passed to useFilters - see useFilters.
• filterOnChange - passed to useFilters - see useFilters.
• defaultParams - (object) params that will always be added to request.
• endpoint - (string) will be prefixed with 'items/'
• loadStates - (ref-set) optional, custom load set

Returns

• items - (ref array) of itemtype
• getItems - (function) - params = requestparams. If empty, applied filter params are used. Use catch for error reporting
• atBottom - (ref boolean)
• resetPagination - (function)
• isFiltered - see filters-returns
• resetFilters - see filters-returns
• filterOptions - see filters-returns
• appliedFilters - see filters-returns
• appliedFiltersPretty - see filters-returns

usePagination

import { usePagination, Pagination (type) } from '@projectfive/v-composables';

const { bump, reset, get, atBottom } = usePagination();

Props

• count - (number) optional
• start - (number) optional

Returns

• bump - (function) pass added amount
• reset - (function)
• get - (function) returns { count, start }
• atBottom - (ref-boolean) boolean

useFilters

import { useFilters } from '@projectfive/v-composables';

const {
    filterOptions,
    appliedFilters,
    appliedFiltersPretty,
    appliedFiltersToFilterParams,
    isFiltered,
    getFilters,
    resetFilters,
} = useFilters({
    defaults,
    defaultParams,
    onChange,
    endpoint,
    filterOnChange,
    loadStates,
});

Props

• defaults - (object) containing: options: always existing filterOptions, prepended to remote results. filterOptions: default filterOptions, used before request has loaded filters: default applied filters
• defaultParams - (object) params that will always be added to request.
• onChange - (function) executed when filters change
• endpoint - (string) will be prefixed with 'filters/'
• filterOnChange - (boolean) if true, onChange is triggered when filters change
• loadStates - (ref-set) optional, custom load set

Returns

• filterOptions - current filter options
• appliedFilters - current filter values, ex: { category: 28 }
• appliedFiltersPretty - current readable filter values, ex: { category: 'Nieuw binnen' }
• isFiltered - computed boolean
• resetFilters - (function)
• getFilters - internal
• appliedFiltersToFilterParams - internal

FilterTypes

• Filter: includes all:
  • GenericFilter
  • SingleFilter
  • MultipleFilter
  • RangeFilter
• Values:
  • FilterValue
  • NestedFilterValue
  • RangeFilterValue
• SelectedFilter
• FilterDefaults