THIS REPO IS ABANDONDED, DO NOT USE
Work in progress!
vue-data-component
is a renderless component to build data-driven interfaces. Especially interfaces that contain filterable, sortable, or paginated data. We wanted to build something that takes care of pesky little problems like loading indicators, debouncing, or mapping your interface's filters to an AJAX request.
A brief overview of what vue-data-component
has to offer:
On their own, none of these features are super impressive, but together they enable you to build better interfaces in a uniform approach.
Please see CHANGELOG for more information what has changed recently.
With npm:
npm install vue-data-component
With yarn:
yarn add vue-data-component
This package contains a few components. You can register them all globally by installing this package as a plugin.
import Vue from 'vue';
import VueDataComponent from 'vue-data-component';
Vue.use(VueDataComponent);
Alternatively, you can import the ones you need separately.
import {
DataComponent,
QueryComponent,
DataSortToggle,
DataFilter,
DataPaginator,
} from 'vue-data-component';
vue-data-component
expects the following browser API's to be available. If you need wider browser support, you'll need to add a polyfill.
This package exposes two main components: with-data
and with-query
. with-data
is a low-level component that expects a function that returns a promise as it's data source. with-query
does more out of the box. It requires an endpoint URL prop, and will call that URL with a query string to update it's data set.
Prop | Type | Default | Description |
---|---|---|---|
source * |
Function |
(required) | This function will be called to fetch data. It receives an object parameter: { query, queryString } . The function should return a response object. The response object may be wrapped in a promise. |
query |
Object |
{} |
A query object. A deep watcher will be registered on the query object to determine when new data should be fetched. |
initial |
Object or null |
null |
An initial response object so the component can render as soon as possible. |
debounceMs |
Number |
0 |
Data wont be subsequently fetched until the debounce time has passed. |
slowRequestMs |
Number |
0 |
Requests that take longer than slowRequestMs will be considered slow. See Handling slow requests. |
useQueryString |
Boolean |
false |
When true , the browser's query string will be updated based on the current query. See Query strings. This prop is currently not supported with SSR. |
queryStringDefaults |
Object or null |
null |
The default values for the query string. When these values match the current query values, they will be omitted from the query string. For example, you generally don't want page=1 in your URL's, since it has the same effect as no page parameter. |
Todo
Todo
Todo
Todo
yarn test
Please see CONTRIBUTING for details.
You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.
Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.
We publish all received postcards on our company website.
If you discover any security related issues, please contact freek@spatie.be instead of using the issue tracker.
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.
Does your business depend on our contributions? Reach out and support us on Patreon. All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.
The MIT License (MIT). Please see License File for more information.