@innertia-solutions/nuxt-theme-spark 0.1.11

package/shared/stores/toast.js

@@ -0,0 +1,129 @@
+// stores/toast.js
+import { defineStore } from 'pinia'
+import { v4 as uuid } from 'uuid'
+
+const toastConfig = {
+    severity: 'info',
+    title: null,
+    message: null,
+    duration: 5000,
+    progress: true,
+    position: 'top-right',
+    icon: null,
+}
+
+export const useToastStore = defineStore('toast', {
+    state: () => ({
+        toasts: {
+            'top-left': [],
+            'top-center': [],
+            'top-right': [],
+            'bottom-left': [],
+            'bottom-center': [],
+            'bottom-right': [],
+        },
+        timeouts: {}, // id → timeoutId (plain object, JSON-safe)
+    }),
+    actions: {
+        success(config) {
+            const normalizedConfig = typeof config === 'string' ? { message: config } : config
+            const toast = {
+                ...toastConfig,
+                id: uuid(),
+                severity: 'success',
+                icon: 'ti ti-circle-check text-green-500',
+                position: 'top-center',
+                ...normalizedConfig,
+            }
+            this.toasts[toast.position].push(toast)
+            this._scheduleRemoval(toast)
+        },
+        info(config) {
+            const normalizedConfig = typeof config === 'string' ? { message: config } : config
+            const toast = {
+                ...toastConfig,
+                id: uuid(),
+                severity: 'info',
+                icon: 'ti ti-info-circle',
+                title: 'Info',
+                position: 'top-right',
+                ...normalizedConfig,
+            }
+            this.toasts[toast.position].push(toast)
+            this._scheduleRemoval(toast)
+        },
+        error(config) {
+            const normalizedConfig = typeof config === 'string' ? { message: config } : config
+            const toast = {
+                ...toastConfig,
+                id: uuid(),
+                severity: 'danger',
+                icon: 'ti ti-exclamation-circle',
+                title: 'Atención',
+                position: 'top-right',
+                ...normalizedConfig,
+            }
+            this.toasts[toast.position].push(toast)
+            this._scheduleRemoval(toast)
+        },
+        show(config) {
+            const toast = {
+                id: uuid(),
+                severity: 'info',
+                position: 'top-right',
+                ...toastConfig,
+                ...config,
+            }
+            this.toasts[toast.position].push(toast)
+            this._scheduleRemoval(toast)
+        },
+        update(id, data) {
+            for (const key in this.toasts) {
+                const idx = this.toasts[key].findIndex(t => t.id === id)
+                if (idx !== -1) {
+                    this.toasts[key][idx] = { ...this.toasts[key][idx], ...data }
+                    break
+                }
+            }
+        },
+        remove(id) {
+            if (this.timeouts[id] !== undefined) {
+                clearTimeout(this.timeouts[id])
+                delete this.timeouts[id]
+            }
+
+            for (const key in this.toasts) {
+                this.toasts[key] = this.toasts[key].filter(t => t.id !== id)
+            }
+        },
+        _scheduleRemoval(toast) {
+            if (toast.duration && toast.duration > 0) {
+                const timeoutId = setTimeout(() => {
+                    this.remove(toast.id)
+                }, toast.duration)
+
+                this.timeouts[toast.id] = timeoutId
+            }
+        },
+
+        // Método específico para actualizar progreso de un toast tipo process
+        updateProgress(id, progress, progressLabel = null) {
+            const updateData = { progress }
+            if (progressLabel) {
+                updateData.progressLabel = progressLabel
+            }
+            this.update(id, updateData)
+        },
+
+        // Método para completar un proceso
+        completeProcess(id, message = 'Completado') {
+            this.update(id, {
+                progress: 100,
+                progressLabel: message,
+                duration: 3000, // Auto-remove después de completar
+            })
+            // Programar removal para el proceso completado
+            this._scheduleRemoval({ id, duration: 3000 })
+        },
+    },
+})

package/spark.css

