Merge branch 'develop'

dist/vuetable-2-full.js

@@ -1,5 +1,5 @@
 /**
- * vuetable-2 v1.7.0
+ * vuetable-2 v1.7.1
  * https://github.com/ratiw/vuetable-2
  * Released under the MIT License.
  */
@@ -2779,7 +2779,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
       this.httpOptions['params'] = this.getAllQueryParams();
 
-      this.fetch(this.apiUrl, this.httpOptions).then(success, failed).catch(function () {
+      return this.fetch(this.apiUrl, this.httpOptions).then(success, failed).catch(function () {
         return failed();
       });
     },
@@ -2929,7 +2929,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       }
 
       this.currentPage = 1;
-      this.loadData();
+      if (this.apiMode) {
+        this.loadData();
+      }
     },
     multiColumnSort: function multiColumnSort(field) {
       var i = this.currentSortOrderPosition(field);
@@ -3246,6 +3248,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     onCellDoubleClicked: function onCellDoubleClicked(dataItem, field, event) {
       this.$emit(this.eventPrefix + 'cell-dblclicked', dataItem, field, event);
     },
+    onCellRightClicked: function onCellRightClicked(dataItem, field, event) {
+      this.$emit(this.eventPrefix + 'cell-rightclicked', dataItem, field, event);
+    },
     changePage: function changePage(page) {
       if (page === 'prev') {
         this.gotoPreviousPage();
@@ -3256,11 +3261,11 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
       }
     },
     reload: function reload() {
-      this.loadData();
+      return this.loadData();
     },
     refresh: function refresh() {
       this.currentPage = 1;
-      this.loadData();
+      return this.loadData();
     },
     resetData: function resetData() {
       this.tableData = null;
@@ -3277,6 +3282,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
     },
     'apiUrl': function apiUrl(newVal, oldVal) {
       if (this.reactiveApiUrl && newVal !== oldVal) this.refresh();
+    },
+    'data': function data(newVal, oldVal) {
+      this.setData(newVal);
     }
   }
 });
@@ -4121,6 +4129,9 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
           },
           "dblclick": function($event) {
             _vm.onCellDoubleClicked(item, field, $event)
+          },
+          "contextmenu": function($event) {
+            _vm.onCellRightClicked(item, field, $event)
           }
         }
       })]] : _vm._e()]

docs/Vuetable-Events.md

@@ -11,6 +11,7 @@
 - [vuetable:row-dblclicked](#-vuetablerow-dblclicked)
 - [vuetable:cell-clicked](#-vuetablecell-clicked)
 - [vuetable:cell-dblclicked](#-vuetablecell-dblclicked)
+- [vuetable:cell-rightclicked](#-vuetablecell-rightclicked)
 - [vuetable:detail-row-clicked](#-vuetabledetail-row-clicked)
 - [vuetable:checkbox-toggled](#-vuetablecheckbox-toggled)
 - [vuetable:checkbox-toggled-all](#-vuetablecheckbox-toggled-all)
@@ -109,6 +110,15 @@
 
   This event will be fired when a cell in the table body has been double-clicked.
 
+### # vuetable:cell-rightclicked
+- payload:
+  - dataItem: _Object_ -- the current data item
+  - field: _Object_ -- the field object that causes this event
+  - event: _Event_ -- the MouseObject event
+- description
+
+  This event will be fired when a cell in the table body has been right-clicked.
+
 ### # vuetable:detail-row-clicked
 - payload:
   - dataItem: _Object_ -- the current data item

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuetable-2",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Datatable component for Vue 2.x",
   "main": "dist/vuetable-2.js",
   "license": "MIT",

src/components/Vuetable.vue

@@ -55,7 +55,7 @@
           <template v-for="field in tableFields">
             <template v-if="field.visible">
               <template>
-                <col 
+                <col
                   :id="'_col_' + field.name"
                   :style="{width: field.width}"
                   :class="['vuetable-th-'+field.name, field.titleClass]"
@@ -96,6 +96,7 @@
                 <td :class="field.dataClass"
                   @click="onCellClicked(item, field, $event)"
                   @dblclick="onCellDoubleClicked(item, field, $event)"
+                  @contextmenu="onCellRightClicked(item, field, $event)"
                   v-html="renderNormalField(field, item)"
                 >
                 </td>
@@ -134,7 +135,7 @@
   </div>
 </div>
 <table v-else :class="['vuetable', css.tableClass]"> <!-- no fixed header - regular table -->
-  <thead> 
+  <thead>
     <tr>
       <template v-for="field in tableFields">
         <template v-if="field.visible">
@@ -554,7 +555,7 @@ export default {
         }
         this.lastScrollPosition = horizontal;
       }
-      
+
     },
     normalizeFields () {
       if (typeof(this.fields) === 'undefined') {
@@ -668,7 +669,7 @@ export default {
 
       this.httpOptions['params'] = this.getAllQueryParams()
 
-      this.fetch(this.apiUrl, this.httpOptions).then(
+      return this.fetch(this.apiUrl, this.httpOptions).then(
           success,
           failed
       ).catch(() => failed())
@@ -693,7 +694,7 @@ export default {
           + 'You can explicitly suppress this warning by setting pagination-path="".'
         )
       }
-      
+
       this.$nextTick(function() {
         this.fixHeader()
         this.fireEvent('pagination-data', this.tablePagination)
@@ -704,7 +705,7 @@ export default {
       if (!this.isFixedHeader) {
         return;
       }
-      
+
       let elem = this.$el.getElementsByClassName('vuetable-body-wrapper')[0]
       if (elem != null) {
         if (elem.scrollHeight > elem.clientHeight) {
@@ -827,7 +828,9 @@ export default {
       }
 
       this.currentPage = 1    // reset page index
-      this.loadData()
+      if (this.apiMode) {
+        this.loadData()
+      }
     },
     multiColumnSort (field) {
       let i = this.currentSortOrderPosition(field);
@@ -1167,6 +1170,9 @@ export default {
     onCellDoubleClicked (dataItem, field, event) {
       this.$emit(this.eventPrefix + 'cell-dblclicked', dataItem, field, event)
     },
+    onCellRightClicked (dataItem, field, event) {
+      this.$emit(this.eventPrefix + 'cell-rightclicked', dataItem, field, event)
+    },
     /*
      * API for externals
      */
@@ -1180,11 +1186,11 @@ export default {
       }
     },
     reload () {
-      this.loadData()
+      return this.loadData()
     },
     refresh () {
       this.currentPage = 1
-      this.loadData()
+      return this.loadData()
     },
     resetData () {
       this.tableData = null
@@ -1202,6 +1208,9 @@ export default {
     'apiUrl'  (newVal, oldVal) {
       if(this.reactiveApiUrl && newVal !== oldVal)
         this.refresh()
+    },
+    'data' (newVal, oldVal) {
+      this.setData(newVal)
     }
   },
 }

src/main.js

@@ -399,6 +399,9 @@ let vm = new Vue({
     onCellDoubleClicked (data, field, event) {
       console.log('cellDoubleClicked:', field.name)
     },
+    onCellRightClicked (data, field, event) {
+      console.log('cellRightClicked:', field.name)
+    },
     onLoadSuccess (response) {
       // set pagination data to pagination-info component
       this.$refs.paginationInfo.setPaginationData(response.data)