@innertia-solutions/innertia-nuxt 0.1.11 → 0.1.13

package/components/CopyButton.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { IconCopy, IconCheck } from '@tabler/icons-vue'
+
+/**
+ * <CopyButton :value="..." /> — Botón con feedback visual de copia.
+ *
+ * Variants:
+ *  - 'icon'   (default) — solo el icono
+ *  - 'inline' — input readonly con icono al lado (estilo Preline clipboard)
+ *  - 'button' — botón ancho con label "Copiar"
+ *
+ * ```vue
+ * <CopyButton :value="user.id" />
+ * <CopyButton :value="apiKey" variant="inline" />
+ * <CopyButton :value="link" variant="button" label="Copiar enlace" />
+ * ```
+ */
+const props = defineProps({
+  value:        { type: [String, Number], default: '' },
+  variant:      { type: String, default: 'icon', validator: v => ['icon','inline','button'].includes(v) },
+  label:        { type: String, default: 'Copiar' },
+  labelCopied:  { type: String, default: '¡Copiado!' },
+  size:         { type: String, default: 'sm', validator: v => ['xs','sm','md'].includes(v) },
+  /** Solo para variant="inline" — placeholder cuando el value está vacío. */
+  placeholder:  { type: String, default: '' },
+  /** Solo para variant="inline" — oculta el value (útil para tokens/passwords). */
+  masked:       { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['copied'])
+
+const { copy, copied } = useClipboard({ timeout: 1500 })
+
+const onCopy = async () => {
+  if (await copy(props.value)) emit('copied', props.value)
+}
+
+const iconSize = computed(() => ({ xs: 12, sm: 14, md: 16 }[props.size]))
+const btnSize  = computed(() => ({ xs: 'size-6', sm: 'size-7', md: 'size-8' }[props.size]))
+
+const displayValue = computed(() => {
+  if (!props.value) return ''
+  if (!props.masked) return String(props.value)
+  return String(props.value).replace(/./g, '•').slice(0, 32)
+})
+</script>
+
+<template>
+  <!-- Icon-only -->
+  <button
+    v-if="variant === 'icon'"
+    type="button"
+    :title="copied ? labelCopied : label"
+    :class="[btnSize, 'inline-flex items-center justify-center rounded-control transition-colors',
+             copied ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+                    : 'text-muted-foreground hover:text-foreground hover:bg-muted-hover']"
+    @click="onCopy"
+  >
+    <IconCheck v-if="copied" :size="iconSize" :stroke="2" />
+    <IconCopy  v-else        :size="iconSize" :stroke="1.75" />
+  </button>
+
+  <!-- Inline input + icon (Preline clipboard style) -->
+  <div
+    v-else-if="variant === 'inline'"
+    class="inline-flex items-center gap-2 w-full innertia-field !pr-1 !py-1 cursor-pointer"
+    @click="onCopy"
+  >
+    <span class="flex-1 truncate text-sm text-foreground font-mono">
+      {{ displayValue || placeholder }}
+    </span>
+    <button
+      type="button"
+      :class="['shrink-0 inline-flex items-center justify-center size-7 rounded-control transition-colors',
+               copied ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-muted-hover']"
+      @click.stop="onCopy"
+    >
+      <IconCheck v-if="copied" :size="14" :stroke="2" />
+      <IconCopy  v-else        :size="14" :stroke="1.75" />
+    </button>
+  </div>
+
+  <!-- Full button -->
+  <button
+    v-else
+    type="button"
+    :class="['inline-flex items-center gap-1.5 px-3 py-1.5 rounded-control text-xs font-medium transition-colors border',
+             copied
+               ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/30'
+               : 'bg-card text-foreground border-card-line hover:bg-muted-hover']"
+    @click="onCopy"
+  >
+    <IconCheck v-if="copied" :size="14" :stroke="2" />
+    <IconCopy  v-else        :size="14" :stroke="1.75" />
+    {{ copied ? labelCopied : label }}
+  </button>
+</template>

