@innertia-solutions/innertia-nuxt 0.1.23 → 0.1.25

package/components/Kanban/Standard.vue

@@ -296,16 +296,17 @@ const showColumnPanel = ref(false)
 const toggleColumnPanel = () => { showColumnPanel.value = !showColumnPanel.value }
 
 // ─── Color map (tokens-aware) ────────────────────────────────────────────────
+// `col` = tinte de fondo de la columna en modo sin bordes (estilo Notion/Trello).
 const colorMap = {
-  slate:  { dot: 'bg-slate-400',   over: 'ring-2 ring-slate-400' },
-  red:    { dot: 'bg-red-500',     over: 'ring-2 ring-red-400' },
-  yellow: { dot: 'bg-yellow-500',  over: 'ring-2 ring-yellow-400' },
-  amber:  { dot: 'bg-amber-500',   over: 'ring-2 ring-amber-400' },
-  green:  { dot: 'bg-emerald-500', over: 'ring-2 ring-emerald-400' },
-  blue:   { dot: 'bg-blue-500',    over: 'ring-2 ring-blue-400' },
-  indigo: { dot: 'bg-indigo-500',  over: 'ring-2 ring-indigo-400' },
-  purple: { dot: 'bg-purple-500',  over: 'ring-2 ring-purple-400' },
-  pink:   { dot: 'bg-pink-500',    over: 'ring-2 ring-pink-400' },
+  slate:  { dot: 'bg-slate-400',   over: 'ring-2 ring-slate-400',  col: 'bg-slate-100/70 dark:bg-slate-800/40' },
+  red:    { dot: 'bg-red-500',     over: 'ring-2 ring-red-400',    col: 'bg-red-50 dark:bg-red-900/15' },
+  yellow: { dot: 'bg-yellow-500',  over: 'ring-2 ring-yellow-400', col: 'bg-yellow-50 dark:bg-yellow-900/15' },
+  amber:  { dot: 'bg-amber-500',   over: 'ring-2 ring-amber-400',  col: 'bg-amber-50 dark:bg-amber-900/15' },
+  green:  { dot: 'bg-emerald-500', over: 'ring-2 ring-emerald-400', col: 'bg-emerald-50 dark:bg-emerald-900/15' },
+  blue:   { dot: 'bg-blue-500',    over: 'ring-2 ring-blue-400',   col: 'bg-blue-50 dark:bg-blue-900/15' },
+  indigo: { dot: 'bg-indigo-500',  over: 'ring-2 ring-indigo-400', col: 'bg-indigo-50 dark:bg-indigo-900/15' },
+  purple: { dot: 'bg-purple-500',  over: 'ring-2 ring-purple-400', col: 'bg-purple-50 dark:bg-purple-900/15' },
+  pink:   { dot: 'bg-pink-500',    over: 'ring-2 ring-pink-400',   col: 'bg-pink-50 dark:bg-pink-900/15' },
 }
 const getColors = (state) => colorMap[state.color ?? 'slate'] ?? colorMap.slate
 
@@ -458,7 +459,7 @@ defineExpose({ reload: fetchAll, rows })
               'flex-shrink-0 w-72 flex flex-col overflow-hidden transition-shadow',
               bordered
                 ? 'rounded-card border border-card-line bg-card'
-                : 'rounded-card bg-muted/50',
+                : ['rounded-card', getColors(state).col],
               dragOverState === state.key ? getColors(state).over : '',
             ]"
             @dragover="onDragOver($event, state.key)"

package/components/Table/Standard.vue

@@ -20,6 +20,10 @@ const props = defineProps({
   /** Mostrar selector "Filas por página" en el footer. Default false. */
   showPerPage:             { type: Boolean, default: false },
 
+  /** Modo lista: sin paginación. Carga todas las filas (server-side: ?list=true) y
+   *  el área de la tabla se vuelve scrolleable en vez de crecer indefinidamente. */
+  list:                    { type: Boolean, default: false },
+
   // Tamaño visible (wrap + overflow auto). 'sm' | 'md' (default) | 'lg' | 'fit'.
   size:                    { type: String, default: 'md' },
   filters:                 { type: Array,   default: () => [] },
@@ -758,6 +762,7 @@ defineExpose({ getSelectedRows, reload, clearCache, exportTable, tableRef, close
           :show-reload-button="showReloadButton"
           :info-position="infoPosition"
           :show-per-page="showPerPage"
+          :list="list"
           :click-row-to-open="clickRowToOpen"
           :preview-row-id="previewRow?.id ?? null"
           :preview-mode="!!previewEnabled"

package/components/Table/index.vue

@@ -21,6 +21,8 @@ const props = defineProps({
   infoPosition:     { type: String, default: 'bottom' },
   /** Mostrar el selector "Filas: 10/25/50/100/Otro...". Default false. */
   showPerPage:      { type: Boolean, default: false },
+  /** Modo lista: sin paginación (envía ?list=true, carga todas las filas y scrollea). */
+  list:             { type: Boolean, default: false },
   /** 'table' | 'cards' | 'database' | 'grid' (legacy → maps to cards) */
   viewMode: { type: String, default: 'table' },
   gridClass: { type: String, default: 'grid grid-cols-2 lg:grid-cols-3 gap-4' },
@@ -244,6 +246,8 @@ const buildRequestParams = () => {
     perPage: pagination.value.pageSize,
     sortColumns: sorting.value.map(s => ({ column: s.id, direction: s.desc ? 'desc' : 'asc' })),
     columnFilters: Object.fromEntries(columnFilters.value.map(f => [f.id, f.value])),
+    // Modo lista: sin paginación, el backend devuelve todas las filas (search/sort/filtros igual).
+    ...(props.list ? { list: true } : {}),
     ...otherParams,
   }
 }
@@ -596,6 +600,9 @@ defineExpose({
 <template>
   <div class="relative flex flex-col">
 
+    <!-- Modo lista: contenedor scrolleable (todas las filas cargadas, sin paginación) -->
+    <div :class="list ? 'max-h-[70vh] overflow-y-auto' : 'contents'">
+
     <!-- Table view -->
     <ViewTable
       v-if="currentView === 'table'"
@@ -664,6 +671,8 @@ defineExpose({
       </template>
     </ViewDatabase>
 
+    </div><!-- /scroll lista -->
+
     <!-- Pagination & controls bar -->
     <div
       v-if="infoPosition !== 'none'"
@@ -709,8 +718,8 @@ defineExpose({
         </div>
       </div>
 
-      <!-- Right: per-page + pagination -->
-      <div class="flex items-center gap-x-8">
+      <!-- Right: per-page + pagination (oculto en modo lista) -->
+      <div v-if="!list" class="flex items-center gap-x-8">
         <!-- Per page selector -->
         <div v-if="showPerPage" class="flex items-center gap-x-2">
           <label class="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Filas:</label>

package/package.json

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