vuetable - npm Package Compare versions

Comparing version 1.0.12 to 1.1.0

package.json

 {
   "name": "vuetable",
-  "version": "1.0.12",
+  "version": "1.1.0",
   "description": "vue.js table component that will automatically request JSON data from server and display them nicely in HTML table with swap-able/extensible pagination component",
@@ -17,5 +17,3 @@ "main": "src/vue-table.js",
   "browserify": {
-    "transform": [
-      "vueify"
-    ]
+    "transform": ["vueify"]
   },
@@ -22,0 +20,0 @@ "repository": {

README.md

@@ -176,3 +176,3 @@ vuetable - data table simplify!
 				'birthdate',
-				'group.name_en',
+				'group.name_en'
 				'gender',
@@ -179,0 +179,0 @@ 'last_login',

src/vue-table.js

 /*
- * vue-table.js v1.0.12
+ * vue-table.js v1.1.0
  * (c) 2016 Rati Wannapanop
@@ -18,2 +18,8 @@ * Released under the MIT License.
         },
+        'activeClass': {
+            type: String,
+            default: function() {
+                return 'active large'
+            }
+        },
         'disabledClass': {
@@ -41,7 +47,18 @@ type: String,
                 return {
+                    first: 'angle double left icon',
                     prev: 'left chevron icon',
-                    next: 'right chevron icon'
+                    next: 'right chevron icon',
+                    last: 'angle double right icon',
                 }
             }
-        }
+        },
+        'onEachSide': {
+            type: Number,
+            coerce: function(value) {
+                return parseInt(value)
+            },
+            default: function() {
+                return 2
+            }
+        },
     },
@@ -69,2 +86,17 @@ data: function() {
         },
+        notEnoughPages: function() {
+            return this.totalPage < (this.onEachSide * 2) + 4
+        },
+        windowSize: function() {
+            return this.onEachSide * 2 +1;
+        },
+        windowStart: function() {
+            if (this.tablePagination.current_page <= this.onEachSide) {
+                return 1
+            } else if (this.tablePagination.current_page >= (this.totalPage - this.onEachSide)) {
+                return this.totalPage - this.onEachSide*2
+            }
+
+            return this.tablePagination.current_page - this.onEachSide
+        },
     },
@@ -97,17 +129,39 @@ methods: {
         '<div class="{{wrapperClass}}">'
-            + ' <a @click="loadPage(\'prev\')"'
-                + ' class="{{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}">'
-                    + ' <i :class="icons.prev"></i>'
-            + ' </a>'
-            + ' <template v-for="n in totalPage">'
-                + ' <a @click="loadPage(n+1)"'
-                   + ' class="{{pageClass}} {{isCurrentPage(n+1) ? disabledClass : \'\'}}">'
-                        + ' {{ n+1 }}'
-                + ' </a>'
-            + ' </template>'
-            + ' <a @click="loadPage(\'next\')"'
-                + ' class="{{linkClass}} {{isOnLastPage ? disabledClass : \'\'}}">'
-                + ' <i :class="icons.next"></i>'
-            + ' </a>'
-        + ' </div>',
+            + '<a @click="loadPage(1)" '
+                + 'class="btn-nav {{linkClass}} {{isOnFirstPage ? disabledClass : \'\'}}">'
+                    + '<i v-if="icons.first != \'\'" class="{{icons.first}}"></i>'
+                    + '<span v-else>&laquo;</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;&lsaquo;</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>&rsaquo;&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>&raquo;</span>'
+            + '</a>'
+        + '</div>',
     mixins: [paginationMixin],
@@ -198,3 +252,3 @@ })
                                     + 'class="{{field.titleClass || \'\'}} {{isSortable(field) ? \'sortable\' : \'\'}}">'
-                                    + '{{getTitle(field) | capitalize}}'
+                                    + '{{getTitle(field) | capitalize}}&nbsp;'
                                     + '<i v-if="isCurrentSortField(field)" class="{{ sortIcon }}"></i>'
@@ -208,3 +262,3 @@ + '</th>'
             + '<tbody v-cloak>'
-                + '<tr v-for="item in tableData" @click="onRowClicked(item, $event)">'
+                + '<tr v-for="(itemNumber, item) in tableData" @click="onRowClicked(item, $event)">'
                     + '<template v-if="onRowChanged(item)"></template>'
@@ -367,3 +421,3 @@ + '<template v-for="field in fields">'
             default: function() {
-                return 'left floated left aligned six wide column'
+                return 'left floated left aligned four wide column'
             }
@@ -374,5 +428,11 @@ },
             default: function() {
-                return 'right floated right aligned six wide column'
+                return 'right floated right aligned eight wide column'
             }
         },
+        'paginationConfig': {
+            type: String,
+            default: function() {
+                return 'paginationConfig'
+            }
+        },
         itemActions: {
@@ -697,2 +757,7 @@ type: Array,
         },
+        callPaginationConfig: function() {
+            if (typeof this.$parent[this.paginationConfig] === 'function') {
+                this.$parent[this.paginationConfig].call(this.$parent, this.$refs.pagination.$options.name)
+            }
+        },
     },
@@ -730,3 +795,6 @@ events: {
         }
+        this.$nextTick(function() {
+            this.callPaginationConfig()
+        })
     }
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

127323

decreased by-9.52%

Number of package files

14

decreased by-6.67%

Lines of code

797

decreased by-49.97%

No dependency changes