78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<div class="row form-group mt-3" :key="$attrs.key" v-if="$attrs.brand == 'borhan'">
|
||
|
|
<label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'"
|
||
|
|
>{{ localFormElement.label }}:</label
|
||
|
|
>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="d-flex mt-2"
|
||
|
|
:class="[$attrs.inputClass ?? ' col-md-9', { error: hasError }]"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
@focus="clearErrors"
|
||
|
|
@blur="validate"
|
||
|
|
@keydown.enter.prevent="sendTextValue"
|
||
|
|
class="form-control"
|
||
|
|
:placeholder="localFormElement.placeholder"
|
||
|
|
:type="localFormElement.type"
|
||
|
|
:id="localFormElement.key"
|
||
|
|
:name="localFormElement.key"
|
||
|
|
v-model="textValue"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-light button-input"
|
||
|
|
:class="$attrs.buttonClass"
|
||
|
|
@click.prevent="sendTextValue"
|
||
|
|
style="width: 4em"
|
||
|
|
>
|
||
|
|
<svg class="icon icon-Component-233--1">
|
||
|
|
<use xlink:href="#icon-Component-233--1"></use>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row form-group mt-3" :key="$attrs.key" v-else>
|
||
|
|
<label :for="localFormElement.key" :class="$attrs.labelClass ?? 'col-md-3'"
|
||
|
|
>{{ localFormElement.label }}:</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>
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
</style>
|