https://github.com/skybrud/sky-list
Vue module for requesting search API (via axios) and displaying result with different pagination options
https://github.com/skybrud/sky-list
Last synced: 10 months ago
JSON representation
Vue module for requesting search API (via axios) and displaying result with different pagination options
- Host: GitHub
- URL: https://github.com/skybrud/sky-list
- Owner: skybrud
- License: mit
- Created: 2015-04-24T09:32:19.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2019-05-03T09:02:01.000Z (about 7 years ago)
- Last Synced: 2025-08-09T16:21:26.008Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 419 KB
- Stars: 0
- Watchers: 10
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# sky-list
> Vue module for requesting search API (via axios) and displaying result with different pagination options
## List of content
* [Installation](#installation)
* [Usage](#usage)
* [Option tables](#options)
* [Examples](#examples)
* [API Response Setup](#api)
## Installation
```bash
npm install sky-list
```
```bash
yarn add sky-list
```
## Usage
### Import
```js
import Vue from 'vue';
```
Different import approaches. The First provides the minified and compiled dist version, the other the raw .vue file.
```js
import SkyList from 'sky-list';
// If you want to use the baseline scss add the following line
import '${YOUR-PROJECT-ROOT-PATH}/node_modules/sky-list/src/SkyList.scss';
```
Install plugin
```js
Vue.use(SkyList);
```
## Option tables
### Props
| Name | Type | Default | Options | Description |
|----|----|----|----|----|
| **parameters** | Object | `{ keywords: '' }` | | Parameters to use in query declared with initial value |
| **options** | Object | `{`
`api: '/umbraco/api/site/search/',`
`limit: 10,`
`showCount: false,`
`paginationType: 'more',`
`loadFetch: false,`
`}` | **paginationType**
navigation
numeric
pagination
more
all | Change custom request setup.
`loadFetch`: enables/disables fetch on page load.
`showCount`: enables/disables "x" results found.
`api`: your prefered endpoint |
| **filter** | Object | `{}` | | Declare query properties to be handled as filters eg:
`{ fitlerName: initialValue }` |
| **value-map** | Object | `{}` | | If a v-model returns a object and a prop is needed, it can be declared with initial value eg:
`{ nestedPropName: initialValue }` |
| **validate-query** | Function | `query => query.keywords` | | |
| **live-search** | Boolean | `true` | | Enable/disable search on query change |
| **query** | Object | `{}` | | Pass a query object directly to SkyList. Overrides internal query object. Useful for keeping query state outside of SkyList and only using it to fetch and render results |
| **transform-params** | Function | `params => params` | | Hook to modify params before request is sent. Useful for transforming SkyList to integrate with endpoints that do not use the default param naming conventions |
| **transform-result** | Function | `result => result` | | Hook to modify result before request is resolved. Useful for transforming the returned data to match [the API response structure SkyList expects](#api). |
### Slots
| Name | Slot-scope | Description |
|--|--|--|
| **listForm** | `query` Object
`result` Object | Slot for custom form setup to be `v-model`'ed against SkyList query |
| **listItem** | `index` Number
`listItem` Object | Slot for custom item markup |
| **listAside** | `query` Object
`result` Object | Slot for adding custom aside content next to the result list |
| **resultMessage** | `query` Object
`pagination` Object | Slot for custom message when results are found |
| **noResultMessage** | `query` Object | Slot for custom message when **no** results are found |
| **listMore** | `itemsLeft` Number | Slot for custom show more button |
| **listPrev** | | Slot for custom previous button |
| **listNext** | | Slot for custom next button |
| **paginationBullet** | `count` Number | Slot for custom pagination bullets |
| **filters** | `query` Object
`result` Object
`area` Object | Slot for filtering result (i.e. by groups/areas etc.) |
### Events
SkyList emits a few events for flexibility. This list will likely expand in the future. Example:
```html
```
| Name | Arguments | Description |
|--|--|--|
| **result** | `result` Object | Emitted every time result changes |
| **loadingBegin** | none | Emitted whenever a fetch begins |
| **loadingEnd** | none | Emitted when done fetching |
Custom handling of list item
```
### Component options (with default values)
```html
```
### Content slots (with default values)
Sky-list exposes different slot which can be customized
#### Message slots
`resultMessage`: custom message displayed when results are found
```html
Your search for "{{query.keywords}}" returned {{pagination.total}} {{(pagination.total === 1) ? 'result' : 'results'}}
```
`noResultMessage`: custom message displayed when no results are found
```html
```
#### List item slot
`listItem`: Slot for customizing list items. exposes item object and list index
```html
```
Preferably this can be used with custom components like this
```html
```
#### Pagination slot options (with default values)
##### paginationType: 'more' | 'all'
Slot for customizing show more / all button
```html
```
##### paginationType: 'navigation' | 'pagination'
`listPrev`: Slot for customizing previous button
`nextPrev`: Slot for customizing next button
```html
Previous
Next
```
##### paginationType: 'numeric' | 'pagination'
`paginationBullet`: Slot for customizing bullets
```html
```
## API Response Setup
SkyList expects a response with the following setup
```js
{
"meta":{
"code":200
},
"pagination":{
"total":1,
"limit":10,
"offset":0
},
"data":[
{
title: 'item1',
teaser: 'lorem ipsum',
},
{
title: 'item2',
teaser: '',
},
{
title: 'item3',
teaser: null,
},
...
]
}
```
If your endpoint expects other names for pagination params than `limit` and `offset` the `transform-params` prop can be used to alter the params before requesting. Likewise, upon receiving data, you can use the `transform-result` prop to transform any data received to match the type of API response SkyList expects. Quick example of both in use:
```html
...
```
## Credits
This module is made by the Frontenders at [skybrud.dk](http://www.skybrud.dk/). Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!