vuetable-2 - npm Package Compare versions

Comparing version 1.7.2 to 2.0.0-alpha

package.json

 {
   "name": "vuetable-2",
-  "version": "1.7.2",
+  "version": "2.0.0-alpha",
   "description": "Datatable component for Vue 2.x",
@@ -5,0 +5,0 @@ "main": "dist/vuetable-2.js",

src/index.js

@@ -7,2 +7,6 @@ import Vuetable from './components/Vuetable.vue'
 import VuetablePaginationInfoMixin from './components/VuetablePaginationInfoMixin.vue'
+import VuetableFieldCheckbox from './components/VuetableFieldCheckbox.vue'
+import VuetableFieldHandle from './components/VuetableFieldHandle.vue'
+import VuetableFieldSequence from './components/VuetableFieldSequence.vue'
+import VuetableRowHeader from './components/VuetableRowHeader.vue'
 import Promise from 'promise-polyfill'
@@ -19,2 +23,6 @@
   Vue.component("vuetable-pagination-info", VuetablePaginationInfo);
+  Vue.component("vuetable-field-checkbox", VuetableFieldCheckbox)
+  Vue.component("vuetable-field-handle", VuetableFieldHandle)
+  Vue.component("vuetable-field-sequence", VuetableFieldSequence)
+  Vue.component("vuetable-row-header", VuetableRowHeader)
 }
@@ -28,2 +36,6 @@ export {
   VuetablePaginationInfoMixin,
+  VuetableFieldCheckbox,
+  VuetableFieldHandle,
+  VuetableFieldSequence,
+  VuetableRowHeader,
   install
@@ -30,0 +42,0 @@ };

src/main.js

@@ -8,2 +8,10 @@ import Vue from 'vue'
 
+import VuetableFieldCheckbox from './components/VuetableFieldCheckbox.vue'
+import VuetableFieldHandle from './components/VuetableFieldHandle'
+import VuetableFieldSequence from './components/VuetableFieldSequence.vue'
+
+Vue.component('vuetable-field-checkbox', VuetableFieldCheckbox)
+Vue.component('vuetable-field-handle', VuetableFieldHandle)
+Vue.component('vuetable-field-sequence', VuetableFieldSequence)
+
 let E_SERVER_ERROR = 'Error communicating with the server'
@@ -82,13 +90,2 @@
         </div>
-        <div class="inline fields">
-          <div class="field">
-            <div class="ui checkbox">
-              <input type="checkbox" checked="$parent.tableHeight" @change="setTableHeight($event)">
-              <label>Table Height</label>
-            </div>
-          </div>
-          <div class="field">
-            <input type="text" v-model="$parent.tableHeight">
-          </div>
-        </div>
         <div class="ui divider"></div>
