vue-forms

• Installation
• Usage
• Form props
• Field options
• Field types
  • text
  • textarea
  • password
  • email
  • phone
  • number
  • range
  • datetime
  • boolean
  • select
  • checkbox
  • radio
  • file
  • json
  • fieldset
  • repeater
• Field validations
• Todo

Installation

Currently, you need to copy the vue-forms folder from components and install vuelidate by yourself using npm or yarn

Usage

<template>
  <vue-forms
    name="post"
	:fields="fields"
	:values="values"
	:onSubmit="save"
  />
</template>

<script>
import VueForms from 'vue-forms'

export default {
  components: {
    VueForms
  },
  data () {
    return {
      fields: [
        {
          type: 'text',
          name: 'title'
        },
        {
          type: 'textarea',
          name: 'content'
        }
      ],
      values: {
        title: 'My title',
        content: 'My content'
      }
    }
  },
  methods: {
    save (data, updatedData) {
      console.log('save', data, updatedData)
    }
  }
}
</script>

Form props

| Name | Value | | ----------- | ------------------------------------------ | | name* | String (required) | | fields* | Array (required) | | values | Object (optional) | | onSubmit | Function (optional) |

Field options

| Name | Value | | ----------- | ------------------------------------------ | | type* | String (required)see types | | name* | String (required) | | label | String (optional) | | placeholder | String (optional) | | validations | Object (optional)see validations |

Field types

text

String or undefined

textarea

String or undefined

password

String or undefined

email

String or undefined

phone

String or undefined

number

Number or undefined

range

Number or undefined

datetime

String or undefined

boolean

Boolean or undefined

select

String or Array or undefined

checkbox

Array or undefined

radio

String or undefined

file

String (base64) or Array (base64) or undefined

json

String or undefined

fieldset

Object or undefined

repeater

Array or undefined

Field validations

Todo

• [ ] Field label
• [ ] Field placeholder
• [ ] Form themes (material, bootstrap, ...)
• [ ] Create npm package