From 46b444a3e0cc988c89bfde7442b42b1e82095fc9 Mon Sep 17 00:00:00 2001
From: John Puaoi Tech <jptech@johnpuaoi.tech>
Date: Tue, 18 Jul 2023 00:52:53 -1000
Subject: [PATCH] fix(Table): fixed row deletion bug on deselect (#425)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/4.data/1.table.md        |  4 +---
 src/runtime/components/data/Table.vue | 24 ++++++++++++++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md
index b7ea61bf7d..adf5a93996 100644
--- a/docs/content/4.data/1.table.md
+++ b/docs/content/4.data/1.table.md
@@ -327,9 +327,7 @@ const selected = ref([people[1]])
 You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values).
 ::
 
-### Clickable
-
-Add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument.
+You can alsso add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument.
 
 You can use this to navigate to a page, open a modal or even to select the row manually.
 
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 7acb1581c1..9750c2dfe1 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -4,7 +4,7 @@
       <thead :class="ui.thead">
         <tr :class="ui.tr.base">
           <th v-if="modelValue" scope="col" class="ps-4">
-            <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="selected = $event.target.checked ? rows : []" />
+            <UCheckbox :checked="indeterminate || selected.length === rows.length" :indeterminate="indeterminate" @change="onChange" />
           </th>
 
           <th v-for="(column, index) in columns" :key="index" scope="col" :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]">
@@ -210,6 +210,25 @@ export default defineComponent({
       attrs.onSelect(row)
     }
 
+    function selectAllRows () {
+      props.rows.forEach((row) => {
+        // If the row is already selected, don't select it again
+        if (selected.value.some((item) => compare(toRaw(item), toRaw(row)))) {
+          return
+        }
+
+        onSelect(row)
+      })
+    }
+
+    function onChange (event: any) {
+      if (event.target.checked) {
+        selectAllRows()
+      } else {
+        selected.value = []
+      }
+    }
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -225,7 +244,8 @@ export default defineComponent({
       emptyState,
       isSelected,
       onSort,
-      onSelect
+      onSelect,
+      onChange
     }
   }
 })