@ark-ui/vue/dist/components/collection/use-list-selection.js

A collection of unstyled, accessible UI components for Vue, utilizing state machines for seamless interaction.

import { Selection } from '@zag-js/collection';
import { computed, toValue, shallowRef, watch } from 'vue';

function useListSelection(props) {
  const resolvedProps = computed(() => {
    const {
      collection,
      selectionMode = "single",
      deselectable = true,
      initialSelectedValues = [],
      resetOnCollectionChange = false
    } = toValue(props);
    return { collection, selectionMode, deselectable, initialSelectedValues, resetOnCollectionChange };
  });
  const createSelection = (values = []) => {
    const { selectionMode, deselectable } = resolvedProps.value;
    const selection2 = new Selection(values);
    selection2.selectionMode = selectionMode;
    selection2.deselectable = deselectable;
    return selection2;
  };
  const init = () => {
    const { initialSelectedValues } = resolvedProps.value;
    return createSelection(initialSelectedValues);
  };
  const selection = shallowRef(init());
  watch(
    [() => resolvedProps.value.collection.getValues(), () => resolvedProps.value.resetOnCollectionChange],
    ([, resetOnCollectionChange]) => {
      if (resetOnCollectionChange) {
        selection.value = createSelection();
      }
    }
  );
  const selectedValues = computed(() => Array.from(selection.value));
  const isEmpty = computed(() => selection.value.isEmpty());
  const firstSelectedValue = computed(() => {
    const { collection } = resolvedProps.value;
    return selection.value.firstSelectedValue(collection);
  });
  const lastSelectedValue = computed(() => {
    const { collection } = resolvedProps.value;
    return selection.value.lastSelectedValue(collection);
  });
  return {
    selectedValues,
    isEmpty,
    firstSelectedValue,
    lastSelectedValue,
    isSelected: (value) => {
      return selection.value.isSelected(value);
    },
    isAllSelected: () => {
      const { collection } = resolvedProps.value;
      const allValues = collection.getValues();
      return allValues.length > 0 && allValues.every((value) => selection.value.isSelected(value));
    },
    isSomeSelected: () => {
      const { collection } = resolvedProps.value;
      const allValues = collection.getValues();
      return allValues.some((value) => selection.value.isSelected(value));
    },
    canSelect: (value) => {
      const { collection } = resolvedProps.value;
      return selection.value.canSelect(collection, value);
    },
    select: (value, forceToggle) => {
      const { collection } = resolvedProps.value;
      selection.value = selection.value.select(collection, value, forceToggle);
    },
    deselect: (value) => {
      selection.value = selection.value.deselect(value);
    },
    toggle: (value) => {
      const { collection } = resolvedProps.value;
      selection.value = selection.value.toggleSelection(collection, value);
    },
    replace: (value) => {
      const { collection } = resolvedProps.value;
      selection.value = selection.value.replaceSelection(collection, value);
    },
    extend: (anchorValue, targetValue) => {
      const { collection } = resolvedProps.value;
      selection.value = selection.value.extendSelection(collection, anchorValue, targetValue);
    },
    setSelectedValues: (values) => {
      selection.value = selection.value.setSelection(values);
    },
    clear: () => {
      selection.value = selection.value.clearSelection();
    },
    resetSelection: () => {
      selection.value = createSelection();
    }
  };
}

export { useListSelection };