55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<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>
|