<template>
  <component
    :is="component"
    ref="component"
    :class="{ _invalid: !isValid }"
    v-bind="{ ...$props, ...$attrs }"
    @input="onInput"
    @blur="onBlur"
  >
    <template #icon>
      <slot name="icon"></slot>
    </template>
    <template #append>
      <slot name="append"></slot>
    </template>
    <template #error>
      <slot name="error">
        {{ errorMessage }}
      </slot>
    </template>
  </component>
</template>

<script lang="ts" src="./index.ts"></script>
