fengyuanchen / vue-number-input Goto Github PK

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] Feature request
[ ] Documentation issue or request

Current behavior

Can't write in the input.

Expected behavior

Write in the input.

Minimal reproduction of the problem with instructions

<number-input v-model="value" :step="10" inlinecontrols></number-input>

Without the "v-model" all works fine.

Environment

vue-number-input version: 5.0.1
vue-number-input version: 5.0.0
vue-number-input version: 4.0.1



Browser:
- [x] Chrome (desktop) version XX

Others:

Hi i want to hide the spinners from the number component. I have tried some css code but does not seem to work. Below is the code for hiding the css

`<style scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}

input[type=number] {
    -moz-appearance:textfield;
}

</style>`

Is there any way to change the overall size of the component?

How to detect click in plus and minus button? Its not enough to use @click="method". Because with this, computer cant differentiate whether the click come from plus button, minus button, or field input.

Hi

I have problem with this event, it returns only newValue and oldValue, but I want to access to whole input object (like for example in input event) to detect which field is updated, because I'm using vue-number-input in a v-for loop...how I can do this? I tried using ref but it's not working with this component

in your first example, like this:

The props "min" is 1, but when I input 0, and blur, the input still show 0.
The "currentValue" has been updated to 1, but the view do not update.

why?

I can enter e.....eeeee-----.....eeee and the control accepts this a valid entry

When just importing vue3 in a static page, I can't seem to use this (or maybe the instructions are just not showing this special case).
Partly following your Readme, I have this in the head:

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  }
}
</script>
<script src="https://unpkg.com/vue-numeric-input"></script>

and this script section:

<script type="module">
    import { createApp } from 'vue'
    import VueNumberInput from '@chenfengyuan/vue-number-input';

    const app = createApp({}).mount("#app")
    app.component(VueNumberInput.name, VueNumberInput)
</script>

This fails with Uncaught TypeError: Failed to resolve module specifier "@chenfengyuan/vue-number-input". Relative references must start with either "/", "./", or "../".

With large size it shows two minuses on controls, instead of plus on right control https://screencast.com/t/RlHGZ2vgwi . Probably because html { font-size: 62.5%; } vertical line is just not visible.

I'm trying to implement my own rounding method, so my approach right now is, inside the @change:

updateAsset(newValue: number, oldValue: number): void {
  this.value = Math.round(this.value / 100) * 100;
}

This doesn't work correctly, the functions aren't retriggered.

My workaround:

async updateAsset(newValue: number, oldValue: number): Promise<void> {
  await this.nextTick();
  this.value = Math.round(this.value / 100) * 100;
}

On mobile devices, making larger value changes using the buttons is a bit tedious - e.g. when using a small step size like 0.1. When tapping multiple times, browsers zoom into the page (iOS at least) and holding down the button does not change the value repeatedly (and possibly get faster over time).
(adding CSS touch-action: manipulation works for me for tapping)

How to change decimal precision seperator dot (.) to comma (,)?

Hi, is it possible to change the icons for the plus and minus?

I've changed the border radius of input to 20px and now those icons are not rendering properly (they seem to overlap with the corners of the input)

Example:

Please add tabindex="-1" for buttons, tab buttons doesn't work between inputs

I am using this input as an optional field, so the user can provide null value. On the other hand, when they set a value, I want it to be in range, so I provide min and max. But when null value is passed, the error below gets shown.

Considering regular input of type number allows you to specify range, without providing anything, this seems to be a bug, that a warning would be raised for a valid usecase

I have simple input like: <number-input v-model="props.item.price" placeholder="Price by kilometer" :min="0" :step="0.01"></number-input>

And it's look like:

Only first element has value, others are null.

My question is: Where is my placeholder 😢

When using round, min and max are ignored if the value is directly modified in the input.
Math.round is using the value passed to setValue instead of the adjusted value to meet the min/max requirements.

