Password Bone

Introducción

Componente lógico.

Código fuente

<script>
import { separateValidPositions } from '../../../mixins/comportamientoPositionCheck'
const validPositions = ['append-outer', 'label', 'prepend', 'prepend-inner']
const props = {
  value: { type: String, default: '', required: true },
  pattern: { type: String, default: '' },
  placeholder: { type: String, default: '' },
  readonly: { type: Boolean, default: false },
  label: {
    type: String,
    default: ''
  },
  id_resolver: {
    type: String
  },
  required: { type: Boolean, default: false },
  hideDetails: {
    type: undefined,
    default: 'auto'
  },
  comportamientos: { type: Array, required: false }
}
import {
  normalizeProps,
  assignCamelToSnake
} from '../../../helpers/propsGenerator'
const mergedProps = normalizeProps(props)
import { passwordComponentName } from '../../../constants'
export default {
  name: passwordComponentName + 'Bone',
  props: mergedProps,
  data() {
    return {
      showpw: false,
      vallocal: this.value,
      usedPosition: [],
      structureError: false
    }
  },
  mounted() {
    this.structureError = this.$propError(
      props,
      this.$props,
      passwordComponentName
    )
    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,
      passwordComponentName,
      this.$iclRouter.currentRoute.path,
      this.$logError
    ) // Valida las posiciones válidas para comportamientos
  },
  created() {
    assignCamelToSnake(mergedProps, this)
  },
  render() {
    if (this.structureError) {
      return
    }
    return this.$scopedSlots.default({
      placeholder: this.placeholder,
      showpw: this.showpw,
      vallocal: this.vallocal,
      pattern: this.pattern,
      readonly: this.readonly,
      rules: this.$rulesGenerator(this.required, this.pattern),
      required: this.required,
      inputEvents: {
        input: (e) => {
          this.vallocal = e
          this.$emit('input', this.vallocal)
        }
      },
      buttonEvents: {
        click: () => {
          this.showpw = !this.showpw
        }
      },
      hideDetails: this.hideDetails,
      label: this.label,
      comportamientos: this.comportamientos,
      comportamientosPositions: this.usedPosition,
      valueType: props.value.type.name.toLowerCase(),
      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>