Merge pull request #10 from nosir/Issue-9

[Issue-9] Add uppercase and lowercase options

README.md

@@ -16,7 +16,7 @@ Cleave.js has a simple purpose: to help you format input text content automatica
 - CommonJS / AMD mode
 - ReactJS component port
 
-**TL;DR** [the demo page](https://nosir.github.io/cleave.js)
+**TL;DR** [the demo page](https://nosir.github.io/cleave.js/)
 
 ## Why?
 
@@ -67,7 +67,7 @@ var cleave = new Cleave('.input-phone', {
 });
 ```
 
-More examples: [the demo page](https://nosir.github.io/cleave.js)
+More examples: [the demo page](https://nosir.github.io/cleave.js/)
 
 #### CommonJS
 ```js
@@ -124,6 +124,12 @@ As you can see, here you simply use `<Cleave/>` as a normal `<input/>` field
 
 See more in documentation: [ReactJS component usage](https://github.com/nosir/cleave.js/blob/master/doc/reactjs-component-usage.md) section
 
+## Playground
+
+- [Plain JSFiddle](https://jsfiddle.net/nosir/kbaxx64s/)
+- [React JSFiddle](https://jsfiddle.net/nosir/gLLsrxxf/)
+- [Demo page](https://nosir.github.io/cleave.js/)
+
 ## Documentation
 
 - [JavaScript API](https://github.com/nosir/cleave.js/blob/master/doc/js-api.md)
@@ -153,8 +159,8 @@ gulp mocha && gulp eslint
 
 ## Todo
 - [x] ReactJS component port
-- [ ] AngularJS component port
 - [x] Mocha unit tests for formatter classes
+- [ ] AngularJS component port
 - [ ] PhantomJS / Jest browser tests
 
 ## Get in touch

dist/cleave.js

@@ -167,6 +167,10 @@ Cleave.prototype = {
         // strip over length characters
         value = Util.headStr(value, pps.maxLength);
 
+        // convert case
+        value = pps.uppercase ? value.toUpperCase() : value;
+        value = pps.lowercase ? value.toLowerCase() : value;
+
         // apply blocks
         pps.result = Util.getFormattedValue(value, pps.blocks, pps.blocksLength, pps.delimiter);
 
@@ -339,6 +343,9 @@ var DefaultProperties = {
 
         target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
 
+        target.uppercase = !!opts.uppercase;
+        target.lowercase = !!opts.lowercase;
+
         target.prefix = (target.creditCard || target.phone || target.date) ? '' : (opts.prefix || '');
 
         target.delimiter = opts.delimiter || (target.date ? '/' : (target.numeral ? ',' : ' '));

doc/options.md

@@ -20,6 +20,8 @@
     - [blocks](#blocks)
     - [prefix](#prefix)
     - [numericOnly](#numericonly)
+    - [uppercase](#uppercase)
+    - [lowercase](#lowercase)
 
 ## Credit card numbers
 
@@ -240,8 +242,20 @@ new Cleave('.my-input', {
 
 ### `numericOnly`
 
-A `Boolean` value indicates if it only allows numeric input.
+A `Boolean` value indicates if it only allows numeric letters (0-9).
 
 Ignored by `creditCard` and `date` shortcuts mode, the value will always be `true`.
 
 **Default value**: `false`
+
+### `uppercase`
+
+A `Boolean` value indicates if it converts value to uppercase letters.
+
+**Default value**: `false`
+
+### `lowercase`
+
+A `Boolean` value indicates if it converts value to lowercase letters.
+
+**Default value**: `false`

doc/phone-lib-addon.md

@@ -6,7 +6,7 @@
 
 Phone lib uses google [libphonenumber](https://github.com/googlei18n/libphonenumber/) `AsYouTypeFormatter` feature to format phone numbers. 
 
-Since the original i18n lib includes patterns for all the countries, the file size is relatively large (Minified: 254K, gzipped 50K). In order to reduce the size, Cleave.js helped you separate the module based on countries, so that you can include any of them as an addon (Minified: 14K, gzipped 5KB each).
+Since the original i18n lib includes patterns for all the countries, the file size is relatively large (minified: 254K, gzipped 50K). In order to reduce the size, Cleave.js helped you separate the module based on countries, so that you can include any of them as an addon (minified: 14K, gzipped 5KB each).
 
 ## How to include phone lib addon
 
@@ -57,6 +57,6 @@ Sometimes you might want to use phone lib addon for multiple counties. Please be
 
 Don't include addons one by one, instead, you should build your owner country combination lib like `(US & CA).js`
 
-To build it by yourself, please see [here](https://github.com/nosir/libphonenumber-country-metadata#build-phone-type-formatterjs-for-cleavejs)
+To build it by yourself, please see [here](https://github.com/nosir/libphonenumber-country-metadata#build-phone-type-formatterjs-for-cleavejs).
 
 Alternatively, just create an issue [here](https://github.com/nosir/cleave.js/issues), specify which ones you would like to build in.

package.json

@@ -10,7 +10,7 @@
     "form",
     "input"
   ],
-  "version": "0.3.0",
+  "version": "0.3.1",
   "author": {
     "name": "Max Huang",
     "url": "http://github.com/nosir",

src/Cleave.js

@@ -165,6 +165,10 @@ Cleave.prototype = {
         // strip over length characters
         value = Util.headStr(value, pps.maxLength);
 
+        // convert case
+        value = pps.uppercase ? value.toUpperCase() : value;
+        value = pps.lowercase ? value.toLowerCase() : value;
+
         // apply blocks
         pps.result = Util.getFormattedValue(value, pps.blocks, pps.blocksLength, pps.delimiter);
 

src/Cleave.react.js

@@ -194,6 +194,10 @@ var Cleave = React.createClass({
         // strip over length characters
         value = Util.headStr(value, pps.maxLength);
 
+        // convert case
+        value = pps.uppercase ? value.toUpperCase() : value;
+        value = pps.lowercase ? value.toLowerCase() : value;
+
         // apply blocks
         pps.result = Util.getFormattedValue(value, pps.blocks, pps.blocksLength, pps.delimiter);
 

src/common/DefaultProperties.js

@@ -37,6 +37,9 @@ var DefaultProperties = {
 
         target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
 
+        target.uppercase = !!opts.uppercase;
+        target.lowercase = !!opts.lowercase;
+
         target.prefix = (target.creditCard || target.phone || target.date) ? '' : (opts.prefix || '');
 
         target.delimiter = opts.delimiter || (target.date ? '/' : (target.numeral ? ',' : ' '));