# vue-form-schema

> Two ways drag and drop form creator for Vue.

Latest version **1.0.9** (published 2019-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-form-schema
pnpm add vue-form-schema
yarn add vue-form-schema
bun add vue-form-schema
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2019-05-02 |
| First published | 2019-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ghostff |
| Maintainers | ghostff |
| Keywords | vue-form-builder, 2-ways-form-builder, vue, vue-form, vuejs, form, generator, vue-form-schema, schema |

## Links

- npm: https://www.npmjs.com/package/vue-form-schema
- Repository: https://github.com/Ghostff/vue-form-builder
- Homepage: https://github.com/Ghostff/vue-form-builder#readme
- Issues: https://github.com/Ghostff/vue-form-builder/issues
- npm.io page: https://npm.io/package/vue-form-schema

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2019-05-02
- 1.0.8 — 2019-05-02
- 1.0.7 — 2019-05-01
- 1.0.6 — 2019-04-05
- 1.0.5 — 2019-04-04
- 1.0.4 — 2019-04-04
- 1.0.3 — 2019-04-03
- 1.0.2 — 2019-04-03
- 1.0.1 — 2019-04-03
- 1.0.0 — 2019-04-01

## README

# Vue Form Schema
A two ways drag and drop form builder for Vue.
```js
npm install --save-dev vue-form-schema
```
### Using form schema
This package comes in with a default `dark.css` and `light.css` theme and can always be overriden with your custom style.
```js
import 'vue-form-schema/dist/dark.css';
import VueFormSchema from 'vue-form-schema';

export default {
    components: {
        VueFormSchema
    },
}
```
### Template
```html
<vue-form-schema></vue-form-schema>
```
![Screen Shot](https://github.com/Ghostff/vue-form-builder/blob/master/ss.png)

### Schema Params
```js
<vue-form-schema :config="{}" :import="[]" :template="{}"></vue-form-schema>
```
### Import
Buids a form based on previosly exported JSON.
```js
<div id="app">
  <vue-form-schema :import="from"></vue-form-schema>
</div>
<script>
    import 'vue-form-schema/dist/dark.css';
    import VueFormSchema from 'vue-form-schema';

    export default {
        components: {
            VueFormSchema
        },
        data() {
            return {
                from: [{"type":"text","required":false,"name":"name","label":{"text":"Full Name","class":"input"},"placeholder":"Enter your full name","value":null,"pattern":null,"autofocus":null,"autocomplete":null,"min":"2","max":"6","useName":true,"options":null,"multiple":false,"additionalAttr":[],"cols":null,"rows":null,"maxlength":null,"readonly":null,"disabled":null,"buttonType":"button","content":"Content","class":"input"}]
            }
        }
    }
</script>
```

#### Template
The default component for each of the element type. Eg
```js
// Given were are using something like vue bootstrap
<vue-form-schema :template="{text: 'b-form-input'}"></vue-form-schema>
```
| Name | Default |
| ------ | ------ |
| text | input |
| file | input |
| email | input |
| number | input|
| hidden | input |
| password | input |
| range | input |
| url | input |
| radio | input |
| checkbox | input |
| textarea | textarea |
| button | button |
| select | `select: {select: 'select', option: 'option'}` |
| countries | `select: {select: 'select', option: 'option'}` |
| paragraph | p |
| label | label |

#### Config
| Name | Description | Example |
| ------ | ------ | ------ |
| hide | Element attributes to hide |`hide: {text: ['required', 'name']}` |
| class | Element attributes default class | `class: {select: 'input select class'}` |
| action | Action attributes config | `action: {remove: {icon: 'X'}}` |
| additional | Additional attributes config| `additional: {add: {class: 'add-new-attr-btn'}}` |
| showLabel | Show label field. | `showLabel: true` |
| container | Each element wrapper | `container: {tag: 'div', attributes: {class: 'vue-form-gen-element'}}`

Default config:
```js
{
    hide: {},
    class: {
        select: 'input',
        countries: 'input',
        button: 'button',
        textarea: 'input',
        buttonType: {
            span: 'span',
            select: 'input'
        }
    },
    action: {
        remove: {icon: '⊗', class: null, style: 'font-size:16px;cursor:pointer;color:red'},
        move: {up: '⇧', down: '⇩', class: null, style: 'font-size:16px;cursor:pointer;'},
        toggle: {show: '⊕', hide: '⊖', class: null, style: 'font-size:16px;cursor:pointer;'}
    },
    additional: {
        inputs: {
            style: null,
            class: null
        },
        add: {
            style: 'margin-top:10px'
        },
        remove: {
            style: 'margin-top:10px'
        }
    },
    showLabel: true,
    container: {tag: 'div', attributes: {class: 'vue-form-gen-element'}},
    button: {
        html: {class: 'vue-form-gen-button', show: true, click: null, content: 'Extract Html'},
        json: {class: 'vue-form-gen-button', show: true, click: null, content: 'Extract JSON'},
        view: {class: 'vue-form-gen-button', show: true, click: null, content: 'View'},
    }
}
```

---
_Source: https://npm.io/package/vue-form-schema · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._