vue-autonumeric
Advanced tools
Changelog
1.1.0
:value and :options props, the options is not always modified before the valueoptions to new ones with a higher decimalPlacesRawValue loses the additional decimal placesoptions by passing an array of options (with objects and predefined option names)options and value are both set at the same time, vue-autonumeric now always update the options first, before setting the value.
vue-autonumeric component sharing the same v-model but different options, changing the value/option may not work correctly.
set() it since it does not come from a user interaction.vue-autonumeric component has a decimalPlaces option set to 2, and another set to 5, then the first component will drop the additional decimal places when using set()...which in turn will make the other component aware of that new value change, and the second component will then use that new cropped value as well.Readme
A Vue.js component that wraps the awesome AutoNumeric input formatter library
Get in touch on 
vue-autoNumeric wraps the awesome AutoNumeric library and generate an <input> element managed by AutoNumeric.
Checkout the demo!
yarn add vue-autonumeric
# or
npm install vue-autonumeric --save
Note: In order to minimize the size of the vue-autoNumeric component, the AutoNumeric library dependency is not bundled with it.
This means you need to link the AutoNumeric library with either ways:
<head> tag directly<!-- locally... -->
<script src="../node_modules/autonumeric/dist/autonumeric.min.js"></script>
<!-- ...or by using a CDN -->
<script src="https://unpkg.com/autonumeric"></script>
Then you need to tell Webpack to treat the AutoNumeric dependency as external so that it does not try to bundle it.
Here is a really simple webpack.config.js example that does that:
module.exports = {
entry : './src/vueAutonumericTest.js',
output : {
filename: './dist/bundle.js'
},
externals: {
AutoNumeric: 'AutoNumeric',
},
};
You can choose to directly import the AutoNumeric library in your source code.
First, install the autonumeric dependency so that Webpack can find it using:
yarn add autonumeric
# or
npm install autonumeric --save
You will as usual be able to use the vue-autonumeric component in your Vue components using:
import VueAutonumeric from '../src/components/VueAutonumeric.vue';
export default {
name : 'myComponent',
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:
module.exports = {
entry : './src/vueAutonumericTest.js',
output : {
filename: './dist/bundle.js'
},
resolve: {
alias: {
AutoNumeric: 'autonumeric/dist/autoNumeric.min',
},
},
};
The AutoNumeric component can be instantiated the same way AutoNumeric can.
With an option object:
<vue-autonumeric
v-model="myValue"
:options="{
digitGroupSeparator: '.',
decimalCharacter: ',',
decimalCharacterAlternative: '.',
currencySymbol: '\u00a0€',
currencySymbolPlacement: 's',
roundingMethod: 'U',
minimumValue: '0'
}"
></vue-autonumeric>
With a predefined option name:
<vue-autonumeric
v-model="myValue"
:options="'French'"
></vue-autonumeric>
With multiple option objects/predefined options:
<vue-autonumeric
v-model="myValue"
:options="['euro', { minimumValue: '0' }]"
></vue-autonumeric>
You can define the input placeholder using:
<vue-autonumeric
v-model="myValue"
:options="'euro'"
:placeholder="'Enter your value here'"
></vue-autonumeric>
You can also specify the type of html tag (within the AutoNumeric supported list) 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:
<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.
This wrapper supports setting the AutoNumeric options via an :options prop.
It also supports external value changes (via aNElement.set(42) for instance) and update the formatting and the v-model accordingly.
The paste, drop and wheel events are supported as well.
Moreover, if you modify the :options prop, the AutoNumeric settings will be automatically updated with the new options.
Please note that directly setting a :value='42' on the <vue-autonumeric> component will break it (really!).
Do NOT do that:
<vue-autonumeric
v-model="myValue"
:options="{ minimumValue: '0' }"
:value="42042.69" <!-- This fails -->
></vue-autonumeric>
The official AutoNumeric documentation is using this component extensively :)
An editable live example is available on Codepen.
Moreover, you can check the shipped examples in your browser, and study its source here.
^v4^v2This supports the same browsers than AutoNumeric supports:
(latest 2 versions)
If you use IE/Edge/Safari/Opera, this might work ;)
Whenever you change the source code, you can check how it affects the default examples by first building those in examples/index.html with:
yarn build:examples
The contribution guidelines for vue-autoNumeric are the same than for the parent AutoNumeric project.
As always, if you find this useful, please consider supporting its development!
Huge Thanks :)
vue-autoNumeric is open source and released under the MIT License.
Copyright © 2016-2018 Alexandre Bonneau
PS:
I would love to know how you're using vue-autonumeric.
Contact and tell me! :)
FAQs
An AutoNumeric wrapper for Vue.js
We found that vue-autonumeric demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).