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

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

import { createListCollection } from "./list-collection.js";
import { computed, ref, toValue } from "vue";
//#region src/components/collection/use-list-collection.ts
function useListCollection(props) {
	const resolvedProps = computed(() => {
		const { initialItems = [], filter, limit, ...collectionOptions } = toValue(props);
		return [{
			initialItems,
			filter,
			limit
		}, collectionOptions];
	});
	const init = () => {
		const { initialItems } = resolvedProps.value[0];
		return initialItems;
	};
	const items = ref(init());
	const filterText = ref("");
	const setItems = (newItems) => {
		items.value = newItems;
		filterText.value = "";
	};
	const create = (itemsToCreate) => {
		const [, collectionOptions] = resolvedProps.value;
		return createListCollection({
			...collectionOptions,
			items: itemsToCreate
		});
	};
	return {
		collection: computed(() => {
			const [localProps, collectionOptions] = resolvedProps.value;
			let activeItems = items.value;
			const filter = localProps.filter;
			if (filterText.value && filter) activeItems = create(items.value).filter((itemString, _index, item) => filter(itemString, filterText.value, item)).items;
			const limitedItems = localProps.limit == null ? activeItems : activeItems.slice(0, localProps.limit);
			return createListCollection({
				...collectionOptions,
				items: limitedItems
			});
		}),
		filter: (inputValue = "") => {
			filterText.value = inputValue;
		},
		set: (newItems) => {
			setItems(newItems);
		},
		reset: () => {
			const [localProps] = resolvedProps.value;
			setItems(localProps.initialItems);
		},
		clear: () => {
			setItems([]);
		},
		insert: (index, ...itemsToInsert) => {
			const newItems = create(items.value).insert(index, ...itemsToInsert).items;
			setItems(newItems);
		},
		insertBefore: (value, ...itemsToInsert) => {
			const newItems = create(items.value).insertBefore(value, ...itemsToInsert).items;
			setItems(newItems);
		},
		insertAfter: (value, ...itemsToInsert) => {
			const newItems = create(items.value).insertAfter(value, ...itemsToInsert).items;
			setItems(newItems);
		},
		remove: (...itemOrValues) => {
			const newItems = create(items.value).remove(...itemOrValues).items;
			setItems(newItems);
		},
		move: (value, to) => {
			const newItems = create(items.value).move(value, to).items;
			setItems(newItems);
		},
		moveBefore: (value, ...values) => {
			const newItems = create(items.value).moveBefore(value, ...values).items;
			setItems(newItems);
		},
		moveAfter: (value, ...values) => {
			const newItems = create(items.value).moveAfter(value, ...values).items;
			setItems(newItems);
		},
		reorder: (from, to) => {
			const newItems = create(items.value).reorder(from, to).items;
			setItems(newItems);
		},
		append: (...itemsToAppend) => {
			const newItems = create(items.value).append(...itemsToAppend).items;
			setItems(newItems);
		},
		upsert: (value, item, mode = "append") => {
			const newItems = create(items.value).upsert(value, item, mode).items;
			setItems(newItems);
		},
		prepend: (...itemsToPrepend) => {
			const newItems = create(items.value).prepend(...itemsToPrepend).items;
			setItems(newItems);
		},
		update: (value, item) => {
			const newItems = create(items.value).update(value, item).items;
			setItems(newItems);
		}
	};
}
//#endregion
export { useListCollection };