kevinongko / vue-numeric Goto Github PK

I installed v1.5.5 of vue-numeric and I am not able to import it (with typescript). The npm archive seems to have no compiled version of vue-numeric.vue in it. It seems to be a pure source archive.

Expected Behavior

Form submission stops and you get notified what input field is faulty.

empty-value accepting null or "" to make input value empty.

Actual Behavior

Form goes trough without validating; Input field has a value of 0 or {{empty-value}}

Steps to Reproduce the Problem

1. Create a form tag with a submit function. <form @submit.prevent = "doSomething()">
2. Create a new fresh component, add v.model and add attribute "required" to the tag
3. Add submit button to form
4. Submit empty form

Specifications

• Plugin Version: 2.2.8
• Vue.js Version: 2.5.13
• Browser: Google Chrome: 63.0
• OS: Windows: 10

I am using the min prop.

On page load, the form is empty and the vue-numeric shows the input as empty (which is correct) but after the user key in any number, we do not have the option to empty the input again.

Here's the input:

<vue-numeric type="text" name="amount"
             placeholder="Amount"
             :min="5.00"
             currency="" 
             :precision=2 
             v-model="amount" 
             empty-value=""
></vue-numeric>

Specifications

• Plugin Version: 2.3.0
• Vue.js Version: 2.5.13
• Browser: Chrome Version 63.0.3239.132 (Official Build) (64-bit)
• OS: MacOS 10.12.6

On component render, I'm loading optionData from my database which holds the price in a string format. On Initial load the price just doesn't get set, I have to manually click into the field to re-render it for it to pick up the change.
SCRIPT
data() { return { name: '', price: '' } },
props: [ 'optIndex', 'optionData' ],
created() { this.name = this.optionData.name; this.price = this.optionData.price; },

HTML
<vue-numeric currency="£" separator="," v-model="price" class="form-control" placeholder="Price" id="price"></vue-numeric>

RESULT
Empty initially but when I click in the field I get 34523213 then when I click out I get the nice formatted version.

Was just wondering if you had any ideas ?

I have some thoughts about the :precision="x" prop.
There is a usecase where you have a number of 1, if you have :precision="4", it will look like this: 1,0000. It is really useless to display all the zeroes in my opinion.

I assume there is people and usecases that would like the extra zeroes to be there. However, I would love for it to be an option(prop) to enable/disable showing of zeroes. eg minDecimals="2" and maxDecimals="4". This would output: 1,00 but the user is able to edit the value to the following: 1,9999.

If you also sit the prop :precision="4", sitting 1,99995 would output: 2,00 🤔

If you are reporting bugs please fill the form below otherwise feel free to delete the form.

Expected Behavior

Some currencies do not use a seperator, rather a space, but this plugin enforces either a , or .
Is there any chance you might support this, or can I contibute to your plugin and make the required amend?

Actual Behavior

forces use of , or .

Steps to Reproduce the Problem

1. trying to put a space for the seperator. Simply seperator=" "

Specifications

• Plugin Version: latest
• Vue.js Version: 2.x
• Browser: Firefox/Chrome etc.
• OS: OSX/Windows/Lunix etc.

checkdata function is not getting triggered when I change the value, please suggest?

I was browsing your demo page but when i tried to go further with the vue development tools i found that it is using production mode or is disabled intentionally:

It will be very helpful for future users if you can use development mode or enable it. This way users can tell for example if the value is stored in the state as raw or masked just checking out the vue tab.

Right now if you clear the input the value is set to 0 and there is no way to change that. There should be a way to configure what value will be set when the input is cleared out.

Hello, How I can add name attribute to vue-numeric field?

Hey,

is it possible to add null as a value?

For a more detailed explanation, this is my scenario:

I have a form which is populated by API data and the user should add/change data and then submit it. There we have a <vue-numeric> input as well. When the user edits the field, everything works as expected.

But I have the situation that sometimes the input isn't populated at all and the user doesn't change anything either. In this case the empty value 0 is sent back to the API but it should be null ...

I just saw that there is something like :empty-value now ... But it still expects the the value is a Number, doesn't it?

Expected Behavior

Given you have the following vue-numeric component:

<vue-numeric v-model="value" placeholder="placeholder" />

If value is set, I would expect to see the value. Just as described in the documents:

Input placeholder when empty

Actual Behavior

When component is mounted, the value is not shown until you click on the input field. The placeholder is shown instead.

Steps to Reproduce the Problem

See example in codesandbox: https://codesandbox.io/s/v821j799wl

Specifications

