Skip to content

Commit 3692979

Browse files
author
Dipak Sarkar
committed
added docs
1 parent fcdd2ec commit 3692979

File tree

9 files changed

+228
-227
lines changed

9 files changed

+228
-227
lines changed

‎README.md‎

Lines changed: 3 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# vue-number-format
2-
2+
Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of digits to the right of the decimal.
33
## Features
44

55
- Lightweight < 2kb
@@ -9,95 +9,6 @@
99
- Accept copy/paste
1010
- Editable
1111

12-
## Demo
13-
[https://coders-tm.github.io/vue-number-format/](https://coders-tm.github.io/vue-number-format/)
14-
## Usage
15-
16-
### A. Globally
17-
18-
```js
19-
import Vue from 'vue'
20-
import number from 'vue-number-format'
21-
22-
// register directive v-number and component <number>
23-
Vue.use(number, {precision: 4})
24-
```
25-
26-
### B. Use as component
27-
28-
```html
29-
<template>
30-
<div>
31-
<number v-model="price" v-bind="number"></number> {{price}}
32-
</div>
33-
</template>
34-
35-
<script>
36-
import { Number } from 'vue-number-format'
37-
38-
export default {
39-
components: {
40-
Number
41-
},
42-
43-
data () {
44-
return {
45-
price: 123.45,
46-
number: {
47-
decimal: '.',
48-
separator: ',',
49-
prefix: '$ ',
50-
suffix: ' #',
51-
precision: 2,
52-
masked: false
53-
}
54-
}
55-
}
56-
}
57-
</script>
58-
```
59-
60-
### C. Use as directive
61-
Must use `vmodel.lazy` to bind works properly.
62-
```html
63-
<template>
64-
<div>
65-
<input v-model.lazy="price" v-number="number" /> {{price}}
66-
</div>
67-
</template>
68-
69-
<script>
70-
import { VNumber } from 'vue-number-format'
71-
72-
export default {
73-
data () {
74-
return {
75-
price: 123.45,
76-
number: {
77-
decimal: '.',
78-
separator: ',',
79-
prefix: '$ ',
80-
suffix: ' #',
81-
precision: 2,
82-
masked: false /* doesn't work with directive */
83-
}
84-
}
85-
},
86-
87-
directives: {
88-
number: VNumber
89-
}
90-
}
91-
</script>
92-
```
93-
94-
## Properties
12+
## Documentation
13+
Please refer to the [project home page](https://coders-tm.github.io/vue-number-format/) for a detailed documentation.
9514

96-
| property | Required | Type | Default | Description |
97-
|-----------|----------|---------|---------|---------------------------------------------------------|
98-
| precision | false | Number | 2 | How many decimal places |
99-
| decimal | false | String | "." | Decimal separator |
100-
| separator | false | String | "," | Thousands separator |
101-
| prefix | false | String | "" | Currency symbol followed by a Space, like "$ " |
102-
| suffix | false | String | "" | Percentage for example: " %" |
103-
| masked | false | Boolean | false | If the component output should include the mask or not |

‎docs/.vuepress/components/Example.vue‎

Lines changed: 80 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,91 @@
11
<template>
2-
<div class="row q-col-gutter-lg">
3-
<div class="col-sm-8 col-sx-12">
4-
<q-list class="q-gutter-y-sm">
5-
<div class="column">
6-
<div class="text-h6">Component</div>
7-
<q-field
8-
dense
9-
outlined
10-
>
11-
<template v-slot:control>
12-
<number
13-
class="q-field__input"
14-
v-model="price"
15-
v-bind="config"
16-
/>
17-
</template>
18-
</q-field>
19-
<div>Model value: <span class="text-bold">{{price}}</span></div>
20-
</div>
21-
<div class="column">
22-
<div class="text-h6">Directive</div>
23-
<q-field
24-
dense
25-
outlined
26-
hint="masking doesn't work with directive"
27-
>
28-
<template v-slot:control>
29-
<input
30-
type="tel"
31-
class="q-field__input"
32-
v-number="config"
33-
v-model="priceDirective"
34-
/>
35-
</template>
36-
</q-field>
37-
<div>Model value: <span class="text-bold">{{priceDirective}}</span></div>
38-
</div>
39-
<div class="column">
40-
<div class="text-h6">Directive on Custom Component of <a href="https://quasar.dev/vue-components/input" target="_blank">QInput</a></div>
41-
<q-input
42-
dense
43-
outlined
44-
v-model="priceUnmasked"
45-
v-number="config"
46-
/>
47-
<div>Model value: <span class="text-bold">{{priceUnmasked}}</span></div>
48-
</div>
49-
</q-list>
2+
<div class="row q-col-gutter-lg">
3+
<div class="col-sm-8 col-sx-12">
4+
<q-list :dark="false" class="q-gutter-y-sm">
5+
<div class="column">
6+
<div class="text-h6">Component</div>
7+
<q-field
8+
:dark="false"
9+
dense
10+
outlined
11+
>
12+
<template v-slot:control>
13+
<number
14+
class="q-field__input"
15+
v-model="price"
16+
v-bind="config"
17+
/>
18+
</template>
19+
</q-field>
20+
<div>Model value: <span class="text-bold">{{price}}</span></div>
5021
</div>
51-
<div class="col-sm-4 col-sx-12">
52-
<q-list class="q-gutter-y-sm">
53-
<q-input dense v-model="config.prefix" type="text" label="Prefix" />
54-
<q-input dense v-model="config.suffix" type="text" label="Suffix" />
55-
<q-input dense v-model.number="config.precision" type="number" min="0" max="5" label="Precision" />
56-
<q-input dense v-model="config.decimal" type="text" label="Decimal" />
57-
<q-input dense v-model="config.separator" type="text" label="Separator" />
58-
<q-checkbox dense v-model="config.masked" label="Masked" />
59-
</q-list>
22+
<div class="column">
23+
<div class="text-h6">Directive</div>
24+
<q-field
25+
:dark="false"
26+
dense
27+
outlined
28+
hint="masking doesn't work with directive"
29+
>
30+
<template v-slot:control>
31+
<input
32+
type="tel"
33+
class="q-field__input"
34+
v-number="config"
35+
v-model="priceDirective"
36+
/>
37+
</template>
38+
</q-field>
39+
<div>Model value: <span class="text-bold">{{priceDirective}}</span></div>
6040
</div>
41+
<div class="column">
42+
<div class="text-h6">Directive on Custom Component of <a href="https://quasar.dev/vue-components/input" target="_blank">QInput</a></div>
43+
<q-input
44+
:dark="false"
45+
dense
46+
outlined
47+
v-model="priceUnmasked"
48+
v-number="config"
49+
/>
50+
<div>Model value: <span class="text-bold">{{priceUnmasked}}</span></div>
51+
</div>
52+
</q-list>
53+
</div>
54+
<div class="col-sm-4 col-sx-12">
55+
<q-list :dark="false" class="q-gutter-y-sm">
56+
<q-input :dark="false" dense v-model="config.prefix" type="text" label="Prefix" />
57+
<q-input :dark="false" dense v-model="config.suffix" type="text" label="Suffix" />
58+
<q-input :dark="false" dense v-model.number="config.precision" type="number" min="0" max="5" label="Precision" />
59+
<q-input :dark="false" dense v-model="config.decimal" type="text" label="Decimal" />
60+
<q-input :dark="false" dense v-model="config.separator" type="text" label="Separator" />
61+
<q-checkbox :dark="false" dense v-model="config.masked" label="Masked" />
62+
</q-list>
6163
</div>
64+
</div>
6265
</template>
6366

6467
<script>
6568
export default {
66-
data () {
67-
return {
68-
price: 0,
69-
priceDirective: 5432.1,
70-
priceUnmasked: 6789.10,
71-
config: {
72-
decimal: '.',
73-
separator: ',',
74-
prefix: '$',
75-
suffix: '%',
76-
precision: 2,
77-
masked: false
78-
}
79-
}
80-
},
81-
methods: {
82-
change (evt) {
83-
console.log('change', evt.target.value);
84-
}
69+
data () {
70+
return {
71+
price: 0,
72+
priceDirective: 5432.1,
73+
priceUnmasked: 6789.10,
74+
config: {
75+
decimal: '.',
76+
separator: ',',
77+
prefix: '$',
78+
suffix: '%',
79+
precision: 2,
80+
masked: false
81+
}
82+
}
83+
},
84+
methods: {
85+
change (evt) {
86+
console.log('change', evt.target.value);
8587
}
88+
}
8689
}
8790
</script>
8891

@@ -91,4 +94,4 @@ export default {
9194
min-width: 800px;
9295
max-width: 95vw;
9396
}
94-
</style>
97+
</style>

‎docs/.vuepress/config.js‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,37 +33,18 @@ module.exports = {
3333
docsDir: 'docs',
3434
editLinkText: '',
3535
lastUpdated: true,
36-
nav: [
37-
{
38-
text: 'Guide',
39-
link: '/guide/',
40-
},
41-
{
42-
text: 'Config',
43-
link: '/config/'
44-
}
45-
],
4636
sidebar: {
4737
'/guide/': [
4838
{
4939
title: 'Guide',
5040
collapsable: false,
5141
children: [
5242
'',
53-
'using-vue',
43+
'config',
5444
'example',
5545
]
5646
}
57-
],
58-
'/config/': [
59-
{
60-
title: 'Config',
61-
collapsable: false,
62-
children: [
63-
'',
64-
]
65-
}
66-
],
47+
]
6748
}
6849
},
6950

‎docs/.vuepress/enhanceApp.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,21 @@
44
* https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
55
*/
66

7-
import Quasar from 'quasar'
87
import number from '../../'
9-
8+
import Quasar from 'quasar'
109
import 'quasar/dist/quasar.min.css'
10+
1111
export default ({
1212
Vue, // the version of Vue being used in the VuePress app
1313
options, // the options for the root Vue instance
1414
router, // the router instance for the app
1515
siteData // site metadata
1616
}) => {
1717
// ...apply enhancements for the site.
18-
Vue.use(Quasar)
18+
Vue.use(Quasar, {
19+
config: {
20+
dark: false // or Boolean true/false
21+
}
22+
})
1923
Vue.use(number)
2024
}

‎docs/config/README.md‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

0 commit comments

Comments
 (0)