Update master to release

.gitignore

@@ -6,10 +6,11 @@ docs/.vuepress/dist
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/
-vue-tabulator-v*.tgz
+vue-tabulator*.tgz
 # local env files
 .env.local
 .env.*.local
+package-lock.json
 
 # Log files
 npm-debug.log*

docs/guide/README.md

@@ -7,7 +7,7 @@ How we can make Tabulator better?
 
 Welcome Vue-Tabulator.
 
-## Getting Started
+## Installation
 
 Vue-tabulator is a wrapper to Tabulator, so you need to [install tabulator](http://tabulator.info/docs/4.2/install#sources-npm) to use vue-tabulator.
 
@@ -81,6 +81,47 @@ export default {
 };
 ```
 
+### Browser
+You can import the vue-tabulator in your browser:
+
+```html
+<script src="https://unpkg.com/vue@latest"></script>
+
+<link href="https://unpkg.com/tabulator-tables@4.4.1/dist/css/tabulator.min.css" rel="stylesheet">
+<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.1/dist/js/tabulator.min.js"></script>
+<script src="https://unpkg.com/vue-tabulator@latest"></script>
+
+<div id="app">
+    <h1>Vue Tabulator</h1>
+    <Vue-Tabulator v-model="dados" :options="options" />
+  </div>
+
+
+<script>
+new Vue({
+    el: '#app',
+    data() {
+        return {
+            dados: [{
+                name: 'Teste',
+                age: 13
+            }],
+            options: {
+                columns: [{
+                    title: 'Name',
+                    field: 'name',
+                    sorter: 'string',
+                    width: 200,
+                    editor: true,
+                }, ],
+            }
+        }
+    }
+});
+</script>
+
+```
+
 ## Options
 
 The options object can accept any [Tabulator options](http://tabulator.info/docs/4.2/options), which allows you to use the full power of Tabulator on start or configuration.
@@ -121,6 +162,66 @@ The update strategy is responsible for how data is updated in the Tabulator inst
 ::: warning Use update in editable tables
 To avoid [problems](https://github.com/angeliski/vue-tabulator/issues/13) prefer use `UPDATE` strategy on editable tables
 :::
+## Events
+
+All events in Tabulator follow CamelCase convention, but the events in vue-tabulator will follow the kebab-case:
+
+`rowClick -> row-click`
+
+:::tip
+You can use the options object next to the vue event system to configure your instance.
+The vue-tabulator will call both methods: first emit the event then run the callback in the options object.
+:::
+
+### Row Callbacks 
+- (Available in Release 1.2.0)
+
+You can see all events available [here](http://tabulator.info/docs/4.4/callbacks#row). 
+
+ The events will be emitted in the root component:
+
+```html{5}
+<VueTabulator 
+        v-model="data" 
+        :options="options" 
+        :integration="{ updateStrategy: 'REPLACE' }" 
+        @row-click="myMethod"
+  />
+```
+
+### Cell Callbacks 
+- (Available in Release 1.2.0)
+
+You can see all events available [here](http://tabulator.info/docs/4.4/callbacks#cell). 
+
+ The events will be emitted in the root component:
+
+```html{5}
+<VueTabulator 
+        v-model="data" 
+        :options="options" 
+        :integration="{ updateStrategy: 'REPLACE' }" 
+        @cell-click="myMethod"
+  />
+```
+
+The Callbacks Tabulator will be soon available in the vue-way:
+  - Table Callbacks (Soon)
+  - Column Callbacks (Soon)
+  - Data Callbacks (Soon)
+  - Ajax Callbacks (Soon)
+  - Filter Callbacks (Soon)
+  - Sorting Callbacks (Soon)
+  - Layout Callbacks (Soon)
+  - Pagination Callbacks (Soon)
+  - Group Callbacks (Soon)
+  - Selection Callbacks (Soon)
+  - Row Movement Callbacks (Soon)
+  - Validation Callbacks (Soon)
+  - History Callbacks (Soon)
+  - Clipboard Callbacks (Soon)
+  - Download Callbacks (Soon)
+  - Data Tree Callbacks (Soon)
 
 
 ## Advanced Interaction

jest.config.js

@@ -6,6 +6,7 @@ module.exports = {
     '!**/node_modules/**',
     '!**/App.vue',
     '!**/main.ts',
+    '!**/entry.ts',
   ],
   moduleFileExtensions: [
     'js',

package.json

@@ -51,7 +51,11 @@
     "url": "https://github.com/angeliski/vue-tabulator/issues"
   },
   "dependencies": {
+    "@types/dashify": "^1.0.0",
+    "@types/lodash.mergewith": "^4.6.6",
     "@types/tabulator-tables": "^4.2.4",
+    "dashify": "^2.0.0",
+    "lodash.mergewith": "^4.6.2",
     "tabulator-tables": "^4.2.2",
     "vue-class-component": "^7.1.0",
     "vue-property-decorator": "^8.2.1"
@@ -62,7 +66,7 @@
   },
   "devDependencies": {
     "@types/jest": "^24.0.15",
-    "@typescript-eslint/parser": "^1.13.0",
+    "@typescript-eslint/parser": "^2.0.0",
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-e2e-cypress": "^3.0.5",
     "@vue/cli-plugin-eslint": "^3.0.5",
@@ -85,7 +89,7 @@
     "lint-staged": "^9.2.0",
     "node-sass": "^4.9.0",
     "release-it": "^12.3.3",
-    "sass-loader": "^7.0.1",
+    "sass-loader": "^8.0.0",
     "ts-jest": "^24.0.2",
     "typescript": "~3.5.3",
     "vue-template-compiler": "^2.6.8",
@@ -102,6 +106,7 @@
   ],
   "main": "./dist/vue-tabulator.umd.js",
   "browser": "./dist/vue-tabulator.common.js",
+  "unpkg": "./dist/vue-tabulator.umd.min.js",
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"

src/App.vue

@@ -48,17 +48,25 @@ import VueTabulator from './components/TabulatorComponent.vue';
 })
 export default class App extends Vue {
   public data = [{ name: 'Teste', age: 13 }];
+  public columns = [
+        {
+          title: 'Name',
+          field: 'name',
+          sorter: 'string',
+          width: 200,
+          editor: true,
+        },
+      ]
 
-  public options = {
-    columns: [
-      {
-        title: 'Name',
-        field: 'name',
-        sorter: 'string',
-        width: 200,
-        editor: true,
-      },
-    ],
+  get options() {
+    const vm = this
+    return {
+      columns: this.columns,
+      rowClick: function(e: Event, row: Tabulator.RowComponent) {
+        console.log('I clicked a row',vm,e,row)
+        vm.newRow()
+      }
+    }
   };
 
   updateRow() {

src/components/TabulatorComponent.vue

@@ -11,8 +11,12 @@ import {
   Component, Prop, Vue, Watch, Model,
 } from 'vue-property-decorator';
 import { IntegrationOptions, UpdateStrategy } from '@/types';
-
+import mergeWith from 'lodash.mergewith'
+import merge from '../utilities/merge'
 const Tabulator = require('tabulator-tables');
+import eventFactory from '../feature/event-factory'
+import cellEvents from '../feature/events/cell-events'
+import rowEvents from '../feature/events/row-events'
 
 @Component({
   name: 'TabulatorComponent',
@@ -23,6 +27,11 @@ export default class TabulatorComponent extends Vue {
 
   private tabulatorInstance: Tabulator | null = null;
 
+  get eventOptions(): Object {
+    const events = eventFactory.bind(this)
+    return {...events(rowEvents), ...events(cellEvents)}
+  }
+
   @Prop({ default: () => ({}) })
   private options?: Tabulator.Options;
 
@@ -44,8 +53,9 @@ export default class TabulatorComponent extends Vue {
 
   @Watch('options', { deep: true })
   private updateOptions() {
+
     this.resolvedOptions = {
-      ...this.options,
+      ...mergeWith(this.eventOptions, this.options, merge),
       data: this.tableData,
     };
 

src/entry.ts

@@ -3,9 +3,15 @@ import TabulatorComponent from '@/components/TabulatorComponent.vue';
 
 export { TabulatorComponent };
 
+function install(VueApp: typeof Vue, options: any = {}) {
+  const name = options.name || 'VueTabulator';
+  VueApp.component(name, TabulatorComponent);
+}; 
+
 export default {
-  install(VueApp: typeof Vue, options: any = {}) {
-    const name = options.name || 'VueTabulator';
-    VueApp.component(name, TabulatorComponent);
-  },
+  install,
 };
+
+if (typeof window !== 'undefined' && (<any>window).Vue && (<any>window).Vue === Vue) {
+  install((<any>window).Vue)
+}

src/feature/event-factory.ts

@@ -0,0 +1,13 @@
+import Vue from 'vue';
+import dashify from 'dashify';
+
+export default function (this: Vue, events: string[]): Object {
+  const vm = this;
+  const obj: {[index:string] : {}} = {};
+  events.forEach((event) => {
+    obj[event] = (...args: any[]) => {
+      vm.$emit(dashify(event), ...args);
+    };
+  });
+  return obj;
+}

src/feature/events/cell-events.ts

@@ -0,0 +1,18 @@
+const cellEvents: string[] = [
+  'cellClick',
+  'cellDblClick',
+  'cellContext',
+  'cellTap',
+  'cellDblTap',
+  'cellTapHOld',
+  'cellMouseEnter',
+  'cellMouseLeave',
+  'cellMouseOver',
+  'cellMouseOut',
+  'cellMouseMove',
+  'cellEditing',
+  'cellEditCancelled',
+  'cellEdited',
+]
+
+export default cellEvents

src/feature/events/row-events.ts

@@ -0,0 +1,20 @@
+const rowEvents: string[] = [
+  'rowClick',
+  'rowDblClick',
+  'rowContext',
+  'rowTap',
+  'rowDblTap',
+  'rowTapHold',
+  'rowMouseEnter',
+  'rowMouseLeave',
+  'rowMouseOver',
+  'rowMouseOut',
+  'rowMouseMove',
+  'rowAdded',
+  'rowUpdated',
+  'rowDeleted',
+  'rowMoved',
+  'rowResized',
+]
+
+export default rowEvents

src/utilities/joint.ts

@@ -0,0 +1,28 @@
+// ----------------------------------------//
+// Just pick the most appropriate version //
+// ----------------------------------------//
+// Attribution: https://github.com/Dayjo/joint
+/**
+ * Joint for joining more than 2 functions.
+ * Joins an array of functions together to return a single function
+ * @param  {array} a An array of functions
+ * @return {function} Returns a function which is an accumilation of functions in 'a'
+ */
+export default function joint(a: Function[]): Function {
+  // const b: Function;
+  let C: any;
+
+  const b = a[(a.length - 1)];
+
+  a.pop();
+
+  if (a.length > 1) {
+    C = joint(a);
+  } else {
+    [C] = a;
+  }
+
+  return function joined(...args: any[]) {
+    b.apply(new C(...args), args);
+  };
+}

src/utilities/merge.ts

@@ -0,0 +1,8 @@
+import joint from './joint';
+
+export default function merge(objValue: any, srcValue: any, key: string): any | undefined {
+  if (typeof objValue === 'function' && typeof srcValue === 'function') {
+    return joint([objValue, srcValue]);
+  }
+  return undefined;
+}

tests/e2e/specs/vue-tabulator-spec-e2e.js

@@ -11,10 +11,16 @@ describe('VueTabulator', () => {
     cy.get('#row').click();
     cy.contains('.tabulator-cell', 'Teste 2');
   });
-
+  
   it('Bind options to tabulator', () => {
     cy.visit('/');
     cy.get('#column').click();
     cy.contains('.tabulator-col-title', 'age');
   });
+
+  it('Fires events on row click', () => {
+    cy.visit('/')
+    cy.get('.tabulator-cell').click()
+    cy.contains('.tabulator-cell', 'Teste 2');
+  })
 });