• Plugin Version: 2.3.0
• Vue.js Version: 2.5.2
• Browser: Firefox Dev. 60.0b12
• OS: macOS 10.13.3

In #39 you said it was intended to work like this, can you explain the reason for this?

Thanks!

On the demo page, the field gets clipped vertically.

The screenshot is from Safari, iPhone 5S, latest iOS. I'm experiencing the same on Safari on my iPad Air. Zoom is 100% (normal).

I'm using vuelidate to validate my input fields.
When I call the validation, it doens't works:

<vue-numeric v-model="myValue" @blur="$v.myValue.$touch"></vue-numeric>

If I change it for:

<vue-numeric v-model="myValue" @blur="someFunction"></vue-numeric>

The function isn't called.

Hi @kevinongko I really love this component but as you can image if you are working with a field of price probably you will need to support decimals points and make it configurable (the number of decimals allowed) because at this moment this component only works with integers.

I would like something like this:

<vue-numeric currency="$" separator="," decimals=2 v-model="price"></vue-numeric>

My issue right now is that I want to type 11.99 but I get 1,199

Cheers

When I use a :readonly ="true" prop on the component I get a Vue tip:

"Prop "readonly" is passed to component , but the declared prop name is "readOnly". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "read-only" instead of "readOnly"."

If I change the props name to "read-only" however the component turns into a instead of an which is not what I want, because then I lose aligning and other styling attributes.

Hi,

When current value is zero 0.00 and user focus on input, user has to remove this value by pressing backspace 4 times and then he can start typing new values.
It would be good if component can clear the input field automatically when value is zero.

I made a simple directive to achieve this.

Vue.directive('clear-zero', {
  bind: function (el, binding, vnode) {
    el.onfocus = function () {
      if (parseFloat(el.value) === 0) {
        console.log('Clear value');
        el.value = null;
      }
    };
  }
});

<vue-numeric v-clear-zero currency="$" :precision="2" v-model="amount ></vue-numeric>

Current behavior

Expected behavior (with directive)

Can you replace blur function with some preventDefault function?
For example, you start typing ",,,,," and then you do blur and value is rest.

If you use wizard for example and have next/prev buttons user will not be able to see that blur function is executed on next step and he will thing that he entered ",,,,," for some value that can n ot be that.

The component change the decimal separator on enter.

To test:
<vue-numeric v-bind:precision="2" separator="." v-model="price" placeholder="My price" ></vue-numeric>

1 - Click on input and put the value 123,43
2 - Take the focus out the component. The masked value is correct.
3 - Click on input and confirm the value 123.43. On enter the decimal separator was changed to "."

There is an option to have a maximun decimals and show only when the value is not 0?
Example: 0.43400 -> 0.434

Expected Behavior

The issue consists of 2 parts

• Changing precision does not update the numeric input immediately (only after a focus).
• The actual value is not updated at all (not even after focus)

Actual Behavior

The actual input value is only updated when regaining focus

Steps to Reproduce the Problem

1. Initialize a numeric input with precision '2' and value '1.25'
2. Update the numeric input precision to '1'
   => Value should be '1.3'

A pull request has been created: #44

Hello!

Thanks for a great plugin. It seems when using a computed value to populate the field, the amountNumber variable doesn't get updated. When inspecting the element, I can see the valueNumber and value get updated correctly. Anything I can do to help - just say!

Steps to Reproduce the Problem

1. Go to this codepen
2. Note how 83.33 is the correct number (1000 / 12)
3. Update the first field to 1200

Expected Behavior

All fields update to have 100 as their contents

Actual Behavior

Nothing updates visually, but values do update on the component (note the value and valueNumber in the screenshot below)

Specifications

• Plugin Version: 2.2.4
• Vue.js Version: 2.5.2
• Browser: All
• OS: High Sierra

Hi,

Expected Behavior

If v-model value is 0.00 then input field should clear on focus

Actual Behavior

Input remains same

Steps to Reproduce the Problem

http://jsfiddle.net/cvg6c4r3/6/

I have also tried adding a directive but no luck

Vue.directive('clear-zero', {
  bind: function (el, binding, vnode) {
    el.onfocus = function () {
      if (parseFloat(el.value) === 0) {
        console.log('Clear value');
        el.value = null;
      }
    };
  }
});

<vue-numeric v-clear-zero currency="$" :precision="2" v-model.number="money"></vue-numeric>

Specifications

• Plugin Version: 2.2.3+
• Vue.js Version: 2.5.2/2.4.4
• Browser: chrome 62 beta
• OS: macOs sierra

