Componente

Introducción

Este componente es un input en el cual se podrá ingresar una URL, almacenando también un texto descriptivo para la misma.

Uso

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

Ejemplo

Propiedades

Propiedad	Tipo	Default	Descripción
readonly	Boolean	false	El valor readonly = true, establecerá al campo como solo lectura.
hint	String	``	Establece un texto de ayuda para el campo.
value	Object	{ text: '', url: '' }	Objeto con la estructura definida: { test: String, url: 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	''	Establece el placeholder en el campo.
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 lugar.

Código fuente

<template>
  <ir-link-bone v-bind="$attrs">
    <div slot-scope="{ value, hint, rules, closeEvents, elegirEvents, textInputEvents, vDialog, dialog, campoVDialog, placeholder, readonlyStyle, label, comportamientos , comportamientosPositions, id_resolver, comportamientoEvents, valueType}"
      data-cy="IrLink"
    >
      <v-text-field
        v-model="value.url"
        readonly
        :label="label"
        append-icon="mdi-pencil"
        prepend-icon="mdi-earth"
        :placeholder="placeholder"
        :style="readonlyStyle"
        @click:append="vDialog"
        v-on="textInputEvents"
        hide-details="auto"
        :rules="rules"
        ref="link"
      >
        <template v-slot:[position] v-for="position, k in comportamientosPositions">
          <div class="d-flex align-center" style="gap:10px;" :key="'slot-comportamientos-link-'+k">
            <template v-for="comportamiento, i in comportamientos">
              <ir-comportamiento :key="'comportamiento-link-'+i"
              v-bind="comportamiento"
              v-if="(typeof comportamiento.visible === 'undefined' || comportamiento.visible) && comportamiento.position === position"
              :value="JSON.stringify(value)"
              v-on="comportamientoEvents"
              :value_type="valueType"
              :father_component_name="linkComponentName"
              :current_id_resolver="id_resolver"
              />
            </template>
          </div>
        </template>
      </v-text-field>
      <p class="tw-text-secondary tw-text-xs ml-11" v-if="hint!==''">
        {{hint}}
      </p>
      <v-dialog v-model="dialog" width="60%" class="scrollBar" @click:outside="closeEvents.click">
        <v-card >
          <v-card-text class="tw-pt-2">
            <v-col>
              <label class="form-control-label tw-text-secondary mb-0">Nombre</label>
              <v-text-field :color="'tw-text-primary'" v-model="campoVDialog.text" hide-details="auto"></v-text-field>
            </v-col>
            <v-col >
              <label class="form-control-label tw-text-secondary mb-0">URL</label>
              <v-text-field :color="'tw-text-primary'" v-model="campoVDialog.url" prepend-icon="mdi-earth" data-cy="inputUrl"></v-text-field>
            </v-col>
            <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="elegirEvents" data-cy="IrLinkAceptarBtn">
                <span class="tw-text-white">Aceptar</span>
              </v-btn>
            </v-card-actions>
          </v-card-text>
        </v-card>
      </v-dialog>
    </div>
  </ir-link-bone>
</template>

<script>
import IrLinkBone from './IrLinkBone.vue'
import {linkComponentName} from '../../../constants'
import focusAndScrollMixin from '../../../mixins/focusAndScroll'
export default {
  name:linkComponentName,
  components: {
    IrLinkBone,
  },
  mixins: [focusAndScrollMixin],
  props: {
    isFocused: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return{
      linkComponentName: linkComponentName
    }
  },
  mounted() {
    if (this.isFocused) {
      let element = this.$refs.link.$el.querySelector('input')
      this.focusAndScroll(element)
    }
  }
}
</script>

<style>
</style>