Majra is a tool for quickly creating CRUD UI & forms. Make your components reusable by majra.
- Powerful form generator
- Lots of ready fields
- Simplicity in usage
- Extendable
- static friendly
npm i --save majrain vue applications
import Vue from "vue";
import Majra from "majra";
Vue.use(Majra, {
store, // your store instance
configs: {},
});in nuxt applications
import Vue from "vue";
import Majra from "majra";
export default async ({ store }) => {
Vue.use(Majra, {
store,
configs: {},
});
};simple example
<template>
<DynamicTemplate />
</template>
<script>
import { DynamicTemplate } from "majra";
export default {
components: {
DynamicTemplate,
},
beforeCreate() {
this.$majra.init({
mainRoute: "/product",
relations: [{ route: "/get-menus-list", key: "Menu" }],
fields: [
{
title: "Product name", // title of field that shows in form and table
field: "name", // the key of data
type: "text", // type of field (uses majra textField)
isHeader: true, // show this field in table
},
{
title: "Menu",
field: "menu",
sendKey: "menu_id", // you can change your key when sending the form by sendKey
type: "select",
rel: {
model: "Menu", // the key of data that returns from api call
},
props: {
"item-text": "title",
"item-value": "id",
},
isHeader: true,
},
],
});
},
};
</script>
You can also use the form builder
<template>
<DynamicForm :form="form" :fields="fields" />
</template>
<script>
import { DynamicForm } from "majra";
export default {
components: {
DynamicForm,
},
data: () => ({
fields: [
{
title: "Product name",
field: "name",
type: "text",
},
{
title: "Menu",
field: "menu",
sendKey: "menu_id",
type: "select",
rel: {
model: "Menu", // the key of data that returns from api call
},
props: {
"item-text": "title",
"item-value": "id",
},
},
],
}),
};
</script>jsut extend AbstractField from majra and make your field, when you extend AbstractField then necessary data and methods will be available.
<template>
<div>
<input :value="value" @input="updateField($event)"/>
<div>
</template>
<script>
import {AbstractField} from 'majra';
export default {
extends: AbstractField,
}
</script>Just import your component and use it
import YourTextField from "./YourTextField.vue";
export default {
beforeCreate() {
this.$majra.init({
mainRoute: "/product",
fields: [
{
title: "Product name",
field: "name",
type: "text",
component: YourTextField, // this field will replace by YourField
isHeader: true,
},
],
});
},
};The Majra is open-sourced software licensed under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent