2FAuth/resources/js_vue3/components/formElements/FormField.vue

88 lines
2.0 KiB
Vue
Raw Normal View History

<template>
<div class="field" :class="{ 'pt-3' : hasOffset }">
<label :for="inputId" class="label" v-html="label"></label>
<div class="control">
<input
:disabled="isDisabled"
:id="inputId"
:type="inputType"
class="input"
v-model="form[fieldName]"
:placeholder="placeholder"
v-bind="$attrs"
v-on:change="$emit('field-changed', form[fieldName])"
:maxlength="this.maxLength"
/>
</div>
<FieldError :form="form" :field="fieldName" />
<p class="help" v-html="help" v-if="help"></p>
</div>
</template>
<script>
import { useIdGenerator } from '../../composables/helpers'
export default {
name: 'FormField',
inheritAttrs: false,
setup(props) {
const { inputId } = useIdGenerator(props.inputType, props.fieldName)
return { inputId }
},
data() {
return {
}
},
props: {
label: {
type: String,
default: ''
},
fieldName: {
type: String,
default: '',
required: true
},
inputType: {
type: String,
default: 'text'
},
form: {
type: Object,
required: true
},
placeholder: {
type: String,
default: ''
},
help: {
type: String,
default: ''
},
hasOffset: {
type: Boolean,
default: false
},
isDisabled: {
type: Boolean,
default: false
},
maxLength: {
type: Number,
default: null
}
}
}
</script>