Giter Club home page Giter Club logo

quasar-crud's Introduction

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

quasar-crud's People

Contributors

archer-thane avatar jasgh avatar kerasus avatar maryamrazmjoo avatar nima0mr avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.