Merge branch 'develop' for v1.7.2

ratiw · Jan 1, 2018 · d99d93c · d99d93c
2 parents b8f0495 + 683268f
commit d99d93c
Show file tree

Hide file tree

Showing 8 changed files with 1,806 additions and 402 deletions.
diff --git a/dist/stats.json b/dist/stats.json
diff --git a/dist/vuetable-2-full.js b/dist/vuetable-2-full.js
diff --git a/dist/vuetable-2.js b/dist/vuetable-2.js
diff --git a/docs/Vuetable-Properties.md b/docs/Vuetable-Properties.md
@@ -26,6 +26,7 @@
 - [reactive-api-url](#-reactive-api-url)
 - [render-icon](#-render-icon)
 - [row-class](#-row-class)
+- [show-sort-icons](#-show-sort-icons)
 - [sort-order](#-sort-order)
 - [table-height](#-table-height)
 - [track-by](#-track-by)

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    
+
     <title>vue2</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" media="screen" title="no title" charset="utf-8">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
@@ -106,6 +106,7 @@ <h3 class="ui header">List of Users</h3>
                       :sort-order="sortOrder"
                       :multi-sort="multiSort"
                       :per-page="perPage"
+                      :query-params="queryParams"
                       :append-params="moreParams"
                       detail-row-component="my-detail-row"
                       detail-row-transition="expand"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuetable-2",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "Datatable component for Vue 2.x",
   "main": "dist/vuetable-2.js",
   "license": "MIT",
@@ -34,7 +34,7 @@
   "scripts": {
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
-    "build": "node build/build.js",
+    "build": "node build/build.js && npm run bundle",
     "bundle:min": "cross-env MINIFY=true webpack --progress --config build/webpack.build.config.js",
     "bundle:full": "cross-env MINIFY=false webpack --progress --config build/webpack.build.config.js",
     "bundle": "npm run bundle:min && npm run bundle:full",

diff --git a/src/components/Vuetable.vue b/src/components/Vuetable.vue
@@ -16,13 +16,13 @@
               <th v-if="extractName(field.name) == '__component'"
                   @click="orderBy(field, $event)"
                     :style="{width: field.width}"
-                  :class="['vuetable-th-component-'+trackBy, field.titleClass, {'sortable': isSortable(field)}]"
+                  :class="['vuetable-th-component-'+trackBy, field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
                   v-html="renderTitle(field)"
               ></th>
               <th v-if="extractName(field.name) == '__slot'"
                   @click="orderBy(field, $event)"
                     :style="{width: field.width}"
-                  :class="['vuetable-th-slot-'+extractArgs(field.name), field.titleClass, {'sortable': isSortable(field)}]"
+                  :class="['vuetable-th-slot-'+extractArgs(field.name), field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
                   v-html="renderTitle(field)"
               ></th>
               <th v-if="extractName(field.name) == '__sequence'"
@@ -38,7 +38,7 @@
               <th @click="orderBy(field, $event)"
                 :id="'_' + field.name"
                   :style="{width: field.width}"
-                :class="['vuetable-th-'+field.name, field.titleClass,  {'sortable': isSortable(field)}]"
+                :class="['vuetable-th-'+field.name, field.titleClass, sortClass(field), {'sortable': isSortable(field)}]"
                 v-html="renderTitle(field)"
               ></th>
             </template>
@@ -105,16 +105,16 @@
               </template>
             </tr>
             <template v-if="useDetailRow">
-              <tr v-if="isVisibleDetailRow(item[trackBy])"
-                @click="onDetailRowClick(item, $event)"
-                :class="[css.detailRowClass]"
-              >
-                <transition :name="detailRowTransition">
-                  <td :colspan="countVisibleFields">
-                    <component :is="detailRowComponent" :row-data="item" :row-index="index"></component>
-                  </td>
-                </transition>
-              </tr>
+              <transition :name="detailRowTransition">
+                <tr v-if="isVisibleDetailRow(item[trackBy])"
+                  @click="onDetailRowClick(item, $event)"
+                  :class="[css.detailRowClass]"
+                >
+                    <td :colspan="countVisibleFields">
+                      <component :is="detailRowComponent" :row-data="item" :row-index="index"></component>
+                    </td>
+                </tr>
+              </transition>
             </template>
           </template>
           <template v-if="displayEmptyDataRow">
@@ -211,12 +211,14 @@
               <td v-if="hasCallback(field)" :class="field.dataClass"
                 @click="onCellClicked(item, field, $event)"
                 @dblclick="onCellDoubleClicked(item, field, $event)"
+                @contextmenu="onCellRightClicked(item, field, $event)"
                 v-html="callCallback(field, item)"
               >
               </td>
               <td v-else :class="field.dataClass"
                 @click="onCellClicked(item, field, $event)"
                 @dblclick="onCellDoubleClicked(item, field, $event)"
+                @contextmenu="onCellRightClicked(item, field, $event)"
                 v-html="getObjectValue(item, field.name, '')"
               >
               </td>
@@ -310,7 +312,7 @@ export default {
         default: 'links.pagination'
     },
     queryParams: {
-      type: Object,
+      type: [Object, Function],
       default () {
         return {
           sort: 'sort',
@@ -592,7 +594,7 @@ export default {
       })
     },
     setData (data) {
-      this.apiMode = false
+      // this.apiMode = false
       if (Array.isArray(data)) {
         this.tableData = data
         return
@@ -627,7 +629,8 @@ export default {
 
       if (title.length > 0 && this.isInCurrentSortGroup(field) || this.hasSortableIcon(field)) {
         let style = `opacity:${this.sortIconOpacity(field)};position:relative;float:right`
-        return title + ' ' + this.renderIconTag(['sort-icon', this.sortIcon(field)], `style="${style}"`)
+        let iconTag = this.showSortIcons ? this.renderIconTag(['sort-icon', this.sortIcon(field)], `style="${style}"`) : ''
+        return title + ' ' + iconTag
       }
 
       return title
@@ -667,7 +670,7 @@ export default {
 
       this.fireEvent('loading')
 
-      this.httpOptions['params'] = this.getAllQueryParams()
+      this.httpOptions['params'] = this.getAppendParams( this.getAllQueryParams() )
 
       return this.fetch(this.apiUrl, this.httpOptions).then(
           success,
@@ -750,14 +753,16 @@ export default {
     },
     getAllQueryParams () {
       let params = {}
+
+      if (typeof(this.queryParams) === 'function') {
+        params = this.queryParams(this.sortOrder, this.currentPage, this.perPage)
+        return typeof(params) !== 'object' ? {} : params
+      }
+
       params[this.queryParams.sort] = this.getSortParam()
       params[this.queryParams.page] = this.currentPage
       params[this.queryParams.perPage] = this.perPage
 
-      for (let x in this.appendParams) {
-        params[x] = this.appendParams[x]
-      }
-
       return params
     },
     getSortParam () {
@@ -784,6 +789,13 @@ export default {
 
       return result;
     },
+    getAppendParams (params) {
+      for (let x in this.appendParams) {
+        params[x] = this.appendParams[x]
+      }
+
+      return params
+    },
     extractName (string) {
       return string.split(':')[0].trim()
     },
@@ -828,7 +840,7 @@ export default {
       }
 
       this.currentPage = 1    // reset page index
-      if (this.apiMode) {
+      if (this.apiMode || this.dataManager) {
         this.loadData()
       }
     },
@@ -875,6 +887,16 @@ export default {
         direction: 'asc'
       });
     },
+    sortClass (field) {
+      let cls = ''
+      let i = this.currentSortOrderPosition(field)
+
+      if (i !== false) {
+        cls = (this.sortOrder[i].direction == 'asc') ? this.css.ascendingClass : this.css.descendingClass
+      }
+
+      return cls
+    },
     sortIcon (field) {
       let cls = this.css.sortableIcon
       let i = this.currentSortOrderPosition(field)

diff --git a/src/main.js b/src/main.js
@@ -261,7 +261,7 @@ let vm = new Vue({
   data: {
     loading: '',
     searchFor: '',
-    moreParams: {},
+    moreParams: { aa: 1111, bb: 222 },
     fields: tableColumns,
     tableHeight: '600px',
     vuetableFields: false,
@@ -355,9 +355,7 @@ let vm = new Vue({
       ].join('')
     },
     setFilter () {
-      this.moreParams = {
-        'filter': this.searchFor
-      }
+      this.moreParams['filter'] = this.searchFor
       this.$nextTick(function() {
         this.$refs.vuetable.refresh()
       })
@@ -390,6 +388,14 @@ let vm = new Vue({
     rowClassCB (data, index) {
       return (index % 2) === 0 ? 'odd' : 'even'
     },
+    queryParams (sortOrder, currentPage, perPage) {
+      return {
+        'sort': sortOrder[0].field + '|' + sortOrder[0].direction,
+        'order': sortOrder[0].direction,
+        'page': currentPage,
+        'per_page': perPage
+      }
+    },
     onCellClicked (data, field, event) {
       console.log('cellClicked', field.name)
       if (field.name !== '__actions') {