@widergy/energy-ui 3.149.0 → 3.151.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/CHANGELOG.md +112 -157
- package/dist/components/UTCarousel/README.md +65 -0
- package/dist/components/UTCarousel/components/Legend/index.js +1 -0
- package/dist/components/UTCarousel/components/Slider/component/Slide/index.js +15 -5
- package/dist/components/UTCarousel/components/Slider/layout.js +7 -1
- package/dist/components/UTCarousel/index.js +8 -3
- package/dist/components/UTDotMenu/README.md +112 -0
- package/dist/components/UTDotMenu/constants.js +12 -0
- package/dist/components/UTDotMenu/index.js +72 -54
- package/dist/components/UTDotMenu/stories/UTDotMenu.mdx +13 -0
- package/dist/components/UTDotMenu/stories/UTDotMenu.stories.js +271 -0
- package/dist/components/UTDotMenu/styles.module.scss +3 -0
- package/dist/components/UTLabel/index.js +3 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,348 +1,303 @@
|
|
|
1
|
-
# [3.
|
|
1
|
+
# [3.151.0](https://github.com/widergy/energy-ui/compare/v3.150.0...v3.151.0) (2026-05-11)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
* [
|
|
7
|
-
|
|
8
|
-
# [3.148.0](https://github.com/widergy/energy-ui/compare/v3.147.0...v3.148.0) (2026-05-05)
|
|
6
|
+
* [AXCH-1429] dot menu changes ([#786](https://github.com/widergy/energy-ui/issues/786)) ([da08cef](https://github.com/widergy/energy-ui/commit/da08cefc7b5f19bf69e7cb40aed0431f76322b8e))
|
|
9
7
|
|
|
8
|
+
# [3.150.0](https://github.com/widergy/energy-ui/compare/v3.149.0...v3.150.0) (2026-05-08)
|
|
10
9
|
|
|
11
|
-
###
|
|
10
|
+
### Novedades y Mejoras
|
|
12
11
|
|
|
13
|
-
*
|
|
14
|
-
|
|
15
|
-
# [3.147.0](https://github.com/widergy/energy-ui/compare/v3.146.0...v3.147.0) (2026-05-04)
|
|
12
|
+
* El componente de carrusel ahora admite contenido personalizado en cada slide, mayor control sobre el alineado y espaciado de las leyendas, y permite que los componentes custom detecten cuál slide está activo. El componente de etiqueta incorpora soporte para estilos personalizados. [#790](https://github.com/widergy/Energy-UI/pull/790)
|
|
16
13
|
|
|
14
|
+
# [3.149.0](https://github.com/widergy/energy-ui/compare/v3.148.0...v3.149.0) (2026-05-08)
|
|
17
15
|
|
|
18
|
-
###
|
|
16
|
+
### Novedades y Mejoras
|
|
19
17
|
|
|
20
|
-
*
|
|
18
|
+
* El componente de estado ahora admite un tamaño extra grande y trunca el texto con puntos suspensivos cuando el espacio disponible es limitado. [#791](https://github.com/widergy/Energy-UI/pull/791)
|
|
19
|
+
* Mejoras internas de la plataforma. [#779](https://github.com/widergy/Energy-UI/pull/779)
|
|
21
20
|
|
|
22
|
-
# [3.
|
|
21
|
+
# [3.148.0](https://github.com/widergy/energy-ui/compare/v3.147.0...v3.148.0) (2026-05-05)
|
|
23
22
|
|
|
23
|
+
### Correcciones
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
* Se corrigió el comportamiento del panel expandible, que ahora responde correctamente a la acción de colapsar y expandir su contenido. [#788](https://github.com/widergy/Energy-UI/pull/788)
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
# [3.147.0](https://github.com/widergy/energy-ui/compare/v3.146.0...v3.147.0) (2026-05-04)
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
### Novedades y Mejoras
|
|
30
30
|
|
|
31
|
+
* Los paneles ahora pueden configurarse para mostrar su contenido adicional colapsado por defecto, dando mayor control sobre la presentación de la información. [#787](https://github.com/widergy/Energy-UI/pull/787)
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
# [3.146.0](https://github.com/widergy/energy-ui/compare/v3.145.1...v3.146.0) (2026-04-30)
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
### Novedades y Mejoras
|
|
35
36
|
|
|
36
|
-
|
|
37
|
+
* Mejoras internas de la plataforma [#780](https://github.com/widergy/Energy-UI/pull/780)
|
|
37
38
|
|
|
39
|
+
## [3.145.1](https://github.com/widergy/energy-ui/compare/v3.145.0...v3.145.1) (2026-04-28)
|
|
38
40
|
|
|
39
|
-
###
|
|
41
|
+
### Correcciones
|
|
40
42
|
|
|
41
|
-
*
|
|
43
|
+
* Se corrigió el comportamiento del calendario al seleccionar fecha y horario: ahora ambos valores se actualizan correctamente de forma conjunta, evitando inconsistencias al completar el formulario. [#785](https://github.com/widergy/Energy-UI/pull/785)
|
|
42
44
|
|
|
45
|
+
# [3.145.0](https://github.com/widergy/energy-ui/compare/v3.144.2...v3.145.0) (2026-04-27)
|
|
43
46
|
|
|
44
|
-
###
|
|
47
|
+
### Novedades y Mejoras
|
|
45
48
|
|
|
46
|
-
*
|
|
49
|
+
* Se actualizó la apariencia visual de los grupos de botones y botones individuales: los separadores internos fueron eliminados, el botón activo se distingue con mayor claridad según el tema de color utilizado, y los botones inactivos presentan un tono más suave para mejorar la legibilidad. [#783](https://github.com/widergy/Energy-UI/pull/783) [#784](https://github.com/widergy/Energy-UI/pull/784)
|
|
47
50
|
|
|
48
51
|
## [3.144.2](https://github.com/widergy/energy-ui/compare/v3.144.1...v3.144.2) (2026-04-24)
|
|
49
52
|
|
|
53
|
+
### Novedades y Mejoras
|
|
50
54
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
* updated ia docs ([#782](https://github.com/widergy/energy-ui/issues/782)) ([879f4eb](https://github.com/widergy/energy-ui/commit/879f4eb884a12ac8026a9256469e07cd9af67ba9))
|
|
55
|
+
* Mejoras internas de la plataforma [#782](https://github.com/widergy/Energy-UI/pull/782)
|
|
54
56
|
|
|
55
57
|
## [3.144.1](https://github.com/widergy/energy-ui/compare/v3.144.0...v3.144.1) (2026-04-22)
|
|
56
58
|
|
|
59
|
+
### Novedades y Mejoras
|
|
57
60
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
* docs update ([#781](https://github.com/widergy/energy-ui/issues/781)) ([6b0ec50](https://github.com/widergy/energy-ui/commit/6b0ec50ade68b806b28336025e41ac35dcc831f5))
|
|
61
|
+
* Mejoras internas de la plataforma. [#781](https://github.com/widergy/Energy-UI/pull/781)
|
|
61
62
|
|
|
62
63
|
# [3.144.0](https://github.com/widergy/energy-ui/compare/v3.143.0...v3.144.0) (2026-04-22)
|
|
63
64
|
|
|
65
|
+
### Novedades y Mejoras
|
|
64
66
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
* new size utstatus ([#778](https://github.com/widergy/energy-ui/issues/778)) ([835c56a](https://github.com/widergy/energy-ui/commit/835c56aec7ee8ade5df39206fb82896c7796c8d6))
|
|
67
|
+
* El componente de estado (UTStatus) ahora admite un tamaño extra pequeño, con tipografía, ícono y espaciado optimizados para contextos de mayor densidad de información. [#778](https://github.com/widergy/Energy-UI/pull/778)
|
|
68
|
+
* Mejoras internas de la plataforma. [`0d6ed89`](https://github.com/widergy/Energy-UI/commit/0d6ed89)
|
|
68
69
|
|
|
69
70
|
# [3.143.0](https://github.com/widergy/energy-ui/compare/v3.142.2...v3.143.0) (2026-04-15)
|
|
70
71
|
|
|
72
|
+
### Novedades y Mejoras
|
|
71
73
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
* [BRILLA-339] persist file name and xls download ([#774](https://github.com/widergy/energy-ui/issues/774)) ([d2486f3](https://github.com/widergy/energy-ui/commit/d2486f3f475299954245b051defaa527c1c1e0c1))
|
|
74
|
+
* Los archivos adjuntos ahora conservan su nombre original al navegar entre pasos de un trámite, y es posible descargarlos en formato CSV, XLS y XLSX. [#774](https://github.com/widergy/Energy-UI/pull/774)
|
|
75
75
|
|
|
76
76
|
## [3.142.2](https://github.com/widergy/energy-ui/compare/v3.142.1...v3.142.2) (2026-04-15)
|
|
77
77
|
|
|
78
|
+
### Correcciones
|
|
78
79
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
* [OUG] token fixes ([#777](https://github.com/widergy/energy-ui/issues/777)) ([915430b](https://github.com/widergy/energy-ui/commit/915430bcc0f3841800c4e1d7ef52c0c4097415a2))
|
|
80
|
+
* Se ajustaron los tamaños de los títulos y se agregó soporte para texto de cuerpo en tamaño extra pequeño, mejorando la consistencia visual de la interfaz. [#777](https://github.com/widergy/Energy-UI/pull/777)
|
|
82
81
|
|
|
83
82
|
## [3.142.1](https://github.com/widergy/energy-ui/compare/v3.142.0...v3.142.1) (2026-04-14)
|
|
84
83
|
|
|
84
|
+
### Correcciones
|
|
85
85
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
* [DEV-766] remove --cache flag from eslint lint scripts ([#776](https://github.com/widergy/energy-ui/issues/776)) ([06d63d0](https://github.com/widergy/energy-ui/commit/06d63d06b96893c05b7a031d26f254dda5c3e613))
|
|
86
|
+
* Mejoras internas de la plataforma [#776](https://github.com/widergy/Energy-UI/pull/776)
|
|
89
87
|
|
|
90
88
|
# [3.142.0](https://github.com/widergy/energy-ui/compare/v3.141.4...v3.142.0) (2026-04-14)
|
|
91
89
|
|
|
90
|
+
### Novedades y Mejoras
|
|
92
91
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
* [AXCH-1428] wrapper observation component ([#773](https://github.com/widergy/energy-ui/issues/773)) ([afb9df4](https://github.com/widergy/energy-ui/commit/afb9df458b74a543254473724644e79662f37d6b))
|
|
92
|
+
* Los campos de formulario ahora pueden mostrar acciones contextuales con íconos y descripciones emergentes (tooltips), permitiendo indicar observaciones o estados adicionales directamente sobre el campo. [#773](https://github.com/widergy/Energy-UI/pull/773)
|
|
96
93
|
|
|
97
94
|
## [3.141.4](https://github.com/widergy/energy-ui/compare/v3.141.3...v3.141.4) (2026-04-14)
|
|
98
95
|
|
|
96
|
+
### Correcciones
|
|
99
97
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
* fix sidebar ([#775](https://github.com/widergy/energy-ui/issues/775)) ([2535e64](https://github.com/widergy/energy-ui/commit/2535e64fa0b75a5bcfe9bbc61896a38f63ad597e))
|
|
98
|
+
* Se corrigió un problema en la barra lateral de navegación. [#775](https://github.com/widergy/Energy-UI/pull/775)
|
|
103
99
|
|
|
104
100
|
## [3.141.3](https://github.com/widergy/energy-ui/compare/v3.141.2...v3.141.3) (2026-04-13)
|
|
105
101
|
|
|
102
|
+
### Novedades y Mejoras
|
|
106
103
|
|
|
107
|
-
|
|
104
|
+
* Las tablas ahora permiten configurar la alineación del contenido en cada columna, ofreciendo mayor flexibilidad en la presentación de datos. [#771](https://github.com/widergy/Energy-UI/pull/771)
|
|
108
105
|
|
|
109
|
-
|
|
106
|
+
### Correcciones
|
|
107
|
+
|
|
108
|
+
* Se corrigió un problema visual en el que ciertos indicadores de estado (badges) no reflejaban correctamente su estilo al actualizarse. [#771](https://github.com/widergy/Energy-UI/pull/771)
|
|
110
109
|
|
|
111
110
|
## [3.141.2](https://github.com/widergy/energy-ui/compare/v3.141.1...v3.141.2) (2026-04-09)
|
|
112
111
|
|
|
112
|
+
### Correcciones
|
|
113
113
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
* added tokens to data element ([#772](https://github.com/widergy/energy-ui/issues/772)) ([5933975](https://github.com/widergy/energy-ui/commit/5933975f24a216a9338f4f4d61df7b853f1fd01a))
|
|
114
|
+
* Se corrigió la visualización de elementos de datos en la interfaz. [#772](https://github.com/widergy/Energy-UI/pull/772)
|
|
117
115
|
|
|
118
116
|
## [3.141.1](https://github.com/widergy/energy-ui/compare/v3.141.0...v3.141.1) (2026-03-31)
|
|
119
117
|
|
|
118
|
+
### Correcciones
|
|
120
119
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
* markdown fix ([#770](https://github.com/widergy/energy-ui/issues/770)) ([bbb9804](https://github.com/widergy/energy-ui/commit/bbb980470af108f4472b00eb03fdc8c542c2e333))
|
|
120
|
+
* Se corrigió un problema por el cual algunos textos que contenían el carácter ":" desaparecían o se mostraban de forma incorrecta en la interfaz. [#770](https://github.com/widergy/Energy-UI/pull/770)
|
|
124
121
|
|
|
125
122
|
# [3.141.0](https://github.com/widergy/energy-ui/compare/v3.140.0...v3.141.0) (2026-03-18)
|
|
126
123
|
|
|
124
|
+
### Novedades y Mejoras
|
|
127
125
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
* [AXCH-1339] abbreviations in avatar component ([#769](https://github.com/widergy/energy-ui/issues/769)) ([1604f31](https://github.com/widergy/energy-ui/commit/1604f313981bcdbf64ea23fac687943e30dbefc5))
|
|
126
|
+
* Los avatares ahora pueden mostrar abreviaciones personalizadas, mejorando la identificación visual en la asignación de grupos. [#769](https://github.com/widergy/Energy-UI/pull/769)
|
|
131
127
|
|
|
132
128
|
# [3.140.0](https://github.com/widergy/energy-ui/compare/v3.139.1...v3.140.0) (2026-03-11)
|
|
133
129
|
|
|
130
|
+
### Correcciones
|
|
134
131
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
* add index to test id ([#768](https://github.com/widergy/energy-ui/issues/768)) ([7331fa1](https://github.com/widergy/energy-ui/commit/7331fa1bfeb8d6f1523253d930b6eea69f9f0ca6))
|
|
132
|
+
* Se corrigió un problema en los grupos de opciones de selección que impedía interactuar correctamente con cada opción de forma independiente. [#768](https://github.com/widergy/Energy-UI/pull/768)
|
|
138
133
|
|
|
139
134
|
## [3.139.1](https://github.com/widergy/energy-ui/compare/v3.139.0...v3.139.1) (2026-02-27)
|
|
140
135
|
|
|
136
|
+
### Correcciones
|
|
141
137
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
* [BRILLA-271] workflow navbar hidden ([#767](https://github.com/widergy/energy-ui/issues/767)) ([3e4fca0](https://github.com/widergy/energy-ui/commit/3e4fca08ef133719f908702485e8a95a24a000f3))
|
|
138
|
+
* Se corrigió un problema en el flujo de registro donde aparecían dos botones de avance en la misma pantalla. Además, se resolvió un error en Safari para iOS que causaba que la barra de navegación se superpusiera incorrectamente sobre el contenido. [#767](https://github.com/widergy/Energy-UI/pull/767)
|
|
145
139
|
|
|
146
140
|
# [3.139.0](https://github.com/widergy/energy-ui/compare/v3.138.5...v3.139.0) (2026-02-25)
|
|
147
141
|
|
|
142
|
+
### Novedades y Mejoras
|
|
148
143
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
* [AXCH-1193] ut panel component refactor ([#753](https://github.com/widergy/energy-ui/issues/753)) ([e30c16a](https://github.com/widergy/energy-ui/commit/e30c16a09d6e4e27be50161be797fb6c962aa81f))
|
|
144
|
+
* Los paneles laterales ahora pueden incorporar un área de contenido secundario con navegación por íconos, lo que permite organizar mejor la información complementaria como configuraciones o notificaciones dentro del mismo panel. [#753](https://github.com/widergy/Energy-UI/pull/753)
|
|
152
145
|
|
|
153
146
|
## [3.138.5](https://github.com/widergy/energy-ui/compare/v3.138.4...v3.138.5) (2026-02-24)
|
|
154
147
|
|
|
148
|
+
### Novedades y Mejoras
|
|
155
149
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
* [PDI-677] updated shortcutpanel ([#764](https://github.com/widergy/energy-ui/issues/764)) ([9b69c0f](https://github.com/widergy/energy-ui/commit/9b69c0f349a4a59eaefbae70e38622c9458402a1))
|
|
150
|
+
* Se mejora el panel de filtros y accesos rápidos: ahora es posible configurarlo para que las categorías no sean colapsables, ocultar el botón de agregar filtros, y ajustar el comportamiento del scroll. Además, los botones de editar y eliminar filtros solo se muestran cuando la acción correspondiente está disponible, y los nombres de las categorías se visualizan siempre en mayúsculas. [#764](https://github.com/widergy/Energy-UI/pull/764)
|
|
159
151
|
|
|
160
152
|
## [3.138.4](https://github.com/widergy/energy-ui/compare/v3.138.3...v3.138.4) (2026-02-19)
|
|
161
153
|
|
|
154
|
+
### Correcciones
|
|
162
155
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
* [CX-1935] Update test id support for UTRadioGroup v0 ([#766](https://github.com/widergy/energy-ui/issues/766)) ([6b5caae](https://github.com/widergy/energy-ui/commit/6b5caaeae33abdc1aaa3bd09a7133919b1a67be0))
|
|
156
|
+
* Se corrigió un problema en la pantalla de selección de método de pago que impedía interactuar correctamente con las opciones disponibles durante pruebas automatizadas. [#766](https://github.com/widergy/Energy-UI/pull/766)
|
|
166
157
|
|
|
167
158
|
## [3.138.3](https://github.com/widergy/energy-ui/compare/v3.138.2...v3.138.3) (2026-02-13)
|
|
168
159
|
|
|
160
|
+
### Correcciones
|
|
169
161
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
* [OUG] data category fixes ([#765](https://github.com/widergy/energy-ui/issues/765)) ([5c7d558](https://github.com/widergy/energy-ui/commit/5c7d55817047e6ccb784809f2e16394f5f96b014))
|
|
162
|
+
* Se corrigieron problemas en el componente de categorías de datos: ahora admite íconos de encabezado y acciones interactivas, y se actualizó su visualización en el entorno de ejemplos. [#765](https://github.com/widergy/Energy-UI/pull/765)
|
|
173
163
|
|
|
174
164
|
## [3.138.2](https://github.com/widergy/energy-ui/compare/v3.138.1...v3.138.2) (2026-02-11)
|
|
175
165
|
|
|
166
|
+
### Novedades y Mejoras
|
|
176
167
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
* [AXCH-1231] add withoutPadding column option ([#763](https://github.com/widergy/energy-ui/issues/763)) ([c2f6447](https://github.com/widergy/energy-ui/commit/c2f6447cfe21c1e73dce3b49c6b5876de3f0a283))
|
|
168
|
+
* Se incorporó una nueva opción en las columnas de tablas que permite a los componentes visuales ocupar el ancho completo de la celda, mejorando la presentación de contenido personalizado. [#763](https://github.com/widergy/Energy-UI/pull/763)
|
|
180
169
|
|
|
181
170
|
## [3.138.1](https://github.com/widergy/energy-ui/compare/v3.138.0...v3.138.1) (2026-02-11)
|
|
182
171
|
|
|
172
|
+
### Correcciones
|
|
183
173
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
* not show tooltip ([#762](https://github.com/widergy/energy-ui/issues/762)) ([105f09a](https://github.com/widergy/energy-ui/commit/105f09a058f9781344abc78d07aa24eab79c829e))
|
|
174
|
+
* Se corrigió un problema en el historial de consumo que impedía ver el tooltip al pasar el cursor sobre las barras del gráfico. [#762](https://github.com/widergy/Energy-UI/pull/762)
|
|
187
175
|
|
|
188
176
|
# [3.138.0](https://github.com/widergy/energy-ui/compare/v3.137.2...v3.138.0) (2026-02-10)
|
|
189
177
|
|
|
178
|
+
### Novedades y Mejoras
|
|
190
179
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
* [DEV-766] mvp widergy/eslint-config package ([#726](https://github.com/widergy/energy-ui/issues/726)) ([58a9c5a](https://github.com/widergy/energy-ui/commit/58a9c5aa22c6429793ac43499b085cdba69c5081))
|
|
180
|
+
* Mejoras internas de la plataforma [#726](https://github.com/widergy/Energy-UI/pull/726)
|
|
194
181
|
|
|
195
182
|
## [3.137.2](https://github.com/widergy/energy-ui/compare/v3.137.1...v3.137.2) (2026-02-10)
|
|
196
183
|
|
|
184
|
+
### Novedades y Mejoras
|
|
197
185
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
* [OUG] shortcut panel tokens ([#756](https://github.com/widergy/energy-ui/issues/756)) ([0a5d289](https://github.com/widergy/energy-ui/commit/0a5d28920adbdaf932fa867b69cf379262be909e))
|
|
186
|
+
* Se mejoró el panel de accesos rápidos con nuevos tokens de diseño, logrando una apariencia más consistente y alineada con el sistema visual de la plataforma. [#756](https://github.com/widergy/Energy-UI/pull/756)
|
|
201
187
|
|
|
202
188
|
## [3.137.1](https://github.com/widergy/energy-ui/compare/v3.137.0...v3.137.1) (2026-02-09)
|
|
203
189
|
|
|
190
|
+
### Correcciones
|
|
204
191
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
* max value chart ([#761](https://github.com/widergy/energy-ui/issues/761)) ([acc75a4](https://github.com/widergy/energy-ui/commit/acc75a463a3b2ed5fae6131fe8921e5bfdd2b321))
|
|
192
|
+
* Se corrigió la visualización del gráfico de consumo histórico: el valor límite de excedencia ya no aparece como el máximo del eje, permitiendo una lectura más precisa de los datos. [#761](https://github.com/widergy/Energy-UI/pull/761)
|
|
208
193
|
|
|
209
194
|
# [3.137.0](https://github.com/widergy/energy-ui/compare/v3.136.1...v3.137.0) (2026-02-09)
|
|
210
195
|
|
|
196
|
+
### Novedades y Mejoras
|
|
211
197
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
* [OUG] button tokens ([#755](https://github.com/widergy/energy-ui/issues/755)) ([6ae07e2](https://github.com/widergy/energy-ui/commit/6ae07e21b5743d968055c7dab5028065c5603553))
|
|
198
|
+
* Se incorporó soporte de personalización avanzada en los botones de la interfaz, permitiendo adaptar colores, tamaños y estilos mediante tokens de diseño sin necesidad de modificar el código base. [#755](https://github.com/widergy/Energy-UI/pull/755)
|
|
215
199
|
|
|
216
200
|
## [3.136.1](https://github.com/widergy/energy-ui/compare/v3.136.0...v3.136.1) (2026-02-05)
|
|
217
201
|
|
|
202
|
+
### Novedades y Mejoras
|
|
218
203
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
* [AXCH-9999] ci 3 ([#760](https://github.com/widergy/energy-ui/issues/760)) ([0ed5ff6](https://github.com/widergy/energy-ui/commit/0ed5ff6545e24a320d1bfa87c4cccc599f5f0cf8))
|
|
222
|
-
* ci configs ([#758](https://github.com/widergy/energy-ui/issues/758)) ([d48c6c6](https://github.com/widergy/energy-ui/commit/d48c6c6c4a76f905e35c42b1b013d7f0ff750e5d))
|
|
223
|
-
* more ci problemillas ([#759](https://github.com/widergy/energy-ui/issues/759)) ([460633c](https://github.com/widergy/energy-ui/commit/460633cb89f77a239da44e5d38ca16d4a2fb026f))
|
|
204
|
+
* Mejoras internas de la plataforma. [#758](https://github.com/widergy/Energy-UI/pull/758) [#759](https://github.com/widergy/Energy-UI/pull/759) [#760](https://github.com/widergy/Energy-UI/pull/760)
|
|
224
205
|
|
|
225
206
|
# [3.136.0](https://github.com/widergy/energy-ui/compare/v3.135.0...v3.136.0) (2026-02-05)
|
|
226
207
|
|
|
208
|
+
### Novedades y Mejoras
|
|
227
209
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
* status component for cases ([#757](https://github.com/widergy/energy-ui/issues/757)) ([712d283](https://github.com/widergy/energy-ui/commit/712d28382895d4dbcd9ec3f2b141d8dab1689648))
|
|
210
|
+
* Se mejoró el componente de estado para casos, incorporando nuevas opciones de presentación visual y mayor flexibilidad en su configuración. [#757](https://github.com/widergy/Energy-UI/pull/757)
|
|
231
211
|
|
|
232
212
|
# [3.135.0](https://github.com/widergy/energy-ui/compare/v3.134.0...v3.135.0) (2026-02-04)
|
|
233
213
|
|
|
214
|
+
### Correcciones
|
|
234
215
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
* [AXCH-799] new build step ([#743](https://github.com/widergy/energy-ui/issues/743)) ([b637fbc](https://github.com/widergy/energy-ui/commit/b637fbc0f5246d2c411905a0e5cdf1301b25f173))
|
|
238
|
-
* ci version ([102a74f](https://github.com/widergy/energy-ui/commit/102a74f03b4cab60cec619d565e1966d374fe30a))
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
### Features
|
|
242
|
-
|
|
243
|
-
* [BRILLA-213] dynamic height in UTDataElement ([#754](https://github.com/widergy/energy-ui/issues/754)) ([6e4d4d5](https://github.com/widergy/energy-ui/commit/6e4d4d55caad3dbe18b4fe22c2b352511bef11e4))
|
|
216
|
+
* Se corrigió un problema que cortaba el contenido de ciertos elementos expandibles cuando su altura variaba dinámicamente. [#754](https://github.com/widergy/Energy-UI/pull/754)
|
|
217
|
+
* Mejoras internas de la plataforma. [#743](https://github.com/widergy/Energy-UI/pull/743) [`102a74f`](https://github.com/widergy/Energy-UI/commit/102a74f)
|
|
244
218
|
|
|
245
219
|
# [3.134.0](https://github.com/widergy/energy-ui/compare/v3.133.1...v3.134.0) (2026-02-04)
|
|
246
220
|
|
|
221
|
+
### Novedades y Mejoras
|
|
247
222
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
* [AXCH-799] sb tests in gh actions ([#747](https://github.com/widergy/energy-ui/issues/747)) ([cee8893](https://github.com/widergy/energy-ui/commit/cee88936ce45c771dddaed880e8f4f0e45958f93))
|
|
223
|
+
* Mejoras internas de la plataforma. [#747](https://github.com/widergy/Energy-UI/pull/747)
|
|
251
224
|
|
|
252
225
|
## [3.133.1](https://github.com/widergy/energy-ui/compare/v3.133.0...v3.133.1) (2026-01-27)
|
|
253
226
|
|
|
227
|
+
### Correcciones
|
|
254
228
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
* fieldLabel position + styles ([#752](https://github.com/widergy/energy-ui/issues/752)) ([ad061cd](https://github.com/widergy/energy-ui/commit/ad061cdcc73b4a328bad289cb63a280ab66e5f08))
|
|
229
|
+
* Se corrigió un problema que impedía observar campos de adjuntos vacíos en la gestión de trámites. Ahora la acción está disponible independientemente de si el campo tiene archivos cargados o no. [#752](https://github.com/widergy/Energy-UI/pull/752)
|
|
258
230
|
|
|
259
231
|
# [3.133.0](https://github.com/widergy/energy-ui/compare/v3.132.0...v3.133.0) (2026-01-26)
|
|
260
232
|
|
|
233
|
+
### Novedades y Mejoras
|
|
261
234
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
* add custom header button ([#751](https://github.com/widergy/energy-ui/issues/751)) ([6cffe83](https://github.com/widergy/energy-ui/commit/6cffe8347014cdac18fee9270bb4a21f8dba275b))
|
|
235
|
+
* Se agregó la posibilidad de incorporar un componente personalizado en el encabezado de la aplicación, junto a las acciones existentes. [#751](https://github.com/widergy/Energy-UI/pull/751)
|
|
265
236
|
|
|
266
237
|
# [3.132.0](https://github.com/widergy/energy-ui/compare/v3.131.0...v3.132.0) (2026-01-26)
|
|
267
238
|
|
|
239
|
+
### Novedades y Mejoras
|
|
268
240
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
* [OUG] label tokens ([#748](https://github.com/widergy/energy-ui/issues/748)) ([5c122d4](https://github.com/widergy/energy-ui/commit/5c122d43e8d3b61839211bb97424cea1af300f76))
|
|
241
|
+
* Se incorporaron opciones de personalización visual para las etiquetas de texto, permitiendo adaptar su apariencia de forma más flexible. [#748](https://github.com/widergy/Energy-UI/pull/748)
|
|
272
242
|
|
|
273
243
|
# [3.131.0](https://github.com/widergy/energy-ui/compare/v3.130.1...v3.131.0) (2026-01-22)
|
|
274
244
|
|
|
245
|
+
### Correcciones
|
|
275
246
|
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
* adjust height ([#750](https://github.com/widergy/energy-ui/issues/750)) ([b1732b7](https://github.com/widergy/energy-ui/commit/b1732b75e1f4b2025567a4594641a3f84089341b))
|
|
247
|
+
* Se corrigió la visualización de las barras en los gráficos, que ahora se muestran con la altura correcta. [#750](https://github.com/widergy/Energy-UI/pull/750)
|
|
279
248
|
|
|
280
249
|
## [3.130.1](https://github.com/widergy/energy-ui/compare/v3.130.0...v3.130.1) (2026-01-19)
|
|
281
250
|
|
|
251
|
+
### Correcciones
|
|
282
252
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
* [CX-1777] dropdown options aligned to right ([#749](https://github.com/widergy/energy-ui/issues/749)) ([d081563](https://github.com/widergy/energy-ui/commit/d081563f1ac8358d4749c877f8205387d7bced3c))
|
|
253
|
+
* Se corrigió la alineación del texto en los menús desplegables, que aparecía desplazado hacia la derecha en lugar de mostrarse correctamente a la izquierda. [#749](https://github.com/widergy/Energy-UI/pull/749)
|
|
286
254
|
|
|
287
255
|
# [3.130.0](https://github.com/widergy/energy-ui/compare/v3.129.1...v3.130.0) (2026-01-14)
|
|
288
256
|
|
|
257
|
+
### Novedades y Mejoras
|
|
289
258
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
* removes tests temporarily ([638f77d](https://github.com/widergy/energy-ui/commit/638f77dc7f21ecf16e18492c32afb3d1d47190f1))
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
### Features
|
|
296
|
-
|
|
297
|
-
* [UGOVAES-1112] add observable field support to UTAttachmentList ([#742](https://github.com/widergy/energy-ui/issues/742)) ([0edc962](https://github.com/widergy/energy-ui/commit/0edc962dd27e4e7f95ad1e7a1347bc76ab6c27a9))
|
|
259
|
+
* El componente de adjuntos ahora puede ser observado y validado dentro de formularios, mejorando la experiencia al gestionar documentos adjuntos. [#742](https://github.com/widergy/Energy-UI/pull/742)
|
|
260
|
+
* Mejoras internas de la plataforma. [`638f77d`](https://github.com/widergy/Energy-UI/commit/638f77d)
|
|
298
261
|
|
|
299
262
|
## [3.129.1](https://github.com/widergy/energy-ui/compare/v3.129.0...v3.129.1) (2026-01-14)
|
|
300
263
|
|
|
264
|
+
### Correcciones
|
|
301
265
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
* added missing import ([#746](https://github.com/widergy/energy-ui/issues/746)) ([57c3e78](https://github.com/widergy/energy-ui/commit/57c3e784f1ab7b0a8abafc1d3beb6efc84245664))
|
|
266
|
+
* Mejoras internas de la plataforma [#746](https://github.com/widergy/Energy-UI/pull/746)
|
|
305
267
|
|
|
306
268
|
# [3.129.0](https://github.com/widergy/energy-ui/compare/v3.128.2...v3.129.0) (2026-01-13)
|
|
307
269
|
|
|
270
|
+
### Novedades y Mejoras
|
|
308
271
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
* [EVEP-310] barchart linear tooltip ([#741](https://github.com/widergy/energy-ui/issues/741)) ([3bc6fbc](https://github.com/widergy/energy-ui/commit/3bc6fbc9049fa515406aea6666c0faa21162f073))
|
|
312
|
-
* [EVEP-310] fix ([#745](https://github.com/widergy/energy-ui/issues/745)) ([f0f47b0](https://github.com/widergy/energy-ui/commit/f0f47b0aa9e7d21bb1b31a8a499b4265afe4a8f6))
|
|
272
|
+
* Mejoras internas de la plataforma [#744](https://github.com/widergy/Energy-UI/pull/744)
|
|
313
273
|
|
|
274
|
+
### Correcciones
|
|
314
275
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
* [OUG] useCSSvariables ([#744](https://github.com/widergy/energy-ui/issues/744)) ([d7d678e](https://github.com/widergy/energy-ui/commit/d7d678e83c8afbe12785a2299bc88f2be8bf2c9b))
|
|
276
|
+
* Se corrigió la visualización de tooltips en gráficos de líneas: ahora se muestran correctamente en los puntos del gráfico cuando están configurados para ello. [#741](https://github.com/widergy/Energy-UI/pull/741) [#745](https://github.com/widergy/Energy-UI/pull/745)
|
|
318
277
|
|
|
319
278
|
## [3.128.2](https://github.com/widergy/energy-ui/compare/v3.128.1...v3.128.2) (2026-01-09)
|
|
320
279
|
|
|
280
|
+
### Correcciones
|
|
321
281
|
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
* [AXCH-799] block tests in CI ([#734](https://github.com/widergy/energy-ui/issues/734)) ([1ef1d75](https://github.com/widergy/energy-ui/commit/1ef1d75213c36e899f97b6f85aaa39b2cb0157a5))
|
|
282
|
+
* Mejoras internas de la plataforma. [#734](https://github.com/widergy/Energy-UI/pull/734)
|
|
325
283
|
|
|
326
284
|
## [3.128.1](https://github.com/widergy/energy-ui/compare/v3.128.0...v3.128.1) (2026-01-07)
|
|
327
285
|
|
|
286
|
+
### Correcciones
|
|
328
287
|
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
* checkbox ([#740](https://github.com/widergy/energy-ui/issues/740)) ([4a53159](https://github.com/widergy/energy-ui/commit/4a53159bac6e9b7f34ed40efd6f933436dc798ba))
|
|
288
|
+
* Se corrigió la alineación de los checkboxes cuando el texto asociado ocupa más de una línea. [#740](https://github.com/widergy/Energy-UI/pull/740)
|
|
332
289
|
|
|
333
290
|
# [3.128.0](https://github.com/widergy/energy-ui/compare/v3.127.0...v3.128.0) (2026-01-07)
|
|
334
291
|
|
|
292
|
+
### Novedades y Mejoras
|
|
335
293
|
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
* [AXCH-842] uticon and utselectable card features ([#729](https://github.com/widergy/energy-ui/issues/729)) ([0874a52](https://github.com/widergy/energy-ui/commit/0874a52d6973e0e21245c9a1bc730ceb4232cef7))
|
|
294
|
+
* Los íconos ahora admiten colores de fondo personalizados, y las tarjetas seleccionables incorporan soporte para mostrar avatares, ofreciendo mayor flexibilidad visual en la interfaz. [#729](https://github.com/widergy/Energy-UI/pull/729)
|
|
339
295
|
|
|
340
296
|
# [3.127.0](https://github.com/widergy/energy-ui/compare/v3.126.0...v3.127.0) (2026-01-06)
|
|
341
297
|
|
|
298
|
+
### Novedades y Mejoras
|
|
342
299
|
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
* [PDI-564] citation chips ([#739](https://github.com/widergy/energy-ui/issues/739)) ([e8259c5](https://github.com/widergy/energy-ui/commit/e8259c56f2b378680bd893fb571984d7fedc2060))
|
|
300
|
+
* Las citas y referencias dentro de los mensajes ahora se muestran como etiquetas visuales interactivas, mejorando la legibilidad y la experiencia al consultar documentos vinculados. [#739](https://github.com/widergy/Energy-UI/pull/739)
|
|
346
301
|
|
|
347
302
|
# [3.126.0](https://github.com/widergy/energy-ui/compare/v3.125.1...v3.126.0) (2025-12-17)
|
|
348
303
|
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# UTCarousel
|
|
2
|
+
|
|
3
|
+
Carousel de imágenes con soporte para autoplay, swipe táctil, flechas de navegación y puntos indicadores. Cada slide puede renderizar una imagen de fondo o contenido React custom.
|
|
4
|
+
|
|
5
|
+
## Props
|
|
6
|
+
|
|
7
|
+
| Prop | Tipo | Default | Descripción |
|
|
8
|
+
|---|---|---|---|
|
|
9
|
+
| `imgArray` | `array` | — | Array de slides. Ver estructura abajo. |
|
|
10
|
+
| `autoPlay` | `bool` | `false` | Activa el avance automático entre slides. |
|
|
11
|
+
| `autoPlayDelay` | `number` | `2000` | Milisegundos entre slides en autoplay. |
|
|
12
|
+
| `height` | `string` | valor SCSS | Altura del carousel (ej. `'200px'`, `'var(--carousel-banner-height)'`). |
|
|
13
|
+
| `legend` | `shape` | — | Configuración de puntos indicadores. `{ position: 'inside' \| 'outside' }`. Si no se pasa, no se muestran puntos. |
|
|
14
|
+
| `arrow` | `shape` | — | Configuración de flechas. `{ position: 'inside' \| 'outside', arrowCustomLeft, arrowCustomRight, callbackLeft, callbackRight }`. |
|
|
15
|
+
| `activeEvents` | `bool` | — | Habilita/deshabilita eventos de puntero. |
|
|
16
|
+
| `borderSize` | `number` | — | Tamaño del borde entre slides. |
|
|
17
|
+
| `className` | `string` | — | Clase CSS adicional para el contenedor. |
|
|
18
|
+
| `classes` | `object` | — | Override de clases CSS internas (ej. `{ image: 'miClase' }`). |
|
|
19
|
+
|
|
20
|
+
### Estructura de `imgArray`
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
[
|
|
24
|
+
{
|
|
25
|
+
id: 1, // recomendado para keys estables
|
|
26
|
+
imgSrc: '...', // URL de imagen de fondo (cuando no se usa renderContent)
|
|
27
|
+
onClick: fn, // handler de click (cuando no se usa renderContent)
|
|
28
|
+
renderContent: <MiComponente /> // contenido React custom (reemplaza imgSrc)
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Cuando se provee `renderContent`, el slide renderiza ese nodo directamente en lugar de la imagen de fondo. El componente pasado es responsable de manejar su propio click y dimensiones.
|
|
34
|
+
|
|
35
|
+
## Uso básico — imágenes
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
38
|
+
<UTCarousel
|
|
39
|
+
imgArray={[
|
|
40
|
+
{ imgSrc: '/banner1.jpg', onClick: () => navigate('/promo1') },
|
|
41
|
+
{ imgSrc: '/banner2.jpg', onClick: () => navigate('/promo2') }
|
|
42
|
+
]}
|
|
43
|
+
autoPlay
|
|
44
|
+
autoPlayDelay={5000}
|
|
45
|
+
height="200px"
|
|
46
|
+
/>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Uso con contenido custom
|
|
50
|
+
|
|
51
|
+
```jsx
|
|
52
|
+
<UTCarousel
|
|
53
|
+
imgArray={[
|
|
54
|
+
{ id: 1, renderContent: <BannerItem item={item1} onClick={fn1} /> },
|
|
55
|
+
{ id: 2, renderContent: <BannerItem item={item2} onClick={fn2} /> }
|
|
56
|
+
]}
|
|
57
|
+
autoPlay
|
|
58
|
+
autoPlayDelay={7000}
|
|
59
|
+
height="var(--carousel-banner-height)"
|
|
60
|
+
/>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Sin puntos indicadores
|
|
64
|
+
|
|
65
|
+
No pasar la prop `legend` para ocultar los dots.
|
|
@@ -20,6 +20,7 @@ const LegendContainer = _ref => {
|
|
|
20
20
|
const handleOnClick = () => onClick(index + 1);
|
|
21
21
|
const isActive = currentSlide === index;
|
|
22
22
|
return LegendCustom ? /*#__PURE__*/_react.default.createElement(LegendCustom, {
|
|
23
|
+
isActive: isActive,
|
|
23
24
|
onClick: handleOnClick
|
|
24
25
|
}) : /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
|
|
25
26
|
className: classes.legendStyleTouchable,
|
|
@@ -19,17 +19,26 @@ const Slide = _ref => {
|
|
|
19
19
|
imgSrc,
|
|
20
20
|
onClick,
|
|
21
21
|
position,
|
|
22
|
+
renderContent,
|
|
22
23
|
shouldAnimate,
|
|
23
24
|
widthContainer
|
|
24
25
|
} = _ref;
|
|
25
26
|
const slide = currentSlide === position ? border / 2 : currentSlide === position - 1 ? -border / 4 : currentSlide === position + 1 && border + border / 4;
|
|
27
|
+
const containerStyle = {
|
|
28
|
+
left: position * (slide ? widthContainer + slide : widthContainer),
|
|
29
|
+
width: "".concat(border ? widthContainer - border : widthContainer, "px"),
|
|
30
|
+
transition: "".concat(shouldAnimate ? "left ".concat(animationTime, "s linear 0s") : 'none')
|
|
31
|
+
};
|
|
32
|
+
if (renderContent) {
|
|
33
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
34
|
+
className: _stylesModule.default.imageContainer,
|
|
35
|
+
style: containerStyle,
|
|
36
|
+
draggable: "false"
|
|
37
|
+
}, renderContent);
|
|
38
|
+
}
|
|
26
39
|
return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
|
|
27
40
|
className: "".concat(_stylesModule.default.imageContainer),
|
|
28
|
-
style:
|
|
29
|
-
left: position * (slide ? widthContainer + slide : widthContainer),
|
|
30
|
-
width: "".concat(border ? widthContainer - border : widthContainer, "px"),
|
|
31
|
-
transition: "".concat(shouldAnimate ? "left ".concat(animationTime, "s linear 0s") : 'none')
|
|
32
|
-
},
|
|
41
|
+
style: containerStyle,
|
|
33
42
|
draggable: "false",
|
|
34
43
|
onClick: onClick
|
|
35
44
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -48,6 +57,7 @@ Slide.propTypes = {
|
|
|
48
57
|
imgSrc: _propTypes.string,
|
|
49
58
|
onClick: _propTypes.func,
|
|
50
59
|
position: _propTypes.number,
|
|
60
|
+
renderContent: _propTypes.node,
|
|
51
61
|
shouldAnimate: _propTypes.bool,
|
|
52
62
|
widthContainer: _propTypes.number
|
|
53
63
|
};
|
|
@@ -56,10 +56,16 @@ class Slider extends _react.PureComponent {
|
|
|
56
56
|
key: "slide-".concat(slide.id || slide.imgSrc),
|
|
57
57
|
onClick: slide.onClick,
|
|
58
58
|
position: _index - 1,
|
|
59
|
+
renderContent: slide.renderContent,
|
|
59
60
|
shouldAnimate: shouldAnimate,
|
|
60
61
|
widthContainer: containerWidth
|
|
61
62
|
}))), legend && legend.position === _constants.INSIDE && /*#__PURE__*/_react.default.createElement("div", {
|
|
62
|
-
className: _stylesModule.default.legendContainer
|
|
63
|
+
className: _stylesModule.default.legendContainer,
|
|
64
|
+
style: {
|
|
65
|
+
justifyContent: legend.align || 'center',
|
|
66
|
+
paddingBottom: legend.paddingBottom,
|
|
67
|
+
paddingLeft: legend.paddingLeft
|
|
68
|
+
}
|
|
63
69
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
64
70
|
className: _stylesModule.default.legend
|
|
65
71
|
}, slides.map((slide, itemIndex) => /*#__PURE__*/_react.default.createElement(_Legend.default, {
|
|
@@ -46,11 +46,16 @@ UTCarousel.propTypes = {
|
|
|
46
46
|
callbackRight: _propTypes.func
|
|
47
47
|
}),
|
|
48
48
|
legend: (0, _propTypes.shape)({
|
|
49
|
-
|
|
50
|
-
legendCustom: _propTypes.
|
|
49
|
+
align: _propTypes.string,
|
|
50
|
+
legendCustom: _propTypes.func,
|
|
51
|
+
paddingBottom: _propTypes.string,
|
|
52
|
+
paddingLeft: _propTypes.string,
|
|
53
|
+
position: _propTypes.string
|
|
51
54
|
}),
|
|
52
55
|
imgArray: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
|
|
53
|
-
|
|
56
|
+
id: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
|
|
57
|
+
imgSrc: _propTypes.string,
|
|
58
|
+
renderContent: _propTypes.node
|
|
54
59
|
})),
|
|
55
60
|
borderSize: _propTypes.number,
|
|
56
61
|
autoPlay: _propTypes.bool,
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# UTDotMenu
|
|
2
|
+
|
|
3
|
+
Botón de tres puntos verticales que despliega un menú de opciones. Soporta ícono y color de texto por ítem, lo que permite marcar acciones destructivas (ej: "Eliminar") con color negativo. El ícono del botón trigger también es configurable.
|
|
4
|
+
|
|
5
|
+
## Props
|
|
6
|
+
|
|
7
|
+
| Prop | Type | Default | Description |
|
|
8
|
+
|------|------|---------|-------------|
|
|
9
|
+
| `className` | `string` | `undefined` | Clase CSS aplicada al contenedor raíz. |
|
|
10
|
+
| `classNames` | `shape({ button, icon })` | `{}` | Clases personalizadas para el botón trigger. |
|
|
11
|
+
| `Icon` | `elementType \| string` | `MoreVertIcon` | Ícono del botón trigger. Acepta un componente React o un nombre de ícono de Tabler (ej: `'IconDotsVertical'`). |
|
|
12
|
+
| `menuItemProps` | `object` | `undefined` | Props pasadas a cada `MenuItem` de MUI. Útil para sobreescribir estilos (ej: `{ style: { minHeight: 'auto' } }`). |
|
|
13
|
+
| `menuProps` | `object` | `undefined` | Props pasadas al componente `Menu` de MUI. El `borderRadius` del Paper es `8px` por defecto y se puede sobreescribir vía `menuProps.PaperProps`. |
|
|
14
|
+
| `options` | `arrayOf(shape)` | `undefined` | Array de opciones del menú. Ver estructura abajo. |
|
|
15
|
+
| `size` | `string` | `undefined` | Tamaño del botón trigger. Se pasa directamente a `UTButton` (ej: `'small'`, `'medium'`). |
|
|
16
|
+
|
|
17
|
+
### Estructura de `options`
|
|
18
|
+
|
|
19
|
+
Cada objeto del array puede contener:
|
|
20
|
+
|
|
21
|
+
| Campo | Type | Required | Description |
|
|
22
|
+
|-------|------|----------|-------------|
|
|
23
|
+
| `name` | `string` | ✅ | Texto que se muestra en el ítem. |
|
|
24
|
+
| `onPress` | `func` | ✅ | Callback ejecutado al hacer click en el ítem. |
|
|
25
|
+
| `colorTheme` | `string` | — | Color del texto e ícono del ítem (ej: `'error'` para rojo). Si se omite, usa el color por defecto del tema. |
|
|
26
|
+
| `icon` | `string` | — | Nombre de ícono para `UTIcon` (ej: `'IconPencil'`, `'IconTrash'`). Si se omite, no se renderiza ícono. |
|
|
27
|
+
| `iconProps` | `object` | — | Props adicionales pasadas directamente a `UTIcon` (ej: `size`, `shade`, `fillTheme`). Si incluye `colorTheme`, sobreescribe el color del ícono sin afectar el texto. |
|
|
28
|
+
|
|
29
|
+
## Ejemplos
|
|
30
|
+
|
|
31
|
+
### Uso básico (sin íconos)
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
<UTDotMenu
|
|
35
|
+
options={[
|
|
36
|
+
{ name: 'Editar', onPress: handleEdit },
|
|
37
|
+
{ name: 'Duplicar', onPress: handleDuplicate },
|
|
38
|
+
{ name: 'Eliminar', onPress: handleDelete }
|
|
39
|
+
]}
|
|
40
|
+
/>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Con íconos y acción destructiva
|
|
44
|
+
|
|
45
|
+
```jsx
|
|
46
|
+
<UTDotMenu
|
|
47
|
+
options={[
|
|
48
|
+
{ name: 'Editar', onPress: handleEdit, icon: 'IconPencil' },
|
|
49
|
+
{ name: 'Duplicar', onPress: handleDuplicate, icon: 'IconCopy' },
|
|
50
|
+
{ name: 'Eliminar', onPress: handleDelete, icon: 'IconTrash', colorTheme: 'error' }
|
|
51
|
+
]}
|
|
52
|
+
/>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Tamaño small y min-height removido
|
|
56
|
+
|
|
57
|
+
```jsx
|
|
58
|
+
<UTDotMenu
|
|
59
|
+
size="small"
|
|
60
|
+
menuItemProps={{ style: { minHeight: 'auto' } }}
|
|
61
|
+
options={[
|
|
62
|
+
{ name: 'Editar', onPress: handleEdit, icon: 'IconPencil' },
|
|
63
|
+
{ name: 'Eliminar', onPress: handleDelete, icon: 'IconTrash', colorTheme: 'error' }
|
|
64
|
+
]}
|
|
65
|
+
/>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Border radius personalizado en el menu
|
|
69
|
+
|
|
70
|
+
```jsx
|
|
71
|
+
<UTDotMenu
|
|
72
|
+
menuProps={{ PaperProps: { style: { borderRadius: 4 } } }}
|
|
73
|
+
options={[...]}
|
|
74
|
+
/>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Con `iconProps` para personalizar el ícono
|
|
78
|
+
|
|
79
|
+
```jsx
|
|
80
|
+
<UTDotMenu
|
|
81
|
+
options={[
|
|
82
|
+
{ name: 'Editar', onPress: handleEdit, icon: 'IconPencil', iconProps: { size: 20 } },
|
|
83
|
+
{ name: 'Eliminar', onPress: handleDelete, icon: 'IconTrash', colorTheme: 'error' }
|
|
84
|
+
]}
|
|
85
|
+
/>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Con ícono trigger personalizado
|
|
89
|
+
|
|
90
|
+
```jsx
|
|
91
|
+
import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
|
|
92
|
+
|
|
93
|
+
<UTDotMenu
|
|
94
|
+
Icon={MoreHorizIcon}
|
|
95
|
+
options={[
|
|
96
|
+
{ name: 'Editar', onPress: handleEdit },
|
|
97
|
+
{ name: 'Eliminar', onPress: handleDelete, colorTheme: 'error' }
|
|
98
|
+
]}
|
|
99
|
+
/>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Notas
|
|
103
|
+
|
|
104
|
+
- `colorTheme` es resuelto internamente por `UTLabel` y `UTIcon`, que adaptan el color al palette del tema activo del cliente. Funciona en los 14 temas sin hardcodear valores hex.
|
|
105
|
+
- `iconProps` se spreadia directamente a `UTIcon`, por lo que acepta cualquier prop válida del componente.
|
|
106
|
+
- Las opciones sin `icon` ni `colorTheme` se comportan igual que en versiones anteriores del componente (backward compatible).
|
|
107
|
+
|
|
108
|
+
## Componentes relacionados
|
|
109
|
+
|
|
110
|
+
- **UTButton**: Usado internamente para el botón trigger.
|
|
111
|
+
- **UTIcon**: Usado para renderizar el ícono de cada opción.
|
|
112
|
+
- **UTLabel**: Usado para renderizar el texto de cada opción, maneja `colorTheme` internamente.
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.DEFAULT_PROPS = void 0;
|
|
7
|
+
var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
|
|
10
|
+
classNames: {},
|
|
11
|
+
Icon: _MoreVert.default
|
|
12
|
+
};
|
|
@@ -4,70 +4,88 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
|
|
9
9
|
var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
|
|
10
|
-
var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));
|
|
11
10
|
var _propTypes = require("prop-types");
|
|
12
11
|
var _UTButton = _interopRequireDefault(require("../UTButton"));
|
|
12
|
+
var _UTIcon = _interopRequireDefault(require("../UTIcon"));
|
|
13
|
+
var _UTLabel = _interopRequireDefault(require("../UTLabel"));
|
|
14
|
+
var _constants = require("./constants");
|
|
15
|
+
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
|
|
13
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
-
function
|
|
15
|
-
function
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
17
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
18
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
19
|
+
const UTDotMenu = _ref => {
|
|
20
|
+
let {
|
|
21
|
+
className,
|
|
22
|
+
classNames = _constants.DEFAULT_PROPS.classNames,
|
|
23
|
+
Icon = _constants.DEFAULT_PROPS.Icon,
|
|
24
|
+
menuItemProps,
|
|
25
|
+
menuProps,
|
|
26
|
+
options,
|
|
27
|
+
size
|
|
28
|
+
} = _ref;
|
|
29
|
+
const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
31
|
+
className: className
|
|
32
|
+
}, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
|
|
33
|
+
classNames: {
|
|
34
|
+
icon: classNames.icon,
|
|
35
|
+
root: classNames.button
|
|
36
|
+
},
|
|
37
|
+
Icon: Icon,
|
|
38
|
+
onClick: event => setAnchorEl(event.currentTarget),
|
|
39
|
+
size: size,
|
|
40
|
+
variant: "text"
|
|
41
|
+
}), /*#__PURE__*/_react.default.createElement(_Menu.default, _extends({
|
|
42
|
+
id: "long-menu",
|
|
43
|
+
anchorEl: anchorEl,
|
|
44
|
+
open: Boolean(anchorEl),
|
|
45
|
+
onClose: () => setAnchorEl(null)
|
|
46
|
+
}, menuProps, {
|
|
47
|
+
PaperProps: {
|
|
48
|
+
style: {
|
|
49
|
+
borderRadius: 'var(--radius-md, 8px)'
|
|
47
50
|
},
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
51
|
+
...(menuProps === null || menuProps === void 0 ? void 0 : menuProps.PaperProps)
|
|
52
|
+
}
|
|
53
|
+
}), options.map(option => {
|
|
54
|
+
const {
|
|
55
|
+
colorTheme,
|
|
56
|
+
icon,
|
|
57
|
+
iconProps,
|
|
58
|
+
name,
|
|
59
|
+
onPress
|
|
60
|
+
} = option;
|
|
61
|
+
return /*#__PURE__*/_react.default.createElement(_MenuItem.default, _extends({
|
|
62
|
+
key: name,
|
|
63
|
+
onClick: onPress
|
|
64
|
+
}, menuItemProps), icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
|
|
65
|
+
className: _stylesModule.default.optionIcon,
|
|
66
|
+
colorTheme: colorTheme,
|
|
67
|
+
name: icon
|
|
68
|
+
}, iconProps)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
|
|
69
|
+
colorTheme: colorTheme
|
|
70
|
+
}, name));
|
|
71
|
+
})));
|
|
72
|
+
};
|
|
62
73
|
UTDotMenu.propTypes = {
|
|
74
|
+
className: _propTypes.string,
|
|
75
|
+
classNames: (0, _propTypes.shape)({
|
|
76
|
+
button: _propTypes.string,
|
|
77
|
+
icon: _propTypes.string
|
|
78
|
+
}),
|
|
79
|
+
Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
|
|
80
|
+
menuItemProps: _propTypes.object,
|
|
81
|
+
menuProps: _propTypes.object,
|
|
63
82
|
options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
|
|
83
|
+
colorTheme: _propTypes.string,
|
|
84
|
+
icon: _propTypes.string,
|
|
85
|
+
iconProps: _propTypes.object,
|
|
64
86
|
name: _propTypes.string,
|
|
65
87
|
onPress: _propTypes.func
|
|
66
88
|
})),
|
|
67
|
-
|
|
68
|
-
classNames: (0, _propTypes.shape)({
|
|
69
|
-
icon: _propTypes.string,
|
|
70
|
-
button: _propTypes.string
|
|
71
|
-
})
|
|
89
|
+
size: _propTypes.string
|
|
72
90
|
};
|
|
73
91
|
var _default = exports.default = UTDotMenu;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
import * as UTDotMenuStories from './UTDotMenu.stories.js';
|
|
4
|
+
|
|
5
|
+
<Meta of={UTDotMenuStories} />
|
|
6
|
+
|
|
7
|
+
<Title>UTDotMenu</Title>
|
|
8
|
+
|
|
9
|
+
<Description of={UTDotMenuStories} />
|
|
10
|
+
|
|
11
|
+
<Canvas of={UTDotMenuStories.Playground} withToolbar />
|
|
12
|
+
|
|
13
|
+
<ArgTypes exclude={['classes', 'theme']} />
|
|
@@ -0,0 +1,271 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.Small = exports.Playground = exports.IconoPersonalizado = exports.Default = exports.ConIconos = exports.ConIconProps = exports.AccionDestructiva = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _ = _interopRequireDefault(require(".."));
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
/* eslint-disable no-alert */
|
|
11
|
+
|
|
12
|
+
const BASIC_OPTIONS = [{
|
|
13
|
+
name: 'Editar',
|
|
14
|
+
onPress: () => alert('Editar')
|
|
15
|
+
}, {
|
|
16
|
+
name: 'Duplicar',
|
|
17
|
+
onPress: () => alert('Duplicar')
|
|
18
|
+
}, {
|
|
19
|
+
name: 'Eliminar',
|
|
20
|
+
onPress: () => alert('Eliminar')
|
|
21
|
+
}];
|
|
22
|
+
const OPTIONS_WITH_ICONS = [{
|
|
23
|
+
name: 'Editar',
|
|
24
|
+
onPress: () => alert('Editar'),
|
|
25
|
+
icon: 'IconPencil'
|
|
26
|
+
}, {
|
|
27
|
+
name: 'Duplicar',
|
|
28
|
+
onPress: () => alert('Duplicar'),
|
|
29
|
+
icon: 'IconCopy'
|
|
30
|
+
}, {
|
|
31
|
+
name: 'Eliminar',
|
|
32
|
+
onPress: () => alert('Eliminar'),
|
|
33
|
+
icon: 'IconTrash',
|
|
34
|
+
colorTheme: 'error'
|
|
35
|
+
}];
|
|
36
|
+
var _default = exports.default = {
|
|
37
|
+
args: {
|
|
38
|
+
options: BASIC_OPTIONS
|
|
39
|
+
},
|
|
40
|
+
argTypes: {
|
|
41
|
+
className: {
|
|
42
|
+
control: 'text',
|
|
43
|
+
description: 'Clase CSS aplicada al contenedor raíz.',
|
|
44
|
+
table: {
|
|
45
|
+
defaultValue: {
|
|
46
|
+
summary: 'undefined'
|
|
47
|
+
},
|
|
48
|
+
type: {
|
|
49
|
+
summary: 'string'
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
classNames: {
|
|
54
|
+
control: false,
|
|
55
|
+
description: 'Clases personalizadas para el botón trigger. Acepta `button` e `icon`.',
|
|
56
|
+
table: {
|
|
57
|
+
defaultValue: {
|
|
58
|
+
summary: '{}'
|
|
59
|
+
},
|
|
60
|
+
type: {
|
|
61
|
+
summary: 'shape({ button: string, icon: string })'
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
Icon: {
|
|
66
|
+
control: 'text',
|
|
67
|
+
description: 'Ícono del botón trigger. Acepta un nombre de ícono de Tabler (string) o un componente React. Por defecto muestra el ícono de tres puntos verticales (MoreVertIcon).',
|
|
68
|
+
table: {
|
|
69
|
+
defaultValue: {
|
|
70
|
+
summary: 'MoreVertIcon'
|
|
71
|
+
},
|
|
72
|
+
type: {
|
|
73
|
+
summary: 'elementType | string'
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
menuItemProps: {
|
|
78
|
+
control: false,
|
|
79
|
+
description: 'Props pasadas a cada `MenuItem` de MUI. Útil para sobreescribir estilos como `minHeight` (ej: `{ style: { minHeight: "auto" } }`).',
|
|
80
|
+
table: {
|
|
81
|
+
defaultValue: {
|
|
82
|
+
summary: 'undefined'
|
|
83
|
+
},
|
|
84
|
+
type: {
|
|
85
|
+
summary: 'object'
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
menuProps: {
|
|
90
|
+
control: false,
|
|
91
|
+
description: 'Props pasadas al `Menu` de MUI. El Paper tiene `borderRadius: 8px` por defecto, sobreescribible vía `menuProps.PaperProps`.',
|
|
92
|
+
table: {
|
|
93
|
+
defaultValue: {
|
|
94
|
+
summary: 'undefined'
|
|
95
|
+
},
|
|
96
|
+
type: {
|
|
97
|
+
summary: 'object'
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
options: {
|
|
102
|
+
control: false,
|
|
103
|
+
description: 'Array de opciones del menú. Cada opción puede incluir `icon`, `colorTheme` e `iconProps` para pasar props extra a UTIcon.',
|
|
104
|
+
table: {
|
|
105
|
+
defaultValue: {
|
|
106
|
+
summary: 'undefined'
|
|
107
|
+
},
|
|
108
|
+
type: {
|
|
109
|
+
summary: 'arrayOf(shape({ name, onPress, colorTheme?, icon?, iconProps? }))'
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
size: {
|
|
114
|
+
control: 'inline-radio',
|
|
115
|
+
description: 'Tamaño del botón trigger. Se pasa directamente a UTButton.',
|
|
116
|
+
options: ['xs', 'small', 'medium', 'large'],
|
|
117
|
+
table: {
|
|
118
|
+
defaultValue: {
|
|
119
|
+
summary: 'undefined'
|
|
120
|
+
},
|
|
121
|
+
type: {
|
|
122
|
+
summary: 'string'
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
component: _.default,
|
|
128
|
+
parameters: {
|
|
129
|
+
docs: {
|
|
130
|
+
description: {
|
|
131
|
+
component: 'Botón de tres puntos que despliega un menú de opciones. Cada opción acepta un ícono (UTIcon) y un colorTheme para el texto, ' + 'lo que permite marcar ítems destructivos (como "Eliminar") con color negativo. ' + 'El ícono del botón trigger también es configurable.'
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
title: 'Energy-UI/UTDotMenu'
|
|
136
|
+
};
|
|
137
|
+
const Playground = exports.Playground = {
|
|
138
|
+
args: {
|
|
139
|
+
options: [{
|
|
140
|
+
name: 'Editar',
|
|
141
|
+
icon: 'IconPencil'
|
|
142
|
+
}, {
|
|
143
|
+
name: 'Duplicar',
|
|
144
|
+
icon: 'IconCopy'
|
|
145
|
+
}, {
|
|
146
|
+
name: 'Eliminar',
|
|
147
|
+
icon: 'IconTrash',
|
|
148
|
+
colorTheme: 'error'
|
|
149
|
+
}]
|
|
150
|
+
},
|
|
151
|
+
name: 'Playground'
|
|
152
|
+
};
|
|
153
|
+
const Default = exports.Default = {
|
|
154
|
+
args: {
|
|
155
|
+
options: BASIC_OPTIONS
|
|
156
|
+
},
|
|
157
|
+
name: 'Default',
|
|
158
|
+
parameters: {
|
|
159
|
+
docs: {
|
|
160
|
+
description: {
|
|
161
|
+
story: 'Uso básico: opciones sin ícono ni colorTheme. Comportamiento idéntico a la versión anterior del componente.'
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
const ConIconos = exports.ConIconos = {
|
|
167
|
+
args: {
|
|
168
|
+
options: OPTIONS_WITH_ICONS
|
|
169
|
+
},
|
|
170
|
+
name: 'Con íconos',
|
|
171
|
+
parameters: {
|
|
172
|
+
docs: {
|
|
173
|
+
description: {
|
|
174
|
+
story: 'Opciones con ícono a la izquierda del texto. El último ítem usa `colorTheme: "error"` para indicar una acción destructiva.'
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
const AccionDestructiva = exports.AccionDestructiva = {
|
|
180
|
+
args: {
|
|
181
|
+
options: [{
|
|
182
|
+
name: 'Ver detalle',
|
|
183
|
+
icon: 'IconEye'
|
|
184
|
+
}, {
|
|
185
|
+
name: 'Editar',
|
|
186
|
+
icon: 'IconPencil'
|
|
187
|
+
}, {
|
|
188
|
+
name: 'Eliminar',
|
|
189
|
+
icon: 'IconTrash',
|
|
190
|
+
colorTheme: 'error'
|
|
191
|
+
}]
|
|
192
|
+
},
|
|
193
|
+
name: 'Acción destructiva',
|
|
194
|
+
parameters: {
|
|
195
|
+
docs: {
|
|
196
|
+
description: {
|
|
197
|
+
story: '`colorTheme: "error"` aplica el color destructivo del tema activo al texto y al ícono del ítem. ' + 'El color es resuelto internamente por `UTLabel` y `UTIcon`, adaptándose a los 14 temas de cliente.'
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
const Small = exports.Small = {
|
|
203
|
+
args: {
|
|
204
|
+
menuItemProps: {
|
|
205
|
+
style: {
|
|
206
|
+
minHeight: 'auto'
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
options: OPTIONS_WITH_ICONS,
|
|
210
|
+
size: 'small'
|
|
211
|
+
},
|
|
212
|
+
name: 'Small',
|
|
213
|
+
parameters: {
|
|
214
|
+
docs: {
|
|
215
|
+
description: {
|
|
216
|
+
story: '`size="small"` reduce el botón trigger. `menuItemProps={{ style: { minHeight: "auto" } }}` elimina el `min-height: 48px` que MUI aplica a los ítems en pantallas de 600px+.'
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
};
|
|
221
|
+
const ConIconProps = exports.ConIconProps = {
|
|
222
|
+
args: {
|
|
223
|
+
options: [{
|
|
224
|
+
name: 'Editar',
|
|
225
|
+
icon: 'IconPencil',
|
|
226
|
+
iconProps: {
|
|
227
|
+
size: 20
|
|
228
|
+
}
|
|
229
|
+
}, {
|
|
230
|
+
name: 'Duplicar',
|
|
231
|
+
icon: 'IconCopy',
|
|
232
|
+
iconProps: {
|
|
233
|
+
size: 20
|
|
234
|
+
}
|
|
235
|
+
}, {
|
|
236
|
+
name: 'Eliminar',
|
|
237
|
+
icon: 'IconTrash',
|
|
238
|
+
colorTheme: 'error',
|
|
239
|
+
iconProps: {
|
|
240
|
+
size: 20
|
|
241
|
+
}
|
|
242
|
+
}]
|
|
243
|
+
},
|
|
244
|
+
name: 'Con iconProps',
|
|
245
|
+
parameters: {
|
|
246
|
+
docs: {
|
|
247
|
+
description: {
|
|
248
|
+
story: '`iconProps` permite pasar props extra directamente a `UTIcon` (ej: `size`, `shade`, `fillTheme`). ' + 'Si `iconProps` incluye `colorTheme`, sobreescribe el color del ícono sin afectar el color del texto.'
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
};
|
|
253
|
+
const IconoPersonalizado = exports.IconoPersonalizado = {
|
|
254
|
+
args: {
|
|
255
|
+
Icon: () => /*#__PURE__*/_react.default.createElement("span", {
|
|
256
|
+
style: {
|
|
257
|
+
fontSize: 20,
|
|
258
|
+
lineHeight: 1
|
|
259
|
+
}
|
|
260
|
+
}, "\u22EF"),
|
|
261
|
+
options: BASIC_OPTIONS
|
|
262
|
+
},
|
|
263
|
+
name: 'Ícono trigger personalizado',
|
|
264
|
+
parameters: {
|
|
265
|
+
docs: {
|
|
266
|
+
description: {
|
|
267
|
+
story: 'La prop `Icon` permite reemplazar el ícono de tres puntos por cualquier componente. ' + 'Por defecto usa `MoreVertIcon` de Material-UI.'
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
};
|
|
@@ -25,6 +25,7 @@ const UTLabel = _ref => {
|
|
|
25
25
|
dataTestId,
|
|
26
26
|
markdownExtended,
|
|
27
27
|
markdownRenderers,
|
|
28
|
+
style,
|
|
28
29
|
title,
|
|
29
30
|
variant,
|
|
30
31
|
withMarkdown
|
|
@@ -38,6 +39,7 @@ const UTLabel = _ref => {
|
|
|
38
39
|
return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement(Component, {
|
|
39
40
|
className: componentClassname.trim(),
|
|
40
41
|
"data-testid": dataTestId,
|
|
42
|
+
style: style,
|
|
41
43
|
title: title
|
|
42
44
|
}, withMarkdown && /*#__PURE__*/_react.default.createElement(_Markdown.default, {
|
|
43
45
|
classes: classes,
|
|
@@ -53,6 +55,7 @@ UTLabel.propTypes = {
|
|
|
53
55
|
dataTestId: _propTypes.string,
|
|
54
56
|
markdownExtended: _propTypes.bool,
|
|
55
57
|
markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
|
|
58
|
+
style: _propTypes.object,
|
|
56
59
|
title: _propTypes.string,
|
|
57
60
|
variant: _propTypes.string,
|
|
58
61
|
withMarkdown: _propTypes.bool
|