@innertia-solutions/innertia-nuxt 0.1.12 → 0.1.13

package/components/Toast/Alert.vue

@@ -1,113 +1,18 @@
-<template>
-  <div
-    class="max-w-xs relative bg-card border border-card-line 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-card-line"
-    >
-      <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)
-  }
-})
+/**
+ * <ToastAlert> — Wrapper deprecated. Para uso nuevo: <ToastStandard>.
+ * El store ahora maneja toast.severity normalizada (success|error|warning|info).
+ */
+const props = defineProps({ toast: { type: Object, required: true } })
+const emit  = defineEmits(['close'])
+
+// Map legacy severity 'danger' → 'error' para retrocompat.
+const normalized = computed(() => ({
+  ...props.toast,
+  severity: props.toast.severity === 'danger' ? 'error' : props.toast.severity,
+}))
 </script>
+
+<template>
+  <ToastStandard :toast="normalized" @close="emit('close')" />
+</template>

package/components/Toast/Container.vue

@@ -1,34 +1,9 @@
 <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',
-}
+/**
+ * <ToastContainer /> — Wrapper deprecated. Para uso nuevo: <ToastStack />.
+ */
 </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>
+  <ToastStack />
 </template>

package/components/Toast/Notification.vue

@@ -1,45 +1,10 @@
-<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 });
+/** Deprecated. Para uso nuevo: <ToastStandard variant="notification">. */
+const props = defineProps({ toast: { type: Object, required: true } })
+const emit  = defineEmits(['close'])
+const normalized = computed(() => ({ ...props.toast, variant: 'notification' }))
 </script>
+
+<template>
+  <ToastStandard :toast="normalized" @close="emit('close')" />
+</template>

package/components/Toast/Process.vue

@@ -1,88 +1,10 @@
-<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 });
+/** Deprecated. Para uso nuevo: <ToastStandard variant="process">. */
+const props = defineProps({ toast: { type: Object, required: true } })
+const emit  = defineEmits(['close'])
+const normalized = computed(() => ({ ...props.toast, variant: 'process' }))
 </script>
+
+<template>
+  <ToastStandard :toast="normalized" @close="emit('close')" />
+</template>

package/components/Toast/Stack.vue

@@ -0,0 +1,59 @@
+<script setup>
+/**
+ * <ToastStack /> — Mount-once en el layout root. Renderiza los toasts del
+ * store en las 6 posiciones, con animación stack.
+ */
+import { useToastStore } from '../../stores/toast'
+
+const store = 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',
+}
+
+const isTop = (pos) => pos.startsWith('top-')
+</script>
+
+<template>
+  <template v-for="pos in POSITIONS" :key="pos">
+    <div
+      v-if="store.toasts[pos]?.length"
+      class="fixed z-[9998] flex flex-col gap-2 pointer-events-none"
+      :class="positionClass[pos]"
+    >
+      <TransitionGroup :name="isTop(pos) ? 'toast-down' : 'toast-up'">
+        <ToastStandard
+          v-for="toast in store.toasts[pos]"
+          :key="toast.id"
+          :toast="toast"
+          @close="store.dismiss(toast.id)"
+        />
+      </TransitionGroup>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+.toast-down-enter-active,
+.toast-up-enter-active,
+.toast-down-leave-active,
+.toast-up-leave-active { transition: all 0.25s cubic-bezier(.2,.8,.2,1); }
+
+.toast-down-enter-from { opacity: 0; transform: translateY(-12px) scale(0.97); }
+.toast-up-enter-from   { opacity: 0; transform: translateY(12px) scale(0.97); }
+.toast-down-leave-to,
+.toast-up-leave-to     { opacity: 0; transform: scale(0.95); }
+
+.toast-down-move,
+.toast-up-move         { transition: transform 0.25s ease; }
+</style>

package/components/Toast/Standard.vue