setValue(value) {
    const oldValue = this.value;
    let newValue = typeof value !== 'number' ? parseFloat(value) : value;
    if (!isNaN$1(newValue)) {
        if (this.min <= this.max) {
            newValue = Math.min(this.max, Math.max(this.min, newValue));
        }
        if (this.rounded) {
            newValue = Math.round(value);
        }
    }
    this.value = newValue;
    ...

It looks like updating the value passed to Math.round to newValue would correct the issue.

newValue = Math.round(newValue);

Your componenet is working for example if you type 4.5 but does not allow 4,5.
Not evry country is using .. Switzerland is using comma ,.

So do you have some i18n support or similar?

<number-input :id="'weight'" v-model="weight" :min="0.1" :max="75.0" :step="0.1" center controls></number-input>

If you increase the initial value (by plus button) you will see 0,30000000000000004 but not 0.3.

In my Vue 3 app I want to have a two-way binding for the vue-number-input value that is passed as a property from the parent component. Propagating the value back to the parent component doesn't work, however.

Parent component:

<template>
  <TechnologyForm v-model:tti="tti"></TechnologyForm> 
</template>

<script>

import { ref } from 'vue'
import TechnologyForm from '@/components/TechnologyForm.vue'

export default {
   components: { 
      TechnologyForm
    },
   setup(){
      const tti = ref()

      return(tti)
   }
}

Child component TechnologyForm :

<template>
<vue-number-input :modelValue="tti" :min="1" @input="$emit('update:tti', $event.target.value)" placeholder="Years" inline controls rounded></vue-number-input>`
</template>

import VueNumberInput from '@chenfengyuan/vue-number-input'

export default {
    props: ['tti'],
    components: {
       VueNumberInput
    }
}
</script>

For other inputs it works fine, e.g.
<textarea :value="relevance" @input="$emit('update:relevance', $event.target.value)" class="form-control" id="relevance" rows="3"></textarea>

Hi Chen !

Is this lib ssr compatible ? All dist files have references to document which choke up node.js when I try to run server-side ...

Thanks

Once a value is set on the input, it won't allow it to be deleted and set to null. Repro here:
https://fengyuanchen.github.io/vue-number-input/

This use case is important for optional values. A blank null value is a sentinel value which can signify to ignore whatever setting it represents.

I user number-input as togglable component with v-else directive.
Each time I toggle component, the value of property in v-model or :model is reduced by 1.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] Feature request
[ ] Documentation issue or request

Current behavior

[Vue warn]: Error in nextTick: "TypeError: Cannot set property 'value' of undefined"

found in

---> <NumberInput>
       <Pages/products/Slug/index.vue> at pages/products/_slug/index.vue
         <Nuxt>
           <Default> at layouts/default.vue
             <Root>

when using with SSR

Expected behavior

No error

Description:

• setState() (https://github.com/fengyuanchen/vue-number-input/blob/master/src/index.vue#L162) uses $refs to access input element.
• We call it in created hook (https://github.com/fengyuanchen/vue-number-input/blob/master/src/index.vue#L101) when components isn't mounted and there is no $refs

Hello, thank you for this awesome component.
I noticed that @change triggers when the component is loaded. If there are a lot of instances of number-input on the page and there is some API call assigned to @change it will trigger the API call for each instance of the component.

Even with size="small" the control is much wider than I would expect for typical single/double-digit number entry. Could we have more size options, or better yet a width property?

<number-input v-model="costs" :min="0" :step="0.01" rounded></number-input>
When we out input it rounded value to integer, not to float with step 0.01

In this case controls also not working.

I think it's bug.

Is it possible to disable styling entirely? I would like the editbox to show as a totally plain INPUT without any custom css.

I had trouble to get it to work with increment of a float number.
So I fixed some smelly code: here is the result of the rewrite: https://github.com/jointhepartypooper/PeercoinSim/blob/main/src/components/VueNumberInput.vue

How to disable editable of input element. User can edit only with controls.

Whenever I increase/decrease/change the value, setValue method gets executed twice: one by the propper method (increase for example) and a second time by the watcher. This also implies that the change event is emitted twice.

Hi.

I believe the system buttons should not be visible. Looks like a missing CSS rule to me, or is it intentional?