85 lines
2.2 KiB
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>
|