eom-form v0.3.5
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
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.
Contact
Copyright (C) 2020 Eom+
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago