Fixes #18 Require of AutoNumeric is ES6 module and not the distribution version

Fix how using vue-autonumeric with a CDN did not work since the external library it searched was in lowercase.
Update the documentation about using `vue-autonumeric` in an ES6 module setup with Webpack

Important note:
- We need to use `<npmPath>: 'AutoNumeric'` in the `vue-autonumeric`'s webpack configuration since we want the user to be able to just use a CDN link to the AutoNumeric library and make sure `vue-autonumeric` will correctly use this name (since it's exported as `AutoNumeric`, with this case).
- However if you are using `vue-autonumeric` in an ES6 module setup with a bundling tool (ie. Webpack), then you'll need to declare in your project an alias so that Webpack will know how to recognize the correct library name case.
  - The alias configuration example for Webpack:
```js
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias     : {
        '~'          : resolve('node_modules'),
        '@'          : resolve('src'),
        'AutoNumeric': resolve('node_modules/autonumeric/dist/autoNumeric.min'),
    },
},
```

Signed-off-by: Alexandre Bonneau <[email protected]>

Author: AlexandreBonneau

CHANGELOG.md

@@ -1,5 +1,25 @@
 ## Changelog for vue-autoNumeric
 
+### 1.2.4
++ Fixes #18 Require of AutoNumeric is ES6 module and not the distribution version
++ Fix how using vue-autonumeric with a CDN did not work since the external library it searched was in lowercase.
++ Update the documentation about using `vue-autonumeric` in an ES6 module setup with Webpack
+
+Important note:
++ We need to use `<npmPath>: 'AutoNumeric'` in the `vue-autonumeric`'s webpack configuration since we want the user to be able to just use a CDN link to the AutoNumeric library and make sure `vue-autonumeric` will correctly use this name (since it's exported as `AutoNumeric`, with this case).
++ However if you are using `vue-autonumeric` in an ES6 module setup with a bundling tool (ie. Webpack), then you'll need to declare in your project an alias so that Webpack will know how to recognize the correct library name case.
+  + The alias configuration example for Webpack:
+```js
+resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias     : {
+        '~'          : resolve('node_modules'),
+        '@'          : resolve('src'),
+        'AutoNumeric': resolve('node_modules/autonumeric/dist/autoNumeric.min'),
+    },
+},
+```
+
 ### 1.2.3
 + Fixes #15 Prop Validation Returns Error if Empty String
 + Fixes #16 build fails on linux

README.md

@@ -53,7 +53,7 @@ module.exports = {
 };
 ```
 
-#### ...or by importing it directly as a module
+#### ...or by importing it directly as an ES6 module
 
 You can choose to directly import the AutoNumeric library in your source code.<br>First, install the `autonumeric` dependency so that Webpack can find it using:
 
@@ -73,16 +73,12 @@ export default {
     components: {
         VueAutonumeric,
     },
-
-    data() {
-        return {
-            //
-        };
-    },
 }
 ```
 
