autonumeric / vue-autonumeric Goto Github PK

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.

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.

Hi, any plans on supporting Vue 3.0? 🙂

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.

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

I base on Element UI.
Could use?

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.

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

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',

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.

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.

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?

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'),
  }
}

Create the tests for the vue-autonumeric component.

No test is bad.
Test that stuff.

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

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.

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 ?

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 !)

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.

<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"'

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

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.

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.

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

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!

does v-on:change working in this component?

any docs for events available?

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.

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

<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

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.

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.

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.

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

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?

v-on:change event doesn't work

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'
});