@edc-motor/admin-kit 0.4.16 → 0.4.17

package/package.json

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

package/scss/components/_entity-card.scss

@@ -67,6 +67,13 @@
     padding: $space-3 $space-4 $space-2;
     border-bottom: 1px solid $border;
     min-width: 0;
+
+    // Sin badges ni meta la cabecera es lo último de la card: la divisoria
+    // sobra y el padding inferior recupera el del resto de lados.
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: $space-3;
+    }
   }
 
   &__title {

package/scss/components/_manager-card.scss

@@ -75,6 +75,12 @@
     padding: $space-3 $space-4 $space-2;
     border-bottom: 1px solid $border;
     min-width: 0;
+
+    // Card sin nada debajo de la cabecera: ni divisoria ni padding cojo.
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: $space-3;
+    }
   }
 
   &__title {

package/src/components/ManagerCard.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { PanelRight } from '@lucide/vue'
 
+import { slotHasContent } from '../composables/slotHasContent'
+
 // Tarjeta de los gestores del admin (previews y PDF): NO colapsa. Mismo
 // lenguaje visual que EntityCard: cabecera con el título (+ chip opcional) y
 // divisoria; debajo, las BADGES (chips de estado, slot badges) y el meta
@@ -44,21 +46,22 @@ function onClick(event: MouseEvent) {
       <PanelRight :size="16" class="manager-card__hint" />
     </div>
 
-    <!-- Como EntityCard: badges (chips) arriba, meta debajo -->
-    <div v-if="$slots.badges || $slots.meta" class="manager-card__content">
-      <div v-if="$slots.badges" class="manager-card__badges">
+    <!-- Como EntityCard: badges (chips) arriba, meta debajo. slotHasContent
+         y no $slots.x: sin contenido real, sin parte inferior vacía. -->
+    <div v-if="slotHasContent($slots.badges) || slotHasContent($slots.meta)" class="manager-card__content">
+      <div v-if="slotHasContent($slots.badges)" class="manager-card__badges">
         <slot name="badges" />
       </div>
-      <div v-if="$slots.meta" class="manager-card__meta">
+      <div v-if="slotHasContent($slots.meta)" class="manager-card__meta">
         <slot name="meta" />
       </div>
     </div>
 
-    <div v-if="$slots.default" class="manager-card__body">
+    <div v-if="slotHasContent($slots.default)" class="manager-card__body">
       <slot />
     </div>
 
-    <footer v-if="$slots.actions" class="manager-card__actions">
+    <footer v-if="slotHasContent($slots.actions)" class="manager-card__actions">
       <slot name="actions" />
     </footer>
   </section>

package/src/composables/slotHasContent.ts

@@ -0,0 +1,24 @@
+import { Comment, Fragment, Text, type Slot, type VNode } from 'vue'
+
+/**
+ * ¿El slot pinta algo de verdad? `$slots.x` es truthy en cuanto el padre
+ * declara el `<template #x>`, aunque dentro todo sea un v-if falso o un
+ * v-for vacío; evaluando los vnodes evitamos pintar contenedores vacíos
+ * (la parte inferior de las cards, con su padding y su divisoria).
+ */
+export function slotHasContent(slot?: Slot): boolean {
+  return slot ? vnodesHaveContent(slot()) : false
+}
+
+function vnodesHaveContent(nodes: VNode[]): boolean {
+  return nodes.some((node) => {
+    if (node.type === Comment) return false
+    if (node.type === Text) {
+      return typeof node.children === 'string' && node.children.trim() !== ''
+    }
+    if (node.type === Fragment) {
+      return Array.isArray(node.children) && vnodesHaveContent(node.children as VNode[])
+    }
+    return true
+  })
+}

package/src/crud/EntityCard.vue

@@ -7,6 +7,8 @@
 // solo para entidades con imagen/preview — sin imagen, sin franja.
 import { SquarePen } from '@lucide/vue'
 
+import { slotHasContent } from '../composables/slotHasContent'
+
 withDefaults(
   defineProps<{
     title: string
@@ -50,7 +52,7 @@ defineSlots<{
     :style="accentColor ? { '--entity-card-accent': accentColor } : undefined"
     @click="clickable ? $emit('view') : undefined"
   >
-    <div v-if="$slots.media" class="entity-card__media"><slot name="media" /></div>
+    <div v-if="slotHasContent($slots.media)" class="entity-card__media"><slot name="media" /></div>
 
     <div class="entity-card__header">
       <h3 class="entity-card__title">{{ title }}</h3>
@@ -69,9 +71,14 @@ defineSlots<{
       </div>
     </div>
 
-    <div v-if="$slots.badges || $slots.meta || $slots.default" class="entity-card__content">
-      <div v-if="$slots.badges" class="entity-card__badges"><slot name="badges" /></div>
-      <div v-if="$slots.meta" class="entity-card__meta"><slot name="meta" /></div>
+    <!-- slotHasContent y no $slots.x: con el template declarado pero todo
+         v-if falso dentro, la card no debe pintar la parte inferior vacía -->
+    <div
+      v-if="slotHasContent($slots.badges) || slotHasContent($slots.meta) || slotHasContent($slots.default)"
+      class="entity-card__content"
+    >
+      <div v-if="slotHasContent($slots.badges)" class="entity-card__badges"><slot name="badges" /></div>
+      <div v-if="slotHasContent($slots.meta)" class="entity-card__meta"><slot name="meta" /></div>
       <slot />
     </div>
   </div>