Text field Bone

Introducción

Componente lógico.

Código fuente

<script>
import { separateValidPositions } from '../../../mixins/comportamientoPositionCheck'
const validPositions = [
  'append',
  'append-outer',
  'label',
  'prepend',
  'prepend-inner'
]
const props = {
  value: {
    type: String,
    default: '',
    required: true
  },
  pattern: {
    type: String,
    default: ''
  },
  linked: {
    type: undefined,
    validator: (value) => ['update', false, true, 'replace'].includes(value),
    default: false
  },
  placeholder: {
    type: String,
    default: ''
  },
  readonly: {
    type: Boolean,
    default: false
  },
  required: {
    type: Boolean,
    default: false
  },
  label: {
    type: String
  },
  hideDetails: {
    type: undefined,
    default: 'auto'
  },
  id_resolver: {
    type: String
  },
  comportamientos: {
    type: Array,
    required: false
  },
  disabled: {
    type: Boolean,
    required: false
  },
  mask: {
    type: String,
    default: ''
  },
  money: {
    type: Object,
    default: () => ({})
  }
}
import {
  normalizeProps,
  assignCamelToSnake
} from '../../../helpers/propsGenerator'
const mergedProps = normalizeProps(props)
import { textFieldComponentName } from '../../../constants'
import { getMaskValue } from '../../../helpers/utils'
export default {
  name: textFieldComponentName + 'Bone',
  props: mergedProps,
  data() {
    return {
      showpw: false,
      usedPosition: [],
      structureError: false
    }
  },
  created() {
    assignCamelToSnake(mergedProps, this)
  },
  mounted() {
    this.structureError = this.$propError(
      props,
      this.$props,
      textFieldComponentName
    )
    if (this.structureError)
      this.$iclstore.commit('updateSnack', {
        text: 'Ha ocurrido un error al cargar algunos campos del formulario',
        active: true,
        color: 'warning'
      })
    this.usedPosition = separateValidPositions(
      this.comportamientos,
      validPositions,
      textFieldComponentName,
      this.id_resolver,
      this.$logError
    ) // Valida las posiciones válidas para comportamientos
  },
  render () {
    if (this.structureError) return
    return this.$scopedSlots.default({
      placeholder: this.placeholder,
      vallocal: this.value,
      readonly: this.readonly,
      rules: this.$rulesGenerator(this.required, this.pattern),
      inputEvents: {
      },
      hideDetails: this.hideDetails,
      label: this.label,
      comportamientos: this.comportamientos,
      comportamientosPositions: this.usedPosition,
      valueType: props.value.type.name.toLowerCase(),
      id_resolver: this.id_resolver,
      required: this.required,
      disabled: this.disabled,
      linked: this.linked,
      mask: this.mask?.mask ?? '',
      maskHandler: (e, campoRef) => {
        this.$emit('input', getMaskValue(e, campoRef, this.mask, this.money))
      },
      comportamientoEvents: {
        changeFieldValue: (e) => {
          this.$emit('input', e)
        },
        'change-linked-value': () => {
          this.$emit('change-linked-value', {
            action: this.linked,
            campo: {
              type: textFieldComponentName,
              props: { ...this.props, value: this.vallocal }
            }
          })
        },
        'refresh-parent': () => {
          this.$emit('refresh-parent')
        },
        'close-dialog': (e) => {
          this.$emit('close-dialog', e)
        },
        refresh: () => {
          this.$emit('refresh')
        }
      }
    })
  }
}
</script>