vue-sorting-list-component

Install

NPM

Install the package:

npm install @profesia/vue-sorting-list-component --save-dev

Then import it in your project

import Vue from 'vue'
import sortingList from '@profesia/vue-sorting-list-component'

new Vue({
    el: '#app',
    
    components: {
        sortingList,
    },
});

Usage

Simply use it like so:

<sorting-list :list="myList" :params="myListParams" orderBy="date" urlParam="url" :reverse="true"></sorting-list>

Options

list

Mandatory. Array of list items.

params

Mandatory. Array of objects with name and title. name is the object key from your list, title will be used as link for sorting. If you want to show other element that is specified as name, use show. For example

myListParams = [
        name: 'location',
        title: 'Location',
    }, {
        name: 'add_date',
        title: 'Created',
        show: 'add_date2'
    }
]

urlParam

Mandatory. String with item key, where the url is saved.

orderBy

Mandatory. String name of the object key (it's one of the names from params).

reverse

Optional. Boolean parameter, if true, list will be sorted DESC, else will be sorted ASC. Default is false

Structure

Once the select has been rendered, it will create the following structure:

HTML

Sorting list

<div class="vue-sorting-list-module">
    <div class="vue-sorting-list-header">
        <span><span>Location</span> <i class="vue-sorting-list-active-asc"></i></span>
        <span><span>Created</span> <i class=""></i></span>
    </div>
    <ul class="vue-sorting-list">
        <li>
            <span class="vue-sorting-list-location">New York</span>
            <span class="vue-sorting-list-add_date">12.5.2018</span>
        </li>
        ...
    </ul>
</div>

CSS

All CSS is based upon this structure.

.vue-sorting-list-module {
  ...
}

.vue-sorting-list-header {
  ...
}

.vue-sorting-list-header i {
  ...
}

.vue-sorting-list {
  ...
}

FAQ

• How can I provide feedback? - Send an email to [email protected]; any feedback is appreciated.

Release History

• 0.2.0 Add possibility to link items to their url
• 0.1.0 Add custom sorter function because of Chrome problem with sorting more than 10 items
• 0.0.3 Add classes for header texts
• 0.0.2 Fix LESS path
• 0.0.1 Initial release