Gathering detailed insights and metrics for kurob1993-vuetify-numeric
Numeric input component for use with vuetifyjs
Installations
npm install kurob1993-vuetify-numericDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
12.22.7
NPM Version
6.14.15
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
5
TypeScript
Vue
HTML
JavaScript
Shell
TypeScript (70.82%)
Vue (18.3%)
HTML (5.49%)
JavaScript (4.9%)
Shell (0.49%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
kurob1993
Download Statistics
Total Downloads
1,911
Last Day
1
Last Week
10
Last Month
77
Last Year
311
GitHub Statistics
86 Commits
1 Watching
4 Branches
1 Contributors
Maintainers
1
Package Meta Information
Latest Version
0.0.4
Package Id
kurob1993-vuetify-numeric@0.0.4
Unpacked Size
971.23 kB
Size
236.87 kB
File Count
9
NPM Version
6.14.15
Node Version
12.22.7
Total Downloads
Cumulative downloads
Total Downloads
1,911
Last day
0%
1
Compared to previous day
Last week
-60%
10
Compared to previous week
Last month
234.8%
77
Compared to previous month
Last year
-18.4%
311
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
24
@types/jest@typescript-eslint/eslint-plugin@typescript-eslint/parser@vue/cli-plugin-babel@vue/cli-plugin-eslint@vue/cli-plugin-typescript@vue/cli-plugin-unit-jest@vue/cli-service@vue/eslint-config-standard@vue/eslint-config-typescript@vue/test-utilseslinteslint-plugin-importeslint-plugin-nodeeslint-plugin-promiseeslint-plugin-standardeslint-plugin-vuenode-sasssasssass-loadertypescriptvue-cli-plugin-vuetifyvue-template-compilervuetify-loader
Versions
vuetify-numeric
Numeric input components for use with vuetifyjs.
Features
- Built-in calculator
- Smart numeric input
- Locale support number format
- Adjustable text color
- Groupping digits
- Right number alignement
- Show prefix (currency ...) near your number
- No thirdpatry solutions is used
- Vuetify VTextField compatible
Keyboard shortcuts
| Key | Action |
|---|---|
| Enter | Activate calculator or calculate your expression and close the calculator |
| Delete | Reset calculator |
| . or , | Swich your input between integer and fraction part of number |
| - | Change your input number sign |
Demo & Playground
See Live demo . or Codesandbox example codesandbox
The v-numeric component
The component extends the Vuetify v-text-field component.
How to use
Install the package:
yarn add vuetify-numeric
Add the package to your app entry point:
import VNumeric from 'vuetify-numeric/vuetify-numeric.umd.min'
Or (in develop case)
import VNumeric from 'vuetify-numeric/vuetify-numeric.umd'
Than, register this plugin
Vue.use(VNumeric)
Once the plugin has been installed, you can now use the v-numeric component in your templates.
Use v-model to bind to the value.
<template>
<v-numeric text outlined v-model="amount"></v-numeric>
</template>
<script>
export default {
data() {
return {
amount: 0,
};
},
};
</script>
Props:
| Prop | description | type | default |
|---|---|---|---|
| min | Sets minimum value | Number | - Number.MAX (infinity) |
| max | Sets maximum value | Number | Number.MAX (infinity) |
| length | Sets maximum number of digits | Number | 10 |
| precision | Number of digits after decimal point | Number | 0 |
| negativeTextColor | Text color when number is negative | String | red |
| locale | Current locale | String | en-US |
| useGrouping | use grouping digits | Boolean | true |
| elevation | Sets the calculator elevation | Number | 10 |
| fab | FAB-kind calculator's button | Boolean | false |
| text | use transparent background in calculator | Boolean | false |
| calcStyle | You can customize calculator's button style separately from input field. This is not mandatory. | object | undefined |
| calcIcon | You can customize calculator's icon. If it's undefined, the calculator icon does not appear. | string | 'mdi-calculator' |
| useCalculator | Turn on/off calculator usage. | boolean | true |
calcStyle object properties:
This object uses for customizing calculator buttons, and consist of the same Vuetify v-btn properies. For details, see official documentation
calcStyle: {
fab: false,
outlined: false,
rounded: false,
text: false,
tile: false,
large: false,
small: false
}
Anover props are derived from v-text-field component
Events:
@input: Emitted when value is changed after user input.
@change: Emitted formatted value as string when that is changed after user input.
CDN example:
You can use this library without installation, via cdn provider
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-row>
<v-numeric text outlined ></v-numeric>
</v-row>
<v-row>
<v-numeric text ></v-numeric>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify-numeric@0.1.x/vuetify-numeric.umd.min.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify({})
})
</script>
</body>
</html>
No vulnerabilities found.
No security vulnerabilities found.