Comportamientos

Los comportamientos son un grupo de funcionalidades que pueden agregarse a los controles para realizar acciones. Estos serán definidos en cada componente del tipo 'campo' en los cuales sean compatibles.

Ejemplos

Uso

Los comportamientos se definirán con una propiedad comportamientos de tipo Array, que contendrá un listado de objetos, donde cada uno define un componente de comportamiento.

Los comportamientos son compatibles con la mayoría de componentes de tipo 'campo' (es decir que son inputs de datos). Se detalla la compatibilidad en la siguiente tabla:

Componente	compatible
IrCheckbox	Si
IrGpsMarker	Si
IrLink	Si
IrNumericField	Si
IrPassword	Si
IrSelect	Si
IrTextarea	Si
IrTextField	Si
IrTitulo	Si
IrWysiwyg	Si
IrDatePicker	Si

Propiedades

Cada comportamiento que se defina dentro de la propiedad comportamientos deberá contener determinadas propiedades que definirán su funcionamiento. Estas son:

Propiedad	Tipo	Default	Types compatibles	Descripción
component	String		Todos	Nombre de un componente de ICL o Vuetify que se renderizará y será el control útil para el usuario para realizar la acción del comportamiento. Por ejemplo v-btn o v-icon
position	String		Todos	Posición donde se renderizará el comportamiento con respecto al campo. Cada tipo de campo contiene posiciones compatibles distintas y especificas. Se listarán en otra sección.
visible	Boolean	true	Todos	determina si se renderizará o no el comportamiento.
type	String		Todos	Nombre de uno de los tipos de acción que son permitidos. Detallados en otra sección.
icon	String		Todos	Define un icono que se agregará al contenido del comportamiento. En caso de que el comportamiento tenga un component que permita texto, el icono se agregara antes de el texto definido en component_text. Si es un comportamiento con tipo v-icon se definirá el icono a mostrar con la prop icon y la prop component_text quedará sin efecto
component_text	String		Todos	En caso de que el comportamiento tenga un component diferente a v-icon y permita contenido de texto, se definirá mediante esta propiedad.
tooltip_text	String		Todos	Texto que se mostrará en tooltip al hacer mouse hover en el componente del comportamiento
attrs	Object		Todos	Objeto de atributos que se pasarán al componente del comportamiento para modificar su funcionamiento o aspecto. Por ejemplo { class: "white--text", //clase que seteará el texto en color blanco. disabled: true //desabilita el componente del comportamiento. }
id_resolver	String		modal y navigator	id_resolver que se renderizará en la pantalla navegada o abierta en modal. El contenido del campo se reemplazará en lugar de la cadena ## que contenga el id_resolver. Por ejemplo, el valor del campo es "Juan" y la propiedad id_resolver tiene el valor "/usuario_##", el id_resolver renderizado al ejecutar el comportamiento será /usuario_Juan
dialogAttrs	Object		modal	Atributos que se aplicaran al v-dialog. Por ejemplo {persistent: true}
fcn_click	String		fcn_executer	Función de DB que se ejecutará al hacer click en el comportamiento. Se enviarán como argumentos de la función los definidos en la prop args_fcn_click y también se enviará el valor del campo con la key field_value entre los argumentos.
args_fcn_click	Object		fcn_executer	Objeto con los argumentos que se enviarán a la función definida en fcn_click al ejecutarse el comportamiento.
confirmation	String		fcn_executer, modal, navigator	Define el mensaje que se mostrará en una ventana de confirmación antes de ejecutar efectivamente la acción del comportamiento. La ventana de confirmación se abrirá al clickear el comportamiento solo en el caso de que confirmation está definido
titulo	String		modal	Define el título que se mostrará en la ventana modal que se abrirá al hacer click en el comportamiento
tooltip_attrs	Object		Todos	Define los atributos que se pasarán al v-tooltip aplicado al comportamiento, pueden verse las propiedades aplicables en Vuetify Por ejemplo se podrá determinar el ancho máximo enviando el siguiente valor de propiedad: { max-width: '600px' }
modify_value	Boolean		fcn_executer	Al estar seteada en true, determina que el campo tomará como valor, la respuesta de la función de DB que se ejecute en el comportamiento. Para esto la respuesta deberá tener un tipo válido para la propiedad value del componente del campo y diferente de Object, esto será validado y en caso contrario el campo no tomará el valor, logueando un error en BD. Si la función de BD retorna un Object, esta propiedad quedará sin efecto, pero se podrá modificar el valor del campo, si dentro de el object de respuesta se envía el key value. El valor del campo será modificado por el valor determinado en dicha key. Este comportamiento no es funcional en el componente IrTitulo
api	Object		api_linked	Determina las configuraciones de las consultas que se harán cuando se cambie el valor. la estructura deberá ser la siguiente: { "config": { "sync": false }, "request": [ { "method": "POST", "url": "https://example.com/example", "data": { "data1": "example" } } ] } config define las configuraciones posibles de las consultas que se realizarán. Es posible configurar el mensaje a mostrar cuando las consultas están en proceso con el key loading_message (el mensaje se mostrará en el toast, eliminando cualquier notificación previa que se esté mostrando o pendiente a mostrarse) y determinar si las consultas se realizan sincrónicamente o asincrónicamente configurando la propiedad sync en true o false. Dentro de la propiedad requests se determinarán los datos necesarios para hacer consultas, es decir, un apiObj.

Positions

A continuación se muestran las posiciones válidas para cada componente, que son valores válidos para la propiedad position de los componentes.

Position	Descripción	Componentes compatibles
append	Dentro de los "bordes" del componente en caso de que los tenga, después del campo. En caso de que no tenga bordes, inmediatamente después del componente	IrTextfield, IrTextarea, IrWysiwyg, IrCheckbox, IrGpsMarker, IrLink, IrNumericField, IrPassword, IrSelect, IrTitulo, IrRepeater, IrDatePicker
prepend	Fuera de los "bordes" del componente en caso de que los tenga, antes del campo. En caso de que no tenga bordes, inmediatamente antes del componente	IrTextfield, IrTextarea, IrWysiwyg, IrCheckbox, IrGpsMarker, IrLink, IrNumericField, IrPassword, IrSelect, IrTitulo, IrRepeater
append-outer	Fuera de los "bordes" del componente en caso de que los tenga, después del campo.	IrTextfield, IrTextarea, IrGpsMarker, IrLink, IrNumericField, IrPassword, IrSelect, IrDatePicker
label	En lugar del label del campo. Lo reemplazará.	IrTextfield, IrTextarea, IrCheckbox, IrGpsMarker, IrLink, IrNumericField, IrPassword, IrSelect, IrDatePicker
prepend-inner	Dentro de los "bordes" del componente en caso de que los tenga, antes del campo.	IrTextfield, IrTextarea, IrGpsMarker, IrLink, IrNumericField, IrPassword, IrSelect, IrDatePicker
message	En lugar del hint del campo, debe estar definido el hint y se mostrará en los mismo casos que se mostraría el hint (focus, persistent-hint, error, etc.).	IrCheckbox
`item`	En desplegable de items, antes de cada item	IrSelect
prepend-item	En desplegable de items, antes del primer item	IrSelect
no-data	En desplegable de items, cuando no haya items	IrSelect
selection	En el campo, en lugar del valor, al haber seleccionado un item	IrSelect
counter	En el lugar donde se muestra el counter, en caso de estar activado	IrSelect, IrTextarea
append-end	En el contenedor del componente, alineado al final.	IrTitulo

Types

Hay diferentes tipos de comportamientos, cada uno cumple una función distinta. Pueden verse en el siguiente listado.

Type	Descripción
fcn_executer	Ejecutará una funcion en DB
navigator	Navegará a una nueva página en el navegador
modal	Renderizará un modal con un id_resolver distinto al actual.
tooltip	Generará un tooltip con texto que se mostrará al hacer mouse hover sobre el componente del comportamiento.
api_linked	Hará consultas a APIs especificadas y luego se refrescará el formulario que lo contiene.

Respuesta fcn_executer

La respuesta esperada para la función ejecutada en un fcn_executer puede ser de tipo Array, String, Number o Boolean en caso de usarse la propiedad modify_value. En caso contrario la respuesta debe tener la estructura similar a la detallada en IrForm