@edc-motor/admin-kit 0.4.7 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/admin-kit",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "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.7",
+    "@edc-motor/ui": "^0.4.9",
     "axios": "^1.7.0",
     "vue-draggable-plus": "^0.6.1"
   },

package/scss/components/_entity-card.scss

@@ -20,17 +20,19 @@
   &--muted { opacity: 0.65; }
   &.is-active { border-color: $accent-500; }
 
-  // Franja superior opcional (emblema/imagen).
+  // Franja superior opcional (emblema/imagen). Cuadrada: con el grid de los
+  // index a 4 columnas la tarjeta es más estrecha y la imagen queda contenida
+  // (más bien pequeña) y centrada, nunca deformada ni recortada.
   &__media {
     position: relative;
-    aspect-ratio: 16 / 9;
+    aspect-ratio: 1 / 1;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     background: $surface-2;
 
-    img { width: 100%; height: 100%; object-fit: cover; }
+    img { width: 100%; height: 100%; object-fit: contain; }
   }
 
   // Cabecera: título + acciones, con divisoria (CDL).

package/scss/components/_filter-bar.scss

@@ -16,7 +16,7 @@
 
   &__search-icon {
     position: absolute;
-    right: $space-3;
+    right: $input-padding-x;
     top: 50%;
     transform: translateY(-50%);
     color: $text-3;
@@ -25,8 +25,8 @@
 
   &__search-input {
     width: 100%;
-    height: 40px;
-    padding: 0 36px 0 $space-3;
+    height: $input-height;
+    padding: 0 34px 0 $input-padding-x; // hueco a la derecha para la lupa
     background: $surface-2;
     color: $text-1;
     border: 1px solid $border;

package/scss/components/_manager-card.scss

@@ -157,6 +157,26 @@
     margin: $space-1 0;
     width: 100%;
   }
+
+  // Botón-volver del panel (texto con flecha): del detalle de la card
+  // seleccionada al estado sin selección (los filtros del listado).
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: $space-1;
+    background: none;
+    border: none;
+    padding: 0;
+    color: $accent-500;
+    font-size: $fs-13;
+    cursor: pointer;
+    justify-self: start;
+
+    &:hover {
+      color: $accent-600;
+      text-decoration: underline;
+    }
+  }
 }
 
 .manager-detail {

package/src/composables/useCardDeselect.ts

@@ -0,0 +1,32 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+// Zonas que NUNCA deseleccionan: las propias cards y cualquier control
+// interactivo (enlaces, botones, campos, labels…) o las migas de pan.
+const IGNORE =
+  'a, button, input, textarea, select, label, [contenteditable], ' +
+  '.manager-card, .entity-card, .breadcrumbs'
+
+/**
+ * Deselección de la card activa clickando la zona "vacía" del cuerpo de la
+ * vista (el contenido bajo las migas: huecos del grid, espacio bajo las
+ * cards, alrededor del toolbar…). Complementa el patrón de los listados con
+ * panel derecho: la card entera selecciona y el resto del contenedor
+ * deselecciona (además del botón "volver a los filtros" del panel).
+ *
+ * Escucha en document y solo actúa dentro de `.main-content` (el área de
+ * contenido del AdminLayout): los modales (teleport a body) y el panel
+ * derecho quedan fuera. Ignora los clicks que nacen en una card o en un
+ * control interactivo; `extraIgnore` añade selectores propios de la vista
+ * (p. ej. sus items cuando no son .manager-card/.entity-card).
+ */
+export function useCardDeselect(onDeselect: () => void, extraIgnore = '') {
+  function onClick(e: MouseEvent) {
+    const target = e.target instanceof Element ? e.target : null
+    if (!target || !target.closest('.main-content')) return
+    if (target.closest(IGNORE)) return
+    if (extraIgnore && target.closest(extraIgnore)) return
+    onDeselect()
+  }
+  onMounted(() => document.addEventListener('click', onClick))
+  onBeforeUnmount(() => document.removeEventListener('click', onClick))
+}

package/src/crud/BaseGrid.vue

@@ -16,7 +16,9 @@ const props = withDefaults(
 )
 
 const presetCols: Record<string, ResponsiveCols> = {
-  cards: { base: 1, sm: 2, lg: 3 },
+  // 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 },

package/src/index.ts

@@ -5,6 +5,9 @@ export { default as AdminLayout } from './layout/AdminLayout.vue'
 // lo activa con useRightSidebar() y Teleport a #right-sidebar-target.
 export { default as RightSidebar } from './layout/RightSidebar.vue'
 export { useRightSidebar, type RightSidebarToken } from './composables/useRightSidebar'
+// Listados con panel derecho: click en la zona vacía del contenido para
+// deseleccionar la card activa (la card entera selecciona; el resto, no).
+export { useCardDeselect } from './composables/useCardDeselect'
 // Tarjeta colapsable de los gestores (previews/PDF), reutilizable.
 export { default as ManagerCard } from './components/ManagerCard.vue'
 // Index de entidades: grid de tarjetas (sin tablas) + filtros + estado vacío.