Componente

Introducción

Este componente renderiza un label para un campo.

Uso

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

Ejemplo

S

Propiedades

Propiedad	Tipo	Default	Descripción
label	String	Propiedad requerida	Texto a mostrar en el componente, si se envía un * en el label, este se mostrará en color error haciendo referencia a ser un campo requerido
error	Boolean		Establece el texto en color error
disabled	Boolean		Establece el texto en color disabled
readonly	Boolean		Establece el texto en bold y color secondary
size	String	'14px'	Establece el font-size del texto.

Código fuente

<template>
  <ir-label-bone v-bind="$attrs">
    <div
      slot-scope="{ label, isRequiredLabel, size }"
      class="d-inline-block"
      :class="readonly ? '' : 'pb-2'"
    >
      <label
        :class="getLabelClasses"
        :for="'text-field-' + label"
        :style="getLabelStyle(size)"
        data-cy="label"
      >
        {{ label }}
      </label>
      <span
        v-if="isRequiredLabel"
        class="required"
      >
        *
      </span>
    </div>
  </ir-label-bone>
</template>

<script>
import IrLabelBone from './IrLabelBone.vue'
import { labelComponentName } from '../../../constants/index.js'
export default {
  name: labelComponentName,
  components: { IrLabelBone },
  props:{
    error:{
      type: Boolean,
      default: false
    },
    disabled:{
      type: Boolean,
      default: false
    },
    readonly:{
      type: Boolean,
      default: false
    }
  },
  computed:{
    getLabelClasses(){
      let classes = 'input-label '
      if(this.error)
        classes = 'input-label__error'
      if(this.disabled)
        classes = 'input-label__disabled'
      if(this.readonly)
        classes = 'input-label__readonly'
      return classes
    }
  },
  methods: {
    getLabelStyle(size) {
      return {
        fontSize: size
      }
    }
  }

}
</script>

<style scoped lang="scss">
.required {
  color: var(--v-error-base);
  font-size: 14px;
}
.input-label {
  color: var(--v-textPrimary-base);
  font-size: 14px;
}
.input-label__error {
  color: var(--v-error-base);
  font-size: 14px;
}
.input-label__disabled {
  color :var(--v-disabled-base);
  font-size: 14px;
}
.input-label__readonly {
  font-weight: 700;
  color: var(--v-secondary-base);
  font-size: 14px;
}

</style>