vue-dynamic-form and clock

Install

# Install  (recommended)
npm i mobiotics-sunrise-form-clock

Setup in vue

import { DynamicForm, DymanicClock } from 'mobiotics-sunrise-form-clock'
import 'mobiotics-sunrise-form-clock/dist/mobiotics_sunrise_form_clock.css'

DynamicForm

  # props name: 
   dataset
 # dataset format: 
    {
      fields: {
        Username: { type: "text", value: "Enter username"},
        Password: { type: "password", value: "*********" },
        Gender: { type: "select", value: ["male", "female"] },
        City: { type: "select", value: ["Bangalore", "Delhi", "kolkata", "chennai"] },
        submit: { type: "button", value: "Submit" }
      },
      headerName: {title: "welcome", style: {color: 'red'} }
    };

 # u can use multiple text, select, password, button (one only) 

# callback 
    mobiotics-form

  here you will get select and entered data in your parent component   

DymanicClock

  no props and callback , just import and use 

code snippet

<template>
  <div>
      <DynamicForm :dataset="dataset"  @mobiotics-form="getData"></DynamicForm>
      <DynamicClock></DynamicClock>
  </div>
</template>

<script>
import { DynamicForm, DynamicClock } from 'mobiotics-sunrise-form-clock'
import 'mobiotics-sunrise-form-clock/dist/mobiotics_sunrise_form_clock.css'
export default {
  name: 'App',
  components: {
    DynamicForm,
    DynamicClock
  },
  methods: {
    getData(val) {
        // here you will get data
      console.log(val)
    }
  },
  created() {
    this.dataset = 
     { 
       fields: {
         "username": {
           type: 'text', value: 'enter username'},
         "password": {type:'password', value: '*********'},
         "gender": { type: 'select', value: ['male', "female"] },
         "city": { type: 'select', value: ['bengaluru', "delhi"] },
         "submit":  { type: 'button', value: 'ok'}
      }
    }
  }
}
</script>