@innertia-solutions/innertia-nuxt 0.1.1

package/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/composables/useInnertiaMode.ts

@@ -0,0 +1,25 @@
+import type { InnertiaMode } from '../app.config'
+
+/**
+ * Devuelve el modo activo de la librería: 'saas' | 'app'.
+ * Default: 'saas' (compatibilidad con productos existentes).
+ *
+ * Se configura en `nuxt.config.ts` del producto:
+ *   appConfig: { innertia: { mode: 'app' } }
+ *
+ * Helpers de conveniencia:
+ *   isSaas()    → true si mode === 'saas'
+ *   isApp()     → true si mode === 'app'
+ *   hasTenant() → true si mode === 'saas' (solo saas usa multitenancy)
+ */
+export function useInnertiaMode() {
+  const appConfig = useAppConfig()
+  const mode: InnertiaMode = (appConfig.innertia?.mode as InnertiaMode) ?? 'saas'
+
+  return {
+    mode,
+    isSaas:    () => mode === 'saas',
+    isApp:     () => mode === 'app',
+    hasTenant: () => mode === 'saas',
+  }
+}

package/composables/useMobileGuard.ts

@@ -0,0 +1,81 @@
+import { useMediaQuery } from '@vueuse/core'
+import type { AppDefinition } from '../app.config'
+
+const PICKER_CHOICE_COOKIE = 'innertia_mobile_app_choice'
+const PICKER_COOKIE_MAX_AGE = 60 * 60 * 24 * 30  // 30 días
+
+/**
+ * Detección reactiva de viewport mobile + lógica de landing.
+ *
+ * Reglas para `landing` (qué mostrar cuando el usuario entra a `/` en mobile):
+ *   - 0 apps mobile-friendly  → blocker "abre en escritorio"
+ *   - 1 app mobile-friendly   → redirect directo al login de ese app
+ *   - 2+ apps mobile-friendly → picker (con cookie para recordar última elección)
+ *
+ * El breakpoint se lee desde `appConfig.innertia.mobile.breakpoint` (default 1024).
+ */
+export function useMobileGuard() {
+  const { all, current, accessible } = useApp()
+  const authStore = useAuthStore()
+  const appConfig = useAppConfig()
+
+  const breakpoint: number = appConfig.innertia?.mobile?.breakpoint ?? 1024
+  const isMobile = useMediaQuery(`(max-width: ${breakpoint - 1}px)`)
+
+  /** Apps con mode 'allow' en mobile. */
+  const mobileApps = computed<AppDefinition[]>(() =>
+    all.value.filter(a => a.mobile?.mode === 'allow')
+  )
+
+  /** Apps mobile-friendly + accesibles para el usuario autenticado. */
+  const mobileAccessibleApps = computed<AppDefinition[]>(() =>
+    accessible.value.filter(a => a.mobile?.mode === 'allow')
+  )
+
+  /** ¿El app actual está bloqueado en mobile? */
+  const isCurrentAppBlocked = computed<boolean>(() => {
+    if (!isMobile.value) return false
+    if (!current.value) return false
+    return current.value.mobile?.mode === 'block'
+  })
+
+  /**
+   * Para el blocker: si el usuario está autenticado y tiene OTRO app mobile-friendly,
+   * lo ofrecemos como fallback ("continuar en X").
+   */
+  const mobileFallbackApp = computed<AppDefinition | null>(() => {
+    if (!authStore.isAuthenticated()) return null
+    return mobileAccessibleApps.value[0] ?? null
+  })
+
+  // ── Cookie helpers para recordar última elección del picker ─────────────────
+  function rememberPickerChoice(appKey: string) {
+    if (!(appConfig.innertia?.mobile?.rememberChoice ?? true)) return
+    const cookie = useCookie<string | null>(PICKER_CHOICE_COOKIE, {
+      maxAge: PICKER_COOKIE_MAX_AGE,
+      sameSite: 'lax',
+    })
+    cookie.value = appKey
+  }
+
+  function getRememberedPickerChoice(): string | null {
+    const cookie = useCookie<string | null>(PICKER_CHOICE_COOKIE)
+    return cookie.value ?? null
+  }
+
+  function clearRememberedPickerChoice() {
+    const cookie = useCookie<string | null>(PICKER_CHOICE_COOKIE)
+    cookie.value = null
+  }
+
+  return {
+    isMobile,
+    mobileApps,
+    mobileAccessibleApps,
+    isCurrentAppBlocked,
+    mobileFallbackApp,
+    rememberPickerChoice,
+    getRememberedPickerChoice,
+    clearRememberedPickerChoice,
+  }
+}

