energy-components 2.3.1 → 2.5.0
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/dist/components/actionButton.es.js +31 -18
- package/dist/components/breadcrumbs.es.js +76 -52
- package/dist/components/link.es.js +63 -48
- package/dist/components/pagination.es.js +58 -47
- package/dist/components/persistentToast.es.js +34 -25
- package/dist/components/searchField.es.js +18 -9
- package/dist/components/sidedrawer.es.js +53 -40
- package/dist/components/style/actionButton.css +1 -1
- package/dist/components/style/breadcrumbs.css +1 -1
- package/dist/components/style/link.css +1 -1
- package/dist/components/style/pagination.css +1 -1
- package/dist/components/style/persistentToast.css +1 -1
- package/dist/components/style/searchField.css +1 -1
- package/dist/components/style/sidedrawer.css +1 -1
- package/dist/components/style/table.css +1 -1
- package/dist/components/style/toggle.css +1 -1
- package/dist/components/table.es.js +85 -82
- package/dist/components/toggle.es.js +92 -36
- package/dist/energy-components.css +1 -1
- package/dist/energy-components.es.js +4842 -4690
- package/dist/energy-components.umd.js +2 -2
- package/dist/style.css +1 -1
- package/dist/types/src/components/buttons/action-button/action-button.vue.d.ts +62 -0
- package/dist/types/src/components/content/table/table.vue.d.ts +13 -0
- package/dist/types/src/components/feedback/persistent-toast/persistent-toast.vue.d.ts +15 -0
- package/dist/types/src/components/input/search-field/search-field.vue.d.ts +15 -0
- package/dist/types/src/components/input/toggle/toggle.vue.d.ts +20 -0
- package/dist/types/src/components/layout/sidedrawer/sidedrawer.vue.d.ts +18 -3
- package/dist/types/src/components/navigation/breadcrumbs/breadcrumbs.vue.d.ts +30 -0
- package/dist/types/src/components/navigation/link/link.vue.d.ts +5 -5
- package/dist/types/src/components/navigation/pagination/pagination.vue.d.ts +21 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/llms/rdsaccordion-group.md +6 -0
- package/llms/rdsaccordion.md +6 -0
- package/llms/rdsaction-button.md +1 -0
- package/llms/rdsbadge.md +5 -0
- package/llms/rdsbreadcrumbs.md +2 -0
- package/llms/rdsdate-picker.md +6 -0
- package/llms/rdsdropdown.md +6 -0
- package/llms/rdslink.md +1 -1
- package/llms/rdsmodal.md +9 -0
- package/llms/rdspagination.md +6 -0
- package/llms/rdspersistent-toast.md +1 -0
- package/llms/rdspopover-menu.md +7 -0
- package/llms/rdspopover.md +7 -0
- package/llms/rdssearch-field.md +7 -0
- package/llms/rdssidebar.md +9 -0
- package/llms/rdssidedrawer.md +9 -0
- package/llms/rdstable.md +8 -1
- package/llms/rdstext-field.md +6 -0
- package/llms/rdstoggle.md +5 -0
- package/llms/rdstooltip.md +7 -0
- package/package.json +1 -1
|
@@ -5,3 +5,9 @@
|
|
|
5
5
|
| Slot | Descripción | Bindings |
|
|
6
6
|
|---|---|---|
|
|
7
7
|
| default | Aqui se cargan los elementos `RDSAccordion` | |
|
|
8
|
+
|
|
9
|
+
## Métodos expuestos
|
|
10
|
+
| Método | Descripción |
|
|
11
|
+
|---|---|
|
|
12
|
+
| openAll | Abre todos los paneles del acordeón |
|
|
13
|
+
| closeAll | Cierra todos los paneles del acordeón |
|
package/llms/rdsaccordion.md
CHANGED
package/llms/rdsaction-button.md
CHANGED
|
@@ -13,3 +13,4 @@
|
|
|
13
13
|
| id | string | No | undefined | <span>ID del botón para testing</span> | |
|
|
14
14
|
| tooltip | string | No | | <span>Contenido del tooltip. Si se proporciona, se mostrará el tooltip al hacer hover</span> | |
|
|
15
15
|
| tooltipPosition | string | No | undefined | <span>Posición del tooltip (top, bottom, left, right). Si no se especifica, se posiciona automáticamente</span> | |
|
|
16
|
+
| tooltipProps | TooltipProps | No | () => ({}) | <span>Props adicionales para el RDSTooltip interno. Permite configurar cualquier prop de RDSTooltip (ej: teleportTo, offsetSpace, hideDelay, large…). Los valores aquí definidos sobreescriben los derivados de `tooltip` y `tooltipPosition`.</span> | |
|
package/llms/rdsbadge.md
CHANGED
package/llms/rdsbreadcrumbs.md
CHANGED
|
@@ -8,6 +8,8 @@
|
|
|
8
8
|
| inverse | boolean | No | false | <span>Indica si el breadcrumb se mostrará en modo inverso. En modo inverso, el texto es claro sobre un fondo oscuro.</span> | |
|
|
9
9
|
| trimItems | boolean | No | false | <span>Indica si el breadcrumb debe ser recortado en el medio, y mostrar un botón en su lugar.</span> | |
|
|
10
10
|
| leftTrim | boolean | No | false | <span>Indica si el breadcrumb debe ser recortado por la izquierda, mostrando solo los dos últimos niveles.</span> | |
|
|
11
|
+
| ariaLabel | string | No | Breadcrumb | <span>Etiqueta accesible del landmark de navegación para i18n</span> | |
|
|
12
|
+
| ellipsisAriaLabel | string | No | Show hidden levels | <span>Etiqueta accesible del botón de elipsis para i18n</span> | |
|
|
11
13
|
| id | string | No | undefined | ID del breadcrumbs para testing | |
|
|
12
14
|
|
|
13
15
|
## Eventos
|
package/llms/rdsdate-picker.md
CHANGED
|
@@ -63,3 +63,9 @@
|
|
|
63
63
|
|---|---|---|
|
|
64
64
|
| day | Modificar como se ve el numero del dia del calendario. | day: any, date: any |
|
|
65
65
|
| slot | `GENERICO`, se puden pasar todos los slots de VueDatePicker | name: any |
|
|
66
|
+
|
|
67
|
+
## Métodos expuestos
|
|
68
|
+
| Método | Descripción |
|
|
69
|
+
|---|---|
|
|
70
|
+
| selectDate | Selecciona la fecha, comunmente usada para el boton de accion |
|
|
71
|
+
| clearValue | Limpia el valor del datepicker |
|
package/llms/rdsdropdown.md
CHANGED
package/llms/rdslink.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
name: '',
|
|
11
11
|
modifier: ''
|
|
12
12
|
} | <span>Icono a mostrar en el link</span> | |
|
|
13
|
-
| tag | string | No | router-link | <span>Tag del link</span> | |
|
|
13
|
+
| tag | string | No | router-link | <span>Tag semántico del componente. Valores soportados: <code>router-link</code> (navegación interna), <code>a</code> (enlace externo) y <code>button</code> (acción sin navegación).</span> | |
|
|
14
14
|
| disabled | boolean | No | false | <span>Indica si el link esta deshabilitado</span> | |
|
|
15
15
|
| underline | boolean | No | false | <span>Indica si el link tiene underline</span> | |
|
|
16
16
|
| inverse | boolean | No | false | <span>Indica si el link es inverso</span> | |
|
package/llms/rdsmodal.md
CHANGED
|
@@ -30,3 +30,12 @@
|
|
|
30
30
|
| header | | |
|
|
31
31
|
| body | | |
|
|
32
32
|
| footer | | |
|
|
33
|
+
|
|
34
|
+
## Métodos expuestos
|
|
35
|
+
| Método | Descripción |
|
|
36
|
+
|---|---|
|
|
37
|
+
| modalClickOutside | { () => void } Gestiona el clic fuera del modal. |
|
|
38
|
+
| openModal | { () => void } Solicita abrir el modal. |
|
|
39
|
+
| closeModal | { () => void } Solicita cerrar el modal. |
|
|
40
|
+
| changeModalState | { (state: boolean) => void } Cambia el estado del modal. |
|
|
41
|
+
| toggleModal | { () => void } Alterna el estado del modal. |
|
package/llms/rdspagination.md
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
| enableEllipsis | boolean | No | false | Habilita la funcionalidad de elipsis (...) para mostrar páginas ocultas. Cuando se hace click en las elipsis, se emite un evento con las páginas ocultas. | |
|
|
16
16
|
| enablePageDropdown | boolean | No | false | Habilita la funcionalidad de selector de paginación. Añade un dropdown para seleccionar la página. Cómo máximo se muestran 3 páginas en la paginación | |
|
|
17
17
|
| pageDropdownLabel | string | No | | Label para el dropdown de selección de página. | |
|
|
18
|
+
| legendText | string | No | undefined | Texto personalizado para la leyenda de paginación. Usa {start}, {end} y {total} como placeholders. Ejemplo: 'Showing {start}-{end} of {total} results' Si no se provee, se usa el texto por defecto. | |
|
|
18
19
|
| id | string | No | undefined | ID de la paginación para testing | |
|
|
19
20
|
|
|
20
21
|
## Eventos
|
|
@@ -22,3 +23,8 @@
|
|
|
22
23
|
|---|---|---|
|
|
23
24
|
| pageChanged | PageChangedEventPayload | Se emite cuando el usuario interactúa con la paginación (cambia de página). El payload es un objeto con detalles sobre la nueva página y los límites de items. |
|
|
24
25
|
| ellipsisClicked | { hiddenPages: number[], ellipsisType: string, currentPage: number, totalPages: number } | Se emite cuando el usuario hace click en las elipsis (...). El payload incluye las páginas ocultas y el tipo de elipsis. |
|
|
26
|
+
|
|
27
|
+
## Métodos expuestos
|
|
28
|
+
| Método | Descripción |
|
|
29
|
+
|---|---|
|
|
30
|
+
| resetPagination | Resetea la paginación a la primera página y emite el evento pageChanged. |
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
| icon | string | No | | El icono asociado con el mensaje. Un icono opcional que se mostrará junto al mensaje. Puede ser el nombre de un icono de una biblioteca de iconos. | |
|
|
11
11
|
| close | boolean | No | | Indica si se debe mostrar el botón de cierre. Si es `true`, se mostrará un botón para cerrar el mensaje. | |
|
|
12
12
|
| id | string | No | undefined | ID del persistent-toast para testing | |
|
|
13
|
+
| closeAriaLabel | string | No | Cerrar | <span>Etiqueta accesible del botón de cerrar. Por convención del sistema, el valor por defecto es español ('Cerrar'). En proyectos con i18n, se debe sobrescribir esta prop con el valor traducido.</span> | |
|
|
13
14
|
|
|
14
15
|
## Eventos
|
|
15
16
|
| Evento | Payload | Descripción |
|
package/llms/rdspopover-menu.md
CHANGED
|
@@ -27,3 +27,10 @@
|
|
|
27
27
|
| trigger | | |
|
|
28
28
|
| default | | |
|
|
29
29
|
| item | | item: any, index: any, on-select: any |
|
|
30
|
+
|
|
31
|
+
## Métodos expuestos
|
|
32
|
+
| Método | Descripción |
|
|
33
|
+
|---|---|
|
|
34
|
+
| toggle | Alterna el estado abierto/cerrado del popover |
|
|
35
|
+
| close | Cierra programáticamente el popover |
|
|
36
|
+
| isOpen | Ref reactiva del estado abierto |
|
package/llms/rdspopover.md
CHANGED
package/llms/rdssearch-field.md
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
| maxLength | number | No | | Número máximo de caracteres permitidos. | |
|
|
13
13
|
| id | string | No | | Identificador único del campo. Se autogenera si no se proporciona. | |
|
|
14
14
|
| clearButtonAriaLabel | string | No | Limpiar campo | Texto accesible del botón de limpiar. Permite internacionalización. | |
|
|
15
|
+
| inverse | boolean | No | false | Activa los estilos de variante inversa para superficies oscuras. | |
|
|
15
16
|
|
|
16
17
|
## Eventos
|
|
17
18
|
| Evento | Payload | Descripción |
|
|
@@ -20,3 +21,9 @@
|
|
|
20
21
|
| clear | | Emitido cuando el usuario limpia el campo |
|
|
21
22
|
| search | string | Emitido cuando el usuario pulsa Enter (sin sugerencia activa) |
|
|
22
23
|
| select | string | Emitido cuando el usuario selecciona una sugerencia |
|
|
24
|
+
|
|
25
|
+
## Métodos expuestos
|
|
26
|
+
| Método | Descripción |
|
|
27
|
+
|---|---|
|
|
28
|
+
| focus | |
|
|
29
|
+
| blur | |
|
package/llms/rdssidebar.md
CHANGED
|
@@ -23,3 +23,12 @@
|
|
|
23
23
|
| content | Si se usa este slot se sustituyen los de por defecto y hay que manejar manualmente el estado de apertura y cierre | |
|
|
24
24
|
| collapsed | | |
|
|
25
25
|
| expanded | | |
|
|
26
|
+
|
|
27
|
+
## Métodos expuestos
|
|
28
|
+
| Método | Descripción |
|
|
29
|
+
|---|---|
|
|
30
|
+
| isCollapsed | { boolean } Muestra el estado actual del sidebar. |
|
|
31
|
+
| openSidebar | { () => void } Abre el sidebar. |
|
|
32
|
+
| closeSidebar | { () => void } Cierra el sidebar. |
|
|
33
|
+
| toogleSidebar | { (state: boolean) => void } Cambia el estado del sidebar. |
|
|
34
|
+
| toggleSidebar | { () => void } Alterna el estado del sidebar. (Nombre correcto) |
|
package/llms/rdssidedrawer.md
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
| blurOverlay | boolean | No | true | <span>Mostrar o no el Blur del overlay</span> | |
|
|
10
10
|
| containerWidth | string | No | | <span>Define el ancho del componente al abrirse</span> | |
|
|
11
11
|
| persistent | boolean | No | false | <span>Indica si el sidedrawer permanece abierto al hacer click fuera de él</span> | |
|
|
12
|
+
| closeAriaLabel | string | No | Cerrar | <span>Etiqueta accesible del botón de cerrar. Por convención del sistema, el valor por defecto es español ('Cerrar'). En proyectos con i18n, se debe sobrescribir esta prop con el valor traducido.</span> | |
|
|
12
13
|
|
|
13
14
|
## Eventos
|
|
14
15
|
| Evento | Payload | Descripción |
|
|
@@ -21,3 +22,11 @@
|
|
|
21
22
|
| title | | |
|
|
22
23
|
| content | | |
|
|
23
24
|
| footer | | |
|
|
25
|
+
|
|
26
|
+
## Métodos expuestos
|
|
27
|
+
| Método | Descripción |
|
|
28
|
+
|---|---|
|
|
29
|
+
| isHide | { boolean } Muestra el estado actual del sidebar. |
|
|
30
|
+
| openSidedrawer | { () => void } Abre el sidebar. |
|
|
31
|
+
| closeSidedrawer | { () => void } Cierra el sidedrawer. |
|
|
32
|
+
| toogleSidedrawer | { (state: boolean) => void } Cambia el estado del sidedrawer. |
|
package/llms/rdstable.md
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
| items | T | Sí | () => [] | Array de datos a mostrar. En modo 'server', son los datos de la página actual. En modo 'client', es el dataset completo. | T |
|
|
9
9
|
| totalItemsLength | number | Sí | | Número total de registros en la base de datos. Requerido para calcular el número de páginas en la paginación. | |
|
|
10
10
|
| rowKey | TSTypeOperator | No | id' as keyof T | Nombre de la propiedad única de cada fila (ej. 'id', 'uuid'). Fundamental para la selección y el renderizado eficiente (v-for key). | |
|
|
11
|
-
| asynchrone | boolean | No | true | Modo asíncrono. Cuando es `true`, el padre controla los datos (paginación/ordenación) y la tabla solo renderiza los elementos recibidos. Cuando es `false`, la tabla aplica paginación local sobre `items`. | |
|
|
11
|
+
| asynchrone | boolean | No | true | Modo asíncrono. Cuando es `true`, el padre controla los datos (paginación/ordenación) y la tabla solo renderiza los elementos recibidos. **⚠️ IMPORTANTE:** Debes utilizar bindings bidireccionales (`v-model:page`, `v-model:pageSize` y `v-model:sort`) para evitar desincronizaciones del estado visual del componente con tus llamadas API. No uses bindings simples (`:page`, `:sort`). Cuando es `false`, la tabla aplica paginación local sobre `items`. | |
|
|
12
12
|
| page | number | No | 1 | Página actual (v-model). Inicia en 1. | |
|
|
13
13
|
| pageSize | number | No | 15 | Cantidad de elementos por página (v-model). | |
|
|
14
14
|
| sort | SortDescriptor | null | No | | Estado actual de la ordenación { key, order } (v-model). Pasar `null` para sin orden. | SortDescriptor, null |
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
| hideHeaders | boolean | No | | Oculta completamente la fila de cabecera (thead). | |
|
|
20
20
|
| hidePagination | boolean | No | | Oculta el componente de paginación al pie de la tabla. | |
|
|
21
21
|
| hideLegend | boolean | No | | Oculta el texto de "Mostrando X de Y" en la paginación. | |
|
|
22
|
+
| legendText | string | No | | Texto personalizado para la leyenda de paginación. Usa {start}, {end} y {total} como placeholders. Ejemplo: 'Showing {start}-{end} of {total} results' Si no se provee, se usa el texto por defecto. | |
|
|
22
23
|
| hideSelectAll | boolean | No | | Oculta el checkbox "Seleccionar Todo" de la cabecera (solo en modo 'multiple'). | |
|
|
23
24
|
| jumpTo | boolean | No | | Habilita un input para saltar directamente a una página específica. | |
|
|
24
25
|
| disableFirstLoad | boolean | No | | Evita emitir el evento de cambio de página al montar el componente. Útil si el padre ya carga los datos inicialmente. | |
|
|
@@ -31,6 +32,7 @@
|
|
|
31
32
|
| cellClass | TSFunctionType | No | | Función para aplicar clases CSS condicionales a una celda específica (td). | |
|
|
32
33
|
| isRowDisabled | TSFunctionType | No | | Predicado para deshabilitar la selección (checkbox/radio) de una fila específica. | |
|
|
33
34
|
| resizableColumns | boolean | No | | Activa el resize de columnas arrastrando el borde derecho del encabezado. | |
|
|
35
|
+
| resetPageOnSort | boolean | No | false | Si es `true` (por defecto), al cambiar el orden de una columna la página se resetea a 1. Pasa `false` para mantener la página actual al ordenar (útil en modo server-side con lógica propia). | |
|
|
34
36
|
|
|
35
37
|
## Eventos
|
|
36
38
|
| Evento | Payload | Descripción |
|
|
@@ -49,3 +51,8 @@
|
|
|
49
51
|
|---|---|---|
|
|
50
52
|
| mobile | | item: any, index: any |
|
|
51
53
|
| slotName | | name: any |
|
|
54
|
+
|
|
55
|
+
## Métodos expuestos
|
|
56
|
+
| Método | Descripción |
|
|
57
|
+
|---|---|
|
|
58
|
+
| reset | |
|
package/llms/rdstext-field.md
CHANGED
package/llms/rdstoggle.md
CHANGED
|
@@ -12,6 +12,11 @@
|
|
|
12
12
|
| valueRight | number | string | No | | Valor a emitir cuando el toggle está en la posición derecha (si `switchType` es `false`). | number, string |
|
|
13
13
|
| labelLeft | string | No | | Texto a mostrar en el botón izquierdo. | |
|
|
14
14
|
| labelRight | string | No | | Texto a mostrar en el botón derecho. | |
|
|
15
|
+
| iconLeft | string | No | | Nombre del icono a mostrar en el botón izquierdo (de la librería de iconos RDS). | |
|
|
16
|
+
| iconRight | string | No | | Nombre del icono a mostrar en el botón derecho (de la librería de iconos RDS). | |
|
|
17
|
+
| ariaLabelLeft | string | No | | aria-label del botón izquierdo. Obligatorio cuando se usa modo icon-only. | |
|
|
18
|
+
| ariaLabelRight | string | No | | aria-label del botón derecho. Obligatorio cuando se usa modo icon-only. | |
|
|
19
|
+
| ariaLabel | string | No | | aria-label descriptivo del grupo de opciones (role="radiogroup"). | |
|
|
15
20
|
| id | string | No | | ID del toggle para testing | |
|
|
16
21
|
| variant | "default" | "navy" | "floating" | No | | Variante visual del toggle según superficie de uso. - `default`: para superficies white/grey - `navy`: para superficies Navy (modo inverso) - `floating`: para superficies Ivory/Sand/Grey (flotante) | "default", "navy", "floating" |
|
|
17
22
|
|
package/llms/rdstooltip.md
CHANGED