sky-list v1.0.0

sky-list

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

List of content

• Installation
• Usage
• Option tables
• Examples
• API Response Setup

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

Slots options

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

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,
        },
        ...
    ]
}

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!