package/composables/useNotifications.js

@@ -0,0 +1,22 @@
+export function useNotifications() {
+  const api = useApi()
+  const store = useNotificationsStore()
+
+  async function fetchNotifications(params = {}) {
+    const data = await api.get('auth/me/notifications', { params })
+    store.setNotifications(data?.data ?? data ?? [])
+    return data
+  }
+
+  async function markAsRead(id) {
+    await api.put(`auth/me/notifications/${id}/read`)
+    store.markRead(id)
+  }
+
+  async function markAllAsRead() {
+    await api.put('auth/me/notifications/read-all')
+    store.markAllRead()
+  }
+
+  return { fetchNotifications, markAsRead, markAllAsRead }
+}

package/composables/usePermissions.js

@@ -0,0 +1,23 @@
+// useAuthStore, useApi auto-imported
+
+export function usePermissions() {
+  const authStore = useAuthStore()
+  const api = useApi()
+
+  /** Check a single permission string */
+  const can = (permission) => authStore.permissions.includes(permission)
+
+  /** Check a single role string */
+  const hasRole = (role) => authStore.user?.roles?.includes(role) ?? false
+
+  /** True if user has at least one of the given permissions */
+  const hasAny = (permissions) => permissions.some(p => authStore.permissions.includes(p))
+
+  /** True if user has all of the given permissions */
+  const hasAll = (permissions) => permissions.every(p => authStore.permissions.includes(p))
+
+  /** Fetch all permission groups from backoffice — returns [{ category, category_alias, permissions[] }] */
+  const all = (params = {}) => api.get('backoffice/permissions', { params })
+
+  return { can, hasRole, hasAny, hasAll, all }
+}

package/composables/useRealtime.js

@@ -0,0 +1,123 @@
+import { ref, readonly } from 'vue'
+// useRequestInterceptors is auto-imported from this same package (nuxt-core)
+
+const pusher = ref(null)
+const connected = ref(false)
+const error = ref(null)
+const subscribedChannels = ref({})
+let alreadyConnected = false
+
+export function useRealtime() {
+  const config = useRuntimeConfig()
+  const {
+    pusherAppKey,
+    pusherAppCluster,
+    pusherWsHost,
+    pusherWsPort,
+  } = config.public
+
+  const connect = async () => {
+    if (alreadyConnected || pusher.value) return
+
+    if (!pusherAppKey) {
+      error.value = '[nuxt-core] Falta runtimeConfig.public.pusherAppKey'
+      console.error(error.value)
+      return
+    }
+
+    const PusherModule = await import('pusher-js')
+    const Pusher = PusherModule.default ?? PusherModule
+
+    // Build auth headers from all registered interceptors (auth token, X-Tenant-Id, etc.)
+    const { run } = useRequestInterceptors()
+    const authHeaders = {}
+    run(authHeaders)
+
+    const options = {
+      cluster: pusherAppCluster || 'mt1',
+      forceTLS: true,
+      enabledTransports: ['ws', 'wss'],
+      auth: {
+        headers: authHeaders,
+      },
+    }
+
+    // Socketi / host personalizado
+    if (pusherWsHost) {
+      options.wsHost = pusherWsHost
+      options.wsPort = pusherWsPort ? Number(pusherWsPort) : 443
+      options.wssPort = pusherWsPort ? Number(pusherWsPort) : 443
+    }
+
+    pusher.value = new Pusher(pusherAppKey, options)
+
+    pusher.value.connection.bind('connected', () => {
+      connected.value = true
+      alreadyConnected = true
+    })
+
+    pusher.value.connection.bind('error', (err) => {
+      error.value = err
+      connected.value = false
+      alreadyConnected = false
+      pusher.value = null // allow reconnect after error
+      console.error('[nuxt-core] Realtime error:', err)
+    })
+
+    pusher.value.connection.bind('disconnected', () => {
+      connected.value = false
+      alreadyConnected = false
+    })
+  }
+
+  const subscribe = (channelName, eventHandlers = {}) => {
+    if (!pusher.value) {
+      console.warn(`[nuxt-core] Realtime no conectado. Canal "${channelName}" ignorado.`)
+      return null
+    }
+
+    if (subscribedChannels.value[channelName]) {
+      const channel = subscribedChannels.value[channelName]
+      Object.entries(eventHandlers).forEach(([event, handler]) => {
+        channel.unbind(event)
+        channel.bind(event, handler)
+      })
+      return channel
+    }
+
+    const channel = pusher.value.subscribe(channelName)
+    Object.entries(eventHandlers).forEach(([event, handler]) => {
+      channel.bind(event, handler)
+    })
+    subscribedChannels.value[channelName] = channel
+    return channel
+  }
+
+  const unsubscribe = (channelName) => {
+    if (pusher.value && subscribedChannels.value[channelName]) {
+      pusher.value.unsubscribe(channelName)
+      delete subscribedChannels.value[channelName]
+    }
+  }
+
+  const disconnect = () => {
+    if (pusher.value) {
+      Object.keys(subscribedChannels.value).forEach(ch => pusher.value.unsubscribe(ch))
+      subscribedChannels.value = {}
+      pusher.value.disconnect()
+      pusher.value = null
+      connected.value = false
+      alreadyConnected = false
+    }
+  }
+
+  return {
+    pusherInstance: readonly(pusher),
+    connected: readonly(connected),
+    error: readonly(error),
+    connect,
+    disconnect,
+    subscribe,
+    unsubscribe,
+  }
+}

