autonumeric / vue-autonumeric

A Vue.js component that wraps the awesome autoNumeric input formatter library

What is AutoNumeric?

AutoNumeric is a standalone Javascript library that provides live as-you-type formatting for international numbers and currencies.

Highlights

AutoNumeric main features are:

• Easy to use and configure
• Very high configurability (more than 40 options available)
• User experience oriented ; using autoNumeric just feels right and natural, specially with the function chaining feature
• Supports most international numeric formats and currencies
  (If the one you use is not supported yet, open an issue and we'll add it as soon as possible!)
• The mobile Android Chrome browser is partially supported

...and much more.

All in all, AutoNumeric supports most international numeric formats and currencies including those used in Europe, Asia, and North and South America.

---

Documentation

The documentation previously shown in that readme has now been moved to a specific web page where it's much more user-friendly; you can check it out on https://docs.autonumeric.org.

Tools

For checking the official AutoNumeric website, you can take a look at http://autonumeric.org. On this website you'll find additional tools for instance to generate your options configuration.

---

AutoNumeric versions

AutoNumeric provides 2 branches, master and next.

The very, very stable version is on the master branch (currently this is version 4.6.*).

The next branch contains all the new features and fixes, and is considered 'stable' too.

Do note that the next branch can see changes in the API (check the semver), but is always fully tested for regressions.
It's safe to use on production servers since it's always thoroughly tested and should not contain any bugs (that we know of).

---

Licence

AutoNumeric is an MIT-licensed open source project, and its authors are credited in AUTHORS.

---

Support

AutoNumeric is created using the JetBrains IDE, which kindly provide access to its tools to the developers.
If you feel AutoNumeric is useful to you, please consider supporting the project.

Contributors

Thanks to all the contributors over the years for making AutoNumeric a reality!

vue-autonumeric's Issues

Prop Validation Returns Error if Empty String

Hey guys,

Loving the functionality of this library so far, but my only real issue so far is that if I try to pass an empty string (""), I get the following error:

As far as I can tell, it's necessary to pass an empty string into the component for it to show the Placeholder value. The component still works as intended after I enter a number, but I'm not too fond of seeing a giant red warning on my console, when it's really not an issue that I can see. Can we add prop validation for a String as well, so an empty value can be passed, or is there a better way to do this?

Thanks!

event on change

does v-on:change working in this component?

any docs for events available?

Could I use with `Element UI Input`?

I base on Element UI.
Could use?

Add an ability to globally set the default options

I didn't find a way to set the default options globally, so they are merged with the options passed to the component from template. It would be great to have such ability, something like this (using Vue Plugins):

import VueAutonumeric from 'vue-autonumeric';
Vue.use(VueAutonumeric, {
    onInvalidPaste: 'ignore'
});

Create the tests

Create the tests for the vue-autonumeric component.

No test is bad.
Test that stuff.

Allow the component to generate any supported Html element instead of only `<input>`

Since AutoNumeric supports being used on some Html elements (with contenteditable), we should allow a new prop named tag that will accept a limited list of Html tag.

Problem when importing `vue-autonumeric`, but not when importing `AutoNumeric`

I'm trying to use vue-autonumeric on an Electron app (on Linux).

I can import autonumeric alone

import AutoNumeric from 'AutoNumeric'

using an alias:

resolve: {
  alias: {
    'AutoNumeric': 'numeric'
  }
}

but if I try to import vue-autonumeric I see the error Cannot find module 'AutoNumeric'

import VueAutonumeric from 'vue-autonumeric'

using an alias:

resolve: {
  alias: {
     'AutoNumeric': 'numeric',
    // Or these other aliases
    // 'AutoNumeric': 'node_modules/autonumeric/dist/autoNumeric.min',
    // 'AutoNumeric': path.join(__dirname, '../node_modules/autonumeric/dist/autoNumeric.min'),
  }
}

Ignoring the .lazy modifier

Hello.
Thanks for the great component!

I have identified one issue, though.

When using the .lazy modifier on v-model, the AutoNumeric component updates the model on the input event, rather than on the change event.

I have created a fiddle to illustrate the issue in which there is a standard input next to a Vue AutoNumeric component: https://jsfiddle.net/p462eLa9/1/

Please let me know your thoughts on this.

When using an object to modify both the `:value` and `:options` props, the options is not always modified before the value

Let's say you have the following template:

<vue-autonumeric
	:options="obj.options"
	v-model="obj.val"
/>

If you want to modify both :value and :options props at the same time, you would proceed by doing:

this.obj = {
    options : 'percentageEU3dec',
    val     : 0.00123456,
};

However since the initial default options here sets the decimalPlaces option to 2, then if the value is modified first, then AutoNumeric will (rightly) drop any additional decimal places and keep only 0.00, instead of 0.00123456.

For this to work, we need to find a reliable way for the VueAutonumeric component to first update the options before the value.

That way 'percentageEU3dec' will correctly update decimalPlaces to 5, and then 0.00123 will correctly be saved as the value.

You can see the problem on this codepen.

Change event doesn't work

v-on:change event doesn't work

The `readOnly` option is not respected for non-input tags (`contenteditable` is always set to `true`)

hi,
i'm having a problem when i set to readOnly with currency symbol on it
there's red underline on the text

how to set it to false?

unformatOnSubmit is not triggered when using submit.prevent

<form id="poForm" method="post" v-on:submit.prevent="validateBeforeSubmit">
<vue-autonumeric type="text" name="item_quantity" v-model="quantity" v-bind:options="{unformatOnSubmit: true}"></vue-autonumeric>
</form>

in vue

validateBeforeSubmit: function () {
var test = new FormData($('#poForm')[0]);
console.log(test.get('item_quantity'));
}

the console will print the formatted value not the unformatted value
why i need this because i need to send the name attribute as axios params to be sent to php controller

build fails on linux

The recent change made in build/webpack.base.js creates a issue when compiling with webpack on case sensitive OS like linux.

This dependency was not found:

* AutoNumeric in ./node_modules/vue-autonumeric/dist/vue-autonumeric.min.js

THIS

externals: {
    autonumeric: 'AutoNumeric',

SHOULD BE THIS

externals: {
    AutoNumeric: 'autonumeric',

VueAutonumeric value prop validator should accept strings

<VueAutonumeric> component should accept value prop as a numeric string, because Autonumeric's .set() accepts it.
For now, it throws warning '[Vue warn]: Invalid prop: custom validator check failed for prop "value"'

Set value to zero after null

Hello.
I have a problem displaying a zero value after null.
null is not displayed in the input, but if I change the value to 0, it also does not appear...
Maybe I'm doing something wrong?
Or is there a way to avoid this problem?

Example https://codepen.io/Zeroox/pen/mddyerR

This has been fixed with a workaround by setting the value to '0'... But I think this is not good.

Support for numeric keyboard via input[type=number]?

Hi!

Thanks for the great component, it worked right out of the box!
One question:
The HTML <input type=number> will make for example Android browsers open a keyboard with only numbers as available input. No other characters. This is a great thing for the end user.

Is there any way to achieve this via your component? I tried adding type=number but that didn't work.

Thanks again!
/Pär

Error while npm run development

Hello,

i'm running on centos 7 and execute command
npm run production

and i got this message :

ERROR in ./node_modules/vue-autonumeric/dist/vue-autonumeric.min.js
Module not found: Error: Can't resolve 'AutoNumeric' in '/home/simonev3/simonev/node_modules/vue-autonumeric/dist'

how to fix this ?

thanks.

Inherit events from component wrapper

It would be helpful if I could attach events on component and it would respond to them. Right now component emits only "input" event. I would like to attach "blur" and "keyup.enter" events like this:
<vue-autonumeric @blur="blurHandeler" @keyup.enter="enterHandeler" />

Vue js can do it with this.$listeners

Android cursor issue

Android: A cursor is moved behind the next digit if remove a digit inside a number, e.g. enter 1234, remove a digit 2. A cursor becomes behind 3.
Reproduced on the android 8.1.0, (also on 9). chrome 71.0.3578.99.

The event passed as a parameter is not a valid wheel event, 'wheel' given.

Description

Using the wheel of a regular mouse or the up/down swipe gesture of a magic mouse throws an error in the dev tools.

Implementation

<VueAutonumeric
  :options="{
    allowDecimalPadding: 'floats',
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    decimalPlaces: 2,
    decimalPlacesRawValue: 2,
    decimalCharacterAlternative: '.',
    currencySymbol: '\u00a0%',
    percentageEU2dec: true,
    currencySymbolPlacement: 's',
    roundingMethod: 'U',
    emptyInputBehavior: 'press',
  }"
/>

How to reproduce

1. Implement <VueAutonumeric> component
2. Click into the input
3. Scroll

Error

Add TypeScript file definition

Hi guys!

Can someone add typescript file definition ? :) It will be helpful for typescript users :)
something like that:

	class VueAutonumeric extends Vue {
		value: number | null | string
		options: object | string | Array<any>
		resetOnOptions: boolean
		placeholder: string
		tag: string
	}

