Componente

Introducción

Este componente renderizará un input de tipo range. El mismo se compone de dos partes, una de renderizado y otra de lógica (IrRange Bone), esta ultima será la encargada de el manejo de los datos.

Uso

Es importante recalcar el nombre del componente IrRange 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	Descripción
readonly	Boolean	false	El valor readonly = true, establecerá al campo como solo lectura.
value	Array	Arreglo que almacenará los intervalos de valores ingresados en el componente.
required	Boolean	false	En valor true, define que el componente debe ser valorizado para ser válido.
thumbs	Boolean	false	Determina si serán visibles los marcadores de valores (thumbs) dentro del componente.
showTextManager	Boolean	false	Determina si serán visibles los TextFields para modificar los valores del componente.
min	Number	0	Determina el valor mínimo que podrá tener el componente.
max	Number	100	Determina el valor máximo que podrá tener el componente.
ticks	boolean | string	false	Determina si serán visibles puntos marcadores de cada unidad dentro del componente.
ticks-labels	Array	[]	Determina los labels de cada marcador de unidad dentro del componente.
icons	Array	[]	Determina los íconos que tendrá cada marcador de unidad dentro del componente.
topLabel	Boolean	true	Determina si el label se va a mostrar en la parte superior del componente o no.
hint	Object | String	''	Genera un texto de ayuda para el componente, que podrá ser o no, clickeable para navegar a un link determinado Propiedad con estructura de objeto con los siguientes keys: { link: String, text: String openNewTab:Boolean classes:String } En la propiedad text del objeto se determinará el texto que mostrará el hint, esta propiedad debe estar valorizada para que se muestre el hint. En la propiedad link del objeto se determinará el link al cual navegará al clickear en el hint, si no se encuentra valorizada el hint no será clickeable, solo será texto. En la propiedad openNewTab del objeto se determinará si al clickearse el hint con link valorizado, se navegará en una nueva pestaña. Solo es útil paracuando la propedad link del objeto está definida. Si no se encuentra definido, se navegará en la misma pestaña. En la propiedad classes del objeto, se determinarán las clases que se aplicarán al hint, las clases serán separadas por un espacio, sirven para definir estilos. Se utilizarán principalmente clases de vuetify. Las clases aplicables para las filas de la tabla podrán encontrarse en Vuetify en los siguientes enlaces: Colores {color} text--{color} Texto y tipografía Espaciado

Propiedades de Vuetify

Aquí se detallan más propiedades de Vuetify que posee el componente.

Código fuente

<template>
  <ir-range-bone v-bind="$attrs">
    <div
      slot-scope="{}"
      style="display: flex; flex-direction: column; gap: 5px; width: 100%"
    >
      <label
        v-if="topLabel"
        class="v-label theme--light mt-2"
        >{{ label }}
      </label>
      <v-range-slider
        :ref="irRangeRef"
        style="width: 100%"
        v-bind="getFilteredProps"
        :hide-details="hideDetails"
        :value="value"
        :label="topLabel ? '' : label"
        v-on="$listeners"
        @input="$emit('input', $event)"
      >
        <template #prepend>
          <v-text-field
            v-if="showTextManager"
            :value="value[0]"
            dense
            class="mt-0 pt-0"
            hide-details
            single-line
            type="number"
            style="width: 60px"
            @change="$emit('input', [$event, value[1]])"
          />
        </template>
        <template #append>
          <v-text-field
            v-if="showTextManager"
            :value="value[1]"
            dense
            class="mt-0 pt-0"
            hide-details
            single-line
            type="number"
            style="width: 60px"
            @change="$emit('input', [value[0], $event])"
          />
        </template>
        <template
          v-if="thumbs"
          #thumb-label="props"
        >
          <v-icon
            v-if="icons.length > 0"
            dark
          >
            {{ icons[props.value] }}
          </v-icon>
        </template>
        <template #message="{ message, key }">
          <div v-html="message" />
        </template>
      </v-range-slider>
    </div>
  </ir-range-bone>
</template>

<script>
import IrRangeBone from './IrRangeBone.vue'
import { rangeComponentName } from '../../../constants'
import { setHintTag } from '../../../helpers/hint'
import focusAndScrollMixin from '../../../mixins/focusAndScroll'
import { filterProps } from '../../../helpers/filterProps'
export default {
  name: rangeComponentName,
  components: {
    IrRangeBone
  },
  mixins: [focusAndScrollMixin],
  inheritAttrs: false,
  props: {
    value: {
      type: Array,
      default: () => [0, 0]
    },
    hideDetails: {
      type: undefined,
      default: 'auto'
    },
    showTextManager: {
      type: Boolean,
      default: false
    },
    thumbs: {
      type: Boolean,
      default: false
    },
    icons: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: ''
    },
    topLabel: {
      type: Boolean,
      default: true
    },
    isFocused: {
      type: Boolean,
      default: false
    },
    hint: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      irRangeRef: rangeComponentName,
      otherProps: {}
    }
  },
  computed: {
    getFilteredProps() {
      return filterProps(this.$refs[this.irRangeRef], this.handledAttrs, [
        'data-cy'
      ])
    },
    handledAttrs() {
      const hint = setHintTag(this.otherProps, this.hint)
      let aux = { ...this.otherProps, ...this.$attrs }
      delete aux.hint
      if (hint) {
        aux = { ...aux, hint }
      }
      delete aux.value
      delete aux.hideDetails
      delete aux.showTextManager
      delete aux.thumbs
      delete aux.icons
      delete aux.label
      return aux
    }
  },
  mounted() {
    if (this.isFocused) {
      let element = this.$refs[this.irRangeRef].$el
      this.focusAndScroll(element)
    }
    this.otherProps = { ...this.$attrs }
  }
}
</script>

<style scoped></style>