Números y fechas

Los criterios numéricos y de fecha recogen una cantidad (numeric), un día (date), un periodo (date-range), una hora del día (time) o un día de la lista que permite el servidor (filtered-calendar). Debajo están los criterios reales del cliente React de AWE: elige un tipo, cambia sus atributos y el XML de debajo se actualiza. Pruébalos también: son campos reales.

Vista previa en vivo

ClaroOscuro

Controles

Componente

Etiqueta

Texto de ayuda

Icono

∅Sin iconousermailsearchcalendar

Tamaño

Por defectoPequeñoGrande

Unidad

Deslizador

Obligatorio

Solo lectura

XML

<criteria id="demo" component="numeric" label="Field" unit="EUR" />

Atributos

Los controles de arriba escriben estos atributos. La referencia lista todos los atributos, con su tipo y valor por defecto. Atributos en la referencia XSD

Atributo	Control	Valores
component	Componente	numericdatedate-rangetimefiltered-calendar
label	Etiqueta	text
placeholder	Texto de ayuda	text
icon	Icono	lucide:userlucide:maillucide:searchlucide:calendar
size	Tamaño	smlg
unit	Unidad	text
show-slider	Deslizador	true / false
presets	Atajos	text
time-format	Formato de hora	HH:mmHH:mm:sshh:mm ahh:mm:ss a
validation	Obligatorio	true / false
readonly	Solo lectura	true / false

Eventos y acciones

Acción (type)	Qué hace
reset	Vacía el valor del criterio.
restore	Devuelve el criterio a su valor inicial.
validate	Ejecuta la validación del criterio (obligatorio, formatos) y muestra su error.
set-invalid	Marca el criterio como inválido con el mensaje de la acción.
set-valid	Borra el error de validación del criterio.
copy-criterion-value-clipboard	Copia el valor del criterio al portapapeles.

Referencia completa

• Documentación completa de este componente
• Referencia XSD del elemento

Los atributos que comparten todos los criterios (etiqueta, texto de ayuda, icono, tamaño, validación) están en la vista general de criterios. Un date-range envía dos parámetros, id.from e id.to, y sus presets añaden un botón por código que rellena el rango desde hoy. Los días que permite un filtered-calendar vienen de una consulta del servidor (aquí una lista fija de lunes y jueves) y los demás quedan desactivados.

Recetas

Campos habituales, dibujados por los mismos componentes.

Número con deslizador

show-slider añade un deslizador bajo la entrada y number-format fija su rango y su paso.

<criteria id="discount" component="numeric" label="Descuento" show-slider="true"
          number-format="{min: 0, max: 100, step: 5, aSign: ' %', pSign: 's'}" value="20" />

Periodo con atajos

Cada código de presets es un botón: 1M es un mes atrás desde hoy, YTD es lo que va de año y ALL borra las dos fechas.

<criteria id="period" component="date-range" label="Periodo" presets="1M,3M,YTD,ALL" />

Hora con reloj de 12 horas

time-format elige cómo se muestra la hora. El valor que se envía al servidor es siempre una hora de 24 horas.

<criteria id="start" component="time" label="Hora de inicio" time-format="hh:mm a" />

Eventos y acciones

Un criterio no tiene un evento propio al que escuchar: cada cambio de su valor comprueba las dependencias cuyo dependency-element lo nombra, y pulsar Intro en un campo de texto ejecuta el botón submit de su ventana. Las acciones que actúan sobre criterios:

Acción	Descripción
reset	Vacía el valor del criterio
restore	Devuelve el criterio a su valor inicial
validate	Ejecuta la validación del criterio y muestra su error
set-invalid	Marca el criterio como inválido con el mensaje de la acción
set-valid	Borra el error de validación del criterio
copy-criterion-value-clipboard	Copia el valor del criterio al portapapeles

Más

• Vista general de criterios: los atributos que comparten todos los criterios y las demás familias de entradas.
• Documentación completa de los criterios: todos los tipos, atributos, validaciones y ejemplos.
• Referencia XSD del elemento criteria.