@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 { computed, shallowRef, toValue, watch } from "vue";
import { Selection } from "@zag-js/collection";
//#region src/components/collection/use-list-selection.ts
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 selection = new Selection(values);
		selection.selectionMode = selectionMode;
		selection.deselectable = deselectable;
		return selection;
	};
	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();
	});
	return {
		selectedValues: computed(() => Array.from(selection.value)),
		isEmpty: computed(() => selection.value.isEmpty()),
		firstSelectedValue: computed(() => {
			const { collection } = resolvedProps.value;
			return selection.value.firstSelectedValue(collection);
		}),
		lastSelectedValue: computed(() => {
			const { collection } = resolvedProps.value;
			return selection.value.lastSelectedValue(collection);
		}),
		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;
			return collection.getValues().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();
		}
	};
}
//#endregion
export { useListSelection };