@brumaombra/ui-vintage 0.6.7 → 0.7.1

package/src/lib/i18n.ts

@@ -0,0 +1,85 @@
+import en from '../i18n/en.json';
+import it from '../i18n/it.json';
+import fr from '../i18n/fr.json';
+import es from '../i18n/es.json';
+import de from '../i18n/de.json';
+import pt from '../i18n/pt.json';
+import zh from '../i18n/zh.json';
+import ja from '../i18n/ja.json';
+import ru from '../i18n/ru.json';
+
+// The list of translation files
+export const uiVintageMessages = {
+    en,
+    it,
+    fr,
+    es,
+    de,
+    pt,
+    zh,
+    ja,
+    ru
+} as const;
+
+// The type of the available locales based on the keys of the messages object
+type UiVintageLocale = keyof typeof uiVintageMessages;
+
+// Get the messages for a specific locale
+export const getUiVintageMessagesForLocale = (locale: keyof typeof uiVintageMessages) => {
+    return uiVintageMessages[locale];
+};
+
+// Resolve the current runtime locale from the document or navigator
+const getUiVintageRuntimeLocale = (): UiVintageLocale => {
+    let browserLocale = 'en';
+
+    // Try to detect the user's locale from the document or navigator
+    if (typeof document !== 'undefined' && document.documentElement?.lang) {
+        browserLocale = document.documentElement.lang?.toLowerCase();
+    } else if (typeof navigator !== 'undefined' && navigator.language) {
+        browserLocale = navigator.language?.toLowerCase();
+    }
+
+    // Default to English if the detected locale is not supported, otherwise use it
+    if (browserLocale.startsWith('it')) {
+        return 'it';
+    } else if (browserLocale.startsWith('fr')) {
+        return 'fr';
+    } else if (browserLocale.startsWith('es')) {
+        return 'es';
+    } else if (browserLocale.startsWith('de')) {
+        return 'de';
+    } else if (browserLocale.startsWith('pt')) {
+        return 'pt';
+    } else if (browserLocale.startsWith('zh')) {
+        return 'zh';
+    } else if (browserLocale.startsWith('ja')) {
+        return 'ja';
+    } else if (browserLocale.startsWith('ru')) {
+        return 'ru';
+    }
+
+    // Fallback to English for unsupported or undetectable locales
+    return 'en';
+};
+
+// Read a message from the bundled library locales with a safe fallback
+export const getUiVintageRuntimeMessage = (path: string, fallback: string) => {
+    const localeMessages = uiVintageMessages[getUiVintageRuntimeLocale()];
+    const segments = path.split('.');
+    let currentValue: unknown = localeMessages;
+
+    // Traverse the nested message object based on the path segments
+    for (const segment of segments) {
+        // If the current value is not an object or doesn't contain the segment, return the fallback
+        if (!currentValue || typeof currentValue !== 'object' || !(segment in currentValue)) {
+            return fallback;
+        }
+
+        // Move deeper into the nested structure
+        currentValue = (currentValue as Record<string, unknown>)[segment];
+    }
+
+    // If the final value is a string, return it; otherwise, return the fallback
+    return typeof currentValue === 'string' ? currentValue : fallback;
+};

package/src/lib/utils.ts

@@ -0,0 +1,29 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// Utility function to merge class names using clsx and tailwind-merge
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+};
+
+// Format a date in long format for Italy timezone
+export function formatDateLongItalyTimezone(date: string | number | Date | null | undefined, locale: string) {
+    if (!date) return '';
+
+    // Parse the date input into a Date object
+    const parsedDate = typeof date === 'string' && /^\d+$/.test(date)
+        ? new Date(Number(date))
+        : new Date(date);
+
+    // Check if the parsed date is valid
+    if (isNaN(parsedDate.getTime())) return '';
+
+    // Return the formatted date
+    return new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        timeZone: 'Europe/Rome'
+    }).format(parsedDate);
+};

package/src/nuxt-components.d.ts

@@ -0,0 +1,5 @@
+declare module '#components' {
+    import type { DefineComponent } from 'vue';
+
+    export const NuxtImg: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
+}

package/src/runtime/ui-vintage-i18n-plugin.js

@@ -0,0 +1,48 @@
+import { defineNuxtPlugin } from 'nuxt/app';
+import { uiVintageMessages } from '../lib/i18n';
+
+// Resolve the active i18n composer from either the Nuxt app or the Vue I18n instance
+const resolveMessageComposer = i18n => {
+    // If no i18n instance is provided, return null
+    if (!i18n) {
+        return null;
+    }
+
+    // Check if the provided i18n instance has the mergeLocaleMessage method (Vue I18n 9+ composer API)
+    if (typeof i18n.mergeLocaleMessage === 'function') {
+        return i18n;
+    }
+
+    // Check if the provided i18n instance has a global property with the mergeLocaleMessage method (Vue I18n 9+ global API)
+    if (i18n.global && typeof i18n.global.mergeLocaleMessage === 'function') {
+        return i18n.global;
+    }
+
+    // If neither check succeeded, return null
+    return null;
+};
+
+// Merge the library locale messages into the app composer
+const applyUiVintageMessages = nuxtApp => {
+    // Attempt to resolve the i18n composer from the Nuxt app or Vue I18n instance
+    const composer = resolveMessageComposer(nuxtApp.$i18n || nuxtApp.vueApp?.config?.globalProperties?.$i18n);
+    if (!composer) {
+        return;
+    }
+
+    // Merge the library messages into the composer
+    for (const [locale, messages] of Object.entries(uiVintageMessages)) {
+        composer.mergeLocaleMessage(locale, messages);
+    }
+};
+
+// Define the Nuxt plugin
+export default defineNuxtPlugin({
+    name: 'ui-vintage:i18n',
+    dependsOn: ['i18n:plugin'],
+    setup(nuxtApp) {
+        // Merge library messages during plugin setup and after app creation
+        applyUiVintageMessages(nuxtApp);
+        nuxtApp.hook('app:created', () => applyUiVintageMessages(nuxtApp));
+    }
+});

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+    const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+    export default component;
+}

