Updating checkbox functionality

Author: webdevnerdstuff

src/plugin/slots/HeadersSlot.vue

@@ -24,11 +24,13 @@
 				:style="cellStyles(column, true)"
 			>
 				<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` -->
@@ -111,17 +113,28 @@ const props = withDefaults(defineProps<HeaderSlotProps>(), {
 	showSelect: false,
 });
 
+const columns = computed<Column[]>(() => props.slotProps.columns);
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));
+const isAllSelected = ref<boolean>(false);
+const sortAscIcon = ref(props.sortAscIcon);
+const tableModelValue = computed(() => props.tableModelValue);
 const theme = useTheme();
-const isAllSelected = ref<boolean>(props.slotProps.allRowsSelected);
 
-const allSelected = computed(() => props.slotProps.allRowsSelected || isAllSelected.value);
-const columns = computed<Column[]>(() => props.slotProps.columns);
-const someSelected = computed(() => props.slotProps.someSelected);
-const isIndeterminate = computed(() => someSelected.value && !props.slotProps.allRowsSelected);
-const sortAscIcon = ref(props.sortAscIcon);
+
+const items = ref(props.items);
+const allSelectable = ref();
 
 
+watch(() => props.items, (newItems) => {
+	items.value = newItems;
+
+	allSelectable.value = newItems?.filter(item => item.selectable) ?? [];
+
+	allSelectable.value = newItems?.filter(item => {
+		return item.selectable !== false;
+	});
+});
+
 // -------------------------------------------------- Header Row //
 const headerRowClasses = computed<object>(() => {
 	return useHeaderRowClasses({ level: props.level });
@@ -154,21 +167,31 @@ const cellStyles = (column: { width?: string | number; }, dataTableExpand = fals
 
 
 // -------------------------------------------------- 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 });
 });

src/plugin/slots/ItemSlot.vue

@@ -39,10 +39,11 @@
 					name="item.data-table-select"
 				/>
 				<v-checkbox
-					v-model="allSelected"
 					class="d-flex v-simple-checkbox"
 					:density="density"
-					@click="emitClickRowCheckbox({
+					:disabled="item.raw.selectable === false && itemSelectable === 'selectable'"
+					:model-value="slotProps.isSelected([item])"
+					@click.stop="emitClickRowCheckbox({
 						columns,
 						index,
 						item,
@@ -54,7 +55,7 @@
 			<!-- Column Render `data-table-expand` -->
 			<td
 				v-else-if="column.key === 'data-table-expand' || (column.key === 'data-table-expand' && showExpand)
-				"
+					"
 				:class="cellClasses(column)"
 				:colspan="column.colspan || 1"
 			>
@@ -129,6 +130,7 @@ const item = computed(() => props.slotProps.item);
 const currentLevel = computed(() => props.slotProps.level);
 const toggleExpand = computed(() => props.slotProps.toggleExpand);
 const toggleSelect = computed(() => props.slotProps.toggleSelect);
+const itemSelectable = computed(() => props.itemSelectable);
 
 
 // -------------------------------------------------- Row //
@@ -176,18 +178,10 @@ function drilldownEvent(data: DrilldownEvent): void {
 
 
 // -------------------------------------------------- Select //
-const allSelected = ref<boolean>(false);
-
-watch(() => props.slotProps.allRowsSelected, () => {
-	allSelected.value = props.slotProps.allRowsSelected;
-});
-
 function emitClickRowCheckbox(data: ClickRowCheckboxEvent): void {
-	const { item, level, toggleSelect } = data as ClickRowCheckboxEvent;
+	const { item, toggleSelect } = data as ClickRowCheckboxEvent;
 
-	if (level === props.level) {
-		toggleSelect(item);
-	}
+	toggleSelect(item);
 
 	emit('click:row:checkbox', item);
 }