eom-form

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

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

• bootstrap-vue
• lodash
• expression-eval
• vue-i18n

moreover it uses other components like

• vue-multiselect
• vue-currency
• @hokify/vuejs-datepicker
• vue-quill-editor

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.

Contact

Copyright (C) 2020 Eom+