package/src/styles.css

@@ -0,0 +1,224 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@custom-variant dark (&:where(.dark, .dark *));
+@source "./**/*.{ts,vue}";
+
+html {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+:root {
+    /*********************** Core custom colors ***********************/
+
+    --bg-main-light: #fafafa;
+    --bg-main-dark: #0f1318;
+    --bg-card-light: #ffffff;
+    --bg-card-dark: #171c23;
+    --bg-surface-light: #f6f8fa;
+    --bg-surface-dark: #1c222b;
+    --bg-selected-light: #edf1f5;
+    --bg-selected-dark: #202733;
+
+    --text-primary-light: #1b222d;
+    --text-primary-dark: #eef3f8;
+    --text-secondary-light: #66707d;
+    --text-secondary-dark: #97a2b2;
+
+    --button-primary-light: #f7931a;
+    --button-primary-hover-light: #df8112;
+    --button-primary-dark: #f7a23c;
+    --button-primary-hover-dark: #ffb55b;
+    --button-primary-foreground-light: #ffffff;
+    --button-primary-foreground-dark: #1b1307;
+    --button-secondary-light: #ffffff;
+    --button-secondary-dark: #171c23;
+
+    --border-light: #d8dee7;
+    --border-dark: #313948;
+    --border-hover-light: #a7b0bd;
+    --border-hover-dark: #5d6878;
+
+    /*********************** Shadcn UI variables ***********************/
+
+    --radius: 0.625rem;
+    --background: var(--bg-main-light);
+    --foreground: var(--text-primary-light);
+    --card: var(--bg-card-light);
+    --card-foreground: var(--text-primary-light);
+    --popover: var(--bg-card-light);
+    --popover-foreground: var(--text-primary-light);
+    --primary: var(--button-primary-light);
+    --primary-foreground: var(--button-primary-foreground-light);
+    --secondary: var(--button-secondary-light);
+    --secondary-foreground: var(--text-primary-light);
+    --muted: var(--bg-selected-light);
+    --muted-foreground: var(--text-secondary-light);
+    --accent: var(--bg-selected-light);
+    --accent-foreground: var(--text-primary-light);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: var(--border-light);
+    --input: var(--border-light);
+    --ring: var(--button-primary-light);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: var(--bg-card-light);
+    --sidebar-foreground: var(--text-primary-light);
+    --sidebar-primary: var(--button-primary-light);
+    --sidebar-primary-foreground: var(--button-primary-foreground-light);
+    --sidebar-accent: var(--bg-selected-light);
+    --sidebar-accent-foreground: var(--text-primary-light);
+    --sidebar-border: var(--border-light);
+    --sidebar-ring: var(--button-primary-light);
+}
+
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.dark {
+    --background: var(--bg-main-dark);
+    --foreground: var(--text-primary-dark);
+    --card: var(--bg-card-dark);
+    --card-foreground: var(--text-primary-dark);
+    --popover: var(--bg-card-dark);
+    --popover-foreground: var(--text-primary-dark);
+    --primary: var(--button-primary-dark);
+    --primary-foreground: var(--button-primary-foreground-dark);
+    --secondary: var(--button-secondary-dark);
+    --secondary-foreground: var(--text-primary-dark);
+    --muted: var(--bg-selected-dark);
+    --muted-foreground: var(--text-secondary-dark);
+    --accent: var(--bg-selected-dark);
+    --accent-foreground: var(--text-primary-dark);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: var(--border-dark);
+    --input: var(--border-dark);
+    --ring: var(--button-primary-dark);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: var(--bg-card-dark);
+    --sidebar-foreground: var(--text-primary-dark);
+    --sidebar-primary: var(--button-primary-dark);
+    --sidebar-primary-foreground: var(--button-primary-foreground-dark);
+    --sidebar-accent: var(--bg-selected-dark);
+    --sidebar-accent-foreground: var(--text-primary-dark);
+    --sidebar-border: var(--border-dark);
+    --sidebar-ring: var(--button-primary-dark);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+body {
+    background: var(--bg-main-light);
+    color: var(--text-primary-light);
+}
+
+.dark body {
+    background: var(--bg-main-dark);
+    color: var(--text-primary-dark);
+}
+
+/*********************** Page transition animations ***********************/
+
+.page-enter-active,
+.page-leave-active {
+    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+
+.page-enter-from {
+    opacity: 0;
+    transform: translateY(4px);
+}
+
+.page-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+}
+
+
+/*********************** Custom scrollbar ***********************/
+
+/* Webkit browsers */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--border-light);
+    border-radius: 0px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--text-secondary-light);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+    background-color: var(--border-dark);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--text-secondary-dark);
+}
+
+/* Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-light) transparent;
+}
+
+.dark * {
+    scrollbar-color: var(--border-dark) transparent;
+}