Updating checkbox functionality for tfoot

Author: webdevnerdstuff

src/plugin/VDrilldownTable.vue

@@ -64,7 +64,6 @@
 		<template #[`headers`]="props">
 			<HeadersSlot
 				:key="level"
-				:all-selected="props.allSelected"
 				:colors="loadedDrilldown.colors"
 				:density="loadedDrilldown.density"
 				:items="loadedDrilldown.items"
@@ -151,7 +150,6 @@
 			/>
 		</template>
 
-
 		<template
 			v-if="slots['no-data']"
 			#no-data
@@ -265,9 +263,12 @@
 				:colors="loadedDrilldown.colors || null"
 				:density="loadedDrilldown.density"
 				:footers="loadedDrilldown.footers || []"
+				:items="loadedDrilldown.items"
 				:level="loadedDrilldown.level"
+				:select-strategy="loadedDrilldown.selectStrategy"
 				:show-select="loadedDrilldown.showSelect"
 				:slot-props="{ ...props }"
+				:table-model-value="loadedDrilldown.modelValue"
 			>
 				<!-- Pass on all scoped slots -->
 				<template

src/plugin/slots/HeadersSlot.vue

@@ -113,18 +113,16 @@ const props = withDefaults(defineProps<HeaderSlotProps>(), {
 	showSelect: false,
 });
 
+const allSelectable = ref();
 const columns = computed<Column[]>(() => props.slotProps.columns);
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
 const isAllSelected = ref<boolean>(false);
+const items = ref(props.items);
 const sortAscIcon = ref(props.sortAscIcon);
 const tableModelValue = computed(() => props.tableModelValue);
 const theme = useTheme();
 
 
-const items = ref(props.items);
-const allSelectable = ref();
-
-
 watch(() => props.items, (newItems) => {
 	items.value = newItems;
 
@@ -135,6 +133,7 @@ watch(() => props.items, (newItems) => {
 	});
 });
 
+
 // -------------------------------------------------- Header Row //
 const headerRowClasses = computed<object>(() => {
 	return useHeaderRowClasses({ level: props.level });

src/plugin/slots/TfootSlot.vue

@@ -28,11 +28,13 @@
 					:style="cellStyles"
 				>
 					<v-checkbox
-						v-model="isAllSelected"
+						v-if="selectStrategy !== 'single'"
 						:class="checkBoxClasses"
 						:density="density"
 						:focused="false"
 						:indeterminate="isIndeterminate"
+						:model-value="isAllSelected"
+						@update:modelValue="selectAllBoxes"
 					></v-checkbox>
 				</th>
 				<!-- Column Render `data-table-expand` -->
@@ -92,19 +94,30 @@ const emit = defineEmits([
 
 const props = withDefaults(defineProps<TFootSlotProps>(), {});
 
+const allSelectable = ref();
 const theme = useTheme();
 const isAllSelected = ref<boolean>(props.slotProps.allRowsSelected);
+const items = ref(props.items);
+const tableModelValue = computed(() => props.tableModelValue);
 
-const allSelected = computed(() => props.slotProps.allRowsSelected || isAllSelected.value);
 const columns = computed<Column[] | Props['footers']>(() => {
 	if (props.footers.length) {
 		return props.footers;
 	}
 
 	return props.slotProps.columns;
 });
-const someSelected = computed(() => props.slotProps.someSelected);
-const isIndeterminate = computed(() => someSelected.value && !props.slotProps.allRowsSelected);
+
+
+watch(() => props.items, (newItems) => {
+	items.value = newItems;
+
+	allSelectable.value = newItems?.filter(item => item.selectable) ?? [];
+
+	allSelectable.value = newItems?.filter(item => {
+		return item.selectable !== false;
+	});
+});
 
 
 // -------------------------------------------------- Tfoot //
@@ -143,21 +156,31 @@ const cellStyles = computed<CSSProperties>(() => {
 
 
 // -------------------------------------------------- Select //
-watch(isAllSelected, (newVal) => {
-	props.slotProps.selectAll(newVal);
-	emit('click:selectAll', isAllSelected.value);
+const isIndeterminate = computed(() => {
+	if (props.slotProps.allSelected || tableModelValue?.value?.length === 0) {
+		return false;
+	}
+
+	return true;
 });
 
-watch(allSelected, (newVal) => {
-	isAllSelected.value = newVal;
+watch(() => props.slotProps.allSelected, (newAllSelected) => {
+	isAllSelected.value = newAllSelected as boolean;
 });
 
-watch(someSelected, (newVal) => {
-	if (!newVal) {
-		isAllSelected.value = false;
+watch(() => props.slotProps.someSelected, () => {
+	if (props.slotProps.allSelected) {
+		return false;
 	}
 });
 
+function selectAllBoxes() {
+	isAllSelected.value = !isAllSelected.value;
+	props.slotProps.selectAll(isAllSelected.value);
+
+	emit('click:selectAll', isAllSelected.value);
+}
+
 const checkBoxClasses = computed<object>(() => {
 	return useCheckBoxClasses({ level: props.level });
 });