@innertia-solutions/innertia-nuxt 0.1.11 → 0.1.13

package/composables/useContext.js

@@ -1,11 +1,46 @@
-// useAuthStore, useApi, useAuth auto-imported
+// useAuthStore, useApi, useAuth, useRoute, useAppConfig auto-imported
 import { computed } from 'vue'
+import type { ContextDefinition } from '../app.config'
 
 export function useContext() {
+  const route = useRoute()
   const authStore = useAuthStore()
+  const appConfig = useAppConfig()
   const api = useApi()
   const { fetchMe } = useAuth()
 
+  // ── Config-level: definiciones declaradas en appConfig.innertia.contexts ───
+
+  /** Diccionario de contextos declarados por el producto. */
+  const contexts = computed<Record<string, ContextDefinition>>(() =>
+    (appConfig.innertia?.contexts ?? {}) as Record<string, ContextDefinition>
+  )
+
+  /** Todos los contextos declarados, en orden de declaración. */
+  const all = computed<ContextDefinition[]>(() => Object.values(contexts.value))
+
+  /** Contexto actual según URL. `null` si la URL no cae en ningún contexto declarado. */
+  const current = computed<ContextDefinition | null>(() => {
+    return all.value.find(ctx =>
+      route.path === ctx.path || route.path.startsWith(ctx.path + '/')
+    ) ?? null
+  })
+
+  /** Contextos a los que el usuario autenticado tiene acceso (filtrado por `availableContexts`). */
+  const accessible = computed<ContextDefinition[]>(() => {
+    const ctxs = (authStore.availableContexts ?? []) as string[]
+    return all.value.filter(ctx => ctxs.includes(ctx.context))
+  })
+
+  /** Helper: ¿el usuario puede acceder a este contexto (por clave de config)? */
+  function canAccess(key: string): boolean {
+    const ctx = contexts.value[key]
+    if (!ctx) return false
+    return ((authStore.availableContexts ?? []) as string[]).includes(ctx.context)
+  }
+
+  // ── Runtime: contexto activo + switching ───────────────────────────────────
+
   const currentContext = computed(() => authStore.currentContext)
   const availableContexts = computed(() => authStore.availableContexts)
 
@@ -15,7 +50,7 @@ export function useContext() {
    *   { success: false, reason: 'no_permission' }  — user cannot switch
    *   { success: true, requiresConfirmation: true } — show confirmation UI
    */
-  async function switchContext(targetContext) {
+  async function switchContext(targetContext: string) {
     const data = await api.get(`auth/context/${targetContext}/check`)
     if (!data.hasAccess) {
       return { success: false, reason: 'no_permission' }
@@ -27,7 +62,7 @@ export function useContext() {
    * Execute the context switch after user confirmation.
    * Updates store and reloads permissions via fetchMe.
    */
-  async function confirmSwitch(targetContext) {
+  async function confirmSwitch(targetContext: string) {
     authStore.setCurrentContext(targetContext)
     await fetchMe()
     return { success: true }
@@ -36,9 +71,22 @@ export function useContext() {
   /**
    * Quick synchronous check — is this context in the available list?
    */
-  function hasAccessToContext(context) {
+  function hasAccessToContext(context: string) {
     return authStore.availableContexts.includes(context)
   }
 
-  return { currentContext, availableContexts, switchContext, confirmSwitch, hasAccessToContext }
+  return {
+    // config-level
+    contexts,
+    all,
+    current,
+    accessible,
+    canAccess,
+    // runtime
+    currentContext,
+    availableContexts,
+    switchContext,
+    confirmSwitch,
+    hasAccessToContext,
+  }
 }

package/composables/useFile.js

@@ -0,0 +1,189 @@
+import {
+  IconFile, IconPhoto, IconVideo, IconMusic, IconFileZip,
+  IconFileTypePdf, IconFileTypeXls, IconFileTypeCsv,
+  IconFileTypeDocx, IconFileTypePpt, IconFileTypeTxt,
+} from '@tabler/icons-vue'
+
+/**
+ * useFile — API unificada para trabajar con archivos del backend innertia-laravel.
+ *
+ * Cubre:
+ *   - upload(endpoint, file|files, { field, onProgress, extraData, signal })
+ *   - download(fileId, filename?)            — trigger descarga programática
+ *   - view(fileId)                            — abrir inline en otra pestaña
+ *   - viewUrl(fileId) / downloadUrl(fileId)   — URLs absolutas a las rutas de innertia-laravel
+ *   - formatSize(bytes)                       — helper humano-legible
+ *   - iconFor(mimeType)                       — devuelve el componente Tabler para el mime
+ *
+ * Autenticación: los interceptores de useApi (auth Bearer, X-Tenant, X-Organization)
+ * se aplican automáticamente al XHR de upload.
+ */
+export function useFile() {
+  const config  = useRuntimeConfig()
+  const baseUrl = config.public.apiBaseUrl || '/api'
+
+  // useRequestInterceptors es el mismo que usa useApi() — comparte auth/tenant/org headers.
+  const { run } = useRequestInterceptors()
+
+  // ── URLs ───────────────────────────────────────────────────────────────────
+  /** GET /files/{id} — inline view (respeta permisos del backend). */
+  const viewUrl     = (fileId) => `${baseUrl}/files/${fileId}`
+  /** GET /files/{id}/download — force download (respeta permisos). */
+  const downloadUrl = (fileId) => `${baseUrl}/files/${fileId}/download`
+
+  // ── Helpers ────────────────────────────────────────────────────────────────
+  const formatSize = (bytes) => {
+    if (bytes == null) return ''
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+    return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`
+  }
+
+  /** Devuelve el componente Tabler para un mime type. */
+  const iconFor = (mimeType) => {
+    if (!mimeType) return IconFile
+    if (mimeType.startsWith('image/'))                          return IconPhoto
+    if (mimeType.startsWith('video/'))                          return IconVideo
+    if (mimeType.startsWith('audio/'))                          return IconMusic
+    if (mimeType === 'application/pdf')                         return IconFileTypePdf
+    if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return IconFileTypeXls
+    if (mimeType === 'text/csv')                                return IconFileTypeCsv
+    if (mimeType.includes('word') || mimeType.includes('document')) return IconFileTypeDocx
+    if (mimeType.includes('presentation') || mimeType.includes('powerpoint')) return IconFileTypePpt
+    if (mimeType.startsWith('text/'))                           return IconFileTypeTxt
+    if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive')) return IconFileZip
+    return IconFile
+  }
+
+  // ── View / Download ────────────────────────────────────────────────────────
+  /** Abre el file inline en una nueva pestaña (usa la auth de cookie). */
+  const view = (fileId) => {
+    if (typeof window === 'undefined') return
+    window.open(viewUrl(fileId), '_blank', 'noopener,noreferrer')
+  }
+
+  /**
+   * Trigger descarga programática. Funciona con archivos auth/restricted
+   * porque el browser envía cookies automáticamente.
+   */
+  const download = (fileId, filename) => {
+    if (typeof window === 'undefined') return
+    const a = document.createElement('a')
+    a.href = downloadUrl(fileId)
+    if (filename) a.download = filename
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+  }
+
+  // ── Upload (con progress vía XHR) ──────────────────────────────────────────
+  /**
+   * Upload un archivo (o lista) a un endpoint del producto. El endpoint
+   * recibe `multipart/form-data` con el campo `field` y debe persistir el
+   * archivo (típicamente `File::fromRequest($request, 'file')` del lado Laravel).
+   *
+   * Para varios archivos pasa un array — el campo se envía como `field[]`.
+   * Devuelve el JSON parseado del response (típicamente el File record creado).
+   *
+   * Opciones:
+   *   field       — nombre del campo. Default 'file'.
+   *   onProgress  — callback(percent: number 0-100)
+   *   extraData   — campos adicionales para incluir en el FormData
+   *   signal      — AbortSignal para cancelar
+   */
+  const upload = (endpoint, file, options = {}) => {
+    const field    = options.field ?? 'file'
+    const files    = Array.isArray(file) ? file : [file]
+    const formData = new FormData()
+    const fieldName = files.length > 1 ? `${field}[]` : field
+
+    for (const f of files) formData.append(fieldName, f)
+
+    if (options.extraData) {
+      for (const [k, v] of Object.entries(options.extraData)) {
+        if (v == null) continue
+        formData.append(k, typeof v === 'object' ? JSON.stringify(v) : String(v))
+      }
+    }
+
+    // Recolectar headers vía los interceptores (auth, tenant, org).
+    // NO incluimos Content-Type — el browser lo setea con el boundary correcto.
+    const headers = {
+      'Accept': 'application/json',
+      'X-Innertia-Source': import.meta.server ? 'ssr' : 'client',
+    }
+    run(headers, {})
+    delete headers['Content-Type']
+
+    const cleanPath = endpoint.startsWith('/') ? endpoint.slice(1) : endpoint
+    const url       = `${baseUrl}/${cleanPath}`
+
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest()
+      xhr.open('POST', url)
+      xhr.withCredentials = true
+
+      for (const [k, v] of Object.entries(headers)) {
+        try { xhr.setRequestHeader(k, v) } catch (_) { /* algunos headers son read-only */ }
+      }
+
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable && options.onProgress) {
+          options.onProgress(Math.round((e.loaded / e.total) * 100), e.loaded, e.total)
+        }
+      })
+
+      // Cuando el upload del cliente terminó (100%) pero el server aún no
+      // respondió — útil para mostrar estado "Procesando…" en la UI.
+      xhr.upload.addEventListener('loadend', () => {
+        options.onUploaded?.()
+      })
+
+      xhr.addEventListener('load', () => {
+        const status = xhr.status
+        const ctype  = xhr.getResponseHeader('content-type') ?? ''
+        const body   = ctype.includes('application/json')
+          ? safeJsonParse(xhr.responseText)
+          : xhr.responseText
+
+        if (status >= 200 && status < 300) {
+          resolve(body)
+        } else {
+          const err = new Error(`Upload failed (${status})`)
+          err.status = status
+          err.data   = body
+          reject(err)
+        }
+      })
+
+      xhr.addEventListener('error',   () => reject(new Error('Network error during upload')))
+      xhr.addEventListener('abort',   () => reject(Object.assign(new Error('Upload aborted'), { aborted: true })))
+      xhr.addEventListener('timeout', () => reject(new Error('Upload timeout')))
+
+      if (options.signal) {
+        if (options.signal.aborted) {
+          xhr.abort()
+          return
+        }
+        options.signal.addEventListener('abort', () => xhr.abort())
+      }
+
+      xhr.send(formData)
+    })
+  }
+
+  return {
+    upload,
+    download,
+    view,
+    viewUrl,
+    downloadUrl,
+    formatSize,
+    iconFor,
+  }
+}
+
+function safeJsonParse(text) {
+  try { return JSON.parse(text) } catch { return text }
+}

package/composables/useMobileGuard.ts

@@ -1,61 +1,61 @@
 import { useMediaQuery } from '@vueuse/core'
-import type { AppDefinition } from '../app.config'
+import type { ContextDefinition } from '../app.config'
 
-const PICKER_CHOICE_COOKIE = 'innertia_mobile_app_choice'
+const PICKER_CHOICE_COOKIE = 'innertia_mobile_context_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)
+ *   - 0 contextos mobile-friendly  → blocker "abre en escritorio"
+ *   - 1 contexto mobile-friendly   → redirect directo al login de ese contexto
+ *   - 2+ contextos 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 { all, current, accessible } = useContext()
   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[]>(() =>
+  /** Contextos con mode 'allow' en mobile. */
+  const mobileContexts = computed<ContextDefinition[]>(() =>
     all.value.filter(a => a.mobile?.mode === 'allow')
   )
 
-  /** Apps mobile-friendly + accesibles para el usuario autenticado. */
-  const mobileAccessibleApps = computed<AppDefinition[]>(() =>
+  /** Contextos mobile-friendly + accesibles para el usuario autenticado. */
+  const mobileAccessibleContexts = computed<ContextDefinition[]>(() =>
     accessible.value.filter(a => a.mobile?.mode === 'allow')
   )
 
-  /** ¿El app actual está bloqueado en mobile? */
-  const isCurrentAppBlocked = computed<boolean>(() => {
+  /** ¿El contexto actual está bloqueado en mobile? */
+  const isCurrentContextBlocked = 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,
+   * Para el blocker: si el usuario está autenticado y tiene OTRO contexto mobile-friendly,
    * lo ofrecemos como fallback ("continuar en X").
    */
-  const mobileFallbackApp = computed<AppDefinition | null>(() => {
+  const mobileFallbackContext = computed<ContextDefinition | null>(() => {
     if (!authStore.isAuthenticated()) return null
-    return mobileAccessibleApps.value[0] ?? null
+    return mobileAccessibleContexts.value[0] ?? null
   })
 
   // ── Cookie helpers para recordar última elección del picker ─────────────────
-  function rememberPickerChoice(appKey: string) {
+  function rememberPickerChoice(contextKey: 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
+    cookie.value = contextKey
   }
 
   function getRememberedPickerChoice(): string | null {
@@ -70,10 +70,10 @@ export function useMobileGuard() {
 
   return {
     isMobile,
-    mobileApps,
-    mobileAccessibleApps,
-    isCurrentAppBlocked,
-    mobileFallbackApp,
+    mobileContexts,
+    mobileAccessibleContexts,
+    isCurrentContextBlocked,
+    mobileFallbackContext,
     rememberPickerChoice,
     getRememberedPickerChoice,
     clearRememberedPickerChoice,

package/composables/useModal.js

@@ -0,0 +1,71 @@
+// composables/useModal.js
+import { useModalStore } from '../stores/modal'
+
+/**
+ * useModal() — API promise-based para modales programáticos.
+ *
+ * Requiere <ModalHost /> montado una vez en el layout root.
+ *
+ * ```js
+ * const { confirm, alert, prompt, open } = useModal()
+ *
+ * if (await confirm({ severity: 'danger', message: '¿Eliminar?' })) {
+ *   // user confirmed
+ * }
+ *
+ * await alert({ severity: 'success', message: 'Listo' })
+ *
+ * const name = await prompt({ title: 'Nombre', placeholder: 'Tu nombre' })
+ *
+ * const result = await open(MyCustomModal, { foo: 'bar' })
+ * ```
+ */
+export function useModal() {
+  const store = useModalStore()
+
+  /** Confirmación. Resuelve true/false. */
+  const confirm = (opts = {}) => store.open({
+    kind: 'confirm',
+    props: {
+      severity:    opts.severity    ?? 'question',
+      title:       opts.title       ?? '',
+      message:     opts.message     ?? '',
+      confirmText: opts.confirmText ?? 'Confirmar',
+      cancelText:  opts.cancelText  ?? 'Cancelar',
+    },
+  })
+
+  /** Alert simple — solo botón OK. Resuelve undefined. */
+  const alert = (opts = {}) => store.open({
+    kind: 'alert',
+    props: {
+      severity:    opts.severity    ?? 'info',
+      title:       opts.title       ?? '',
+      message:     opts.message     ?? '',
+      confirmText: opts.confirmText ?? 'Entendido',
+    },
+  })
+
+  /** Prompt — pide un string. Resuelve string|null (null si cancela). */
+  const prompt = (opts = {}) => store.open({
+    kind: 'prompt',
+    props: {
+      title:       opts.title       ?? 'Ingresar valor',
+      message:     opts.message     ?? '',
+      placeholder: opts.placeholder ?? '',
+      defaultValue: opts.defaultValue ?? '',
+      confirmText: opts.confirmText ?? 'Aceptar',
+      cancelText:  opts.cancelText  ?? 'Cancelar',
+      required:    opts.required    ?? false,
+    },
+  })
+
+  /** Modal custom — montá tu propio componente. Resuelve con lo que pase a $close(value). */
+  const open = (component, props = {}) => store.open({
+    kind: 'component',
+    component,
+    props,
+  })
+
+  return { confirm, alert, prompt, open }
+}

package/composables/useOrganization.ts

@@ -1,7 +1,7 @@
 /**
  * Composable de organizaciones (sub-tenant scoping).
  *
- * Lee el contexto actual del usuario (via useApp) y expone su org activa + lista
+ * Lee el contexto actual del usuario (via useContext) y expone su org activa + lista
  * de accesibles para ese contexto. Cambiar de contexto rota la org automáticamente.
  *
  * Uso típico:
@@ -10,7 +10,7 @@
  *   <OrganizationSwitcher v-if="available.length > 1" />
  */
 export function useOrganization() {
-  const { current: currentApp } = useApp()
+  const { current: currentApp } = useContext()
   const organizationStore = useOrganizationStore()
   const appConfig = useAppConfig()
   const { fetchMe } = useAuth()
@@ -19,7 +19,7 @@ export function useOrganization() {
   const allowConsolidated = computed(() => !!appConfig.innertia?.organizations?.allowConsolidated)
   const required = computed(() => !!appConfig.innertia?.organizations?.required)
 
-  /** Contexto actual (key) — desde useApp. */
+  /** Contexto actual (key) — desde useContext. */
   const currentContext = computed<string | null>(() => currentApp.value?.context ?? null)
 
   /** Lista de orgs accesibles para el contexto actual. */

package/composables/useToast.js

@@ -1,69 +1,42 @@
-// app/composables/useToast.js
+// composables/useToast.js
 import { useToastStore } from '../stores/toast'
 
+/**
+ * useToast() — API limpia para mostrar toasts.
+ *
+ * ```js
+ * const toast = useToast()
+ *
+ * toast.success('Guardado')
+ * toast.error('Algo falló', { title: 'Error', duration: 8000 })
+ * toast.warning('Atención')
+ * toast.info('Tip')
+ *
+ * toast.notify({ title: 'Nueva mención', message: 'Te etiquetaron', action: { label: 'Ver', onClick: () => {} } })
+ *
+ * const id = toast.process('Subiendo archivo…', { position: 'bottom-right' })
+ * toast.updateProgress(id, 40, '40%')
+ * toast.completeProcess(id, 'Listo')
+ *
+ * toast.dismiss(id)
+ * toast.clear() // todos
+ * ```
+ */
 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
-        })
-    }
+  const store = useToastStore()
+  return {
+    show:            store.show.bind(store),
+    success:         store.success.bind(store),
+    error:           store.error.bind(store),
+    warning:         store.warning.bind(store),
+    info:            store.info.bind(store),
+    notify:          store.notify.bind(store),
+    process:         store.process.bind(store),
+    update:          store.update.bind(store),
+    updateProgress:  store.updateProgress.bind(store),
+    completeProcess: store.completeProcess.bind(store),
+    failProcess:     store.failProcess.bind(store),
+    dismiss:         store.dismiss.bind(store),
+    clear:           store.clear.bind(store),
+  }
 }