@edc-motor/admin-kit 0.4.1 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/scss/components/_entity-card.scss +16 -0
- package/src/crud/EntityCard.vue +30 -10
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edc-motor/admin-kit",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"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)",
|
|
5
5
|
"license": "GPL-3.0-only",
|
|
6
6
|
"type": "module",
|
|
@@ -55,6 +55,22 @@
|
|
|
55
55
|
min-width: 0;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
// Editar en la propia tarjeta (entidades sin single).
|
|
59
|
+
&__edit {
|
|
60
|
+
display: inline-flex;
|
|
61
|
+
align-items: center;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
padding: $space-1;
|
|
64
|
+
background: none;
|
|
65
|
+
border: none;
|
|
66
|
+
border-radius: $radius-sm;
|
|
67
|
+
color: $text-3;
|
|
68
|
+
cursor: pointer;
|
|
69
|
+
transition: color 0.15s ease;
|
|
70
|
+
|
|
71
|
+
&:hover { color: $accent-500; }
|
|
72
|
+
}
|
|
73
|
+
|
|
58
74
|
&__actions {
|
|
59
75
|
display: flex;
|
|
60
76
|
align-items: center;
|
package/src/crud/EntityCard.vue
CHANGED
|
@@ -3,16 +3,26 @@
|
|
|
3
3
|
// - kontuan: contenedor con borde/sombra, hover al accent, slots.
|
|
4
4
|
// - CDL: cabecera con título + acciones y divisoria, zona de contenido con
|
|
5
5
|
// "badges" (chips de estado) y "meta" (datos secundarios).
|
|
6
|
-
// Opcionalmente una franja "media" arriba (p. ej. el emblema de la casa)
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
6
|
+
// Opcionalmente una franja "media" arriba (p. ej. el emblema de la casa):
|
|
7
|
+
// solo para entidades con imagen/preview — sin imagen, sin franja.
|
|
8
|
+
import { SquarePen } from '@lucide/vue'
|
|
9
|
+
|
|
10
|
+
withDefaults(
|
|
11
|
+
defineProps<{
|
|
12
|
+
title: string
|
|
13
|
+
clickable?: boolean
|
|
14
|
+
muted?: boolean
|
|
15
|
+
/** Marca la tarjeta como seleccionada (panel derecho). */
|
|
16
|
+
active?: boolean
|
|
17
|
+
/** Botón de editar en la cabecera (entidades SIN vista single). */
|
|
18
|
+
editable?: boolean
|
|
19
|
+
/** Texto accesible del botón de editar (agnóstico de i18n, DC-29). */
|
|
20
|
+
editLabel?: string
|
|
21
|
+
}>(),
|
|
22
|
+
{ editLabel: 'Editar' },
|
|
23
|
+
)
|
|
14
24
|
|
|
15
|
-
defineEmits<{ view: [] }>()
|
|
25
|
+
defineEmits<{ view: []; edit: [] }>()
|
|
16
26
|
|
|
17
27
|
defineSlots<{
|
|
18
28
|
media?: () => unknown
|
|
@@ -37,8 +47,18 @@ defineSlots<{
|
|
|
37
47
|
|
|
38
48
|
<div class="entity-card__header">
|
|
39
49
|
<h3 class="entity-card__title">{{ title }}</h3>
|
|
40
|
-
<div v-if="$slots.actions" class="entity-card__actions" @click.stop>
|
|
50
|
+
<div v-if="$slots.actions || editable" class="entity-card__actions" @click.stop>
|
|
41
51
|
<slot name="actions" />
|
|
52
|
+
<button
|
|
53
|
+
v-if="editable"
|
|
54
|
+
type="button"
|
|
55
|
+
class="entity-card__edit"
|
|
56
|
+
:title="editLabel"
|
|
57
|
+
:aria-label="editLabel"
|
|
58
|
+
@click="$emit('edit')"
|
|
59
|
+
>
|
|
60
|
+
<SquarePen :size="14" />
|
|
61
|
+
</button>
|
|
42
62
|
</div>
|
|
43
63
|
</div>
|
|
44
64
|
|