Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

Overview

npm Version npm Downloads Bundlephobia License

vue-number-format

Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of digits to the right of the decimal.

Vue 3.0

npm install @coders-tm/vue-number-format
or
yarn add @coders-tm/vue-number-format

Vue 2.0

npm install @coders-tm/[email protected]
or
yarn add @coders-tm/[email protected]

Features

  • Lightweight
  • Dependency free
  • Component or Directive flavour
  • Format as you type
  • Built-in validation

Documentation

Please refer to the project home page for a detailed documentation.

Comments
  • Will Reverse Fill work with vue 2.6?

    Will Reverse Fill work with vue 2.6?

    I am trying to use the Reverse Fill example in my Vue 2.6 by installing the @coders-tm/[email protected] for Vue 2.0

    but, Seems it is not compatible. Here the example which I am trying: https://vue-number-format.netlify.app/guide/example.html

    And how to get the original value? is there any way?

    opened by hanatharesh2712 6
  • Only add decimal doesn't update value

    Only add decimal doesn't update value

    Hello, im working on application with prefilled value input and i met this problem:

    It seems like add only a decimal does not trigger change event

    exemple:

    Capture d’écran de 2022-08-18 09-33-27

    I have 33, i want 3.3 by just adding a dot

    Capture d’écran de 2022-08-18 09-34-41

    and this is not updating

    opened by hugo33480 3
  • Error whit Vu3 (vite) and library

    Error whit Vu3 (vite) and library

    I have same code:

    import { Number } from "@coders-tm/vue-number-format";

    but i have this error from IDE:

    Could not find a declaration file for module '@coders-tm/vue-number-format'. 'C:/Users/username/folder1/projectfolder/node_modules/@coders-tm/vue-number-format/dist/index.cjs.js' implicitly has an 'any' type.
      Try `npm i --save-dev @types/coders-tm__vue-number-format` if it exists or add a new declaration (.d.ts) file containing `declare module '@coders-tm/vue-number-format';`ts(7016)
    
    opened by macJames976 3
  • Passing modelValue 0 returns null value instead of 0

    Passing modelValue 0 returns null value instead of 0

    Scenario: Passing 0 modelValue in input field Expected Result: 0 is emitted by @input:model-value Actual Result: null is emitted by @input:model-value

    https://github.com/coders-tm/vue-number-format/blob/c06a626fefa70c2dd4d3be39436bcfa743b41a8a/src/number-format.js#L123

    I think this check should be changed to not be falsy when input is 0, so it would do expected behaviour.

    enhancement 
    opened by Germain-condo-group 2
  • prefix and suffix props seem to be applied globally

    prefix and suffix props seem to be applied globally

    Adding a prefix or suffix prop to one <number> component applies it to all of them.

    <script setup>
    import {ref} from 'vue'
    import { number } from '@coders-tm/vue-number-format';
    
    const count = ref(5)
    const count2 = ref(3)
    </script>
    
    <template>
      <number prefix="$" v-model="count" />
      <number v-model="count2" />
    </template>
    
    Screen Shot 2022-08-11 at 9 34 46 pm

    Here I'd expect that the prefix would only appear on the first component only.

    opened by martinnobis 2
  • Unable to forward-type negative value

    Unable to forward-type negative value

    First of all: I really appreciate your efforts! This component is great!

    When user starts to type a negative value, the typing starts with a - sign naturally. I checked it on playground, and the negative sign does not appear. If there are digits already, and user press -, the value becomes negative. Btw the negative sign appears before the prefix, which seems to be incorrect.

    What do you think about this? (it would be great to have correct behavior in v2.x version, because I use the component in a legacy v2 environment. :(

    enhancement 
    opened by zssarkany 2
  • Null value results in error: string is null

    Null value results in error: string is null

    When the model value is null, it results in an uncaught error image

    C# doesn't accept empty string for Decimal? (nullable decimal). I guess I could manually change to empty string when receiving the data and changing back to Null before sending it

    opened by ww99w 1
  • Is it possible to get the updated value on every keystroke rather than when a change event is emitted?

    Is it possible to get the updated value on every keystroke rather than when a change event is emitted?

    The v-model variable is currently only updated when the change event occurs, but would it instead be possible to update at each keystroke? e.g. in the playground you can see that the new value only gets updated when the focus disappears from the input. Can we update it at each keystroke instead? Thanks.

    opened by martinnobis 1
  • can not delete anything when place caret after comma

    can not delete anything when place caret after comma

    in Playground, place caret after a comma and press backspace, nothing happen. However, when place caret before a comma and press Delete, caret go to after comma (which is good!)

    opened by minh91a1 1
  • caret position move to next one when delete first number

    caret position move to next one when delete first number

    in Playground, when I try to remove first number, the caret position will go to next postion. For example:

    case 1: current value: $1|,234.57 (caret now after 1 and before 2) press Backspace, it becomes: $2|34.57

    case 2: current value: $|1,234.57 (caret now after $ and before 1) press Delete, it becomes: $2|34.57

    I think in both case, caret should be between $ and 2 ( $|234.57 ).

    opened by minh91a1 1
  • Dependency not found after installing

    Dependency not found after installing

    I installed this on a Vue 2 project. And then imported it into the project as specified in the documentation.

    import number from "vue-number-format";
    
    // register directive v-number and component <number>
    Vue.use(number, { precision: 4 });
    

    I get dependency not found: 'vue-number-format'.

    I installed the version 2.1.1 and 2.1.0.

    I also attempted to import it as import number from "@coders-tm/vue-number-format". There was no error, but the functionality did not work.

    Am I missing something?

    opened by IDTitanium 1
Releases(v3.2.1)
Owner
CodersTM
CodersTM is a combination of a skilled and experienced team. Its members are also talented enough in their respective fields.
CodersTM
Easy input of currency formatted numbers for Vue.js.

Vue Currency Input The Vue Currency Input plugin allows an easy input of currency formatted numbers. It provides both a standalone component (<currenc

Matthias Stiller 456 Oct 2, 2022
Input mask library for vue.js based on credit-card-input-mask

vue-restricted-input Input mask for vue.js based on credit-card-input-mask Why ? credit-card-input-mask perfect work with carriage position, fast. Ins

Ivan Demidov 11 Nov 21, 2021
Tiny (2k gzipped) input/directive mask for currency

v-money Mask for Vue.js Features Lightweight (<2KB gzipped) Dependency free Mobile support Component or Directive flavors Accept copy/paste Editable F

Vue.js Tips 741 Sep 23, 2022
Input field component to display a formatted currency value based on Vue.js

vue-numeric Input field component to display a formatted currency value based on Vue. Live Demo Works with Vue 2.* Installation Install via CDN <scrip

Kevin Ongko 420 Sep 24, 2022
🔡 Tiny input mask library for Vue.js (directive)

?? Tiny input mask library for Vue.js (directive)

Max Liashuk 824 Sep 24, 2022
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Vue.js Tips 1.6k Sep 20, 2022
Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Alexander Shabunevich 451 Oct 6, 2022
Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

Text Mask 8.2k Sep 30, 2022
Restrict input s to certain valid characters (e.g. formatting phone or card numbers)

Restricted Input Allow restricted character sets in input elements. Demo Try the latest version of Restricted Input here. Features Disallow arbitrary

Braintree 64 Feb 10, 2022
vue-r-mask - Directive with template similar to javascript regular expression.

vue-r-mask mask directive for vue.js Template similar to javascript regular expression. /\d{2}/ Directive useful for your own input or textarea. Arbit

null 22 May 1, 2022
The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks. You can use patterns like: <input type="text" v-ma

Wirecard Brasil 164 Aug 3, 2022
Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Ankur Kumar 19 Mar 4, 2022
Vue-money-format: A lightweight display component for localized currency display

This is a lightweight display component for localized currency display. It has no dependencies other than Vue. It supports both float and integer input, and can adjust for values stored as decimal-based subunits, such as cents, dirham, groszy, etc. Storing currency values in terms of the subunit allows you to store integers, rather than floating numbers, which ensures accuracy.

null 15 Sep 22, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
🛡 Vue directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Nicolas Del Valle 14 Sep 15, 2022
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 39 Sep 23, 2022
A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade A lightweight and dependency free input masking library created specific for Vue Docs and Demo Installing npm i vue-input-facade yarn

Ronald Jerez 139 Sep 14, 2022
A Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options.

range-comp range-comp is Vue.js (>= 3.2) web component that wraps around an html input of type 'range' with label and styling options. range-comp can

null 0 May 9, 2022