⚡ enhance (pub): adjust data-table toggleSelection

app/components/pub/my-ui/data-table/data-table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isRef } from 'vue';
+import { isRef } from 'vue'
 import type { DataTableLoader } from '~/components/pub/my-ui/data/types'
 import type { Config } from './index'
 import { Info } from 'lucide-vue-next'
@@ -19,14 +19,21 @@ const loader = inject('table_data_loader') as DataTableLoader
 // local state utk selection
 const selected = ref<any[]>([])
 
-function toggleSelection(row: any) {
+function toggleSelection(row: any, event?: Event) {
-  if (props.selectMode === 'single') {
+  if (event) event.stopPropagation() // cegah event bubble ke TableRow
+
+  const isMultiple = props.selectMode === 'multi' || props.selectMode === 'multiple'
+
+  // gunakan pembanding berdasarkan id atau stringify data
+  const findIndex = selected.value.findIndex((r) => JSON.stringify(r) === JSON.stringify(row))
+
+  if (!isMultiple) {
+    // mode single
     selected.value = [row]
     emit('update:modelValue', row)
   } else {
-    const idx = selected.value.findIndex((r) => r === row)
+    if (findIndex >= 0) {
-    if (idx >= 0) {
+      selected.value.splice(findIndex, 1)
-      selected.value.splice(idx, 1)
     } else {
       selected.value.push(row)
     }
@@ -35,23 +42,22 @@ function toggleSelection(row: any) {
 }
 
 function deepFetch(data: Record<string, any>, key: string): string {
-  let result = '';
+  let result = ''
   const keys = key.split('.')
-  let lastVal: any = isRef(data) ? {...(data.value as any)} : data
+  let lastVal: any = isRef(data) ? { ...(data.value as any) } : data
   for (let i = 0; i < keys.length; i++) {
     let idx = keys[i] || ''
     if (typeof lastVal[idx] != undefined && lastVal[idx] != null) {
       if (i == keys.length - 1) {
-        return lastVal[idx];
+        return lastVal[idx]
       } else {
-        lastVal = isRef(lastVal[idx]) ? {...(lastVal[idx].value as any)} : lastVal[idx]
+        lastVal = isRef(lastVal[idx]) ? { ...(lastVal[idx].value as any) } : lastVal[idx]
       }
     }
   }
-  return result;
+  return result
 }
 
-
 function handleActionCellClick(event: Event, _cellRef: string) {
   // Prevent event if clicked directly on the button/dropdown
   const target = event.target as HTMLElement
@@ -70,7 +76,10 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
 <template>
   <Table>
-    <TableHeader v-if="headers" class="bg-gray-50 dark:bg-gray-800">
+    <TableHeader
+      v-if="headers"
+      class="bg-gray-50 dark:bg-gray-800"
+    >
       <TableRow v-for="(hr, hrIdx) in headers">
         <TableHead
           v-for="(th, idx) in headers[hrIdx]"
@@ -85,15 +94,25 @@ function handleActionCellClick(event: Event, _cellRef: string) {
 
     <TableBody v-if="loader?.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
-      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
+      <TableRow
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
+        v-for="n in getSkeletonSize"
-          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 dark:bg-gray-700 text-muted-foreground" />
+        :key="`skeleton-${n}`"
+      >
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-skel-${n}-${cellIndex}`"
+          class="border"
+        >
+          <Skeleton class="h-6 w-full animate-pulse bg-gray-100 text-muted-foreground dark:bg-gray-700" />
         </TableCell>
       </TableRow>
     </TableBody>
     <TableBody v-else-if="rows.length === 0">
       <TableRow>
-        <TableCell :colspan="keys.length" class="py-8 text-center">
+        <TableCell
+          :colspan="keys.length"
+          class="py-8 text-center"
+        >
           <div class="flex items-center justify-center">
             <Info class="size-5 text-muted-foreground" />
             <span class="ml-2">Tidak ada data tersedia</span>
@@ -106,8 +125,11 @@ function handleActionCellClick(event: Event, _cellRef: string) {
         v-for="(row, rowIndex) in rows"
         :key="`row-${rowIndex}`"
         :class="{
-          'bg-green-50': props.selectMode === 'single' && selected.includes(row),
+          'bg-green-50':
-          'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
+            props.selectMode === 'single' && selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
+          'bg-blue-50':
+            (props.selectMode === 'multi' || props.selectMode === 'multiple') &&
+            selected.some((r) => JSON.stringify(r) === JSON.stringify(row)),
         }"
         @click="toggleSelection(row)"
       >
@@ -116,14 +138,23 @@ function handleActionCellClick(event: Event, _cellRef: string) {
           <input
             v-if="props.selectMode === 'single'"
             type="radio"
-            :checked="selected.includes(row)"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
-            @change="toggleSelection(row)"
+            @click.stop="toggleSelection(row, $event)"
+          />
+          <input
+            v-else
+            type="checkbox"
+            :checked="selected.some((r) => JSON.stringify(r) === JSON.stringify(row))"
+            @click.stop="toggleSelection(row, $event)"
           />
-          <input v-else type="checkbox" :checked="selected.includes(row)" @change="toggleSelection(row)" />
         </TableCell>
 
         <!-- lanjut render cell normal -->
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-${rowIndex}-${cellIndex}`"
+          class="border"
+        >
           <!-- existing cell renderer -->
           <component
             :is="components?.[key]?.(row, rowIndex).component"
@@ -133,9 +164,12 @@ function handleActionCellClick(event: Event, _cellRef: string) {
             v-bind="components[key]?.(row, rowIndex).props"
           />
           <template v-else>
-            <div v-if="htmls?.[key]" v-html="htmls?.[key]?.(row, rowIndex)"></div>
+            <div
+              v-if="htmls?.[key]"
+              v-html="htmls?.[key]?.(row, rowIndex)"
+            ></div>
             <template v-else>
-              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch((row as any), key) }}
+              {{ parses?.[key]?.(row, rowIndex) ?? deepFetch(row as any, key) }}
             </template>
           </template>
         </TableCell>