vue-laravel-crud 2.0.0 → 2.0.4
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/README.md +344 -148
- package/dist/vue-laravel-crud.esm.js +472 -145
- package/dist/vue-laravel-crud.min.js +3 -3
- package/dist/vue-laravel-crud.ssr.js +525 -174
- package/package.json +7 -3
- package/src/components/CrudCards.vue +6 -3
- package/src/components/CrudCustom.vue +2 -2
- package/src/components/CrudHeader.vue +15 -2
- package/src/components/CrudKanban.vue +1 -1
- package/src/components/CrudPagination.vue +145 -18
- package/src/components/CrudTable.vue +2 -2
- package/src/components/table/TableCell.vue +52 -2
- package/src/components/table/TableHeader.vue +64 -11
- package/src/components/table/TableRow.vue +5 -1
- package/src/vue-laravel-crud.vue +695 -655
package/README.md
CHANGED
|
@@ -1,192 +1,388 @@
|
|
|
1
1
|
# vue-laravel-crud
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Componente Vue.js para crear interfaces CRUD (Create, Read, Update, Delete) completas con integración a APIs Laravel o cualquier API REST estándar.
|
|
4
4
|
|
|
5
|
+
## Instalación
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
```bash
|
|
8
|
+
npm install vue-laravel-crud
|
|
9
|
+
```
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
* POST apiUrl/modelName/:id - Create item
|
|
11
|
-
* PUT apiUrl/modelName/:id - Update item
|
|
12
|
-
* DELETE apiUrl/modelName/:id - Delete item
|
|
11
|
+
## Dependencias
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
Este componente requiere las siguientes dependencias:
|
|
15
14
|
|
|
16
|
-
* bootstrap-vue
|
|
17
|
-
* axios
|
|
18
|
-
* vuedraggable
|
|
15
|
+
* `bootstrap-vue` - Framework de componentes UI
|
|
16
|
+
* `axios` - Cliente HTTP para peticiones AJAX
|
|
17
|
+
* `vuedraggable` - Para funcionalidad de drag & drop
|
|
18
|
+
* `moment` - Para formateo de fechas
|
|
19
|
+
* `vue-infinite-loading` - Para scroll infinito (opcional)
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
## ¿Cómo funciona?
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
Este componente implementa una tabla completa con acciones para crear, modificar y eliminar elementos mediante llamadas a una API estándar.
|
|
23
24
|
|
|
24
|
-
|
|
25
|
+
### Endpoints API requeridos:
|
|
26
|
+
|
|
27
|
+
* `GET apiUrl/modelName` - Obtener listado paginado
|
|
28
|
+
* `POST apiUrl/modelName` - Crear nuevo elemento
|
|
29
|
+
* `PUT apiUrl/modelName/:id` - Actualizar elemento existente
|
|
30
|
+
* `DELETE apiUrl/modelName/:id` - Eliminar elemento
|
|
31
|
+
|
|
32
|
+
## Ejemplo Básico
|
|
25
33
|
|
|
34
|
+
### JavaScript
|
|
26
35
|
|
|
36
|
+
```js
|
|
27
37
|
import VueLaravelCrud from "vue-laravel-crud";
|
|
28
38
|
|
|
29
39
|
export default {
|
|
30
|
-
|
|
31
|
-
|
|
40
|
+
components: {
|
|
41
|
+
VueLaravelCrud
|
|
42
|
+
},
|
|
32
43
|
data() {
|
|
33
44
|
return {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
title: "Gestión de Usuarios",
|
|
46
|
+
modelName: 'users',
|
|
47
|
+
model: {
|
|
48
|
+
name: "",
|
|
49
|
+
email: "",
|
|
50
|
+
age: null,
|
|
51
|
+
},
|
|
52
|
+
columns: [
|
|
53
|
+
{ label: "ID", prop: "id", type: "number", width: "80px" },
|
|
54
|
+
{ label: "Nombre", prop: "name", type: "text" },
|
|
55
|
+
{ label: "Email", prop: "email", type: "text" },
|
|
56
|
+
{ label: "Edad", prop: "age", type: "number" },
|
|
57
|
+
{ label: "Acciones", prop: "actions", type: "actions" }
|
|
58
|
+
],
|
|
59
|
+
selected: null,
|
|
46
60
|
};
|
|
47
61
|
},
|
|
48
|
-
methods:{
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
},
|
|
55
|
-
|
|
62
|
+
methods: {
|
|
63
|
+
onSelect(item) {
|
|
64
|
+
this.selected = item;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
56
67
|
};
|
|
57
|
-
|
|
58
68
|
```
|
|
59
69
|
|
|
60
|
-
### HTML
|
|
70
|
+
### Template HTML
|
|
61
71
|
|
|
62
72
|
```html
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
73
|
+
<template>
|
|
74
|
+
<div>
|
|
75
|
+
<vue-laravel-crud
|
|
76
|
+
:title="title"
|
|
77
|
+
:modelName="modelName"
|
|
78
|
+
:model="model"
|
|
79
|
+
:columns="columns"
|
|
80
|
+
:apiUrl="'http://localhost:8000/api'"
|
|
81
|
+
@select="onSelect"
|
|
82
|
+
>
|
|
83
|
+
<!-- Slot para personalizar el formulario -->
|
|
84
|
+
<template v-slot:form="slotProps">
|
|
85
|
+
<b-form-group label="Nombre:" description="Nombre completo del usuario">
|
|
86
|
+
<b-form-input
|
|
67
87
|
v-model="slotProps.item.name"
|
|
68
88
|
type="text"
|
|
69
89
|
required
|
|
70
|
-
placeholder="
|
|
71
|
-
|
|
90
|
+
placeholder="Ingrese el nombre"
|
|
91
|
+
></b-form-input>
|
|
92
|
+
</b-form-group>
|
|
93
|
+
|
|
94
|
+
<b-form-group label="Email:" description="Correo electrónico">
|
|
95
|
+
<b-form-input
|
|
96
|
+
v-model="slotProps.item.email"
|
|
97
|
+
type="email"
|
|
98
|
+
required
|
|
99
|
+
placeholder="usuario@ejemplo.com"
|
|
100
|
+
></b-form-input>
|
|
72
101
|
</b-form-group>
|
|
73
|
-
|
|
74
|
-
|
|
102
|
+
|
|
103
|
+
<b-form-group label="Edad:" description="Edad en años">
|
|
104
|
+
<b-form-input
|
|
105
|
+
v-model="slotProps.item.age"
|
|
106
|
+
type="number"
|
|
107
|
+
min="1"
|
|
108
|
+
max="120"
|
|
109
|
+
placeholder="25"
|
|
110
|
+
></b-form-input>
|
|
111
|
+
</b-form-group>
|
|
112
|
+
</template>
|
|
113
|
+
|
|
114
|
+
<!-- Slot para personalizar la vista de detalle -->
|
|
115
|
+
<template v-slot:show="slotProps">
|
|
75
116
|
<b-list-group>
|
|
76
|
-
|
|
77
|
-
|
|
117
|
+
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
|
118
|
+
ID
|
|
119
|
+
<b-badge variant="primary" pill>{{ slotProps.item.id }}</b-badge>
|
|
120
|
+
</b-list-group-item>
|
|
121
|
+
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
|
122
|
+
Nombre
|
|
123
|
+
<b-badge variant="info" pill>{{ slotProps.item.name }}</b-badge>
|
|
124
|
+
</b-list-group-item>
|
|
125
|
+
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
|
126
|
+
Email
|
|
127
|
+
<b-badge variant="secondary" pill>{{ slotProps.item.email }}</b-badge>
|
|
128
|
+
</b-list-group-item>
|
|
78
129
|
</b-list-group>
|
|
79
|
-
|
|
80
|
-
</vue-laravel-crud>
|
|
81
|
-
|
|
130
|
+
</template>
|
|
131
|
+
</vue-laravel-crud>
|
|
132
|
+
</div>
|
|
133
|
+
</template>
|
|
82
134
|
```
|
|
83
135
|
|
|
84
|
-
|
|
136
|
+
## Ejemplo Avanzado con Slots Personalizados
|
|
85
137
|
|
|
86
138
|
```html
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
<span>
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
139
|
+
<template>
|
|
140
|
+
<div>
|
|
141
|
+
<p>Seleccionado: {{ selected ? selected.name : 'ninguno' }}</p>
|
|
142
|
+
|
|
143
|
+
<vue-laravel-crud
|
|
144
|
+
:title="title"
|
|
145
|
+
:modelName="modelName"
|
|
146
|
+
:model="model"
|
|
147
|
+
:columns="columns"
|
|
148
|
+
:apiUrl="'http://localhost:8000/api'"
|
|
149
|
+
@select="onSelect"
|
|
150
|
+
>
|
|
151
|
+
<!-- Personalizar celda específica -->
|
|
152
|
+
<template slot="cell-name" slot-scope="slotProps">
|
|
153
|
+
<span class="badge badge-primary">{{ slotProps.item.name }}</span>
|
|
154
|
+
</template>
|
|
155
|
+
|
|
156
|
+
<!-- Acciones personalizadas en la tabla -->
|
|
157
|
+
<template v-slot:tableActions="slotProps">
|
|
158
|
+
<b-button variant="info" size="sm">Acción Personalizada</b-button>
|
|
159
|
+
</template>
|
|
160
|
+
|
|
161
|
+
<template v-slot:tableActionsRight="slotProps">
|
|
162
|
+
<b-button variant="success" size="sm">Acción Derecha</b-button>
|
|
163
|
+
</template>
|
|
164
|
+
|
|
165
|
+
<!-- Acciones personalizadas por fila -->
|
|
166
|
+
<template v-slot:rowAction="slotProps">
|
|
167
|
+
<b-button
|
|
168
|
+
variant="primary"
|
|
169
|
+
size="sm"
|
|
170
|
+
@click="slotProps.showItem(slotProps.item.id, slotProps.index)"
|
|
171
|
+
>
|
|
172
|
+
<b-icon-eye></b-icon-eye> Ver
|
|
173
|
+
</b-button>
|
|
174
|
+
</template>
|
|
175
|
+
|
|
176
|
+
<!-- Formulario personalizado -->
|
|
177
|
+
<template v-slot:form="slotProps">
|
|
178
|
+
<b-form-group label="Nombre:" description="Nombre completo">
|
|
179
|
+
<b-form-input
|
|
111
180
|
v-model="slotProps.item.name"
|
|
112
181
|
type="text"
|
|
113
182
|
required
|
|
114
|
-
placeholder="
|
|
115
|
-
|
|
183
|
+
placeholder="Ingrese el nombre"
|
|
184
|
+
></b-form-input>
|
|
185
|
+
</b-form-group>
|
|
186
|
+
|
|
187
|
+
<b-form-group label="Email:" description="Correo electrónico">
|
|
188
|
+
<b-form-input
|
|
189
|
+
v-model="slotProps.item.email"
|
|
190
|
+
type="email"
|
|
191
|
+
required
|
|
192
|
+
placeholder="usuario@ejemplo.com"
|
|
193
|
+
></b-form-input>
|
|
116
194
|
</b-form-group>
|
|
117
|
-
|
|
195
|
+
</template>
|
|
118
196
|
|
|
119
|
-
|
|
197
|
+
<!-- Vista de detalle personalizada -->
|
|
198
|
+
<template v-slot:show="slotProps">
|
|
120
199
|
<b-list-group>
|
|
121
|
-
|
|
122
|
-
|
|
200
|
+
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
|
201
|
+
ID
|
|
202
|
+
<b-badge variant="primary" pill>{{ slotProps.item.id }}</b-badge>
|
|
203
|
+
</b-list-group-item>
|
|
204
|
+
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
|
205
|
+
Nombre
|
|
206
|
+
<b-badge variant="info" pill>{{ slotProps.item.name }}</b-badge>
|
|
207
|
+
</b-list-group-item>
|
|
123
208
|
</b-list-group>
|
|
124
|
-
|
|
125
|
-
</vue-laravel-crud>
|
|
209
|
+
</template>
|
|
210
|
+
</vue-laravel-crud>
|
|
211
|
+
</div>
|
|
212
|
+
</template>
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
## Configuración de Props
|
|
216
|
+
|
|
217
|
+
### Props Requeridas
|
|
218
|
+
|
|
219
|
+
| Propiedad | Descripción | Tipo | Ejemplo |
|
|
220
|
+
|:----------|:------------|:-----|:--------|
|
|
221
|
+
| `modelName` | Nombre del modelo para las peticiones API | `String` | `"users"` |
|
|
222
|
+
| `model` | Estructura del modelo para formularios | `Object` | `{ name: "", email: "" }` |
|
|
223
|
+
| `columns` | Array de columnas de la tabla | `Array` | Ver ejemplo abajo |
|
|
224
|
+
|
|
225
|
+
### Props Opcionales - Configuración General
|
|
226
|
+
|
|
227
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
228
|
+
|:----------|:------------|:-----|:------------------|
|
|
229
|
+
| `title` | Título del componente | `String` | `""` |
|
|
230
|
+
| `ajax` | Habilitar llamadas AJAX | `Boolean` | `true` |
|
|
231
|
+
| `apiUrl` | URL base de la API | `String` | `"/api"` |
|
|
232
|
+
| `useVuexORM` | Usar Vuex ORM | `Boolean` | `false` |
|
|
233
|
+
| `models` | Lista de modelos (cuando `ajax=false`) | `Array` | `[]` |
|
|
234
|
+
|
|
235
|
+
### Props Opcionales - Visualización
|
|
236
|
+
|
|
237
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
238
|
+
|:----------|:------------|:-----|:------------------|
|
|
239
|
+
| `displayMode` | Modo de visualización (1=Tabla, 2=Tarjetas, 3=Lista, 4=Kanban) | `Number` | `1` |
|
|
240
|
+
| `displayModeToggler` | Habilitar selector de modo | `Boolean` | `false` |
|
|
241
|
+
| `limit` | Elementos por página | `Number` | `20` |
|
|
242
|
+
| `showPaginator` | Mostrar paginador | `Boolean` | `true` |
|
|
243
|
+
| `showCreateBtn` | Mostrar botón de crear | `Boolean` | `true` |
|
|
244
|
+
| `showSearch` | Mostrar campo de búsqueda | `Boolean` | `true` |
|
|
245
|
+
| `showHeader` | Mostrar encabezado completo | `Boolean` | `true` |
|
|
246
|
+
| `showTitle` | Mostrar título | `Boolean` | `true` |
|
|
247
|
+
| `searchPlaceholder` | Placeholder del buscador | `String` | `"Buscar..."` |
|
|
248
|
+
|
|
249
|
+
### Props Opcionales - Filtros y Ordenamiento
|
|
250
|
+
|
|
251
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
252
|
+
|:----------|:------------|:-----|:------------------|
|
|
253
|
+
| `filter` | Filtros de búsqueda predefinidos | `Array` | `[]` |
|
|
254
|
+
| `enableFilters` | Habilitar panel de filtros avanzados | `Boolean` | `false` |
|
|
255
|
+
| `sortable` | Habilitar ordenamiento de columnas | `Boolean` | `false` |
|
|
256
|
+
| `orderable` | Habilitar reordenamiento drag & drop | `Boolean` | `false` |
|
|
257
|
+
| `orderProp` | Propiedad para ordenamiento | `String` | `"order"` |
|
|
258
|
+
| `infiniteScroll` | Habilitar scroll infinito | `Boolean` | `false` |
|
|
259
|
+
|
|
260
|
+
### Props Opcionales - Comportamiento
|
|
261
|
+
|
|
262
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
263
|
+
|:----------|:------------|:-----|:------------------|
|
|
264
|
+
| `hideModalAfterSave` | Ocultar modal después de guardar | `Boolean` | `true` |
|
|
265
|
+
| `hideModalAfterCreate` | Ocultar modal después de crear | `Boolean` | `false` |
|
|
266
|
+
| `hideModalAfterUpdate` | Ocultar modal después de actualizar | `Boolean` | `false` |
|
|
267
|
+
| `refreshAfterSave` | Actualizar datos después de guardar | `Boolean` | `true` |
|
|
268
|
+
| `validate` | Habilitar validación de formularios | `Boolean` | `false` |
|
|
269
|
+
| `createMultipart` | Crear elementos con multipart/form-data | `Boolean` | `false` |
|
|
270
|
+
|
|
271
|
+
### Props Opcionales - Selección
|
|
272
|
+
|
|
273
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
274
|
+
|:----------|:------------|:-----|:------------------|
|
|
275
|
+
| `selectHover` | Seleccionar al pasar el mouse | `Boolean` | `false` |
|
|
276
|
+
| `selectClick` | Seleccionar al hacer clic | `Boolean` | `false` |
|
|
277
|
+
|
|
278
|
+
### Props Opcionales - Estilos
|
|
279
|
+
|
|
280
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
281
|
+
|:----------|:------------|:-----|:------------------|
|
|
282
|
+
| `tableClass` | Clases CSS adicionales para la tabla | `String` | `""` |
|
|
283
|
+
| `tableContainerClass` | Clases CSS para el contenedor de tabla | `String` | `""` |
|
|
284
|
+
| `cardClass` | Clases CSS para las tarjetas | `String` | `""` |
|
|
285
|
+
| `listContainerClass` | Clases CSS para contenedor de lista | `String` | `""` |
|
|
286
|
+
| `listItemClass` | Clases CSS para elementos de lista | `String` | `""` |
|
|
287
|
+
| `cardHideFooter` | Ocultar pie de tarjeta | `Boolean` | `false` |
|
|
288
|
+
|
|
289
|
+
### Props Opcionales - Agrupación y Drag & Drop
|
|
290
|
+
|
|
291
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
292
|
+
|:----------|:------------|:-----|:------------------|
|
|
293
|
+
| `grouped` | Agrupar elementos | `Boolean` | `false` |
|
|
294
|
+
| `groupedAttribute` | Atributo para agrupación | `String` | `"name"` |
|
|
295
|
+
| `groupedLabelPre` | Etiqueta antes del grupo | `String` | `""` |
|
|
296
|
+
| `groupedLabelAfter` | Etiqueta después del grupo | `String` | `""` |
|
|
297
|
+
| `groupedSplit` | Dividir grupos | `Boolean` | `false` |
|
|
298
|
+
| `draggableGroup` | Grupo para drag & drop | `String` | `"people"` |
|
|
299
|
+
| `draggableOptions` | Opciones de drag & drop | `Object` | `{ clone: false }` |
|
|
300
|
+
|
|
301
|
+
### Props Opcionales - Columnas Responsivas (Vista Tarjetas)
|
|
302
|
+
|
|
303
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
304
|
+
|:----------|:------------|:-----|:------------------|
|
|
305
|
+
| `colXs` | Columnas en pantallas XS | `Number` | `12` |
|
|
306
|
+
| `colSm` | Columnas en pantallas SM | `Number` | `12` |
|
|
307
|
+
| `colMd` | Columnas en pantallas MD | `Number` | `6` |
|
|
308
|
+
| `colLg` | Columnas en pantallas LG | `Number` | `4` |
|
|
309
|
+
| `colXl` | Columnas en pantallas XL | `Number` | `3` |
|
|
310
|
+
|
|
311
|
+
### Props Opcionales - Importación/Exportación
|
|
312
|
+
|
|
313
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
314
|
+
|:----------|:------------|:-----|:------------------|
|
|
315
|
+
| `showImport` | Mostrar botón de importar | `Boolean` | `false` |
|
|
316
|
+
| `showExport` | Mostrar botón de exportar | `Boolean` | `false` |
|
|
317
|
+
| `bulkDelete` | Habilitar eliminación masiva | `Boolean` | `false` |
|
|
318
|
+
| `markDirty` | Marcar elementos como modificados | `Boolean` | `true` |
|
|
319
|
+
|
|
320
|
+
## Mensajes Personalizables
|
|
321
|
+
|
|
322
|
+
| Propiedad | Descripción | Tipo | Valor por defecto |
|
|
323
|
+
|:----------|:------------|:-----|:------------------|
|
|
324
|
+
| `messageRemoveConfirm` | Mensaje de confirmación de eliminación | `String` | `"¿Está seguro de borrar este elemento?"` |
|
|
325
|
+
| `messageRemove` | Texto del botón eliminar | `String` | `"BORRAR"` |
|
|
326
|
+
| `messageNew` | Texto del botón nuevo | `String` | `"Nuevo"` |
|
|
327
|
+
| `messageSave` | Texto del botón guardar | `String` | `"Guardar"` |
|
|
328
|
+
| `messageEmptyResults` | Mensaje cuando no hay resultados | `String` | `"No se han encontrado resultados"` |
|
|
329
|
+
| `messageNoMore` | Mensaje de fin de resultados | `String` | `"No hay más elementos para mostrar."` |
|
|
330
|
+
| `messageLoading` | Mensaje de carga | `String` | `"Cargando..."` |
|
|
331
|
+
| `messageDefaultValidationError` | Mensaje de error de validación | `String` | `"Por favor controle el formulario, contiene errores."` |
|
|
332
|
+
| `messageImport` | Texto del botón importar | `String` | `"Importar"` |
|
|
333
|
+
| `messageExport` | Texto del botón exportar | `String` | `"Exportar"` |
|
|
334
|
+
|
|
335
|
+
## Configuración de Columnas
|
|
336
|
+
|
|
337
|
+
Las columnas se definen como un array de objetos con las siguientes propiedades:
|
|
126
338
|
|
|
339
|
+
```js
|
|
340
|
+
columns: [
|
|
341
|
+
{
|
|
342
|
+
label: "ID", // Texto del encabezado
|
|
343
|
+
prop: "id", // Propiedad del objeto a mostrar
|
|
344
|
+
type: "number", // Tipo: text, number, date, boolean, state, actions
|
|
345
|
+
width: "80px", // Ancho de la columna (opcional)
|
|
346
|
+
format: "DD/MM/YYYY", // Formato para fechas (opcional)
|
|
347
|
+
options: [ // Opciones para tipo "state"
|
|
348
|
+
{ id: "active", text: "Activo" },
|
|
349
|
+
{ id: "inactive", text: "Inactivo" }
|
|
350
|
+
]
|
|
351
|
+
}
|
|
352
|
+
]
|
|
127
353
|
```
|
|
128
354
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
| colXl | Columnas en pantallas XL | `Number` | opcional, predeterminado: `3` |
|
|
164
|
-
| selectHover | Seleccionar al pasar el mouse | `Boolean` | opcional, predeterminado: `false` |
|
|
165
|
-
| selectClick | Seleccionar al hacer clic | `Boolean` | opcional, predeterminado: `false` |
|
|
166
|
-
| cardClass | Clase de tarjeta | `String` | opcional, predeterminado: `""` |
|
|
167
|
-
| listContainerClass | Clase de contenedor de lista | `String` | opcional, predeterminado: `""` |
|
|
168
|
-
| listItemClass | Clase de elemento de lista | `String` | opcional, predeterminado: `""` |
|
|
169
|
-
| cardHideFooter | Ocultar pie de tarjeta | `Boolean` | opcional, predeterminado: `false` |
|
|
170
|
-
| searchPlaceholder | Marcador de posición de búsqueda | `String` | opcional, predeterminado: "Buscar..." |
|
|
171
|
-
| tableContainerClass | Clase de contenedor de tabla | `String` | opcional, predeterminado: `""` |
|
|
172
|
-
| tableClass | Clase de tabla | `String` | opcional, predeterminado: `""` |
|
|
173
|
-
| grouped | Agrupar elementos | `Boolean` | opcional, predeterminado: `false` |
|
|
174
|
-
| groupedAttribute | Atributo de agrupación | `String` | opcional, predeterminado: "name" |
|
|
175
|
-
| groupedLabelPre | Etiqueta de grupo anterior | `String` | opcional, predeterminado: `""` |
|
|
176
|
-
| groupedLabelAfter | Etiqueta de grupo posterior | `String` | opcional, predeterminado: `""` |
|
|
177
|
-
| draggableGroup | Grupo arrastrable | `String` | opcional, predeterminado: "people" |
|
|
178
|
-
| draggableOptions | Opciones de arrastre | `Object` | opcional, predeterminado: `{ clone: false }` |
|
|
179
|
-
|
|
180
|
-
## Messages
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
| Propiedad | Descripción | Tipo | Valor |
|
|
184
|
-
|:------------------------|:------------------------------|:----------|:------------------------------------------------|
|
|
185
|
-
| messageRemoveConfirm | Mensaje de confirmación de eliminación | `String` | opcional, predeterminado: "¿Está seguro de borrar este elemento?" |
|
|
186
|
-
| messageRemove | Mensaje de eliminación | `String` | opcional, predeterminado: "BORRAR" |
|
|
187
|
-
| messageNew | Mensaje de nuevo elemento | `String` | opcional, predeterminado: "Nuevo" |
|
|
188
|
-
| messageEmptyResults | Mensaje de resultados vacíos | `String` | opcional, predeterminado: "No se han encontrado resultados" |
|
|
189
|
-
| messageNoMore | Mensaje de fin de resultados | `String` | opcional, predeterminado: "No hay más elementos para mostrar." |
|
|
190
|
-
| messageLoading | Mensaje de carga | `String` | opcional, predeterminado: "Cargando..." |
|
|
191
|
-
| messageSave | Mensaje de guardar | `String` | opcional, predeterminado: "Guardar" |
|
|
192
|
-
| messageDefaultValidationError | Mensaje de error de validación por defecto | `String` | opcional, predeterminado: "Por favor controle el formulario, contiene errores." |
|
|
355
|
+
### Tipos de Columna Disponibles:
|
|
356
|
+
|
|
357
|
+
- `text` - Texto simple
|
|
358
|
+
- `number` - Número
|
|
359
|
+
- `date` - Fecha (usa moment.js para formateo)
|
|
360
|
+
- `boolean` - Valor booleano
|
|
361
|
+
- `state` - Estado con badges de colores (requiere `options`)
|
|
362
|
+
- `actions` - Columna especial con botones Ver/Editar/Eliminar
|
|
363
|
+
|
|
364
|
+
## Eventos
|
|
365
|
+
|
|
366
|
+
El componente emite los siguientes eventos:
|
|
367
|
+
|
|
368
|
+
- `@select` - Cuando se selecciona un elemento
|
|
369
|
+
- `@itemSaved` - Cuando se guarda un elemento
|
|
370
|
+
- `@itemDeleted` - Cuando se elimina un elemento
|
|
371
|
+
- `@refresh` - Cuando se refrescan los datos
|
|
372
|
+
|
|
373
|
+
## Slots Disponibles
|
|
374
|
+
|
|
375
|
+
- `form` - Personalizar el formulario de crear/editar
|
|
376
|
+
- `show` - Personalizar la vista de detalle
|
|
377
|
+
- `cell-{prop}` - Personalizar una celda específica (ej: `cell-name`)
|
|
378
|
+
- `tableActions` - Acciones personalizadas en la tabla (lado izquierdo)
|
|
379
|
+
- `tableActionsRight` - Acciones personalizadas en la tabla (lado derecho)
|
|
380
|
+
- `rowAction` - Acciones personalizadas por fila
|
|
381
|
+
|
|
382
|
+
## Ejemplos Adicionales
|
|
383
|
+
|
|
384
|
+
Para ver más ejemplos y demos completos, visita el directorio `dev/demo/examples/` en el repositorio.
|
|
385
|
+
|
|
386
|
+
## Licencia
|
|
387
|
+
|
|
388
|
+
MIT
|