Ref #26

If you set the focus on a new vue-numeric input immediately after creating it, the input does not stay cleared, and will display the formatted value after a brief moment, as if it has lost focus.

I can see that in the mounted() event, we're updating the value, then updating it again 500ms later. I don't want to attempt to fix this without understanding what the purpose of this delay is:

      // In case of delayed props value.
      setTimeout(() => {
        this.process(this.valueNumber)
        this.amount = this.format(this.valueNumber)
      }, 500)

Expected Behavior

A new vue-numeric input, when focused immediately after being created, should remain focused and should remain cleared until the first blur event

Actual Behavior

If the new input is focused too quickly, the formatted value is displayed instead of remaining blank

Steps to Reproduce the Problem

1. Create a new instance of vue-numeric
2. Immediately set focus to the new input.
3. Input correctly receives focus and contains no value
4. Half a second later, the input sets it's value to $0.00 and retains focus

Specifications

• Plugin Version: 2.3.0
• Vue.js Version: 2.5.16
• Browser: Chrome
• OS: Windows 10

Hi,
I was trying to reduce my webpack bundle size.
I found that you are also packing accounting-js in your "dist".
You can exclude this be tweaking your webpack config.

  entry: './src/index.js',
  externals: [
    'vue',
    'accounting-js',
  ],

Don't worry; your dist file will still has a reference to accounting-js and will be included by developer webpack.

Benefits

• This will reduce this package size to ~ 4kb
• Better debugging because dist does not include any 3rd party code
• Take advantage of webpack tree shaking
• Prevent duplicate bundling when a developer has also installed accounting-js as dependency in his project

Cons

• When using this package without webpack (directly in browser); end user need to include accounting-js just before this script.

Findings

• babel-plugin-istanbul is adding lots of extra stuff in dist that is not required.
• Removing this line saved lots of bytes
  https://github.com/kevinongko/vue-numeric/blob/master/package.json#L71
• I was able to reduce your package dist size to 4kb (excluding accounting js)

Thanks.

Hi!

If I have two inputs using the same property, the one with vue-numeric is not updated.
For example

<input type="text" v-model="invoice.total">
<vue-numeric v-model="invoice.total"></vue-numeric>

Total is: {{invoice.total}}

The value entered in the regular input tag is only updated in the html but not on the vue-numeric. Checking with dev tools, I see that amount is 0 and value is changing inside the VueNumeric component

Any Ideas?

Hi,
Thanks for the great plugin.

Some time we need to show amount on view like

// wants formatted amount
{{product.amount}} 

How difficult it is to expose your formatToNumber method so that we can import it like :

import format from 'vue-numeric/src/formatter.js'
console.log(format(product.amount,'$'));
// $ 123.25

Possibly extract that to a new js file, so that this component can still use it.

This way user no need to install another library to format amounts.
Thanks.

when the read-only property is set to true, the value of the v-model is not displayed

Hi. How can I define default props to use in all components without passing them to component?

Hey,

I'll come back and properly fill out this issue this afternoon, but thought I would just put it here before I forget.

The this.update method doesn't seem to ever get fired in IE11 or below. However the this.process one does.

I have temporarily updated the this.process method to the following (i expanded the if statements while I was debugging) and remove the update method

/**
* Validate value before update the component.
* @param {Number} value
*/
process: function(value) {
	if (value >= this.max) {
		value = this.max;
	}
	if (value <= this.min) {
		value = this.min;
	}
	if (!this.minus && value < 0) {
		value = this.min >= 0 ? this.min: 0;
	}

	this.$emit('input', Number(accounting.toFixed(value, this.precision)));
},

causes a vee-validate "undefined" error. I understand this is not a vue-numeric bug but would be great if it could support the v-validate attribute of vee-validate.js. Maybe I am using the wrong notation and there is a way to make vee-validate work with vue-numeric, but I could not find it anywhere. I believe it simply needs to propagate the v-validate attribute if present. I can help with testing.

Hi,
just updated to v2.0.0 found issue.

Component does not accept new valid values on blur event.
https://jsfiddle.net/acvr9byw/

Steps to reproduce

• Setup a component with null value
  <vue-numeric currency="$" precision="2" v-model="price"></vue-numeric>
• Type in input some value eg - 5566
• Click outside of input
• Input value remains 0.00
  

Expected Behavior

Value: 1000.00000000
Result: 1000.00000000

Actual Behavior

Value: 1000.00000000
Result: 1000.00000001

You can try in the Live demo.

Specifications

