useSelection

This composable receives a list of items (Array of Objects) and returns various utility functions and properties that help to implement user selection on the given list.

	Product Name	Brand
	Citrus Splash 2x50mg THC Gummies	True North Collective
	Rabbit Hole 1 lb bag	MJ Verdant
	THC-A Crystalline Rings | GMO	Kola Farms

Selected products (0):

None selected

Import

import useSelection from '@leaflink/stash/useSelection';

Usage

The following code is for the <Table> example above, but useSelection can be used with anything that uses a list of items, such as a <select> element or a grid of <Card> components.

<script lang="ts" setup>
  import { ref } from 'vue';
  import Table from '@leaflink/stash/Table.vue';
  import TableHeaderCell from '@leaflink/stash/TableHeaderCell.vue';
  import TableHeaderRow from '@leaflink/stash/TableHeaderRow.vue';
  import TableCell from '@leaflink/stash/TableCell.vue';
  import TableRow from '@leaflink/stash/TableRow.vue';
  import { getProducts } from '../../src/composables/useSelection/fixtures';
  import useSelection from '@leaflink/stash/useSelection';
  import { getProducts } from '../../src/composables/useSelection/fixtures';

  const products = ref(getProducts());
  const {
    isSelected,
    selectToggle,
    selectToggleAll,
    allSelected,
    someSelected,
    selectedItems,
  } = useSelection({
    items: products,
  });
</script>

<template>
  <Table is-selectable>
    <template #head>
      <TableHeaderRow
        :all-rows-selected="allSelected"
        :some-rows-selected="someSelected"
        @select="selectToggleAll"
      >
        <TableHeaderCell>
          Product Name
        </TableHeaderCell>
        <TableHeaderCell>
          Brand
        </TableHeaderCell>
      </TableHeaderRow>
    </template>
    <template #body>
      <TableRow
        v-for="product in products"
        :key="product.id"
        :is-selected="isSelected(product)"
        @update:is-selected="selectToggle(product)"
      >
        <TableCell>
          {{ product.name }}
        </TableCell>
        <TableCell>
          {{ product.brand.name }}
        </TableCell>
      </TableRow>
    </template>
  </Table>
  <div class="tw-mt-6 col-span-full">
    <p>Selected products ({{ selectedItems.length }}):</p>
    <p v-if="!selectedItems.length" class="tw-ml-6">None selected</p>
    <ul v-else style="list-style-type: initial; padding-left: 2rem;">
      <li v-for="product in selectedItems">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

Disabled

The useSelection composable can receive a shouldDisable function to prevent specific items from having their selection state changed.

	Product Name	Brand
	Citrus Splash 2x50mg THC Gummies	True North Collective
	Rabbit Hole 1 lb bag	MJ Verdant
	THC-A Crystalline Rings | GMO	Kola Farms

Selected products (0):

None selected

• <TableHeaderRow>
  • use allNonDisabledSelected for the all-rows-selected prop
  • use someNonDisabledSelected for the some-rows-selected prop
• <TableRow>
  • use isSelectDisabled(item) for the is-select-disabled prop

const {
  allNonDisabledSelected,
  someNonDisabledSelected,
  isSelectDisabled,
  isSelected,
  selectToggle,
  selectToggleAll,
} = useSelection({
  items: products,
  shouldDisable: (item) => item.brand.id === 2151,
});

<TableHeaderRow
  :all-rows-selected="allNonDisabledSelected"
  :some-rows-selected="someNonDisabledSelected"
  @select="selectToggleAll"
>

<TableRow
  v-for="product in products"
  :key="product.id"
  :is-selected="isSelected(product)"
  :is-select-disabled="isSelectDisabled(product)"
  @update:is-selected="selectToggle(product)"
>

Preselected

The useSelection composable can receive a shouldPreselect function to select certain items by default.

	Product Name	Brand
	Citrus Splash 2x50mg THC Gummies	True North Collective
	Rabbit Hole 1 lb bag	MJ Verdant
	THC-A Crystalline Rings | GMO	Kola Farms

Selected products (1):

• Citrus Splash 2x50mg THC Gummies

const { isSelected, selectToggle, resetSelection } = useSelection({
  items: products,
  shouldPreselect: (item) => item.brand.id === 2151,
});

<TableRow
  v-for="product in products"
  :key="product.id"
  :is-selected="isSelected(product)"
  @update:is-selected="selectToggle(product)"
>

<Button @click="resetSelection()">
  Reset
</Button>