Componente

Introducción

Este componente renderizará un chip con un texto dentro o con ícono. El mismo se compone de dos partes, una de renderizado y otra de logica ir-chip-bone.

Uso

Es importante recalcar el nombre del componente IrChip 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
text	String	``	false	Texto que se mostrará dentro del chip.
label	Boolean	false	false	Determina si el chip será menos ovalado.
outlined	Boolean	false	false	Determina si el chip tendrá borde o no.
color	String	#E0E0E0	false	Determina el color del chip.
text-color	String	#000000	false	Determina el color del texto dentro del chip.
border-radius	String	16px	false	Determina el ángulo del borde del chip.

Propiedades de vuetify

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

Código fuente

<template>
  <ir-chip-bone v-bind="$attrs">
    <div
      slot-scope="{
        text,
        label,
        outlined,
        color,
        textColor,
        borderRadius,
        addOpacityToColor
      }"
    >
      <v-chip
        :ref="irChipRef"
        v-bind="getFilteredProps"
        :label="label"
        :outlined="outlined"
        :color="color"
        :text-color="textColor"
        :style="getStyle(color, borderRadius, addOpacityToColor)"
        data-cy="IrChip"
      >
        <template #default>
          <slot name="default">
            {{ text }}
          </slot>
        </template>
      </v-chip>
    </div>
  </ir-chip-bone>
</template>

<script>
import { chipComponentName } from '../../constants'
import IrChipBone from './IrChipBone.vue'
import { filterProps } from '../../helpers/filterProps'
import { onMounted, ref, computed } from 'vue'
export default {
  name: chipComponentName,
  components: {
    IrChipBone
  },
  inheritAttrs: false,
  setup(_, { attrs }) {
    const irChipRef = ref(null)
    const otherProps = ref({})
    const getFilteredProps = computed(() => {
      return filterProps(irChipRef.value, otherProps.value, ['data-cy'])
    })

    /**
     * Gets the style string based on provided parameters.
     *
     * @param {string} color - The background color.
     * @param {string} borderRadius - The border radius.
     * @param {Function} addOpacityToColor - The function to add opacity to color.
     * @returns {string} - The style string.
     */
    const getStyle = (color, borderRadius, addOpacityToColor) => {
      let style = ''
      if (color)
        style +=
          'background-color: ' + addOpacityToColor(color, 0.2) + ' !important;'
      if (borderRadius)
        style += ' border-radius: ' + borderRadius + ' !important;'
      return style
    }

    onMounted(() => {
      let aux = { attrs }
      otherProps.value = aux
    })

    return {
      irChipRef,
      otherProps,
      getFilteredProps,
      getStyle
    }
  }
}
</script>

<style></style>