package/composables/useRequestInterceptors.js

@@ -0,0 +1,27 @@
+/**
+ * Module-level singleton registry.
+ * Shared by useApi (nuxt-app), useRealtime, and useDownload (nuxt-core).
+ * Each layer adds interceptors at plugin init time.
+ */
+const interceptors = []
+
+export function useRequestInterceptors() {
+  /**
+   * Register an interceptor function.
+   * fn(headers: object, options: object) — mutates headers in place.
+   * Idempotent: adding the same fn twice is a no-op.
+   */
+  const add = (fn) => {
+    if (!interceptors.includes(fn)) interceptors.push(fn)
+  }
+
+  /**
+   * Run all registered interceptors.
+   * headers and options are passed by reference; interceptors mutate headers.
+   */
+  const run = (headers, options = {}) => {
+    for (const fn of interceptors) fn(headers, options)
+  }
+
+  return { add, run }
+}

package/composables/useRoles.js

@@ -0,0 +1,53 @@
+export function useRoles() {
+  const api = useApi()
+  const queryClient = useQueryClient()
+
+  // ─── Queries ──────────────────────────────────────────────────────────────
+
+  const list = (params = {}) => useQuery({
+    queryKey: computed(() => ['roles', toValue(params)]),
+    queryFn: () => api.post('backoffice/roles', toValue(params)),
+  })
+
+  const detail = (id) => useQuery({
+    queryKey: computed(() => ['roles', toValue(id)]),
+    queryFn: () => api.get(`backoffice/roles/${toValue(id)}`),
+    enabled: computed(() => !!toValue(id)),
+  })
+
+  // ─── Mutations ────────────────────────────────────────────────────────────
+
+  const invalidateRoles = () => queryClient.invalidateQueries({ queryKey: ['roles'] })
+
+  const create = () => useMutation({
+    mutationFn: (data) => api.post('backoffice/roles', data),
+    onSuccess: invalidateRoles,
+  })
+
+  const update = () => useMutation({
+    mutationFn: ({ id, ...data }) => api.put(`backoffice/roles/${id}`, data),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: ['roles', id] })
+      invalidateRoles()
+    },
+  })
+
+  const remove = () => useMutation({
+    mutationFn: (id) => api.delete(`backoffice/roles/${id}`),
+    onSuccess: invalidateRoles,
+  })
+
+  const syncPermissions = () => useMutation({
+    mutationFn: ({ id, permissions }) =>
+      api.post(`backoffice/roles/${id}/permissions`, { permissions }),
+    onSuccess: (_, { id }) =>
+      queryClient.invalidateQueries({ queryKey: ['roles', id] }),
+  })
+
+  return {
+    // queries
+    list, detail,
+    // mutations
+    create, update, remove, syncPermissions,
+  }
+}

