Feature/auto (#228)

* Add auto size, onDrag and onResize callbacks
* Add test command
* Make CI tests pass
* Make CI tests pass again

.github/workflows/ci.yml

@@ -17,4 +17,4 @@ jobs:
       with:
         node-version: '10.x'
     - run: npm install
-    - run: npm run feature
+    - run: npm run test

README.md

@@ -264,22 +264,22 @@ Defines it the component should be resizable or not.
 ```
 
 #### w
-Type: `Number`<br>
+Type: `Number|String`<br>
 Required: `false`<br>
 Default: `200`
 
-Define the initial width of the element.
+Define the initial width of the element. It also supports `auto`, but when you start resizing the value will fallback to a number.
 
 ```html
 <vue-draggable-resizable :w="200">
 ```
 
 #### h
-Type: `Number`<br>
+Type: `Number|String`<br>
 Required: `false`<br>
 Default: `200`
 
-Define the initial height of the element.
+Define the initial height of the element. It also supports `auto`, but when you start resizing the value will fallback to a number.
 
 ```html
 <vue-draggable-resizable :h="200">
@@ -463,6 +463,24 @@ function onDragStartCallback(ev){
 }
 ```
 
+#### onDrag
+Type: `Function`<br>
+Required: `false`<br>
+Default: `null`
+
+Called before the element is dragged. The function receives the next values of `x` and `y`. If `false` is returned by any handler, the action will cancel.
+
+```html
+<vue-draggable-resizable :onDrag="onDragCallback">
+```
+
+```js
+function onDragStartCallback(x, y){
+   ...
+   // return false; — for cancel
+}
+```
+
 
 #### onResizeStart
 Type: `Function`<br>
@@ -482,6 +500,25 @@ function onResizeStartCallback(handle, ev){
    // return false; — for cancel
 }
 ```
+
+#### onResize
+Type: `Function`<br>
+Required: `false`<br>
+Default: `null`
+
+Called before the element is resized. The function receives the handle and the next values of `x`, `y`, `width` and `height`. If `false` is returned by any handler, the action will cancel.
+
+```html
+<vue-draggable-resizable :onResize="onResizeCallback">
+```
+
+```js
+
+function onResizeStartCallback(handle, x, y, width, height){
+   ...
+   // return false; — for cancel
+}
+```
 ---
 
 ### Events

package.json

@@ -14,8 +14,11 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "build-bundle": "vue-cli-service build --target lib --name VueDraggableResizable ./src/index.js",
+    "unit": "cross-env BABEL_ENV=test mocha-webpack --webpack-config=webpack.test.js tests/unit/specs/**/*.js",
+    "unit-watch": "cross-env BABEL_ENV=test mocha-webpack --watch --webpack-config=webpack.test.js tests/unit/specs/**/*.js",
     "feature": "cross-env BABEL_ENV=test node_modules/karma/bin/karma start tests/feature/karma.conf.js --single-run",
     "feature-watch": "cross-env BABEL_ENV=test node_modules/karma/bin/karma start tests/feature/karma.conf.js",
+    "test": "npm run unit && npm run feature",
     "storybook": "start-storybook -p 9001 -c .storybook",
     "gh-pages:clean": "rm -rf docs",
     "gh-pages:build": "build-storybook -c .storybook -o docs",
@@ -46,11 +49,13 @@
     "karma-spec-reporter": "0.0.32",
     "karma-webpack": "^4.0.2",
     "mocha": "^6.2.0",
+    "mocha-webpack": "^2.0.0-beta.0",
     "sinon": "^7.4.2",
     "style-loader": "^1.0.0",
     "syn": "^0.14.1",
     "vue": "^2.5.21",
-    "vue-template-compiler": "^2.5.21"
+    "vue-template-compiler": "^2.5.21",
+    "webpack": "^4.42.1"
   },
   "files": [
     "/dist/*",