dev: hotfix refactor

+ merged pub/custom-ui and pub/base into my-ui - droped pub/custom-ui
2025-10-05 09:45:17 +07:00
parent 72627b8a37
commit 2da4e616ba
219 changed files with 474 additions and 474 deletions
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { DataTableLoader } from './type'
+import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/my-ui/data/types'
+import { Info } from 'lucide-vue-next'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
+
+const props = defineProps<{
+  skeletonSize?: number
+  rows: unknown[]
+  cols: Col[]
+  header: Th[][]
+  keys: string[]
+  funcParsed?: RecStrFuncUnknown
+  funcHtml?: RecStrFuncUnknown
+  funcComponent?: RecStrFuncComponent
+  selectMode?: 'single' | 'multiple'
+  modelValue?: any[] | any
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any[] | any): void
+}>()
+
+const getSkeletonSize = computed(() => {
+  return props.skeletonSize || 5
+})
+const loader = inject('table_data_loader') as DataTableLoader
+
+// local state utk selection
+const selected = ref<any[]>([])
+
+function toggleSelection(row: any) {
+  if (props.selectMode === 'single') {
+    selected.value = [row]
+    emit('update:modelValue', row)
+  } else {
+    const idx = selected.value.findIndex((r) => r === row)
+    if (idx >= 0) {
+      selected.value.splice(idx, 1)
+    } else {
+      selected.value.push(row)
+    }
+    emit('update:modelValue', [...selected.value])
+  }
+}
+
+function handleActionCellClick(event: Event, _cellRef: string) {
+  // Prevent event if clicked directly on the button/dropdown
+  const target = event.target as HTMLElement
+  if (target.closest('button') || target.closest('[role="button"]')) {
+    return
+  }
+
+  // Find the dropdown trigger button and click it
+  const cell = event.currentTarget as HTMLElement
+  const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
+  if (triggerButton) {
+    ;(triggerButton as HTMLButtonElement).click()
+  }
+}
+</script>
+
+<template>
+  <Table>
+    <TableHeader class="bg-gray-50 dark:bg-gray-800">
+      <TableRow>
+        <TableHead
+          v-for="(h, idx) in header[0]"
+          :key="`head-${idx}`"
+          class="border"
+          :style="{ width: cols[idx]?.width ? `${cols[idx].width}px` : undefined }"
+        >
+          {{ h.label }}
+        </TableHead>
+      </TableRow>
+    </TableHeader>
+
+    <TableBody v-if="loader.isTableLoading">
+      <!-- Loading state with 5 skeleton rows -->
+      <TableRow v-for="n in getSkeletonSize" :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 dark:bg-gray-700 text-muted-foreground" />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+    <TableBody v-else-if="rows.length === 0">
+      <TableRow>
+        <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>
+          </div>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+    <TableBody v-else>
+      <TableRow
+        v-for="(row, rowIndex) in rows"
+        :key="`row-${rowIndex}`"
+        :class="{
+          'bg-green-50': props.selectMode === 'single' && selected.includes(row),
+          'bg-blue-50': props.selectMode === 'multiple' && selected.includes(row),
+        }"
+        @click="toggleSelection(row)"
+      >
+        <!-- opsional: kalau mau tampilkan checkbox/radio di cell pertama -->
+        <TableCell v-if="props.selectMode">
+          <input
+            v-if="props.selectMode === 'single'"
+            type="radio"
+            :checked="selected.includes(row)"
+            @change="toggleSelection(row)"
+          />
+          <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">
+          <!-- existing cell renderer -->
+          <component
+            :is="funcComponent?.[key]?.(row, rowIndex).component"
+            v-if="funcComponent?.[key]"
+            :rec="row"
+            :idx="rowIndex"
+            v-bind="funcComponent[key]?.(row, rowIndex).props"
+          />
+          <template v-else>
+            <div v-if="funcHtml?.[key]" v-html="funcHtml?.[key]?.(row, rowIndex)"></div>
+            <template v-else>
+              {{ funcParsed?.[key]?.(row, rowIndex) ?? (row as any)[key] }}
+            </template>
+          </template>
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>
@@ -0,0 +1,4 @@
+export interface DataTableLoader {
+  isTableLoading: boolean
+  [key: string]: boolean
+}