Here's what I've been working on for the past week or so - my first ever public NPM package. https://github.com/JackSteel97/Nice-Numeric-Input
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.
Demo
Getting Started
Installation
> npm install nice-numeric-input
Usage
Import
import NiceNumericInput from 'nice-numeric-input'
Register
export default Vue.extend({
//...
components: { NiceNumericInput }
//...
});
For a full list of props see the Reference Props section.
<nice-numeric-input v-model="cashValue"
placeholder="Enter a cash value"
label="Cash"
name="example"
currency="GBP"
locale="en-GB"
:max="100"
:min="0" />
Reference
Props
| Prop | Type | Required | Default Value | Notes |
|---|---|---|---|---|
| value | Number |
Yes | 0 |
Use v-model to get two-way binding |
| id | String |
No | "nice-numeric-input" |
|
| name | String |
No | "nice-numeric-input" |
|
| label | String |
Yes | Required for accessibility, use hide-label to remove the visual label |
|
| placeholder | String |
No | ||
| step | Number |
No | 1 |
The amount to increase or decrease when using the step buttons |
| min | Number |
No | NEGATIVE_INFINITY |
Anything entered below this will fail the isValid check |
| max | Number |
No | POSITIVE_INFINITY |
Anything entered above this will fail the isValid check |
| isValid | Boolean |
No | Basic internal validation, use the .sync modifier to get changes |
|
| disabled | Boolean |
No | false |
Disable the entire component |
| locale | String |
No | `window.navigator.language \ | \ |
| currency | {% raw %}String
|
No | null |
When null currency formatting is turned off. Otherwise it can be any currency code e.g. USD, EUR, JPY
|
| minDecimalPlaces | Number |
No | 0 |
|
| maxDecimalPlaces | Number |
No | 2 |
|
| integerOnly | Boolean |
No | false |
Prevents decimal numbers being entered, entries are rounded to the nearest integer |
| noControls | Boolean |
No | false |
Removes the step buttons |
| hideLabel | Boolean |
No | false |
Removes the visual label |
| decreaseTitle | String |
No | "Decrease" |
The button title for accessibility |
| increaseTitle | String |
No | "Increase" |
The button title for accessibility |
| increaseText | String |
No | "+" |
The text displayed on the increase step button |
| decreaseText | String |
No | "-" |
The text displayed on the decrease step button |
| superIncreaseText | String |
No | "++" |
The text displayed on the increase step button when super step is active (Ctrl or Alt) |
| superDecreaseText | String |
No | "--" |
The text displayed on the decrease step button when super step is active (Ctrl or Alt) |
| ultraIncreaseText | String |
No | "+++" |
The text displayed on the increase step button when ultra step is active (Ctrl + Alt) |
| ultraDecreaseText | String |
No | "---" |
The text displayed on the decrease step button when ultra step is active (Ctrl + Alt) |
| superStep | Number |
No | 10 |
The amount to change during a super step |
| ultraStep | Number |
No | 100 |
The amount to change during an ultra step |
| labelClass | String |
No | A custom class to apply to the visual label | |
| inputClass | String |
No | A custom class to apply to the input field | |
| decreaseButtonClass | String |
No | A custom class to apply to the decrease step button | |
| increaseButtonClass | String |
No | A custom class to apply to the increase step button | |
| wrapperClass | String |
No | A custom class to apply to the top level component element | |
| superStepClass | String |
No | A custom class to apply to both step buttons when super step is active | |
| ultraStepClass | String |
No | A custom class to apply to both step buttons when ultra step is active |
Events
| Event | Emitted Type | Notes |
|---|---|---|
| input | Number |
Used automatically by a v-model binding. Can be bound manually, fires when the value is changed |
| update:isValid | Boolean |
Used automatically by the .sync modifier on isValid prop. Can be bound manually, fires when the valid value changes. |
Top comments (0)