<template>
  <component :is="label ? 'label' : 'div'" class="input">
    <span v-if="label" class="input__label">{{ label }}</span>
    <div class="input__wrapper">
      <div v-if="$slots.icon" class="input__icon">
        <slot name="icon" />
      </div>
      <input
        ref="input"
        :class="{ '_with-icon': $slots.icon }"
        :name="$attrs.name"
        :value="value"
        class="input__input"
        type="text"
        @input="$emit('input', $event)"
        @blur="$emit('blur')"
      />
      <div v-if="$slots.append" class="input__append">
        <slot name="append" />
      </div>
    </div>
    <div class="input__error">
      <slot name="error" />
    </div>
  </component>
</template>

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

<style lang="scss" scoped src="../index.scss" />
