From 7d7b199dff29f071b2890992670b327a1c957fc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Kov=C3=A1cs?= <balping314@gmail.com>
Date: Tue, 7 Jun 2016 20:59:06 +0200
Subject: [PATCH 1/3] Enables multisorting

New property `multiSort` added. If it's false (default), everything works like before

However when it's set to true, you can sort data by several selected columns. The most recent selected column has the smallest precedence.

The generated request looks like this: `?sort=id|desc,name|asc,email|asc`

Of course to get this working, you'll need a backend which is able to parse the above format.

Please note that this commit breaks backwards compatibility *a bit*. Now if you want to initialise the sort-order property, it should be done with an array like this. Just wrap your previous object in an array.

```
[{
    field: 'name',
    direction: 'asc'
}]
```
---
 dist/vue-table.js           | 103 +++++++++++++++++++++++++++-------
 dist/vue-table.min.js       |   2 +-
 examples/bootstrap.html     |   6 +-
 examples/semantic.html      |   6 +-
 src/components/Vuetable.vue | 108 +++++++++++++++++++++++++++++-------
 5 files changed, 180 insertions(+), 45 deletions(-)

diff --git a/dist/vue-table.js b/dist/vue-table.js
index b8594dd..c02a452 100644
--- a/dist/vue-table.js
+++ b/dist/vue-table.js
@@ -373,12 +373,21 @@ exports.default = {
             required: true
         },
         'sortOrder': {
-            type: Object,
+            type: Array,
             default: function _default() {
-                return {
-                    field: '',
-                    direction: 'asc'
-                };
+                return [];
+                /* array of 
+                    {
+                        field: '',
+                        direction: 'asc'
+                    }
+                objects */
+            }
+        },
+        'multiSort': {
+            type: Boolean,
+            default: function _default() {
+                return false;
             }
         },
         'perPage': {
@@ -516,9 +525,6 @@ exports.default = {
         }
     },
     computed: {
-        sortIcon: function sortIcon() {
-            return this.sortOrder.direction == 'asc' ? this.ascendingIcon : this.descendingIcon;
-        },
         paginationInfo: function paginationInfo() {
             if (this.tablePagination == null || this.tablePagination.total == 0) {
                 return this.paginationInfoNoDataTemplate;
@@ -619,9 +625,15 @@ exports.default = {
                 return '';
             }
 
-            var fieldName = typeof this.sortOrder.sortField === 'undefined' ? this.sortOrder.field : this.sortOrder.sortField;
+            var result = '';
 
-            return fieldName + '|' + this.sortOrder.direction;
+            for (var i = 0; i < this.sortOrder.length; i++) {
+                var fieldName = typeof this.sortOrder[i].sortField === 'undefined' ? this.sortOrder[i].field : this.sortOrder[i].sortField;
+
+                result += fieldName + '|' + this.sortOrder[i].direction + (i + 1 < this.sortOrder.length ? ',' : '');
+            }
+
+            return result;
         },
         addClass: function addClass(el, className) {
             if (el.classList) el.classList.add(className);else el.className += ' ' + className;
@@ -640,15 +652,43 @@ exports.default = {
                 return;
             }
 
-            if (this.sortOrder.field == field.name) {
-                // change sort direction
-                this.sortOrder.direction = this.sortOrder.direction == 'asc' ? 'desc' : 'asc';
+            if (this.multiSort) {
+                var i = this.currentSortOrder(field);
+
+                if (i === false) {
+                    //this field is not in the sort array yet
+                    this.sortOrder.push({
+                        field: field.name,
+                        direction: 'asc'
+                    });
+                } else {
+                    //this field is in the sort array, now we change its state
+                    if (this.sortOrder[i].direction == 'asc') {
+                        // switch direction
+                        this.sortOrder[i].direction = 'desc';
+                    } else {
+                        //remove sort condition
+                        this.sortOrder.splice(i, 1);
+                    }
+                }
             } else {
-                // reset sort direction
-                this.sortOrder.direction = 'asc';
+                if (this.sortOrder.length == 0) {
+                    this.sortOrder.push({
+                        field: '',
+                        direction: 'asc'
+                    });
+                }
+                if (this.sortOrder[0].field == field.name) {
+                    // change sort direction
+                    this.sortOrder[0].direction = this.sortOrder[0].direction == 'asc' ? 'desc' : 'asc';
+                } else {
+                    // reset sort direction
+                    this.sortOrder[0].direction = 'asc';
+                }
+                this.sortOrder[0].field = field.name;
+                this.sortOrder[0].sortField = field.sortField;
             }
-            this.sortOrder.field = field.name;
-            this.sortOrder.sortField = field.sortField;
+
             this.currentPage = 1; // reset page index
             this.loadData();
         },
@@ -656,11 +696,28 @@ exports.default = {
             return !(typeof field.sortField == 'undefined');
         },
         isCurrentSortField: function isCurrentSortField(field) {
+            return this.currentSortOrder(field) !== false;
+        },
+        currentSortOrder: function currentSortOrder(field) {
             if (!this.isSortable(field)) {
                 return false;
             }
 
-            return this.sortOrder.field == field.name;
+            for (var i = 0; i < this.sortOrder.length; i++) {
+                if (this.sortOrder[i].field == field.name) {
+                    return i;
+                }
+            }
+
+            return false;
+        },
+        sortIcon: function sortIcon(field) {
+            var i = this.currentSortOrder(field);
+            if (i !== false) {
+                return this.sortOrder[i].direction == 'asc' ? this.ascendingIcon : this.descendingIcon;
+            } else {
+                return '';
+            }
         },
         gotoPreviousPage: function gotoPreviousPage() {
             if (this.currentPage > 1) {
@@ -775,6 +832,14 @@ exports.default = {
             }
         }
     },
+    watch: {
+        'multiSort': function multiSort(newVal, oldVal) {
+            if (newVal === false && this.sortOrder.length > 1) {
+                this.sortOrder.splice(1);
+                this.loadData();
+            }
+        }
+    },
     events: {
         'vuetable-pagination:change-page': function vuetablePaginationChangePage(page) {
             if (page == 'prev') {
@@ -812,7 +877,7 @@ exports.default = {
     }
 };
 if (module.exports.__esModule) module.exports = module.exports.default
-;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div class=\"{{wrapperClass}}\">\n    <table class=\"vuetable {{tableClass}}\">\n        <thead>\n            <tr>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <th v-if=\"extractName(field.name) == '__checkbox'\" class=\"{{field.titleClass || ''}}\">\n                                <input type=\"checkbox\" @change=\"toggleAllCheckboxes($event.target.checked, field.name)\">\n                            </th>\n                            <th v-else=\"\" id=\"{{field.name}}\" class=\"{{field.titleClass || ''}}\">\n                                {{field.title || ''}}\n                            </th>\n                        </template>\n                        <template v-else=\"\">\n                            <th @click=\"orderBy(field)\" id=\"_{{field.name}}\" class=\"{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}\">\n                                {{getTitle(field) | capitalize}}&nbsp;\n                                <i v-if=\"isCurrentSortField(field)\" class=\"{{ sortIcon }}\"></i>\n                            </th>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </thead>\n        <tbody v-cloak=\"\">\n            <tr v-for=\"(itemNumber, item) in tableData\" @click=\"onRowClicked(item, $event)\">\n                <template v-if=\"onRowChanged(item)\"></template>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <td v-if=\"extractName(field.name) == '__sequence'\" class=\"vuetable-sequence {{field.dataClass}}\" v-html=\"tablePagination.from + itemNumber\">\n                            </td>\n                            <td v-if=\"extractName(field.name) == '__checkbox'\" class=\"vuetable-checkboxes {{field.dataClass}}\">\n                                <input type=\"checkbox\" @change=\"toggleCheckbox($event.target.checked, item, field.name)\" :checked=\"isSelectedRow(item, field.name)\">\n                            </td>\n                            <td v-if=\"field.name == '__actions'\" class=\"vuetable-actions {{field.dataClass}}\">\n                                <template v-for=\"action in itemActions\">\n                                    <button class=\"{{ action.class }}\" @click=\"callAction(action.name, item)\" v-attr=\"action.extra\">\n                                        <i class=\"{{ action.icon }}\"></i> {{ action.label }}\n                                    </button>\n                                </template>\n                            </td>\n                        </template>\n                        <template v-else=\"\">\n                            <td v-if=\"hasCallback(field)\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ callCallback(field, item) }}}\n                            </td>\n                            <td v-else=\"\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ getObjectValue(item, field.name, \"\") }}}\n                            </td>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </tbody>\n    </table>\n    <div v-if=\"showPagination\" class=\"vuetable-pagination {{paginationClass}}\">\n        <div class=\"vuetable-pagination-info {{paginationInfoClass}}\" v-html=\"paginationInfo\">\n        </div>\n        <div v-show=\"tablePagination &amp;&amp; tablePagination.last_page > 1\" class=\"vuetable-pagination-component {{paginationComponentClass}}\">\n            <component v-ref:pagination=\"\" :is=\"paginationComponent\"></component>\n        </div>\n    </div>\n</div>\n"
+;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div class=\"{{wrapperClass}}\">\n    <table class=\"vuetable {{tableClass}}\">\n        <thead>\n            <tr>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <th v-if=\"extractName(field.name) == '__checkbox'\" class=\"{{field.titleClass || ''}}\">\n                                <input type=\"checkbox\" @change=\"toggleAllCheckboxes($event.target.checked, field.name)\">\n                            </th>\n                            <th v-else=\"\" id=\"{{field.name}}\" class=\"{{field.titleClass || ''}}\">\n                                {{field.title || ''}}\n                            </th>\n                        </template>\n                        <template v-else=\"\">\n                            <th @click=\"orderBy(field)\" id=\"_{{field.name}}\" class=\"{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}\">\n                                {{getTitle(field) | capitalize}}&nbsp;\n                                <i v-if=\"isCurrentSortField(field)\" class=\"{{ sortIcon(field) }}\"></i>\n                            </th>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </thead>\n        <tbody v-cloak=\"\">\n            <tr v-for=\"(itemNumber, item) in tableData\" @click=\"onRowClicked(item, $event)\">\n                <template v-if=\"onRowChanged(item)\"></template>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <td v-if=\"extractName(field.name) == '__sequence'\" class=\"vuetable-sequence {{field.dataClass}}\" v-html=\"tablePagination.from + itemNumber\">\n                            </td>\n                            <td v-if=\"extractName(field.name) == '__checkbox'\" class=\"vuetable-checkboxes {{field.dataClass}}\">\n                                <input type=\"checkbox\" @change=\"toggleCheckbox($event.target.checked, item, field.name)\" :checked=\"isSelectedRow(item, field.name)\">\n                            </td>\n                            <td v-if=\"field.name == '__actions'\" class=\"vuetable-actions {{field.dataClass}}\">\n                                <template v-for=\"action in itemActions\">\n                                    <button class=\"{{ action.class }}\" @click=\"callAction(action.name, item)\" v-attr=\"action.extra\">\n                                        <i class=\"{{ action.icon }}\"></i> {{ action.label }}\n                                    </button>\n                                </template>\n                            </td>\n                        </template>\n                        <template v-else=\"\">\n                            <td v-if=\"hasCallback(field)\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ callCallback(field, item) }}}\n                            </td>\n                            <td v-else=\"\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ getObjectValue(item, field.name, \"\") }}}\n                            </td>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </tbody>\n    </table>\n    <div v-if=\"showPagination\" class=\"vuetable-pagination {{paginationClass}}\">\n        <div class=\"vuetable-pagination-info {{paginationInfoClass}}\" v-html=\"paginationInfo\">\n        </div>\n        <div v-show=\"tablePagination &amp;&amp; tablePagination.last_page > 1\" class=\"vuetable-pagination-component {{paginationComponentClass}}\">\n            <component v-ref:pagination=\"\" :is=\"paginationComponent\"></component>\n        </div>\n    </div>\n</div>\n"
 if (module.hot) {(function () {  module.hot.accept()
   var hotAPI = require("vue-hot-reload-api")
   hotAPI.install(require("vue"), true)
diff --git a/dist/vue-table.min.js b/dist/vue-table.min.js
index 2d1c2f2..37f1712 100644
--- a/dist/vue-table.min.js
+++ b/dist/vue-table.min.js
@@ -1 +1 @@
-!function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var inserted=exports.cache={};exports.insert=function(css){if(!inserted[css]){inserted[css]=!0;var elem=document.createElement("style");return elem.setAttribute("type","text/css"),"textContent"in elem?elem.textContent=css:elem.styleSheet.cssText=css,document.getElementsByTagName("head")[0].appendChild(elem),elem}}},{}],2:[function(require,module,exports){var __vueify_insert__=require("vueify/lib/insert-css");__vueify_insert__.insert(".vuetable th.sortable:hover{color:#2185d0;cursor:pointer}.vuetable-actions{width:15%;padding:12px 0;text-align:center}.vuetable-pagination{background:#f9fafb!important}.vuetable-pagination-info{margin-top:auto;margin-bottom:auto}");Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={props:{wrapperClass:{type:String,default:function(){return null}},tableWrapper:{type:String,default:function(){return null}},tableClass:{type:String,default:function(){return"ui blue striped selectable celled stackable attached table"}},loadingClass:{type:String,default:function(){return"loading"}},dataPath:{type:String,default:function(){return"data"}},paginationPath:{type:String,default:function(){return"links.pagination"}},fields:{type:Array,required:!0},apiUrl:{type:String,required:!0},sortOrder:{type:Object,default:function(){return{field:"",direction:"asc"}}},perPage:{type:Number,coerce:function(val){return parseInt(val)},default:function(){return 10}},ascendingIcon:{type:String,default:function(){return"blue chevron up icon"}},descendingIcon:{type:String,default:function(){return"blue chevron down icon"}},appendParams:{type:Array,default:function(){return[]}},showPagination:{type:Boolean,default:function(){return!0}},paginationComponent:{type:String,default:function(){return"vuetable-pagination"}},paginationInfoTemplate:{type:String,default:function(){return"Displaying {from} to {to} of {total} items"}},paginationInfoNoDataTemplate:{type:String,default:function(){return"No relevant data"}},paginationClass:{type:String,default:function(){return"ui bottom attached segment grid"}},paginationInfoClass:{type:String,default:function(){return"left floated left aligned six wide column"}},paginationComponentClass:{type:String,default:function(){return"right floated right aligned six wide column"}},paginationConfig:{type:String,default:function(){return"paginationConfig"}},itemActions:{type:Array,default:function(){return[]}},queryParams:{type:Object,default:function(){return{sort:"sort",page:"page",perPage:"per_page"}}},loadOnStart:{type:Boolean,default:function(){return!0}},selectedTo:{type:Array,default:function(){return[]}},httpData:{type:Object,default:function(){return{}}},httpOptions:{type:Object,default:function(){return{}}}},data:function(){return{version:"1.1.1",eventPrefix:"vuetable:",tableData:null,tablePagination:null,currentPage:1}},directives:{attr:{update:function(value){for(var i in value)this.el.setAttribute(i,value[i])}}},computed:{sortIcon:function(){return"asc"==this.sortOrder.direction?this.ascendingIcon:this.descendingIcon},paginationInfo:function(){return null==this.tablePagination||0==this.tablePagination.total?this.paginationInfoNoDataTemplate:this.paginationInfoTemplate.replace("{from}",this.tablePagination.from||0).replace("{to}",this.tablePagination.to||0).replace("{total}",this.tablePagination.total||0)}},methods:{normalizeFields:function(){var obj,self=this;this.fields.forEach(function(field,i){obj="string"==typeof field?{name:field,title:self.setTitle(field),titleClass:"",dataClass:"",callback:null,visible:!0}:{name:field.name,title:void 0===field.title?self.setTitle(field.name):field.title,sortField:field.sortField,titleClass:void 0===field.titleClass?"":field.titleClass,dataClass:void 0===field.dataClass?"":field.dataClass,callback:void 0===field.callback?"":field.callback,visible:void 0===field.visible?!0:field.visible},self.fields.$set(i,obj)})},setTitle:function(str){return this.isSpecialField(str)?"":this.titleCase(str)},titleCase:function(str){return str.replace(/\w+/g,function(txt){return txt.charAt(0).toUpperCase()+txt.substr(1).toLowerCase()})},loadData:function(){var wrapper=document.querySelector(this.tableWrapper);this.showLoadingAnimation(wrapper);var params=[this.queryParams.sort+"="+this.getSortParam(),this.queryParams.page+"="+this.currentPage,this.queryParams.perPage+"="+this.perPage],url=this.apiUrl+"?"+params.join("&");this.appendParams.length>0&&(url+="&"+this.appendParams.join("&"));var self=this;this.$http.get(url,this.httpData,this.httpOptions).then(function(response){self.tableData=self.getObjectValue(response.data,self.dataPath,null),self.tablePagination=self.getObjectValue(response.data,self.paginationPath,null),null===self.tablePagination&&console.warn('vuetable: pagination-path "'+self.paginationPath+'"" not found. It looks like the data returned from the sever does not have pagination information.'),self.dispatchEvent("load-success",response),self.broadcastEvent("load-success",self.tablePagination),self.hideLoadingAnimation(wrapper)},function(response){self.dispatchEvent("load-error",response),self.broadcastEvent("load-error",response),self.hideLoadingAnimation(wrapper)})},showLoadingAnimation:function(wrapper){null!==wrapper&&this.addClass(wrapper,this.loadingClass),this.dispatchEvent("loading")},hideLoadingAnimation:function(wrapper){null!==wrapper&&this.removeClass(wrapper,this.loadingClass),this.dispatchEvent("loaded")},getTitle:function(field){return"undefined"==typeof field.title?field.name.replace("."," "):field.title},getSortParam:function(){if(!this.sortOrder||""==this.sortOrder.field)return"";var fieldName="undefined"==typeof this.sortOrder.sortField?this.sortOrder.field:this.sortOrder.sortField;return fieldName+"|"+this.sortOrder.direction},addClass:function(el,className){el.classList?el.classList.add(className):el.className+=" "+className},removeClass:function(el,className){el.classList?el.classList.remove(className):el.className=el.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")},dispatchEvent:function(eventName,args){this.$dispatch(this.eventPrefix+eventName,args)},broadcastEvent:function(eventName,args){this.$broadcast(this.eventPrefix+eventName,args)},orderBy:function(field){this.isSortable(field)&&(this.sortOrder.field==field.name?this.sortOrder.direction="asc"==this.sortOrder.direction?"desc":"asc":this.sortOrder.direction="asc",this.sortOrder.field=field.name,this.sortOrder.sortField=field.sortField,this.currentPage=1,this.loadData())},isSortable:function(field){return!("undefined"==typeof field.sortField)},isCurrentSortField:function(field){return this.isSortable(field)?this.sortOrder.field==field.name:!1},gotoPreviousPage:function(){this.currentPage>1&&(this.currentPage--,this.loadData())},gotoNextPage:function(){this.currentPage<this.tablePagination.last_page&&(this.currentPage++,this.loadData())},gotoPage:function(page){page!=this.currentPage&&page>0&&page<=this.tablePagination.last_page&&(this.currentPage=page,this.loadData())},isSpecialField:function(fieldName){return fieldName.startsWith("__")},hasCallback:function(item){return!!item.callback},callCallback:function(field,item){if(this.hasCallback(field)){var args=field.callback.split("|"),func=args.shift();return"function"==typeof this.$parent[func]?args.length>0?this.$parent[func].apply(this.$parent,[this.getObjectValue(item,field.name)].concat(args)):this.$parent[func].call(this.$parent,this.getObjectValue(item,field.name)):null}},getObjectValue:function(object,path,defaultValue){defaultValue="undefined"==typeof defaultValue?null:defaultValue;var obj=object;if(""!=path.trim()){var keys=path.split(".");keys.forEach(function(key){return"undefined"==typeof obj[key]||null===obj[key]?void(obj=defaultValue):void(obj=obj[key])})}return obj},callAction:function(action,data){this.$dispatch(this.eventPrefix+"action",action,data)},addParam:function(param){this.appendParams.push(param)},toggleCheckbox:function(isChecked,dataItem,fieldName){var idColumn=this.extractArgs(fieldName);return void 0===idColumn?void console.warn('You did not provide reference id column with "__checkbox:<column_name>" field!'):void(isChecked?this.selectedTo.push(dataItem[idColumn]):this.selectedTo.$remove(dataItem[idColumn]))},toggleAllCheckboxes:function(isChecked,fieldName){var self=this,idColumn=this.extractArgs(fieldName);isChecked?this.tableData.forEach(function(dataItem){self.isSelectedRow(dataItem,fieldName)||self.selectedTo.push(dataItem[idColumn])}):this.tableData.forEach(function(dataItem){self.selectedTo.$remove(dataItem[idColumn])})},isSelectedRow:function(dataItem,fieldName){return this.selectedTo.indexOf(dataItem[this.extractArgs(fieldName)])>=0},extractName:function(string){return string.split(":")[0].trim()},extractArgs:function(string){return string.split(":")[1]},onRowChanged:function(dataItem){return this.dispatchEvent("row-changed",dataItem),!0},onRowClicked:function(dataItem,event){return this.$dispatch(this.eventPrefix+"row-clicked",dataItem,event),!0},onCellDoubleClicked:function(dataItem,field,event){this.$dispatch(this.eventPrefix+"cell-dblclicked",dataItem,field,event)},callPaginationConfig:function(){"function"==typeof this.$parent[this.paginationConfig]&&this.$parent[this.paginationConfig].call(this.$parent,this.$refs.pagination.$options.name)}},events:{"vuetable-pagination:change-page":function(page){"prev"==page?this.gotoPreviousPage():"next"==page?this.gotoNextPage():this.gotoPage(page)},"vuetable:reload":function(){this.loadData()},"vuetable:refresh":function(){this.currentPage=1,this.loadData()},"vuetable:goto-page":function(page){this.$emit("vuetable-pagination:change-page",page)},"vuetable:set-options":function(options){for(var n in options)this.$set(n,options[n])}},created:function(){this.normalizeFields(),this.loadOnStart&&this.loadData(),this.$nextTick(function(){this.callPaginationConfig()})}},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class={{wrapperClass}}><table class="vuetable {{tableClass}}"><thead><tr><template v-for="field in fields"><template v-if=field.visible><template v-if=isSpecialField(field.name)><th v-if="extractName(field.name) == \'__checkbox\'" class="{{field.titleClass || \'\'}}"><input type=checkbox @change="toggleAllCheckboxes($event.target.checked, field.name)"><th v-else="" id={{field.name}} class="{{field.titleClass || \'\'}}">{{field.title || \'\'}}</template><template v-else=""><th @click=orderBy(field) id=_{{field.name}} class="{{field.titleClass || \'\'}} {{isSortable(field) ? \'sortable\' : \'\'}}">{{getTitle(field) | capitalize}}&nbsp; <i v-if=isCurrentSortField(field) class="{{ sortIcon }}"></i></template></template></template><tbody v-cloak=""><tr v-for="(itemNumber, item) in tableData" @click="onRowClicked(item, $event)"><template v-if=onRowChanged(item)></template><template v-for="field in fields"><template v-if=field.visible><template v-if=isSpecialField(field.name)><td v-if="extractName(field.name) == \'__sequence\'" class="vuetable-sequence {{field.dataClass}}" v-html="tablePagination.from + itemNumber"><td v-if="extractName(field.name) == \'__checkbox\'" class="vuetable-checkboxes {{field.dataClass}}"><input type=checkbox @change="toggleCheckbox($event.target.checked, item, field.name)" :checked="isSelectedRow(item, field.name)"><td v-if="field.name == \'__actions\'" class="vuetable-actions {{field.dataClass}}"><template v-for="action in itemActions"><button class="{{ action.class }}" @click="callAction(action.name, item)" v-attr=action.extra><i class="{{ action.icon }}"></i> {{ action.label }}</button></template></template><template v-else=""><td v-if=hasCallback(field) class={{field.dataClass}} @dblclick="onCellDoubleClicked(item, field, $event)">{{{ callCallback(field, item) }}}<td v-else="" class={{field.dataClass}} @dblclick="onCellDoubleClicked(item, field, $event)">{{{ getObjectValue(item, field.name, "") }}}</template></template></template></table><div v-if=showPagination class="vuetable-pagination {{paginationClass}}"><div class="vuetable-pagination-info {{paginationInfoClass}}" v-html=paginationInfo></div><div v-show="tablePagination &amp;&amp; tablePagination.last_page > 1" class="vuetable-pagination-component {{paginationComponentClass}}"><component v-ref:pagination="" :is=paginationComponent></component></div></div></div>'},{"vueify/lib/insert-css":1}],3:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _VuetablePaginationMixin=require("./VuetablePaginationMixin.vue"),_VuetablePaginationMixin2=_interopRequireDefault(_VuetablePaginationMixin);exports.default={mixins:[_VuetablePaginationMixin2.default]},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class={{wrapperClass}}><a @click=loadPage(1) class="btn-nav {{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}"><i v-if="icons.first != \'\'" class={{icons.first}}></i> <span v-else="">«</span> </a><a @click="loadPage(\'prev\')" class="btn-nav {{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}"><i v-if="icons.next != \'\'" class={{icons.prev}}></i> <span v-else="">&nbsp;‹</span></a><template v-if=notEnoughPages><template v-for="n in totalPage"><a @click=loadPage(n+1) class="{{pageClass}} {{isCurrentPage(n+1) ? activeClass : \'\'}}">{{ n+1 }}</a></template></template><template v-else=""><template v-for="n in windowSize"><a @click=loadPage(windowStart+n) class="{{pageClass}} {{isCurrentPage(windowStart+n) ? activeClass : \'\'}}">{{ windowStart+n }}</a></template></template><a @click="loadPage(\'next\')" class="btn-nav {{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}"><i v-if="icons.next != \'\'" class={{icons.next}}></i> <span v-else="">›&nbsp;</span> </a><a @click=loadPage(totalPage) class="btn-nav {{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}"><i v-if="icons.last != \'\'" class={{icons.last}}></i> <span v-else="">»</span></a></div>'},{"./VuetablePaginationMixin.vue":5}],4:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _VuetablePaginationMixin=require("./VuetablePaginationMixin.vue"),_VuetablePaginationMixin2=_interopRequireDefault(_VuetablePaginationMixin);exports.default={mixins:[_VuetablePaginationMixin2.default],props:{dropdownClass:{type:String,default:function(){return"ui search dropdown"}},pageText:{type:String,default:function(){return"Page"}}},methods:{loadPage:function(page){"prev"!=page||this.isOnFirstPage?"next"!=page||this.isOnLastPage||this.setDropdownToPage(this.tablePagination.current_page+1):this.setDropdownToPage(this.tablePagination.current_page-1),this.$dispatch("vuetable-pagination:change-page",page)},setDropdownToPage:function(page){this.$nextTick(function(){document.getElementById("vuetable-pagination-dropdown").value=page})},selectPage:function(event){this.$dispatch("vuetable-pagination:change-page",event.target.selectedIndex+1)}},events:{"vuetable:load-success":function(tablePagination){this.tablePagination=tablePagination,this.setDropdownToPage(tablePagination.current_page)}}},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class={{wrapperClass}}><a @click="loadPage(\'prev\')" class="{{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}"><i :class=icons.prev></i></a><select id=vuetable-pagination-dropdown class={{dropdownClass}} @change=selectPage($event)><template v-for="n in totalPage"><option class={{pageClass}} value={{n+1}}>{{pageText}} {{n+1}}</template></select><a @click="loadPage(\'next\')" class="{{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}"><i :class=icons.next></i></a></div>'},{"./VuetablePaginationMixin.vue":5}],5:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={props:{wrapperClass:{type:String,default:function(){return"ui right floated pagination menu"}},activeClass:{type:String,default:function(){return"active large"}},disabledClass:{type:String,default:function(){return"disabled"}},pageClass:{type:String,default:function(){return"item"}},linkClass:{type:String,default:function(){return"icon item"}},icons:{type:Object,default:function(){return{first:"angle double left icon",prev:"left chevron icon",next:"right chevron icon",last:"angle double right icon"}}},onEachSide:{type:Number,coerce:function(value){return parseInt(value)},default:function(){return 2}}},data:function(){return{tablePagination:null}},computed:{totalPage:function(){return null==this.tablePagination?0:this.tablePagination.last_page},isOnFirstPage:function(){return null==this.tablePagination?!1:1==this.tablePagination.current_page},isOnLastPage:function(){return null==this.tablePagination?!1:this.tablePagination.current_page==this.tablePagination.last_page},notEnoughPages:function(){return this.totalPage<2*this.onEachSide+4},windowSize:function(){return 2*this.onEachSide+1},windowStart:function(){return this.tablePagination.current_page<=this.onEachSide?1:this.tablePagination.current_page>=this.totalPage-this.onEachSide?this.totalPage-2*this.onEachSide:this.tablePagination.current_page-this.onEachSide}},methods:{loadPage:function(page){this.$dispatch("vuetable-pagination:change-page",page)},isCurrentPage:function(page){return page==this.tablePagination.current_page}},events:{"vuetable:load-success":function(tablePagination){this.tablePagination=tablePagination},"vuetable-pagination:set-options":function(options){for(var n in options)this.$set(n,options[n])}}},module.exports.__esModule&&(module.exports=module.exports.default)},{}],6:[function(require,module,exports){Vue.component("vuetable-pagination",require("./components/VuetablePagination.vue")),Vue.component("vuetable-pagination-dropdown",require("./components/VuetablePaginationDropdown.vue")),Vue.component("vuetable",require("./components/Vuetable.vue"))},{"./components/Vuetable.vue":2,"./components/VuetablePagination.vue":3,"./components/VuetablePaginationDropdown.vue":4}]},{},[6]);
+!function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var inserted=exports.cache={};exports.insert=function(css){if(!inserted[css]){inserted[css]=!0;var elem=document.createElement("style");return elem.setAttribute("type","text/css"),"textContent"in elem?elem.textContent=css:elem.styleSheet.cssText=css,document.getElementsByTagName("head")[0].appendChild(elem),elem}}},{}],2:[function(require,module,exports){var __vueify_insert__=require("vueify/lib/insert-css");__vueify_insert__.insert(".vuetable th.sortable:hover{color:#2185d0;cursor:pointer}.vuetable-actions{width:15%;padding:12px 0;text-align:center}.vuetable-pagination{background:#f9fafb!important}.vuetable-pagination-info{margin-top:auto;margin-bottom:auto}");Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={props:{wrapperClass:{type:String,default:function(){return null}},tableWrapper:{type:String,default:function(){return null}},tableClass:{type:String,default:function(){return"ui blue striped selectable celled stackable attached table"}},loadingClass:{type:String,default:function(){return"loading"}},dataPath:{type:String,default:function(){return"data"}},paginationPath:{type:String,default:function(){return"links.pagination"}},fields:{type:Array,required:!0},apiUrl:{type:String,required:!0},sortOrder:{type:Array,default:function(){return[]}},multiSort:{type:Boolean,default:function(){return!1}},perPage:{type:Number,coerce:function(val){return parseInt(val)},default:function(){return 10}},ascendingIcon:{type:String,default:function(){return"blue chevron up icon"}},descendingIcon:{type:String,default:function(){return"blue chevron down icon"}},appendParams:{type:Array,default:function(){return[]}},showPagination:{type:Boolean,default:function(){return!0}},paginationComponent:{type:String,default:function(){return"vuetable-pagination"}},paginationInfoTemplate:{type:String,default:function(){return"Displaying {from} to {to} of {total} items"}},paginationInfoNoDataTemplate:{type:String,default:function(){return"No relevant data"}},paginationClass:{type:String,default:function(){return"ui bottom attached segment grid"}},paginationInfoClass:{type:String,default:function(){return"left floated left aligned six wide column"}},paginationComponentClass:{type:String,default:function(){return"right floated right aligned six wide column"}},paginationConfig:{type:String,default:function(){return"paginationConfig"}},itemActions:{type:Array,default:function(){return[]}},queryParams:{type:Object,default:function(){return{sort:"sort",page:"page",perPage:"per_page"}}},loadOnStart:{type:Boolean,default:function(){return!0}},selectedTo:{type:Array,default:function(){return[]}},httpData:{type:Object,default:function(){return{}}},httpOptions:{type:Object,default:function(){return{}}}},data:function(){return{version:"1.1.1",eventPrefix:"vuetable:",tableData:null,tablePagination:null,currentPage:1}},directives:{attr:{update:function(value){for(var i in value)this.el.setAttribute(i,value[i])}}},computed:{paginationInfo:function(){return null==this.tablePagination||0==this.tablePagination.total?this.paginationInfoNoDataTemplate:this.paginationInfoTemplate.replace("{from}",this.tablePagination.from||0).replace("{to}",this.tablePagination.to||0).replace("{total}",this.tablePagination.total||0)}},methods:{normalizeFields:function(){var obj,self=this;this.fields.forEach(function(field,i){obj="string"==typeof field?{name:field,title:self.setTitle(field),titleClass:"",dataClass:"",callback:null,visible:!0}:{name:field.name,title:void 0===field.title?self.setTitle(field.name):field.title,sortField:field.sortField,titleClass:void 0===field.titleClass?"":field.titleClass,dataClass:void 0===field.dataClass?"":field.dataClass,callback:void 0===field.callback?"":field.callback,visible:void 0===field.visible?!0:field.visible},self.fields.$set(i,obj)})},setTitle:function(str){return this.isSpecialField(str)?"":this.titleCase(str)},titleCase:function(str){return str.replace(/\w+/g,function(txt){return txt.charAt(0).toUpperCase()+txt.substr(1).toLowerCase()})},loadData:function(){var wrapper=document.querySelector(this.tableWrapper);this.showLoadingAnimation(wrapper);var params=[this.queryParams.sort+"="+this.getSortParam(),this.queryParams.page+"="+this.currentPage,this.queryParams.perPage+"="+this.perPage],url=this.apiUrl+"?"+params.join("&");this.appendParams.length>0&&(url+="&"+this.appendParams.join("&"));var self=this;this.$http.get(url,this.httpData,this.httpOptions).then(function(response){self.tableData=self.getObjectValue(response.data,self.dataPath,null),self.tablePagination=self.getObjectValue(response.data,self.paginationPath,null),null===self.tablePagination&&console.warn('vuetable: pagination-path "'+self.paginationPath+'"" not found. It looks like the data returned from the sever does not have pagination information.'),self.dispatchEvent("load-success",response),self.broadcastEvent("load-success",self.tablePagination),self.hideLoadingAnimation(wrapper)},function(response){self.dispatchEvent("load-error",response),self.broadcastEvent("load-error",response),self.hideLoadingAnimation(wrapper)})},showLoadingAnimation:function(wrapper){null!==wrapper&&this.addClass(wrapper,this.loadingClass),this.dispatchEvent("loading")},hideLoadingAnimation:function(wrapper){null!==wrapper&&this.removeClass(wrapper,this.loadingClass),this.dispatchEvent("loaded")},getTitle:function(field){return"undefined"==typeof field.title?field.name.replace("."," "):field.title},getSortParam:function(){if(!this.sortOrder||""==this.sortOrder.field)return"";for(var result="",i=0;i<this.sortOrder.length;i++){var fieldName="undefined"==typeof this.sortOrder[i].sortField?this.sortOrder[i].field:this.sortOrder[i].sortField;result+=fieldName+"|"+this.sortOrder[i].direction+(i+1<this.sortOrder.length?",":"")}return result},addClass:function(el,className){el.classList?el.classList.add(className):el.className+=" "+className},removeClass:function(el,className){el.classList?el.classList.remove(className):el.className=el.className.replace(new RegExp("(^|\\b)"+className.split(" ").join("|")+"(\\b|$)","gi")," ")},dispatchEvent:function(eventName,args){this.$dispatch(this.eventPrefix+eventName,args)},broadcastEvent:function(eventName,args){this.$broadcast(this.eventPrefix+eventName,args)},orderBy:function(field){if(this.isSortable(field)){if(this.multiSort){var i=this.currentSortOrder(field);i===!1?this.sortOrder.push({field:field.name,direction:"asc"}):"asc"==this.sortOrder[i].direction?this.sortOrder[i].direction="desc":this.sortOrder.splice(i,1)}else 0==this.sortOrder.length&&this.sortOrder.push({field:"",direction:"asc"}),this.sortOrder[0].field==field.name?this.sortOrder[0].direction="asc"==this.sortOrder[0].direction?"desc":"asc":this.sortOrder[0].direction="asc",this.sortOrder[0].field=field.name,this.sortOrder[0].sortField=field.sortField;this.currentPage=1,this.loadData()}},isSortable:function(field){return!("undefined"==typeof field.sortField)},isCurrentSortField:function(field){return this.currentSortOrder(field)!==!1},currentSortOrder:function(field){if(!this.isSortable(field))return!1;for(var i=0;i<this.sortOrder.length;i++)if(this.sortOrder[i].field==field.name)return i;return!1},sortIcon:function(field){var i=this.currentSortOrder(field);return i!==!1?"asc"==this.sortOrder[i].direction?this.ascendingIcon:this.descendingIcon:""},gotoPreviousPage:function(){this.currentPage>1&&(this.currentPage--,this.loadData())},gotoNextPage:function(){this.currentPage<this.tablePagination.last_page&&(this.currentPage++,this.loadData())},gotoPage:function(page){page!=this.currentPage&&page>0&&page<=this.tablePagination.last_page&&(this.currentPage=page,this.loadData())},isSpecialField:function(fieldName){return fieldName.startsWith("__")},hasCallback:function(item){return!!item.callback},callCallback:function(field,item){if(this.hasCallback(field)){var args=field.callback.split("|"),func=args.shift();return"function"==typeof this.$parent[func]?args.length>0?this.$parent[func].apply(this.$parent,[this.getObjectValue(item,field.name)].concat(args)):this.$parent[func].call(this.$parent,this.getObjectValue(item,field.name)):null}},getObjectValue:function(object,path,defaultValue){defaultValue="undefined"==typeof defaultValue?null:defaultValue;var obj=object;if(""!=path.trim()){var keys=path.split(".");keys.forEach(function(key){return"undefined"==typeof obj[key]||null===obj[key]?void(obj=defaultValue):void(obj=obj[key])})}return obj},callAction:function(action,data){this.$dispatch(this.eventPrefix+"action",action,data)},addParam:function(param){this.appendParams.push(param)},toggleCheckbox:function(isChecked,dataItem,fieldName){var idColumn=this.extractArgs(fieldName);return void 0===idColumn?void console.warn('You did not provide reference id column with "__checkbox:<column_name>" field!'):void(isChecked?this.selectedTo.push(dataItem[idColumn]):this.selectedTo.$remove(dataItem[idColumn]))},toggleAllCheckboxes:function(isChecked,fieldName){var self=this,idColumn=this.extractArgs(fieldName);isChecked?this.tableData.forEach(function(dataItem){self.isSelectedRow(dataItem,fieldName)||self.selectedTo.push(dataItem[idColumn])}):this.tableData.forEach(function(dataItem){self.selectedTo.$remove(dataItem[idColumn])})},isSelectedRow:function(dataItem,fieldName){return this.selectedTo.indexOf(dataItem[this.extractArgs(fieldName)])>=0},extractName:function(string){return string.split(":")[0].trim()},extractArgs:function(string){return string.split(":")[1]},onRowChanged:function(dataItem){return this.dispatchEvent("row-changed",dataItem),!0},onRowClicked:function(dataItem,event){return this.$dispatch(this.eventPrefix+"row-clicked",dataItem,event),!0},onCellDoubleClicked:function(dataItem,field,event){this.$dispatch(this.eventPrefix+"cell-dblclicked",dataItem,field,event)},callPaginationConfig:function(){"function"==typeof this.$parent[this.paginationConfig]&&this.$parent[this.paginationConfig].call(this.$parent,this.$refs.pagination.$options.name)}},watch:{multiSort:function(newVal,oldVal){newVal===!1&&this.sortOrder.length>1&&(this.sortOrder.splice(1),this.loadData())}},events:{"vuetable-pagination:change-page":function(page){"prev"==page?this.gotoPreviousPage():"next"==page?this.gotoNextPage():this.gotoPage(page)},"vuetable:reload":function(){this.loadData()},"vuetable:refresh":function(){this.currentPage=1,this.loadData()},"vuetable:goto-page":function(page){this.$emit("vuetable-pagination:change-page",page)},"vuetable:set-options":function(options){for(var n in options)this.$set(n,options[n])}},created:function(){this.normalizeFields(),this.loadOnStart&&this.loadData(),this.$nextTick(function(){this.callPaginationConfig()})}},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class={{wrapperClass}}><table class="vuetable {{tableClass}}"><thead><tr><template v-for="field in fields"><template v-if=field.visible><template v-if=isSpecialField(field.name)><th v-if="extractName(field.name) == \'__checkbox\'" class="{{field.titleClass || \'\'}}"><input type=checkbox @change="toggleAllCheckboxes($event.target.checked, field.name)"><th v-else="" id={{field.name}} class="{{field.titleClass || \'\'}}">{{field.title || \'\'}}</template><template v-else=""><th @click=orderBy(field) id=_{{field.name}} class="{{field.titleClass || \'\'}} {{isSortable(field) ? \'sortable\' : \'\'}}">{{getTitle(field) | capitalize}}&nbsp; <i v-if=isCurrentSortField(field) class="{{ sortIcon(field) }}"></i></template></template></template><tbody v-cloak=""><tr v-for="(itemNumber, item) in tableData" @click="onRowClicked(item, $event)"><template v-if=onRowChanged(item)></template><template v-for="field in fields"><template v-if=field.visible><template v-if=isSpecialField(field.name)><td v-if="extractName(field.name) == \'__sequence\'" class="vuetable-sequence {{field.dataClass}}" v-html="tablePagination.from + itemNumber"><td v-if="extractName(field.name) == \'__checkbox\'" class="vuetable-checkboxes {{field.dataClass}}"><input type=checkbox @change="toggleCheckbox($event.target.checked, item, field.name)" :checked="isSelectedRow(item, field.name)"><td v-if="field.name == \'__actions\'" class="vuetable-actions {{field.dataClass}}"><template v-for="action in itemActions"><button class="{{ action.class }}" @click="callAction(action.name, item)" v-attr=action.extra><i class="{{ action.icon }}"></i> {{ action.label }}</button></template></template><template v-else=""><td v-if=hasCallback(field) class={{field.dataClass}} @dblclick="onCellDoubleClicked(item, field, $event)">{{{ callCallback(field, item) }}}<td v-else="" class={{field.dataClass}} @dblclick="onCellDoubleClicked(item, field, $event)">{{{ getObjectValue(item, field.name, "") }}}</template></template></template></table><div v-if=showPagination class="vuetable-pagination {{paginationClass}}"><div class="vuetable-pagination-info {{paginationInfoClass}}" v-html=paginationInfo></div><div v-show="tablePagination &amp;&amp; tablePagination.last_page > 1" class="vuetable-pagination-component {{paginationComponentClass}}"><component v-ref:pagination="" :is=paginationComponent></component></div></div></div>'},{"vueify/lib/insert-css":1}],3:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _VuetablePaginationMixin=require("./VuetablePaginationMixin.vue"),_VuetablePaginationMixin2=_interopRequireDefault(_VuetablePaginationMixin);exports.default={mixins:[_VuetablePaginationMixin2.default]},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class={{wrapperClass}}><a @click=loadPage(1) class="btn-nav {{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}"><i v-if="icons.first != \'\'" class={{icons.first}}></i> <span v-else="">«</span> </a><a @click="loadPage(\'prev\')" class="btn-nav {{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}"><i v-if="icons.next != \'\'" class={{icons.prev}}></i> <span v-else="">&nbsp;‹</span></a><template v-if=notEnoughPages><template v-for="n in totalPage"><a @click=loadPage(n+1) class="{{pageClass}} {{isCurrentPage(n+1) ? activeClass : \'\'}}">{{ n+1 }}</a></template></template><template v-else=""><template v-for="n in windowSize"><a @click=loadPage(windowStart+n) class="{{pageClass}} {{isCurrentPage(windowStart+n) ? activeClass : \'\'}}">{{ windowStart+n }}</a></template></template><a @click="loadPage(\'next\')" class="btn-nav {{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}"><i v-if="icons.next != \'\'" class={{icons.next}}></i> <span v-else="">›&nbsp;</span> </a><a @click=loadPage(totalPage) class="btn-nav {{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}"><i v-if="icons.last != \'\'" class={{icons.last}}></i> <span v-else="">»</span></a></div>'},{"./VuetablePaginationMixin.vue":5}],4:[function(require,module,exports){"use strict";function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}Object.defineProperty(exports,"__esModule",{value:!0});var _VuetablePaginationMixin=require("./VuetablePaginationMixin.vue"),_VuetablePaginationMixin2=_interopRequireDefault(_VuetablePaginationMixin);exports.default={mixins:[_VuetablePaginationMixin2.default],props:{dropdownClass:{type:String,default:function(){return"ui search dropdown"}},pageText:{type:String,default:function(){return"Page"}}},methods:{loadPage:function(page){"prev"!=page||this.isOnFirstPage?"next"!=page||this.isOnLastPage||this.setDropdownToPage(this.tablePagination.current_page+1):this.setDropdownToPage(this.tablePagination.current_page-1),this.$dispatch("vuetable-pagination:change-page",page)},setDropdownToPage:function(page){this.$nextTick(function(){document.getElementById("vuetable-pagination-dropdown").value=page})},selectPage:function(event){this.$dispatch("vuetable-pagination:change-page",event.target.selectedIndex+1)}},events:{"vuetable:load-success":function(tablePagination){this.tablePagination=tablePagination,this.setDropdownToPage(tablePagination.current_page)}}},module.exports.__esModule&&(module.exports=module.exports.default),("function"==typeof module.exports?module.exports.options:module.exports).template='<div class={{wrapperClass}}><a @click="loadPage(\'prev\')" class="{{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}"><i :class=icons.prev></i></a><select id=vuetable-pagination-dropdown class={{dropdownClass}} @change=selectPage($event)><template v-for="n in totalPage"><option class={{pageClass}} value={{n+1}}>{{pageText}} {{n+1}}</template></select><a @click="loadPage(\'next\')" class="{{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}"><i :class=icons.next></i></a></div>'},{"./VuetablePaginationMixin.vue":5}],5:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={props:{wrapperClass:{type:String,default:function(){return"ui right floated pagination menu"}},activeClass:{type:String,default:function(){return"active large"}},disabledClass:{type:String,default:function(){return"disabled"}},pageClass:{type:String,default:function(){return"item"}},linkClass:{type:String,default:function(){return"icon item"}},icons:{type:Object,default:function(){return{first:"angle double left icon",prev:"left chevron icon",next:"right chevron icon",last:"angle double right icon"}}},onEachSide:{type:Number,coerce:function(value){return parseInt(value)},default:function(){return 2}}},data:function(){return{tablePagination:null}},computed:{totalPage:function(){return null==this.tablePagination?0:this.tablePagination.last_page},isOnFirstPage:function(){return null==this.tablePagination?!1:1==this.tablePagination.current_page},isOnLastPage:function(){return null==this.tablePagination?!1:this.tablePagination.current_page==this.tablePagination.last_page},notEnoughPages:function(){return this.totalPage<2*this.onEachSide+4},windowSize:function(){return 2*this.onEachSide+1},windowStart:function(){return this.tablePagination.current_page<=this.onEachSide?1:this.tablePagination.current_page>=this.totalPage-this.onEachSide?this.totalPage-2*this.onEachSide:this.tablePagination.current_page-this.onEachSide}},methods:{loadPage:function(page){this.$dispatch("vuetable-pagination:change-page",page)},isCurrentPage:function(page){return page==this.tablePagination.current_page}},events:{"vuetable:load-success":function(tablePagination){this.tablePagination=tablePagination},"vuetable-pagination:set-options":function(options){for(var n in options)this.$set(n,options[n])}}},module.exports.__esModule&&(module.exports=module.exports.default)},{}],6:[function(require,module,exports){Vue.component("vuetable-pagination",require("./components/VuetablePagination.vue")),Vue.component("vuetable-pagination-dropdown",require("./components/VuetablePaginationDropdown.vue")),Vue.component("vuetable",require("./components/Vuetable.vue"))},{"./components/Vuetable.vue":2,"./components/VuetablePagination.vue":3,"./components/VuetablePaginationDropdown.vue":4}]},{},[6]);
diff --git a/examples/bootstrap.html b/examples/bootstrap.html
index 1741628..25a9793 100644
--- a/examples/bootstrap.html
+++ b/examples/bootstrap.html
@@ -184,6 +184,7 @@ <h2 class="sub-header">List of Users</h2>
                 pagination-path=""
                 :fields="fields"
                 :sort-order="sortOrder"
+                :multi-sort="multiSort"
                 table-class="table table-bordered table-striped table-hover"
                 ascending-icon="glyphicon glyphicon-chevron-up"
                 descending-icon="glyphicon glyphicon-chevron-down"
@@ -261,10 +262,11 @@ <h2 class="sub-header">List of Users</h2>
         data: {
             searchFor: '',
             fields: tableColumns,
-            sortOrder: {
+            sortOrder: [{
                 field: 'name',
                 direction: 'asc'
-            },
+            }],
+            multiSort: false,
             perPage: 10,
             paginationComponent: 'vuetable-pagination',
             paginationInfoTemplate: 'แสดง {from} ถึง {to} จากทั้งหมด {total} รายการ',
diff --git a/examples/semantic.html b/examples/semantic.html
index 56dcbad..e6c9a57 100644
--- a/examples/semantic.html
+++ b/examples/semantic.html
@@ -143,6 +143,7 @@ <h3 class="ui header">List of Users</h3>
                 table-wrapper=".vuetable-wrapper"
                 :fields="fields"
                 :sort-order="sortOrder"
+                :multi-sort="multiSort"
                 :item-actions="itemActions"
                 :per-page="perPage"
                 :append-params="moreParams"
@@ -203,10 +204,11 @@ <h3 class="ui header">List of Users</h3>
             searchFor: '',
             moreParams: [],
             fields: tableColumns,
-            sortOrder: {
+            sortOrder: [{
                 field: 'name',
                 direction: 'asc',
-            },
+            }],
+            multiSort: false,
             paginationComponent: 'vuetable-pagination',
             perPage: 10,
             paginationInfoTemplate: 'แสดง {from} ถึง {to} จากทั้งหมด {total} รายการ',
diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
index cc5460e..bb8ee0f 100644
--- a/src/components/Vuetable.vue
+++ b/src/components/Vuetable.vue
@@ -18,7 +18,7 @@
                                     id="_{{field.name}}"
                                     class="{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}">
                                     {{getTitle(field) | capitalize}}&nbsp;
-                                    <i v-if="isCurrentSortField(field)" class="{{ sortIcon }}"></i>
+                                    <i v-if="isCurrentSortField(field)" class="{{ sortIcon(field) }}"></i>
                                 </th>
                             </template>
                         </template>
@@ -120,12 +120,21 @@ export default {
             required: true
         },
         'sortOrder': {
-            type: Object,
+            type: Array,
             default: function() {
-                return {
-                    field: '',
-                    direction: 'asc'
-                }
+                return [];
+                /* array of 
+                    {
+                        field: '',
+                        direction: 'asc'
+                    }
+                objects */
+            }
+        },
+        'multiSort' : {
+            type: Boolean,
+            default: function() {
+                return false
             }
         },
         'perPage': {
@@ -263,9 +272,6 @@ export default {
         },
     },
     computed: {
-        sortIcon: function() {
-            return this.sortOrder.direction == 'asc' ? this.ascendingIcon : this.descendingIcon
-        },
         paginationInfo: function() {
             if (this.tablePagination == null || this.tablePagination.total == 0) {
                 return this.paginationInfoNoDataTemplate
@@ -377,11 +383,17 @@ export default {
                 return ''
             }
 
-            var fieldName = (typeof this.sortOrder.sortField === 'undefined')
-                ? this.sortOrder.field
-                : this.sortOrder.sortField
+            var result = '';
+
+            for(var i=0; i<this.sortOrder.length; i++){
+                var fieldName = (typeof this.sortOrder[i].sortField === 'undefined')
+                    ? this.sortOrder[i].field
+                    : this.sortOrder[i].sortField;
 
-            return fieldName +'|' + this.sortOrder.direction
+                result += fieldName +'|' + this.sortOrder[i].direction + ((i+1)<this.sortOrder.length ? ',' : '');
+            }
+
+            return result;
         },
         addClass: function(el, className) {
             if (el.classList)
@@ -406,15 +418,42 @@ export default {
                 return
             }
 
-            if (this.sortOrder.field == field.name) {
-                // change sort direction
-                this.sortOrder.direction = this.sortOrder.direction == 'asc' ? 'desc' : 'asc'
+            if (this.multiSort){
+                var i = this.currentSortOrder(field);
+
+                if(i === false){ //this field is not in the sort array yet
+                    this.sortOrder.push({
+                        field: field.name,
+                        direction: 'asc'
+                    });
+                } else { //this field is in the sort array, now we change its state
+                    if(this.sortOrder[i].direction == 'asc'){
+                        // switch direction
+                        this.sortOrder[i].direction = 'desc'
+                    } else {
+                        //remove sort condition
+                        this.sortOrder.splice(i, 1);
+                    }
+                }
             } else {
-                // reset sort direction
-                this.sortOrder.direction = 'asc'
+                if (this.sortOrder.length == 0){
+                    this.sortOrder.push({
+                        field: '',
+                        direction: 'asc'
+                    });
+                }
+                if (this.sortOrder[0].field == field.name) {
+                    // change sort direction
+                    this.sortOrder[0].direction = this.sortOrder[0].direction == 'asc' ? 'desc' : 'asc'
+                } else {
+                    // reset sort direction
+                    this.sortOrder[0].direction = 'asc'
+                }
+                this.sortOrder[0].field = field.name
+                this.sortOrder[0].sortField = field.sortField
             }
-            this.sortOrder.field = field.name
-            this.sortOrder.sortField = field.sortField
+
+            
             this.currentPage = 1    // reset page index
             this.loadData()
         },
@@ -422,11 +461,30 @@ export default {
             return !(typeof field.sortField == 'undefined')
         },
         isCurrentSortField: function(field) {
+            return this.currentSortOrder(field) !== false;
+        },
+        currentSortOrder: function(field){
             if (!this.isSortable(field)) {
                 return false
             }
 
-            return this.sortOrder.field == field.name
+            for(var i = 0; i<this.sortOrder.length; i++){
+                if(this.sortOrder[i].field == field.name){
+                    return i;
+                }
+            }
+
+            return false;
+        },
+        sortIcon: function(field) {
+            var i = this.currentSortOrder(field);
+            if (i !== false){
+                return this.sortOrder[i].direction == 'asc' ?
+                    this.ascendingIcon :
+                    this.descendingIcon;
+            } else {
+                return '';
+            }  
         },
         gotoPreviousPage: function() {
             if (this.currentPage > 1) {
@@ -544,6 +602,14 @@ export default {
             }
         },
     },
+    watch: {
+        'multiSort': function(newVal, oldVal){
+            if (newVal === false && this.sortOrder.length > 1) {
+                this.sortOrder.splice(1);
+                this.loadData();
+            }
+        }
+    },
     events: {
         'vuetable-pagination:change-page': function(page) {
             if (page == 'prev') {

From cbf3c667a21772317853c184dfc04b95093b5659 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Kov=C3=A1cs?= <balping314@gmail.com>
Date: Sat, 18 Jun 2016 13:43:54 +0200
Subject: [PATCH 2/3] Multisort now works with ctrl key

---
 dist/vue-table.js           | 11 ++++++++---
 src/components/Vuetable.vue | 11 +++++++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/dist/vue-table.js b/dist/vue-table.js
index c02a452..2555c20 100644
--- a/dist/vue-table.js
+++ b/dist/vue-table.js
@@ -647,12 +647,13 @@ exports.default = {
         broadcastEvent: function broadcastEvent(eventName, args) {
             this.$broadcast(this.eventPrefix + eventName, args);
         },
-        orderBy: function orderBy(field) {
+        orderBy: function orderBy(field, event) {
             if (!this.isSortable(field)) {
                 return;
             }
 
-            if (this.multiSort) {
+            if (this.multiSort && event.ctrlKey) {
+                //adding column to multisort
                 var i = this.currentSortOrder(field);
 
                 if (i === false) {
@@ -672,12 +673,16 @@ exports.default = {
                     }
                 }
             } else {
+                //no multisort, or resetting sort
                 if (this.sortOrder.length == 0) {
                     this.sortOrder.push({
                         field: '',
                         direction: 'asc'
                     });
                 }
+
+                this.sortOrder.splice(1); //removes additional columns
+
                 if (this.sortOrder[0].field == field.name) {
                     // change sort direction
                     this.sortOrder[0].direction = this.sortOrder[0].direction == 'asc' ? 'desc' : 'asc';
@@ -877,7 +882,7 @@ exports.default = {
     }
 };
 if (module.exports.__esModule) module.exports = module.exports.default
-;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div class=\"{{wrapperClass}}\">\n    <table class=\"vuetable {{tableClass}}\">\n        <thead>\n            <tr>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <th v-if=\"extractName(field.name) == '__checkbox'\" class=\"{{field.titleClass || ''}}\">\n                                <input type=\"checkbox\" @change=\"toggleAllCheckboxes($event.target.checked, field.name)\">\n                            </th>\n                            <th v-else=\"\" id=\"{{field.name}}\" class=\"{{field.titleClass || ''}}\">\n                                {{field.title || ''}}\n                            </th>\n                        </template>\n                        <template v-else=\"\">\n                            <th @click=\"orderBy(field)\" id=\"_{{field.name}}\" class=\"{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}\">\n                                {{getTitle(field) | capitalize}}&nbsp;\n                                <i v-if=\"isCurrentSortField(field)\" class=\"{{ sortIcon(field) }}\"></i>\n                            </th>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </thead>\n        <tbody v-cloak=\"\">\n            <tr v-for=\"(itemNumber, item) in tableData\" @click=\"onRowClicked(item, $event)\">\n                <template v-if=\"onRowChanged(item)\"></template>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <td v-if=\"extractName(field.name) == '__sequence'\" class=\"vuetable-sequence {{field.dataClass}}\" v-html=\"tablePagination.from + itemNumber\">\n                            </td>\n                            <td v-if=\"extractName(field.name) == '__checkbox'\" class=\"vuetable-checkboxes {{field.dataClass}}\">\n                                <input type=\"checkbox\" @change=\"toggleCheckbox($event.target.checked, item, field.name)\" :checked=\"isSelectedRow(item, field.name)\">\n                            </td>\n                            <td v-if=\"field.name == '__actions'\" class=\"vuetable-actions {{field.dataClass}}\">\n                                <template v-for=\"action in itemActions\">\n                                    <button class=\"{{ action.class }}\" @click=\"callAction(action.name, item)\" v-attr=\"action.extra\">\n                                        <i class=\"{{ action.icon }}\"></i> {{ action.label }}\n                                    </button>\n                                </template>\n                            </td>\n                        </template>\n                        <template v-else=\"\">\n                            <td v-if=\"hasCallback(field)\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ callCallback(field, item) }}}\n                            </td>\n                            <td v-else=\"\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ getObjectValue(item, field.name, \"\") }}}\n                            </td>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </tbody>\n    </table>\n    <div v-if=\"showPagination\" class=\"vuetable-pagination {{paginationClass}}\">\n        <div class=\"vuetable-pagination-info {{paginationInfoClass}}\" v-html=\"paginationInfo\">\n        </div>\n        <div v-show=\"tablePagination &amp;&amp; tablePagination.last_page > 1\" class=\"vuetable-pagination-component {{paginationComponentClass}}\">\n            <component v-ref:pagination=\"\" :is=\"paginationComponent\"></component>\n        </div>\n    </div>\n</div>\n"
+;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div class=\"{{wrapperClass}}\">\n    <table class=\"vuetable {{tableClass}}\">\n        <thead>\n            <tr>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <th v-if=\"extractName(field.name) == '__checkbox'\" class=\"{{field.titleClass || ''}}\">\n                                <input type=\"checkbox\" @change=\"toggleAllCheckboxes($event.target.checked, field.name)\">\n                            </th>\n                            <th v-else=\"\" id=\"{{field.name}}\" class=\"{{field.titleClass || ''}}\">\n                                {{field.title || ''}}\n                            </th>\n                        </template>\n                        <template v-else=\"\">\n                            <th @click=\"orderBy(field, $event)\" id=\"_{{field.name}}\" class=\"{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}\">\n                                {{getTitle(field) | capitalize}}&nbsp;\n                                <i v-if=\"isCurrentSortField(field)\" class=\"{{ sortIcon(field) }}\"></i>\n                            </th>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </thead>\n        <tbody v-cloak=\"\">\n            <tr v-for=\"(itemNumber, item) in tableData\" @click=\"onRowClicked(item, $event)\">\n                <template v-if=\"onRowChanged(item)\"></template>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <td v-if=\"extractName(field.name) == '__sequence'\" class=\"vuetable-sequence {{field.dataClass}}\" v-html=\"tablePagination.from + itemNumber\">\n                            </td>\n                            <td v-if=\"extractName(field.name) == '__checkbox'\" class=\"vuetable-checkboxes {{field.dataClass}}\">\n                                <input type=\"checkbox\" @change=\"toggleCheckbox($event.target.checked, item, field.name)\" :checked=\"isSelectedRow(item, field.name)\">\n                            </td>\n                            <td v-if=\"field.name == '__actions'\" class=\"vuetable-actions {{field.dataClass}}\">\n                                <template v-for=\"action in itemActions\">\n                                    <button class=\"{{ action.class }}\" @click=\"callAction(action.name, item)\" v-attr=\"action.extra\">\n                                        <i class=\"{{ action.icon }}\"></i> {{ action.label }}\n                                    </button>\n                                </template>\n                            </td>\n                        </template>\n                        <template v-else=\"\">\n                            <td v-if=\"hasCallback(field)\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ callCallback(field, item) }}}\n                            </td>\n                            <td v-else=\"\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ getObjectValue(item, field.name, \"\") }}}\n                            </td>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </tbody>\n    </table>\n    <div v-if=\"showPagination\" class=\"vuetable-pagination {{paginationClass}}\">\n        <div class=\"vuetable-pagination-info {{paginationInfoClass}}\" v-html=\"paginationInfo\">\n        </div>\n        <div v-show=\"tablePagination &amp;&amp; tablePagination.last_page > 1\" class=\"vuetable-pagination-component {{paginationComponentClass}}\">\n            <component v-ref:pagination=\"\" :is=\"paginationComponent\"></component>\n        </div>\n    </div>\n</div>\n"
 if (module.hot) {(function () {  module.hot.accept()
   var hotAPI = require("vue-hot-reload-api")
   hotAPI.install(require("vue"), true)
diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
index bb8ee0f..afe5c2d 100644
--- a/src/components/Vuetable.vue
+++ b/src/components/Vuetable.vue
@@ -14,7 +14,7 @@
                                 </th>
                             </template>
                             <template v-else>
-                                <th @click="orderBy(field)"
+                                <th @click="orderBy(field, $event)"
                                     id="_{{field.name}}"
                                     class="{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}">
                                     {{getTitle(field) | capitalize}}&nbsp;
@@ -413,12 +413,12 @@ export default {
         broadcastEvent: function(eventName, args) {
             this.$broadcast(this.eventPrefix + eventName, args)
         },
-        orderBy: function(field) {
+        orderBy: function(field, event) {
             if ( ! this.isSortable(field)) {
                 return
             }
 
-            if (this.multiSort){
+            if (this.multiSort && event.ctrlKey){ //adding column to multisort
                 var i = this.currentSortOrder(field);
 
                 if(i === false){ //this field is not in the sort array yet
@@ -435,13 +435,16 @@ export default {
                         this.sortOrder.splice(i, 1);
                     }
                 }
-            } else {
+            } else { //no multisort, or resetting sort
                 if (this.sortOrder.length == 0){
                     this.sortOrder.push({
                         field: '',
                         direction: 'asc'
                     });
                 }
+
+                this.sortOrder.splice(1); //removes additional columns
+
                 if (this.sortOrder[0].field == field.name) {
                     // change sort direction
                     this.sortOrder[0].direction = this.sortOrder[0].direction == 'asc' ? 'desc' : 'asc'

From c4189fda16a95c8f4e39f06f14078232ee2cbc13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20Kov=C3=A1cs?= <balping314@gmail.com>
Date: Sat, 18 Jun 2016 14:14:20 +0200
Subject: [PATCH 3/3] Indicating order precedence on the sort icon by opacity

---
 dist/vue-table.js           | 26 +++++++++++++++++++++++++-
 src/components/Vuetable.vue | 27 ++++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/dist/vue-table.js b/dist/vue-table.js
index 2555c20..8606b92 100644
--- a/dist/vue-table.js
+++ b/dist/vue-table.js
@@ -724,6 +724,30 @@ exports.default = {
                 return '';
             }
         },
+        sortIconOpacity: function sortIconOpacity(field) {
+            //fields with stronger precedence have darker color
+
+            //if there are few fields, we go down by 0.3
+            //ex. 2 fields are selected: 1.0, 0.7
+
+            //if there are more we go down evenly on the given spectrum
+            //ex. 6 fields are selected: 1.0, 0.86, 0.72, 0.58, 0.44, 0.3
+
+            var max = 1.0;
+            var min = 0.3;
+            var step = 0.3;
+
+            var count = this.sortOrder.length;
+            var current = this.currentSortOrder(field);
+
+            if (max - count * step < min) {
+                step = (max - min) / (count - 1);
+            }
+
+            var opacity = max - current * step;
+
+            return opacity;
+        },
         gotoPreviousPage: function gotoPreviousPage() {
             if (this.currentPage > 1) {
                 this.currentPage--;
@@ -882,7 +906,7 @@ exports.default = {
     }
 };
 if (module.exports.__esModule) module.exports = module.exports.default
-;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div class=\"{{wrapperClass}}\">\n    <table class=\"vuetable {{tableClass}}\">\n        <thead>\n            <tr>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <th v-if=\"extractName(field.name) == '__checkbox'\" class=\"{{field.titleClass || ''}}\">\n                                <input type=\"checkbox\" @change=\"toggleAllCheckboxes($event.target.checked, field.name)\">\n                            </th>\n                            <th v-else=\"\" id=\"{{field.name}}\" class=\"{{field.titleClass || ''}}\">\n                                {{field.title || ''}}\n                            </th>\n                        </template>\n                        <template v-else=\"\">\n                            <th @click=\"orderBy(field, $event)\" id=\"_{{field.name}}\" class=\"{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}\">\n                                {{getTitle(field) | capitalize}}&nbsp;\n                                <i v-if=\"isCurrentSortField(field)\" class=\"{{ sortIcon(field) }}\"></i>\n                            </th>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </thead>\n        <tbody v-cloak=\"\">\n            <tr v-for=\"(itemNumber, item) in tableData\" @click=\"onRowClicked(item, $event)\">\n                <template v-if=\"onRowChanged(item)\"></template>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <td v-if=\"extractName(field.name) == '__sequence'\" class=\"vuetable-sequence {{field.dataClass}}\" v-html=\"tablePagination.from + itemNumber\">\n                            </td>\n                            <td v-if=\"extractName(field.name) == '__checkbox'\" class=\"vuetable-checkboxes {{field.dataClass}}\">\n                                <input type=\"checkbox\" @change=\"toggleCheckbox($event.target.checked, item, field.name)\" :checked=\"isSelectedRow(item, field.name)\">\n                            </td>\n                            <td v-if=\"field.name == '__actions'\" class=\"vuetable-actions {{field.dataClass}}\">\n                                <template v-for=\"action in itemActions\">\n                                    <button class=\"{{ action.class }}\" @click=\"callAction(action.name, item)\" v-attr=\"action.extra\">\n                                        <i class=\"{{ action.icon }}\"></i> {{ action.label }}\n                                    </button>\n                                </template>\n                            </td>\n                        </template>\n                        <template v-else=\"\">\n                            <td v-if=\"hasCallback(field)\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ callCallback(field, item) }}}\n                            </td>\n                            <td v-else=\"\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ getObjectValue(item, field.name, \"\") }}}\n                            </td>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </tbody>\n    </table>\n    <div v-if=\"showPagination\" class=\"vuetable-pagination {{paginationClass}}\">\n        <div class=\"vuetable-pagination-info {{paginationInfoClass}}\" v-html=\"paginationInfo\">\n        </div>\n        <div v-show=\"tablePagination &amp;&amp; tablePagination.last_page > 1\" class=\"vuetable-pagination-component {{paginationComponentClass}}\">\n            <component v-ref:pagination=\"\" :is=\"paginationComponent\"></component>\n        </div>\n    </div>\n</div>\n"
+;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div class=\"{{wrapperClass}}\">\n    <table class=\"vuetable {{tableClass}}\">\n        <thead>\n            <tr>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <th v-if=\"extractName(field.name) == '__checkbox'\" class=\"{{field.titleClass || ''}}\">\n                                <input type=\"checkbox\" @change=\"toggleAllCheckboxes($event.target.checked, field.name)\">\n                            </th>\n                            <th v-else=\"\" id=\"{{field.name}}\" class=\"{{field.titleClass || ''}}\">\n                                {{field.title || ''}}\n                            </th>\n                        </template>\n                        <template v-else=\"\">\n                            <th @click=\"orderBy(field, $event)\" id=\"_{{field.name}}\" class=\"{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}\">\n                                {{getTitle(field) | capitalize}}&nbsp;\n                                <i v-if=\"isCurrentSortField(field)\" class=\"{{ sortIcon(field) }}\" v-bind:style=\"{opacity: sortIconOpacity(field)}\"></i>\n                            </th>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </thead>\n        <tbody v-cloak=\"\">\n            <tr v-for=\"(itemNumber, item) in tableData\" @click=\"onRowClicked(item, $event)\">\n                <template v-if=\"onRowChanged(item)\"></template>\n                <template v-for=\"field in fields\">\n                    <template v-if=\"field.visible\">\n                        <template v-if=\"isSpecialField(field.name)\">\n                            <td v-if=\"extractName(field.name) == '__sequence'\" class=\"vuetable-sequence {{field.dataClass}}\" v-html=\"tablePagination.from + itemNumber\">\n                            </td>\n                            <td v-if=\"extractName(field.name) == '__checkbox'\" class=\"vuetable-checkboxes {{field.dataClass}}\">\n                                <input type=\"checkbox\" @change=\"toggleCheckbox($event.target.checked, item, field.name)\" :checked=\"isSelectedRow(item, field.name)\">\n                            </td>\n                            <td v-if=\"field.name == '__actions'\" class=\"vuetable-actions {{field.dataClass}}\">\n                                <template v-for=\"action in itemActions\">\n                                    <button class=\"{{ action.class }}\" @click=\"callAction(action.name, item)\" v-attr=\"action.extra\">\n                                        <i class=\"{{ action.icon }}\"></i> {{ action.label }}\n                                    </button>\n                                </template>\n                            </td>\n                        </template>\n                        <template v-else=\"\">\n                            <td v-if=\"hasCallback(field)\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ callCallback(field, item) }}}\n                            </td>\n                            <td v-else=\"\" class=\"{{field.dataClass}}\" @dblclick=\"onCellDoubleClicked(item, field, $event)\">\n                                {{{ getObjectValue(item, field.name, \"\") }}}\n                            </td>\n                        </template>\n                    </template>\n                </template>\n            </tr>\n        </tbody>\n    </table>\n    <div v-if=\"showPagination\" class=\"vuetable-pagination {{paginationClass}}\">\n        <div class=\"vuetable-pagination-info {{paginationInfoClass}}\" v-html=\"paginationInfo\">\n        </div>\n        <div v-show=\"tablePagination &amp;&amp; tablePagination.last_page > 1\" class=\"vuetable-pagination-component {{paginationComponentClass}}\">\n            <component v-ref:pagination=\"\" :is=\"paginationComponent\"></component>\n        </div>\n    </div>\n</div>\n"
 if (module.hot) {(function () {  module.hot.accept()
   var hotAPI = require("vue-hot-reload-api")
   hotAPI.install(require("vue"), true)
diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
index afe5c2d..031bb86 100644
--- a/src/components/Vuetable.vue
+++ b/src/components/Vuetable.vue
@@ -18,7 +18,7 @@
                                     id="_{{field.name}}"
                                     class="{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}">
                                     {{getTitle(field) | capitalize}}&nbsp;
-                                    <i v-if="isCurrentSortField(field)" class="{{ sortIcon(field) }}"></i>
+                                    <i v-if="isCurrentSortField(field)" class="{{ sortIcon(field) }}" v-bind:style="{opacity: sortIconOpacity(field)}"></i>
                                 </th>
                             </template>
                         </template>
@@ -489,6 +489,31 @@ export default {
                 return '';
             }  
         },
+        sortIconOpacity: function(field) {
+            //fields with stronger precedence have darker color
+
+            //if there are few fields, we go down by 0.3
+            //ex. 2 fields are selected: 1.0, 0.7
+
+            //if there are more we go down evenly on the given spectrum
+            //ex. 6 fields are selected: 1.0, 0.86, 0.72, 0.58, 0.44, 0.3 
+
+            var max = 1.0;
+            var min = 0.3;
+            var step = 0.3;
+
+            var count = this.sortOrder.length;
+            var current = this.currentSortOrder(field);
+
+
+            if(max - count*step < min){
+               step = (max - min) / (count-1);
+            }
+
+            var opacity = max - current*step;
+
+            return opacity;
+        },
         gotoPreviousPage: function() {
             if (this.currentPage > 1) {
                 this.currentPage--