Componente

Introducción

Este componente renderizará un card con información. La misma se compone de dos partes, una de renderizado y otra de logica ir-data-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.

  {
    "title": "1",
    "value": "180",
    "subtitle": "Subtítulo 1"
  }

Ejemplo

Propiedad	Tipo	Default	Requerido	Descripción
title	String	``	false	Texto que se mostrará en la parte superior del card.
value	undefined	``	false	valor que se mostrará en la parte media del card.
subtitle	String	``	false	Texto que se mostrará en la parte inferior del card.
title_classes	String	subheading	false	Clases que se le aplicarán al título. Las clases disponibles para modificar el estilo del texto se detallan aquí. Las clases disponibles para modificar el color de fondo del texto se detallan aquí.
value_classes	String	``	false	Clases que se le aplicarán al value. Las clases disponibles para modificar el estilo del texto se detallan aquí. Las clases disponibles para modificar el color de fondo del texto se detallan aquí.
subtitle_classes	String	``	false	Clases que se le aplicarán al subtítulo. Las clases disponibles para modificar el estilo del texto se detallan aquí. Las clases disponibles para modificar el color de fondo del texto se detallan aquí.
background_color	String	#ffffff	false	Código del color que se le aplicará al fondo de la tarjeta.
icon	String	``	false	Determina el ícono que se mostrará dentro de la tarjeta.
iconAttrs	Object	{}	false	Determina las propiedades que se le aplicarán al ícono. Las propiedades disponibles para el ícono se detallan aquí.
text-align	String	right	false	Alineación del texto dentro de la tarjeta. Los posibles valores son: right, center y left.
flex-direction	String	row	false	Alineación de los elementos dentro de la tarjeta. Los posibles valores son: row, row-reverse, column y column-reverse. row para que se ubiquen en una linea el ícono y el resto de valores. row-reverse para que se ubiquen también en línea pero invirtiendo el orden, quedando último el ícono. column para que se ubiquen en una columna, primero el ícono. column-reverse para que se ubiquen también en columna pero invirtiendo el orden, quedando último el ícono.
upperIcon	String	undefined	false	Determina el ícono que se mostrará en la parte superior de la tarjeta.
upperIconAttrs	Object	{}	false	Determina las propiedades que se le aplicarán al ícono. Las propiedades disponibles para el ícono se detallan aquí.
upperImg	String	undefined	false	Determina el src de la imagen que se mostrará en la parte superior de la tarjeta.
upperImgAttrs	Object	{}	false	Determina las propiedades que se le aplicarán a la imagen. Las propiedades disponibles para las imagenes se detallan aquí.
upperTitle	String	undefined	false	Determina el título que se mostrará en la parte superior de la tarjeta.
upperTitleAttrs	Object	{}	false	Determina los atributos que se le pueden pasar al título. Puede contener el atributo style.
cardStyle	Object | String	undefined	false	Determina el estilo que se le puede aplicar al IrDataCard.
backgroundOpacity	Number	1	false	Determina la opacidad del color del fondo del IrDataCard.
containerStyle	Object	undefined	false	Determina el estilo que se le puede aplicar al contenedor interior del IrDataCard.

Código fuente

