Componente

Introducción

El GPSMarker cumple con la función de input, en el cual podrá cargarse una ubicación por coordenadas y un contenido de tipo wysiwyg para una mayor personalización de estilo.

Uso

Es importante recalcar el nombre del componente IrGpsMarker a nivel de código, ya que este deberá usarse para llamar al componente para renderizarlo, ya sea individiualmente o en un IrForm.

Ejemplo

Código fuente

Propiedades

readonly	Boolean	false	El valor readonly = true, establecerá al campo como solo lectura.
pattern	String	``	Un String que defina una expresión regular que deberá cumplir el input para ser válido. En caso de no poderse enviar \ desde la capa de datos, enviese ~, ICL lo tomará como \ en su
hint	String	``	Establece un texto de ayuda para el campo.
value	Object	{ lat: '' long: '', link: '', content: '', }	Objeto con la estructura definida: { lat: String long: String, link: String, content: String } El cual almacenará los valores ingresados en el componente.
required	Boolean	false	En valor true, define que el componente debe ser valorizado para ser válido.
placeholder	String	``	Texto de placeholder del campo.

<template>
  <ir-gps-marker-bone v-bind="$attrs">
    <div
      slot-scope="{
        campoVDialog,
        rules,
        pencilEvents,
        saveEvents,
        closeEvents,
        inputText,
        dialog,
        openVDialog,
        readonly,
        placeholder,
        label,
        comportamientos,
        comportamientosPositions,
        id_resolver,
        comportamientoEvents,
        valueType
      }"
    >
      <div class="tw-flex tw-items-center ir-gps-marker">
        <v-col class="px-0 py-1" style="width:100%;">
          <ir-label
            v-if="isOutlined"
            :label="label"
            :error="hasError"
            :disabled="otherProps.disabled"
            :readonly="readonly"
          />
          <v-text-field
            color="primary"
            :value="inputText"
            :style="readonly ? 'pointer-events: none;' : ''"
            :class="readonly ? 'not-readonly-tf' : 'is-readonly-tf'"
            :placeholder="placeholder"
            :disabled="readonly || otherProps.disabled"
            :label="isOutlined ? undefined : label"
            readonly
            append-icon="mdi-map-marker-outline"
            :rules="rules"
            v-bind="otherProps"
            @update:error="setError"
            v-on="pencilEvents"
            @click:append="openVDialog()"
          >
            <template v-slot:[position] v-for="position, k in comportamientosPositions">
              <div class="d-flex align-center" style="gap:10px;" :key="'slot-comportamientos-gps-'+k">
                <template v-for="comportamiento, i in comportamientos">
                  <ir-comportamiento :key="'comportamiento-gps-'+i"
                  v-if="(typeof comportamiento.visible === 'undefined' || comportamiento.visible) && comportamiento.position === position"
                  v-bind="comportamiento"
                  :value="JSON.stringify(campoVDialog)"
                  v-on="comportamientoEvents"
                  :value_type="valueType"
                  :father_component_name="gpsMarkerComponentName"
                  :current_id_resolver="id_resolver"
                  />
                </template>
              </div>
            </template>
            <template v-slot:message="{ message, key }">
              <div v-html="message"></div>
            </template>
            <template v-if="readonly && !inputText" v-slot:prepend-inner>
              <div class="pr-2">
                <v-icon color="warning">mdi-alert-circle</v-icon>
              </div>
            </template>
          </v-text-field>
        </v-col>
      </div>
      <v-dialog :value="dialog" v-on="closeEvents" width="50%" class="tw-bg-red-400" eager :retain-focus="false">
        <v-card class="tw-relative tw-overflow-visible">
          <v-card-text class="pt-4">
            <v-row>
              <v-col cols="12" md="6">
                <label for="lat" class="form-control-label tw-text-secondary mb-0">Latitud</label>
                <v-text-field :color="'tw-text-primary'" v-model="campoVDialog.lat"></v-text-field>
              </v-col>
              <v-col cols="12" md="6">
                <label for="lat" class="form-control-label tw-text-secondary mb-0">Longitud</label>
                <v-text-field :color="'tw-text-primary'" v-model="campoVDialog.long"></v-text-field>
              </v-col>
            </v-row>
            <v-col class="tw-flex-cols tw-items-center">
              <label class="form-control-label tw-text-secondary mb-0">Content</label>
              <div class="divinput">
                <IrWysiwyg v-model="campoVDialog.content" v-if="campoVDialog.hasOwnProperty('content')"/>
              </div>
            </v-col>
            <!-- <v-col>
              <label class="form-control-label tw-text-secondary mb-0">Icono del marcador</label>
              <ir-file-picker v-model="campoVDialog.icono" :ref="campoVDialog.label + '-file'" />
            </v-col> -->
            <!--<div class="tw-flex tw-justify-end">
              <button class="btn-primary !tw-text-white tw-bg-blue-500 tw-form-control-submit tw-rounded tw-pa-2" type="submit" @click="dialog = false">
                Guardar
              </button>
            </div>-->
            <v-card-actions class="tw-flex tw-justify-end">
              <v-btn class="tw-m-2" color="white" v-on="closeEvents">
                <span class="!tw-text-black">Cancelar</span>
              </v-btn>
              <v-btn class="tw-text-primary tw-m-2" color="blue" v-on="saveEvents">
                <span class="tw-text-white">Aceptar</span>
              </v-btn>
            </v-card-actions>
          </v-card-text>
        </v-card>
      </v-dialog>
    </div>
  </ir-gps-marker-bone>
</template>

<script>
import IrGpsMarkerBone from './IrGpsMarkerBone.vue'
import { gpsMarkerComponentName } from '../../../constants'
import IrWysiwyg from '../IrWysiwyg/IrWysiwyg.vue'
import { isOutlined } from '../../../helpers/utils.js'
import { setHintTag } from '../../../helpers/hint.js'

export default {
  name: gpsMarkerComponentName,
  components: {
    IrGpsMarkerBone,
    IrWysiwyg
  },
  props: {
    hint: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      gpsMarkerComponentName: gpsMarkerComponentName,
      otherProps: {},
      hasError: false
    }
  },
  computed: {
    isOutlined(){
      return isOutlined(this.otherProps.outlined)
    }
  },
  mounted() {
    const hint = setHintTag(this.otherProps, this.hint)
    let aux = { ...this.otherProps, ...this.$attrs }
    delete aux.hint
    if (hint) {
      aux = { ...aux, hint }
    }
    delete aux.placeholder
    delete aux.readonly
    delete aux.label
    delete aux.items
    delete aux.value
    delete aux.loading
    this.otherProps = aux
  },
  methods: {
    setError(eventValue) {
      console.log(eventValue)
      this.hasError = eventValue
    }
  }
}
</script>

<style scoped lang="scss">
</style>