From ac323c4cccd930f2cd8c1f54b325bd509acd40bf Mon Sep 17 00:00:00 2001
From: kyyy <60952577+rdjanuar@users.noreply.github.com>
Date: Sun, 10 Nov 2024 00:48:52 +0700
Subject: [PATCH] feat(Table): add custom `@select:all` event (#2581)

---
 docs/content/2.components/table.md    | 36 +++++++++++++++++++++++++++
 src/runtime/components/data/Table.vue |  3 ++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md
index f107ea3e..f6d485de 100644
--- a/docs/content/2.components/table.md
+++ b/docs/content/2.components/table.md
@@ -285,6 +285,42 @@ componentProps:
 ---
 ::
 
+
+#### Event Selectable
+The `UTable` component provides two key events for handling row selection:
+
+##### ***@select:all***
+The `@select:all` event is emitted when the header checkbox in a selectable table is toggled. This event returns a boolean value indicating whether all rows are selected (true) or deselected (false).
+
+##### ***@update:modelValue***
+The `@update:modelValue` event is emitted whenever the selection state changes, including both individual row selection and bulk selection. This event returns an array containing the currently selected rows.
+
+Here's how to implement both events:
+
+```vue
+<script setup lang="ts">
+const selected = ref([])
+
+const onHandleSelectAll = (isSelected: boolean) => {
+  console.log('All rows selected:', isSelected)
+}
+
+const onUpdateSelection = (selectedRows: any[]) => {
+  console.log('Currently selected rows:', selectedRows)
+}
+</script>
+
+<template>
+  <UTable 
+    v-model="selected" 
+    :rows="people" 
+    @select:all="onHandleSelectAll"
+    @update:modelValue="onUpdateSelection"
+  />
+</template>
+```
+
+
 #### Single Select Mode
 Control how the select function allows only one row to be selected at a time.
 
diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index cf5dc076..7d666348 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -269,7 +269,7 @@ export default defineComponent({
       default: false
     }
   },
-  emits: ['update:modelValue', 'update:sort', 'update:expand'],
+  emits: ['update:modelValue', 'update:sort', 'update:expand', 'select:all'],
   setup(props, { emit, attrs: $attrs }) {
     const { ui, attrs } = useUI('table', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -407,6 +407,7 @@ export default defineComponent({
       } else {
         selected.value = []
       }
+      emit('select:all', checked)
     }
 
     function onChangeCheckbox(checked: boolean, row: TableRow) {