[PR-306] Add onValueChanged props for cleave value changed callback (n…

…osir#328)

bower.json

@@ -8,7 +8,7 @@
     "form",
     "input"
   ],
-  "version": "1.2.1",
+  "version": "1.3.0",
   "author": {
     "name": "Max Huang",
     "email": "[email protected]",

dist/cleave-react-node.js

@@ -2424,6 +2424,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        target.backspace = false;
 	        target.result = '';
 
+	        target.onValueChanged = opts.onValueChanged || function () {};
+
 	        return target;
 	    }
 	};

dist/cleave-react.js

@@ -2618,6 +2618,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        target.backspace = false;
 	        target.result = '';
 
+	        target.onValueChanged = opts.onValueChanged || function () {};
+
 	        return target;
 	    }
 	};

dist/cleave.js

@@ -393,6 +393,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        owner.element.value = pps.result;
 	        owner.setCurrentSelection(endPos, oldValue);
+
+	        pps.onValueChanged.call(owner, {
+	            target: {
+	                value: pps.result,
+	                rawValue: owner.getRawValue()
+	            }
+	        });
 	    },
 
 	    setPhoneRegionCode: function (phoneRegionCode) {
@@ -1175,6 +1182,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        target.backspace = false;
 	        target.result = '';
 
+	        target.onValueChanged = opts.onValueChanged || (function () {});
+
 	        return target;
 	    }
 	};

doc/angularjs-directive-usage.md

@@ -30,10 +30,8 @@ angular.module('app', ['cleave.js'])
     };
 
     $scope.options = {
-        creditCard: {
-            creditCard: true,
-            onCreditCardTypeChanged: $scope.onCreditCardTypeChanged
-        }
+        creditCard: true,
+        onCreditCardTypeChanged: $scope.onCreditCardTypeChanged
     };
 });
 ```
@@ -43,7 +41,7 @@ Then easily you can apply `cleave` directive to `input` field:
 ```html
 <div ng-controller="AppController">
     <input ng-model="model.rawValue" ng-whatever="..." type="text" placeholder="Enter credit card number"
-        cleave="options.creditCard"/>
+        cleave="options"/>
 </div>
 ```
 
@@ -55,30 +53,32 @@ By using `Cleave.js`, angular renders the input field with the formatted value,
 
 If you are looking to obtain the formatted value, here is the way:
 
+To get input changed value object from [on value changed](https://github.com/nosir/cleave.js/blob/master/doc/options.md#onvaluechanged) callback:
+
 First in you model:
 
 ```js
 angular.module('app', ['cleave.js'])
 
 .controller('AppController', function($scope) {
-    $scope.onCleaveValueChange = function(formattedValue) {
-        $scope.model.formattedValue = formattedValue;
-    };
-
     $scope.onCreditCardTypeChanged = function(type) {
         $scope.model.creditCardType = type;
     };
 
+    $scope.onValueChanged = function(e) {
+        $scope.model.formattedValue = e.target.value;
+    };
+
     $scope.model = {
+        creditCardType: '',
         rawValue: '',
         formattedValue: ''
     };
 
     $scope.options = {
-        creditCard: {
-            creditCard: true,
-            onCreditCardTypeChanged: $scope.onCreditCardTypeChanged
-        }
+        creditCard: true,
+        onCreditCardTypeChanged: $scope.onCreditCardTypeChanged
+        onValueChanged: $scope.onValueChanged
     };
 });
 ```
@@ -87,20 +87,16 @@ Then in your html:
 
 ```html
 <div ng-controller="AppController">
-    <input ng-model="model.rawValue" ng-whatever="..." type="text" placeholder="Enter credit card number"
-        cleave="options.creditCard" on-value-change="onCleaveValueChange"/>
+    <input ng-model="model.rawValue" ng-whatever="..."
+        type="text" placeholder="Enter credit card number"
+        cleave="options" />
 
     <p>raw (ng-model) value: {{model.rawValue}}</p>
     <p>formatted value: {{model.formattedValue}}</p>
-
     <p>type: {{model.creditCardType}}</p>
 </div>
 ```
 
-As you can see, by passing the function (without `()`) to `on-value-change`, you register a callback from `cleave.js` directive.
-
-Then in the callback, it returns `formattedValue` as the only parameter.
-
 ### How to call public methods
 
 In order to call [public methods](https://github.com/nosir/cleave.js/blob/master/doc/public-methods.md), you will need to get the ref of the instance.

doc/options.md

@@ -31,6 +31,7 @@
     - [numericOnly](#numericonly)
     - [uppercase](#uppercase)
     - [lowercase](#lowercase)
+    - [onValueChanged](#onvaluechange)
 
 ## Credit card numbers
 
@@ -450,3 +451,18 @@ A `Boolean` value indicates if it converts value to lowercase letters.
 `lowercase` doesn't work on it's own, you have to either specify the shortcuts mode or `blocks` option to enable the formatter.
 
 **Default value**: `false`
+
+### `onValueChanged`
+
+A callback `Function`. Triggered after value changes.
+
+It returns an object, which has a target key, value is the formatted and raw input value.
+
+```js
+new Cleave('.my-input', {
+    creditCard: true,
+    onValueChanged: function (e) {
+        // e.target = { value: '5000-1234', rawValue: '51001234' }
+    }
+});
+```

package.json

@@ -10,7 +10,7 @@
     "form",
     "input"
   ],
-  "version": "1.2.1",
+  "version": "1.3.0",
    "files": [
     "src",
     "dist"

src/Cleave.js

@@ -337,6 +337,13 @@ Cleave.prototype = {
 
         owner.element.value = pps.result;
         owner.setCurrentSelection(endPos, oldValue);
+
+        pps.onValueChanged.call(owner, {
+            target: {
+                value: pps.result,
+                rawValue: owner.getRawValue()
+            }
+        });
     },
 
     setPhoneRegionCode: function (phoneRegionCode) {

src/common/DefaultProperties.js

@@ -71,6 +71,8 @@ var DefaultProperties = {
         target.backspace = false;
         target.result = '';
 
+        target.onValueChanged = opts.onValueChanged || (function () {});
+
         return target;
     }
 };