@edc-motor/admin-kit 0.4.10 → 0.4.11

package/package.json

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

package/scss/components/_admin-layout.scss

@@ -145,6 +145,72 @@
   }
 }
 
+// Grupo plegable del menú (NavGroup): cabecera-botón con el mismo cuerpo que
+// un nav-item (más el chevron) y panel de hijos con sangría. La animación va
+// por grid-template-rows (0fr → 1fr): discreta y sin medir alturas en JS.
+.nav-group {
+  display: flex;
+  flex-direction: column;
+
+  &__toggle {
+    width: 100%;
+    background: none;
+    border: none;
+    font-family: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  &__chevron {
+    margin-left: auto;
+    color: $text-3;
+    transition: transform 0.2s ease;
+  }
+
+  &--open > .nav-group__toggle .nav-group__chevron {
+    transform: rotate(90deg);
+  }
+
+  // Activo (la ruta actual es de un hijo): la cabecera toma el acento; solo
+  // plegado toma también el fondo (desplegado ya se resalta el propio hijo).
+  &--active > .nav-group__toggle {
+    color: $accent-600;
+  }
+  &--active:not(.nav-group--open) > .nav-group__toggle {
+    background: $accent-100;
+  }
+
+  &__panel {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.2s ease;
+  }
+
+  &--open > .nav-group__panel {
+    grid-template-rows: 1fr;
+  }
+
+  &__children {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-height: 0;
+    overflow: hidden;
+    // Plegado, fuera del tab-order; al plegar espera a que acabe la animación.
+    visibility: hidden;
+    transition: visibility 0s 0.2s;
+
+    .nav-item {
+      padding-left: $space-6 + $space-2;
+    }
+  }
+
+  &--open > .nav-group__panel > .nav-group__children {
+    visibility: visible;
+    transition: visibility 0s;
+  }
+}
+
 .sidebar-user {
   display: flex;
   align-items: center;
@@ -266,6 +332,22 @@
   .nav-label {
     display: none;
   }
+
+  // Carril de iconos: los grupos muestran siempre a sus hijos (lo fuerza
+  // NavGroup vía inject) y su cabecera queda inerte, sin chevron ni sangría.
+  .nav-group__chevron {
+    display: none;
+  }
+  .nav-group__toggle {
+    cursor: default;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+  .nav-group__children .nav-item {
+    padding-left: $space-3;
+  }
 }
 
 // ---- Modo móvil (< bp-md): el sidebar se vuelve drawer ----

package/scss/components/_entity-card.scss

@@ -20,6 +20,21 @@
   &--muted { opacity: 0.65; }
   &.is-active { border-color: $accent-500; }
 
+  // Borde teñido con el color de la entidad (prop accentColor, p. ej. su
+  // facción). El color viene de los datos del juego, así que en reposo nunca
+  // va puro: mezclado con el borde del tema queda sutil tanto en claro como
+  // en oscuro; gana presencia al hover y es pleno en la tarjeta seleccionada.
+  &--accented {
+    border-color: color-mix(in srgb, var(--entity-card-accent) 45%, $border);
+
+    &.entity-card--clickable:hover {
+      border-color: color-mix(in srgb, var(--entity-card-accent) 75%, $border-strong);
+    }
+    &.is-active {
+      border-color: var(--entity-card-accent);
+    }
+  }
+
   // 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. Sin fondo:

package/src/crud/EntityCard.vue

@@ -18,6 +18,11 @@ withDefaults(
     editable?: boolean
     /** Texto accesible del botón de editar (agnóstico de i18n, DC-29). */
     editLabel?: string
+    /**
+     * Color de acento de la entidad (p. ej. su facción, de los datos del
+     * juego): tiñe el borde de la tarjeta. Sin la prop, borde del tema.
+     */
+    accentColor?: string
   }>(),
   { editLabel: 'Editar' },
 )
@@ -39,8 +44,10 @@ defineSlots<{
     :class="{
       'entity-card--clickable': clickable,
       'entity-card--muted': muted,
+      'entity-card--accented': !!accentColor,
       'is-active': active,
     }"
+    :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>

package/src/index.ts

@@ -1,6 +1,9 @@
 // @edc-motor/admin-kit — layout del panel + scaffolding CRUD (sobre @edc-motor/ui).
 
 export { default as AdminLayout } from './layout/AdminLayout.vue'
+// Grupo plegable para el slot #nav del AdminLayout: mezcla nav-item sueltos
+// y grupos (icono + etiqueta + chevron) con plegado persistido en localStorage.
+export { default as NavGroup } from './layout/NavGroup.vue'
 // Panel derecho contextual (patrón kontuan): AdminLayout lo monta; cada vista
 // lo activa con useRightSidebar() y Teleport a #right-sidebar-target.
 export { default as RightSidebar } from './layout/RightSidebar.vue'

package/src/layout/AdminLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, provide, watch } from 'vue'
 import { useRoute, type RouteLocationRaw } from 'vue-router'
 import { ChevronLeft, ChevronRight, Menu, X } from '@lucide/vue'
 import {
@@ -11,6 +11,7 @@ import {
 } from '@edc-motor/ui'
 import RightSidebar from './RightSidebar.vue'
 import { useRightSidebar } from '../composables/useRightSidebar'
+import { SIDEBAR_RAIL } from './keys'
 
 // Layout del panel — portado del AppLayout de kontuan (DC-28): sidebar
 // colapsable en escritorio, drawer a pantalla completa en móvil, preferencias
@@ -84,6 +85,20 @@ function toggleSidebar() {
   sidebarCollapsed.value = !sidebarCollapsed.value
   localStorage.setItem('edc_admin_collapsed', sidebarCollapsed.value ? '1' : '0')
 }
+
+// Estado "carril de iconos" para los NavGroup del slot #nav (ver keys.ts).
+provide(
+  SIDEBAR_RAIL,
+  computed(() => sidebarCollapsed.value && !isMobile.value),
+)
+
+// En móvil, tocar un ENLACE del menú cierra el drawer; los toggles de grupo
+// (NavGroup) no navegan y deben dejarlo abierto.
+function onNavClick(event: MouseEvent) {
+  if (isMobile.value && (event.target as HTMLElement).closest('a')) {
+    sidebarMobileOpen.value = false
+  }
+}
 </script>
 
 <template>
@@ -131,7 +146,7 @@ function toggleSidebar() {
         </div>
         <hr v-if="!sidebarCollapsed || isMobile" class="sidebar-divider" />
 
-        <div class="sidebar-items" @click="isMobile && (sidebarMobileOpen = false)">
+        <div class="sidebar-items" @click="onNavClick">
           <slot name="nav" />
         </div>
       </nav>

package/src/layout/NavGroup.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// Grupo plegable del menú lateral: cabecera-botón (icono + etiqueta + chevron)
+// que despliega/pliega sus hijos (los nav-item van en el slot por defecto,
+// igual que sueltos en el #nav del AdminLayout). El estado se persiste en
+// localStorage por clave de grupo (por defecto plegado) y, con la ruta actual
+// en un hijo (prop `active`), el grupo se resalta y se auto-despliega.
+import { computed, inject, ref, useId, watch } from 'vue'
+import { ChevronRight } from '@lucide/vue'
+import { SIDEBAR_RAIL } from './keys'
+
+const props = defineProps<{
+  /** Etiqueta del grupo (ya traducida por la app). */
+  label: string
+  /** Clave del plegado en localStorage (`edc_admin_nav_<clave>`). */
+  storageKey: string
+  /**
+   * La ruta actual es de un hijo: resalta la cabecera y auto-despliega. La
+   * app lo calcula igual que el `active` de sus nav-item (p. ej. meta.nav).
+   */
+  active?: boolean
+}>()
+
+defineSlots<{ icon?: () => unknown; default?: () => unknown }>()
+
+const STORAGE_PREFIX = 'edc_admin_nav_'
+
+// Por defecto plegado; si el usuario lo dejó abierto, se respeta.
+const open = ref(localStorage.getItem(STORAGE_PREFIX + props.storageKey) === '1')
+
+// Auto-despliegue al entrar en una ruta hija (sin persistir: solo los toggles
+// del usuario guardan preferencia).
+watch(
+  () => props.active,
+  (active) => {
+    if (active) open.value = true
+  },
+  { immediate: true },
+)
+
+// En el carril de iconos (sidebar colapsado en escritorio) los hijos se
+// muestran siempre y el toggle no hace nada: plegar sin etiquetas ocultaría
+// rutas. AdminLayout provee el estado; fuera de él, nunca es carril.
+const rail = inject(
+  SIDEBAR_RAIL,
+  computed(() => false),
+)
+const expanded = computed(() => rail.value || open.value)
+
+const panelId = useId()
+
+function toggle() {
+  if (rail.value) return
+  open.value = !open.value
+  localStorage.setItem(STORAGE_PREFIX + props.storageKey, open.value ? '1' : '0')
+}
+</script>
+
+<template>
+  <div class="nav-group" :class="{ 'nav-group--open': expanded, 'nav-group--active': active }">
+    <button
+      type="button"
+      class="nav-item nav-group__toggle"
+      :aria-expanded="expanded"
+      :aria-controls="panelId"
+      @click="toggle"
+    >
+      <slot name="icon" />
+      <span class="nav-label">{{ label }}</span>
+      <ChevronRight class="nav-group__chevron" :size="16" aria-hidden="true" />
+    </button>
+    <div :id="panelId" class="nav-group__panel">
+      <div class="nav-group__children"><slot /></div>
+    </div>
+  </div>
+</template>

package/src/layout/keys.ts

@@ -0,0 +1,7 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+// Estado "carril de iconos" del sidebar (colapsado en escritorio, sin
+// etiquetas). Lo provee AdminLayout y lo consume NavGroup: en el carril un
+// grupo plegado dejaría a sus hijos inalcanzables, así que se muestran
+// siempre y el toggle queda inerte.
+export const SIDEBAR_RAIL: InjectionKey<ComputedRef<boolean>> = Symbol('edc-admin-sidebar-rail')