package/composables/useRutFormatter.js

@@ -0,0 +1,39 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const formatRut = (rut) => {
+    const clean = rut.replace(/[^\dKk]/g, '').toUpperCase()
+    if (clean.length <= 1) return clean
+    const body = clean.slice(0, -1)
+    const dv = clean.slice(-1)
+    const formatted = body.replace(/\B(?=(\d{3})+(?!\d))/g, '.')
+    return `${formatted}-${dv}`
+}
+
+/**
+ * Attaches RUT auto-formatting to an input element ref.
+ * Cleans up the listener on unmount.
+ *
+ * @param {Ref<HTMLInputElement | null>} inputRef - template ref to the input
+ * @returns {{ formattedRut: Ref<string> }}
+ */
+export const useRutFormatter = (inputRef) => {
+    const formattedRut = ref('')
+
+    const handler = (e) => {
+        const value = formatRut(e.target.value)
+        e.target.value = value
+        formattedRut.value = value
+    }
+
+    onMounted(() => {
+        const el = inputRef?.value ?? inputRef
+        if (el) el.addEventListener('input', handler)
+    })
+
+    onBeforeUnmount(() => {
+        const el = inputRef?.value ?? inputRef
+        if (el) el.removeEventListener('input', handler)
+    })
+
+    return { formattedRut }
+}

package/composables/useTable.ts

@@ -0,0 +1,94 @@
+// composables/useTable.ts
+
+type TableConfig = { name: string; endpoint: string } | string
+
+export function useTable(tableOrName?: TableConfig) {
+    const resolvedName = typeof tableOrName === 'object' ? tableOrName?.name : tableOrName
+
+    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 };
+    };
+
+    const invalidate = () => {
+        if (resolvedName) invalidateCache(resolvedName)
+        else console.warn('[useTable] No table name to invalidate')
+    }
+
+    return {
+        invalidate,
+        invalidateCache,
+        invalidateMultiple,
+        clearAllCache,
+        useSearch,
+        useFilters,
+        clearAllSearches,
+        getSearchCache
+    };
+}

package/composables/useTablePreferences.ts

@@ -0,0 +1,33 @@
+import { useDebounceFn } from '@vueuse/core'
+
+export interface TablePreferences {
+  pinning?: { left: string[], right: string[] }
+  visibility?: Record<string, boolean>
+  order?: string[]
+}
+
+export function useTablePreferences(tableName: string) {
+  const api = useApi()
+  const prefKey = `table:${tableName}:columns`
+
+  const preferences = ref<TablePreferences>({})
+
+  const load = async () => {
+    try {
+      const data = await api.get(`auth/me/preferences/${prefKey}`)
+      preferences.value = data?.value ?? {}
+    } catch {
+      preferences.value = {}
+    }
+  }
+
+  const save = useDebounceFn(async (value: TablePreferences) => {
+    try {
+      await api.put(`auth/me/preferences/${prefKey}`, { value, cast: 'json' })
+    } catch {
+      // silent fail — preferencias no son críticas
+    }
+  }, 800)
+
+  return { preferences, load, save }
+}

package/composables/useTenant.js

@@ -0,0 +1,27 @@
+// useTenantStore auto-imported from saas stores
+// useApi auto-imported from nuxt-app composables
+import { computed } from 'vue'
+
+export function useTenant() {
+  const tenantStore = useTenantStore()
+  const api = useApi()
+
+  const currentTenant = computed(() => tenantStore.tenantId)
+  const tenantSlug = computed(() => tenantStore.tenantSlug)
+
+  /**
+   * Recarga la config completa del tenant desde el backend.
+   * El header X-Tenant-Id se inyecta automáticamente via el plugin api-tenant.
+   * Llamar después del login en una app SaaS.
+   */
+  async function loadConfig() {
+    const data = await api.get('tenant/config')
+    tenantStore.setTenant(tenantStore.tenantId, data)
+    return data
+  }
+
+  const isFeatureEnabled = (feature) => tenantStore.isFeatureEnabled(feature)
+  const getOauthProviders = () => tenantStore.getOauthProviders()
+
+  return { currentTenant, tenantSlug, loadConfig, isFeatureEnabled, getOauthProviders }
+}