package/components/Files/Card.vue

@@ -0,0 +1,215 @@
+<script setup>
+import { IconDownload, IconExternalLink, IconTrash } from '@tabler/icons-vue'
+
+/**
+ * <FilesCard> — Muestra un File del backend innertia-laravel.
+ *
+ * Variantes:
+ *   - 'card'    (default) — card vertical con icono grande arriba, nombre + meta abajo
+ *   - 'row'    — fila horizontal compacta (icono + nombre + acciones a la derecha)
+ *   - 'compact' — mini-row con icono pequeño + nombre (sin acciones)
+ *
+ * El file esperado matchea el shape del modelo File de innertia-laravel:
+ *   { id, original_name, mime_type, extension, size, ... }
+ *
+ * Si el file es una imagen y se pasa `previewImage`, se renderiza el thumbnail
+ * usando el viewUrl en lugar del icono.
+ */
+const props = defineProps({
+  file: { type: Object, required: true },
+
+  /** 'card' | 'row' | 'compact' */
+  variant: { type: String, default: 'card' },
+
+  /** Mostrar tamaño (formatSize). */
+  showSize: { type: Boolean, default: true },
+
+  /** Mostrar extensión (PDF, XLSX, etc.). */
+  showType: { type: Boolean, default: true },
+
+  /** Mostrar botón de download. */
+  downloadable: { type: Boolean, default: true },
+
+  /** Mostrar botón de ver (abre en nueva pestaña). */
+  viewable: { type: Boolean, default: false },
+
+  /** Mostrar botón de eliminar (emite `delete`). */
+  deletable: { type: Boolean, default: false },
+
+  /** Si el file es una imagen, renderizar thumbnail en lugar del icono. */
+  previewImage: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['click', 'delete'])
+
+const { download, view, viewUrl, formatSize, iconFor } = useFile()
+
+const isImage = computed(() => props.file?.mime_type?.startsWith('image/'))
+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)
+}
+const handleView = (e) => {
+  e?.stopPropagation?.()
+  view(props.file.id)
+}
+const handleDelete = (e) => {
+  e?.stopPropagation?.()
+  emit('delete', props.file)
+}
+</script>
+
+<template>
+  <!-- ════════════ Variante 'compact' (mini-row) ════════════ -->
+  <div
+    v-if="variant === 'compact'"
+    class="inline-flex items-center gap-2 px-2 py-1 rounded-control text-xs hover:bg-muted-hover transition-colors cursor-pointer"
+    @click="emit('click', file)"
+  >
+    <component :is="icon" :size="14" class="shrink-0 text-muted-foreground" />
+    <span class="truncate text-foreground">{{ file.original_name }}</span>
+  </div>
+
+  <!-- ════════════ Variante 'row' (horizontal) ════════════ -->
+  <div
+    v-else-if="variant === 'row'"
+    class="group flex items-center gap-3 px-3 py-2 rounded-card border border-card-line bg-card hover:border-primary/40 hover:bg-muted-hover/30 transition-colors cursor-pointer"
+    @click="emit('click', file)"
+  >
+    <!-- Thumb o icono -->
+    <div class="shrink-0">
+      <img
+        v-if="showThumb"
+        :src="viewUrl(file.id)"
+        :alt="file.original_name"
+        class="size-10 rounded-control object-cover bg-muted"
+      />
+      <div v-else class="size-10 rounded-control bg-muted flex items-center justify-center text-muted-foreground">
+        <component :is="icon" :size="20" :stroke="1.75" />
+      </div>
+    </div>
+
+    <!-- Info -->
+    <div class="flex-1 min-w-0">
+      <p class="text-sm font-medium text-foreground truncate">{{ file.original_name }}</p>
+      <p class="text-xs text-muted-foreground mt-0.5 flex items-center gap-2">
+        <span v-if="showType && file.extension" class="uppercase">{{ file.extension }}</span>
+        <span v-if="showSize">{{ formatSize(file.size) }}</span>
+      </p>
+    </div>
+
+    <!-- Acciones -->
+    <div class="flex items-center gap-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+      <slot name="actions" :file="file" />
+      <button
+        v-if="viewable"
+        type="button"
+        title="Ver"
+        class="inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+        @click="handleView"
+      >
+        <IconExternalLink class="size-3.5" />
+      </button>
+      <button
+        v-if="downloadable"
+        type="button"
+        title="Descargar"
+        class="inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+        @click="handleDownload"
+      >
+        <IconDownload class="size-3.5" />
+      </button>
+      <button
+        v-if="deletable"
+        type="button"
+        title="Eliminar"
+        class="inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+        @click="handleDelete"
+      >
+        <IconTrash class="size-3.5" />
+      </button>
+    </div>
+  </div>
+
+  <!-- ════════════ Variante 'card' (vertical, default) ════════════ -->
+  <div
+    v-else
+    class="group relative flex flex-col rounded-card border border-card-line bg-card hover:border-primary/40 hover:shadow-sm transition cursor-pointer overflow-hidden"
+    @click="emit('click', file)"
+  >
+    <!-- Header — MISMA proporción (aspect-video) para todas las cards.
+         Imagen: thumbnail completo. No-imagen: extensión como tipografía grande
+         + ícono superpuesto, así llena visualmente el espacio. -->
+    <div class="relative aspect-video overflow-hidden">
+      <!-- Imagen real -->
+      <img
+        v-if="showThumb"
+        :src="viewUrl(file.id)"
+        :alt="file.original_name"
+        class="size-full object-cover"
+      />
+      <!-- No-imagen: bg con gradient + extensión grande como tipografía dominante -->
+      <div
+        v-else
+        class="size-full bg-gradient-to-br from-muted via-muted/60 to-muted/30 flex flex-col items-center justify-center gap-1 text-muted-foreground select-none"
+      >
+        <component :is="icon" :size="44" :stroke="1.5" class="opacity-70" />
+        <span
+          v-if="file.extension"
+          class="text-2xl font-bold uppercase tracking-widest text-foreground/70"
+        >
+          {{ file.extension }}
+        </span>
+      </div>
+
+      <!-- Chip con el tipo en imagen — sirve como label discreto -->
+      <span
+        v-if="showThumb && showType && file.extension"
+        class="absolute top-2 right-2 px-1.5 py-0.5 rounded-badge bg-card/85 backdrop-blur-sm text-[10px] font-bold uppercase tracking-wider text-foreground shadow-sm"
+      >
+        {{ file.extension }}
+      </span>
+    </div>
+
+    <!-- Info -->
+    <div class="p-3 space-y-0.5">
+      <p class="text-sm font-medium text-foreground truncate">{{ file.original_name }}</p>
+      <p v-if="showSize" class="text-xs text-muted-foreground">{{ formatSize(file.size) }}</p>
+    </div>
+
+    <!-- Acciones — overlay arriba a la derecha en hover -->
+    <div class="absolute top-2 right-2 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity bg-card/90 backdrop-blur-sm rounded-control p-0.5">
+      <slot name="actions" :file="file" />
+      <button
+        v-if="viewable"
+        type="button"
+        title="Ver"
+        class="inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+        @click="handleView"
+      >
+        <IconExternalLink class="size-3.5" />
+      </button>
+      <button
+        v-if="downloadable"
+        type="button"
+        title="Descargar"
+        class="inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+        @click="handleDownload"
+      >
+        <IconDownload class="size-3.5" />
+      </button>
+      <button
+        v-if="deletable"
+        type="button"
+        title="Eliminar"
+        class="inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+        @click="handleDelete"
+      >
+        <IconTrash class="size-3.5" />
+      </button>
+    </div>
+  </div>
+</template>