Hiperbaric UI Kit

Appearance

List ​

Tabla genérica configurable. Se le pasan items (filas, objetos arbitrarios) y columns (definición de cada columna: qué propiedad muestra, título, si es un badge y su color, formateo, ellipsis, ancho, alineación). La tabla no parte líneas: si no entra, hace scroll horizontal; las columnas con ellipsis se recortan y muestran el texto completo en tooltip al hacer hover.

Alarmas (badges) ​

CódigoDescripciónHoraFechaEstadoObservaciones
AL0001-G00Seta de emergencia accionada. Texto largo para ver el ellipsis y el tooltip07:15:0210/03/2026ACTIVAVerificar motivo de activación
AV0002-G20Barrera de entrada cortada08:02:4010/03/2026PROCESADAEnviado a técnico para ok
EV0033-C01Ciclo iniciado09:44:0310/03/2026ONOperador: J. Pérez
AL0114-P03Presión fuera de rango10:05:1910/03/2026ACTIVARevisión programada
AW0051-T12Temperatura elevada10:22:4710/03/2026PROCESADAEn seguimiento
EV0090-C09Ciclo finalizado11:03:5510/03/2026OFFDuración 42 min
AL0301-V02Válvula sin respuesta11:47:1210/03/2026ACTIVAReintento automático

Estado de máquinas (otra paleta) ​

Los colores de badge no son exclusivos de alarmas: cualquier Status sirve.

MáquinaModoEstado
HIP-01AutomáticoEn marcha
HIP-02ManualParada
HIP-03AutomáticoMantenimiento
HIP-04AutomáticoAlarma

Métricas numéricas (alineación + formato) ​

Columnas con align: 'right' y format para unidades y porcentajes.

SensorValorOEE
Presión vasija6000 bar92.4 %
Temperatura TT60185 °C88.1 %
Caudal N21250 L/min74.9 %

Lotes (fecha, moneda y ellipsis) ​

LoteProductoFechaImporte
L-1001Zumo prensado en frío — pack familiar 1L10/03/202612.450,50 €
L-1002Guacamole HPP 250g10/03/20268990,00 €
L-1003Fiambre loncheado 500g — línea premium10/03/202620.375,90 €

Slot actions + emit row-click ​

Slot escoped actions: recibe { row } → iconos de acción por fila.
Emit row-click: se dispara al hacer click en cualquier fila, devuelve la fila completa.
Prop clickable: activa cursor pointer + hover cuando se escucha @row-click.

Último click: —

CódigoDescripciónHoraFechaEstadoObservaciones
AL0001-G00Seta de emergencia accionada. Texto largo para ver el ellipsis y el tooltip07:15:0210/03/2026ACTIVAVerificar motivo de activación
AV0002-G20Barrera de entrada cortada08:02:4010/03/2026PROCESADAEnviado a técnico para ok
EV0033-C01Ciclo iniciado09:44:0310/03/2026ONOperador: J. Pérez
AL0114-P03Presión fuera de rango10:05:1910/03/2026ACTIVARevisión programada
AW0051-T12Temperatura elevada10:22:4710/03/2026PROCESADAEn seguimiento
EV0090-C09Ciclo finalizado11:03:5510/03/2026OFFDuración 42 min
AL0301-V02Válvula sin respuesta11:47:1210/03/2026ACTIVAReintento automático

Sin badges ​

NombreRolActivo
Ana RuizOperadoraSí
Luis GómezMantenimientoNo
María PérezSupervisoraSí

Estado vacío ​

Sin items, muestra una única fila con el mensaje de sin datos (personalizable vía emptyMessage).

SensorValorOEE
Sin datos

Tipos ​

ts
type ListRow = Record<string, unknown>

interface Column<T = ListRow> {
  key: string // propiedad de la fila a mostrar
  title: string // título de la columna
  badge?: boolean // renderiza el valor como StatusBadge
  status?: (row: T) => Status // color del badge (si badge). Default: 'info'
  format?: (value, row: T) => string | number // transforma el valor (ej: timestamp → hora)
  ellipsis?: boolean // recorta en una línea + tooltip
  minWidth?: string // ancho mínimo CSS (ej: '7rem')
  maxWidth?: string // ancho máximo CSS (ej: '10rem')
  align?: 'left' | 'center' | 'right' // alineación de la celda
}

Props ​

PropTipoDescripción
itemsListRow[]Filas a mostrar
columnsColumn[]Definición de columnas
emptyMessagestringMensaje cuando no hay filas. Default: 'Sin datos'
clickablebooleanActiva cursor pointer + hover en filas. Usar cuando se escucha @row-click

Slots ​

SlotPropsDescripción
actions{ row: ListRow }Iconos o botones al final de cada fila. Añade columna extra sin cabecera. Activa cursor pointer automáticamente.

Emits ​

EventoPayloadCuándo
row-clickrow: ListRowClick en cualquier fila. Usar con prop clickable para feedback visual.