GPS Marker 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 = {
    visible: { type: Boolean },
    width: { type: Number , default:1},
    pattern:{ type: String , default:''},
    readonly: { type: Boolean, default: false },
    value: { type: Object },
    label: {
      type: String,
      default: ''
    },
    id_resolver: {
      type: String,
    },
    required: { type: Boolean, default: false },
    placeholder: { type: String, default: '' },
    comportamientos:{type: Array, required: false}
  }
import { normalizeProps, assignCamelToSnake } from '../../../helpers/propsGenerator';
const mergedProps = normalizeProps(props)
  import {gpsMarkerComponentName} from '../../../constants'
export default {
  name: gpsMarkerComponentName +'bone',
  props: mergedProps,
  data() {
    return {
      dialog: false,
      campoVDialog: {
        lat: this.value.lat,
        long: this.value.long,
        link: this.value.link,
        content: this.value.content,
        icono: this.value.icono
      },
      usedPosition:[],
      structureError: false
    }
  },
  methods: {
    elegir() {
      this.closeVDialog()
      this.$set(this.value, 'lat', this.campoVDialog.lat)
      this.$set(this.value, 'long', this.campoVDialog.long)
      this.$set(this.value, 'link', this.campoVDialog.link)
      this.$set(this.value, 'content', this.campoVDialog.content)
      this.$set(this.value, 'icono', this.campoVDialog.icono)
    },
    comportamientoChangeValue(e) {
      this.campoVDialog = e
      this.closeVDialog()
      this.$set(this.value, 'lat', this.campoVDialog.lat)
      this.$set(this.value, 'long', this.campoVDialog.long)
      this.$set(this.value, 'link', this.campoVDialog.link)
      this.$set(this.value, 'content', this.campoVDialog.content)
      this.$set(this.value, 'icono', this.campoVDialog.icono)
    },
    vDialog() {
      this.openVDialog()
    },
    openVDialog() {
      this.dialog = true
    },
    closeVDialog() {
      this.dialog = false
    },
    inputText() {
      const txt = this.value.content.replace(/(<([^>]+)>)/gi, ' ')
      const length = 100
      return txt.length > length ? txt.substr(0, length - 1) + '&hellip;' : txt
    }
  },
  created(){
    assignCamelToSnake(mergedProps, this)
  },
  mounted(){
    this.structureError = this.$propError(props, this.$props, gpsMarkerComponentName)
    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, gpsMarkerComponentName,
    this.id_resolver, this.$logError) // Valida las posiciones válidas para comportamientos
  },
  render() {
    if(this.structureError){
      return
    }
    return this.$scopedSlots.default({
      campoVDialog: this.campoVDialog,
      readonly: this.readonly,
      placeholder: this.placeholder,
      inputText: this.inputText(),
      dialog: this.dialog,
      rules: this.$rulesGenerator(this.required, this.pattern),
      openVDialog: this.openVDialog,
      label: this.label,
      pencilEvents: {
        click: this.vDialog
      },
      saveEvents: {
        click: this.elegir
      },
      closeEvents: {
        click: this.closeVDialog,
        'click:outside': this.closeVDialog
      },
      comportamientos:this.comportamientos,
      comportamientosPositions: this.usedPosition,
      id_resolver: this.id_resolver,
      comportamientoEvents: {
        changeFieldValue: this.comportamientoChangeValue,
        'close-dialog': (e) => {
          this.$emit('close-dialog', e)
        },
        refresh: () => {
          this.$emit('refresh')
        }
      },
      valueType:props.value.type.name.toLowerCase()
    })
  }
}
</script>