RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-25 14:56:03 +03:00
Code Issues Projects Releases Wiki Activity

Readme updated

Browse Source
This commit is contained in:
1on 2020-05-22 14:21:54 +03:00
parent 348f3aa017
commit e8a6411ddd
1 changed files with 77 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
README.md
View File

@ -1,84 +1,91 @@
<p align="center"><a href="https://vueformulate.com" target="_blank" rel="noopener noreferrer"><img width="100" src="https://assets.wearebraid.com/vue-formulate/logo.png" alt="VueFormulate"></a></p>
## What is Vue Formulario?
<p align="center">
<a href="https://travis-ci.org/wearebraid/vue-formulate"><img src="https://travis-ci.org/wearebraid/vue-formulate.svg?branch=master"></a>
<a href="https://www.npmjs.com/package/@braid/vue-formulate"><img alt="npm" src="https://img.shields.io/npm/v/@braid/vue-formulate"></a>
<a href="https://github.com/wearebraid/vue-formulate"><img alt="GitHub" src="https://img.shields.io/github/license/wearebraid/vue-formulate"></a>
<a href=""><img src="https://img.badgesize.io/wearebraid/vue-formulate/master/dist/formulate.esm.js.svg?compression=gzip&label=gzip"></a>
</p>
Vue Formulario is a library, based on <a href="https://vueformulate.com">Vue Formulate</a>, that handling the core logic for working with forms and gives full control of form presentation.
<p align="center">
<a href="https://vueformulate.com">Documentation Website</a>
</p>
## Examples
## What is Vue Formulate?
Every form control must be rendered inside FormularioInput component. This component provides `id` and `context` in v-slot props. Control should use `context.model` as v-model and `context.blurHandler` as handler for `blur` event (it is necessary for validation when property `errorBehavior` is `blur`). Errors list for field can be accessed through `context.allErrors`.
Vue Formulate is the easiest way to build forms with Vue. Please read the [comprehensive documentation](https://vueformulate.com) for live code examples and guidance on using Vue Formulate in your own projects.
Next example creates form for data
```json
{
"username": "",
"password": "",
"options": {
"anonym": false,
"tags": ["test"]
},
}
```
<p align="center"><a href="https://vueformulate.com"><img src="https://assets.wearebraid.com/vue-formulate/read-the-docs.png" /></a></p>
```html
<FormularioForm
v-model="formData"
name="formName"
>
<FormularioInput
v-slot="vSlot"
name="username"
validation="required|email"
error-behavior="live"
>
<input
v-model="vSlot.context.model"
type="text"
@blur="vSlot.context.blurHandler"
>
<div v-if="vSlot.context.showValidationErrors">
<span
v-for="(error, index) in vSlot.context.allErrors"
:key="index"
>
{{ error }}
</span>
</div>
</FormularioInput>
<FormularioInput
v-slot="vSlot"
name="password"
validation="required|min:4,length"
>
<input
v-model="vSlot.context.model"
type="password"
>
</FormularioInput>
<table style="width: 100%;">
<tr>
<th colspan="2">
<h3>Key features</h3>
</th>
<tr>
<tr>
<td style="width: 50%; vertical-align: top;">
<h4 style="margin-top: 0.25em">😎 Developer happiness</h4>
<p>Forms are everywhere, yet surprisingly tedious to author — well, not anymore. Vue Formulate provides a <a href="https://vueformulate.com/guide/inputs/#all-options">powerful and flexible API</a> to developers that makes complex form creation a breeze.</p>
</td>
<td style="width: 50%; vertical-align: top;">
<h4 style="margin-top: 0.25em;">☝️ A single input element</h4>
<p>With Vue Formulate you don't need to remember the names of a dozen components — all form elements are created with a <a href="https://vueformulate.com/guide/#inputs">single component</a>. Easy!</p>
</td>
</tr>
<tr>
<td style="width: 50%; vertical-align: top;">
<h4 style="margin-top: 0.25em">💪 Grouped fields</h4>
<p>Vue Formulate ships with <a href="https://vueformulate.com/guide/inputs/types/group/#repeatable-groups">repeatable field groups</a> out of the box. Create complex UIs such as multi-person booking forms with ease.</p>
</td>
<td style="width: 50%; vertical-align: top;">
<h4 style="margin-top: 0.25em;">🎯 Built-in validation</h4>
<p>Ridiculously easy <a href="https://vueformulate.com/guide/validation">validation</a> out-of-the-box to handle 95% of use-cases. Help text, validation rules, and validation messages are simple props. Need more? You can add custom validations too.</p>
</td>
</tr>
<tr>
<td style="width: 50%; vertical-align: top;">
<h4 style="margin-top: 0.25em">🔌 Plugin system</h4>
<p>Extend Vue Formulate's functionality or reuse custom inputs, validation rules, and messages across projects by tapping into the <a href="https://vueformulate.com/guide/plugins/#creating-a-new-plugin">plugin system</a>. Make your plugin open source to share with others!</p>
</td>
<td style="width: 50%; vertical-align: top;">
<h4 style="margin-top: 0.25em;">✨ Generate forms</h4>
<p><a href="https://vueformulate.com/guide/forms/#generating-forms">Generate an entire form</a> from a JSON string. Because Vue Formulate uses a single input component, you can easily loop through an array and dynamically generate a form.</p>
</td>
</tr>
</table>
<FormularioGrouping name="options">
<FormularioInput
v-slot="vSlot"
name="anonym"
>
<div>
<input
:id="vSlot.id"
v-model="vSlot.context.model"
type="checkbox"
>
<label :for="vSlot.id">As anonym</label>
</div>
</FormularioInput>
</FormularioGrouping>
These features and many more are covered thoroughly at the [documentation website](https://vueformulate.com).
<p align="center"><a href="https://vueformulate.com"><img src="https://assets.wearebraid.com/vue-formulate/read-the-docs.png" /></a></p>
## Contributing
Vue Formulate is and always will be _free_ and _open source_. There are many ways available for you to [contribute to Vue Formulate](https://vueformulate.com/guide/contributing/).
#### Core Codebase Contributors
This project exists thanks to all the people who volunteer their time to [contribute](https://vueformulate.com/guide/contributing/)
<a href="https://github.com/wearebraid/vue-formulate/graphs/contributors"><img src="https://contributors-img.web.app/image?repo=wearebraid/vue-formulate" /></a>
#### Localization Contributors
Vue Formulate is translated into different languages by volunteer native language speakers. Localizations are located in the [Vue Formulate Internationalization repo](https://github.com/wearebraid/vue-formulate-i18n).
<a href="https://github.com/wearebraid/vue-formulate-i18n/graphs/contributors"><img src="https://contributors-img.web.app/image?repo=wearebraid/vue-formulate-i18n" /></a>
<FormularioInput
v-slot="vSlot"
name="options.tags[0]"
>
<input
v-model="vSlot.context.model"
type="text"
>
</FormularioInput>
</FormularioForm>
```
## License
[MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2020-present, [RetailDriver LLC] <br>
Copyright (c) 2020-present, [Braid LLC](https://www.wearebraid.com/)