Componente

Introducción

Genera un card al cual pueden enviarse componentes para renderizar dentro.

Ejemplo

Uso

El componente espera recibir en la entrada de la capa de datos un arreglo con la siguiente estructura.

  [
    {
      "type": "IrTextField",
      "props": {
        "key": "/_0005",
        "readonly": false,
        "label": "Input text de ejemplo",
        "visible": true,
        "width": 2,
        "vertical-height": "center"
        ... //Demás propiedades del campo a mostrar
      }
    },
    {
      "type": "IrWysiwyg",
      "props": {
        "key": "/0006",
        "readonly": true,
        "label": "Wysiwyg Ejemplo",
        "visible": true,
        "width": 2,
        "vertical-height": "center"
        ... //Demás propiedades del campo a mostrar
      }
    },
    ...
  ]

Propiedades

Propiedad	Tipo	Default	Descripción
campos	Array		Array de componentes a renderizar en el card. Esta propiedad será reemplazada por la respuesta de la base de datos en caso de que se defina la propiedad fcn. En todos los campos podrán establecerse algunas propiedades comunes para todos al estar dentro de un card. Una de ellas será width, en la cual se determinará el ancho del campo en cantidad de columnas. La estructura del card se separará en columnas iguales, la cantidad total de estas estará dado por el width de mayor valor que haya en todos los campos. Otra será visible de tipo Boolean, esta determina si el campo será visible o no, de no serlo, no será tenido en cuenta para la ocupación de columnas`.
width	Integer		Width es una subpropiedad de campos, está sirve para determinar el ancho en columnas que va a tener un campo. La estructura del card se separará en columnas, la cantidad total de estas estará dado por el width de mayor valor que haya en todos los campos. Se tomará por default en caso de no existir width definido por breakpoint en el breakpoint actual.
width-[breakpoint]	Integer		Width es una subpropiedad de campos, está sirve para determinar el ancho en columnas que va a tener un campo. La estructura del formulario se separará en columnas, la cantidad total de estas estará dado por el width-[breakpoint] de mayor valor que haya en todos los campos. La variable breakpoint puede variar entre los valores xs, sm, md, lg y xl. Estos breakpoints se encuentran definidos aquí. Esta propiedad sirve para definir el ancho por breakpoint de pantalla, para mejorar la adaptación mobile. Seleccionando un ancho distinto por cada tipo de pantalla. En los casos xs y sm se tomara por default el máximo ancho para los campos que no tengan el width definido para ese breakpoint.
campos-fcn	String		Al estar definida esta propiedad, el componente realizará una consulta a la base de datos, que deberá retornar el valor de la propiedad campos. El valor de la propiedad campos será reemplazada por la respuesta de la base de datos. Se enviará como parámetros a la función lo definido en la propiedad args La definición completa de la obtención de los campos se epecifica aquí.
args-campos-fcn	Array	[]	Array de argumentos que serán enviados a la base de datos en caso de estar definida la propiedad fcn
card-attrs	Object	{}	Objeto con los atributos que se deseen pasar al objeto card. Algunas propiedades especificas del componente pueden verse en Aqui, pero también pueden enviarse atributos html como por ejemplo class y style.

Código fuente

<template>
  <ir-card-bone
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div
      slot-scope="{ campos, cardAttrs, idResolver }"
      class="ir-card"
      v-on="$listeners"
    >
      <v-card
        :ref="irDataCardRef"
        class="d-flex"
        v-bind="cardAttrs"
      >
        <ir-grid :campos="campos">
          <template
            v-for="(campo, i) in campos"
            :slot="['ir-grid-cell-' + i]"
          >
            <ir-component-resolver
              :key="'card-component-resolver' + i"
              class="ir-grid-cell-component"
              :json_resolver="{
                id_usuario: $iclstore.state.id_usuario,
                id_resolver: idResolver
              }"
              :dev_components="[campo]"
            />
          </template>
        </ir-grid>
      </v-card>
    </div>
  </ir-card-bone>
</template>

<script>
import { cardComponentName, dataCardComponentName } from '../../constants'
import IrCardBone from './IrCardBone.vue'
export default {
  name: cardComponentName,
  components: {
    IrCardBone
  },
  inheritAttrs: false,
  setup() {
    const irDataCardRef = dataCardComponentName
    return {
      irDataCardRef
    }
  }
}
</script>

<style lang="scss" scoped>
.ir-grid-cell-component {
  width: 100%;
}
</style>