@brumaombra/ui-vintage 0.8.1 → 0.9.0

package/src/components/blog/TableOfContents.vue

@@ -18,6 +18,7 @@ interface TocHeading {
     id: string;
     text: string;
     level: number;
+    number: string;
 }
 
 // Props
@@ -68,7 +69,8 @@ const headings = computed(() => {
             const currentHeading = {
                 id: link.id ?? '',
                 text: link.text ?? '',
-                level: link.depth ?? 0
+                level: link.depth ?? 0,
+                number: ''
             };
 
             // Recursively flatten the children links
@@ -77,13 +79,23 @@ const headings = computed(() => {
         });
     };
 
-    // Return the flattened list of headings
-    return flattenLinks(tocLinks).filter(heading => heading.id && heading.text && heading.level >= 2 && heading.level <= 3);
+    // Keep h2 and h3 headings and number the main sections
+    let sectionNumber = 0;
+    return flattenLinks(tocLinks)
+        .filter(heading => heading.id && heading.text && heading.level >= 2 && heading.level <= 3)
+        .map(heading => ({
+            ...heading,
+            number: heading.level === 2 ? String(++sectionNumber).padStart(2, '0') : ''
+        }));
 });
 
+// Number of main sections shown in the header
+const sectionCount = computed(() => headings.value.filter(heading => heading.level === 2).length);
+
 // Title and description for the table of contents
 const tocTitle = computed(() => t('uiVintage.blog.tableOfContents'));
 const tocDescription = computed(() => t('uiVintage.blog.tableOfContentsDescription'));
+const tocSections = computed(() => t('uiVintage.blog.tableOfContentsSections', { count: sectionCount.value }, sectionCount.value));
 
 // Prefer reduced motion for heading scroll
 const prefersReducedMotion = () => {
@@ -265,11 +277,14 @@ const scrollToHeading = (id: string, options: { closeMobile?: boolean } = {}) =>
             history.replaceState(null, '', `#${id}`);
         }
     };
