Numeric Field Bone

Introducción

Componente lógico.

Código fuente

<script>
import { numericFieldComponentName } from '../../../constants'
import { separateValidPositions } from '../../../mixins/comportamientoPositionCheck'
const validPositions = [
  'append',
  'append-outer',
  'label',
  'prepend',
  'prepend-inner'
]
const props = {
  value: {
    type: undefined, //Indefinido por caso en que se borre el contenido del input, se maneja en vuetify como "", rompería el type number
    default: 0,
    required: true
  },
  label: {
    type: String,
    default: ''
  },
  min: {
    type: Number
  },
  max: {
    type: Number
  },
  pattern: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  readonly: {
    type: Boolean,
    default: false
  },
  required: {
    type: Boolean,
    default: false
  },
  hideDetails: {
    type: undefined,
    default: 'auto'
  },
  comportamientos: { type: Array, required: false },
  id_resolver: {
    type: String
  },
  mask: {
    type: String,
    default: ''
  },
  money: {
    type: Object,
    default: () => ({})
  }
}
import {
  normalizeProps,
  assignCamelToSnake
} from '../../../helpers/propsGenerator'
import { getMaskValue } from '../../../helpers/utils'
const mergedProps = normalizeProps(props)
export default {
  name: numericFieldComponentName + 'Bone',
  props: mergedProps,
  data() {
    return {
      vallocal: this.value,
      rulesLocal: [],
      usedPosition: [],
      structureError: false
    }
  },
  created() {
    assignCamelToSnake(mergedProps, this)
  },
  mounted() {
    this.structureError = this.$propError(
      props,
      this.$props,
      numericFieldComponentName
    )
    if (this.structureError) {
      this.$iclstore.commit('updateSnack', {
        text: 'Ha ocurrido un error al cargar el sitio',
        active: true,
        color: 'warning'
      })
    }
    this.rulesLocal = this.$rulesGenerator(this.required, this.pattern)
    if (this.max) {
      this.rulesLocal.push((x) => {
        return x <= this.max || `El valor debe ser menor o igual a ${this.max}`
      })
    }
    if (this.min) {
      this.rulesLocal.push((x) => {
        return x >= this.min || `El valor debe ser mayor o igual a ${this.min}`
      })
    }
    this.usedPosition = separateValidPositions(
      this.comportamientos,
      validPositions,
      numericFieldComponentName,
      this.$iclRouter.currentRoute.path,
      this.$logError
    ) // Valida las posiciones válidas para comportamientos
  },
  render() {
    if (this.$propError(props, this.$props, numericFieldComponentName)) {
      return
    }
    return this.$scopedSlots.default({
      placeholder: this.placeholder,
      vallocal: this.vallocal,
      pattern: this.pattern,
      readonly: this.readonly,
      rules: this.rulesLocal,
      inputEvents: {
      },
      maskHandler: (e, campoRef) => {
        this.$emit('input', getMaskValue(e, campoRef, this.mask, this.money))
      },
      hideDetails: this.hideDetails,
      label: this.label,
      comportamientos: this.comportamientos,
      comportamientosPositions: this.usedPosition,
      id_resolver: this.id_resolver,
      comportamientoEvents: {
        changeFieldValue: (e) => {
          this.vallocal = e
          this.$emit('input', this.vallocal)
        },
        'close-dialog': (e) => {
          this.$emit('close-dialog', e)
        },
        refresh: () => {
          this.$emit('refresh')
        }
      }
    })
  }
}
</script>