<template>
  <div class="row form-group mt-3" :key="$attrs.key">
    <label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'"
      >{{ getLabel() }}:</label
    >
    <div class="mt-2" :class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]">
      <input
      @focus="clearErrors"
      @blur="validate"
      @input="$emit('oninput', $event)"
      @paste="$emit('oninput',$event)"
      @keydown.enter="$emit('keydown', $event)"
      class="form-control"
      
      :placeholder="localFormElement.placeholder"
      :type="localFormElement.type"
      :id="localFormElement.key"
      :name="localFormElement.key"
      v-model="textValue"
    />
    </div>
   
    <div class="error" v-if="hasError">
      {{localFormElement.validate_err?.length ? localFormElement.validate_err : $t("IsRequired") }}
    </div>
  </div>
</template>

<script>
import formBuilderMixin from "@mixins/formBuilderMixin";
export default {
  mixins: [formBuilderMixin],
  
};
</script>
<style scoped lang="scss">
.form-control {
  position: relative !important;
}
.button-input {
  background-color: unset !important;
  position: absolute !important;
  left: 2px !important;
  height: 100% !important;
  border: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.error{
  font-size: 0.8rem;
  color: #f04124;
}
</style>