Componente

Introducción

El componente Titulo mostrará un texto, tendrá tres tamaños de fuente disponibles.

Uso

Es importante recalcar el nombre del componente IrTitulo a nivel de código, ya que este deberá usarse para llamar al componente para renderizarlo, ya sea individiualmente o en un IrForm.

Ejemplo

Propiedades

Propiedad	Tipo	Default	Requerido	Descripción
titulo	String	-	true	El valor de esta propiedad será el texto que se renderice.
size	String	medium	false	Establece el tamaño de la fuente
title-style	Object	{}	false	Determina el estilo que tendrá el título. El objeto deberá tener keys con nombre de propiedades de CSS y el value de cada una deberá ser el valor de cada propiedad a asignar.
subtitulo	String	-	false	El valor de esta propiedad será el subtítulo que se renderice.
subtitle-style	Object	{}	false	Determina el estilo que tendrá el subtítulo. El objeto deberá tener keys con nombre de propiedades de CSS y el value de cada una deberá ser el valor de cada propiedad a asignar.
visible	Boolean	-	true	Determina si el componente se visualiza o no. Funciona únicamente si el componente se utiliza dentro de la propiedad "campos" de IrForm.
width	Number	-	true	Determina el ancho del componente. Funciona únicamente si el componente se utiliza dentro de la propiedad "campos" de IrForm.

Código fuente

<template>
  <div class="d-flex justify-space-between align-center">
    <div class="d-flex">
      <div
        v-if="hasComportamientos"
        class="d-flex mr-2 align-center"
        style="gap: 10px"
      >
        <template v-for="(comportamiento, i) in comportamientos">
          <ir-comportamiento
            v-if="isShowComportamiento(comportamiento, 'prepend')"
            :key="'comportamientos-titulo-pre-' + i"
            v-bind="comportamiento"
          />
        </template>
      </div>
      <div class="d-flex flex-column title-subtitle-container">
        <h2 :style="{ ...getTitleStyle, ...titleStyle }">{{ titulo }}</h2>
        <h3
          v-if="subtitulo"
          :style="{ ...getSubtitleStyle, ...subtitleStyle }"
        >
          {{ subtitulo }}
        </h3>
      </div>
      <div
        v-if="comportamientos"
        class="d-flex ml-2 align-center"
        style="gap: 10px"
      >
        <template v-for="(comportamiento, i) in comportamientos">
          <ir-comportamiento
            v-if="isShowComportamiento(comportamiento, 'append')"
            :key="'comportamientos-titulo-append-'+i"
            v-bind="comportamiento"
          />
        </template>
      </div>
    </div>
    <div
      v-if="comportamientos"
      class="d-flex ml-2"
      style="gap: 10px"
    >
      <template v-for="(comportamiento, i) in comportamientos">
        <ir-comportamiento
          v-if="isShowComportamiento(comportamiento, 'append-end')"
          :key="'comportamientos-titulo-append-end-' + i"
          v-bind="comportamiento"
        />
      </template>
    </div>
  </div>
</template>

<script>
import { tituloComponentName } from '../../../constants'
import { separateValidPositions } from '../../../mixins/comportamientoPositionCheck'
import { getColorByProp } from '../../../helpers/utils.js'
const validPositions = ['append', 'prepend', 'append-end']
export default {
  name: tituloComponentName,
  props: {
    titulo: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'medium'
    },
    subtitleStyle: {
      type: Object,
      default: () => ({})
    },
    titleStyle: {
      type: Object,
      default: () => ({})
    },
    fontWeight: {
      type: [String, Number],
      default: '600'
    },
    color: {
      type: String
    },
    subtitulo: {
      type: String
    },
    'color-subtitulo': {
      type: String
    },
    'size-subtitulo': {
      type: [String, Number],
      default: 'medium'
    },
    'font-weight-subtitulo': {
      type: [String, Number],
      default: '400'
    },
    comportamientos:{type: Array, required: false}
  },
  data() {
    return {
      dynamicComponent:'',
    };
  },
  computed: {
    getTitleStyle() {
      let style = {}
      style.borderBottom = 'none'
      style.paddingBottom = '0'
      if (typeof this.size === 'string') {
        if (this.size === 'small') style.fontSize = '1.2rem'
        else if (this.size === 'large') style.fontSize = '2rem'
        else if (this.size === 'medium') style.fontSize = '1.6rem'
        else style.fontSize = this.size
      } else {
        style.fontSize = '1.6rem'
      }
      style.lineHeight = style.fontSize
      if (
        typeof this.fontWeight === 'string' ||
        typeof this.fontWeight === 'number'
      ) {
        style.fontWeight = this.fontWeight
      }
      style.color = getColorByProp(this.color, this.$vuetify, '')
      return style
    },
    getSubtitleStyle() {
      let style = {}
      style.borderBottom = 'none'
      style.paddingBottom = '0'
      if (typeof this.sizeSubtitulo === 'string') {
        style.fontSize = this.sizeSubtitulo
      } else {
        style.fontSize = '1rem'
      }
      style.lineHeight = style.fontSize
      if (
        typeof this.fontWeightSubtitulo === 'string' ||
        typeof this.fontWeightSubtitulo === 'number'
      ) {
        style.fontWeight = this.fontWeightSubtitulo
      }
      style.color = getColorByProp(this.colorSubtitulo, this.$vuetify)
      return style
    },
    hasComportamientos() {
      return this.comportamientos && this.comportamientos.length > 0
    }
  },
  created() {
    separateValidPositions(
      this.comportamientos,
      validPositions,
      tituloComponentName,
      this.$iclRouter.currentRoute.path,
      this.$logError
    ) // Valida las posiciones válidas para comportamientos
  },
  methods: {
    isShowComportamiento(comportamiento, position){
      return (
        (typeof comportamiento.visible === 'undefined' ||
          comportamiento.visible) &&
        comportamiento.position === position
      )
    }
  }
}
</script>

<style>
.title-subtitle-container {
  gap: 12px;
}
</style>