# @smartweb/vue-number-input

> Vue number input component with great accessibility: ARIA, control by keyboard and wheel

Latest version **1.1.0** (published 2020-02-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @smartweb/vue-number-input
pnpm add @smartweb/vue-number-input
yarn add @smartweb/vue-number-input
bun add @smartweb/vue-number-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-02-22 |
| First published | 2019-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 58.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Roman Privalov |
| Maintainers | smartweb |
| Keywords | vue, vuejs, input number, number input, vue number, vue numeric, vue number input, vue numeric input, vue accessibility, vue input accessibility, vue number spinner, vue numberspinner |

## Links

- npm: https://www.npmjs.com/package/@smartweb/vue-number-input
- Repository: https://github.com/smwbtech/vue-number-input
- Homepage: https://smwbtech.github.io/vue-number-input/
- Issues: https://github.com/smwbtech/vue-number-input/issues
- npm.io page: https://npm.io/package/@smartweb/vue-number-input

## Alternatives

- [random-seedable](https://npm.io/package/random-seedable.md) — 27.9K weekly downloads
- [n2words](https://npm.io/package/n2words.md) — 22.2K weekly downloads
- [@stdlib/math-base-special-factorialln](https://npm.io/package/@stdlib/math-base-special-factorialln.md) — 5.7K weekly downloads
- [@stdlib/math-base-special-abs2](https://npm.io/package/@stdlib/math-base-special-abs2.md) — 1.7K weekly downloads
- [commons-math-interpolation](https://npm.io/package/commons-math-interpolation.md) — 1.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-02-22
- 1.0.10 — 2020-02-22
- 1.0.9 — 2020-02-22
- 1.0.6 — 2019-08-29
- 1.0.5 — 2019-08-28
- 1.0.4 — 2019-08-28
- 1.0.3 — 2019-08-27
- 1.0.2 — 2019-08-27
- 1.0.1 — 2019-08-27

## README

# @smartweb/vue-number-input

[![vue](https://img.shields.io/badge/Vue-2.x-green.svg)](https://vuejs.org/index.html)
[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/smwbtech/vue-flash-message/blob/master/LICENSE.md)
[![Build Status](https://travis-ci.org/smwbtech/vue-number-input.svg?branch=master)](https://travis-ci.org/smwbtech/vue-number-input)
[![Coverage Status](https://coveralls.io/repos/github/smwbtech/vue-number-input/badge.svg?branch=master)](https://coveralls.io/github/smwbtech/vue-number-input?branch=master)
[![Size](https://badgen.net/bundlephobia/minzip/@smartweb/vue-number-input@latest)](https://bundlephobia.com/result?p=@smartweb/vue-number-input@latest)

Vue component for numbers input.

-   Accessible: uses ARIA agreements (100% accessibility in lighthouse)
-   Use your keyboard to navigate and control
-   Use your mousewheel or touchpad to increase or descrease value
-   Flexible styling
-   Support custom controls through slots

#### [Live Demo](https://smwbtech.github.io/vue-number-input/)

## Download

Use npm

```
npm i @smartweb/vue-number-input
```

Or via cdn

```html
<script src="https://unpkg.com/@smartweb/vue-number-input/build/vue-number-input.umd.min.js"></script>
```

## Configuration

Import and register in your component.vue file

```javascript
import VueNumberInput from '@smartweb/vue-number-input';

export default {
	components: {
		VueNumberInput
	}
};
```

Use it in your template with v-model directive

```html
<template>
	<div id="app">
		<VueNumberInput
			v-model="you_model"
			:min="0"
			:max="100"
		></VueNumberInput>
	</div>
</template>
```

Or register it globally in your application entry point (main.js or as you called it)

```javascript
import Vue from 'vue';
import VueNumberInput from '@smartweb/vue-number-input';
// Global registration of the component
Vue.component('vue-number-input', VueNumberInput);

new Vue({
	render: h => h(App)
}).$mount('#app');
```

## Usage

You can bind following props for vue-input-number element

| Prop                 |    Type     |      Default value      |                                                   Description                                                    |
| -------------------- | :---------: | :---------------------: | :--------------------------------------------------------------------------------------------------------------: |
| **value**            | **Number**  |            0            |                 Defines a value for 'value' and 'aria-valuenow' attributes of <input/> element.                  |
| **min**              | **Number**  | Number.MIN_SAFE_INTEGER |     Minimum value of the number range. Provides a value for 'aria-valuemin' attributes of <input/> element.      |
| **max**              | **Number**  | Number.MAX_SAFE_INTEGER |     Maximum value of the number range. Provides a value for 'aria-valuemax' attributes of <input/> element.      |
| **step**             | **Number**  |            1            |                                                 Incremental step                                                 |
| **disabled**         | **Boolean** |          false          | Defines a value for 'aria-disabled' and 'disabled' attributes of <input/> element. Also disable controls buttons |
| **readonly**         | **Boolean** |          false          |                          Defines a value for 'readonly' attribute of <input/> element.                           |
| **autofocus**        | **Boolean** |          false          |                          Defines a value for 'autofocus' attribute of <input/> element.                          |
| **controlsPosition** | **String**  |        'on edge'        |               Acceptable values: 'on edges', 'left', right'. Defines position of control buttons.                |
| **inputClass**       | **String**  |            -            |                                      Defines user's class for input element                                      |
| **buttonIncClass**   | **String**  |            -            |                                     Defines user's class for increase button                                     |
| **buttonDecClass**   | **String**  |            -            |                                     Defines user's class for decrease button                                     |

#### Example

```html
<vue-number-input
	v-model="you_model"
	:value="50"
	:min="0"
	:max="100"
	:controlsPosition="'left'"
/>
```

For more examples visit **[demo page](https://smwbtech.github.io/vue-number-input/)**

#### Your own controls through slot

You can create your own controls and pass them to slots  
Read more about slots in [official docs](https://vuejs.org/v2/guide/components-slots.html)

```html
<vue-number-input
	class="custom-container"
	v-model="you_model"
	:inputClass="custom-input"
	:buttonIncClass="custom-btn-inc"
	:buttonDecClass="custom-btn-dec"
>
	<!-- slot for decrease button -->
	<template #button-decrease>
		<custom-decrease-button></custom-decrease-button>
	</template>

	<!-- slot for increase button -->
	<template #button-increase>
		<custom-increase-button></custom-increase-button>
	</template>
</vue-number-input>
```

### Events

|   Event    |                       Description                        |   Params   |
| :--------: | :------------------------------------------------------: | :--------: |
| **input**  |        Triggered on user input or buttons clicks         |   Number   |
| **change** | Triggered on value changed and focus leave input element |   Number   |
| **focus**  |        Triggered when user focused on input field        | FocusEvent |
|  **blur**  |          Triggered when focus leave input field          | FocusEvent |

## LICENSE

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

---
_Source: https://npm.io/package/@smartweb/vue-number-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._