<template>
  <ir-data-card-bone v-bind="$attrs" v-on="$listeners">
    <div slot-scope="{ title, value, subtitle, isPropSet }" v-on="$listeners" class="ir-card">
      <v-card
        :ref="irDataCardRef"
        class="d-flex ir-card"
        :style="cardStyle"
        :color="addOpacityToColorLocal(background_color, (backgroundOpacity ? backgroundOpacity : 1))"
        v-bind="getFilteredProps"
      >
        <div
          class="d-flex align-center ir-card__img-container"
        >
          <v-icon
            v-if="isPropSet(upperIcon)"
            v-bind="upperIconAttrs"
          >
            {{ upperIcon }}
          </v-icon>
          <img
            v-if="isPropSet(upperImg)"
            v-bind="upperImgAttrs"
            :src="upperImg"
            class="ir-card__img"
          />
          <v-card-text
            v-if="isPropSet(upperTitle)"
            class="my-0 py-0 px-0"
            v-bind="upperTitleAttrs"
          >
            {{ upperTitle }}
          </v-card-text>
        </div>
        <div
          :style="getContainerStyle"
          :class="getContainerClasses"
          class="d-flex align-start ir-card__container"
        >
          <v-icon
            v-if="isPropSet(icon)"
            v-bind="iconAttrs"
          >
            {{ icon }}
          </v-icon>
          <div>
            <v-card-text
              v-if="isPropSet(title)"
              :class="title_classes + (icon ? ' px-0 pt-0 pb-1' : '')"
              :style="icon ? 'text-align: ' + textAlign + ';' : ''"
              class="pb-2"
            >
              {{ title }}
            </v-card-text>
            <v-card-text
              v-if="isPropSet(value)"
              :class="value_classes + (icon ? ' px-0 pt-0 pb-1' : '')"
              :style="icon ? 'text-align: ' + textAlign + ';' : ''"
            >
              {{ value }}
            </v-card-text>
            <v-card-subtitle
              v-if="isPropSet(subtitle)"
              :class="subtitle_classes"
              :style="icon ? 'padding: 0px;' : ''"
            >
              {{ subtitle }}
            </v-card-subtitle>
          </div>
        </div>
      </v-card>
    </div>
  </ir-data-card-bone>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { addOpacityToColor } from '../../helpers/manageColorStyles'
import { dataCardComponentName } from '../../constants'
import IrDataCardBone from './IrDataCardBone.vue'
import { filterProps } from '../../helpers/filterProps'
export default {
  name: dataCardComponentName,
  components: {
    IrDataCardBone
  },
  inheritAttrs: false,
  props: {
    upperIcon: {
      type: String,
      required: false
    },
    upperImgAttrs: {
      type: Object,
      default: () => ({})
    },
    upperImg: {
      type: String,
      required: false
    },
    upperIconAttrs: {
      type: Object,
      default: () => ({})
    },
    upperTitleAttrs: {
      type: Object,
      default: () => ({})
    },
    upperTitle: {
      type: String,
      required: false
    },
    title_classes: {
      type: String,
      default: 'font-weight-bold subtitle-1'
    },
    cardStyle: {
      type: Object,
      required: false
    },
    value_classes: {
      type: String,
      default: 'font-weight-bold text-h4'
    },
    subtitle_classes: {
      type: String,
      default: 'subtitle-1'
    },
    background_color: {
      type: String,
      default: '#ffffff'
    },
    backgroundOpacity: {
      type: Number,
      required: false
    },
    containerStyle: {
      type: Object,
      required: false
    },
    icon: {
      type: String,
      required: false
    },
    textAlign: {
      type: String,
      default: 'right'
    },
    flexDirection: {
      type: String,
      default: 'row'
    },
    iconAttrs: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { attrs }) {
    const irDataCardRef = ref(null)
    const otherProps = ref({})

    const addOpacityToColorLocal = (color, opacity) => {
      return addOpacityToColor(color, opacity)
    }

    const getFilteredProps = computed(() => {
      return filterProps(irDataCardRef.value, otherProps.value, ['data-cy'])
    })

    const getContainerStyle = computed(() => {
      return props.containerStyle ? { ...props.containerStyle } : {}
    })

    const getContainerClasses = computed(() => {
      let classes = ''
      if (props.icon) classes = 'd-flex px-4 py-4 justify-space-between'
      if (props.flexDirection) classes += ' flex-' + props.flexDirection
      return classes
    })

    onMounted(() => {
      let aux = { ...attrs }
      delete aux.title
      delete aux.value
      delete aux.subtitle
      otherProps.value = aux
    })

    return {
      irDataCardRef,
      addOpacityToColorLocal,
      getFilteredProps,
      getContainerStyle,
      getContainerClasses
    }
  }
}
</script>

<style lang="scss" scoped>
.ir-card {
  height: 100% !important;
  &__container {
    width: 100%;
  }
  &__img-container {
    gap: 10px;
    .ir-card__img {
      width: auto;
    }
  }
}
</style>