Vue module for requesting search API (via axios) and displaying result with different pagination options
Vue HTML CSS JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.gitignore
LICENSE
README.md
package.json
webpack.config.js
yarn-error.log
yarn.lock

README.md

sky-list

Vue module for requesting search API (via axios) and displaying result with different pagination options

List of content

Installation

npm install sky-list
yarn add sky-list

Usage

Import

import Vue from 'vue';

Different import approaches. The First provides the minified and compiled dist version, the other the raw .vue file.

import SkyList from 'sky-list';
import SkyList from '${YOUR-PROJECT-ROOT-PATH}/node_modules/sky-list/src/';

Install plugin

Vue.use(SkyList);

Option tables

SkyList options

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.

Slots options

Name Slot-scope Description
listForm query Object Slot for custom form setup to be v-model'ed against SkyList query
listItem index Number
listItem Object
Slot for custom item markup
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

Examples

<sky-list>
	<div
		slot="listForm"
		slot-scope="{ query }"
	>
		<input type="text" v-model="query['keywords']" placeholder="Type your search query">
	</div>


	<div
		slot="listItem"
		slot-scope="{ index, item }"
		:item="item"
	>
	    Custom handling of list item
	</div>
</sky-list>

Component options (with default values)

<sky-list
    :parameters="{ keywords: '' }" || Add your own key/value pair with initial values
    :options="{
    	api: '/umbraco/api/site/search/',
    	limit: 10,
    	showCount: false, || true |false
    	paginationType: 'more', || 'navigation' | 'pagination' | 'more' | 'all' | 'numeric'
    	loadFetch: false,
    }"
    :validate-query="query => query.keywords" || parse in your own query validation
    :live-search="true" || true/false
    :value-map="{}" || If v-model returns an object setup rule for which prop to use eg. { nestedPropName: initialValue }
>
    <!-- content config here -->
    <!-- pagination config here -->
</sky-list>

Content slots (with default values)

Sky-list exposes different slot which can be customized

Message slots

resultMessage: custom message displayed when results are found

<sky-list ... >
    <span
        slot="resultMessage"
        slot-scope="{ query, pagination }"
    >
    	Your search for <em>"{{query.keywords}}"</em> returned <em>{{pagination.total}} {{(pagination.total === 1) ? 'result' : 'results'}}</em>
    </span>
</sky-list>

noResultMessage: custom message displayed when no results are found

<sky-list ... >
    <span
        slot="noResultMessage"
        slot-scope="{ query }"
        v-text="'Your search for ${query.keywords} returned no results'"
    />
</sky-list>

List item slot

listItem: Slot for customizing list items. exposes item object and list index

<sky-list ...>
	<div
		slot="listItem"
		slot-scope="{ item, index }"
	>
	    <small v-text="`No. ${index + 1}`"
	    <h2 v-text="item.title" />
	    <p v-text="item.teaser" />
	</div>
</sky-list>

Preferably this can be used with custom components like this

<sky-list ...>
    <MyComponent
        slot="listItem"
		slot-scope="{ item, index }"
		:my-prop-for-data="item"
		:my-prop-for-index="index"
	/>
</sky-list>

Pagination slot options (with default values)

paginationType: 'more' | 'all'

Slot for customizing show more / all button

<sky-list ... >
	<span
	    slot="listMore"
	    slot-scope="{ itemsLeft }"
	    v-text="`${itemsLeft} not displayed`"
    />
</sky-list>
paginationType: 'navigation' | 'pagination'

listPrev: Slot for customizing previous button nextPrev: Slot for customizing next button

<sky-list ... >
    <span slot="listPrev">Previous</span>
    <span slot="listNext">Next</span>
</sky-list>
paginationType: 'numeric' | 'pagination'

paginationBullet: Slot for customizing bullets

<sky-list ... >
	<span
	    slot="paginationBullet"
	    slot-scope=" { count }"
	    v-text="`Page ${count}`"
    />
</sky-list>

API Response Setup

SkyList expects a response with the following setup

{
    "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:

<SkyList
    :options="{
        api: foreignEndpoint,
    }"
    :transform-params="params => ({
        q: params.keywords,
        startIndex: params.offset,
        maxResults: params.limit,
    })"
    :transform-result="result => ({
        pagination: {
            total: result.TotalResults,
            limit: result.EffectiveParameters.MaxResults,
            offset: result.Offset,
        },
        data: result.Documents,
    })"
>
    ...
</SkyList>

Credits

This module is made by the Frontenders at skybrud.dk. Feel free to use it in any way you want. Feedback, questions and bugreports should be posted as issues. Pull-requests appreciated!