Customized bootstrap vue form inputs for BS 5 and Vue 3
Wrapper components over the most commonly used bootstrap input components with support for vuelidate, vue i18n and vue 3 datepicker. Originally based on bootstrap-vue-next components, but since version 4 without this dependency.
Main goal is to simplify common bootstrap form design in my own projects.
npm install @tvaliasek/vue-form-inputs
# peer dependencies
npm install bootstrap
# for datepicker
npm install @vuepic/vue-datepicker
import { createApp } from 'vue'
import { FormInputsPlugin } from '@tvaliasek/vue-form-inputs'
import '@tvaliasek/vue-form-inputs/dist/vue-form-inputs.css'
import 'bootstrap/dist/css/bootstrap.css'
const app = createApp(App)
app.use(FormInputsPlugin())
// or import individual components
/*
FormInput
FormInputDatePicker
FormInputTextarea
FormInputSelect
FormInputRadioGroup
FormInputCheckbox
FormInputCheckboxGroup
FormInputFile
*/
<template>
<!-- Common text input with validation -->
<FormInput
id="htmlId"
label="Common text input"
:validation="validations.example"
v-model="example"
/>
</template>
<script setup>
import useVuelidate from '@vuelidate/core'
import { ref, computed } from 'vue'
import { required } from '@vuelidate/validators'
const example = ref('')
const validations = useVuelidate(computed(() => ({ example: { required } })), { example })
</script>
Common props for all components
prop |
type |
required |
default |
description |
label |
string |
false |
empty string |
Input label text |
size |
string |
false |
undefined |
Size of input - sm, lg or not set |
validationMessages |
object |
false |
empty object |
key - value pairs for validation messages |
validation |
object |
false |
empty object |
vuelidate validation entry instance |
disabled |
boolean |
false |
false |
Input html disabled attribute |
modelValue |
undefined |
false |
undefined |
v-model value |
hint |
string |
false |
undefined |
hint text for input displayed under form input |
id |
string |
false |
undefined |
Input html id attribute |
readOnly |
boolean |
false |
false |
toggle for readonly attribute |
prop |
type |
required |
default |
description |
type |
string |
false |
'text' |
Input html attribute type |
placeholder |
string |
false |
undefined |
input placeholder html attribute |
formatter |
function |
false |
undefined |
function to apply on value as formatter |
renderAsGroup |
boolean |
false |
false |
toggle for input group rendering, use slots default / append and prepend |
lazyFormatter |
boolean |
false |
true |
control behaviour of formatter function |
prop |
type |
required |
default |
description |
placeholder |
string |
false |
undefined |
input placeholder html attribute |
formatter |
function |
false |
undefined |
function to apply on value as formatter |
lazyFormatter |
boolean |
false |
true |
control behaviour of formatter function |
prop |
type |
required |
default |
description |
options |
array |
true |
undefined |
[{ value: 'someValue', text: 'Some value' }] |
multi |
boolean |
false |
false |
toggle for multiselect rendering |
selectSize |
number |
false |
undefined |
set number of rows for multiselect |
placeholder |
string |
false |
undefined |
input placeholder html attribute |
renderAsGroup |
boolean |
false |
false |
toggle for input group rendering, use slots default / append and prepend |
Radio group, Checkbox group
prop |
type |
required |
default |
description |
options |
array |
true |
undefined |
[{ value: 'someValue', text: 'Some value' }] |
stacked |
boolean |
false |
true |
toggle to render inputs side by side |
prop |
type |
required |
default |
description |
renderAsSwitch |
boolean |
false |
false |
toggle to render input as switch |
Datepicker is wrapped @vuepic/vue-datepicker
prop |
type |
required |
default |
description |
locale |
string |
false |
cs-CZ |
language code for Intl |
minDate |
Date |
false |
undefined |
minimal date for calendar |
maxDate |
Date |
false |
undefined |
maximal date for calendar |
enableTime |
boolean |
false |
false |
toggle for date and time selection |
ignoreTimeValidation |
boolean |
false |
true |
validate only date part |
dateFormat |
function |
false |
undefined |
custom date formatter function |
placeholder |
string |
false |
undefined |
input placeholder html attribute |
enforceUtc |
boolean |
false |
undefined |
enforces UTC format |
defaultTime |
{ hours: string | number, minutes: string | number, seconds: string | number } |
false |
undefined |
sets default time |
prop |
type |
required |
default |
description |
multiple |
boolean |
false |
false |
set to true to enable multiple file selection |
accept |
string or string[] |
false |
[] |
define list of extensions or mime type patterns allowed for selection, model value is automatically filtered using these patterns |
If vue i18n is detected, please add these translations:
{
"cs": {
"vueFormInputs": {
"feedback": {
"required": "Toto pole je nutné vyplnit.",
"minLength": "Hodnota musí být minimálně {minLength} znaků dlouhá.",
"maxLength": "Hodnota musí být maximálně {maxLength} znaků dlouhá.",
"minValue": "Hodnota musí být minimálně {minValue}.",
"maxValue": "Hodnota musí být maximálně {maxValue}.",
"between": "Hodnota musí být mezi {betweenMin} a {betweenMax}.",
"alpha": "Jsou povoleny pouze písmena.",
"alphaNum": "Jsou povoleny pouze písmena a čísla.",
"numeric": "Jsou povoleny pouze čísla.",
"integer": "Jsou povolena pouze celá čísla.",
"decimal": "Jsou povolena pouze desetinná čísla.",
"email": "Chybný formát emailové adresy.",
"ipAddress": "Chybný formát IP adresy.",
"macAddress": "Chybný formát MAC adresy.",
"sameAs": "Hodnota není shodná.",
"url": "Chybný formát URL adresy.",
"validatedEmail": "Nefunkční nebo chybná emailová adresa.",
"invalidValue": "Chybně vyplněná hodnota."
}
}
},
"en": {
"vueFormInputs": {
"feedback": {
"required": "This field must be filled.",
"minLength": "The value must be at least {minLength} characters long.",
"maxLength": "The value must be at most {maxLength} characters long.",
"minValue": "The value must be at least {minValue}.",
"maxValue": "The value must be at most {maxValue}.",
"between": "The value must be between {betweenMin} and {betweenMax}.",
"alpha": "Only letters are allowed.",
"alphaNum": "Only letters and numbers are allowed.",
"numeric": "Only numbers are allowed.",
"integer": "Only whole numbers are allowed.",
"decimal": "Only decimal numbers are allowed.",
"email": "Incorrect email address format.",
"ipAddress": "Incorrect IP address format.",
"macAddress": "Incorrect MAC address format.",
"sameAs": "The values are not identical.",
"url": "Incorrect URL address format.",
"validatedEmail": "Broken or incorrect email address.",
"invalidValue": "Incorrectly filled value."
}
}
}
}