Componente

Introducción

Este componente renderizará un avatar. El mismo se compone de dos partes, una de renderizado y otra de logica ir-avatar-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 objeto con la siguiente estructura desde la capa de datos.

  {
    "img": "https://cdn.vuetifyjs.com/images/john.jpg",
    "size": "60"
  }

Ejemplo

Propiedades

Propiedad	Tipo	Default	Requerido	Descripción
img	String	''	false	Imagen que se renderizará dentro del componente.
size	String || Number	'48'	false	Tamaño del componente.
icon	String	''	false	ícono que aparecerá dentro del componente. Los íconos deben ser de Material Design Icons. Deben contener el prefijo mdi-. Por ejemplo: mdi-star.
text	String	''	false	Texto que aparecerá dentro del componente en caso de no haber imagen o ícono.
color	String	'primary'	false	Color del componente. Se mostrará en caso de que no contenga una imagen.
center	Boolean	false	false	Determina si el avatar se va a centrar horizontalmente dentro del espacio que ocupe su contenedor.

Código fuente

<template>
  <ir-avatar-bone
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template #default="{ img, size, color, text, icon, iconAttrs }">
      <div :class="center ? 'd-flex justify-center align-center' : ''">
        <v-avatar
          v-bind="computedProps"
          :size="size"
          :color="color"
        >
          <img
            v-if="img"
            :src="img"
            alt="avatar-img"
          >
          <v-icon
            v-else-if="icon"
            v-bind="iconAttrs"
            dark
          >
            {{ icon }}
          </v-icon>
          <span
            v-else-if="text"
            :class="getTextColor(color)"
          >
            {{ text }}
          </span>
        </v-avatar>
      </div>
    </template>
  </ir-avatar-bone>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { avatarComponentName } from '../../constants'
import IrAvatarBone from './IrAvatarBone.vue'
import { getColor } from './IrAvatar.js'
export default {
  name: avatarComponentName,
  components: {
    IrAvatarBone
  },
  props: {
    center: {
      type: Boolean,
      default: false
    }
  },
  setup(_, { attrs }) {
    const getTextColor = (color) => getColor(color)

    const otherProps = ref({})

    const computedProps = computed(() => {
      let aux = { ...otherProps.value, ...attrs }
      delete aux.size
      delete aux.width
      delete aux.text
      return aux
    })

    onMounted(() => {
      let aux = { ...attrs }
      Object.assign(otherProps.value, aux)
    })
    return {
      getTextColor,
      otherProps,
      computedProps
    }
  }
}
</script>

<style scoped></style>