Rename the component source from Autonumeric to VueAutonumeric to prevent confusion with the AutoNumeric library

Update the examples source accordingly

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

Author: AlexandreBonneau

CHANGELOG.md

@@ -0,0 +1,11 @@
+## Changelog for vue-autoNumeric
+
+### 1.0.1
++ Rename the component source from `Autonumeric` to `VueAutonumeric` to prevent confusion with the `AutoNumeric` library
++ Update the examples source accordingly
++ Update the readme with badges
++ Update the readme with more detailed installation instructions
++ Fix the examples in the readme and update the Codepen link
+
+### 1.0.0
++ Release the version `v1.0.0` of the vue-autoNumeric component

README.md

@@ -144,8 +144,7 @@ Huge Thanks :)
 
 > PS:<br>
 I would love to know how you're using vue-autonumeric.<br>
-<br>
-Contact me!
+Contact me! :)
 
 
 [downloads-image]: http://img.shields.io/npm/dm/vue-autonumeric.svg

examples-src/App.vue

@@ -18,48 +18,48 @@
 				<div class="pt5 nb5" id="basic-vue-autonumeric">
 					<a href="#basic-vue-autonumeric" :class="headerClasses">
 						<h2 class="ma0 pb2 f2 fw4 lh-1">Autonumeric component usage examples</h2>
-						<p class="ma0 lh-copy f6">Vue-Autonumeric as the flexibility and power of its <a href="https://github.com/autoNumeric/autoNumeric">AutoNumeric parent library</a>. It can be configured as you like.</p>
+						<p class="ma0 lh-copy f6">Vue-Autonumeric as the flexibility and power of its <a href="https://github.com/autoNumeric/autoNumeric" class="repoLink">AutoNumeric parent library</a>. It can be configured as you like.</p>
 					</a>
 					<div :class="boxClasses" :style="boxStyle">
 						<div :class="labelClasses">Default vue-autonumeric</div>
-						<autonumeric :options="''" v-model="autoNumericModel"></autonumeric>
+						<vue-autonumeric :options="''" v-model="autoNumericModel"></vue-autonumeric>
 					</div>
 
 					<div :class="boxClasses" :style="boxStyle">
 						<div :class="labelClasses">With the <code>'euro'</code> option</div>
-						<autonumeric :options="'euro'" v-model="autoNumericModel"></autonumeric>
+						<vue-autonumeric :options="'euro'" v-model="autoNumericModel"></vue-autonumeric>
 					</div>
 
 					<div :class="boxClasses" :style="boxStyle">
 						<div :class="labelClasses">With the <code>'dollar'</code> option</div>
-						<autonumeric :options="'dollar'" v-model="autoNumericModel"></autonumeric>
+						<vue-autonumeric :options="'dollar'" v-model="autoNumericModel"></vue-autonumeric>
 					</div>
 
 					<div :class="boxClasses" :style="boxStyle">
 						<div :class="labelClasses">With the <code>'integer'</code> option</div>
-						<autonumeric :options="'integer'" v-model="autoNumericModel"></autonumeric>
+						<vue-autonumeric :options="'integer'" v-model="autoNumericModel"></vue-autonumeric>
 					</div>
 
 					<div :class="boxClasses" :style="boxStyle">
 						<div :class="labelClasses">With the <code>'integerPos'</code> option</div>
-						<autonumeric :options="'integerPos'" v-model="autoNumericModel"></autonumeric>
+						<vue-autonumeric :options="'integerPos'" v-model="autoNumericModel"></vue-autonumeric>
 					</div>
 
 					<div :class="boxClasses" :style="boxStyle">
 						<div :class="labelClasses">With the <code>'French'</code> predefined language and a placeholder</div>
-						<autonumeric
+						<vue-autonumeric
 								:options="'French'"
 								:placeholder="'Enter € here'"
 								v-model="autoNumericModel"
-						></autonumeric>
+						></vue-autonumeric>
 					</div>
 
 					<div :class="boxClasses" :style="boxStyle">
 						<div :class="labelClasses">With the <code>'NorthAmerican'</code> predefined language</div>
-						<autonumeric
+						<vue-autonumeric
 								:options="'NorthAmerican'"
 								v-model="autoNumericModel"
-						></autonumeric>
+						></vue-autonumeric>
 					</div>
 
 					<div :class="boxClasses" :style="boxStyle">
@@ -68,14 +68,14 @@
     decimalCharacter : ',',
     digitGroupSeparator : '.'
 }</code></div>
-						<autonumeric
+						<vue-autonumeric
 								:options="{
 						            currencySymbol : 'Ω',
 								    decimalCharacter : ',',
 								    digitGroupSeparator : '.'
 								}"
 								v-model="autoNumericModel"
-						></autonumeric>
+						></vue-autonumeric>
 					</div>
 				</div>
 			</div>
@@ -84,13 +84,13 @@
 </template>
 
 <script type="text/babel">
-    import Autonumeric from '../src/components/Autonumeric.vue';
+    import VueAutonumeric from '../src/components/VueAutonumeric.vue';
 
     export default {
         name      : 'app',
 
         components: {
-            Autonumeric,
+            VueAutonumeric,
         },
 
         data() {
@@ -185,4 +185,14 @@
 		border-radius    : 3px;
 		background-color : rgba(27, 31, 35, .05);
 	}
+
+	.repoLink {
+		text-decoration: none;
+		color          : #0094ff;
+
+		&:hover {
+			text-decoration: underline;
+			color          : #0068B7;
+		}
+	}
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-autonumeric",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "An AutoNumeric wrapper for Vue.js",
   "author": "Alexandre Bonneau <[email protected]>",
   "license": "MIT",

src/components/Autonumeric.vue renamed to src/components/VueAutonumeric.vue

@@ -81,7 +81,7 @@ OTHER DEALINGS IN THE SOFTWARE.
      */
     export default {
         //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: 'Autonumeric',
+        name: 'VueAutonumeric',
 
         props: {
             value: {

src/index.js

@@ -1,4 +1,4 @@
-import VueAutonumeric from './components/Autonumeric.vue';
+import VueAutonumeric from './components/VueAutonumeric.vue';
 
 // Expose component to global scope
 /* eslint no-undef : 0 */