@innertia-solutions/innertia-nuxt 0.1.48 → 0.1.50

package/components/Files/Card.vue

@@ -42,19 +42,22 @@ const props = defineProps({
 
 const emit = defineEmits(['click', 'delete'])
 
-const { download, view, viewUrl, formatSize, iconFor } = useFile()
+const { download, view, fileViewUrl, formatSize, iconFor } = useFile()
 
 const isImage = computed(() => props.file?.mime_type?.startsWith('image/'))
+
+// Thumbnail: view_url firmado del backend (o fallback a la ruta por-id).
+const thumbSrc = computed(() => fileViewUrl(props.file))
 const showThumb = computed(() => props.previewImage && isImage.value)
 const icon = computed(() => iconFor(props.file?.mime_type))
 
 const handleDownload = (e) => {
   e?.stopPropagation?.()
-  download(props.file.id, props.file.original_name)
+  download(props.file)
 }
 const handleView = (e) => {
   e?.stopPropagation?.()
-  view(props.file.id)
+  view(props.file)
 }
 const handleDelete = (e) => {
   e?.stopPropagation?.()
@@ -83,7 +86,7 @@ const handleDelete = (e) => {
     <div class="shrink-0">
       <img
         v-if="showThumb"
-        :src="viewUrl(file.id)"
+        :src="thumbSrc"
         :alt="file.original_name"
         class="size-10 rounded-control object-cover bg-muted"
       />
@@ -147,7 +150,7 @@ const handleDelete = (e) => {
       <!-- Imagen real -->
       <img
         v-if="showThumb"
-        :src="viewUrl(file.id)"
+        :src="thumbSrc"
         :alt="file.original_name"
         class="size-full object-cover"
       />

package/components/Files/Preview.vue

@@ -37,10 +37,15 @@ const props = defineProps({
   showToolbar: { type: Boolean, default: true },
 })
 
-const { viewUrl, download, view, formatSize, iconFor } = useFile()
+const { fileViewUrl, download, view, formatSize, iconFor } = useFile()
 
 const fileIcon = computed(() => iconFor(props.file?.mime_type))
 
+// URL de serving preferida: el view_url FIRMADO del backend (dominio propio, la
+// firma es la credencial → sirve en <img>/<iframe>/fetch sin Bearer ni cookie).
+// Cae a la ruta por-id solo si el resource no trajo la URL firmada.
+const src = computed(() => fileViewUrl(props.file))
+
 // ─── Tipo de viewer ──────────────────────────────────────────────────────────
 const viewerType = computed(() => {
   const mime = (props.file?.mime_type || '').toLowerCase()
@@ -55,10 +60,13 @@ const viewerType = computed(() => {
   if (mime === 'text/markdown' || ['md', 'markdown'].includes(ext)) return 'markdown'
   if (mime === 'text/csv' || ['csv', 'tsv'].includes(ext)) return 'csv'
 
-  if (mime.startsWith('text/') || ['log','yml','yaml','env','sh','js','ts','tsx','jsx','css','html','xml','php','py','rb','go','rs','java','sql','toml','ini'].includes(ext)) return 'text'
+  // Office por EXTENSIÓN antes del check de text/*: un .xls/.xlsx/.doc/.docx
+  // suele llegar con mime mal detectado (p.ej. text/plain u octet-stream) y aun
+  // así debe usar el renderer rico (Excel con pestañas / docx), no el de texto.
+  if (['xlsx', 'xls'].includes(ext) || mime.includes('spreadsheet') || mime.includes('excel')) return 'xlsx'
+  if (['docx', 'doc'].includes(ext) || mime.includes('wordprocessing') || mime.includes('msword')) return 'docx'
 
-  if (['xlsx','xls'].includes(ext) || mime.includes('spreadsheet') || mime.includes('excel')) return 'xlsx'
-  if (['docx','doc'].includes(ext) || mime.includes('wordprocessing') || mime.includes('msword')) return 'docx'
+  if (mime.startsWith('text/') || ['log','yml','yaml','env','sh','js','ts','tsx','jsx','css','html','xml','php','py','rb','go','rs','java','sql','toml','ini'].includes(ext)) return 'text'
 
   return 'unknown'
 })
@@ -94,7 +102,7 @@ const fetchText = async () => {
   isLoadingTxt.value = true
   textError.value = null
   try {
-    const res = await fetch(viewUrl(props.file.id), { credentials: 'include' })
+    const res = await fetch(src.value)
     if (!res.ok) throw new Error(`HTTP ${res.status}`)
     textContent.value = await res.text()
   } catch (e) {
@@ -280,7 +288,7 @@ const loadXlsx = async () => {
       console.warn('[FilesPreview] exceljs module shape:', mod)
       throw new Error('Para previsualizar .xlsx instalá la dep: pnpm add exceljs')
     }
-    const res = await fetch(viewUrl(props.file.id), { credentials: 'include' })
+    const res = await fetch(src.value)
     if (!res.ok) throw new Error(`HTTP ${res.status}`)
     const buf = await res.arrayBuffer()
     const wb = new ExcelJS.Workbook()
@@ -308,7 +316,7 @@ const loadDocx = async () => {
       console.warn('[FilesPreview] mammoth module shape:', mod)
       throw new Error('Para previsualizar .docx instalá la dep: pnpm add mammoth')
     }
-    const res = await fetch(viewUrl(props.file.id), { credentials: 'include' })
+    const res = await fetch(src.value)
     if (!res.ok) throw new Error(`HTTP ${res.status}`)
     const buf = await res.arrayBuffer()
     const result = await mammoth.convertToHtml({ arrayBuffer: buf })
@@ -448,7 +456,7 @@ const jsonPretty = computed(() => {
         type="button"
         title="Abrir en pestaña nueva"
         class="inline-flex items-center justify-center size-8 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
-        @click="view(file.id)"
+        @click="view(file)"
       >
         <IconExternalLink class="size-4" />
       </button>
@@ -456,7 +464,7 @@ const jsonPretty = computed(() => {
         type="button"
         title="Descargar"
         class="inline-flex items-center justify-center size-8 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
-        @click="download(file.id, file.original_name)"
+        @click="download(file)"
       >
         <IconDownload class="size-4" />
       </button>
@@ -471,27 +479,27 @@ const jsonPretty = computed(() => {
                    view=FitH ajusta al ancho. -->
       <iframe
         v-if="viewerType === 'pdf'"
-        :src="`${viewUrl(file.id)}#navpanes=0&view=FitH`"
+        :src="`${src}#navpanes=0&view=FitH`"
         class="absolute inset-0 w-full h-full border-0"
         :title="file.original_name"
       />
 
       <!-- Image -->
       <div v-else-if="viewerType === 'image'" class="absolute inset-0 flex items-center justify-center bg-muted/30 p-4">
-        <img :src="viewUrl(file.id)" :alt="file.original_name" class="max-w-full max-h-full object-contain rounded-control shadow-sm" />
+        <img :src="src" :alt="file.original_name" class="max-w-full max-h-full object-contain rounded-control shadow-sm" />
       </div>
 
       <!-- Video -->
       <video
         v-else-if="viewerType === 'video'"
-        :src="viewUrl(file.id)"
+        :src="src"
         controls
         class="absolute inset-0 w-full h-full bg-black"
       />
 
       <!-- Audio -->
       <div v-else-if="viewerType === 'audio'" class="size-full flex items-center justify-center p-8 bg-muted/20">
-        <audio :src="viewUrl(file.id)" controls class="w-full max-w-md" />
+        <audio :src="src" controls class="w-full max-w-md" />
       </div>
 
       <!-- Markdown -->
@@ -646,7 +654,7 @@ const jsonPretty = computed(() => {
         </div>
         <button
           type="button"
-          @click="download(file.id, file.original_name)"
+          @click="download(file)"
           class="px-3 py-1.5 text-xs font-medium rounded-control bg-primary text-primary-foreground hover:bg-primary-hover inline-flex items-center gap-1.5"
         >
           <IconDownload :size="14" /> Descargar

package/components/Table/MasterDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { IconSearch, IconLoader2 } from '@tabler/icons-vue'
+import { IconSearch, IconLoader2, IconDownload } from '@tabler/icons-vue'
 import { useInfiniteQuery } from '@tanstack/vue-query'
 
 /*
@@ -31,6 +31,12 @@ const props = defineProps({
   height: { type: String, default: 'calc(100dvh - 13rem)' },
   /** Auto-refresco por realtime (se suscribe a los meta.channels del backend). */
   realtime: { type: Boolean, default: true },
+  /** Cachea la lista (opt-in, TTL 10min) — misma estrategia que Table.Standard/DataTable. */
+  cached: { type: Boolean, default: false },
+  /** Muestra el botón "Exportar" (xlsx) en el header de la lista. */
+  exportable: { type: Boolean, default: true },
+  /** Formato de export (por ahora solo 'xlsx'). */
+  exportFormat: { type: String, default: 'xlsx' },
 })
 
 const emit = defineEmits(['select'])
@@ -53,6 +59,42 @@ watch(search, (v) => {
   searchTimeout = setTimeout(() => { debouncedSearch.value = v }, 400)
 })
 
+// Export a archivo (xlsx): pega al mismo endpoint DataTable con ?exportType=…
+// Va por fetch propio + blob (useApi solo maneja json/text), con los headers de
+// auth de los interceptors (Bearer + X-Tenant).
+const config = useRuntimeConfig()
+const apiBase = config.public.apiBaseUrl || '/api'
+const { run: runInterceptors } = useRequestInterceptors()
+const exporting = ref(false)
+
+async function downloadExport() {
+  if (exporting.value) return
+  exporting.value = true
+  try {
+    const headers = { Accept: 'application/octet-stream' }
+    runInterceptors(headers)
+    const qs = new URLSearchParams({ exportType: props.exportFormat, search: debouncedSearch.value })
+    for (const [k, v] of Object.entries(props.params ?? {})) {
+      if (v !== null && v !== undefined) qs.append(k, String(v))
+    }
+    const res = await fetch(`${apiBase}/${props.endpoint}?${qs.toString()}`, { headers })
+    if (!res.ok) throw new Error('export failed: ' + res.status)
+    const blob = await res.blob()
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${props.name}.${props.exportFormat}`
+    document.body.appendChild(a)
+    a.click()
+    a.remove()
+    URL.revokeObjectURL(url)
+  } catch (e) {
+    console.error('[Table.MasterDetail] export error', e)
+  } finally {
+    exporting.value = false
+  }
+}
+
 const queryKey = computed(() => [props.name, 'md', debouncedSearch.value, props.params])
 const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } = useInfiniteQuery({
   queryKey,
@@ -65,6 +107,8 @@ const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch
     return meta.current_page < meta.last_page ? meta.current_page + 1 : undefined
   },
   initialPageParam: 1,
+  staleTime: props.cached ? 10 * 60 * 1000 : 0,
+  gcTime: props.cached ? 10 * 60 * 1000 : 5 * 60 * 1000,
 })
 const rows = computed(() => data.value?.pages.flatMap(p => p?.data ?? (Array.isArray(p) ? p : [])) ?? [])
 
@@ -101,9 +145,17 @@ function pick(row) {
   <div class="flex rounded-card border border-card-line overflow-hidden bg-card min-h-[360px]" :style="{ height }">
     <!-- ── Lista ── -->
     <aside class="w-80 shrink-0 border-e border-card-line flex flex-col">
-      <div v-if="title || $slots.action" class="p-3 flex items-center justify-between gap-2 border-b border-card-line">
-        <h2 class="text-sm font-semibold text-foreground">{{ title }}</h2>
-        <slot name="action" />
+      <div v-if="title || $slots.action || exportable" class="p-3 flex items-center justify-between gap-2 border-b border-card-line">
+        <h2 class="text-sm font-semibold text-foreground truncate">{{ title }}</h2>
+        <div class="flex items-center gap-2 shrink-0">
+          <slot name="action" />
+          <button v-if="exportable" type="button" @click="downloadExport" :disabled="exporting"
+            class="inline-flex items-center gap-1.5 rounded-lg border border-card-line px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-surface hover:text-foreground disabled:opacity-50 transition-colors">
+            <IconLoader2 v-if="exporting" class="size-3.5 animate-spin" />
+            <IconDownload v-else class="size-3.5" :stroke-width="1.5" />
+            Exportar
+          </button>
+        </div>
       </div>
 
       <div class="px-3 pt-3 pb-2">

package/composables/useFile.ts

@@ -9,9 +9,12 @@ import {
  *
  * 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
+ *   - download(file|fileId, filename?)        — trigger descarga programática
+ *   - view(file|fileId)                       — abrir inline en otra pestaña
+ *   - fileViewUrl(file) / fileDownloadUrl(file) — URL de serving PREFERIDA: usa el
+ *       view_url/download_url FIRMADO del backend (dominio propio, la firma es la
+ *       credencial → sirve en <img>/<iframe>/fetch sin Bearer); cae a la ruta por-id.
+ *   - viewUrl(fileId) / downloadUrl(fileId)   — rutas por-id (requieren auth; fallback)
  *   - formatSize(bytes)                       — helper humano-legible
  *   - iconFor(mimeType)                       — devuelve el componente Tabler para el mime
  *
@@ -26,11 +29,20 @@ export function useFile() {
   const { run } = useRequestInterceptors()
 
   // ── URLs ───────────────────────────────────────────────────────────────────
-  /** GET /files/{id} — inline view (respeta permisos del backend). */
+  /** GET /files/{id} — inline view por ruta (requiere auth; fallback). */
   const viewUrl     = (fileId) => `${baseUrl}/files/${fileId}`
-  /** GET /files/{id}/download — force download (respeta permisos). */
+  /** GET /files/{id}/download — force download por ruta (requiere auth; fallback). */
   const downloadUrl = (fileId) => `${baseUrl}/files/${fileId}/download`
 
+  /**
+   * URL de serving preferida para un objeto File del backend.
+   * Prioriza el `view_url`/`download_url` FIRMADO (dominio propio, la firma es la
+   * credencial → funciona en <img>/<iframe>/fetch sin Bearer ni cookie). Cae a la
+   * ruta por-id solo si el resource no trae la URL firmada (p.ej. archivos public).
+   */
+  const fileViewUrl     = (file) => file?.view_url     || (file?.id ? viewUrl(file.id) : null)
+  const fileDownloadUrl = (file) => file?.download_url || (file?.id ? downloadUrl(file.id) : null)
+
   // ── Helpers ────────────────────────────────────────────────────────────────
   const formatSize = (bytes) => {
     if (bytes == null) return ''
@@ -57,21 +69,30 @@ export function useFile() {
   }
 
   // ── View / Download ────────────────────────────────────────────────────────
-  /** Abre el file inline en una nueva pestaña (usa la auth de cookie). */
-  const view = (fileId) => {
+  /**
+   * Abre el file inline en una nueva pestaña. Acepta el objeto File (usa su
+   * view_url firmado) o un id (fallback a la ruta). Preferir pasar el file.
+   */
+  const view = (fileOrId) => {
     if (typeof window === 'undefined') return
-    window.open(viewUrl(fileId), '_blank', 'noopener,noreferrer')
+    const url = typeof fileOrId === 'object' ? fileViewUrl(fileOrId) : viewUrl(fileOrId)
+    if (url) window.open(url, '_blank', 'noopener,noreferrer')
   }
 
   /**
-   * Trigger descarga programática. Funciona con archivos auth/restricted
-   * porque el browser envía cookies automáticamente.
+   * Trigger descarga programática. Acepta el objeto File (usa su download_url
+   * firmado) o un id (fallback a la ruta). La firma es la credencial, así que
+   * funciona con archivos auth/restricted sin Bearer ni cookie.
    */
-  const download = (fileId, filename) => {
+  const download = (fileOrId, filename) => {
     if (typeof window === 'undefined') return
+    const isFile = typeof fileOrId === 'object'
+    const url    = isFile ? fileDownloadUrl(fileOrId) : downloadUrl(fileOrId)
+    if (!url) return
+    const name   = filename ?? (isFile ? fileOrId.original_name : undefined)
     const a = document.createElement('a')
-    a.href = downloadUrl(fileId)
-    if (filename) a.download = filename
+    a.href = url
+    if (name) a.download = name
     document.body.appendChild(a)
     a.click()
     document.body.removeChild(a)
@@ -179,6 +200,8 @@ export function useFile() {
     view,
     viewUrl,
     downloadUrl,
+    fileViewUrl,
+    fileDownloadUrl,
     formatSize,
     iconFor,
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innertia-solutions/innertia-nuxt",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "description": "Innertia Solutions — Nuxt layer unificada: core, auth, multitenancy, theme y app contexts",
   "keywords": [
     "nuxt",