@brumaombra/ui-vintage 0.7.8 → 0.7.9

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

@@ -1,8 +1,9 @@
-import { h, markRaw, reactive, render } from "vue";
-import type { ButtonVariants } from "../ui/button";
+import { h, markRaw, reactive, render } from 'vue';
+import type { ButtonVariants } from '../ui/button';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
-export type DialogButtonVariant = NonNullable<ButtonVariants["variant"]>;
-export type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
+export type DialogButtonVariant = NonNullable<ButtonVariants['variant']>;
+export type { HugeiconsIconDefinition };
 
 export interface ShowConfirmDialogOptions {
     title?: string;
@@ -20,7 +21,7 @@ export interface ShowConfirmDialogOptions {
 
 interface ConfirmDialogRequest {
     id: number;
-    options: Required<Omit<ShowConfirmDialogOptions, "icon" | "confirmButtonIcon" | "cancelButtonIcon" | "onConfirm" | "onCancel">> & {
+    options: Required<Omit<ShowConfirmDialogOptions, 'icon' | 'confirmButtonIcon' | 'cancelButtonIcon' | 'onConfirm' | 'onCancel'>> & {
         icon: HugeiconsIconDefinition | null;
         confirmButtonIcon: HugeiconsIconDefinition | null;
         cancelButtonIcon: HugeiconsIconDefinition | null;
@@ -42,7 +43,7 @@ const DIALOG_CLOSE_DURATION_MS = 300;
 let closeTimer: ReturnType<typeof setTimeout> | null = null;
 let confirmDialogMountPromise: Promise<void> | null = null;
 
-const CONFIRM_DIALOG_ROOT_ID = "ui-vintage-confirm-dialog-root";
+const CONFIRM_DIALOG_ROOT_ID = 'ui-vintage-confirm-dialog-root';
 
 // Shared confirm dialog state
 export const confirmDialogState: ConfirmDialogState = reactive({
@@ -57,7 +58,7 @@ const markIcon = (icon: HugeiconsIconDefinition | null | undefined) => icon ? ma
 // Mount the dialog once on demand
 const ensureConfirmDialogMounted = () => {
     // Skip mounting during SSR
-    if (typeof document === "undefined") {
+    if (typeof document === 'undefined') {
         return Promise.resolve();
     }
 
@@ -75,7 +76,7 @@ const ensureConfirmDialogMounted = () => {
     // Start the lazy mount
     confirmDialogMountPromise = (async () => {
         // Load the component only when needed
-        const { default: ConfirmDialog } = await import("./ConfirmDialog.vue");
+        const { default: ConfirmDialog } = await import('./ConfirmDialog.vue');
 
         // Guard against a concurrent mount
         if (document.getElementById(CONFIRM_DIALOG_ROOT_ID)) {
@@ -83,7 +84,7 @@ const ensureConfirmDialogMounted = () => {
         }
 
         // Create the host element and render the component
-        const container = document.createElement("div");
+        const container = document.createElement('div');
         container.id = CONFIRM_DIALOG_ROOT_ID;
         document.body.appendChild(container);
         render(h(ConfirmDialog), container);
@@ -182,12 +183,12 @@ export const showConfirmDialog = (options: ShowConfirmDialogOptions) => {
         enqueueConfirmDialog({
             id: nextConfirmDialogId += 1,
             options: {
-                title: options.title ?? "Confirm",
+                title: options.title ?? 'Confirm',
                 message: options.message,
-                confirmText: options.confirmText ?? "Confirm",
-                cancelText: options.cancelText ?? "Cancel",
-                confirmButtonType: options.confirmButtonType ?? "primary",
-                cancelButtonType: options.cancelButtonType ?? "secondary",
+                confirmText: options.confirmText ?? 'Confirm',
+                cancelText: options.cancelText ?? 'Cancel',
+                confirmButtonType: options.confirmButtonType ?? 'primary',
+                cancelButtonType: options.cancelButtonType ?? 'secondary',
                 icon: markIcon(options.icon),
                 confirmButtonIcon: markIcon(options.confirmButtonIcon),
                 cancelButtonIcon: markIcon(options.cancelButtonIcon),

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

@@ -1,12 +1,3 @@
-export { default as ConfirmDialog } from "./ConfirmDialog.vue";
-export {
-    cancelActiveConfirmDialog,
-    closeConfirmDialog,
-    confirmActiveDialog,
-    confirmDialogState,
-    showConfirmDialog
-} from "./confirm-dialog-state";
-export type {
-    DialogButtonVariant,
-    ShowConfirmDialogOptions
-} from "./confirm-dialog-state";
+export { default as ConfirmDialog } from './ConfirmDialog.vue';
+export { cancelActiveConfirmDialog, closeConfirmDialog, confirmActiveDialog, confirmDialogState, showConfirmDialog } from './confirm-dialog-state';
+export type { DialogButtonVariant, ShowConfirmDialogOptions } from './confirm-dialog-state';

package/src/components/content/BlogList.vue

@@ -1,22 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import { Cancel01Icon, CheckmarkCircle02Icon, CircleSmallIcon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
 
 // Props
-const props = defineProps({
-    items: { type: Array, default: () => [] },
-    variant: { type: String, default: 'checkmark', validator: value => ['circle', 'checkmark', 'numbered', 'cross'].includes(value) }
+const props = withDefaults(defineProps<{
+    items?: string[];
+    variant?: 'circle' | 'checkmark' | 'numbered' | 'cross';
+}>(), {
+    items: () => [],
+    variant: 'checkmark'
 });
 
 // Icon container classes
 const getIconContainerClasses = () => {
-    return 'flex items-center justify-center w-8 h-8 bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] rounded mr-4 flex-shrink-0';
+    return 'flex items-center justify-center w-8 h-8 bg-(--bg-card-light) dark:bg-(--bg-card-dark) border border-(--border-light) dark:border-(--border-dark) rounded mr-4 shrink-0';
 };
 
 // Icon color classes
 const getIconClasses = () => {
-    return 'text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] text-xs';
+    return 'text-(--text-secondary-light) dark:text-(--text-secondary-dark) text-xs';
 };
 </script>
 
@@ -24,7 +27,7 @@ const getIconClasses = () => {
     <div class="not-prose my-6 sm:my-12">
         <Card>
             <CardContent class="gap-0">
-                <ul class="text-xs md:text-sm !p-0 !space-y-6">
+                <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()">
@@ -48,7 +51,7 @@ const getIconClasses = () => {
 
                         <!-- Content -->
                         <div class="flex-1">
-                            <div class="text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] leading-relaxed">
+                            <div class="text-(--text-primary-light) dark:text-(--text-primary-dark) leading-relaxed">
                                 {{ item }}
                             </div>
                         </div>

package/src/components/content/BlogTable.vue

@@ -1,26 +1,30 @@
-<script setup>
+<script setup lang="ts">
 import { Card, CardContent } from '../ui/card';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
 
 // Props
-const props = defineProps({
-    headers: { type: Array, default: () => [] },
-    rows: { type: Array, default: () => [] },
-    highlightCol: { type: Number, default: -1 }
+const props = withDefaults(defineProps<{
+    headers?: string[];
+    rows?: string[][];
+    highlightCol?: number;
+}>(), {
+    headers: () => [],
+    rows: () => [],
+    highlightCol: -1
 });
 
 // Header cell classes
-const getHeaderClasses = colIndex => {
-    const baseClasses = 'text-left font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-[var(--bg-selected-light)] dark:bg-[var(--bg-selected-dark)]' : '';
+const getHeaderClasses = (colIndex: number) => {
+    const baseClasses = 'text-left font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-(--bg-selected-light) dark:bg-(--bg-selected-dark)' : '';
     return [baseClasses, highlightClass];
 };
 
 // Body cell classes
-const getCellClasses = colIndex => {
-    const baseClasses = 'align-top text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] leading-relaxed whitespace-normal';
-    const firstColClass = colIndex === 0 ? 'font-semibold text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]' : '';
-    const highlightClass = props.highlightCol === colIndex ? 'bg-[var(--bg-selected-light)] dark:bg-[var(--bg-selected-dark)]' : '';
+const getCellClasses = (colIndex: number) => {
+    const baseClasses = 'align-top text-(--text-primary-light) dark:text-(--text-primary-dark) leading-relaxed whitespace-normal';
+    const firstColClass = colIndex === 0 ? 'font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)' : '';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-(--bg-selected-light) dark:bg-(--bg-selected-dark)' : '';
     return [baseClasses, firstColClass, highlightClass];
 };
 </script>
@@ -33,7 +37,7 @@ const getCellClasses = colIndex => {
                     <Table class="w-full text-sm text-left">
                         <!-- Table header -->
                         <TableHeader>
-                            <TableRow class="bg-transparent text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] hover:bg-transparent">
+                            <TableRow class="bg-transparent text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark) hover:bg-transparent">
                                 <TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
                                     {{ header }}
                                 </TableHead>
@@ -42,7 +46,7 @@ const getCellClasses = colIndex => {
 
                         <!-- Table body -->
                         <TableBody>
-                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] hover:bg-transparent">
+                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-(--text-secondary-light) dark:text-(--text-secondary-dark) hover:bg-transparent">
                                 <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
                                     {{ cell }}
                                 </TableCell>

package/src/components/content/ProseHr.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import { ChartLineData02Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    icon: { type: Object, default: () => ChartLineData02Icon }
+const props = withDefaults(defineProps<{
+    icon?: HugeiconsIconDefinition;
+}>(), {
+    icon: () => ChartLineData02Icon
 });
 </script>
 
@@ -12,15 +15,15 @@ const props = defineProps({
     <div aria-hidden="true" class="not-prose my-6 sm:my-12">
         <div class="flex items-center gap-3 sm:gap-4">
             <!-- Left line -->
-            <div class="h-px flex-1 bg-gradient-to-r from-transparent via-[var(--border-light)] to-[var(--border-light)] dark:via-[var(--border-dark)] dark:to-[var(--border-dark)]" />
+            <div class="h-px flex-1 bg-linear-to-r from-transparent via-(--border-light) to-(--border-light) dark:via-(--border-dark) dark:to-(--border-dark)" />
 
             <!-- Icon in the middle -->
-            <div class="flex h-9 w-9 items-center justify-center rounded bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)]">
-                <HugeiconsIcon :icon="props.icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+            <div class="flex h-9 w-9 items-center justify-center rounded bg-(--bg-card-light) dark:bg-(--bg-card-dark) border border-(--border-light) dark:border-(--border-dark)">
+                <HugeiconsIcon :icon="props.icon" class="size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
             </div>
 
             <!-- Right line -->
-            <div class="h-px flex-1 bg-gradient-to-l from-transparent via-[var(--border-light)] to-[var(--border-light)] dark:via-[var(--border-dark)] dark:to-[var(--border-dark)]" />
+            <div class="h-px flex-1 bg-linear-to-l from-transparent via-(--border-light) to-(--border-light) dark:via-(--border-dark) dark:to-(--border-dark)" />
         </div>
     </div>
 </template>

package/src/components/content/Terminal.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { CheckmarkCircle02Icon, Copy01Icon, TerminalIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Button } from '../ui/button';
+import { Card } from '../ui/card';
+
+// Props
+const props = withDefaults(defineProps<{
+    commands?: string[];
+    title?: string;
+    prompt?: string;
+    copyable?: boolean;
+}>(), {
+    commands: () => [],
+    title: '',
+    prompt: '$',
+    copyable: true
+});
+
+const { t } = useI18n();
+const copied = ref(false);
+const commandText = computed(() => props.commands.join('\n'));
+const resolvedTitle = computed(() => props.title || t('uiVintage.terminal.title'));
+
+// Copy all command lines to the clipboard
+const copyCommands = async () => {
+    // Check if copy is enabled
+    if (!props.copyable || !commandText.value || !navigator.clipboard) {
+        return;
+    }
+
+    // Copy the command text to the clipboard
+    await navigator.clipboard.writeText(commandText.value);
+    copied.value = true;
+    window.setTimeout(() => {
+        copied.value = false;
+    }, 1800);
+};
+</script>
+
+<template>
+    <div class="not-prose my-6 sm:my-12">
+        <Card class="gap-0! sm:gap-0! overflow-hidden p-0! text-(--text-primary-light) dark:text-(--text-primary-dark)">
+            <!-- Terminal header -->
+            <div class="flex items-center justify-between gap-3 border-b border-(--border-light) bg-(--bg-card-light) px-3 py-2 sm:px-4 dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
+                <div class="flex min-w-0 items-center gap-2">
+                    <HugeiconsIcon :icon="TerminalIcon" class="size-4 shrink-0 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
+                    <span class="truncate text-xs font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)">{{ resolvedTitle }}</span>
+                </div>
+
+                <!-- Copy command button -->
+                <Button v-if="props.copyable"
+                    variant="ghost"
+                    size="icon"
+                    class="size-7 text-(--text-secondary-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark)"
+                    :aria-label="t('uiVintage.terminal.copy')"
+                    :title="t('uiVintage.terminal.copy')"
+                    :disabled="!commandText"
+                    @click="copyCommands">
+                    <HugeiconsIcon :icon="copied ? CheckmarkCircle02Icon : Copy01Icon" class="size-4" />
+                </Button>
+            </div>
+
+            <!-- Terminal commands -->
+            <pre class="overflow-x-auto bg-(--bg-surface-light) px-4 py-3 text-xs leading-6 dark:bg-(--bg-surface-dark) sm:px-5 sm:py-4 sm:text-sm"><code><span v-for="(command, index) in props.commands" :key="`${command}-${index}`" class="flex min-w-max"><span class="mr-3 select-none text-(--text-secondary-light) dark:text-(--text-secondary-dark)" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span></span></code></pre>
+        </Card>
+    </div>
+</template>

package/src/components/content/index.ts

@@ -1,3 +1,4 @@
 export { default as BlogList } from './BlogList.vue';
 export { default as BlogTable } from './BlogTable.vue';
-export { default as ProseHr } from './ProseHr.vue';
+export { default as ProseHr } from './ProseHr.vue';
+export { default as Terminal } from './Terminal.vue';

package/src/components/dashboard-shell/DashboardShell.vue

@@ -1,91 +1,70 @@
 <script setup lang="ts">
-import { NuxtImg } from "#components";
-import type { Component, HTMLAttributes } from "vue";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import BackgroundGrid from "../background-grid/BackgroundGrid.vue";
-import { ThemeSelector } from "../theme-selector";
-import { Separator } from "../ui/separator";
-import {
-    Sidebar,
-    SidebarContent,
-    SidebarFooter,
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
-    SidebarHeader,
-    SidebarInset,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-    SidebarProvider,
-    SidebarTrigger
-} from "../ui/sidebar";
-import { cn } from "../../lib/utils";
-
-type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
-
-interface DashboardSidebarItem {
-    id: string;
-    label: string;
-    description?: string;
-    icon?: HugeiconsIconDefinition | null;
-    href?: string;
-    to?: unknown;
-    active?: boolean;
-    newTab?: boolean;
-}
-
-interface DashboardSidebarSection {
-    id: string;
-    label?: string;
-    items: DashboardSidebarItem[];
-}
-
-interface DashboardShellProps {
+import { NuxtImg } from '#components';
+import type { Component, HTMLAttributes } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import BackgroundGrid from '../background-grid/BackgroundGrid.vue';
+import { ThemeSelector } from '../theme-selector';
+import { Separator } from '../ui/separator';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from '../ui/sidebar';
+import { cn } from '../../lib/utils';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
+
+// Props
+const props = withDefaults(defineProps<{
     appName?: string;
     appLogo?: string;
     appLinkTo?: string;
     title?: string;
     description?: string;
-    collapsible?: "offcanvas" | "icon" | "none";
+    collapsible?: 'offcanvas' | 'icon' | 'none';
     compact?: boolean;
-    sidebarSections?: DashboardSidebarSection[];
+    sidebarSections?: Array<{
+        id: string;
+        label?: string;
+        items: Array<{
+            id: string;
+            label: string;
+            description?: string;
+            icon?: HugeiconsIconDefinition | null;
+            href?: string;
+            to?: unknown;
+            active?: boolean;
+            newTab?: boolean;
+        }>;
+    }>;
     sidebarLinkComponent?: Component | string;
     showBackground?: boolean;
-    insetClass?: HTMLAttributes["class"];
-    topbarClass?: HTMLAttributes["class"];
-    contentContainerClass?: HTMLAttributes["class"];
-}
-
-// Props
-const props = withDefaults(defineProps<DashboardShellProps>(), {
-    appName: "",
-    appLogo: "",
-    appLinkTo: "/",
-    title: "",
-    description: "",
-    collapsible: "offcanvas",
+    insetClass?: HTMLAttributes['class'];
+    topbarClass?: HTMLAttributes['class'];
+    contentContainerClass?: HTMLAttributes['class'];
+}>(), {
+    appName: '',
+    appLogo: '',
+    appLinkTo: '/',
+    title: '',
+    description: '',
+    collapsible: 'offcanvas',
     compact: false,
     sidebarSections: () => [],
-    sidebarLinkComponent: "a",
+    sidebarLinkComponent: 'a',
     showBackground: true
 });
 
 // Resolve link props for sidebar items
-const getSidebarItemLinkProps = (item: DashboardSidebarItem) => {
-    const sharedProps = item.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
+const getSidebarItemLinkProps = (item: NonNullable<typeof props.sidebarSections>[number]['items'][number]) => {
+    const sharedProps = item.newTab ? { target: '_blank', rel: 'noopener noreferrer' } : {};
 
     // If the link component is an anchor, use href. Otherwise, use to for router links.
-    if (props.sidebarLinkComponent === "a") {
+    if (props.sidebarLinkComponent === 'a') {
         return {
-            href: item.href ?? "#",
+            href: item.href ?? '#',
             ...sharedProps
         };
     }
 
     // For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
     return {
-        to: item.to ?? item.href ?? "/",
+        to: item.to ?? item.href ?? '/',
         ...sharedProps
     };
 };

package/src/components/dashboard-shell/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./DashboardShell.vue";
-export { default as DashboardShell } from "./DashboardShell.vue";
+export { default } from './DashboardShell.vue';
+export { default as DashboardShell } from './DashboardShell.vue';

package/src/components/data-list/DataList.vue

@@ -1,19 +1,17 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <table
-    data-slot="data-list"
-    :class="cn('w-full text-left text-xs md:text-sm', props.class)"
-  >
-    <tbody class="border-y border-border">
-      <slot />
-    </tbody>
-  </table>
+    <table data-slot="data-list" :class="cn('w-full text-left text-xs md:text-sm', props.class)">
+        <tbody class="border-y border-border">
+            <slot />
+        </tbody>
+    </table>
 </template>

package/src/components/data-list/DataListItem.vue

@@ -1,17 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <tr
-    data-slot="data-list-item"
-    :class="cn('border-b border-border last:border-b-0', props.class)"
-  >
-    <slot />
-  </tr>
+    <tr data-slot="data-list-item" :class="cn('border-b border-border last:border-b-0', props.class)">
+        <slot />
+    </tr>
 </template>

package/src/components/data-list/DataListLabel.vue

@@ -1,17 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <td
-    data-slot="data-list-label"
-    :class="cn('py-3 align-top text-muted-foreground', props.class)"
-  >
-    <slot />
-  </td>
+    <td data-slot="data-list-label" :class="cn('py-3 align-top text-muted-foreground', props.class)">
+        <slot />
+    </td>
 </template>

package/src/components/data-list/DataListText.vue

@@ -1,17 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div
-    data-slot="data-list-text"
-    :class="cn('line-clamp-3', props.class)"
-  >
-    <slot />
-  </div>
+    <div data-slot="data-list-text" :class="cn('line-clamp-3', props.class)">
+        <slot />
+    </div>
 </template>

package/src/components/data-list/DataListValue.vue

@@ -1,17 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <td
-    data-slot="data-list-value"
-    :class="cn('py-3 pl-2 align-top text-right font-semibold text-foreground', props.class)"
-  >
-    <slot />
-  </td>
+    <td data-slot="data-list-value" :class="cn('py-3 pl-2 align-top text-right font-semibold text-foreground', props.class)">
+        <slot />
+    </td>
 </template>

package/src/components/data-list/index.ts

@@ -1,5 +1,5 @@
-export { default as DataList } from "./DataList.vue"
-export { default as DataListItem } from "./DataListItem.vue"
-export { default as DataListLabel } from "./DataListLabel.vue"
-export { default as DataListText } from "./DataListText.vue"
-export { default as DataListValue } from "./DataListValue.vue"
+export { default as DataList } from './DataList.vue';
+export { default as DataListItem } from './DataListItem.vue';
+export { default as DataListLabel } from './DataListLabel.vue';
+export { default as DataListText } from './DataListText.vue';
+export { default as DataListValue } from './DataListValue.vue';