@imj_media/ui 1.2.12 → 1.2.14

package/CHANGELOG.md

@@ -5,6 +5,120 @@ Todos los cambios notables de este proyecto serán documentados en este archivo.
 El formato está basado en [Keep a Changelog](https://keepachangelog.com/es-ES/1.0.0/),
 y este proyecto adhiere a [Semantic Versioning](https://semver.org/lang/es/).
 
+## [1.2.14] - 2026-01-06
+
+### Added
+- **PickerColor Component**: Nuevo componente completo para selección de colores
+  - Componente `PickerColor` para seleccionar colores en formato hexadecimal
+  - Componentes `ColorInput`, `ColorPalette`, y `ColorSwatch` para selección visual de colores
+  - Integración con almacenamiento de colores recientes usando localStorage para comodidad del usuario
+  - Soporte para EyeDropper API para seleccionar colores desde la pantalla
+  - Funciones utilitarias para validación y conversión de colores (hex, RGB, HSL)
+  - Stories completas para el componente PickerColor que demuestran varios casos de uso y configuraciones
+- **Toast/Alert - Barra de Progreso con Duración**: Nueva funcionalidad para mostrar barra de progreso en toasts y alerts
+  - Nueva prop `duration` en `IAlert` y `ToastProps` para definir la duración del toast/alert
+  - Barra de progreso que se muestra en la parte inferior del alert cuando hay duración definida
+  - El progreso retrocede de 100% a 0% mientras pasa el tiempo, mostrando el tiempo restante
+  - El toast/alert se cierra automáticamente cuando el progreso llega a 0%
+  - La barra de progreso solo se muestra si `duration` está definida y es mayor a 0
+  - Hook `useProgressBar` que maneja el cálculo del progreso usando `requestAnimationFrame` para animación suave
+  - Sincronización entre el cierre automático del toast y la barra de progreso
+  - Actualizada la historia "DuraciónPersonalizada" para demostrar la funcionalidad de la barra de progreso
+  - Agregados ejemplos con diferentes duraciones (2s, 5s, 10s) en la historia "Colores"
+- **Table - Validación de Celdas Editables**: Sistema de validación para celdas editables en tablas
+  - Nueva prop `errorCursor` en componente Input para indicar visualmente errores con cursor rojo y borde
+  - Validación automática basada en el tipo de columna (`number`, `numeric`, `text`)
+  - Prevención de entrada de caracteres inválidos en columnas numéricas
+  - Cursor parpadeante en color danger cuando hay error de validación
+  - Borde y fondo en color danger cuando hay error de validación
+  - Nueva story `ValidationTable` que demuestra la funcionalidad de validación en celdas editables
+- **Table - Búsqueda Interna Configurable**: Mejora en el manejo de búsqueda interna vs externa
+  - Nueva prop `internalSearch` en `TableToolbarConfig` para controlar si se aplica búsqueda interna (por defecto: `false`)
+  - Cuando `internalSearch` es `false` y hay `onSearch` definido, solo se emite el evento sin aplicar búsqueda interna
+  - Evita mostrar resultados intermedios de búsqueda interna cuando hay búsqueda externa asíncrona
+  - Mejora en la experiencia de usuario al evitar parpadeos de resultados durante búsquedas externas
+- **Table - Actualización Batch de Visibilidad de Columnas**: Mejora en el guardado de configuración en localStorage
+  - Nuevo método `updateMultipleColumnVisibility` en `useTableConfig` para actualizar múltiples columnas de una vez
+  - Prevención de sobreescrituras en localStorage cuando se cambian múltiples columnas simultáneamente
+  - Modificación en `TableToolbar` para usar actualización batch cuando hay múltiples cambios de visibilidad
+  - Nueva prop `onMultipleColumnVisibilityChange` en `TableToolbar` para manejar cambios batch
+  - Corrección del problema donde solo se guardaba el último checkbox marcado en localStorage
+- **TableSelectionBar - Iconos Mejorados**: Mejora en el renderizado de iconos en acciones de selección
+  - Los iconos ahora se muestran correctamente cuando hay `label` e `icon` en las acciones
+  - Uso de `slotLeft` para iconos cuando hay label, permitiendo mostrar icono y texto juntos
+  - Soporte mejorado para iconos de tipo string (`'EditOutlined'`) y Font Awesome (`faCopy`)
+
+### Changed
+- **Toast - Message Opcional**: La prop `message` ahora es opcional en `ToastInput`
+  - Cambiado el tipo `ToastInput` de `string | (ToastOptions & { message: string })` a `string | (ToastOptions & { message?: string })`
+  - Permite crear toasts solo con `title` sin necesidad de incluir `message`
+  - Si no se proporciona `message`, se usa una cadena vacía por defecto
+
+### Fixed
+- **Table - Guardado en localStorage**: Corrección de sobreescrituras en localStorage
+  - Solucionado el problema donde múltiples cambios de visibilidad de columnas causaban sobreescrituras
+  - Ahora todos los cambios de visibilidad se guardan correctamente en una sola operación batch
+  - Mejora en la persistencia de configuración de columnas
+- **Icon - Comparación con 'xl' en LegacyIcon**: Corrección de error de TypeScript
+  - Eliminada la comparación innecesaria con `'xl'` en `getPaddingClass` ya que `VisualSize` no incluye `'xl'`
+  - Simplificada la lógica para solo convertir `'xxs'` a `'xs'` cuando es necesario
+- **PickerColor - Importación de InputRef**: Corrección de importación incorrecta
+  - Cambiada la importación de `InputRef` de `@/modules/Input` a `@/shared/types/input`
+  - Agregadas las propiedades faltantes `clear` y `getInputElement` al objeto retornado por `useImperativeHandle` en `ColorInput`
+
+## [1.2.13] - 2025-01-22
+
+### Added
+- **Avatar - AvatarStack Component**: Nuevo componente para mostrar múltiples avatares apilados con efecto de superposición
+  - Nueva prop `stack` que acepta un array de avatares para mostrar en formato apilado
+  - Detección automática de tipo: si un avatar tiene `src`, automáticamente se usa `type='people'` sin necesidad de especificarlo
+  - Prop `maxVisible` para limitar el número de avatares visibles, mostrando un contador automático con el número restante (ej: "+5")
+  - Props `counterColor` y `counterTheme` para personalizar el avatar contador cuando se excede `maxVisible`
+  - Prop `stroke` para agregar borde a todos los avatares del stack (incluyendo el contador)
+  - Márgenes negativos automáticos según el tamaño del avatar para crear el efecto de superposición
+  - Padding derecho proporcional al tamaño para compensar el espacio de los márgenes negativos
+  - Nueva story `AvatarStack` que demuestra diferentes variaciones: stack con imágenes, stack mixto, stack con letras, stack con contador, y stack con límite máximo
+  - Soporte para todos los tamaños de avatar (xxs, xs, sm, md, lg, xl)
+  - Tipos flexibles `AvatarStackItem` que permiten pasar avatares sin especificar `type` cuando tienen `src`
+
+### Fixed
+- **Modal - Border-radius cuando footer está oculto**: Mejora en el manejo del border-radius del body cuando el footer está oculto
+  - El `ModalBody` ahora aplica `ui-rounded-b-lg` cuando `hideFooter={true}` para mantener el mismo border-radius que tendría el footer
+  - El `ModalFooter` también tiene `ui-rounded-b-lg` para mantener consistencia visual
+  - Integración de `hideFooter` en el contexto del Modal para que esté disponible en todos los componentes hijos
+  - Mejora en la experiencia visual cuando el footer está oculto, manteniendo el border-radius correcto en la parte inferior del modal
+
+## [1.2.12] - 2025-01-16
+
+### Added
+- **Modal - Prop hideFooter**: Nueva prop `hideFooter` que permite forzar que no aparezca el footer del modal, sin importar qué otras props estén activas
+  - La prop `hideFooter` tiene prioridad sobre todas las demás props relacionadas con el footer
+  - Útil cuando se necesita ocultar el footer incluso si hay botones de cancelar o éxito configurados
+  - Nueva story `HideFooter` que demuestra el uso de esta funcionalidad
+- **Badge - Color Personalizado**: Nueva funcionalidad para la prop `customColor` que permite usar un color hexadecimal o un color fijo que sobrescribe el color por defecto
+  - La prop `customColor` se aplica mediante estilos inline que tienen mayor especificidad que las clases CSS
+  - Soporte para colores hexadecimales (`#FF0000`, `#0066FF`, etc.), colores RGBA (`rgba(255, 99, 71, 0.3)`), y nombres de color CSS
+  - En theme `solid`: usa el color personalizado como `backgroundColor` y el texto en blanco
+  - En theme `soft`: usa el color personalizado como `backgroundColor` y como `color` de texto
+  - Si `stroke` está activo, también aplica el color personalizado al `borderColor`
+  - Nueva story `CustomColor` que demuestra el uso de colores personalizados en diferentes configuraciones
+- **Icon - Padding mejorado**: Mejora en la prop `padding` del componente Icon
+  - Agregados nuevos valores de padding: `'xl'` y `'2xl'` para mayor flexibilidad de layout
+  - Actualizada la lógica de manejo de background para aplicar padding condicionalmente según la presencia de un fondo
+  - Mejora en la consistencia del espaciado interno del icono
+- **Popup - Prop stopPropagationList**: Nueva prop para controlar la propagación de eventos
+  - Prop `stopPropagationList` que controla si se detiene la propagación de eventos de click dentro del popup (por defecto `true`)
+  - Permite que los clicks en items de lista dentro del popup no se propaguen al contenedor padre
+  - Útil cuando el popup contiene listas y se necesita evitar que los clicks en items activen eventos del contenedor
+- **List/ListItem - Hover rojo mejorado**: Mejora en el estado hover para items de lista con color rojo
+  - Cambio en el hover de items con `color="red"` de `hover:ui-bg-surface-danger hover:ui-text-danger` a `hover:ui-bg-fill-danger-hover hover:ui-text-on-color`
+  - Mejora la experiencia visual para acciones destructivas o de advertencia mostrando fondo rojo con texto blanco en hover
+  - Eliminado el gap vertical (`gap-y-8`) de la lista para mejor control del espaciado
+- **Filters - Props theme y color**: Nuevas props para personalización del componente Filters
+  - Agregadas props `theme` (por defecto `'solid'`) y `color` (por defecto `'secondary'`) al componente Filters
+  - La prop `color` se pasa automáticamente al componente Popup interno para mantener consistencia visual
+  - Permite mayor personalización del aspecto visual del popup de filtros
+
 ## [1.2.11] - 2025-01-16
 
 ### Added