Merge pull request #16 from angeliski/dev

chore: update master to next release

.eslintrc.js

@@ -15,6 +15,6 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
   },
   parserOptions: {
-    parser: 'typescript-eslint-parser',
+    parser: '@typescript-eslint/parser',
   },
 };

.github/CONTRIBUTING.md

@@ -31,7 +31,7 @@ Hi! I'm really excited that you are interested in contributing to VueTabulator.
 
 ## Development Setup
 
-You will need [Node.js](http://nodejs.org) **version 8+**.
+You will need [Node.js](http://nodejs.org) **version 10+**.
 We should use [yarn](https://yarnpkg.com).
 
 After cloning the repo, run:

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - v8.10.0
+  - v10.15.1
 addons:
   apt:
     packages:

README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://travis-ci.org/angeliski/vue-tabulator.svg?branch=master)](https://travis-ci.org/angeliski/vue-tabulator) [![Coverage Status](https://coveralls.io/repos/github/angeliski/vue-tabulator/badge.svg?branch=master)](https://coveralls.io/github/angeliski/vue-tabulator?branch=master)
+[![Build Status](https://travis-ci.org/angeliski/vue-tabulator.svg?branch=master)](https://travis-ci.org/angeliski/vue-tabulator) [![Coverage Status](https://coveralls.io/repos/github/angeliski/vue-tabulator/badge.svg?branch=master)](https://coveralls.io/github/angeliski/vue-tabulator?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/angeliski/vue-tabulator.svg)](https://greenkeeper.io/)
 
 # ![logo](./docs/.vuepress/public/assets/img/logo.png)
 
@@ -57,4 +57,4 @@ You can see another docs in [documetation](https://vue-tabulator.netlify.com/).
 
 ## Develop Contributing
 
-See [CONTRIBUTING](./.github/CONTRIBUTING).
+See [CONTRIBUTING](./.github/CONTRIBUTING.md).

docs/guide/README.md

@@ -1,15 +1,15 @@
 # Introduction
 
 
-The lib [Tabulator](http://tabulator.info/) is great, because is pure JavaScript, but sometimes when using vue-apps we need a better, simple integration, like [reactive data](http://tabulator.info/docs/4.2/release#reactive-data), events, components editors and other things.
+[Tabulator](http://tabulator.info/) is great because it's pure JavaScript, but sometimes when creating Vue apps we need a better, simple integration, like [reactive data](http://tabulator.info/docs/4.2/release#reactive-data), events, component editors and more.
 
-How we can be the Great Tabulator better?
+How we can make Tabulator better?
 
-Welcome the Vue-Tabulator.
+Welcome Vue-Tabulator.
 
 ## Getting Started
 
-The vue-tabulator is a wrapper to Tabulator, so you need [install the tabulator](http://tabulator.info/docs/4.2/install#sources-npm) to use vue-tabulator.
+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.
 
 Install vue-tabulator using [`npm`](https://www.npmjs.com/package/vue-tabulator):
 
@@ -26,7 +26,7 @@ yarn add vue-tabulator
 ::: tip
 Vue-tabulator documentation uses `npm` commands, but `yarn` will also work. You can compare `yarn` and `npm` commands in the [yarn docs, here](https://yarnpkg.com/en/docs/migrating-from-npm#toc-cli-commands-comparison).
 :::
-Then register vue-tabulator plugin in your app entry point:
+Then register the vue-tabulator plugin in your app's entry point:
 
 ```javascript
 import Vue from 'vue';
@@ -36,7 +36,7 @@ Vue.use(VueTabulator);
 ```
 
 ::: tip Note
-Import the scss files is not required, but If you import, should configure your project to compile to css.
+Importing the scss files is not required, but if you do, you should configure your project to compile to css.
 :::
 
 And import theme scss files:
@@ -55,7 +55,7 @@ In your component, you can use the VueTabulator component:
 <VueTabulator v-model="data" :options="options" />
 ```
 
-The v-model and the options are required and you can use to pass the content of table and the configuration, respectively.
+The v-model and options are required, and can be used to pass the contents of table and the configuration, respectively.
 You can change the component name on plugin install:
 
 ```javascript
@@ -66,7 +66,7 @@ Vue.use(VueTabulator, {
     name: 'AwesomeTable'
 });
 ```
-Or register the component only in your component: 
+Or register the component locally: 
 
 
 ```javascript
@@ -83,31 +83,32 @@ export default {
 
 ## Options
 
-The current options object can accept any [Tabulator options](http://tabulator.info/docs/4.2/options), that allow you to use the full power of Tabulator on start or configuration.
-The only option isn't allowed is the [_data_](http://tabulator.info/docs/4.2/data#array-initial) because the data will be receive is the v-model.
+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.
+The only option that isn't allowed is [_data_](http://tabulator.info/docs/4.2/data#array-initial) because the data will be received in the v-model.
 
 :::tip Watchers
-The object options use the Vue [watcher](https://vuejs.org/v2/guide/computed.html#Watchers), so if you update any configuration, the Tabulator will be recreated using the new config.
+The options object uses the Vue [watcher](https://vuejs.org/v2/guide/computed.html#Watchers), so if you update the configuration, the Tabulator will be recreated using the new config.
 :::
 :::warning Reactive options
 The watcher from options will recreate the tabulator instance when the options is updated.
 :::
 
 ## v-model
 
-You can provide a array to populate your table, the component will use the [data property](http://tabulator.info/docs/4.2/data#array-initial) to initialize the Tabulator. Any change performed in your v-mode will be reflected in the component, not using the [Tabulator reactivity](http://tabulator.info/docs/4.2/reactivity) but the Vue [watcher](https://vuejs.org/v2/guide/computed.html#Watchers).
+You can provide an array to populate your table, and the component will use the [data property](http://tabulator.info/docs/4.2/data#array-initial) to initialize the Tabulator. Any change performed in your v-model will be reflected in the component, using a Vue [watcher](https://vuejs.org/v2/guide/computed.html#Watchers) instead of [Tabulator reactivity](http://tabulator.info/docs/4.2/reactivity).
 
-The Watcher will use the method [setData](http://tabulator.info/docs/4.2/data#array) to update. If you prefer, you can change that behavior witch integration option.
+The Watcher will use the method [setData](http://tabulator.info/docs/4.2/data#array) to update your table. If you prefer, you can change the behavior with the integration option.
 
 ## Integration
-The integration options can provide a custom experience when use vue-tabulator, 
-that options will provide a better way to change the internal behavior.
+The integration option can provide a custom experience when using vue-tabulator, 
+providing a better way to control internal behavior.
 
 ### updateStrategy
 
-The update strategy is the responsible to update the data in the Tabulator instance. The default value is `DATA`.
+The update strategy is responsible for how data is updated in the Tabulator instance. The default value is `DATA`.
 
-You can change to `REPLACE`, to use the method [setReplace](http://tabulator.info/docs/4.2/update#alter-replace).
+- You can change the update strategy to `REPLACE` in order to use the method [setReplace](http://tabulator.info/docs/4.2/update#alter-replace).
+- You can change the update strategy to `UPDATE` in order to use the method [updateData](http://tabulator.info/docs/4.2/update#alter-update).
 
 ```html
 <VueTabulator 
@@ -117,27 +118,32 @@ You can change to `REPLACE`, to use the method [setReplace](http://tabulator.inf
   />
 ```
 
+::: warning Use update in editable tables
+To avoid [problems](https://github.com/angeliski/vue-tabulator/issues/13) prefer use `UPDATE` strategy on editable tables
+:::
+
+
 ## Advanced Interaction
 
-In some cases you will be need use a feature provided by the Tabulator, but not supported by the vue-tabulator. If you need some like that, you can use the tabulator instance from your component.
+In some cases you will need to use a feature provided by Tabulator, that is not supported by vue-tabulator. In that case, you can use the tabulator instance from your component.
 
-Using the [ref](https://vuejs.org/v2/api/#ref) in your component
+By using the [ref](https://vuejs.org/v2/api/#ref) in your component:
 
 ```html{2}
 <VueTabulator ref="tabulator" v-model="data" :options="options" />
 ```
 
-You have access to method `getInstance` who will return the Tabulator instance.
+You have access to the method `getInstance` which will return the Tabulator instance.
 
 ```javascript{1}
 const tabulatorInstance = this.$refs.tabulator.getInstance();
 tabulatorInstance.clearData();
 ```
 
-::: warning be careful
-When use the Tabulator instance will can broke some behaviors in the vue-tabulator. That can happening because the Tabulator is a JavaScript library and the vue-tabulator is a wrapper for that lib to more easyly use in vue.
+::: warning Be careful
+Using the Tabulator instance can break some behaviors in vue-tabulator.
 :::
 ## Caveats
 - [Tabulator reactivity](http://tabulator.info/docs/4.2/reactivity)
 
-When in development we expected some strange behaviors on active the Tabulator Reactivity module, how Vue have a [reactivity system](https://it.vuejs.org/v2/guide/reactivity.html), we believe is not necessary activate the Tabulator reactivity.
+In development we expected some strange behaviors when activating the Tabulator Reactivity module. Since Vue has a [reactivity system](https://it.vuejs.org/v2/guide/reactivity.html), we believe it is not necessary to activate Tabulator reactivity.

package.json

@@ -2,6 +2,7 @@
   "name": "vue-tabulator",
   "description": "The best way to use Tabulator in Vue projects",
   "version": "1.0.0",
+  "engines" : { "node" : ">=10" },
   "scripts": {
     "release": "release-it",
     "release:rc": "npm run release -- --preRelease=rc",
@@ -52,41 +53,43 @@
   "dependencies": {
     "@types/tabulator-tables": "^4.2.4",
     "tabulator-tables": "^4.2.2",
-    "vue-class-component": "^6.0.0",
-    "vue-property-decorator": "^7.0.0"
+    "vue-class-component": "^7.1.0",
+    "vue-property-decorator": "^8.2.1"
   },
   "peerDependencies": {
     "tabulator-tables": "^4.2.1",
     "vue": "^2.6.8"
   },
   "devDependencies": {
-    "@types/jest": "^23.1.4",
+    "@types/jest": "^24.0.15",
+    "@typescript-eslint/parser": "^1.13.0",
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-e2e-cypress": "^3.0.5",
     "@vue/cli-plugin-eslint": "^3.0.5",
     "@vue/cli-plugin-typescript": "^3.0.5",
     "@vue/cli-plugin-unit-jest": "^3.0.5",
     "@vue/cli-service": "^3.0.5",
     "@vue/eslint-config-airbnb": "^4.0.0",
-    "@vue/eslint-config-typescript": "^3.2.0",
+    "@vue/eslint-config-typescript": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.20",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "chalk": "^2.4.2",
-    "commitizen": "^3.1.1",
-    "copy-webpack-plugin": "^4.6.0",
+    "commitizen": "^4.0.3",
+    "copy-webpack-plugin": "^5.0.3",
     "coveralls": "^3.0.3",
-    "cz-conventional-changelog": "2.1.0",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "lint-staged": "^8.1.0",
+    "cz-conventional-changelog": "3.0.2",
+    "eslint": "^6.1.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-vue": "^5.2.3",
+    "lint-staged": "^9.2.0",
     "node-sass": "^4.9.0",
-    "release-it": "^10.1.0",
+    "release-it": "^12.3.3",
     "sass-loader": "^7.0.1",
-    "ts-jest": "^23.0.0",
-    "typescript": "~3.1.1",
+    "ts-jest": "^24.0.2",
+    "typescript": "~3.5.3",
     "vue-template-compiler": "^2.6.8",
-    "vuepress": "^0.14.9",
+    "vuepress": "^1.0.2",
     "yorkie": "^2.0.0"
   },
   "files": [

src/components/TabulatorComponent.vue

@@ -57,6 +57,9 @@ export default class TabulatorComponent extends Vue {
     if (this.tabulatorInstance) {
       if (this.integration && this.integration.updateStrategy === UpdateStrategy.REPLACE) {
         this.tabulatorInstance.replaceData(this.tableData);
+      } else if (this.integration && this.tableData
+      && this.integration.updateStrategy === UpdateStrategy.UPDATE) {
+        this.tabulatorInstance.updateData(this.tableData);
       } else {
         this.tabulatorInstance.setData(this.tableData);
       }

src/types/index.ts

@@ -1,6 +1,8 @@
+/* eslint-disable import/prefer-default-export */
 export enum UpdateStrategy {
     DATA = 'DATA',
-    REPLACE= 'REPLACE'
+    REPLACE = 'REPLACE',
+    UPDATE = 'UPDATE'
 }
 
 export interface IntegrationOptions {

tests/unit/TabulatorComponent-IntegrationModule.spec.ts

@@ -4,13 +4,15 @@ import { UpdateStrategy } from '@/types';
 
 const mockSetData = jest.fn();
 const mockReplaceData = jest.fn();
+const mockUpdateData = jest.fn();
+
 jest.mock('tabulator-tables', () => jest.fn().mockImplementation(() => ({
   setData: mockSetData,
   replaceData: mockReplaceData,
+  updateData: mockUpdateData,
 })));
 const Tabulator = require('tabulator-tables');
 
-
 const options : Tabulator.Options = {
   columns: [
     {
@@ -29,6 +31,7 @@ describe('TabulatorComponent.vue | Integration Module', () => {
     Tabulator.mockClear();
     mockSetData.mockClear();
     mockReplaceData.mockClear();
+    mockUpdateData.mockClear();
   });
 
   describe('Watchers', () => {
@@ -66,5 +69,25 @@ describe('TabulatorComponent.vue | Integration Module', () => {
       expect(mockSetData).not.toHaveBeenCalled();
       expect(mockReplaceData).toHaveBeenCalled();
     });
+
+    test('update de v-model should use UpdateStrategy.UPDATE', () => {
+      const wrapper = mount(TabulatorComponent, {
+        propsData: {
+          tableData: [{ id: 1, name: 'Someone to update' }],
+          options,
+          integration: {
+            updateStrategy: UpdateStrategy.UPDATE,
+          },
+        },
+      });
+
+      wrapper.setProps({
+        tableData: [{ id: 1, name: 'Someone updated' }],
+      });
+
+      expect(mockSetData).not.toHaveBeenCalled();
+      expect(mockReplaceData).not.toHaveBeenCalled();
+      expect(mockUpdateData).toHaveBeenCalled();
+    });
   });
 });