import { onCustomSubmit, inputs, Submitted, optionValues } from "@/composables/commen/validationForm"
                                             

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 let errors = ref<ErrorObject[]>([])
 
 export let optionValues = ref<string[]>(['U.S', 'Thailand', 'India', 'U.K'])
 export let 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 let formSubmitted = ref<boolean>(false)
 export let Submitted = ref<boolean>(false)
 
 
 export function onCustomSubmit() {
     Submitted.value = true;
     let 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 = ''
 }
   

npm i vue3-datepicker

<datepicker  datepicker class=" datetimepicker-input digits" v-model="date" :format="format" />

import { ref } from 'vue';
                  let 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}`;
                    };

import { ref, defineAsyncComponent } from 'vue'
                    let conter = ref<number>(0)
                    function primeryIncrement() {
                        conter.value++
                    }
                    function primeryDecrement() {
                        if (conter.value > 0) {
                            conter.value--
                        }
                    }
                                      

npm i vue3-simple-typeahead

<vue3-simple-typeahead :items="list" class="form-control typeahead form-control" :placeholder="options.placeholder" @onInput="onInput" @onBlur="onBlur" :minInputLength="options.minInputLength"  />

import { options, list, onInput, onBlur } from "@/composables/commen/typeaheadview"

import { ref, onMounted } from "vue";
onMounted(() => {
listFiltered.value = list.value;
})
interface data {
placeholder: string,
minInputLength: number,
hint: boolean
}
export let options = ref({
placeholder: 'States of USA',
minInputLength: 1,
hint: false
})
export let listFiltered = ref([])
export let 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 onInput(event: any) {

listFiltered.value = event.items;
}
export function onBlur(event: any) {

listFiltered.value = event.items;
}

 <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>

 import { ref, onMounted, defineAsyncComponent } from "vue"
                  import "form-wizard-vue3/dist/form-wizard-vue3.css";
                  import Wizard from 'form-wizard-vue3'
                 
                  let currentTabIndex = ref()
                  onMounted(() => {
                      currentTabIndex.value = 0
                  }),
                      function onChangeCurrentTab(index: number, oldIndex: number) {
                          currentTabIndex.value = index;
                      }
                  function onTabBeforeChange() {
                      if (currentTabIndex.value === 0) {
                      }
                  }