Fix issue #2 Allow the component to generate any supported Html element instead of only <input>

Signed-off-by: Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>

Author: AlexandreBonneau

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## Changelog for vue-autoNumeric
 
+### 1.0.5
++ Fix issue #2 Allow the component to generate any supported Html element instead of only `<input>`
+
 ### 1.0.4
 + Fix the component size issue which bundled the whole `AutoNumeric` library
 + Update the documentation with how to install the component, depending if the AutoNumeric library should be bundled or not

README.md

@@ -133,6 +133,8 @@ With multiple option objects/predefined options:
 
 #### Other props
 
+##### Placeholder
+
 You can define the input placeholder using:
 ```html
 <vue-autonumeric
@@ -142,7 +144,19 @@ You can define the input placeholder using:
 ></vue-autonumeric>
 ```
 
-*In the future, you'll be able to define the type of element tag (`<p>`, `<div>`, etc.) you want that component to generate.<br>This will allow you to create any supported tag with the `contenteditable` attribute set to `true`, instead of `<input>` one as it is for now.*
+##### Tag
+
+You can also specify the type of html tag (within the [AutoNumeric supported list](https://github.com/autoNumeric/autoNumeric/tree/next#on-other-dom-elements)) this component should generate using the `tag` prop.
+By default, an `<input>` element is generated, but if you want a `<div>` element, you can use:
+```html
+<vue-autonumeric
+    v-model="myValue"
+    options="euro"
+    tag="div"
+></vue-autonumeric>
+```
+
+*Note: this will automatically set the `contenteditable` attribute to `true` for that generated element.*
 
 #### Integration with other scripts & events support
 

dist/vue-autonumeric.js

@@ -1,6 +1,6 @@
 /**
- * vue-autonumeric v1.0.4 (https://github.com/autoNumeric/vue-autoNumeric)
- * © 2017 Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>
+ * vue-autonumeric v1.0.5 (https://github.com/autoNumeric/vue-autoNumeric)
+ * © 2018 Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>
  * Released under the MIT License.
  */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -198,7 +198,7 @@ var Component = __webpack_require__(11)(
   /* script */
   __webpack_require__(12),
   /* template */
-  __webpack_require__(44),
+  null,
   /* scopeId */
   null,
   /* cssModules */
@@ -295,6 +295,39 @@ var defaultOptions = {};
 exports.default = {
     name: 'VueAutonumeric',
 
+    render: function render(createElement) {
+        var isInput = this.tag === 'input';
+
+        var attributes = void 0;
+        if (isInput) {
+            attributes = {
+                type: 'text',
+                placeholder: this.placeholder
+            };
+        } else {
+            attributes = {
+                contenteditable: true
+            };
+        }
+
+        return createElement(this.tag, {
+            attrs: attributes,
+            ref: 'autoNumericElement',
+            on: {
+                keydown: this.setUserInteraction,
+                paste: this.setUserInteraction,
+                wheel: this.setUserInteraction,
+                drop: this.setUserInteraction,
+
+                keyup: this.resetUserInteraction,
+                blur: this.resetUserInteraction,
+
+                'autoNumeric:rawValueModified': this.updateVModel
+            }
+        });
+    },
+
+
     props: {
         value: {
             type: Number,
@@ -312,6 +345,12 @@ exports.default = {
         placeholder: {
             type: String,
             required: false
+        },
+
+        tag: {
+            type: String,
+            required: false,
+            default: 'input'
         }
     },
 
@@ -338,7 +377,7 @@ exports.default = {
             options = this.manageOptionElement(this.options);
         }
 
-        this.anElement = new _AutoNumeric2.default(this.$refs.autoNumericInput, options);
+        this.anElement = new _AutoNumeric2.default(this.$refs.autoNumericElement, options);
         if (this.value !== null && this.value !== '') {
             this.anElement.set(this.value);
 
@@ -396,7 +435,6 @@ exports.default = {
             }
         }
     }
-
 };
 
 /***/ }),
@@ -840,29 +878,6 @@ module.exports = function(it){
 
 module.exports = __WEBPACK_EXTERNAL_MODULE_43__;
 
-/***/ }),
-/* 44 */
-/***/ (function(module, exports) {
-
-module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
-  return _c('input', {
-    ref: "autoNumericInput",
-    attrs: {
-      "type": "text",
-      "placeholder": _vm.placeholder
-    },
-    on: {
-      "keydown": _vm.setUserInteraction,
-      "paste": _vm.setUserInteraction,
-      "wheel": _vm.setUserInteraction,
-      "drop": _vm.setUserInteraction,
-      "keyup": _vm.resetUserInteraction,
-      "blur": _vm.resetUserInteraction,
-      "autoNumeric:rawValueModified": _vm.updateVModel
-    }
-  })
-},staticRenderFns: []}
-
 /***/ })
 /******/ ])["default"];
 });

dist/vue-autonumeric.min.js

@@ -96,6 +96,24 @@
 								v-model="autoNumericModel"
 						/>
 					</div>
+
+					<div :class="boxClasses" :style="boxStyle">
+						<div :class="labelClasses">Non-input element with the `contenteditable` attribute</div>
+						<vue-autonumeric
+								options="euro"
+								v-model="autoNumericModel"
+								tag="p"
+						/>
+					</div>
+
+					<div :class="boxClasses" :style="boxStyle">
+						<div :class="labelClasses">The `placeholder` attribute is passed as a prop too</div>
+						<vue-autonumeric
+								:options="'euro'"
+								placeholder="This is the placeholder"
+								v-model="autoNumericModel"
+						/>
+					</div>
 				</div>
 			</div>
 		</div>

examples-src/App.vue

@@ -1,6 +1,6 @@
 {
   "name": "vue-autonumeric",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "An AutoNumeric wrapper for Vue.js",
   "author": "Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>",
   "license": "MIT",
@@ -10,7 +10,7 @@
     "build:release": "cross-env NODE_ENV=production webpack --config build/webpack.dist.js",
     "build:examples": "webpack --config build/webpack.examples.js",
     "build": "npm run build:debug && npm run build:release && npm run build:examples",
-    "clean": "rimraf ./examples/examples.bundle.css ./examples/examples.bundle.js",
+    "clean": "rimraf ./examples/js/examples.bundle.js",
     "lint": "eslint --ext .js,.vue src examples-src build",
     "lintfix": "eslint --fix --ext .js,.vue src examples-src build"
   },

index.html

@@ -1,11 +1,11 @@
 <!--
               vue-autonumeric
 
-@version      1.0.4
-@date         2017-11-29 UTC 20:00
+@version      1.0.5
+@date         2018-02-01 UTC 22:00
 
 @author       Alexandre Bonneau
-@copyright    2016 © Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>
+@copyright    2018 © Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>
 
 @summary      A Vue.js component that wraps the awesome autoNumeric
               input formatter library
@@ -37,22 +37,6 @@ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 OTHER DEALINGS IN THE SOFTWARE.
 -->
 
-<template>
-	<input
-			type="text"
-			ref="autoNumericInput"
-			@keydown="setUserInteraction"
-			@paste="setUserInteraction"
-			@wheel="setUserInteraction"
-			@drop="setUserInteraction"
-
-			@keyup="resetUserInteraction"
-			@blur="resetUserInteraction"
-			:placeholder="placeholder"
-			v-on:autoNumeric:rawValueModified="updateVModel"
-	>
-</template>
-
 <script type="text/babel">
     import AutoNumeric from 'AutoNumeric';
 
@@ -83,6 +67,45 @@ OTHER DEALINGS IN THE SOFTWARE.
         //TODO If an html value attribute is set in the source, then the 'linked' component sharing the same v-model are not updated with the value nor formatted on load (it takes precedence over the changes made by other inputs, and always keep `value` to the initial value)
         name: 'VueAutonumeric',
 
+        /**
+         * Allow the vue-autonumeric component to generate other (allowed) html tags, and not only the `<input>` one like currently.
+         * This sets its 'contenteditable' attribute to `true` to make it interactive.
+         *
+         * @param {function} createElement
+         * @returns {*}
+         */
+        render(createElement) {
+            const isInput = this.tag === 'input';
+
+            let attributes;
+            if (isInput) {
+                attributes = {
+                    type           : 'text',
+                    placeholder    : this.placeholder,
+                };
+            } else {
+                attributes = {
+                    contenteditable: true,
+                };
+            }
+
+            return createElement(this.tag, {
+                attrs: attributes,
+                ref  : 'autoNumericElement',
+                on   : {
+                    keydown: this.setUserInteraction,
+                    paste  : this.setUserInteraction,
+                    wheel  : this.setUserInteraction,
+                    drop   : this.setUserInteraction,
+
+                    keyup: this.resetUserInteraction,
+                    blur : this.resetUserInteraction,
+
+                    'autoNumeric:rawValueModified': this.updateVModel,
+                },
+            });
+        },
+
         props: {
             value: {
                 type    : Number,
@@ -101,6 +124,12 @@ OTHER DEALINGS IN THE SOFTWARE.
                 type    : String,
                 required: false,
             },
+
+            tag: {
+                type    : String,
+                required: false,
+                default : 'input',
+            },
         },
 
         data() {
@@ -136,8 +165,8 @@ OTHER DEALINGS IN THE SOFTWARE.
                 options = this.manageOptionElement(this.options);
             }
 
-            // Initialize the autoNumeric input
-            this.anElement = new AutoNumeric(this.$refs.autoNumericInput, options);
+            // Initialize the autoNumeric element
+            this.anElement = new AutoNumeric(this.$refs.autoNumericElement, options);
             if (this.value !== null && this.value !== '') {
                 this.anElement.set(this.value);
                 // The `v-model` must be updated with that default value on startup
@@ -240,7 +269,5 @@ OTHER DEALINGS IN THE SOFTWARE.
                 //XXX This can be tested by using `$vm0.$props.options = { currencySymbol : '#' };` in the console
             },
         },
-
-        //TODO Allow the AutoNumeric component to generate other (allowed) html tags, and not only <input> like currently, with the 'contenteditable' attribute set to `true` -> Use a `render` function
     };
 </script>