eom-form

v0.3.5

Published

4 years ago

vue.js schema based form generator

0High
0Medium
0Low

scramatte

vue.js form schema json

Eom+ Form (eom-form)

A schema-based form generator component for Vue.js

It has been inspired by project like vue-form-generator, dynamic-schema-vuelidate or formvuelatte

Why a new lib?

This project is not a "proof of concept". It's a lib to solve real life problems into real life project.

Screenshots

Basic Form

Features

reactive forms based on schemas
group and repeat form elements
over 20 built-in validators
use bootstrap-vue components and styles

What we would like to implement

Dependency model like in XForms
Expressions into JSON
Framework7 version

Documentation

Full updated documentation is available here

Dependencies

eom-form uses mainly

moreover it uses other components like

we also include open source icon fonts such font awesome 5, ionicons,open iconic, stroke icons 7, linearicons

Installation

NPM

You can install it via NPM or yarn.

Latest version for Vue 2.x

$ npm install eom-form

Usage

<template>
  <div id="app">
   <b-container> 
      <b-alert :variant="status.variant" dismissible v-model="status.message" v-if="status.message">
        {{ status.message }}
      </b-alert>

      <form class="mb-3" @submit.prevent="handleSubmit" novalidate>
        <EomForm
          :schema="schema"
          v-model="model"
          ref="eomForm"
        />
        <b-btn variant="success" type="submit">submit</b-btn>
      </form>
    </b-container>
  </div>
</template>

<script>
import Vue from 'vue'
import EomForm from 'eom-form'
import schema from './data/schema.json'
  
Vue.use(EomForm)

export default {
  name: 'App',
  data () {
    return {
      status: {
        message: '',
        variant: 'success'
      },
      schema,
      model: {},
    }
  },
  methods: {
    handleSubmit () {
      this.status.message = ''
      let valid = this.$refs.eomForm.validate()

      if (!valid) {
        console.warn('invalid form')
        this.status.message = 'invalid_datas'
        this.status.variant = 'danger'
        return
      }
    }
  }
}
</script>

Usage in local components

import EomForm from "eom-form";

export default {
  components: {
    "eom-form": EomForm
  }
};

Development

This command will start a webpack-dev-server with content of src folder.

npm run serve

Build

This command will build a distributable version in the dist directory.

npm run build

Build Bundle

This command will bundle package for production use

npm run build-bundle

Contribution

We need hands. Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing.

License

eom-form is available under the GPL v3 license.