quasar-crud

This package includes 4 main component that combine several feature of Quasar like q-table, q-input , q-time and etc:

• EntityIndex => For list of items.
• EntityEdit => For edit information of any item of list
• EntityCreate => For create new item
• EntityShow => For show information of item

It also has:

• Portlet => You can make every customized component that you want
• EntityIndexTable => For make table in a specific structure

install

npm i quasar-crud

Usage

To use it in vue files, you need to import the component you want and use it like a regular component, for example:

<template>
    <entity-index/>
</template>

<script>
    import EntityIndex from 'quasar-crud'
    export default {
        components: { EntityIndex }
    }
</script>

Features:

• EntityIndex

props	default	type	description
value	[ ]	Array
title	' '	String
api	' '	String
createRouteName	' '	String, Boolean
tableKeys	{ data: ' ', total: ' ' }	Object	query params of response
table	{ columns: [ ], data: [ ] }	Object	column include props of column in q-table
beforeLoadInputData	() => { }	Function
afterLoadInputData	() => { }	Function

• EntityEdit

props	default	type	description
value	[ ]	Array
title	' '	String
api	' '	String
entityIdKey	' id '	String	Id of selected item
entityParamKey	' id '	String	need for router param
showRouteName	' '	String	route name of show component
table	{ columns: [ ], data: [ ] }	Object
beforeGetData	() => { }	Function
beforeLoadInputData	() => { }	Function
afterLoadInputData	() => { }	Function

• EntityCreate

props	default	type	description
value	[ ]	Array
title	' '	String
api	' '	String
showRouteName	' '	String	route name of show component
showRouteParamKey	' '	String	router param of show component
entityIdKeyInResponse	' id '	String	ned for value of router param of show component
indexRouteName	' '	String	route name of index component
table	{ columns: [ ], data: [ ] }	Object
beforeLoadInputData	() => { }	Function
afterLoadInputData	() => { }	Function

• EntityShow

props	default	type	description
value	[ ]	Array
title	' '	String
api	' '	String
entityIdKey	' id '	String	Id of selected item
entityParamKey	' id '	String	need for router param
editRouteName	' '	String	route name of edit component
indexRouteName	' '	String	route name of index component
table	{ columns: [ ], data: [ ] }	Object
beforeGetData	() => { }	Function
beforeLoadInputData	() => { }	Function
afterLoadInputData	() => { }	Function

• Portlet:

it has 3 slot that you can use them in all previous components:

#title
#toolbar
#content

• EntityIndexTable:

it has 3 slot that you can use them in EntityIndex component:

#top="props"
#body-cell="props"  
# content  

props	default	type
value	{ data: [ ], pagination:{ sortBy: 'desc', descending: false, page: 1, rowsPerPage: 0 } rowsNumber: 0 }	Object
title	' '	String
loading	false	Boolean
columns	[ ]	Array
changePage	() => {}	Function

Notice!

You can create forms in all previous components using quasar-form-builder.
To access them you can v-model an array of input's props as value prop in quasar-crud's components