@innertia-solutions/nuxt-theme-spark 0.1.11

package/components/Toast/Alert.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    class="max-w-xs relative bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl shadow-lg p-4 pr-10 flex items-start overflow-hidden"
+    :class="{
+      'border-green-200': toast.severity === 'success',
+      'border-red-200': toast.severity === 'danger',
+      'border-yellow-200': toast.severity === 'warning',
+      'border-blue-200': toast.severity === 'info',
+    }"
+    role="alert"
+  >
+    <div class="mr-3 mt-1">
+      <i v-if="toast.icon" :class="toast.icon + ' text-gray-400 text-xl'" />
+    </div>
+    <div class="flex-1 mt-1">
+      <h3 v-if="toast.title" class="font-semibold text-sm text-gray-800">
+        {{ toast.title }}
+      </h3>
+      <div class="text-sm dark:text-white text-gray-600" v-html="toast.message"></div>
+    </div>
+    <button
+      class="ml-3 text-gray-400 hover:text-gray-700 absolute top-2 right-2"
+      @click="$emit('close')"
+    >
+      <span class="sr-only">Cerrar</span>
+      <svg
+        class="size-4"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M18 6 6 18" />
+        <path d="m6 6 12 12" />
+      </svg>
+    </button>
+    
+    <!-- Barra de progreso temporal -->
+    <div 
+      v-if="toast.duration && toast.duration > 0"
+      class="absolute bottom-0 left-0 w-full h-1 bg-gray-200 dark:bg-gray-700"
+    >
+      <div
+        class="h-full bg-gradient-to-r"
+        :class="{
+          'from-green-400 to-green-600': toast.severity === 'success',
+          'from-red-400 to-red-600': toast.severity === 'danger',
+          'from-yellow-400 to-yellow-600': toast.severity === 'warning',
+          'from-blue-400 to-blue-600': toast.severity === 'info',
+        }"
+        :style="{ width: progressWidth + '%' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({ toast: Object });
+
+const progressWidth = ref(100)
+const startTime = ref(null)
+let animationFrame = null
+
+// Computed para detectar cambios en duration
+const duration = computed(() => props.toast?.duration || 0)
+
+// Función para actualizar el progreso
+const updateProgress = () => {
+  if (!startTime.value || duration.value <= 0) {
+    progressWidth.value = 100
+    return
+  }
+
+  const elapsed = Date.now() - startTime.value
+  const remaining = Math.max(0, duration.value - elapsed)
+  progressWidth.value = (remaining / duration.value) * 100
+
+  if (remaining > 0) {
+    animationFrame = requestAnimationFrame(updateProgress)
+  }
+}
+
+// Watch para reiniciar cuando cambie el duration
+watch(duration, (newDuration) => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+  }
+  
+  if (newDuration && newDuration > 0) {
+    startTime.value = Date.now()
+    updateProgress()
+  } else {
+    progressWidth.value = 100
+  }
+}, { immediate: true })
+
+onMounted(() => {
+  if (duration.value > 0) {
+    startTime.value = Date.now()
+    updateProgress()
+  }
+})
+
+onUnmounted(() => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame)
+  }
+})
+</script>

package/components/Toast/Container.vue

@@ -0,0 +1,34 @@
+<script setup>
+const toastStore = useToastStore()
+
+const positions = [
+  'top-left', 'top-center', 'top-right',
+  'bottom-left', 'bottom-center', 'bottom-right',
+]
+
+const positionClass = {
+  'top-left':      'top-4 left-4',
+  'top-center':    'top-4 left-1/2 -translate-x-1/2',
+  'top-right':     'top-4 right-4',
+  'bottom-left':   'bottom-4 left-4',
+  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+  'bottom-right':  'bottom-4 right-4',
+}
+</script>
+
+<template>
+  <template v-for="pos in positions" :key="pos">
+    <div
+      v-if="toastStore.toasts[pos]?.length"
+      class="fixed z-50 flex flex-col gap-2"
+      :class="positionClass[pos]"
+    >
+      <ToastAlert
+        v-for="toast in toastStore.toasts[pos]"
+        :key="toast.id"
+        :toast="toast"
+        @close="toastStore.remove(toast.id)"
+      />
+    </div>
+  </template>
+</template>

package/components/Toast/Notification.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg p-4 flex"
+    role="alert"
+  >
+    <div class="shrink-0">
+      <svg
+        class="size-5 text-gray-600 mt-1"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+      </svg>
+    </div>
+    <div class="ms-4">
+      <h3 v-if="toast.title" class="text-gray-800 font-semibold">
+        {{ toast.title }}
+      </h3>
+      <div class="mt-1 text-sm text-gray-600" v-html="toast.message"></div>
+      <div v-if="toast.actions" class="mt-4">
+        <div class="flex gap-x-3">
+          <button
+            v-for="(action, i) in toast.actions"
+            :key="i"
+            @click="action.onClick"
+            class="text-blue-600 decoration-2 hover:underline font-medium text-sm focus:outline-hidden focus:underline"
+          >
+            {{ action.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({ toast: Object });
+</script>

package/components/Toast/Process.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="max-w-xs relative bg-white border border-gray-200 rounded-xl shadow-lg"
+    role="alert"
+  >
+    <div class="flex gap-x-3 p-4">
+      <div class="shrink-0">
+        <span
+          class="m-1 inline-flex justify-center items-center size-8 rounded-full bg-gray-100 text-gray-800"
+        >
+          <svg
+            class="shrink-0 size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"
+            />
+            <path d="M12 12v9" />
+            <path d="m16 16-4-4-4 4" />
+          </svg>
+        </span>
+        <button
+          class="absolute top-3 end-3 inline-flex shrink-0 justify-center items-center size-5 rounded-lg text-gray-800 opacity-50 hover:opacity-100 focus:outline-hidden focus:opacity-100"
+          @click="$emit('close')"
+          aria-label="Close"
+        >
+          <span class="sr-only">Close</span>
+          <svg
+            class="shrink-0 size-4"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="grow me-5">
+        <h3 v-if="toast.title" class="text-gray-800 font-medium text-sm">
+          {{ toast.title }}
+        </h3>
+        <div
+          v-if="toast.progress !== undefined"
+          class="mt-2 flex flex-col gap-x-3"
+        >
+          <span class="block mb-1.5 text-xs text-gray-500">{{
+            toast.progressLabel
+          }}</span>
+          <div
+            class="flex w-full h-1 bg-gray-200 rounded-full overflow-hidden"
+            role="progressbar"
+            :aria-valuenow="toast.progress"
+            aria-valuemin="0"
+            aria-valuemax="100"
+          >
+            <div
+              class="flex flex-col justify-center overflow-hidden bg-blue-600 text-xs text-white text-center whitespace-nowrap"
+              :style="{ width: toast.progress + '%' }"
+            ></div>
+          </div>
+        </div>
+        <div
+          v-else
+          class="mt-2 text-sm text-gray-600"
+          v-html="toast.message"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+defineProps({ toast: Object });
+</script>

package/nuxt.config.ts

@@ -0,0 +1,15 @@
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineNuxtConfig({
+  extends: ['@innertia-solutions/nuxt-core'],
+  css: ['@innertia-solutions/nuxt-theme-spark/spark.css'],
+  components: [
+    { path: './components', pathPrefix: true, prefix: '' },
+  ],
+  imports: {
+    dirs: ['shared/composables', 'shared/stores'],
+  },
+  vite: {
+    plugins: [tailwindcss()],
+  },
+})

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@innertia-solutions/nuxt-theme-spark",
+  "version": "0.1.11",
+  "description": "Innertia Solutions — Spark theme: backoffice, landing and mobile components and layouts",
+  "keywords": [
+    "nuxt",
+    "vue",
+    "theme",
+    "spark",
+    "backoffice",
+    "landing"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/innertia-solutions/innertia-ui-kit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./nuxt.config.ts",
+  "exports": {
+    ".": "./nuxt.config.ts",
+    "./spark.css": "./spark.css"
+  },
+  "peerDependencies": {
+    "nuxt": ">=4.0.0",
+    "vue": ">=3.5.0"
+  },
+  "dependencies": {
+    "@innertia-solutions/nuxt-core": "^0.1.4",
+    "@tabler/icons-vue": "^3.44.0",
+    "preline": "^3.2.3",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "vanilla-calendar-pro": "^3.1.0",
+    "uuid": "^13.0.0"
+  },
+  "devDependencies": {
+    "nuxt": "^4.4.2",
+    "vue": "^3.5.0"
+  }
+}

package/plugins/preline.client.ts

@@ -0,0 +1,68 @@
+declare global {
+  interface Window {
+    HSStaticMethods?: { autoInit?: () => void }
+    HSSelect?: new (el: HTMLElement) => { destroy?: () => void }
+    HSThemeAppearance?: { init?: () => void }
+  }
+}
+
+export default defineNuxtPlugin(async () => {
+  if (!process.client) return
+
+  try {
+    await import('preline')
+
+    const initPreline = () => {
+      try { window.HSStaticMethods?.autoInit?.() } catch (_) {}
+      try { window.HSThemeAppearance?.init?.() } catch (_) {}
+    }
+
+    const performMultipleInits = () => {
+      initPreline()
+      setTimeout(initPreline, 50)
+      setTimeout(initPreline, 200)
+      setTimeout(initPreline, 500)
+    }
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', performMultipleInits)
+    } else {
+      nextTick(performMultipleInits)
+    }
+
+    const nuxtApp = useNuxtApp()
+    nuxtApp.hooks.hookOnce('app:mounted', () => performMultipleInits())
+    nuxtApp.hooks.hook('page:finish', () => requestAnimationFrame(performMultipleInits))
+
+    const observer = new MutationObserver((mutations) => {
+      const hasPreline = mutations.some(({ addedNodes }) =>
+        Array.from(addedNodes).some((node) => {
+          if (node.nodeType !== Node.ELEMENT_NODE) return false
+          const el = node as Element
+          return (
+            el.querySelector?.('[data-hs-overlay],[data-hs-dropdown],[data-hs-select]') ||
+            el.hasAttribute?.('data-hs-overlay') ||
+            el.hasAttribute?.('data-hs-dropdown') ||
+            el.hasAttribute?.('data-hs-select') ||
+            (typeof el.className === 'string' && el.className.includes('hs-'))
+          )
+        })
+      )
+      if (hasPreline) {
+        setTimeout(initPreline, 10)
+        setTimeout(initPreline, 100)
+      }
+    })
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () =>
+        observer.observe(document.body, { childList: true, subtree: true })
+      )
+    } else {
+      observer.observe(document.body, { childList: true, subtree: true })
+    }
+
+  } catch (e) {
+    console.warn('[nuxt-core] Error al cargar Preline:', e)
+  }
+})

package/shared/composables/useForm.js

@@ -0,0 +1,119 @@
+const rules = {
+  required: (value) => {
+    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',
+}
+
+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
+}
+
+export function useForm(formDefinition, options = {}) {
+  const zodSchema = options.zodSchema
+  const form = reactive({})
+  const errors = reactive({})
+
+  for (const field in formDefinition) {
+    form[field] = formDefinition[field]?.value !== undefined ? formDefinition[field].value : ''
+    errors[field] = []
+  }
+
+  const reset = () => {
+    for (const field in formDefinition) {
+      form[field] = formDefinition[field]?.value !== undefined ? formDefinition[field].value : ''
+      errors[field] = []
+    }
+  }
+
+  const resetErrors = () => {
+    for (const field in formDefinition) {
+      errors[field] = []
+    }
+  }
+
+  const validateField = (field) => {
+    const def = formDefinition[field]
+    const value = form[field]
+    errors[field] = []
+    if (!def?.rules) return true
+    def.rules.forEach(rule => {
+      const ruleName = typeof rule === 'string' ? rule : rule.name
+      const 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)
+      }
+    })
+    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] !== undefined) errors[field].push(issue.message)
+        }
+        return false
+      }
+      return true
+    }
+    for (const field in formDefinition) validateField(field)
+    return Object.values(errors).every(e => e.length === 0)
+  }
+
+  const addError = (field, message) => {
+    if (message.startsWith('validation.')) {
+      const key = message.split('.')[1]
+      message = dictionary[key] || key
+    }
+    if (errors[field] !== undefined) errors[field].push(message)
+  }
+
+  const loadFromObject = (obj) => {
+    for (const field in formDefinition) {
+      if (obj[field] !== undefined) form[field] = obj[field]
+    }
+  }
+
+  return {
+    ...toRefs(form),
+    values: form,
+    errors,
+    validate: (field) => field ? validateField(field) : validateForm(),
+    reset,
+    resetErrors,
+    addError,
+    loadFromObject,
+    config: formDefinition,
+  }
+}

package/shared/composables/useTable.ts

@@ -0,0 +1,84 @@
+// composables/useTable.ts
+
+export function useTable() {
+    const invalidateCache = (tableName: string) => {
+        if (!tableName) {
+            console.warn('[useTable] No table name provided');
+            return;
+        }
+
+        const fullCacheKey = `table_cache_${tableName}`;
+
+        try {
+            sessionStorage.removeItem(fullCacheKey);
+        } catch (error) {
+            console.warn('[useTable] Error invalidating cache:', error);
+        }
+    };
+
+    const invalidateMultiple = (tableNames: string[]) => {
+        tableNames.forEach(name => invalidateCache(name));
+    };
+
+    const clearAllCache = () => {
+        try {
+            const keys = Object.keys(sessionStorage);
+            const tableCacheKeys = keys.filter(key => key.startsWith('table_cache_'));
+            tableCacheKeys.forEach(key => sessionStorage.removeItem(key));
+        } catch (error) {
+            console.warn('[useTable] Error clearing all cache:', error);
+        }
+    };
+
+    const useSearch = (tableName: string) => {
+        if (!tableName) {
+            throw new Error('[useTable] Table name is required for useSearch');
+        }
+
+        const searchCache = useState<Record<string, string>>("table-search-cache", () => ({}));
+        const search = ref(searchCache.value[tableName] || "");
+
+        watch(search, (newSearch, oldSearch) => {
+            searchCache.value[tableName] = newSearch;
+
+            if (oldSearch !== undefined && newSearch !== oldSearch) {
+                invalidateCache(tableName);
+            }
+        }, { immediate: true });
+
+        const clearSearch = () => { search.value = ""; };
+
+        return { search, clearSearch };
+    };
+
+    const clearAllSearches = () => {
+        const searchCache = useState<Record<string, string>>("table-search-cache", () => ({}));
+        searchCache.value = {};
+    };
+
+    const getSearchCache = () => {
+        const searchCache = useState<Record<string, string>>("table-search-cache", () => ({}));
+        return searchCache.value;
+    };
+
+    const useFilters = <T extends Record<string, any>>(tableName: string, initialFilters: T) => {
+        if (!tableName) {
+            throw new Error('[useTable] Table name is required for useFilters');
+        }
+
+        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/shared/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
+        })
+    }
+}