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.
168 lines
4.7 KiB
168 lines
4.7 KiB
4 years ago
|
# vue-numeric
|
||
|
|
||
|
[](https://www.npmjs.com/package/vue-numeric)
|
||
|
[](https://www.npmjs.com/package/vue-numeric)
|
||
|
[](https://www.npmjs.com/package/vue-numeric)
|
||
|
[](https://travis-ci.org/kevinongko/vue-numeric)
|
||
|
[](https://codecov.io/gh/kevinongko/vue-numeric)
|
||
|
[](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
|
||
|
|
||
|

|
||
|
|
||
|
### 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)
|