thanks !)

Trying to edit a value sets the caret to the end of the input

It seems the vue package has an issue that the vanilla js package does not: whenever a field's value is updated, the caret is automatically moved to the end of the input.

This makes it cumbersome to make changes like changing $52,000 to $52,500.

option for output-only

i think its a great features to implement some kind output-only
not only for the input text by using autoNumeric.format()

Require of AutoNumeric is ES6 module and not the distribution version

AutoNumeric is required as ES6 module and not as the distribution version.
When compiling a project using webpack, node_modules is usually not transpiled with babel-loader, resulting in AutoNumeric not being transpiled.

Instead of the ES6 module:

require('autonumeric')

Use the distribution version:

require('autonumeric/dist/autonumeric.min')

It also results in faster compiling and smaller file-size.

Error when building with webpack 2 on linux

Building with webpack hrows an error:
Module not found: Error: Can't resolve 'AutoNumeric' in /VERY_LONG_PATH_TO_MY_PROJECT_DIR/node_modules/vue-autonumeric/dist'

and problem is, your package tries to import AutoNumeric, but actual directory name is autonumeric, in lowercase.
ln -s from AutoNumeric to autonumeric in my node_modules resolves the issue.

Modifying the `options` will always lose the decimal places precision after `2` places

Fix an issue where modifying the options will always lose the decimal places precision after 2 decimal places.

