# Componente
# Introducción
El componente "Component resolver" es el componente principal de ICL, ya que da un sentido práctico al principio de funcionamiento de la librería.
El objetivo del Component resolver es renderizar otros componentes, tomando como referencia una entrada desde la capa de datos, es decir, que es el encargado de relacionar dicha capa con la capa de visualización.
Este componente tomará la información de la capa de datos, consultando a la db mediante la función fn_icl_794256_consulta_componentes.
# Uso
El componente espera recibir en la entrada de la capa de datos, un arreglo con la siguiente estructura para el renderizado. Como respuesta de fn_icl_794256_consulta_componentes
[
{
"type": "example-component",
"props": {
... //Propiedades del componente a renderizar
}
},
{
"type": "example-component",
"props": {
...
}
}
]
Donde la propiedad type del objeto define que componente se renderizará en esa posición. A su vez debe ir acompañado de la key props que serán las propiedades inyectadas en el componente definido en type, las cuales determinan la funcionalidad del mismo.
Cada propiedad de los componentes se encuentra documentada en la página individual de cada uno.
# Ejemplo
Respuesta de consulta
Datos del ejemplo
El json puede modificarse en el editor de más abajo para ver el funcionamiento dinámico del componente.
Tenga en cuenta que si usted se encuentra conectado actualmente a una capa de datos personalizada, es posible que el ejemplo no se visualice correctamente, debido a que este ejecutara una función determinada, que es posible que no se encuentre en dicha capa, para un correcto funcionamiento configure la capa de datos en desactivado.Parámetros de la función
Aquí puede editar los parámetros que se enviarán a la función fn_icl_794256_consulta_componentes, con el botón ACTUALIZAR DATOS se realizará nuevamente la consulta de los datos con los parámetros modificados
# Propiedades
| Prop | Type | Default | Descripción |
|---|---|---|---|
| dev_components | Array | Ingreso de datos locales que reemplazaran la conexión a la api tanto para mocks como para db | |
| id_resolver | String | Identificador que se enviará en el objeto de argumentos de la función, si está definido se enviará, si no lo está, se enviará el path de la ruta actual, pero SIEMPRE se enviará un id_resolver | |
| args_components_fcn | Object | {} | Argumentos enviados en la función fn_icl_794256_consulta_componentes. Se agregaran al object de argumentos luego de el id_resolver y el id-usuario |
| id-usuario | Array | 00000000-0000-0000-0000-000000000000 | Id del usuario logueado, que se enviará SIEMPRE en la función fn_icl_794256_consulta_componentes, |
# Código fuente
<template>
<ir-component-resolver-bone v-bind="$attrs">
<div slot-scope="{ components, loading, errored, id_resolver }">
<div
class="list-of-comps"
:style="fullHeight ? 'height: 100%;' : ''"
>
<ir-component-resolver-loader
:class="loading ? 'loader' : ''"
:loading="loading"
/>
<ir-error
v-if="errored"
principal="Error"
:titulo="{
size: 'large',
titulo: 'Disculpe.',
type: 'IrTitulo',
visible: true
}"
descripcion="Something went wrong. The administrator has already been notified of this inconvenience."
/>
<template v-else>
<div
v-for="({ type, props }, i) in components"
:key="i"
:style="fullHeight ? 'height: 100%;' : ''"
>
<component
:is="type"
v-if="typeof props.value !== 'undefined'"
v-bind="props"
v-model="props.value"
:props="props"
:id_resolver="id_resolver"
:is-focused="isFocused"
v-on="inputListeners"
@update-prop="updateProp($event, props)"
/>
<component
:is="type"
v-else
v-bind="props"
:is-focused="isFocused"
:props="props"
:id_resolver="id_resolver"
v-on="inputListeners"
@update-prop="updateProp($event, props)"
/>
</div>
</template>
</div>
</div>
</ir-component-resolver-bone>
</template>
<script>
import { resolverComponentName } from '../../constants'
import IrComponentResolverBone from './IrComponentResolverBone.vue'
import IrError from '../IrError/IrError.vue'
import IrComponentResolverLoader from './IrComponentLoader.vue'
export default {
name: resolverComponentName,
components: {
IrError,
IrComponentResolverBone,
IrComponentResolverLoader
},
inheritAttrs: false,
props: {
fullHeight: {
// Determina si los componentes pueden ocupar el alto máximo disponible
type: Boolean,
required: false
},
isFocused: {
// Determina si el componente está seleccionado
type: Boolean,
required: false
}
},
data() {
return {}
},
computed: {
inputListeners: function () {
//se crea una computada que devuelva todos los eventos posibles para los hijos de IrComponentResolver
var vm = this
return Object.assign(
{},
this.$listeners, //asigna los eventos nativos
{
'close-dialog': (event) => {
//Se el evento close-dialog y se maneja emitiendo nuevamente al padre.
this.$emit('close-dialog', event)
},
'refresh-parent': () => {
//Se el evento refreshParent y se maneja emitiendo nuevamente al padre.
this.$emit('refresh-parent')
},
'refresh': () => {
//Se el evento refreshParent y se maneja emitiendo nuevamente al padre.
this.$emit('refresh')
},
saveDraft: (e) => {
this.$emit('saveDraft', e)
}
}
)
}
},
methods: {
/**
* Modifica una propiedad del componente según se reciba en el evento.
* @async
* @function updateProp
* @param {Event} {prop, value} - Valor emitido por el evento, que contiene en nombre de la propiedad a modificar y el valor que debe tomar
* @param {Object} props - objeto de propiedades del componente
* @returns {void}
*/
updateProp({ prop, value }, props) {
this.$set(props, prop, value)
}
}
}
</script>
<style scoped>
.list-of-comps {
display: flex;
flex-direction: column;
gap: 15px;
}
.loader {
height: 90%;
}
</style>
<style>
/* width */
#icl ::-webkit-scrollbar {
width: 0.55em;
height: 0.55em;
}
/* Track */
#icl ::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 3px;
background-color: white;
}
/* Handle */
#icl ::-webkit-scrollbar-thumb {
background-color: black;
border-radius: 3px;
}
/* Handle on hover */
#icl ::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>