StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
StackGenVis/frontend/node_modules/vue-numeric/README.md

168 lines
4.7 KiB

4 years ago
# 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
<script src="https://unpkg.com/accounting-js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric"></script>
<script>
Vue.use(VueNumeric.default)
</script>
```
### 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
<template>
<vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
</template>
<script>
import VueNumeric from 'vue-numeric'
export default {
name: 'App',
components: {
VueNumeric
},
data: () => ({
price: ''
}),
}
</script>
```
### Currency symbol
Set the `currency` prop to add a currency symbol within the input.
```vue
<vue-numeric currency="$"></vue-numeric>
```
### 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
<vue-numeric v-bind:min="2000" v-bind:max="10000"></vue-numeric>
```
### Disable/enable negative values
`minus` defaults to `false` (no negative numbers).
```vue
<vue-numeric v-bind:minus="false"></vue-numeric>
```
### 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
<vue-numeric v-bind:precision="2"></vue-numeric>
```
### 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
<vue-numeric separator="."></vue-numeric>
```
### Input placeholder when empty
```vue
<vue-numeric placeholder="only number allowed"></vue-numeric>
```
### 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
<vue-numeric :empty-value="1"></vue-numeric>
```
### 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
<vue-numeric output-type="String"></vue-numeric>
```
## 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)