Componente

Introducción

Este componente renderizará un input para escribir una contraseña y un botón que permitirá ver la contraseña. El mismo se compone de dos partes, una de renderizado y otra de lógica (Password Bone), esta ultima será la encargada de el manejo de los datos.

⚠️

Importante:

Siempre que se ejecute una función con un comportamiento del tipo fcn_executer o fcn_executer_row, donde se envíe la data que contiene este componente o la data que contiene un IrForm y dentro haya un IrPassword, el valor de cada IrPassword será encriptado antes de enviarse a la BD. Por otra parte, esa misma data ya encriptada, se desencriptará cuando se realice una consulta a la BD, y la misma devuelva un campo IrPassword, ya sea dentro o fuera de un IrForm, para mostrarse correctamente en el front-end.

Uso

Es importante recalcar el nombre del componente IrPassword 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-password-bone
    v-bind="$attrs"
    :value="value"
    @input="(e) => $emit('input', e)"
  >
    <div
      slot-scope="{
        inputEvents,
        buttonEvents,
        placeholder,
        showpw,
        vallocal,
        readonly,
        rules,
        hideDetails,
        label,
        comportamientos,
        comportamientosPositions,
        comportamientoEvents,
        id_resolver,
        valueType
      }"
      style="width: 100%"
    >
      <ir-label
        v-if="isOutlined"
        :label="label"
        :error="hasError"
        :disabled="handledAttrs.disabled"
        :readonly="readonly"
      />
      <v-text-field
        :ref="irPasswordRef"
        :placeholder="placeholder"
        :hide-details="hideDetails"
        :label="isOutlined ? undefined : label"
        v-bind="getFilteredProps"
        :type="showpw ? 'text' : 'password'"
        :value="value"
        :rules="rules"
        :readonly="readonly"
        :disabled="readonly || handledAttrs.disabled"
        class="align-center"
        :append-icon="showpw ? 'mdi-eye' : 'mdi-eye-off'"
        @update:error="setError"
        @click:append="buttonEvents.click"
        @input="(e) => $emit('input', e)"
        v-on="inputEvents"
      >
        <template #message="{ message, key }">
          <div v-html="message" />
        </template>
        <template
          v-for="(position, k) in comportamientosPositions"
          #[position]
        >
          <div
            :key="'slot-comportamientos-pw-' + 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-password-' + i"
                :value_type="valueType"
                :father_component_name="passwordComponentName"
                :current_id_resolver="id_resolver"
                v-bind="comportamiento"
                :value="value"
                v-on="comportamientoEvents"
              />
            </template>
          </div>
        </template>
        <template
          v-if="readonly && !value"
          #prepend-inner
        >
          <div class="pr-2">
            <v-icon color="warning">mdi-alert-circle</v-icon>
          </div>
        </template>
      </v-text-field>
    </div>
  </ir-password-bone>
</template>

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

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