-    restoreMobileTriggerFocus = false;
-
     if (options.closeMobile && isMobileOpen.value) {
+        // The heading takes focus after the scroll, so skip the trigger focus restore for this close only
+        restoreMobileTriggerFocus = false;
         mobileTriggerRef.value?.focus();
         isMobileOpen.value = false;
+        nextTick(() => {
+            restoreMobileTriggerFocus = true;
+        });
         window.clearTimeout(mobileScrollTimeout);
         mobileScrollTimeout = window.setTimeout(runScroll, MOBILE_CLOSE_SCROLL_DELAY_MS);
         return;
@@ -286,21 +301,19 @@ const openMobileToc = () => {
 // Get classes for heading button
 const getHeadingButtonClasses = (level: number, isActive: boolean) => {
     // Base classes for all titles
-    const baseClasses = 'block w-full text-left px-2.5 py-2 md:px-3 md:py-2 rounded border-l-2 border-transparent transition-all duration-200 hover:bg-accent cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 motion-reduce:transition-none';
-
-    // Add classes based on heading level
-    let levelClasses = '';
-    if (level === 2) {
-        levelClasses = 'text-foreground font-semibold text-xs md:text-sm';
-    } else {
-        levelClasses = 'text-muted-foreground pl-6! text-xs md:text-sm';
-    }
+    const baseClasses = 'flex w-full cursor-pointer gap-3 rounded-r py-1.5 pr-2 text-left text-xs outline-none transition-colors duration-200 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45 md:text-sm';
+
+    // Main sections carry a number, subsections align with their text
+    const levelClasses = level === 2 ? 'pl-4 font-medium' : 'pl-12 md:text-xs';
 
-    // Add classes if the heading is active
-    const activeClasses = isActive ? 'bg-accent border-l-primary text-foreground' : '';
+    // Add classes based on the active state
+    let stateClasses = level === 2 ? 'text-foreground/80' : 'text-muted-foreground';
+    if (isActive) {
+        stateClasses = 'font-semibold text-foreground';
+    }
 
     // Return combined classes
-    return [baseClasses, levelClasses, activeClasses];
+    return [baseClasses, levelClasses, stateClasses];
 };
 
 // Watch for changes in the headings and update the visible heading IDs and active heading ID accordingly
@@ -343,10 +356,22 @@ onUnmounted(() => {
         <!-- In-flow accordion; replaced by the mobile control after it scrolls away -->
         <div ref="inlineRef" class="mb-6" :aria-hidden="isDocked" :inert="isDocked">
             <Accordion :title="tocTitle" :icon="Bookmark01Icon">
-                <nav :aria-label="tocTitle" class="space-y-1">
-                    <button v-for="heading in headings" :key="`inline-${heading.id}`" type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id)">
-                        {{ heading.text }}
-                    </button>
+                <!-- Section count -->
+                <template #trailing>
+                    <span class="shrink-0 text-xs text-muted-foreground">{{ tocSections }}</span>
+                </template>
+
+                <nav :aria-label="tocTitle">
+                    <ol>
+                        <li v-for="heading in headings" :key="`inline-${heading.id}`" class="relative border-l border-border">
+                            <!-- Active marker on the track -->
+                            <span aria-hidden="true" :class="['absolute inset-y-1 -left-px w-0.5 origin-center bg-primary transition-transform duration-300 ease-spring', heading.id === activeHeadingId ? 'scale-y-100' : 'scale-y-0']" />
+                            <button type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id)">
+                                <span v-if="heading.number" :class="['w-5 shrink-0 text-[11px] leading-5 tabular-nums transition-colors', heading.id === activeHeadingId ? 'text-primary' : 'text-muted-foreground']">{{ heading.number }}</span>
+                                <span>{{ heading.text }}</span>
+                            </button>
+                        </li>
+                    </ol>
                 </nav>
             </Accordion>
         </div>
@@ -354,20 +379,20 @@ onUnmounted(() => {
         <Teleport to="body">
             <!-- Mobile persistent control -->
             <Transition name="toc-tab">
-                <button v-if="!isDesktop && isDocked" ref="mobileTriggerRef" type="button" class="fixed top-4/5 left-0 z-20 flex h-16 w-8 -translate-y-1/2 items-center justify-center rounded-r border border-l-0 border-(--border-light) bg-(--bg-card-light) text-(--text-secondary-light) transition-[background-color,color,transform] duration-200 hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) focus-visible:z-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 dark:border-(--border-dark) dark:bg-(--bg-card-dark) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark) motion-reduce:transition-none" :aria-label="t('uiVintage.blog.openTableOfContents')" :aria-expanded="isMobileOpen" aria-haspopup="dialog" aria-controls="toc-mobile-overlay" @click="openMobileToc">
-                    <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" aria-hidden="true" />
+                <button v-if="!isDesktop && isDocked" ref="mobileTriggerRef" type="button" class="group/toc-tab fixed top-4/5 left-0 z-20 flex h-16 w-7 -translate-y-1/2 items-center justify-center rounded-r border border-l-0 border-border bg-card text-primary shadow-elevated-sm transition-[width] duration-300 ease-out-expo hover:w-8 focus-visible:z-30 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45" :aria-label="t('uiVintage.blog.openTableOfContents')" :aria-expanded="isMobileOpen" aria-haspopup="dialog" aria-controls="toc-mobile-overlay" @click="openMobileToc">
+                    <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5 transition-[translate] duration-300 ease-spring group-hover/toc-tab:translate-x-0.5" aria-hidden="true" />
                 </button>
             </Transition>
 
             <!-- Mobile full-screen overlay -->
             <Sheet :open="isMobileOpen" @update:open="handleMobileOpenChange">
-                <SheetContent id="toc-mobile-overlay" side="left" class="flex h-full w-full max-w-none flex-col gap-0 border-0 bg-(--bg-card-light) p-0 dark:bg-(--bg-card-dark) sm:max-w-none">
-                    <SheetHeader class="flex-row items-center justify-between gap-4 border-b border-(--border-light) p-5 dark:border-(--border-dark)">
+                <SheetContent id="toc-mobile-overlay" side="left" class="flex h-full w-full max-w-none flex-col gap-0 border-0 bg-card p-0 data-[state=open]:[animation-duration:320ms] data-[state=open]:[animation-timing-function:var(--ease-out-expo)] sm:max-w-none">
+                    <SheetHeader class="flex-row items-center justify-between gap-4 border-b border-border p-5">
                         <!-- Mobile table of contents header -->
                         <div class="flex min-w-0 items-center gap-3">
                             <!-- Mobile table of contents icon -->
-                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded border border-(--border-light) bg-(--bg-card-light) dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
-                                <HugeiconsIcon :icon="Bookmark01Icon" class="size-4 text-muted-foreground" />
+                            <div class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+                                <HugeiconsIcon :icon="Bookmark01Icon" class="size-3.5" />
                             </div>
 
                             <!-- Mobile table of contents title and description -->
@@ -378,6 +403,9 @@ onUnmounted(() => {
                                 <SheetDescription class="sr-only">
                                     {{ tocDescription }}
                                 </SheetDescription>
+                                <p aria-hidden="true" class="text-xs text-muted-foreground">
+                                    {{ tocSections }}
+                                </p>
                             </div>
                         </div>
 
@@ -391,11 +419,16 @@ onUnmounted(() => {
 
                     <!-- Mobile table of contents navigation -->
                     <nav :aria-label="tocTitle" class="flex-1 overflow-y-auto p-5">
-                        <div class="space-y-1">
-                            <button v-for="heading in headings" :key="`mobile-${heading.id}`" type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id, { closeMobile: true })">
-                                {{ heading.text }}
-                            </button>
-                        </div>
+                        <ol>
+                            <li v-for="heading in headings" :key="`mobile-${heading.id}`" class="relative border-l border-border">
+                                <!-- Active marker on the track -->
+                                <span aria-hidden="true" :class="['absolute inset-y-1 -left-px w-0.5 bg-primary', heading.id === activeHeadingId ? 'opacity-100' : 'opacity-0']" />
+                                <button type="button" :class="getHeadingButtonClasses(heading.level, heading.id === activeHeadingId)" :aria-current="heading.id === activeHeadingId ? 'location' : undefined" @click="scrollToHeading(heading.id, { closeMobile: true })">
+                                    <span v-if="heading.number" :class="['w-5 shrink-0 text-[11px] leading-5 tabular-nums', heading.id === activeHeadingId ? 'text-primary' : 'text-muted-foreground']">{{ heading.number }}</span>
+                                    <span>{{ heading.text }}</span>
+                                </button>
+                            </li>
+                        </ol>
                     </nav>
                 </SheetContent>
             </Sheet>
@@ -404,14 +437,18 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.toc-tab-enter-active,
+.toc-tab-enter-active {
+    transition: opacity 0.3s var(--ease-out-expo), transform 0.32s var(--ease-out-expo);
+}
+
 .toc-tab-leave-active {
-    transition: opacity 0.25s ease;
+    transition: opacity 0.15s var(--ease-snappy), transform 0.15s var(--ease-snappy);
 }
 
 .toc-tab-enter-from,
 .toc-tab-leave-to {
     opacity: 0;
+    transform: translateX(-100%);
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/blog/index.ts

@@ -2,6 +2,7 @@ export { default as AllPostsSection } from './AllPostsSection.vue';
 export { default as BlogContentRenderer } from './BlogContentRenderer.vue';
 export { default as BlogFAQSection } from './BlogFAQSection.vue';
 export { default as BlogInfoSection } from './BlogInfoSection.vue';
+export { default as BlogPostHeader } from './BlogPostHeader.vue';
 export { default as BlogHeaderSection } from './BlogHeaderSection.vue';
 export { default as BlogSectionTitle } from './BlogSectionTitle.vue';
 export { default as BlogTagsSection } from './BlogTagsSection.vue';

package/src/components/card-grid/CardGrid.vue

@@ -52,8 +52,8 @@ const handleLoadMore = () => {
             <slot name="card" v-for="item in props.items" :item="item" :key="item.id" />
         </div>
 
-        <!-- Load more button -->
-        <div v-if="props.hasMore || (props.loadMoreBusy && props.items.length > 0)" class="flex justify-center mt-6">
+        <!-- Load more button (only under a grid, never under the loading or empty state) -->
+        <div v-if="!props.busy && props.items.length > 0 && (props.hasMore || props.loadMoreBusy)" class="flex justify-center mt-6">
             <LoadMoreButton :busy="props.loadMoreBusy"
                 @load-more="handleLoadMore" />
         </div>

package/src/components/confirm-dialog/ConfirmDialog.vue

@@ -11,6 +11,11 @@ const pendingAction = ref<'confirm' | 'cancel' | null>(null);
 
 // Run an action while showing a spinner on the button that triggered it
 const runAction = async (action: 'confirm' | 'cancel') => {
+    // Ignore clicks while another action is still running
+    if (pendingAction.value) {
+        return;
+    }
+
     pendingAction.value = action;
     try {
         await (action === 'confirm' ? confirmActiveDialog() : cancelActiveConfirmDialog());

package/src/components/confirm-dialog/confirm-dialog-state.ts

@@ -120,10 +120,10 @@ const clearCurrentConfirmDialog = () => {
     openNextConfirmDialog();
 };
 
-// Close the current dialog after the leave transition
-const scheduleCloseCurrentConfirmDialog = () => {
-    // Guard against missing or already closed dialogs
-    if (!confirmDialogState.current || !confirmDialogState.isOpen) return;
+// Close the current dialog after the leave transition (only if it is still the given request)
+const scheduleCloseCurrentConfirmDialog = (request: ConfirmDialogRequest) => {
+    // Guard against missing, replaced, or already closed dialogs
+    if (confirmDialogState.current !== request || !confirmDialogState.isOpen) return;
     confirmDialogState.isOpen = false;
 
     // Clear any existing close timer to avoid racing conditions
@@ -138,40 +138,40 @@ const scheduleCloseCurrentConfirmDialog = () => {
     }, DIALOG_CLOSE_DURATION_MS);
 };
 
-// Resolve the dialog as cancelled
+// Resolve the dialog as cancelled (ignored while a confirm or cancel handler is still running)
 export const closeConfirmDialog = () => {
     const current = confirmDialogState.current;
-    if (!current || !confirmDialogState.isOpen) return;
+    if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
     current.resolve(false);
-    scheduleCloseCurrentConfirmDialog();
+    scheduleCloseCurrentConfirmDialog(current);
 };
 
-// Run the cancel handler for the active dialog
-export const cancelActiveConfirmDialog = async () => {
+// Run a dialog handler, then resolve and close the dialog it belongs to
+const runConfirmDialogHandler = async (handler: (() => void | Promise<void>) | null, result: boolean) => {
     const current = confirmDialogState.current;
-    if (!current || confirmDialogState.busy) return;
+    if (!current || !confirmDialogState.isOpen || confirmDialogState.busy) return;
     confirmDialogState.busy = true;
 
     try {
-        await current.options.onCancel?.();
+        await handler?.();
+        current.resolve(result);
+    } catch (error) {
+        // Settle the caller's promise even when the handler throws, then surface the error
         current.resolve(false);
+        throw error;
     } finally {
-        scheduleCloseCurrentConfirmDialog();
+        scheduleCloseCurrentConfirmDialog(current);
     }
 };
 
+// Run the cancel handler for the active dialog
+export const cancelActiveConfirmDialog = async () => {
+    await runConfirmDialogHandler(confirmDialogState.current?.options.onCancel ?? null, false);
+};
+
 // Run the confirm handler for the active dialog
 export const confirmActiveDialog = async () => {
-    const current = confirmDialogState.current;
-    if (!current || confirmDialogState.busy) return;
-    confirmDialogState.busy = true;
-
-    try {
-        await current.options.onConfirm?.();
-        current.resolve(true);
-    } finally {
-        scheduleCloseCurrentConfirmDialog();
-    }
+    await runConfirmDialogHandler(confirmDialogState.current?.options.onConfirm ?? null, true);
 };
 
 // Queue and show a confirm dialog

package/src/components/content/BlogList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Cancel01Icon, CheckmarkCircle02Icon, CircleSmallIcon } from '@hugeicons/core-free-icons';
+import { Cancel01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { Card, CardContent } from '../ui/card';
+import { Card } from '../ui/card';
 
 // Props
 const props = withDefaults(defineProps<{
@@ -12,52 +12,40 @@ const props = withDefaults(defineProps<{
     variant: 'checkmark'
 });
 
-// Icon container classes
-const getIconContainerClasses = () => {
-    return 'flex items-center justify-center w-8 h-8 bg-card border border-border rounded mr-4 shrink-0';
+// Marker classes
+const getMarkerClasses = () => {
+    const toneClasses = {
+        checkmark: 'rounded bg-success/10 text-success',
+        cross: 'rounded bg-destructive/10 text-destructive',
+        numbered: 'text-[11px] font-semibold tabular-nums text-primary',
+        circle: ''
+    };
+    return ['mt-px flex size-5 shrink-0 items-center justify-center', toneClasses[props.variant]];
 };
 
-// Icon color classes
-const getIconClasses = () => {
-    return 'text-muted-foreground text-xs';
+// Format the item number with a leading zero
+const formatNumber = (index: number) => {
+    return String(index + 1).padStart(2, '0');
 };
 </script>
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card>
-            <CardContent class="gap-0">
-                <ul class="text-xs md:text-sm p-0! space-y-6!">
-                    <li v-for="(item, index) in props.items" :key="index" class="flex items-center">
-                        <!-- Circle -->
-                        <div v-if="props.variant === 'circle'" :class="getIconContainerClasses()">
-                            <HugeiconsIcon :icon="CircleSmallIcon" :class="getIconClasses()" />
-                        </div>
-
-                        <!-- Checkmark -->
-                        <div v-else-if="props.variant === 'checkmark'" :class="getIconContainerClasses()">
-                            <HugeiconsIcon :icon="CheckmarkCircle02Icon" :class="getIconClasses()" />
-                        </div>
-
-                        <!-- Numbered -->
-                        <div v-else-if="props.variant === 'numbered'" :class="getIconContainerClasses()">
-                            <span :class="[getIconClasses(), 'font-semibold']">{{ index + 1 }}</span>
-                        </div>
-
-                        <!-- Cross -->
-                        <div v-else-if="props.variant === 'cross'" :class="getIconContainerClasses()">
-                            <HugeiconsIcon :icon="Cancel01Icon" :class="getIconClasses()" />
-                        </div>
-
-                        <!-- Content -->
-                        <div class="flex-1">
-                            <div class="text-foreground leading-relaxed">
-                                {{ item }}
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </CardContent>
+        <Card data-aos="blur-up" class="gap-0! py-0! overflow-hidden">
+            <ul class="divide-y divide-border">
+                <li v-for="(item, index) in props.items" :key="index" data-aos="blur-up" :data-aos-delay="100 + index * 80" class="flex items-start gap-3 px-4 py-3.5 text-xs leading-relaxed text-foreground sm:px-5 md:text-sm">
+                    <!-- Marker -->
+                    <span aria-hidden="true" :class="getMarkerClasses()">
+                        <HugeiconsIcon v-if="props.variant === 'checkmark'" :icon="Tick02Icon" :stroke-width="2.5" class="size-3" />
+                        <HugeiconsIcon v-else-if="props.variant === 'cross'" :icon="Cancel01Icon" :stroke-width="2.5" class="size-3" />
+                        <template v-else-if="props.variant === 'numbered'">{{ formatNumber(index) }}</template>
+                        <span v-else class="size-1.5 rounded-full bg-primary" />
+                    </span>
+
+                    <!-- Content -->
+                    <span class="flex-1">{{ item }}</span>
+                </li>
+            </ul>
         </Card>
     </div>
-</template>
+</template>

package/src/components/content/BlogTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Card, CardContent } from '../ui/card';
+import { Card } from '../ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
 
 // Props
@@ -15,46 +15,42 @@ const props = withDefaults(defineProps<{
 
 // Header cell classes
 const getHeaderClasses = (colIndex: number) => {
-    const baseClasses = 'text-left font-semibold text-foreground';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-accent' : '';
+    const baseClasses = 'h-10 px-4 text-left text-[11px] font-semibold uppercase tracking-wider text-muted-foreground sm:px-5';
+    const highlightClass = props.highlightCol === colIndex ? 'text-primary shadow-[inset_0_-2px_0_var(--primary)]' : '';
     return [baseClasses, highlightClass];
 };
 
 // Body cell classes
 const getCellClasses = (colIndex: number) => {
-    const baseClasses = 'align-top text-foreground leading-relaxed whitespace-normal';
-    const firstColClass = colIndex === 0 ? 'font-semibold text-muted-foreground' : '';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-accent' : '';
+    const baseClasses = 'min-w-32 px-4 py-3 align-top leading-relaxed whitespace-normal sm:px-5';
+    const firstColClass = colIndex === 0 ? 'font-medium text-foreground' : 'text-muted-foreground';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-primary/5 text-foreground' : '';
     return [baseClasses, firstColClass, highlightClass];
 };
 </script>
 
 <template>
     <div class="not-prose my-6 sm:my-8">
-        <Card>
-            <CardContent>
-                <div class="w-full overflow-x-auto">
-                    <Table class="w-full text-sm text-left">
-                        <!-- Table header -->
-                        <TableHeader>
-                            <TableRow class="bg-transparent text-sm text-muted-foreground hover:bg-transparent">
-                                <TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
-                                    {{ header }}
-                                </TableHead>
-                            </TableRow>
-                        </TableHeader>
+        <Card data-aos="blur-up" class="gap-0! py-0! overflow-hidden">
+            <Table class="w-full text-left text-sm">
+                <!-- Table header -->
+                <TableHeader>
+                    <TableRow class="bg-surface hover:bg-surface">
+                        <TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
+                            {{ header }}
+                        </TableHead>
+                    </TableRow>
+                </TableHeader>
 
-                        <!-- Table body -->
-                        <TableBody>
-                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-muted-foreground hover:bg-transparent">
-                                <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
-                                    {{ cell }}
-                                </TableCell>
-                            </TableRow>
-                        </TableBody>
-                    </Table>
-                </div>
-            </CardContent>
+                <!-- Table body -->
+                <TableBody>
+                    <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="last:border-b-0 hover:bg-surface/60">
+                        <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
+                            {{ cell }}
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
         </Card>
     </div>
-</template>
+</template>