vue-handsontable-official - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

package.json

 {
   "name": "vue-handsontable-official",
   "description": "A Vue.js Handsontable wrapper component.",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Handsoncode",
@@ -12,4 +12,23 @@ "main": "src/HotTable.vue",
     "pikaday": "^1.5.1",
-    "handsontable": "^0.31.0"
+    "handsontable": "^0.31.1"
+  },
+  "devDependencies": {
+    "cpr": "^2.0.2",
+    "cssstyle": "git://github.com/jansiegel/CSSStyleDeclaration.git",
+    "generate-release": "^0.11.0",
+    "jest": "^19.0.2",
+    "markdown-styles": "^3.1.9",
+    "rimraf": "^2.5.4"
+  },
+  "scripts": {
+    "test": "npm run _pre-testing && jest",
+    "_pre-testing": "node ./node_modules/cssstyle/scripts/generate_properties.js",
+    "make-docs": "npm run _clone-readme && npm run _add-md-tags && npm run _generate-docs && npm run _clean-readme-clone",
+    "_clone-readme": "cp README.md index.md",
+    "_add-md-tags": "echo $'title: Handsontable component for Vue.js\\n---\\n' | cat - index.md > /tmp/out && mv /tmp/out index.md",
+    "_clone_demo": "cpr ./demo ./docs/demo -f /node_modules/",
+    "_generate-docs": "rimraf ./docs && ./node_modules/markdown-styles/bin/generate-md --layout github --input index.md --output ./docs && npm run _clone_demo",
+    "_clean-readme-clone": "rm index.md",
+    "release": "generate-release"
   }
 }

README.md

@@ -1,1 +0,89 @@
-### vue-handsontable
+# vue-handsontable-official  [![Build Status](https://travis-ci.org/handsontable/vue-handsontable-official.png?branch=master)](https://travis-ci.org/handsontable/vue-handsontable-official)
+A Vue.js wrapper for the the [Handsontable](https://github.com/handsontable/handsontable) spreadsheet component.
+
+## Table of contents
+1. [Installation](#installation)
+2. [Basic usage](#basic-usage)
+3. [Examples](#examples)
+4. [License](#license)
+5. [Contact](#contact)
+6. [Other wrappers](#other-wrappers)
+
+## Installation
+
+For detailed installation instructions, please take a look at our wiki under ["Installation guide"](https://github.com/handsontable/vue-handsontable-official/wiki/Installation-guide).
+
+## Basic usage
+`vue-handsontable-official` creates a `<HotTable>` component. You can use it just like any other Vue component. For example:
+
+```
+<template>
+  <div id="hot-preview">
+    <HotTable :root="root" :settings="hotSettings"></HotTable>
+  </div>
+</template>
+
+<script>
+  import moment from 'moment';
+  import numbro from 'numbro';
+  import pikaday from 'pikaday';
+  import Zeroclipboard from 'zeroclipboard';
+  import Handsontable from 'handsontable';
+  import HotTable from 'vue-handsontable-official';
+  import Vue from 'vue';
+
+  export default {
+    data: function() {
+      return {
+        root: 'test-hot',
+        hotSettings: {
+          data: Handsontable.helper.createSpreadsheetData(40, 40),
+          colHeaders: true
+        }
+      };
+    },
+    components: {
+      HotTable
+    }
+  }
+</script>
+
+<style>
+  #test-hot {
+    width: 600px;
+    height: 400px;
+    overflow: hidden;
+  }
+</style>
+```
+
+Note, that you can pass options to Handsontable either as:
+* individual component properties
+```jsx
+<HotTable root="hot-example" :data="hotData" :rowHeaders="true"/>
+```
+* an object passed to a single `settings` property
+```jsx
+<HotTable root="hot-example" :settings="settingsObject" />
+```
+
+The `root` property declares the `id` of the root element for the table. It is optional - if it isn't provided, the table will get a randomly generated `id`.
+
+## Examples
+Please see the [/demo](https://github.com/handsontable/vue-handsontable/tree/master/demo) directory for a sample app using `vue-handsontable-official`. 
+
+You can check out a live version of this example at [handsontable.github.io/vue-handsontable/demo](https://handsontable.github.io/vue-handsontable/demo).
+
+## License
+`vue-handsontable-official` is released under the [MIT license](https://github.com/handsontable/vue-handsontable-official/blob/master/LICENSE).
+Copyrights belong to Handsoncode sp. z o.o.
+
+## Contact
+Feel free to give us feedback on this wrapper using this [contact form](https://handsontable.com/contact.html) or write directly at [e-mail].
+
+## Other Wrappers
+Handsontable comes with more wrappers and directives for popular frameworks:
+
+- [hot-table](https://github.com/handsontable/hot-table) (Polymer - WebComponents)
+- [ngHandsontable](https://github.com/handsontable/ngHandsontable) (Angular 1)
+- [react-handsontable](https://github.com/handsontable/react-handsontable) (React)

src/helpers.js

@@ -7,19 +7,27 @@ import Handsontable from 'handsontable';
  *
- * @param {Object} observerSettingsObject Watcher object containing the changed data.
- * @param {Boolean} needArray Flag defining wheter to return the result as an object or an array.
+ * @param {*} observerSettings Watcher object containing the changed data.
  * @returns {Object|Array}
  */
-function rewriteSettings(observerSettingsObject, needArray) {
-  let settings;
+export function rewriteSettings(observerSettings) {
+  let settings = null;
+  let type = {};
 
-  if (needArray) {
+  if (Object.prototype.toString.call(observerSettings).indexOf('Array') > -1) {
     settings = [];
-  } else {
+    type.array = true;
+
+  } else if (typeof observerSettings === 'object') {
     settings = {};
+    type.object = true;
   }
 
-  for (const p in observerSettingsObject) {
-    if (observerSettingsObject.hasOwnProperty(p)) {
-      settings[p] = observerSettingsObject[p];
+  if (type.array || type.object) {
+    for (const p in observerSettings) {
+      if (observerSettings.hasOwnProperty(p)) {
+        settings[p] = observerSettings[p];
+      }
     }
+
+  } else {
+    settings = observerSettings;
   }
@@ -37,18 +45,11 @@
   const settingsMapper = new SettingsMapper();
-  let settings = {};
+  const unmappedSettings = [
+    vueInstance.settings ? vueInstance.settings : vueInstance._props,
+  ];
 
   if (vueInstance.settings) {
-    settings = vueInstance.settings;
-
-  } else {
-    for (let prop in vueInstance._props) {
-      if (vueInstance._props.hasOwnProperty(prop)) {
-        if (vueInstance[prop]) {
-          settings[prop] = vueInstance[prop];
-        }
-      }
-    }
+    unmappedSettings.push(vueInstance._props)
   }
 
-  vueInstance.table = new Handsontable(vueInstance.$el, settingsMapper.prepare(settings));
+  vueInstance.table = new Handsontable(vueInstance.$el, settingsMapper.prepare(...unmappedSettings));
 }
@@ -66,3 +67,3 @@
 /**
- * Generate an object containing all the available Handsontable properties and plugin hooks.
+ * Generate an object containing all the available Handsontable properties and plugin hooks (with the `on`-prefixes added).
 
@@ -111,6 +112,12 @@ * @returns {Object}
       if (prop === 'settings') {
-        props[prop] = function(...args) { return bulkUpdateFunction.call(this, prop, ...args); };
+        props[prop] = {
+          handler: function(...args) { return bulkUpdateFunction.call(this, prop, ...args); },
+          deep: true
+        };
 
       } else {
-        props[prop] = function(...args) { return updateFunction.call(this, prop, ...args); };
+        props[prop] = {
+          handler: function(...args) { return updateFunction.call(this, prop, ...args); },
+          deep: true
+        };
       }
@@ -134,4 +141,4 @@ }
   const newSettings = {};
-  newSettings[updatedProperty] = rewriteSettings(updatedValue, true);
 
+  newSettings[updatedProperty] = rewriteSettings(updatedValue);
   this.table.updateSettings(newSettings);
@@ -138,0 +145,0 @@ }

src/settingsMapper.js

@@ -22,9 +22,10 @@ import Handsontable from 'handsontable';
    * @param {Object} settings An object containing the properties, including the `on`-prefixed hook names.
+   * @param {Object} additionalSettings An additional object containing the properties, including the `on`-prefixed hook names.
    * @returns {Object} An object containing the properties, with the `on`-prefixes trimmed.
    */
-  prepare(settings) {
+  prepare(settings, additionalSettings) {
     const newSettings = {};
 
     for (const key in settings) {
-      if (settings.hasOwnProperty(key)) {
+      if (settings.hasOwnProperty(key) && settings[key] !== void 0) {
         newSettings[this.prepareProp(key)] = settings[key];
@@ -34,2 +35,8 @@ }
 
+    for (const key in additionalSettings) {
+      if (additionalSettings.hasOwnProperty(key) && additionalSettings[key] !== void 0) {
+        newSettings[this.prepareProp(key)] = additionalSettings[key];
+      }
+    }
+
     return newSettings;
@@ -45,6 +52,4 @@ }
   addHookPrefix(prop) {
-    if (prop.indexOf('after') === 0 || prop.indexOf('before') === 0) {
-      let hookName = 'on' + prop.charAt(0).toUpperCase() + prop.slice(1, prop.length);
-
-      return hookName;
+    if (this.registeredHooks.indexOf(prop) > -1) {
+      return 'on' + prop.charAt(0).toUpperCase() + prop.slice(1, prop.length);
     }
@@ -64,3 +69,3 @@
       let hookName = prop.charAt(2).toLowerCase() + prop.slice(3, prop.length);
-      if (this.registeredHooks.indexOf(hookName)) {
+      if (this.registeredHooks.indexOf(hookName) > -1) {
         return hookName;
@@ -67,0 +72,0 @@ }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25063

245.13%

Number of package files

12

71.43%

Lines of code

440

148.59%

Number of lines in readme file

89

8800%

Worsened metrics

Dev dependency count

6

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• Updated

  handsontable@^0.31.1