Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/siebevh/cheetah-forms
Cheetah Forms is a simple JSON form builder for generating a Vuetify Form with just a JSON.
https://github.com/siebevh/cheetah-forms
composition-api form forms json json-form json-forms json-schema vue3 vuejs2 vuetify
Last synced: 3 months ago
JSON representation
Cheetah Forms is a simple JSON form builder for generating a Vuetify Form with just a JSON.
- Host: GitHub
- URL: https://github.com/siebevh/cheetah-forms
- Owner: siebevh
- License: mit
- Created: 2019-10-06T18:13:22.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T23:17:31.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T09:04:09.214Z (3 months ago)
- Topics: composition-api, form, forms, json, json-form, json-forms, json-schema, vue3, vuejs2, vuetify
- Language: Vue
- Homepage:
- Size: 1.9 MB
- Stars: 11
- Watchers: 3
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cheetah forms
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
Cheetah Forms
An Json Based Form Generator for Vuetify!
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
## Table of Contents
* [About the Project](#about-the-project)
* [Built With](#built-with)
* [Getting Started](#getting-started)
* [Prerequisites](#prerequisites)
* [Installation](#installation)
* [Usage](#usage)
* [Roadmap](#roadmap)
* [Contributing](#contributing)
* [License](#license)
* [Contact](#contact)
* [Acknowledgements](#acknowledgements)
## About The Project
Cheetah Forms is a simple JSON form builder for generating a Vuetify Form with just a JSON.
Cheetah Forms uses Vuetify to make you form a Material designed form
#### Fields Form
#### Groups Form
#### Features:
* JSON based
* Grid support
* Default fields
* Validation
* Default style
### Built With
* [Vuetify (v1.5)](https://vuetifyjs.com/en/)
* [Vue](https://vuejs.org/)
## Getting Started
### Prerequisites
This is an example of how to list things you need to use the software and how to install them.
* npm
```sh
npm install npm@latest -g
```
### Installation
1. Install NPM packages
```sh
npm install cheetah-form
```
## Usage
### Basic usage
```
```
##### with:
* `schema`: the json configuration of the form (required)
* `model`: the starting value of your model (required)
* `@save`: event for handeling the save (returns edited model)
### JSON FORM FORMAT
```
{
"code": "profile-parent",
"title": "title",
"subtitle": "subtitle",
"fields": [{
"type": "text-field",
"name": "Naam",
"required": true,
"model": "name",
"cols": {...}
},
"groups": []
}
```
##### with:
* `code`: the form unique code
* `title`: the title of the form (optional)
* `subtitle`: ths subtitle of the form (optional)
* `fields`: array of fields for the form (is ignored is groups has a value)
* `groups`: when you want to create a form of multiple parts use groups
### JSON FIELD FORMAT
```
{
"type": "text-field",
"name": "Name",
"required": true,
"disabled": false,
"placeholder": 'placeholder',
"hint": 'hint',
"model": "user.name",
"prefix": "+32",
"cols": 12
}
```
##### with:
* `type`: the type of field (check suported types) (required)
* `name`: the label of the field (required)
* `model`: model in doted notation (required)
* `required`: if the field is required or not (optional)
* `disabled`: if the field is disabled or not (optional)
* `placeholder`: the placeholder (optional)
* `hint`: the hint (optional)
* `prefix`: a prefix added before the field (optional)
* `cols`: the width of the field (1-12, default: 12)
### JSON GROUP FORMAT
```
{
"id": 1,
"title": "Name",
"fields": [],
}
```
##### with:
* `id`: id of the group (required)
* `title`: the title of the group (required)
* `fields`: array of fields (see Json Field format) (required)
### SUPPORTED TYPES
* `text-field`: a normal text field
###### special additional options:
* number field
```
attributes: {
type: 'number',
min: 1000
max: 1000
}
```
* `textarea`: a normal textarea
###### special additional options:
* `select`: a normal select
###### special additional options:
* string items
```
items: ['Men', 'Woman']
```
* object items
```
itemValue: 'key',
itemText: 'label',
items: [{
'label': 'label',
'key': 'someKey',
},{
'label': 'label2',
'key': 'someKey2',
}]
```
* `combobox`: a combobox
###### special additional options:
* string items
```
items: ['Men', 'Woman']
```
* object items
```
itemValue: 'key',
itemText: 'label',
items: [{
'label': 'label',
'key': 'someKey',
},{
'label': 'label2',
'key': 'someKey2',
}]
```
* `toggler`: a switch
###### special additional options:
* `radio`: radio
###### special additional options:
* object items
```
options: [{
'label': 'label',
'value': 'someKey',
},{
'label': 'label2',
'value': 'someKey2',
}]
```
* `checkbox`: a simple checkbox
###### special additional options:
* `password`: a password input field with hide and reviel option
###### special additional options:
## Roadmap
See the [open issues](https://github.com/siebevh/Cheetah-forms/issues) for a list of proposed features (and known issues).
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Siebe Vander Henst - [@vh_siebe](https://twitter.com/vh_siebe) - [email protected]
Project Link: [https://github.com/siebevh/Cheetah-forms](https://github.com/siebevh/Cheetah-forms)
## Acknowledgements
[contributors-shield]: https://img.shields.io/github/contributors/siebevh/Cheetah-forms.svg
[contributors-url]: https://github.com/siebevh/Cheetah-forms/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/siebevh/Cheetah-forms.svg
[forks-url]: https://github.com/siebevh/Cheetah-forms/network/members
[stars-shield]: https://img.shields.io/github/stars/siebevh/Cheetah-forms.svg
[stars-url]: https://github.com/siebevh/Cheetah-forms/stargazers
[issues-shield]: https://img.shields.io/github/issues/siebevh/Cheetah-forms.svg
[issues-url]: https://github.com/siebevh/Cheetah-forms/issues
[license-shield]: https://img.shields.io/github/license/siebevh/Cheetah-forms
[license-url]: https://github.com/siebevh/Cheetah-forms/blob/master/LICENSE.txt