@innertia-solutions/ui 0.1.0

package/composables/useForm.js

@@ -0,0 +1,259 @@
+import { reactive, toRefs, onMounted } from 'vue';
+
+// Constantes de colores para errores
+const ERROR_COLORS = {
+    border: {
+        light: 'border-red-400',
+        dark: 'dark:border-red-500/50'
+    },
+    text: {
+        light: 'text-slate-900', // Keep text readable
+        dark: 'dark:text-white'
+    },
+    placeholder: {
+        light: 'placeholder-red-300',
+        dark: 'dark:placeholder-red-500/50'
+    },
+    ring: {
+        light: 'focus:ring-red-500/20', // Subtle glow instead of thick ring
+        dark: 'dark:focus:ring-red-500/20'
+    },
+    focusBorder: {
+        light: 'focus:border-red-500',
+        dark: 'dark:focus:border-red-500'
+    },
+    message: {
+        light: 'text-red-500',
+        dark: 'dark:text-red-400'
+    }
+};
+
+const rules = {
+    required: (value) => {
+        // inválido si: null/undefined, string vacío o solo espacios, array vacío
+        if (value === null || value === undefined) return 'Este campo es obligatorio';
+        if (typeof value === 'string' && value.trim() === '') return 'Este campo es obligatorio';
+        if (Array.isArray(value) && value.length === 0) return 'Este campo es obligatorio';
+        return true;
+    },
+    email: (value) => /.+@.+\..+/.test(value) || 'El correo no es válido',
+    min: (value, arg) => value.length >= arg || `Debe tener al menos ${arg} caracteres`,
+    int: (value) => Number.isInteger(+value) || 'Debe ser un número entero',
+    rut: (value) => validateRut(value) || 'El RUT no es válido',
+    same: (value, arg, form) => value === form[arg] || 'Los campos no coinciden',
+};
+
+const dictionary = {
+    unique: 'Ya está registrado',
+    required: 'Este campo es obligatorio',
+    invalid: 'Dato inválido',
+};
+
+export function useForm(containerId, formDefinition, options = {}) {
+    const zodSchema = options.zodSchema;
+    const form = reactive({});
+    const errors = reactive({});
+
+    for (const field in formDefinition) {
+        form[field] = formDefinition[field]?.value ?? '';
+        errors[field] = [];
+    }
+
+    const reset = () => {
+        for (const field in formDefinition) {
+            form[field] = '';
+            errors[field] = [];
+            clearValidation(field);
+        }
+    };
+
+    const resetErrors = () => {
+        for (const field in formDefinition) {
+            errors[field] = [];
+            clearValidation(field);
+        }
+    };
+
+    const validateField = (field) => {
+        const def = formDefinition[field];
+        const value = form[field];
+        errors[field] = [];
+
+        if (!def.rules) return true;
+
+        def.rules.forEach(rule => {
+            let ruleName = typeof rule === 'string' ? rule : rule.name;
+            let arg = typeof rule === 'object' ? rule.arg : undefined;
+            const result = rules[ruleName](value, arg, form);
+            if (result !== true) {
+                const custom = def.messages?.[ruleName];
+                errors[field].push(custom || result);
+            }
+        });
+
+        updateValidation(field);
+        return errors[field].length === 0;
+    };
+
+    const validateForm = () => {
+        if (zodSchema) {
+            const result = zodSchema.safeParse(form);
+            resetErrors();
+
+            if (!result.success) {
+                for (const issue of result.error.errors) {
+                    const field = issue.path[0];
+                    if (errors[field]) {
+                        errors[field].push(issue.message);
+                        updateValidation(field);
+                    }
+                }
+                return false;
+            }
+
+            return true;
+        }
+
+        for (const field in formDefinition) validateField(field);
+
+        return Object.values(errors).every(e => e.length === 0);
+    };
+
+    const updateValidation = (field) => {
+        const el = document.querySelector(`#${containerId} [name="${field}"]`);
+        if (!el) return;
+
+        if (errors[field].length > 0) {
+            // Limpiar validación anterior solo para reemplazarla
+            clearValidation(field);
+
+            // Aplicar clases de error al elemento usando las constantes
+            el.classList.add(
+                ERROR_COLORS.border.light,
+                ERROR_COLORS.border.dark,
+                ERROR_COLORS.text.light,
+                ERROR_COLORS.text.dark,
+                ERROR_COLORS.placeholder.light,
+                ERROR_COLORS.placeholder.dark,
+                ERROR_COLORS.ring.light,
+                ERROR_COLORS.ring.dark,
+                ERROR_COLORS.focusBorder.light,
+                ERROR_COLORS.focusBorder.dark
+            );
+
+            const errorEl = document.createElement('p');
+            errorEl.className = `mt-1 text-sm ${ERROR_COLORS.message.light} ${ERROR_COLORS.message.dark} form-error-message form-error-${field}`;
+            errorEl.textContent = errors[field][0];
+
+            // Buscar el contenedor correcto para insertar el mensaje de error
+            let container = el.parentNode;
+
+            // Si el input está dentro de un div relativo (como en el caso del password), 
+            // el mensaje debe ir después de ese div
+            if (container && container.classList.contains('relative')) {
+                container.parentNode?.appendChild(errorEl);
+            } else {
+                // Para inputs normales y selects, agregar después del contenedor
+                container?.appendChild(errorEl);
+            }
+        } else {
+            // Solo limpiar si no hay errores
+            clearValidation(field);
+        }
+    };
+
+    const clearValidation = (field) => {
+        const el = document.querySelector(`#${containerId} [name="${field}"]`);
+        if (!el) return;
+
+        // Remover clases de error usando las constantes
+        el.classList.remove(
+            ERROR_COLORS.border.light,
+            ERROR_COLORS.border.dark,
+            ERROR_COLORS.text.light,
+            ERROR_COLORS.text.dark,
+            ERROR_COLORS.placeholder.light,
+            ERROR_COLORS.placeholder.dark,
+            ERROR_COLORS.ring.light,
+            ERROR_COLORS.ring.dark,
+            ERROR_COLORS.focusBorder.light,
+            ERROR_COLORS.focusBorder.dark
+        );
+
+        // Buscar y eliminar solo los mensajes de error específicos de este campo
+        const formContainer = document.querySelector(`#${containerId}`);
+        if (formContainer) {
+            const fieldErrorMessages = formContainer.querySelectorAll(`.form-error-${field}`);
+            fieldErrorMessages.forEach(errorEl => errorEl.remove());
+        }
+    };
+
+    const addError = (field, message) => {
+        if (message.startsWith('validation.')) {
+            const key = message.split('.')[1];
+            message = dictionary[key] || key;
+        }
+
+        errors[field].push(message);
+        updateValidation(field);
+    };
+
+    const attachEvents = () => {
+        // Solo adjuntar eventos si se especifican explícitamente
+        // Si options.events es undefined o no se proporciona, no adjuntar eventos automáticos
+        if (!options?.events || options.events.length === 0) {
+            return;
+        }
+
+        const events = options.events;
+
+        for (const field in formDefinition) {
+            const el = document.querySelector(`#${containerId} [name="${field}"]`);
+            if (el) {
+                events.forEach(evt => el.addEventListener(evt, () => validateField(field)));
+            }
+        }
+    };
+
+    onMounted(() => {
+        if (containerId) attachEvents();
+    });
+
+    const loadFromObject = (obj) => {
+        for (const field in formDefinition) {
+            if (obj[field] !== undefined) {
+                console.log(`Loading field ${field} with value:`, obj[field]);
+                form[field] = obj[field];
+                clearValidation(field);
+            }
+        }
+    }
+
+    return {
+        ...toRefs(form),
+        values: form,
+        errors,
+        validate: (field) => field ? validateField(field) : validateForm(),
+        reset,
+        resetErrors,
+        addError,
+        loadFromObject,
+        config: formDefinition
+    };
+}
+
+function validateRut(rut) {
+    if (!rut || typeof rut !== 'string') return false;
+    rut = rut.replace(/^0+|[^0-9kK]+/g, '').toUpperCase();
+    if (rut.length < 8) return false;
+    const body = rut.slice(0, -1);
+    const dv = rut.slice(-1);
+    let sum = 0, multiplier = 2;
+    for (let i = body.length - 1; i >= 0; i--) {
+        sum += parseInt(body[i]) * multiplier;
+        multiplier = multiplier < 7 ? multiplier + 1 : 2;
+    }
+    const expected = 11 - (sum % 11);
+    const expectedDV = expected === 11 ? '0' : expected === 10 ? 'K' : expected.toString();
+    return dv === expectedDV;
+}

