Handle selection within generic CardList

VueJS generics are kinda insane. And awesome.

ts/components/ReviewContactColumnList.vue

@@ -29,7 +29,12 @@
 </style>
 
 <template>
-	<ListCard :items="items" :loading="loading">
+	<ListCard
+		:items="items"
+		:loading="loading"
+		selection-mode="single"
+		@selection-change="handleSelectionChange"
+	>
 		<!-- Filters Slot -->
 		<template #filters="{ applyFilter, clearFilters, activeFilters }">
 			<div class="user-filters">
@@ -50,11 +55,11 @@
 		</template>
 
 		<!-- Item Slot -->
-		<template #item="{ item }">
+		<template #item="{ item, isSelected, toggleSelection }">
 			<ListCardContact
 				:contact="item"
-				@click="handleContactClick(item)"
+				@click="toggleSelection"
-				:isSelected="false"
+				:is-selected="isSelected"
 			/>
 		</template>
 	</ListCard>
@@ -96,6 +101,10 @@ const handleClearFilters = (clearFilters: () => void) => {
 const handleContactClick = (contact: any) => {
 	console.log("Clicked contact:", contact);
 };
+const handleSelectionChange = (selectedContacts: Contact[]) => {
+	console.log("Selected contacts:", selectedContacts);
+	// Do something with the selected contacts
+};
 
 const items = computed((): Contact[] => {
 	if (props.contacts) {

ts/components/layout/ListCard.vue

@@ -34,7 +34,13 @@
 					</button>
 				</div>
 				<div v-else v-for="item in filteredItems" :key="item.id">
-					<slot name="item" :item="item" :index="item.id"></slot>
+					<slot
+						name="item"
+						:item="item"
+						:index="item.id"
+						:is-selected="isSelected(item)"
+						:toggle-selection="() => toggleSelection(item)"
+					></slot>
 				</div>
 			</div>
 		</div>
@@ -47,11 +53,13 @@ interface Props {
 	items: T[];
 	loading?: boolean;
 	itemKey?: keyof T | ((item: T) => string | number);
+	selectionMode?: "single" | "multiple" | "none";
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	loading: false,
 	itemKey: "id",
+	selectionMode: "none",
 });
 
 defineSlots<{
@@ -60,12 +68,22 @@ defineSlots<{
 		clearFilters: () => void;
 		activeFilters: number;
 	}): any;
-	item(props: { item: T; index: number }): any;
+	item(props: {
+		item: T;
+		index: string | number;
+		isSelected: boolean;
+		toggleSelection: () => void;
+	}): any;
 	footer(props: { total: number }): any;
 }>();
 
 // State
+const emit = defineEmits<{
+	"update:selectedItems": [items: T[]];
+	"selection-change": [items: T[]];
+}>();
 const filterFunctions = ref<Array<(item: T) => boolean>>([]);
+const selectedItemKeys = ref<Set<string | number>>(new Set());
 
 // Computed
 const filteredItems = computed(() => {
@@ -78,6 +96,11 @@ const filteredItems = computed(() => {
 	);
 });
 const activeFilters = computed(() => filterFunctions.value.length);
+const selectedItems = computed(() => {
+	return props.items.filter((item) =>
+		selectedItemKeys.value.has(getItemKey(item)),
+	);
+});
 
 // Methods
 const applyFilter = (filterFn: (item: T) => boolean) => {
@@ -95,4 +118,43 @@ const getItemKey = (item: T): string | number => {
 	}
 	return item[props.itemKey] as string | number;
 };
+
+const isSelected = (item: T): boolean => {
+	return selectedItemKeys.value.has(getItemKey(item));
+};
+
+const toggleSelection = (item: T) => {
+	if (props.selectionMode === "none") return;
+
+	const key = getItemKey(item);
+
+	if (props.selectionMode === "single") {
+		if (selectedItemKeys.value.has(key)) {
+			selectedItemKeys.value.clear();
+		} else {
+			selectedItemKeys.value.clear();
+			selectedItemKeys.value.add(key);
+		}
+	} else {
+		if (selectedItemKeys.value.has(key)) {
+			selectedItemKeys.value.delete(key);
+		} else {
+			selectedItemKeys.value.add(key);
+		}
+	}
+
+	emit("update:selectedItems", selectedItems.value);
+	emit("selection-change", selectedItems.value);
+};
+
+const clearSelection = () => {
+	selectedItemKeys.value.clear();
+	emit("update:selectedItems", []);
+	emit("selection-change", []);
+};
+
+defineExpose({
+	clearSelection,
+	selectedItems,
+});
 </script>