CardList (Toolbox Quasar component)

Componente para listar items del tipo clave valor en una tarjeta (card) diferenciados por un separador.

Installation

Install fwk-q-cardlist with npm

  npm install fwk-q-cardlist

Usage/Examples

Se debe definir un objeto donde las keys hacen referencia a los títulos y los values a la descripción de las mismas. Los values pueden llevar tanto strings como hacer referencia a variables de la app.

<template>
    <q-page>
        <CardList :objectToMap="cardResumenTemplate" />
    </q-page>
</template>

import CardList from 'fwk-q-cardlist'

const cardResumenTemplate = {
    'Número de OT': 'ot',
    'Tipo de OT': 'tipoOt',
    'Dirección ': 'domicilio',
    'Fecha y hora': 'agendaOt',
    'Parque instalado': 'SI'
}

InputListFull

CONSIDERACIONES A TENER EN CUENTA PARA UTILIZAR ESTE COMPONENTE:

#data: tiene el siguiente modelo a cumplir
    {
        label: 'Selecion de elementos',
        value: '',
        dirty: false,
        options: [{key: 'VALOR', value: 'Mostrar en pantalla'}]
    }

    Nota: La propiedad 'value', nos permite obtener coincidencias con respecto a las 'keys' de los objetos del "Options". Es decir, que si el objeto que le pasamos a nuestro componente fuese:
    {
        label: 'Selecion de elementos',
        value: '2',
        dirty: false,
        options: [
            {key: '1', value: 'Mostrar Valor 1'},
            {key: '2', value: 'Mostrar Valor 2'}
        ]
    }
    En nuestro componente select, apareceria por defecto, el valor de "Mostrar Valor 2"

# Si dentro del 'options' de Data, tiene menos de 4 elementos, se desactivara el AutoComplete.

# optVal y optLbl:
    * optVal: Le podemos especificar la propiedad que tomara como clave valor dentro del "data.options"
    por ejem.: Si tenemos el options: " [{key: 'VALOR', value: 'Mostrar en pantalla label'}] ", el valor de "optVal", es 'key'

    * optLbl: Le podremos especificar la propiedad que se mostrara como mensaje dentro del Select al elegir un  elemento. Si tenemos el options: " [{key: 'VALOR', value: 'Mostrar en pantalla label'}] ", el valor de "optLbl", es 'value'

    Nota: Si deseamos modificar el objeto de "data.options", deberemos hacer uso del 'optVal' y 'optLbl'. Caso contrario, ya viene por defecto "optVal: 'key' " y "optLbl: 'value' "
    Por ejemplo:
        options: [{value: 'VALOR', descripiton: 'Mostrar en pantalla label'}]

    Las propiedades en cuestion
        optVal: 'value';
        optLbl: 'description';

# multipleOptions: Permite seleccionar varios elementos del Select

# noLabel: Si lo asignamos en "true" nuestro Select no tendra disponible el placeholder y
                  viceversa.

#  noDirty y modColor:
    * noDirty: Si lo asignamos en "false" permite visualizar un efecto cuando el Select haya cambiado de valor y viceversa.

    * modColor: Es funcional cuando declaramos a ":noDirty='false'" y nos permite declarar el color con el que se visualizara los cambios del Select.

Emite un evento llamado "change". Si la propiedad "multipleOptions" se encuentra en false, nos retornara un obj por defecto:

 {dirty: true, value: '242'}  // Hace referencia a la Key del obj seleccionado
Caso de que "multipleOptions", este en true, nos retortara un obj:
 {dirty: true, value: ['242', '100']}  // Hace referencia a las Key de los obj seleccionados

# rulesValidation: Es un arreglo de funciones con validaciones que debera cumplir el Select en cuestion.
Por ejemplo:
const addressValidation = txt => txt.length || 'Debes ingresar una dirección'

Y se pasa de la sig. manera: :rulesValidation="[addressValidation]"