@@ -0,0 +1,115 @@
+<script setup>
+import {
+  IconCircleCheck, IconAlertCircle, IconAlertTriangle, IconInfoCircle, IconX,
+} from '@tabler/icons-vue'
+
+/**
+ * <ToastStandard> — Renderizador unificado de toasts.
+ *
+ * Variants: 'alert' (default) | 'notification' | 'process'
+ * Severities: success | error | warning | info
+ *
+ * El auto-dismiss se visualiza como un anillo circular alrededor del botón de
+ * cerrar (usando <Loader>).
+ */
+const props = defineProps({
+  toast: { type: Object, required: true },
+})
+
+const emit = defineEmits(['close'])
+
+const meta = computed(() => ({
+  success: { icon: IconCircleCheck,    accent: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-l-emerald-500', loader: 'emerald' },
+  error:   { icon: IconAlertCircle,    accent: 'text-red-600 dark:text-red-400',         bg: 'bg-red-500/10',     border: 'border-l-red-500',     loader: 'red' },
+  warning: { icon: IconAlertTriangle,  accent: 'text-amber-600 dark:text-amber-400',     bg: 'bg-amber-500/10',   border: 'border-l-amber-500',   loader: 'amber' },
+  info:    { icon: IconInfoCircle,     accent: 'text-blue-600 dark:text-blue-400',       bg: 'bg-blue-500/10',    border: 'border-l-blue-500',    loader: 'blue' },
+}[props.toast.severity] ?? {
+  icon: IconInfoCircle, accent: 'text-muted-foreground', bg: 'bg-muted', border: 'border-l-muted-foreground', loader: 'muted',
+}))
+
+const isNotification = computed(() => props.toast.variant === 'notification')
+const isProcess      = computed(() => props.toast.variant === 'process')
+const hasCountdown   = computed(() => !isProcess.value && props.toast.duration && props.toast.duration > 0)
+
+const onAction = () => {
+  try { props.toast.action?.onClick?.() } finally {
+    if (props.toast.action?.dismissOnClick !== false) emit('close')
+  }
+}
+</script>
+
+<template>
+  <div
+    role="alert"
+    :class="[
+      'pointer-events-auto relative w-[22rem] max-w-[90vw] bg-card border border-card-line border-l-4 rounded-card shadow-lg overflow-hidden',
+      'flex gap-3',
+      isProcess ? 'items-start' : 'items-center',
+      isNotification ? 'p-4 pr-12' : 'p-3 pr-11',
+      meta.border,
+    ]"
+  >
+    <!-- Icon -->
+    <div :class="['shrink-0 size-8 rounded-control flex items-center justify-center', meta.bg, meta.accent]">
+      <component :is="meta.icon" class="size-4" :stroke="1.75" />
+    </div>
+
+    <!-- Contenido -->
+    <div class="flex-1 min-w-0">
+      <p v-if="toast.title" class="text-sm font-semibold text-foreground truncate">{{ toast.title }}</p>
+      <div
+        v-if="toast.message"
+        :class="['text-foreground leading-relaxed', toast.title ? 'text-xs text-muted-foreground mt-0.5' : 'text-sm']"
+        v-html="toast.message"
+      />
+
+      <!-- Process progress (variant 'process') -->
+      <div v-if="isProcess" class="mt-2">
+        <Loader
+          shape="bar"
+          :value="toast.progress ?? 0"
+          :stroke="4"
+          :color="meta.loader"
+        />
+        <div class="flex items-center justify-between mt-1.5 text-[10px] text-muted-foreground font-mono">
+          <span>{{ toast.progressLabel || '' }}</span>
+          <span>{{ Math.round(toast.progress ?? 0) }}%</span>
+        </div>
+      </div>
+
+      <!-- Action -->
+      <button
+        v-if="toast.action?.label"
+        type="button"
+        class="mt-2 text-xs font-semibold text-primary hover:text-primary-hover transition-colors"
+        @click="onAction"
+      >
+        {{ toast.action.label }}
+      </button>
+    </div>
+
+    <!-- Close + countdown ring -->
+    <button
+      v-if="toast.closable !== false"
+      type="button"
+      class="absolute top-1/2 -translate-y-1/2 right-2 size-8 inline-flex items-center justify-center rounded-full text-foreground hover:text-foreground transition-colors group"
+      aria-label="Cerrar"
+      @click="emit('close')"
+    >
+      <Loader
+        v-if="hasCountdown"
+        shape="circle"
+        mode="countdown"
+        direction="empty"
+        :duration="toast.duration"
+        :size="32"
+        :stroke="7"
+        :color="meta.loader"
+        track="auto"
+        class="!absolute inset-0 pointer-events-none"
+        @complete="emit('close')"
+      />
+      <IconX class="size-4 relative z-10 text-foreground group-hover:scale-110 transition-transform" :stroke="2.25" />
+    </button>
+  </div>
+</template>

package/components/Tree/Standard.vue

