@edc-motor/admin-kit 0.4.12 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "EdC Motor — kit del panel de administración: layout, gestores CRUD, imágenes, PDF, páginas, configuración, usuarios y copias (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@edc-motor/ui": "^0.4.12",
+    "@edc-motor/ui": "^0.4.14",
     "axios": "^1.7.0",
     "vue-draggable-plus": "^0.6.1"
   },

package/scss/components/_grid.scss

@@ -2,6 +2,7 @@
 
 // Grid responsive (portado de kontuan). Columnas por breakpoint del contenedor
 // `content` para que coincida con el ancho real disponible.
+
 .grid {
   display: grid;
   grid-template-columns: 1fr;
@@ -28,4 +29,18 @@
       @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(#{$i}, 1fr); }
     }
   }
+  @for $i from 1 through 6 {
+    &--xl-#{$i} {
+      @container content (min-width: #{$bp-xl}) { grid-template-columns: repeat(#{$i}, 1fr); }
+    }
+  }
+
+  // Preset `cards` (índices de entidades): 1 → 2 → 3 → 4 → 5 con los
+  // breakpoints canónicos del contenedor `content` (480/768/1024/1280).
+  &--cards {
+    @container content (min-width: #{$bp-sm}) { grid-template-columns: repeat(2, 1fr); }
+    @container content (min-width: #{$bp-md}) { grid-template-columns: repeat(3, 1fr); }
+    @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(4, 1fr); }
+    @container content (min-width: #{$bp-xl}) { grid-template-columns: repeat(5, 1fr); }
+  }
 }

package/src/crud/BaseGrid.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 
 // Grid responsive de tarjetas (portado de kontuan). Responde al ancho del
 // contenedor `content` (no al viewport), así coincide con el espacio real.
-type Breakpoint = 'base' | 'sm' | 'md' | 'lg'
+type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl'
 type ResponsiveCols = Partial<Record<Breakpoint, number>>
 
 const props = withDefaults(
@@ -16,9 +16,6 @@ const props = withDefaults(
 )
 
 const presetCols: Record<string, ResponsiveCols> = {
-  // Los index de entidades escalan 1 → 2 → 3 → 4 con el ancho REAL del
-  // contenedor `content` (en pantallas anchas llegan a cuatro columnas).
-  cards: { base: 1, sm: 2, md: 3, lg: 4 },
   'cards-wide': { base: 1, sm: 2, lg: 4 },
   'cards-narrow': { base: 1, sm: 2 },
   'cards-full': { base: 1, sm: 2, md: 3, lg: 4 },
@@ -28,6 +25,12 @@ const presetCols: Record<string, ResponsiveCols> = {
 
 const gridClasses = computed(() => {
   const classes = ['grid', `grid--gap-${props.gap}`]
+  // Los index de entidades escalan 1 → 2 → 3 → 4 → 5 con los breakpoints
+  // canónicos del contenedor `content` (ver .grid--cards en _grid.scss).
+  if (props.preset === 'cards') {
+    classes.push('grid--cards')
+    return classes
+  }
   const cols = props.preset ? presetCols[props.preset] : props.cols
   if (typeof cols === 'number') classes.push(`grid--base-${cols}`)
   else for (const [bp, n] of Object.entries(cols ?? {})) classes.push(`grid--${bp}-${n}`)