@brumaombra/ui-vintage 0.7.8 → 0.7.10

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';

package/src/components/empty-state-card/EmptyStateCard.vue

@@ -4,23 +4,33 @@ import { useI18n } from 'vue-i18n';
 import { PackageIcon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    icon: { type: [Object, Array], default: () => PackageIcon },
-    title: { type: String, default: '' },
-    description: { type: String, default: '' },
-    titleKey: { type: String, default: '' },
-    descriptionKey: { type: String, default: '' }
+const props = withDefaults(defineProps<{
+    icon?: HugeiconsIconDefinition;
+    title?: string;
+    description?: string;
+    titleKey?: string;
+    descriptionKey?: string;
+}>(), {
+    icon: () => PackageIcon,
+    title: '',
+    description: '',
+    titleKey: '',
+    descriptionKey: ''
 });
 
 const { t } = useI18n();
-
 const hasCustomCopy = computed(() => Boolean(props.title || props.description || props.titleKey || props.descriptionKey));
+
+// Title
 const resolvedTitle = computed(() => props.title
     || (props.titleKey ? t(props.titleKey) : '')
     || (!hasCustomCopy.value ? t('uiVintage.common.empty.title') : '')
     || (!hasCustomCopy.value ? 'Nothing here yet' : ''));
+
+// Description
 const resolvedDescription = computed(() => props.description
     || (props.descriptionKey ? t(props.descriptionKey) : '')
     || (!hasCustomCopy.value ? t('uiVintage.common.empty.description') : '')
@@ -29,19 +39,19 @@ const resolvedDescription = computed(() => props.description
 
 <template>
     <Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
-        <CardContent class="flex flex-col items-center justify-center !p-0 text-center">
+        <CardContent class="flex flex-col items-center justify-center p-0! text-center">
             <!-- Icon -->
-            <div class="flex items-center justify-center text-4xl text-[var(--text-secondary-light)] opacity-40 dark:text-[var(--text-secondary-dark)]">
+            <div class="flex items-center justify-center text-4xl text-(--text-secondary-light) opacity-40 dark:text-(--text-secondary-dark)">
                 <HugeiconsIcon :icon="props.icon" class="size-10" />
             </div>
 
             <!-- Title -->
-            <h3 v-if="resolvedTitle" class="text-sm font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] md:text-lg">
+            <h3 v-if="resolvedTitle" class="text-sm font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) md:text-lg">
                 {{ resolvedTitle }}
             </h3>
 
             <!-- Description -->
-            <p v-if="resolvedDescription" class="max-w-md text-xs text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] md:text-sm">
+            <p v-if="resolvedDescription" class="max-w-md text-xs text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:text-sm">
                 {{ resolvedDescription }}
             </p>
 

package/src/components/error-page/ErrorPage.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { computed } from "vue";
-import BackgroundGrid from "../background-grid/BackgroundGrid.vue";
-import { Button } from "../ui/button";
-import { Card, CardContent, CardFooter } from "../ui/card";
-import { cn } from "../../lib/utils";
+import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed, type HTMLAttributes } from 'vue';
+import BackgroundGrid from '../background-grid/BackgroundGrid.vue';
+import { Button } from '../ui/button';
+import { Card, CardContent, CardFooter } from '../ui/card';
+import { cn } from '../../lib/utils';
 
-interface ErrorPageProps {
+// Props
+const props = withDefaults(defineProps<{
     statusCode?: number | string;
     label?: string;
     title?: string;
@@ -16,19 +16,16 @@ interface ErrorPageProps {
     actionLabel?: string;
     showBackground?: boolean;
     showDefaultAction?: boolean;
-    class?: HTMLAttributes["class"];
-    cardClass?: HTMLAttributes["class"];
-    contentClass?: HTMLAttributes["class"];
-    footerClass?: HTMLAttributes["class"];
-}
-
-// Props
-const props = withDefaults(defineProps<ErrorPageProps>(), {
+    class?: HTMLAttributes['class'];
+    cardClass?: HTMLAttributes['class'];
+    contentClass?: HTMLAttributes['class'];
+    footerClass?: HTMLAttributes['class'];
+}>(), {
     statusCode: 500,
-    label: "Error",
+    label: 'Error',
     title: undefined,
     message: undefined,
-    actionLabel: "Go back",
+    actionLabel: 'Go back',
     showBackground: true,
     showDefaultAction: true,
     class: undefined,
@@ -47,25 +44,25 @@ const resolvedStatusCode = computed(() => String(props.statusCode ?? 500));
 // Resolve the heading copy.
 const resolvedTitle = computed(() => {
     if (props.title) return props.title;
-    if (resolvedStatusCode.value === "404") return "Page not found";
-    return "Something went wrong";
+    if (resolvedStatusCode.value === '404') return 'Page not found';
+    return 'Something went wrong';
 });
 
 // Resolve the supporting message.
 const resolvedMessage = computed(() => {
     if (props.message) return props.message;
-    if (resolvedStatusCode.value === "404") return "The page you requested could not be found or may have been moved.";
-    return "An unexpected error interrupted the current flow. Please try again or go back to a safe page.";
+    if (resolvedStatusCode.value === '404') return 'The page you requested could not be found or may have been moved.';
+    return 'An unexpected error interrupted the current flow. Please try again or go back to a safe page.';
 });
 
 // Emit the default action.
 const handleAction = () => {
-    emit("action");
+    emit('action');
 };
 </script>
 
 <template>
-    <div :class="cn('relative min-h-screen bg-[var(--bg-main-light)] text-[var(--text-primary-light)] dark:bg-[var(--bg-main-dark)] dark:text-[var(--text-primary-dark)]', props.class)">
+    <div :class="cn('relative min-h-screen bg-(--bg-main-light) text-(--text-primary-light) dark:bg-(--bg-main-dark) dark:text-(--text-primary-dark)', props.class)">
         <!-- Decorative background -->
         <BackgroundGrid v-if="props.showBackground" />
 
@@ -86,7 +83,7 @@ const handleAction = () => {
                         <!-- Error copy -->
                         <div>
                             <!-- Status code -->
-                            <div class="text-sm font-semibold uppercase tracking-[0.24em] text-[var(--button-primary-light)] dark:text-[var(--button-primary-dark)]">
+                            <div class="text-sm font-semibold uppercase tracking-[0.24em] text-(--button-primary-light) dark:text-(--button-primary-dark)">
                                 {{ props.label }} {{ resolvedStatusCode }}
                             </div>
 
@@ -96,7 +93,7 @@ const handleAction = () => {
                             </h1>
 
                             <!-- Message -->
-                            <p class="text-sm leading-7 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] sm:text-base mt-4">
+                            <p class="text-sm leading-7 text-(--text-secondary-light) dark:text-(--text-secondary-dark) sm:text-base mt-4">
                                 {{ resolvedMessage }}
                             </p>
                         </div>

package/src/components/error-page/index.ts

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

package/src/components/info-card/InfoCard.vue

@@ -1,20 +1,26 @@
 <script setup lang="ts">
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { Card, CardContent, CardText } from "../ui/card"
+import { HugeiconsIcon } from '@hugeicons/vue';
+import type { HTMLAttributes } from 'vue';
+import { Card, CardContent, CardText } from '../ui/card';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    icon: { type: Object, required: true },
-    title: { type: String, default: "" },
-    description: { type: [String, Number], default: "" }
-})
+const props = withDefaults(defineProps<{
+    icon: HugeiconsIconDefinition;
+    title?: string;
+    description?: string | number;
+    class?: HTMLAttributes['class'];
+}>(), {
+    title: '',
+    description: ''
+});
 </script>
 
 <template>
-    <Card class="flex flex-col items-center !p-4 sm:flex-row">
-        <CardContent class="flex w-full flex-col items-center gap-0 !p-0 sm:flex-row">
+    <Card :class="['flex flex-col items-center p-4! sm:flex-row', props.class]">
+        <CardContent class="flex w-full flex-col items-center gap-0 p-0! sm:flex-row">
             <!-- Icon -->
-            <Card color="gray" class="mb-3 mr-0 flex h-12 w-12 flex-shrink-0 items-center justify-center !p-0 sm:mb-0 sm:mr-4">
+            <Card color="gray" class="mb-3 mr-0 flex h-12 w-12 shrink-0 items-center justify-center p-0! sm:mb-0 sm:mr-4">
                 <HugeiconsIcon :icon="props.icon" class="size-5" />
             </Card>
 
@@ -22,7 +28,7 @@ const props = defineProps({
             <div class="flex w-full flex-1 items-center justify-between text-center sm:w-auto sm:text-left">
                 <div class="flex flex-col w-full gap-2 sm:gap-1">
                     <!-- Title -->
-                    <span class="text-base font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+                    <span class="text-base font-bold text-(--text-primary-light) dark:text-(--text-primary-dark)">
                         {{ props.title }}
                     </span>
 

package/src/components/landing/index.ts

@@ -1,6 +1,6 @@
-export { default } from "./landing-navbar";
-export { default as LandingContent } from "./landing-content";
-export { default as LandingShell } from "./landing-shell";
-export { default as LandingNavbar } from "./landing-navbar";
-export { default as LandingFooter } from "./landing-footer";
-export type { LandingFooterLink, LandingFooterSection } from "./landing-footer";
+export { default } from './landing-navbar';
+export { default as LandingContent } from './landing-content';
+export { default as LandingShell } from './landing-shell';
+export { default as LandingNavbar } from './landing-navbar';
+export { default as LandingFooter } from './landing-footer';
+export type { LandingFooterLink, LandingFooterSection } from './landing-footer';

package/src/components/landing/landing-content/LandingContent.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../../lib/utils";
-
-interface LandingContentProps {
-    class?: HTMLAttributes["class"];
-}
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
 // Props
-const props = defineProps<LandingContentProps>();
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>

package/src/components/landing/landing-content/index.ts

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