<template>
  <div class="field">
    <label
      v-if="label"
      :for="name"
    >{{ label }}</label>
    <input
      :id="name"
      :type="type"
      :name="name"
      :placeholder="placeholder"
      :value="value"
      :maxlength="maxlength"
      class="input"
      @input="handleInput"
    >
  </div>
</template>

<script>
export default {
  name: 'CuInput',
  props: {
    type: {
      type: String,
      default: 'text'
    },
    name: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    maxlength: {
      type: String,
      default: '1000'
    }
  },
  methods: {
    handleInput (e) {
      this.$emit('input', e)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../styles/colors.scss";

.field {
  margin: 1.6rem 0;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

label {
  font-size: 1.3rem;
  display: block;
  margin-bottom: 12px;
}

.input {
  display: block;
  border: none;
  border-bottom: 1px solid $border-gray;
  width: calc(100% - 2rem);
  padding: 1.2rem 0 1.6rem 0;
  color: $black;
  font-size: 1.5rem;

  &:focus {
    outline: none !important;
    border: none;
    border-bottom: 1px solid $border-gray;
  }

  &::placeholder {
    color: $silver;
  }

  &::-webkit-input-placeholder {
    color: $silver;
  }
}
</style>
