Componente

Introducción

Este componente renderizará un divider, es descir un espacio o una línea que divida elementos. El mismo se compone de dos partes, una de renderizado y otra de logica ir-divider-bone.

Uso

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

Ejemplo

Propiedad	Tipo	Default	Requerido	Descripción
vertical	Boolean	false	false	Determina si el componente estará en posición horizontal o vertical.
lineColor	String	#00000000	false	Determina color de la línea divisora. En caso de valorizarse con un color distinto al que viene por defecto, el componente renderizará una línea divisora. Caso contrario, renderizará un espacio.
backgroundColor	String	#00000000	false	Determina el color del espacio que renderizará el componente en caso de no renderizar una línea divisora. En caso de no enviar esta propiedad ni lineColor, entonces se renderizará un espacio divisor.
height	String	undefined	false	Determina el alto del componente. Esta propiedad únicamente servirá en caso de que la propiedad onlySpace esté valorizada en true. En caso de que el componente esté en horizontal el alto será de 20px. En caso de estar en vertical, tendrá el alto máximo posible dentro de su contenedor.
width	String	undefined	false	Determina el ancho del componente. Esta propiedad únicamente servirá en caso de que la propiedad onlySpace esté valorizada en true. En caso de que el componente esté en horizontal, tendrá el ancho máximo posible dentro de su contenedor. En caso de estar en vertical, tendrá un ancho de 20px.

Propiedades de vuetify

Aquí se detallan más propiedades aplicables al componente.

Código fuente

<template>
  <ir-divider-bone v-bind="$attrs">
    <div slot-scope="{ }">
      <v-divider
        v-if="isLine"
        v-bind="otherProps"
        :color="lineColor"
        :vertical="vertical"
        data-cy="IrDivider"
        ref="IrDivider-line"
      />
      <div
        v-else
        :style="spaceStyle"
        ref="IrDivider-space"
      ></div>
    </div>
  </ir-divider-bone>
</template>

<script>
import { dividerComponentName } from '../../constants'
import IrDividerBone from './IrDividerBone.vue'
const verticalHeight = '100%'
const verticalWidth = '20px'
const horizontalHeight = '20px'
const horizontalWIdth = '100%'
const lineColorDefault = '#00000000'
const backgroundColorDefault = '#00000000'
export default {
  name: dividerComponentName,
  inheritAttrs: false,
  components: {
    IrDividerBone
  },
  props: {
    vertical: {
      type: Boolean,
      default: false
    },
    lineColor: {
      type: String,
      default: lineColorDefault
    },
    backgroundColor: {
      type: String,
      default: backgroundColorDefault
    },
    height: {
      type: String,
      required: false
    },
    width: {
      type: [String, Number],
      required: false
    }
  },
  data() {
    return {
      otherProps: {}
    }
  },
  computed: {
    isLine() {
      return this.lineColor !== lineColorDefault && this.backgroundColor === backgroundColorDefault
    },
    computedWidth() {
      return this.width ? this.width : (this.isVerticalSpace ? verticalWidth : horizontalWIdth)
    },
    computedHeight() {
      return this.height ? this.height : (this.isVerticalSpace ? verticalHeight : horizontalHeight)
    },
    isVerticalSpace() {
      return !this.line && this.vertical
    },
    spaceStyle() {
      let style = { backgroundColor: this.backgroundColor }
      style = { ...style, height: this.computedHeight, width: this.computedWidth }
      return style
    }
  },
  mounted() {
    let aux = { ...this.$attrs }
    delete aux.backgroundColor
    this.otherProps = aux
  }
}
</script>

<style>
</style>