@@ -53,6 +53,20 @@ const props = defineProps({
   //   'list'  — compacto tipo file-tree explorer (sin tabla, sin bordes de fila)
   variant: { type: String, default: 'table' },
 
+  // bordered=false → quita border + rounded-card del wrapper exterior
+  bordered: { type: Boolean, default: true },
+
+  // 'bottom' (default) | 'top' | 'none' — dónde aparecen reload + total + instant
+  //   'none' = sin footer, reload + instant compactos al lado de columns/export
+  infoPosition: { type: String, default: 'bottom' },
+
+  // Tamaño visible del área scrollable.
+  //   'sm'  — compacta (min 18rem / max 24rem)
+  //   'md'  — default (min 30rem / max 36rem)
+  //   'lg'  — espaciosa (min 45rem / max 75vh)
+  //   'fit' — sin min/max, se adapta al contenedor padre
+  size: { type: String, default: 'md' },
+
   // ─── Preview overlay panel (mismo patrón que Table.Standard) ───────────
   // El panel se activa automáticamente si el consumer declara <slot name="preview">.
   // Click en una fila → set previewRow → overlay absoluto sobre la derecha de la tabla.
@@ -63,6 +77,16 @@ const props = defineProps({
   splitRatio:        { type: Number, default: 55 },
 })
 
+const sizeStyle = computed(() => {
+  switch (props.size) {
+    case 'sm':  return { minHeight: '18rem', maxHeight: '24rem' }
+    case 'lg':  return { minHeight: '45rem', maxHeight: '75vh' }
+    case 'fit': return {}
+    case 'md':
+    default:    return { minHeight: '30rem', maxHeight: '36rem' }
+  }
+})
+
 const emit = defineEmits([
   'row-click', 'loaded', 'expand',
   'update:checked', 'export',
@@ -567,6 +591,15 @@ defineExpose({
       <!-- Secondary actions -->
       <div class="ml-auto flex items-center gap-1">
 
+        <!-- Instant + Reload SIEMPRE primero cuando infoPosition === 'none' -->
+        <InfoToolbar
+          v-if="infoPosition === 'none'"
+          :show-reload="showReloadButton"
+          :is-fetching="isFetching"
+          :show-instant="isDataFromCache && cached"
+          @reload="fetchInitial"
+        />
+
         <!-- Columns dropdown -->
         <div v-if="showColumns" class="relative">
           <button
@@ -617,6 +650,7 @@ defineExpose({
           </Transition>
         </div>
 
+
         <!-- Export dropdown -->
         <div v-if="showExport" class="relative">
           <button
@@ -714,9 +748,12 @@ defineExpose({
 
     <!-- ── Table wrapper (rounded + scroll) ───────────────────────────────── -->
     <div
-      class="border border-card-line rounded-card overflow-hidden flex flex-col w-full"
+      :class="[
+        'flex flex-col w-full',
+        bordered ? 'border border-card-line rounded-card overflow-hidden' : '',
+      ]"
     >
-      <div class="overflow-auto" style="min-height: 30rem; max-height: 36rem">
+      <div class="overflow-auto" :style="sizeStyle">
 
         <!-- ════════════ Variante 'table' ════════════ -->
         <table v-if="variant === 'table'" class="w-full divide-y divide-card-line" style="table-layout: auto">
@@ -843,8 +880,16 @@ defineExpose({
         </div>
       </div>
 
-      <!-- ── Footer bar (reload + total + cache badge) — DENTRO del wrapper ── -->
-      <div class="flex flex-col sm:flex-row items-center justify-between gap-y-3 sm:gap-y-0 px-4 py-3 border-t border-card-line bg-card">
+      <!-- ── Footer bar (reload + total + cache badge) — top/bottom/none ── -->
+      <div
+        v-if="infoPosition !== 'none'"
+        :class="[
+          'flex flex-col sm:flex-row items-center justify-between gap-y-3 sm:gap-y-0 px-4 py-3',
+          infoPosition === 'top'
+            ? (bordered ? 'order-first border-b border-card-line bg-card' : 'order-first pb-4')
+            : (bordered ? 'border-t border-card-line bg-card' : 'pt-4'),
+        ]"
+      >
         <div class="flex items-center gap-x-4 flex-wrap gap-y-2">
           <!-- Reload button -->
           <div v-if="showReloadButton" class="flex items-center gap-x-2">