# vue-numeric [![npm](https://img.shields.io/npm/v/vue-numeric.svg)](https://www.npmjs.com/package/vue-numeric) [![npm](https://img.shields.io/npm/dt/vue-numeric.svg)](https://www.npmjs.com/package/vue-numeric) [![npm](https://img.shields.io/npm/dm/vue-numeric.svg)](https://www.npmjs.com/package/vue-numeric) [![Build Status](https://travis-ci.org/kevinongko/vue-numeric.svg?branch=master)](https://travis-ci.org/kevinongko/vue-numeric) [![Codecov](https://img.shields.io/codecov/c/github/kevinongko/vue-numeric.svg)](https://codecov.io/gh/kevinongko/vue-numeric) [![npm](https://img.shields.io/npm/l/vue-numeric.svg)](http://opensource.org/licenses/MIT) Input field component to display a formatted currency value based on [Vue](https://vuejs.org/). [Live Demo](https://kevinongko.github.io/vue-numeric/) **Works with Vue 2.*** ## Installation ### Install via CDN ```html ``` ### Install via NPM ```sh $ npm install vue-numeric --save ``` #### Register as Component ```js import Vue from 'vue' import VueNumeric from 'vue-numeric' export default { name: 'App', components: { VueNumeric } } ``` #### Register as Plugin ```js import Vue from 'vue' import VueNumeric from 'vue-numeric' Vue.use(VueNumeric) ``` ## Usage ![screen shot 2016-12-08 at 2 19 31 pm](https://cloud.githubusercontent.com/assets/15880638/21001265/f2322438-bd51-11e6-8985-f31a45702484.png) ### Quick example ```vue ``` ### Currency symbol Set the `currency` prop to add a currency symbol within the input. ```vue ``` ### Minimum & maximum constraint Limit the minimum and maximum value by using `min` and `max` props. - `min` defaults to `0`. - `min` and `max` accept `String` or `Number` values. ```vue ``` ### Disable/enable negative values `minus` defaults to `false` (no negative numbers). ```vue ``` ### Enable decimal precision By default the decimal value is disabled. To use decimals in the value, add the `precision` prop. - `precision` accept a `String` or `Number` numeric value. ```vue ``` ### Thousands separator - Default thousand separator's symbol is `,`. - Use the `separator` prop to change the thousands separator. - `separator` only accepts `space`, `,` or `.`. - When using the `.` or `space` as thousand separator, the decimal separator will be `,`. ```vue ``` ### Input placeholder when empty ```vue ``` ### Value when empty By default, when you clean the input the value is set to `0`. You can change this value to fit your needs. ```vue ``` ### Output Type By default the value emitted for the input event is of type `Number`. However you may choose to get a `String` instead by setting the property `output-type` to `String`. ```vue ``` ## Props |Props|Description|Required|Type|Default| |-----|-----------|--------|----|-------| |currency|Currency prefix|false|String|-| |currency-symbol-position|Position of the symbol (accepted values: `prefix` or `suffix`)|false|String|`prefix`| |max|Maximum value allowed|false|Number|9007199254740991| |min|Minimum value allowed|false|Number|-9007199254740991| |minus|Enable/disable negative values|false|Boolean|`false`| |placeholder|Input placeholder|false|String|-| |empty-value|Value when input is empty|false|Number|0| |output-type|Output Type for input event|false|String|`String`| |precision|Number of decimals|false|Number|-| |separator|Thousand separator symbol (accepts `space`, `.` or `,`)|false|String|`,`| |decimal-separator|Custom decimal separator|false|String|-| |thousand-separator|Custom thousand separator|false|String|-| |read-only|Hide input field and show the value as text|false|Boolean|false| |read-only-class|Class for read-only element|false|String|''| ## License Vue-Numeric is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT)