opnform/resources/js/components/forms/TextInput.vue

85 lines
2.2 KiB
Vue

<template>
<input-wrapper
v-bind="$props"
>
<template #label>
<slot name="label" />
</template>
<input :id="id?id:name" v-model="compVal" :disabled="disabled"
:type="nativeType"
:pattern="pattern"
:style="inputStyle"
:class="[theme.default.input, { '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled }]"
:name="name" :accept="accept"
:placeholder="placeholder" :min="min" :max="max" :maxlength="maxCharLimit"
@change="onChange" @keydown.enter.prevent="onEnterPress"
>
<template v-if="maxCharLimit && showCharLimit" #bottom_after_help>
<small :class="theme.default.help">
{{ charCount }}/{{ maxCharLimit }}
</small>
</template>
<template #error>
<slot name="error" />
</template>
</input-wrapper>
</template>
<script>
import { inputProps, useFormInput } from './useFormInput.js'
import InputWrapper from './components/InputWrapper.vue'
export default {
name: 'TextInput',
components: { InputWrapper },
props: {
...inputProps,
nativeType: { type: String, default: 'text' },
accept: { type: String, default: null },
min: { type: Number, required: false, default: null },
max: { type: Number, required: false, default: null },
maxCharLimit: { type: Number, required: false, default: null },
showCharLimit: { type: Boolean, required: false, default: false },
pattern: { type: String, default: null }
},
setup (props, context) {
const {
compVal,
inputStyle,
hasValidation,
hasError
} = useFormInput(props, context, props.nativeType === 'file' ? 'file-' : null)
const onChange = (event) => {
if (props.nativeType !== 'file') return
const file = event.target.files[0]
// eslint-disable-next-line vue/no-mutating-props
props.form[props.name] = file
}
const onEnterPress = (event) => {
event.preventDefault()
return false
}
return {
compVal,
inputStyle,
hasValidation,
hasError
}
},
computed: {
charCount () {
return (this.compVal) ? this.compVal.length : 0
}
}
}
</script>