-However, when doing that if you want to be able to bundle all the scripts together with Webpack, you'll need to define an alias for the `AutoNumeric` library in your Webpack config like so:
+However, when doing that if you want to be able to bundle all the scripts together with Webpack, you'll **need to define an alias for the `AutoNumeric` library in your Webpack config**, otherwise Webpack will complain about the npm package `autonumeric` case.
+
+The alias that you need to declare in your Webpack configuration:
 ```js
 module.exports = {
     entry  : './src/vueAutonumericTest.js',
@@ -91,7 +87,7 @@ module.exports = {
     },
     resolve: {
         alias: {
-            AutoNumeric: 'autonumeric/dist/autoNumeric.min',
+            AutoNumeric: 'node_modules/autonumeric/dist/autoNumeric.min',
         },
     },
 };

build/webpack.base.js

@@ -71,6 +71,27 @@ module.exports = {
     externals: {
         // This prevent bundling the AutoNumeric library inside the vue-autonumeric component
         // cf. https://webpack.js.org/configuration/externals/
-        autonumeric: 'autonumeric',
+        //XXX Note: You need to use `<npmPath>: 'AutoNumeric'` if you want to be able to just use a script CDN link to the AutoNumeric library, since it's exported as `AutoNumeric` (with this case) //FIXME But what happens when the user do not use a script link but directly import 'AutoNumeric' with `import AutoNumeric from 'autonumeric'`?
+        /*
+         * Important note:
+         * We need to use `<npmPath>: 'AutoNumeric'` here since we want the user to be able to just use a
+         * CDN link to the AutoNumeric library and make sure `vue-autonumeric` will correctly use this
+         * name (since it's exported as `AutoNumeric`, with this case).
+         *
+         * However if you are using `vue-autonumeric` in an ES6 module setup with a bundling tool
+         * (ie. Webpack), then you'll need to declare in your project an alias so that Webpack will know
+         * how to recognize the correct library name case.
+         *
+         * The alias configuration example for Webpack:
+         * resolve: {
+         *     extensions: ['.js', '.vue', '.json'],
+         *     alias     : {
+         *         '~'          : resolve('node_modules'),
+         *         '@'          : resolve('src'),
+         *         'AutoNumeric': resolve('node_modules/autonumeric/dist/autoNumeric.min'),
+         *     },
+         * },
+         */
+        'autonumeric/dist/autoNumeric.min': 'AutoNumeric',
     },
 };

dist/vue-autonumeric.js

@@ -1,17 +1,17 @@
 /**
- * vue-autonumeric v1.2.3 (https://github.com/autoNumeric/vue-autoNumeric)
+ * vue-autonumeric v1.2.4 (https://github.com/autoNumeric/vue-autoNumeric)
  * © 2018 Alexandre Bonneau <[email protected]>
  * Released under the MIT License.
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("autonumeric"));
+		module.exports = factory(require("AutoNumeric"));
 	else if(typeof define === 'function' && define.amd)
-		define("VueAutonumeric", ["autonumeric"], factory);
+		define("VueAutonumeric", ["AutoNumeric"], factory);
 	else if(typeof exports === 'object')
-		exports["VueAutonumeric"] = factory(require("autonumeric"));
+		exports["VueAutonumeric"] = factory(require("AutoNumeric"));
 	else
-		root["VueAutonumeric"] = factory(root["autonumeric"]);
+		root["VueAutonumeric"] = factory(root["AutoNumeric"]);
 })(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_43__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
@@ -306,9 +306,9 @@ var _assign = __webpack_require__(16);
 
 var _assign2 = _interopRequireDefault(_assign);
 
-var _autonumeric = __webpack_require__(43);
+var _autoNumeric = __webpack_require__(43);
 
-var _autonumeric2 = _interopRequireDefault(_autonumeric);
+var _autoNumeric2 = _interopRequireDefault(_autoNumeric);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -397,7 +397,7 @@ exports.default = {
             options = this.manageOptionElement(this.options);
         }
 
-        this.anElement = new _autonumeric2.default(this.$refs.autoNumericElement, options);
+        this.anElement = new _autoNumeric2.default(this.$refs.autoNumericElement, options);
         if (this.value !== null && this.value !== '') {
             this.anElement.set(this.value);
 
@@ -424,7 +424,7 @@ exports.default = {
         manageOptionElement: function manageOptionElement(optionElement) {
             var options = void 0;
             if (typeof optionElement === 'string' || optionElement instanceof String) {
-                options = _autonumeric2.default.getPredefinedOptions()[optionElement];
+                options = _autoNumeric2.default.getPredefinedOptions()[optionElement];
                 if (options === void 0 || options === null) {
                     console.warn('The given pre-defined options [' + optionElement + '] is not recognized by AutoNumeric.\nSwitching back to the default options.');
                     options = defaultOptions;
@@ -446,9 +446,9 @@ exports.default = {
 
                 var optionsToUse = void 0;
                 if (Array.isArray(newValue.options)) {
-                    optionsToUse = _autonumeric2.default.mergeOptions(newValue.options);
+                    optionsToUse = _autoNumeric2.default.mergeOptions(newValue.options);
                 } else {
-                    optionsToUse = _autonumeric2.default._getOptionObject(newValue.options);
+                    optionsToUse = _autoNumeric2.default._getOptionObject(newValue.options);
                 }
 
                 this.anElement.update(optionsToUse);

dist/vue-autonumeric.min.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-autonumeric",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "An AutoNumeric wrapper for Vue.js",
   "author": "Alexandre Bonneau <[email protected]>",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "components"
   ],
   "dependencies": {
-    "autonumeric": "^4.2.12"
+    "autonumeric": "^4.2.13"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.7",

package.json

@@ -1,8 +1,8 @@
 <!--
               vue-autonumeric
 
-@version      1.2.3
-@date         2018-05-09 UTC 21:30
+@version      1.2.4
+@date         2018-05-25 UTC 19:30
 
 @author       Alexandre Bonneau
 @copyright    2018 © Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>
@@ -38,7 +38,7 @@ OTHER DEALINGS IN THE SOFTWARE.
 -->
 
 <script type="text/babel">
-    import AutoNumeric from 'autonumeric';
+    import AutoNumeric from 'autonumeric/dist/autoNumeric.min';
 
     // Custom default autoNumeric option can be set here to override the default autoNumeric ones
     const defaultOptions = {};

src/components/VueAutonumeric.vue

@@ -331,9 +331,9 @@ atob@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d"
 
-autonumeric@^4.2.12:
-  version "4.2.12"
-  resolved "https://registry.yarnpkg.com/autonumeric/-/autonumeric-4.2.12.tgz#0d5cefc9ec36f0e625231462c64bed245b149f79"
+autonumeric@^4.2.13:
+  version "4.2.13"
+  resolved "https://registry.yarnpkg.com/autonumeric/-/autonumeric-4.2.13.tgz#29a1374fd16f91a60ba3d97fc74374a3d0057957"
 
 autoprefixer@^6.3.1, autoprefixer@^6.7.7:
   version "6.7.7"