Input Text v1.0

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

Usage

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

<e-input-text
  id=""
  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 unavailable can be found.

Default

<e-input-text
  id="textInputWithOptions"
  :value="'exampleText1'"
/>

Labelled, label='textInput with Label'

<div class="input-example-field">
  <e-input-label
    :id="'textInputWithLabel'"
    :value="'textInput with Label'"
  />
  <e-input-text
    :id="'textInputWithLabel'"
    :label="'textInput with Label'"
    :value="'exampleText1'"
  />
</div>

textInput with Label

Source Code

e-input-text.vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import { isEmpty } from 'lodash-es';
import { EInput_Text } from 'types/e-input/interfaces/EInput_Text';

export type Props = EInput_Text;
const props = withDefaults(defineProps<Props>(), {
  value: '',
  label: '',
  placeholder: '',
  required: false,
  disabled: false,
  meta: () => {
    return {
      autoComplete: false,
      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);

const canAutoComplete = computed(() => {
  if (isEmpty(props.meta)) return 'on';

  // Defaults to true
  return props.meta?.autoComplete !== false ? 'on' : 'off';
});

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>
  <input
    :id="id"
    ref="input"
    class="e-input-text"
    type="text"
    :name="id"
    :value="value"
    :disabled="isDisabled"
    :placeholder="placeholder"
    :required="required"
    :autocomplete="canAutoComplete"
    @input="debounceEmit($event, 500)"
    @blur="emit('blur', $event)"
    @keyup.enter="emit('keyup.enter', $event)"
  />
</template>

<style scoped lang="scss">
.e-input-text {
  background-color: var(--e-input-background);
  border: none;
  border-radius: 15px;
  color: var(--e-text-input-font-color);
  font-family: var(--e-text-input-font-family);
  font-size: var(--e-text-input-font-size);
  font-weight: var(--e-text-input-font-weight);
  line-height: var(--e-text-input-font-line-height);
  padding: 14px;

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

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