Componente

Introducción

Este componente renderizará un card de perfil de usuario. La misma se compone de dos partes, una de renderizado y otra de logica ir-profile-card-bone, esta ultima será la encargada de el manejo de los datos así sean ingresados por propiedades o por consulta a la capa de datos.

Uso

El componente espera recibir un arreglo de items con la siguiente estructura y un type para identificar el componente a renderizar, desde la capa de datos.

  {
    "img": "https://cdn.vuetifyjs.com/images/cards/cooking.png",
    "title": "Profesión",
    "name": "Nombre Ejemplo",
    "subtitle": "Subtítulo 2"
  }

Ejemplo

Propiedad	Tipo	Default	Requerido	Descripción
img	String	``	false	Imagen que se mostrará en la parte superior del card.
title	String	``	false	Texto que se mostrará debajo de la imagen.
name	String	``	false	Nombre de la persona, se mostrará en la parte media del card.
subtitle	String	``	false	Texto que se mostrará en la parte inferior del card.
title_classes	String	text-lg-h4	false	Classes de vuetify que se le aplicarán al título. Las clases disponibles se detallan aquí.
name_classes	String	text-md-h5	false	Classes de vuetify que se le aplicarán al nombre. Las clases disponibles se detallan aquí.
subtitle_classes	String	text-xs-h6	false	Classes de vuetify que se le aplicarán al subtítulo. Las clases disponibles se detallan aquí.
other-card-props	Object	{ elevation: "2" }	false	Propiedades que se le aplicarán a la tarjeta contenedora. Las propiedades disponibles se detallan aquí.

Código fuente

<template>
  <ir-profile-card-bone
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div
      slot-scope="{
        title,
        img,
        name,
        subtitle,
        height,
        title_classes,
        name_classes,
        subtitle_classes,
        cardProps
      }"
      v-on="$listeners"
    >
      <v-card v-bind="cardProps">
        <div
          v-if="img"
          :style="getImageDivStyle(height, img)"
        />
        <v-card-title
          v-if="title"
          :class="title_classes"
          style="padding-bottom: 8px"
        >
          {{ title }}
        </v-card-title>
        <v-card-text
          v-if="name"
          :class="name_classes"
          style="padding-bottom: 0px"
        >
          {{ name }}
        </v-card-text>
        <v-card-subtitle
          v-if="subtitle"
          :class="subtitle_classes"
          style="padding-top: 8px"
        >
          {{ subtitle }}
        </v-card-subtitle>
      </v-card>
    </div>
  </ir-profile-card-bone>
</template>

<script>
import { profileCardComponentName } from '../../constants'
import IrProfileCardBone from './IrProfileCardBone.vue'
export default {
  name: profileCardComponentName,
  components: {
    IrProfileCardBone
  },
  inheritAttrs: false,
  setup() {
    const heightValue = (height) => {
      return typeof height === 'number' ? `${height}px` : height
    }

    const getImageDivStyle = (height, img) => {
      return `height: ${heightValue(
        height
      )}; background-image: URL(${img}); background-size: contain; background-position: center;`
    }

    return {
      getImageDivStyle
    }
  }
}
</script>

<style scoped></style>