quasar-crud
Version:
quasar crud. Uses Quasar Framework and Vue.
126 lines (98 loc) • 7.68 kB
Markdown
# 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:
```vue
<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: [ ], </br>pagination:{ </br>sortBy: 'desc',</br>descending: false,</br>page: 1, </br>rowsPerPage: 0 }</br>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](https://www.npmjs.com/package/quasar-form-builder).
>To access them you can v-model an array of input's props as value prop in quasar-crud's components