IrRangePopOver

Introducción

Este componente renderiza un popOver con un IrRange dentro.

Uso

Es importante recalcar el nombre del componente IrRangePopOver 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
appendString	String	``	Determina el string que se muestra appendeado a cada valor del rango.

También se le deben enviar las propiedades de IrRange para renderizarlo dentro del popOver. Aquí se detallan las propiedades.

Código fuente

<template>
  <div class="d-flex justify-start">
    <v-menu offset-y :close-on-content-click="false">
      <template #activator="{ on }">
        <div>
          <v-chip
            :close="value && valueChanged"
            outlined
            :class="value && valueChanged ? 'elevation-1' : ''"
            @click.stop=""
            @click:close="removeValue"
            v-on="on"
          >
            {{ getValue }}
          </v-chip>
        </div>
      </template>
      <v-card class="range-card">
        <v-list>
          <v-card-title class="black--text range-card--title">
            <span>{{ label }}</span>
          </v-card-title>
          <v-list-item>
            <IrRange
              v-bind="getFilteredProps"
              :ref="irRangePopOverRef"
              :value="value"
              @input="updateValue"
            />
          </v-list-item>
        </v-list>
      </v-card>
    </v-menu>
  </div>
</template>

<script>
import { rangeComponentName } from '../../constants'
import { filterProps } from '../../helpers/filterProps'
export default {
  name: rangeComponentName + 'Popover',
  props: {
    value: {
      type: Array,
      default: () => ([0, 0])
    },
    label: {
      type: String,
      default: ''
    },
    appendString: {
      type: String,
      default: ''
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    }
  },
  inheritAttrs: false,
  data() {
    return {
      irRangePopOverRef: rangeComponentName,
      valueChanged: false,
      otherProps: {}
    }
  },
  computed: {
    getFilteredProps() {
      return filterProps(this.$refs[this.irRangePopOverRef], this.otherProps, ['data-cy'])
    },
    getValue() {
      return this.value && this.valueChanged ? ((this.value[0] + this.appendString) +  ' - ' + (this.value[1] + this.appendString)) : this.label
    }
  },
  methods: {
    removeValue() {
      this.$emit('input', [this.min, this.max])
      this.$nextTick(() => {
        this.valueChanged = false
      })
    },
    updateValue(newValue) {
      if (!this.valueChanged)
        this.valueChanged = true
      this.$emit('input', newValue)
    }
  },
  mounted() {
    let aux = { ...this.$attrs }
    delete aux.label
    delete aux.value
    this.otherProps = { ...aux, min: this.min, max: this.max }
  }
}
</script>

<style scoped>
.range-card {
  min-width: 350px;
}
.range-card--title {
  padding-bottom: 0px;
}
</style>