@@ -0,0 +1,207 @@
+@import "tailwindcss";
+@import "preline/variants.css";
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/aspect-ratio";
+
+/* Escanear componentes del paquete spark (en node_modules) */
+@source "./components/**/*.vue";
+@source "./shared/**/*.{js,ts}";
+@source "./plugins/**/*.{js,ts}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant hover (&:hover);
+
+/* ─── Color tokens ─────────────────────────────────────────── */
+@theme {
+    --color-background: var(--background);
+    --color-background-1: var(--background-1);
+    --color-background-2: var(--background-2);
+    --color-foreground: var(--foreground);
+    --color-foreground-inverse: var(--foreground-inverse);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary-hover: var(--primary-hover);
+    --color-primary-focus: var(--primary-focus);
+    --color-primary-line: var(--primary-line);
+    --color-card: var(--card);
+    --color-card-line: var(--card-line);
+    --color-card-divider: var(--card-divider);
+    --color-layer: var(--layer);
+    --color-layer-line: var(--layer-line);
+    --color-layer-hover: var(--layer-hover);
+    --color-layer-focus: var(--layer-focus);
+    --color-surface: var(--surface);
+    --color-surface-1: var(--surface-1);
+    --color-surface-foreground: var(--surface-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted-foreground-1: var(--muted-foreground-1);
+    --color-muted-foreground-2: var(--muted-foreground-2);
+    --color-muted-hover: var(--muted-hover);
+    --color-muted-focus: var(--muted-focus);
+    --color-navbar: var(--navbar);
+    --color-navbar-line: var(--navbar-line);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-line: var(--sidebar-line);
+    --color-dropdown: var(--dropdown);
+    --color-dropdown-line: var(--dropdown-line);
+    --color-dropdown-divider: var(--dropdown-divider);
+    --color-dropdown-item-foreground: var(--dropdown-item-foreground);
+    --color-dropdown-item-hover: var(--dropdown-item-hover);
+    --color-dropdown-item-focus: var(--dropdown-item-focus);
+    --color-tooltip: var(--tooltip);
+    --color-tooltip-line: var(--tooltip-line);
+    --color-tooltip-foreground: var(--tooltip-foreground);
+    --color-scrollbar-track: var(--scrollbar-track);
+    --color-scrollbar-thumb: var(--scrollbar-thumb);
+    --shadow-2xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
+}
+
+/* ─── Light theme ───────────────────────────────────────────── */
+:root {
+    --background: #ffffff;
+    --background-1: #f8fafc;
+    --background-2: #f1f5f9;
+    --foreground: #111827;
+    --foreground-inverse: #ffffff;
+
+    --primary: #2563eb;
+    --primary-foreground: #ffffff;
+    --primary-hover: #1d4ed8;
+    --primary-focus: #1d4ed8;
+    --primary-line: #1d4ed8;
+
+    --card: #ffffff;
+    --card-line: #e5e7eb;
+    --card-divider: #e5e7eb;
+
+    --layer: #ffffff;
+    --layer-line: #e5e7eb;
+    --layer-hover: #f8fafc;
+    --layer-focus: #f1f5f9;
+
+    --surface: #f3f4f6;
+    --surface-1: #e5e7eb;
+    --surface-foreground: #374151;
+
+    --muted: #f8fafc;
+    --muted-foreground: #64748b;
+    --muted-foreground-1: #475569;
+    --muted-foreground-2: #94a3b8;
+    --muted-hover: #f1f5f9;
+    --muted-focus: #e2e8f0;
+
+    --navbar: #ffffff;
+    --navbar-line: #e5e7eb;
+    --sidebar: #ffffff;
+    --sidebar-line: #e5e7eb;
+
+    --dropdown: #ffffff;
+    --dropdown-line: #e5e7eb;
+    --dropdown-divider: #e5e7eb;
+    --dropdown-item-foreground: #334155;
+    --dropdown-item-hover: #f1f5f9;
+    --dropdown-item-focus: #e2e8f0;
+
+    --tooltip: #111827;
+    --tooltip-line: #111827;
+    --tooltip-foreground: #ffffff;
+
+    --scrollbar-track: #f1f5f9;
+    --scrollbar-thumb: #cbd5e1;
+}
+
+/* ─── Dark theme ────────────────────────────────────────────── */
+.dark {
+    --background: #020617;
+    --background-1: #0f172a;
+    --background-2: #111827;
+    --foreground: #f8fafc;
+    --foreground-inverse: #020617;
+
+    --primary: #60a5fa;
+    --primary-foreground: #0f172a;
+    --primary-hover: #93c5fd;
+    --primary-focus: #93c5fd;
+    --primary-line: #3b82f6;
+
+    --card: #111827;
+    --card-line: #1f2937;
+    --card-divider: #1f2937;
+
+    --layer: #111827;
+    --layer-line: #1f2937;
+    --layer-hover: #1e293b;
+    --layer-focus: #334155;
+
+    --surface: #1f2937;
+    --surface-1: #334155;
+    --surface-foreground: #e5e7eb;
+
+    --muted: #111827;
+    --muted-foreground: #94a3b8;
+    --muted-foreground-1: #cbd5e1;
+    --muted-foreground-2: #64748b;
+    --muted-hover: #1e293b;
+    --muted-focus: #334155;
+
+    --navbar: #111827;
+    --navbar-line: #1f2937;
+    --sidebar: #111827;
+    --sidebar-line: #1f2937;
+
+    --dropdown: #111827;
+    --dropdown-line: #1f2937;
+    --dropdown-divider: #1f2937;
+    --dropdown-item-foreground: #e5e7eb;
+    --dropdown-item-hover: #1e293b;
+    --dropdown-item-focus: #334155;
+
+    --tooltip: #f8fafc;
+    --tooltip-line: #f8fafc;
+    --tooltip-foreground: #020617;
+
+    --scrollbar-track: #111827;
+    --scrollbar-thumb: #475569;
+}
+
+/* ─── Base styles ───────────────────────────────────────────── */
+@layer base {
+    button:not(:disabled),
+    [role="button"]:not(:disabled) {
+        cursor: pointer;
+    }
+
+    body {
+        font-family: 'Inter', sans-serif;
+        font-size: 13px;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+/* ─── Page transitions ──────────────────────────────────────── */
+.page-enter-active,
+.page-leave-active {
+    transition: all 0.2s ease-out;
+}
+.page-enter-from { opacity: 0; filter: blur(2px); }
+.page-leave-to   { opacity: 0; filter: blur(2px); }
+.page-enter-to,
+.page-leave-from { opacity: 1; filter: blur(0px); }
+
+/* ─── Layout transitions ────────────────────────────────────── */
+.layout-enter-active,
+.layout-leave-active {
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.layout-enter-from { opacity: 0; transform: scale(0.96); filter: blur(4px); }
+.layout-leave-to   { opacity: 0; transform: scale(1.02); filter: blur(4px); }
+.layout-enter-to,
+.layout-leave-from { opacity: 1; transform: scale(1);    filter: blur(0px); }
+
+/* ─── Page loader ───────────────────────────────────────────── */
+.page-loading-blur {
+    filter: blur(2px);
+    transition: filter 0.2s ease-out;
+}