Composable for managing list selection

[rMonell]

Clear and concise description of the problem

It's not uncommon to have to manage selection of items in a list with varying degrees of constraint (multiple, mandatory, etc).

A composable like useListSelection that would allow you to select or toggle a selection state in a list from different options could be quite useful.

Suggested solution

Usage

Basic

const list = ['item-1', 'item-2', 'item-3', 'item-4']

const { toggle, state } = useListSelection(list)

toggle('item-1')

console.log(state.value) // 'item-1'

toggle('item-2')

console.log(state.value) // 'item-2'

toggle('item-2')

console.log(state.value) // undefined

Object list

type ListItem = { id: string }

const list: ListItem[] = [{ id: 'item-1' }, { id: 'item-2' }, { id: 'item-3' }, { id: 'item-4' }]

const { toggle, state } = useListSelection<ListItem, string>(list, { itemValue: (item) => item.id })

toggle('item-1')

console.log(state.value) // 'item-1'

toggle('item-1')

console.log(state.value) // undefined

---

Type Declarations

interface UseListSelectionOptions<TItem, TItemValue = TItem> {
  /**
   * Use ref has selection state
   */
  selectionModel?: Ref<TItem | TItem[]>
  mandatory?: MaybeRef<boolean>
  multiple?: MaybeRef<boolean>
  disabled?: MaybeRef<boolean>
  /**
   * In case of object array, allowe to select the raw data
   */
  selectRaw?: MaybeRef<boolean>
  /**
   * In case of object array, custom item value key/getter
   */
  itemValue?: string | (item: TItem) => string
}

interface UseListSelectionReturn<TItem, TItemValue = TItem> {
  toggle: (item: TItemValue) => void
  select: (item: TItemValue) => void
  isSelected: (value: TItemValue) => boolean
  state: Ref<TItem | TItem[]>
}

export declare function useListSelection<TItem, TItemValue = TItem>(
  list: MaybeRef<TItem[]>,
  options?: UseListSelectionOptions<TItem, TItemValue>,
): UseListSelectionReturn<TItem, TItemValue>

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.