Link 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 = {
  placeholder:{type:String},
  required:{type:Boolean, default:false},
  value:{type:Object, default:()=>({text:'',value:''})},
  readonly:{type:Boolean, default:false},
  pattern:{type:String, default:''},
  label: {
    type: String,
    default: ''
  },
  id_resolver: {
    type: String,
  },
  comportamientos:{type: Array, required: false}
}
import { normalizeProps, assignCamelToSnake } from '../../../helpers/propsGenerator';
const mergedProps = normalizeProps(props)
import {linkComponentName} from '../../../constants'
export default {
  name: linkComponentName+'Bone',
  props: mergedProps,
  data(){
    return {
      dialog: false,
      campoVDialog: {},
      usedPosition:[],
      structureError: false
    }
  },
  methods: {
    elegir() {
      this.cerrar()
      this.$set(this.value, 'text', this.campoVDialog.text)
      this.$set(this.value, 'url', this.campoVDialog.url)
    },
    comportamientoChangeValue(e) {
      this.campoVDialog = e
      this.cerrar()
      this.$set(this.value, 'text', this.campoVDialog.text)
      this.$set(this.value, 'url', this.campoVDialog.url)
    },
    cerrar() {
      this.dialog = false
    },
    vDialog() {
      this.dialog = true
      let obj = Object.assign({} , {text: this.value.text, url: this.value.url})
      this.campoVDialog = obj
    }
  },
  computed: {
    readonlyStyle() {
      return this.readonly ? 'pointer-events: none;' : ''
    }
  },
  created(){
    assignCamelToSnake(mergedProps, this)
  },
  mounted(){
    this.structureError = this.$propError(props, this.$props, linkComponentName)
    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, linkComponentName,
    this.$iclRouter.currentRoute.path, this.$logError) // Valida las posiciones válidas para comportamientos
  },
  render() {
    if(this.structureError){
      return
    }
    return this.$scopedSlots.default({
      placeholder: this.placeholder,
      label: this.label,
      value: this.value,
      rules: this.$rulesGenerator(this.required, this.pattern),
      dialog: this.dialog,
      campoVDialog: this.campoVDialog,
      closeEvents: {
        click: this.cerrar
      },
      elegirEvents: {
        click: this.elegir
      },
      textInputEvents: {
        click: this.vDialog
      },
      vDialog: this.vDialog,
      readonlyStyle: this.readonlyStyle,
      comportamientos: this.comportamientos,
      comportamientosPositions: this.usedPosition,
      id_resolver: this.id_resolver,
      typeValue: props.value.type.name.toLowerCase(),
      comportamientoEvents: {
        changeFieldValue: this.comportamientoChangeValue,
        'close-dialog': (e) => {
          this.$emit('close-dialog', e)
        },
        refresh: () => {
          this.$emit('refresh')
        }
      }
    })
  },
}
</script>