Blue - Quasar App Extension
Blue components expand on the already awesome Quasar components. Each component's configuration is done with reactive js objects. Lots of sensible defaults allow creating powerful components with the least possible amount of code.
BlueConfirm BlueForm BlueDataTable BlueImport
Install
quasar ext add blue
Quasar CLI will retrieve it from NPM and install the extension.
Uninstall
quasar ext remove blue
Info
Better docs are on the way. For now, you can view an extensive demo of each component in src/demo. There's a lot on the roadmap, and these components are considered alpha.
Roadmap
- Allow setting global defaults and templates for each component
- Cover more customization that people will want to use
- Extract each component into it's own extension, and have blue pull all of them in.
- Filterset component for storing/using groups of filters, for filtering anything (tables, grids, lists)
BlueConfirm
Confirmation popup component for actions such as deleting a record.
BlueDataTable
Data table component. Perfect for admin, but customizable enough for most table needs. Has callbacks for fetching data from an API.
Features
- Search
- Custom intuitive pagination
- Batch actions (delete)
- Row actions (view, edit, delete)
- Template slots for custom cells, and expanded views
- All actions (export, import)
Roadmap
- Filters
- Filtersets (Basically saved groups of filters that can be enabled with a button. E.g. user roles)
- Column show/hide
- More customizable options and props
Sample usage
Say Hi {{ props.props.row.name }} Location {{ props.props.row.location }} Editing {{ props.props.row.name }} Edit form here
BlueForm
Form component that builds dynamic forms with a fields definition schema. Easy to use and customize
Features
- Validation with auto-generated error messages. Format example: 'required|min:6|same:password'. Uses https://github.com/skaterdav85/validatorjs#available-rules
- Actions - Can hide the defaults and add custom actions. Example actions are submit, cancel, reset, delete.
Sample usage
BlueImport
Import component that allows uploading a XLS or CSV file to import records on your server.
Features
- Uploads to import url, with success or failure messaging
- Has buttons for the user to download XLS or CSV templates. A template is an empty file with field names as headers, that can be populated for re-import
Roadmap
- Option to do the heavy lifting on the front-end, which would parse the data and call the appropriate api for each record. This would elimate the need for extra server code, and enable the front end to show progress of an import.
Sample Usage
Upload a CSV or XLS file to import new records. The first row should be the header row, containing field names. You can download an import template below to get started. Show results of successful or failed import here.