https://github.com/221B-io/quasar-alpaca-form-builder
https://github.com/221B-io/quasar-alpaca-form-builder
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/221B-io/quasar-alpaca-form-builder
- Owner: 221B-io
- Archived: true
- Created: 2019-05-01T19:07:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-09T18:40:56.000Z (over 6 years ago)
- Last Synced: 2025-03-18T12:51:08.547Z (8 months ago)
- Language: Vue
- Size: 13.7 KB
- Stars: 13
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- quasar-awesome - alpaca-forms
README
# Alpaca Quasar App Extension
Alpaca component built for use in quasar
# Install
First link the extension to your app
```bash
npm link quasar-app-extension-alpaca-forms
```
Then invoke the component
```bash
quasar ext invoke alpaca-forms
```
# Usage
- Add the formBuilder component to your desired .vue file
``
- Example **formData**:
```json
formData: {
"title": "test title"
}
```
- Example **schema**:
```json
schema: {
"schema": {
"type": "object",
"properties": {
"author": {
"title": "Authors/Editor",
"type": "array",
"items": {
"title": "Authors",
"type": "object",
"properties": {
"family": {
"title": "First Name",
"type": "string",
"required": false
},
"authorMName": {
"title": "Middle Name",
"type": "string",
"required": false
},
"given": {
"type": "string",
"required": false,
"title": "Last Name"
}
},
"required": false
},
"required": false
},
"title": {
"type": "string",
"required": false,
"title": "Title"
},
"publisher": {
"type": "string",
"required": false,
"title": "Publisher"
},
"issued": {
"type": "date",
"required": false,
"title": "Date",
"format": "date"
},
"volume": {
"type": "string",
"required": false,
"title": "Volume/Number (optional)"
},
"series": {
"type": "string",
"required": false,
"title": "Series (optional)"
},
"address": {
"type": "string",
"required": false,
"title": "Address (optional)"
},
"edition": {
"type": "string",
"required": false,
"title": "Edition (optional)"
},
"note": {
"type": "string",
"required": false,
"title": "Note (optional)"
},
"DOI": {
"type": "string",
"required": false,
"title": "Key (optional)"
}
},
"required": false
},
"options": {
"fields": {
"author": {
"toolbarSticky": true,
"toolbarPosition": "bottom",
"actionbar": {
"showLabels": true,
"actions": [
{
"label": "+",
"action": "add"
},
{
"label": "-",
"action": "remove"
},
{
"label": "↑",
"action": "up"
},
{
"label": "↓",
"action": "down"
}
]
}
},
"family": {
"type": "text",
"label": "Author First Name"
},
"authorMName": {
"type": "text",
"label": "Author Middle Name"
},
"given": {
"type": "text",
"label": "Author Last Name"
},
"issued": {
"type": "date",
"inputType": "date",
"picker": {
"format": "DD/MM/YY"
}
}
},
"focus": false,
"type": "object",
"helpers": [],
"helpersPosition": "below",
"validate": true,
"disabled": false,
"showMessages": true,
"collapsible": false,
"legendStyle": "button",
"views": "base"
}
```
## Further reading:
- Quasar app extensions: https://v1.quasar-framework.org/app-extensions/development-guide/introduction
- Alpaca Forms: http://www.alpacajs.org/documentation.html
## Future development
- The Quasar view for alpaca still needs to be finished. below are the elements that still need work. With that in mind. Alpaca should be completely useable but the UI aspects might not all look the same.
- radio button
- check boxes
- file
- disable fields
- collapsible