• Plugin Version: v2.3.0
• Vue.js Version: v2.5.3
• Browser: any
• OS: Windows 10

Thanks!

OT: Thanks for this great vue component!

When using vue-numeric as currency input on iOS iPhone, the keyboard offered by iOS is suited for the 'tel' html input type, which is just numbers. Comma/Dot for currency input is missing. Android does have it. Since there is no other proper input type than 'text' to get a suitable keyboard, I'd propose to offer an enum for the input type (tel as default or text).
Or one uses 'number', but then the currency symbol has to be rendered elsewhere.

Expected Behavior

bower install vue-numeric

Actual Behavior

bower ENOTFOUND Package vue-numeric not found

Steps to Reproduce the Problem

1. Try to install with Bower
2. Bower says vue-numeric is not found

Expected Behavior

If you input a String with "20000.00" as value the output value will be 20.000,00

Actual Behavior

Right now when you input a String with "20000.00" as value the output value will be 2.000.000,00

Steps to Reproduce the Problem

https://codepen.io/anon/pen/vRqyay

Specifications

• Plugin Version: v2.3.0
• Vue.js Version: v2.5.16
• Browser: Chrome, Edge
• OS: Windows 10

Hi, I've made a changes for currency symbol position (some currencies are on the left side, some on the right side). May I do a "Pull request" for your approval?
Karel

IE11 strict模式下不允许一个属性有多个定义

Hi,

Can you also update docs folder so that we can get latest version on
https://kevinongko.github.io/vue-numeric/

Thanks.

Hi @kevinongko!

I am using vue-numeric but when compiled it has this error:

Module build failed: Error: Couldn't find preset "es2015" relative to directory

Normally, when you use tab to go to the next field, it will select all the text inside the field. But if the numeric field needs to unformat the value, it would not select the text.

Expected Behavior

As seen in the screenshot, it will select all the text inside the field.

Actual Behavior

Since it needs to unformat the number, it didn't select the text inside and the cursor is at the rightmost.

Specifications

• Plugin Version: ^2.2.4
• Vue.js Version: ^2.1.10
• Browser: Google Chrome
• OS: MacOS High Sierra

When I bind an input with v-model.lazy the data on my vue developer tools doesn't gets updated until it loses focus, working as intended.

With v-numeric, after every input it gets syncronized.. is this right?

Can't manage tu leave the currency symbol after de value,

example:
I have this: "% 4", but i need this "4 %"

Is there any workaround ?

I'm trying to show the input without a currency symbol in it, which works, but a space is always added in front of the number, as far as I can tell, because of the formatString computed property.

My 2 ideas are:

1. Change the formatString to a prop and add a default value (a function) – possibly the most flexible in the long run.
2. Check if there's a currency and if not, only include the %v in formatString – probably easiest to implement.

It's probably doable to implement both.

I'm okay to take an attempt at adding this if it's wanted.

Good idea? Bad idea?

Handling of decimal separator doesn't quite work if you want to use a comma instead of a dot.

Steps to reproduce

• Go to https://kevinongko.github.io/vue-numeric
• Select "use '.' as separator" (this is the thousand separator)
• Enter Value "1,2" (with a comma) and leave (blur) input
• Focus input, it now says "1.2" (with a dot) but should be "1,2" (with a comma)
• Add 3 to the input and leave (blur) input
• Value is now 123.0 but should be 1.23

I got it to work by changing the the following

onFocusHandler () {
  this.amount = accounting.formatNumber(this.valueNumber, {
    precision: Number(this.precision),
    decimal: this.decimalSeparator,
    thousand: ''
  })
}

but this breaks #26

Is there a way to format the number for the Indian numbering system; i.e. "1,00,000" instead of "100,000", or "1,00,00,000" instead of "10,000,000"? It's the only format that makes sense when dealing with values in Indian rupees (and a few other currencies).

Input should not accept letters at all.

Just a suggestion: Add a 'read-only' property, which defaults to 'false'. If this is set to 'true' then the component generates a span (rather than an input) element, which is merely used to format currency values for display to the user.

Excuse me, thank you for the plugin.

I made a dynamic number entry and saved it into the database. However when I loaded the value from database and pushed the array to render in the dom (using v-for), the vue-numeric doesn't update (needs to be clicked first to update)

Expected Behavior

When model is programatically updated, updates dom and formats it

Actual Behavior

Shows placeholder instead

After click:

Specifications

• Plugin Version: 2.2.3
• Vue.js Version: 2.5.2
• Browser: Google Chrome
• OS: MacOS Sierra 10.12.6

Sorry for my bad English, and thanks before.