vformio's Introduction

vformio - Formio.js wrapper for Vue

This package is heavily influenced by the official vue-formio package. Kudos to the formio team.

Installation

npm i vformio --save

or with yarn:

yarn add vformio

Usage

First you have to import and register the Form component:

<script>
import { Form } from 'vformio'

export default {
  name: 'MyApp',
  components: { 'MyForm': Form },
  data () {
    return {
      form: {
        // your form 
      },
      options: {
        // some options
        i18n: {
          en: {},
          de: {},
          fr: {}
        }
      },
      lang: 'de'
    }
  },
  methods: {
    onSubmit () {
      // handle form submissions
    }
  }
}
</script>

then you can use it in template section of your Vue component:

<template>
  <MyForm :form="form" :options="options" :language="lang" @submit="onSubmit"/> 
</template>

Available props

`src`: `string`

The form API source from form.io or your custom formio server.

`form` : `object`

An object representing the form. Use this instead of src for custom forms. Note: src will override this property if used.

`submission`: `Object`

An object representing the default data for the form. Note: src will override this if a submission url is entered.

`options`: `object`

An object which represents formio.js options. See Form.io Options.

`language`: `string`

Default language for the form.

Events

Vue instance has an access to all events triggered from the form. You can set event handlers using v-on property (or using @ shorthand).

<MyForm :form="form" @submit="onSubmit"/>

See Form.io Events for all the available events.

FormBuilder

import { FormBuilder } from 'vformio';

export default {
  name: 'app',
  components: { FormBuilder },
  data () {
    return {
      form: { display: 'form' }
    }
  },
  computed: {
    options: {
      builder: {
        advanced: false,
        data: false,
        basic: true
      }
    }
  },
  methods: {
    onChange (schema) { console.log(schema) },
  }
}

now when you have registered FormBuilder component you can use it inside the template section:

<template>
  <div id="app">
    <FormBuilder :form="form" :options="options" @change="onChange"></FormBuilder>
  </div>
</template>

License

Released under the MIT License.

vformio's People

Contributors

Stargazers

Watchers

vformio's Issues

Builder Modal not showing up

I am facing an issue when i drag and drop a component to the screen, the expectation is that a modal will pop up so that i can set the attributes of the component that was dragged. But its not the case as the modal is not showing, somehow somewhere the modal is being pushed towards the bottom. I don't know if there is a quick for this.

Recommend Projects

mirzap / vformio Goto Github PK