Componente

Introducción

Este componente renderizará un input de tipo text area. El mismo se compone de dos partes, una de renderizado y otra de lógica (IrTextarea Bone), esta ultima será la encargada de el manejo de los datos.

Uso

Es importante recalcar el nombre del componente IrTextarea 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	String	String que 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.
hint	Object | String	''	Genera un texto de ayuda para el componente, que podrá ser o no, clickeable para navegar a un link determinado Propiedad con estructura de objeto con los siguientes keys: { link: String, text: String openNewTab:Boolean classes:String } En la propiedad text del objeto se determinará el texto que mostrará el hint, esta propiedad debe estar valorizada para que se muestre el hint. En la propiedad link del objeto se determinará el link al cual navegará al clickear en el hint, si no se encuentra valorizada el hint no será clickeable, solo será texto. En la propiedad openNewTab del objeto se determinará si al clickearse el hint con link valorizado, se navegará en una nueva pestaña. Solo es útil paracuando la propedad link del objeto está definida. Si no se encuentra definido, se navegará en la misma pestaña. En la propiedad classes del objeto, se determinarán las clases que se aplicarán al hint, las clases serán separadas por un espacio, sirven para definir estilos. Se utilizarán principalmente clases de vuetify. Las clases aplicables para las filas de la tabla podrán encontrarse en Vuetify en los siguientes enlaces: Colores {color} text--{color} Texto y tipografía Espaciado

Código fuente

<template>
  <ir-textarea-bone
    v-bind="$attrs"
    :value="value"
    @input="(e) => $emit('input', e)"
  >
    <div
      slot-scope="{
        inputEvents,
        placeholder,
        vallocal,
        readonly,
        rules,
        disabled,
        hideDetails,
        comportamientos,
        comportamientosPositions,
        valueType,
        id_resolver,
        comportamientoEvents
      }"
      class="ir-textarea"
    >
      <ir-label
        v-if="isOutlined"
        :label="handledAttrs.label"
        :error="hasError"
        :disabled="disabled"
        :readonly="readonly"
      />
      <v-textarea
        :ref="irTextAreaRef"
        v-bind="getFilteredProps"
        :hide-details="hideDetails"
        :placeholder="placeholder"
        class="pt-0 align-center"
        name="text"
        type="text"
        :value="vallocal"
        :rules="rules"
        :readonly="readonly"
        :label="isOutlined ? undefined : handledAttrs.label"
        :disabled="readonly || disabled"
        @update:error="setError"
        v-on="inputEvents"
      >
        <template #message="{ message, key }">
          <div v-html="message" />
        </template>
        <template
          v-for="(position, k) in comportamientosPositions"
          #[position]
        >
          <div
            :key="'slot-comportamientos-textarea-' + k"
            class="d-flex align-center"
            style="gap: 10px"
          >
            <template v-for="(comportamiento, i) in comportamientos">
              <ir-comportamiento
                v-if="
                  (typeof comportamiento.visible === 'undefined' ||
                    comportamiento.visible) &&
                  comportamiento.position === position
                "
                :key="'comportamiento-textarea-' + i"
                v-bind="comportamiento"
                :value="vallocal"
                :value_type="valueType"
                :father_component_name="textareaComponentName"
                :current_id_resolver="id_resolver"
                v-on="comportamientoEvents"
              />
            </template>
          </div>
        </template>
        <template
          v-if="readonly && !localValue"
          #prepend-inner
        >
          <div class="pr-2">
            <v-icon color="warning">mdi-alert-circle</v-icon>
          </div>
        </template>
      </v-textarea>
    </div>
  </ir-textarea-bone>
</template>

<script>
import IrTextareaBone from './IrTextareaBone.vue'
import { textareaComponentName } from '../../../constants'
import { setHintTag } from '../../../helpers/hint'
import focusAndScrollMixin from '../../../mixins/focusAndScroll'
import { isOutlined } from '../../../helpers/utils.js'
import { filterProps } from '../../../helpers/filterProps'
export default {
  name: textareaComponentName,
  components: {
    IrTextareaBone
  },
  mixins: [focusAndScrollMixin],
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      required: true
    },
    isFocused: {
      type: Boolean,
      default: false
    },
    hint: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      irTextAreaRef: textareaComponentName,
      localValue: this.value,
      otherProps: {},
      textareaComponentName: textareaComponentName,
      hasError: false
    }
  },
  computed: {
    getFilteredProps() {
      return filterProps(this.$refs[this.irTextAreaRef], this.handledAttrs, [
        'data-cy'
      ])
    },
    isOutlined() {
      return isOutlined(this.handledAttrs.outlined)
    },
    handledAttrs() {
      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.rules
      delete aux.pattern
      delete aux.value
      delete aux.type
      delete aux.name
      return aux
    }
  },
  watch: {
    localValue(isLocalValue) {
      this.$emit('input', isLocalValue)
    }
  },
  mounted() {
    if (this.isFocused) {
      let element = this.$refs[this.irTextAreaRef].$el
      this.focusAndScroll(element)
    }
    this.otherProps = { ...this.$attrs }
  },
  methods: {
    setError(eventValue) {
      this.hasError = eventValue
    }
  }
}
</script>

<style scoped>
::v-deep .v-textarea textarea {
  padding-top: 3px;
  padding-bottom: 3px;
}

.btn-reg {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}
</style>