package/composables/useRutFormatter.js

@@ -0,0 +1,20 @@
+
+export const useRutFormatter = (inputElement) => {
+    const formatRut = (rut) => {
+        const cleanRut = rut.replace(/[^\dKk]/g, '').toUpperCase(); // Limpiar caracteres no numéricos
+
+        if (cleanRut.length <= 1) return cleanRut; // Si solo hay un dígito, no hacer formato
+
+        const rutBody = cleanRut.slice(0, -1); // Cuerpo del RUT
+        const dv = cleanRut.slice(-1); // Dígito verificador
+
+        const formattedRut = rutBody.replace(/\B(?=(\d{3})+(?!\d))/g, '.'); // Formatear cuerpo
+
+        return `${formattedRut}-${dv}`; // Retornar RUT formateado
+    };
+
+    inputElement.addEventListener('input', (e) => {
+        let formattedRut = formatRut(e.target.value);
+        e.target.value = formattedRut;
+    });
+};

package/composables/useTable.ts

@@ -0,0 +1,124 @@
+// composables/useTable.ts
+
+export function useTable() {
+    // Función para invalidar caché de una tabla específica
+    const invalidateCache = (tableName: string) => {
+        if (!tableName) {
+            console.warn('[useTable] No table name provided');
+            return;
+        }
+
+        const fullCacheKey = `table_cache_${tableName}`;
+
+        try {
+            sessionStorage.removeItem(fullCacheKey);
+            console.log(`🗑️ Cache invalidated for table: ${tableName}`);
+        } catch (error) {
+            console.warn('[useTable] Error invalidating cache:', error);
+        }
+    };
+
+    // Función para invalidar múltiples cachés
+    const invalidateMultiple = (tableNames: string[]) => {
+        tableNames.forEach(name => invalidateCache(name));
+    };
+
+    // Función para limpiar todo el caché de tablas
+    const clearAllCache = () => {
+        try {
+            // Obtener todas las claves del sessionStorage
+            const keys = Object.keys(sessionStorage);
+
+            // Filtrar solo las claves de tablas
+            const tableCacheKeys = keys.filter(key => key.startsWith('table_cache_'));
+
+            // Eliminar todas
+            tableCacheKeys.forEach(key => {
+                sessionStorage.removeItem(key);
+            });
+
+            console.log(`🗑️ Cleared ${tableCacheKeys.length} table caches`);
+        } catch (error) {
+            console.warn('[useTable] Error clearing all cache:', error);
+        }
+    };
+
+    // Función para manejar búsquedas persistentes con invalidación automática de caché
+    const useSearch = (tableName: string) => {
+        if (!tableName) {
+            throw new Error('[useTable] Table name is required for useSearch');
+        }
+
+        // Estado global compartido para todas las búsquedas de tablas
+        const searchCache = useState<Record<string, string>>("table-search-cache", () => ({}));
+
+        // Referencia reactiva para la búsqueda de esta tabla específica
+        const search = ref(searchCache.value[tableName] || "");
+
+        // Watcher para sincronizar automáticamente con el estado global
+        // e invalidar caché cuando cambia la búsqueda
+        watch(search, (newSearch, oldSearch) => {
+            // Guardar en estado global
+            searchCache.value[tableName] = newSearch;
+            console.log(`[useTable] Saved search for "${tableName}":`, newSearch);
+
+            // Invalidar caché si la búsqueda cambió (excepto en la carga inicial)
+            if (oldSearch !== undefined && newSearch !== oldSearch) {
+                console.log(`[useTable] Search changed for "${tableName}", invalidating cache`);
+                invalidateCache(tableName);
+            }
+        }, { immediate: true });
+
+        // Función para limpiar la búsqueda específica
+        const clearSearch = () => {
+            search.value = "";
+        };
+
+        return {
+            search,
+            clearSearch
+        };
+    };
+
+    // Función para limpiar todas las búsquedas guardadas
+    const clearAllSearches = () => {
+        const searchCache = useState<Record<string, string>>("table-search-cache", () => ({}));
+        searchCache.value = {};
+        console.log('[useTable] Cleared all saved searches');
+    };
+
+    // Función para obtener el estado del caché de búsquedas
+    const getSearchCache = () => {
+        const searchCache = useState<Record<string, string>>("table-search-cache", () => ({}));
+        return searchCache.value;
+    };
+
+    // Manager for persistent filters
+    const useFilters = <T extends Record<string, any>>(tableName: string, initialFilters: T) => {
+        if (!tableName) {
+            throw new Error('[useTable] Table name is required for useFilters');
+        }
+
+        // Use Nuxt useState to persist filters across client-side navigation
+        const filters = useState<T>(`table_filters_${tableName}`, () => ({ ...initialFilters }));
+
+        const resetFilters = () => {
+            filters.value = { ...initialFilters };
+        };
+
+        return {
+            filters,
+            resetFilters
+        };
+    };
+
+    return {
+        invalidateCache,
+        invalidateMultiple,
+        clearAllCache,
+        useSearch,
+        useFilters,
+        clearAllSearches,
+        getSearchCache
+    };
+}