@@ -130,3 +127,3 @@ <div class="field">
   `,
-  props: ['vuetableFields'],
+  props: ['vuetableFields', 'fieldPrefix'],
   data () {
@@ -144,6 +141,6 @@ return {
       title = ''
-      if (field.name.slice(0, 2) === '__') {
+      if (field.name.slice(0, 2) === this.fieldPrefix) {
         title = field.name.indexOf(':') >= 0
           ? field.name.split(':')[1]
-          : field.name.replace('__', '')
+          : field.name.replace(this.fieldPrefix, '')
       }
@@ -159,10 +156,2 @@
       this.$parent.$refs.vuetable.toggleField(index)
-    },
-    setTableHeight (event) {
-      if (event.target.checked) {
-        this.$parent.tableHeight = '600px'
-        return
-      }
-
-      this.$parent.tableHeight = null
     }
@@ -177,5 +166,6 @@ }
 
-let tableColumns = [
-  { name: '__handle',
-    width: '50px'
+let dataFields = [
+  {
+    name: '__handle',
+    width: '40px'
   },
@@ -185,10 +175,10 @@ {
     title: 'No.',
+    width: '50px',
     titleClass: 'right aligned',
-    dataClass: 'right aligned',
-    width: '50px'
+    dataClass: 'right aligned'
   },
   {
     name: '__checkbox',
+    title: 'checkbox',
     width: '30px',
-    title: 'checkbox',
     titleClass: 'center aligned',
@@ -200,5 +190,12 @@ dataClass: 'center aligned'
     title: '<i class="unordered list icon"></i> Detail',
+    width: '80px',
     dataClass: 'center aligned',
-    width: '100px',
-    callback: 'showDetailRow'
+    formatter: (value, vuetable) => {
+      let icon = vuetable.isVisibleDetailRow(value) ? 'down' : 'right'
+      return [
+        '<a class="show-detail-row">',
+            '<i class="chevron circle ' + icon + ' icon"></i>',
+        '</a>'
+      ].join('')
+    },
 
@@ -210,3 +207,4 @@ },
     sortField: 'name',
-    width: '150px'
+    width: '150px',
+    filterable: true,
   },
@@ -218,4 +216,4 @@ {
     width: '200px',
-    dataClass: "vuetable-clip-text",
-    visible: true
+    visible: true,
+    filterable: true,
   },
@@ -230,4 +228,7 @@ {
     sortField: 'nickname',
-    callback: 'allCap',
-    width: '120px'
+    width: '120px',
+    formatter: (value) => {
+      return value.toUpperCase()
+    },
+    filterable: true,
   },
@@ -241,5 +242,9 @@ {
     },
+    width: '100px',
     sortField: 'birthdate',
-    width: '100px',
-    callback: 'formatDate|D/MM/Y'
+    formatter: (value) => {
+      if (value === null) return ''
+      return moment(value, 'YYYY-MM-DD').format('D MMM YYYY')
+    },
+    filterable: true,
   },
@@ -250,13 +255,18 @@ {
     sortField: 'gender',
+    width: '100px',
     titleClass: 'center aligned',
     dataClass: 'center aligned',
-    callback: 'gender',
-    width: '100px',
+    formatter: (value) => {
+      return value === 'M'
+        ? '<span class="ui teal label"><i class="male icon"></i>Male</span>'
+        : '<span class="ui pink label"><i class="female icon"></i>Female</span>'
+    },
+    filterable: true,
   },
   {
-    name: '__component:custom-actions',
+    name: 'slot-actions',
     title: 'Actions',
+    width: '140px',
     titleClass: 'center aligned',
-    dataClass: 'center aligned',
-    width: '150px'
+    dataClass: 'center aligned'
   }
@@ -277,6 +287,7 @@ ]
     searchFor: '',
-    moreParams: { aa: 1111, bb: 222 },
-    fields: tableColumns,
+    moreParams: {},
+    fields: dataFields,
     tableHeight: '600px',
     vuetableFields: false,
+    fieldPrefix: 'vuetable-',
     sortOrder: [{
@@ -350,25 +361,4 @@ field: 'name',
     },
-    allCap (value) {
-      return value.toUpperCase()
-    },
-    formatDate (value, fmt) {
-      if (value === null) return ''
-      fmt = (typeof(fmt) === 'undefined') ? 'D MMM YYYY' : fmt
-      return moment(value, 'YYYY-MM-DD').format(fmt)
-    },
-    gender (value) {
-      return value === 'M'
-        ? '<span class="ui teal label"><i class="male icon"></i>Male</span>'
-        : '<span class="ui pink label"><i class="female icon"></i>Female</span>'
-    },
-    showDetailRow (value) {
-      let icon = this.$refs.vuetable.isVisibleDetailRow(value) ? 'down' : 'right'
-      return [
-        '<a class="show-detail-row">',
-            '<i class="chevron circle ' + icon + ' icon"></i>',
-        '</a>'
-      ].join('')
-    },
     setFilter () {
-      this.moreParams['filter'] = this.searchFor
+      this.moreParams.filter = this.searchFor
       this.$nextTick(function() {
@@ -406,13 +396,5 @@ this.$refs.vuetable.refresh()
     },
-    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') {
+      if (field.name !== this.fieldPrefix+'actions') {
         this.$refs.vuetable.toggleDetailRow(data.id)
@@ -462,3 +444,49 @@ }
     },
+    onActionClicked (action, data) {
+      console.log('slot actions: on-click', data.name)
+      sweetAlert(action, data.name)
+    },
+    onFieldEvent (type, payload, vuetable) {
+      if (type === 'checkbox-toggled') {
+        vuetable.onCheckboxToggled(payload.isChecked, payload.field, payload.dataItem)
+      } else if (type === 'checkbox-toggled-all') {
+        vuetable.onCheckboxToggledAll(payload.isChecked, payload.field)
+      }
+    },
+    onHeaderEvent (type, payload) {
+      console.log('onHeaderEvent:', type, payload)
+      let vuetable = this.$refs.vuetable
+      switch (type) {
+        case 'order-by':
+          vuetable.orderBy(payload.field, payload.event)
+          break
+        case 'refresh':
+          vuetable.refresh()
+          break
+        case 'add-sort-column':
+          vuetable.addSortColumn(payload.field, payload.direction)
+          break
+        case 'remove-sort-column':
+          vuetable.removeSortColumn(payload.index)
+          break
+        case 'set-sort-column':
+          vuetable.setSortColumnDirection(payload.index, payload.direction)
+          break
+        case 'clear-sort-column':
+          vuetable.clearSortOrder()
+          break
+        case 'toggle-row':
+          vuetable.onCheckboxToggled(payload.isChecked, payload.field, payload.dataItem)
+          break
+        case 'toggle-all-rows':
+          vuetable.onCheckboxToggledAll(payload.isChecked, payload.field)
+          break;
+        case 'filter':
+          vuetable.
+          break;
+        default:
+          console.log('Unhandled event: ', type, payload)
+      }
+    }
   },
 })

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

2555904

decreased by-14.24%

Number of package files

63

decreased by-25%

Lines of code

7678

decreased by-0.58%

Number of low quality alerts

2

increased by100%

No dependency changes