This happens since resetOnOptions temporarily resets the configuration to the default one, which set the decimalPlaces option to 2.

Update the value when the `:options` prop is modified

If the component :options prop is modified, then the AutoNumeric settings should be updated.

A call to aNElement.update(newOptions) need to be done in a watch.

Add support for Nuxt

I am getting a 'window is not defined' error so I can't use this library :(

References to autonumeric need to be updated

Hello,

This component has great potential but using it is very inconvenient as it uses the outdated AutoNumeric case instead of the current lower case autonumeric naming convention. This forces complicated webpack configs as a workaround. Would it be possible to fix this issue?

Just doing a simple replace all "AutoNumeric" to "autonumeric" in the source JS file seems to fix the problem.

Best,
Kal

Library naming issue

vue-autoNumeric/dist/vue-autonumeric.js

Line 8 in 252d616

module.exports = factory(require("AutoNumeric"));

vue-autoNumeric/dist/vue-autonumeric.js

Line 12 in 252d616

exports["VueAutonumeric"] = factory(require("AutoNumeric"));

require("AutoNumeric") looking for wrong way. it should be renamed to require("autonumeric") (lowercase)
When I change it to lowercase it start working.

Any idea?

Directive usage

Thanks for this great project! I want to suggest a feature.
Would be great if Autonumeric could be used as a directive.
As I can see this Vue integration is pretty simple and component wrapper looks like an overhead to me.

Add a new `resetOnOptions` props so that updating the `options` one first reset to the default options

Add a resetOnOptions prop set the true by default so that updating the options prop first call .options.reset().

This is useful when using predefined option names that do not declare all the options. For instance when switching from 'integer' to 'euro', the decimalPlaces is not set from 0 to 2 and you have to first update to the default configuration if you want to obtain the same format than when using 'euro' directly.

This new resetOnOptions prop will by default make sure all options update will first get reset to the default options, before applying the new ones.

This can be avoided by setting resetOnOptions to false before changing the options value.

Not working on mobile devices / userInteraction is never set to true on touch devices (iOS / Android)

Since userInteraction is set on keydown/paste/wheel/drop and none of those are triggered on touch devices, the autonumeric behavior is strange.
It results in empty value not being set and decimals being inserted on every key, which makes it almost impossible to enter values.

The solution is actually quite simple.
userInteraction is only used in one check, that could be replaced.

current code:

if (!this.userInteraction) {
    // Make sure this is only called when the value is set by an external script, and not from a user input
    // The modification comes from a script, so we need to reformat the new value `newValue`
    if (newValue.value !== oldValue.value) {
        // Compare the 'newValue' with the current 'oldValue' so we do not `set` it again if it's not needed
        //XXX If multiple components share the same v-model, this means 'set' here will be called as many times as there is an input that is not being used by a human interaction
        this.anElement.set(newValue.value);
    }
}

solution:

if (this.anElement.getNumber() !== newValue.value) {
    // Make sure this is only called when the value is set by an external script, and not from a user input
    // The modification comes from a script, so we need to reformat the new value `newValue`
    if (newValue.value !== oldValue.value) {
        // Compare the 'newValue' with the current 'oldValue' so we do not `set` it again if it's not needed
        //XXX If multiple components share the same v-model, this means 'set' here will be called as many times as there is an input that is not being used by a human interaction
        this.anElement.set(newValue.value);
    }
}

userInteraction can therefor be removed completely.

How to remove keep in memory?

how to remove the value after deleted but it will show back the previous value?

Vue 3.0 compatibility

Hi, any plans on supporting Vue 3.0? 🙂

V-model not readable by the autonumeric

Thereis only 1 input on my component which i set that a variable called price = ref(''") as the v-model but when i tried console.log the value, the value is not updated. Anyway to fix this ?