package/composables/useTimeAgo.js

@@ -0,0 +1,25 @@
+// composables/useTimeAgo.ts
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import dayjs from 'dayjs'
+
+export const useTimeAgo = (utcDatetime) => {
+    const now = ref(new Date())
+    let interval
+
+    onMounted(() => {
+        interval = setInterval(() => {
+            now.value = new Date()
+        }, 60000)
+    })
+
+    onBeforeUnmount(() => {
+        clearInterval(interval)
+    })
+
+    const timeAgo = () => {
+        // Convertir desde UTC a la hora local del navegador
+        return dayjs.utc(utcDatetime).local().from(now.value)
+    }
+
+    return { timeAgo }
+}

package/composables/useToast.js

@@ -0,0 +1,69 @@
+// app/composables/useToast.js
+import { useToastStore } from '@/stores/toast'
+
+export function useToast() {
+    const toast = useToastStore()
+
+    return {
+        // Métodos originales
+        success: toast.success,
+        info: toast.info,
+        error: toast.error,
+        show: toast.show,
+        remove: toast.remove,
+        update: toast.update,
+        updateProgress: toast.updateProgress,
+        completeProcess: toast.completeProcess,
+
+        // Métodos rápidos para diferentes tipos de toast
+        alert: {
+            success: (message, config = {}) => toast.success({
+                type: 'alert',
+                message,
+                duration: 3000,
+                ...config
+            }),
+
+            error: (message, config = {}) => toast.error({
+                type: 'alert',
+                message,
+                duration: 5000,
+                ...config
+            }),
+
+            warning: (message, config = {}) => toast.show({
+                type: 'alert',
+                severity: 'warning',
+                icon: 'ti ti-alert-triangle',
+                title: 'Warning',
+                message,
+                duration: 4000,
+                ...config
+            }),
+
+            info: (message, config = {}) => toast.info({
+                type: 'alert',
+                message,
+                duration: 3000,
+                ...config
+            })
+        },
+
+        notification: (title, message, config = {}) => toast.show({
+            type: 'notification',
+            title,
+            message,
+            duration: 0, // Las notificaciones no se auto-dismiss por defecto
+            ...config
+        }),
+
+        process: (title, config = {}) => toast.show({
+            type: 'process',
+            title,
+            progress: 0,
+            progressLabel: 'Iniciando...',
+            duration: 0, // Los procesos no se auto-dismiss
+            ...config
+        })
+    }
+}

