open-index/open-npm huggingface dataset:
npm package: @gabou/vue-forms
Description: - [Installation]() - [Usage]() - [Form props]() - [Field options]() - [Field types]()   - [text]()   - [textarea]()   - [password]()   - [email]()   - [phone]()   - [number]()   - [range]()   - [datetime]()   - [boolean]()   - [select]()   - [checkbox]() 
Latest version: 0.26.13

# 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

````vue
<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)<br />see [types]()       |
| name*       | String (required)                          |
| label       | String (optional)                          |
| placeholder | String (optional)                          |
| validations | Object (optional)<br />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