Componente

Introducción

Este componente renderiza un enlace para navegar.

Uso

Es importante recalcar el nombre del componente IrLinkTo a nivel de código, ya que este deberá usarse para llamar al componente para renderizarlo.

Ejemplo

Propiedades

Propiedad	Tipo	Default	Descripción
text	String		Texto a mostrar en el componente
color	String	primary	Define el color que tomará el componente, puede valer un color hexadecimal o un color de tema de vuetify. Por ejemplo: #212121 o primary
icon	String		Si está definido mostrará un icono en el componente, antes del texto.
href	String		URL que si está definida hará el componente clickeable y redirigirá. Si es un link es absoluto (ej: https://iridumrobotics.com.ar) se abrirá una nueva pestaña. Si es un path (ej: /path/navegable) se navega.

Código fuente

<template>
  <ir-link-to-bone
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div
      v-if="text || icon"
      slot-scope="{ text, color, href, icon, iconSize }"
      class="d-flex align-center"
      v-on="$listeners"
    >
      <div @click="navigateTo(href)" class="link__container">
        <v-icon v-if="icon" :style="getLinkStyle(color)" :size="iconSize">{{ icon }}</v-icon>
        <span v-if="text" class="link__span" :style="getLinkStyle(color)">{{ text }}</span>
      </div>
    </div>
  </ir-link-to-bone>
</template>

<script>
import { LinkToComponentName } from '../../../constants'
import IrLinkToBone from './IrLinkToBone.vue'
import { getColorByProp } from '../../../helpers/utils.js'

export default {
  name: LinkToComponentName,
  components: {
    IrLinkToBone
  },
  data() {
    return {
    }
  },
  methods: {
    navigateTo(link){
      if(typeof link !== 'string')
        return
      if(link.includes('https://')){
        window.open(link, '_blank')
      } else {
        this.$iclRouter.push({ path: link })
      }
    },
    getLinkStyle(color){
      let style = {}
      style.color = getColorByProp(color, this.$vuetify, this.$vuetify.theme.themes.fourth)
      return style
    }
  }
}
</script>

<style scoped>
.link__container {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.link__span {
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
  font-size: 14px;
}
</style>