Textarea Bone

Introducción

Componente lógico.

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>