package/nuxt.config.ts

@@ -0,0 +1,8 @@
+export default defineNuxtConfig({
+    components: [
+        { path: './components', pathPrefix: false }
+    ],
+    imports: {
+        dirs: ['composables']
+    },
+})

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@innertia-solutions/ui",
+  "version": "0.1.0",
+  "description": "Innertia Solutions — Nuxt UI layer: components and composables",
+  "keywords": ["nuxt", "vue", "components", "design-system"],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./nuxt.config.ts",
+  "exports": {
+    ".": "./nuxt.config.ts"
+  },
+  "peerDependencies": {
+    "nuxt": ">=3.0.0",
+    "vue": ">=3.0.0"
+  },
+  "devDependencies": {
+    "nuxt": "^3.16.0",
+    "vue": "^3.5.0"
+  }
+}

package/stores/toast.js

@@ -0,0 +1,131 @@
+// 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: new Map(), // Para trackear los timeouts activos
+    }),
+    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) {
+            // Limpiar timeout si existe
+            if (this.timeouts.has(id)) {
+                clearTimeout(this.timeouts.get(id))
+                this.timeouts.delete(id)
+            }
+
+            for (const key in this.toasts) {
+                this.toasts[key] = this.toasts[key].filter(t => t.id !== id)
+            }
+        },
+        _scheduleRemoval(toast) {
+            // Solo programar auto-remove si duration > 0
+            if (toast.duration && toast.duration > 0) {
+                const timeoutId = setTimeout(() => {
+                    this.remove(toast.id)
+                }, toast.duration)
+
+                this.timeouts.set(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 })
+        },
+    },
+})