Input TextArea v1.0

The <e-input-textarea> component is a component that can be used for .

Usage

An e-input-textarea has attributes that must be provided,

<e-input-textarea
  id="inputTextArea"
  value=""
  label=""
  placeholder=""
  required=""
/>

Attributes

id | Type: String | required
label | Type: String | Default: ''
options | Type: Array | Default: selectOptions

Examples

Below a few interactive examples of e-input-textarea can be found.

Default

<e-input-textarea
  id="inputTextArea"
  value=""
  label=""
  placeholder="placeholder text"
  required=""
/>

Labelled, label='textInput with Label'

<div class="input-example-field">
  <e-input-label
    :id="'inputTextareaWithLabel'"
    :value="'textareaInput Label'"
  />
  <e-input-textarea
    :id="'inputTextareaWithLabel'"
    :value="'exampleText1'"
    placeholder="'placeholder text'"
    required="true"
  />
</div>

textareaInput Label

Source Code

e-input-textarea.vue

<script setup lang="ts">
import { computed, ref } from 'vue';

import type { EInput_Textarea } from 'types/e-input/interfaces/EInput_Textarea';

export type Props = EInput_Textarea;
const props = withDefaults(defineProps<Props>(), {
  value: '',
  label: '',
  placeholder: '',
  required: false,
  disabled: false,
  meta: () => {
    return {
      disabled: false
    };
  }
});

const emit = defineEmits<{
  (e: 'blur', event: FocusEvent): void;
  (e: 'keyup.enter', event: KeyboardEvent): void;
  (e: 'update:value', value: string): void;
}>();

const input = ref<HTMLInputElement>();

const isDisabled = computed(() => props.disabled ?? props.meta?.disabled);

function emitUpdate(event: Event): void {
  const target = event.target as HTMLInputElement;
  emit('update:value', target.value);
}

const timer = ref<NodeJS.Timeout>();
function debounceEmit(event: Event, msDelay: number = 500): void {
  clearTimeout(timer.value);

  timer.value = setTimeout(() => {
    emitUpdate(event);
  }, msDelay);
}
</script>

<template>
  <textarea
    :id="id"
    ref="input"
    class="e-input-textarea"
    :name="id"
    :value="value"
    :disabled="isDisabled"
    :placeholder="placeholder || label"
    :required="required"
    @input="debounceEmit($event, 500)"
    @blur="emit('blur', $event)"
    @keyup.enter="emit('keyup.enter', $event)"
  />
</template>

<style scoped lang="scss">
.e-input-textarea {
  background-color: var(--e-input-background);
  border: none;
  border-radius: 15px;
  color: var(--e-body-font-color);
  font: normal normal normal 16px/20px var(--e-body-font-family);
  line-height: var(--e-body-font-line-height);
  min-height: 150px;
  padding: 15px;

  &:focus-visible {
    outline: 1px solid var(--e-primary);
    border-radius: 15px;
    -moz-outline-radius: 15px;
    background: var(--e-input-focus-background) !important;
  }

  &::placeholder {
    color: var(--e-gray-300);
  }

  &[required] {
    + label::after {
      content: '*';
      padding-left: 2px;
      color: var(--e-required);
      font-weight: bold;
    }
  }
}
</style>