Auto Currency Format - Nice-Numeric-Input

Install & Download:

# NPM
$ npm i nice-numeric-input

Description:

An enhanced numeric input component that allows auto currency formatting (and validation) in a text field.

How to use it:

1. Import and register the component.

import NiceNumericInput from 'nice-numeric-input'
export default Vue.extend({
  components: { NiceNumericInput }
});

2. Add the nice numeric input component to the template.

<nice-numeric-input v-model="cashValue"
  placeholder="Enter here"
  label="Cash"
  name="example"
  currency="USD"
  locale="en-US"
  :max="10"
  :min="0" />

3. Available component props.

value: { type: Number, default: 0 },
id: { type: String, default: "nice-numeric-input" },
name: { type: String, default: "nice-numeric-input" },
label: { type: String, required: true },
placeholder: { type: String, default: "" },
step: { type: Number, default: 1 },
min: { type: Number, default: Number.NEGATIVE_INFINITY },
max: { type: Number, default: Number.POSITIVE_INFINITY },
isValid: { type: Boolean, default: false, required: false },
disabled: { type: Boolean, default: false },
locale: { type: String, default: null },
currency: { type: String, default: null },
minDecimalPlaces: { type: Number, default: 0 },
maxDecimalPlaces: { type: Number, default: 2 },
integerOnly: { type: Boolean, default: false },
noControls: { type: Boolean, default: false },
hideLabel: { type: Boolean, default: false },
decreaseTitle: { type: String, default: "Increase" },
increaseTitle: { type: String, default: "Decrease" },
increaseText: { type: String, default: "+" },
decreaseText: { type: String, default: "-" },
superIncreaseText: { type: String, default: "++" },
superDecreaseText: { type: String, default: "--" },
ultraIncreaseText: { type: String, default: "+++" },
ultraDecreaseText: { type: String, default: "---" },
superStep: { type: Number, default: 10 },
ultraStep: { type: Number, default: 100 },
labelClass: { type: String, default: null },
inputClass: { type: String, default: null },
decreaseButtonClass: { type: String, default: null },
increaseButtonClass: { type: String, default: null },
wrapperClass: { type: String, default: null },
superStepClass: { type: String, default: "" },
ultraStepClass: { type: String, default: "" }