Forms
Validation form Preview link
<form class="row g-3 needs-validation" novalidate @submit.prevent="onCustomSubmit">
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltip01">First name</label>
<input type="text" class="form-control"
v-bind:class="Submitted ? inputs.firstname.errorMessage.length ? 'is-invalid' : 'is-valid' : ''"
id="name" placeholder="Your name" v-model="inputs.firstname.data">
<div class="invalid-tooltip" v-if="inputs.firstname.errorMessage.length">{{
inputs.firstname.errorMessage
}}</div>
<div class="valid-tooltip" v-else>Looks Good!</div>
</div>
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltip02">Last name</label>
<input class="form-control" type="text"
v-bind:class="Submitted ? inputs.lastname.errorMessage.length ? 'is-invalid' : 'is-valid' : ''"
id="name" placeholder="Your name" v-model="inputs.lastname.data">
<div class="invalid-tooltip" v-if="inputs.lastname.errorMessage.length">{{
inputs.lastname.errorMessage
}}</div>
<div class="valid-tooltip" v-else>Looks Good!</div>
</div>
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltipUsername">Username</label>
<div class="input-group has-validation"><span class="input-group-text"
id="validationTooltipUsernamePrepend">@</span>
<input class="form-control" id="validationCustomUsername" type="text"
v-bind:class="Submitted ? inputs.username.errorMessage.length ? 'is-invalid' : 'is-valid' : ''"
placeholder="Username" v-model="inputs.username.data">
<div class="invalid-tooltip" v-if="inputs.username.errorMessage.length">{{
inputs.username.errorMessage
}}</div>
<div class="valid-tooltip" v-else>Looks Good!</div>
</div>
</div>
<div class="col-md-6 position-relative">
<label class="form-label" for="validationTooltip03">City</label>
<input class="form-control" id="validationCustom03" type="text"
v-bind:class="Submitted ? inputs.city.errorMessage.length ? 'is-invalid' : 'is-valid' : ''"
placeholder="City" required v-model="inputs.city.data">
<div class="invalid-tooltip" v-if="inputs.city.errorMessage.length">{{ inputs.city.errorMessage }}
</div>
<div class="valid-tooltip" v-else>Looks Good!</div>
</div>
<div class="col-md-3 position-relative">
<label class="form-label" for="validationTooltip04">State</label>
<select class="form-select" id="validationCustom04"
v-bind:class="Submitted ? inputs.state.errorMessage.length ? 'is-invalid' : 'is-valid' : ''"
v-model="inputs.state.data" required>
<option selected disabled value="">Choose...</option>
<option v-for="(value, index) in optionValues" :value="value" :key="value + index">{{ value }}
</option>
</select>
<div class="invalid-tooltip" v-if="inputs.state.errorMessage.length">{{ inputs.state.errorMessage }}
</div>
<div class="valid-tooltip" v-else>Looks Good!</div>
</div>
<div class="col-md-3 position-relative">
<label class="form-label" for="validationTooltip05">Zip</label>
<input class="form-control" id="validationCustom05" type="text"
v-bind:class="Submitted ? inputs.zip.errorMessage.length ? 'is-invalid' : 'is-valid' : ''"
v-model="inputs.zip.data" placeholder="Zip" required>
<div class="invalid-tooltip" v-if="inputs.zip.errorMessage.length">{{ inputs.zip.errorMessage }}
</div>
<div class="valid-tooltip" v-else>Looks Good!</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>Inside Your script tags add
import { onCustomSubmit, inputs, Submitted, optionValues } from "@/composables/commen/validationForm"
Inside Your ts tags add
import { ref } from 'vue'
interface InputData {
data: string;
errorMessage: string;
}
interface Inputs {
firstname: InputData;
lastname: InputData;
username: InputData;
city: InputData;
state: InputData;
zip: InputData;
password: InputData
}
interface ErrorObject {
message: string;
code: number;
}
export const errors = ref<ErrorObject[]>([])
export const optionValues = ref<string[]>(['U.S', 'Thailand', 'India', 'U.K'])
export const inputs = ref<Inputs>({
firstname: {
data: 'Mark',
errorMessage: 'asdasd',
}, lastname: {
data: 'Otto',
errorMessage: ''
}, username: {
data: '',
errorMessage: ''
}, city: {
data: '',
errorMessage: ''
}, state: {
data: '',
errorMessage: ''
}, zip: {
data: '',
errorMessage: ''
}, password: {
data: '',
errorMessage: ''
}
})
export const formSubmitted = ref<boolean>(false)
export const Submitted = ref<boolean>(false)
export function onCustomSubmit() {
Submitted.value = true;
const values = inputs.value
values.firstname.data.length < 3 ? values.firstname.errorMessage = 'Please choose a firstname' : values.firstname.errorMessage = ''
values.lastname.data.length < 3 ? values.lastname.errorMessage = 'Please choose a lastname.' : values.lastname.errorMessage = ''
values.username.data.length < 3 ? values.username.errorMessage = 'Please choose a username.' : values.username.errorMessage = ''
values.city.data.length < 3 ? values.city.errorMessage = 'Please provide a valid city.' : values.city.errorMessage = ''
values.state.data.length < 1 ? values.state.errorMessage = 'Please select a valid state.' : values.state.errorMessage = ''
values.zip.data.length < 7 ? values.zip.errorMessage = 'Please provide a valid zip.' : values.zip.errorMessage = ''
}
Base input Preview link
<form class="form theme-form">
<div class="card-body p-0">
<div class="row">
<div class="col">
<div class="mb-3">
<label class="form-label" for="exampleFormControlInput1">Email address</label>
<input class="form-control" id="exampleFormControlInput1" type="email" placeholder="name@example.com" data-bs-original-title="" title="">
</div>
</div>
</div>
</div>
</form>Checkbox & Radio Preview link
<div class="row">
<div class="custom-radio-ml col-lg-3 col-md-6">
<div class="form-check radio radio-primary">
<input class="form-check-input" id="radio1" type="radio" name="radio1" value="option1" data-bs-original-title="" title="">
<label class="form-check-label" for="radio1">Option<span class="digits"> 1</span></label>
</div>
<div class="form-check radio radio-primary">
<input class="form-check-input" id="radio3" type="radio" name="radio1" value="option1" disabled="" data-bs-original-title="" title="">
<label class="form-check-label" for="radio3">Disabled</label>
</div>
<div class="form-check radio radio-primary">
<input class="form-check-input" id="radio4" type="radio" name="radio1" value="option1" checked="" data-bs-original-title="" title="">
<label class="form-check-label" for="radio4">Checked</label>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="form-check checkbox mb-0">
<input class="form-check-input" id="checkbox1" type="checkbox" data-bs-original-title="" title="">
<label class="form-check-label my-0" for="checkbox1">Default</label>
</div>
<div class="form-check checkbox mb-0">
<input class="form-check-input" id="checkbox2" type="checkbox" disabled="" data-bs-original-title="" title="">
<label class="form-check-label my-0" for="checkbox2">Disabled</label>
</div>
<div class="form-check checkbox mb-0">
<input class="form-check-input" id="checkbox3" type="checkbox" checked="" data-bs-original-title="" title="">
<label class="form-check-label my-0" for="checkbox3">Checked</label>
</div>
</div>
</div>Input group Preview link
<form>
<div class="mb-3 m-form__group">
<div class="form-label">Left Addon</div>
<div class="input-group">
<span class="input-group-text">@</span>
<input class="form-control" type="text" placeholder="Email" data-bs-original-title="" title="">
</div>
</div>
</form>Datepicker Offical link Preview link
npm i vue3-datepickerIn your main.ts file all the following code:
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
.component('Datepicker', Datepicker)Inside Your template tags add
<datepicker datepicker class=" datetimepicker-input digits" v-model="date" :format="format" />
Inside Your script tags add
import { ref } from 'vue';
const date = ref(null);
const format = (date: Date | null): string => {
if (date === null) {
return '';
}
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return ` ${day}/${month}/${year}`;
}; Switch Preview link
<label class="switch">
<input type="checkbox" checked="" data-bs-original-title="" title="">
<span class="switch-state"></span>
</label>
<label class="switch">
<input type="checkbox" data-bs-original-title="" title="">
<span class="switch-state"></span>
</label>Touchspin Offical link Preview link
Inside Your template tags add
<button class="decrement-touchspin btn-touchspin touchspin-primary" @click="secondaryDecrement()"><i
class="fa fa-minus"></i></button>
<input class="input-touchspin spin-outline-primary" type="number" v-model="conter1"><span
class="input-group-text">%</span>
<button class="increment-touchspin btn-touchspin touchspin-primary" @click="secondaryIncrement()"><i
class="fa fa-plus"></i></button>Inside Your script tags add
import { ref, defineAsyncComponent } from 'vue'
const conter = ref<number>(0)
const conter1 = ref<number>(0)
function primeryIncrement() {
conter.value++
}
function primeryDecrement() {
if (conter.value > 0) {
conter.value--
}
}
function secondaryIncrement() {
conter1.value++
}
function secondaryDecrement() {
if (conter1.value > 0) {
conter1.value--
}
}
Select2 Offical link Preview link
Default Placeholder
npm i vue-multiselectInside Your template tags add
<multiselect v-model="multiValue" tag-placeholder="Add this as new tag" placeholder="Select Your Name"
label="name" track-by="code" :options="options" :multiple="true" :taggable="true"></multiselect>In your main.ts file all the following code:
import Multiselect from 'vue-multiselect'
import "vue-multiselect/dist/vue-multiselect.css"
.component('multiselect', Multiselect)Inside Your script tags add
import { ref, defineAsyncComponent } from 'vue';
interface multi {
code: number,
name: string,
}
const multiValue = ref([])
const options = ref([
{ code: 1, name: 'Alabama' },
{ code: 2, name: 'Wyoming' },
{ code: 3, name: 'Coming' },
{ code: 4, name: 'Hanry Die' },
{ code: 5, name: 'John Doe' }
])
Typeahead Offical link Preview link
npm i vue3-simple-typeaheadIn your main.ts file all the following code:
import SimpleTypeahead from 'vue3-simple-typeahead';
import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css';
.use(SimpleTypeahead)Inside Your template tags add
<vue3-simple-typeahead :items="list" class="form-control typeahead form-control" :placeholder="options.placeholder" @onInput="onInput" @onBlur="onBlur" :minInputLength="options.minInputLength" />
Inside Your script tags add
import { options, list, onInput, onBlur } from "@/composables/commen/typeaheadview"
In your composables typeaheadview.ts file all the following code:
import { ref, onMounted } from "vue";
onMounted(() => {
listFiltered.value = list.value;
})
interface data {
placeholder: string,
minInputLength: number,
hint: boolean
}
export const options = ref({
placeholder: 'States of USA',
minInputLength: 1,
hint: false
})
export const listFiltered = ref([])
export const list = ref(['alabama',
'alaska',
'arizona',
'arkansas',
'california',
'colorado',
'connecticut',
'delaware',
'florida',
'georgia',
'hawaii',
'idaho',
'illinois',
'indiana',
'iowa',
'kansas',
'kentucky',
'louisiana',
'maine',
'maryland',
'massachusetts',
'michigan',
'minnesota',
'mississippi',
'missouri',
'montana',
'nebraska',
'nevada',
'new hampshire',
'new jersey',
'new mexico',
'new york',
'north carolina',
'north dakota',
'ohio',
'oklahoma',
'oregon',
'pennsylvania',
'rhode island',
'south carolina',
'south dakota',
'tennessee',
'texas',
'utah',
'vermont',
'virginia',
'washington',
'west virginia',
'wisconsin',
'wyoming',
])
export function selectItem(item: any) {
// options.value.selection = item;
}
export function onInput(event: any) {
// this.data.selection = null;
// this.data.input = event.input;
listFiltered.value = event.items;
}
export function onBlur(event: any) {
// this.data.input = event.input;
listFiltered.value = event.items;
} Form wizard Preview link
npm i form-wizard-vue3Inside Your template tags add
<Wizard round-tabs :custom-tabs="[
{
},
{
},
{
},
{
},
]" :nextButton="{
text: 'Next',
hideIcon: true,
hideText: false,
}" :backButton="{
text: 'Back',
hideText: false,
hideIcon: true,
}" :doneButton="{
text: 'Finish!',
hideIcon: true,
icon: 'file',
}" @change="onChangeCurrentTab" :beforeChange="onTabBeforeChange">
<div class="col-xs-12" v-if="currentTabIndex === 0">
<div class="col-md-12">
<div class="mb-3">
<label class="control-label">First Name</label>
<input class="form-control" type="text" placeholder="Johan" required>
</div>
<div class="mb-3">
<label class="control-label">Last Name</label>
<input class="form-control" type="text" placeholder="Deo" required>
</div>
</div>
</div>
<div class="col-xs-12 " v-if="currentTabIndex === 1">
<div class="col-md-12">
<div class="mb-3">
<label class="control-label">Email</label>
<input class="form-control" type="text" placeholder="name@example.com" required>
</div>
<div class="mb-3">
<label class="control-label">Password</label>
<input class="form-control" type="password" placeholder="Password" required>
</div>
</div>
</div>
<div class="col-xs-12 " v-if="currentTabIndex === 2">
<div class="col-md-12">
<div class="mb-3">
<label class="control-label">Birth date</label>
<input class="form-control" type="date" required>
</div>
<div class="mb-3">
<label class="control-label">Have Passport</label>
<input class="form-control" type="text" placeholder="yes/No" required>
</div>
</div>
</div>
<div class="col-xs-12 " v-if="currentTabIndex === 3">
<div class="col-md-12">
<div class="mb-3">
<label class="control-label">State</label>
<input class="form-control mt-1" type="text" placeholder="State" required>
</div>
<div class="mb-3">
<label class="control-label">City</label>
<input class="form-control mt-1" type="text" placeholder="City" required>
</div>
</div>
</div>
</Wizard>Inside Your script tags add
import { ref, onMounted, defineAsyncComponent } from "vue"
import "form-wizard-vue3/dist/form-wizard-vue3.css";
import Wizard from 'form-wizard-vue3'
const currentTabIndex = ref()
onMounted(() => {
currentTabIndex.value = 0
}),
function onChangeCurrentTab(index: number, oldIndex: number) {
currentTabIndex.value = index;
}
function onTabBeforeChange() {
if (currentTabIndex.value === 0) {
}
}
Inside Your chartist-chart.ts tags add