Skip to content

Commit fdd556f

Browse files
codermarcoscodermarcos
authored
Merge pull request #22 from codermarcos/feature/#13
Pending tasks
2 parents 4c38add + 7d9e9e3 commit fdd556f

File tree

109 files changed

+22623
-1455
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

109 files changed

+22623
-1455
lines changed

‎.eslintignore‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
./lib
2-
lib
3-
simple-mask-money.js
4-
simple-mask-money.js.map
1+
./examples
2+
./lib
3+
lib
4+
simple-mask-money.js
5+
simple-mask-money.js.map

‎.nyc_output/36bddd30e3d6a2126148eb3a3136277d.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎.nyc_output/b382ac8f9d89af79ac0d6772386dce4f.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎.nyc_output/ee7535375f6baca565c795ccab07ff5f.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md‎

Lines changed: 137 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,137 @@
1-
<h1 align="center">SimpleMaskMoney</h1>
2-
3-
<p align="center">
4-
<a class="badge-align" href="https://nodei.co/npm/simple-mask-money/">
5-
<img src="https://nodei.co/npm/simple-mask-money.png?downloads=true&downloadRank=true" alt="NPM"></a>
6-
</p>
7-
8-
<p align="center">
9-
<a class="badge-align" href="https://travis-ci.org/codermarcos/simple-mask-money"><img src="https://travis-ci.org/codermarcos/simple-mask-money.svg?branch=master" alt="build Status"/></a>
10-
11-
<a class="badge-align" href="https://badge.fury.io/js/simple-mask-money">
12-
<img src="https://badge.fury.io/js/simple-mask-money.svg" alt="npm version"></a>
13-
14-
<a class="badge-align" href="https://www.npmjs.com/package/simple-mask-money">
15-
<img src="https://img.shields.io/npm/dm/simple-mask-money.svg" alt="npm Downloads"></a>
16-
17-
<a class="badge-align" href="https://www.codacy.com/app/codermarcos/simple-mask-money?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=codermarcos/simple-mask-money&amp;utm_campaign=Badge_Grade">
18-
<img src="https://api.codacy.com/project/badge/Grade/ee8f87689ae749b1822499995ef8d1d2" alt="Codacy Badge"></a>
19-
20-
<a class="badge-align" href="https://opensource.org/licenses/Apache-2.0">
21-
<img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
22-
</p>
23-
24-
<p align="center">
25-
Simple money mask developed with pure JavaScript. To run on <b>Client Side</b> and <b>Server Side</b>.
26-
<a href="https://codermarcos.github.io/simple-mask-money/">Try <b>live demo</b></a>
27-
</p>
28-
29-
## Getting Started
30-
31-
First, install it.
32-
33-
```shell
34-
npm i simple-mask-money --save
35-
```
36-
37-
Or use direct of github release
38-
39-
```html
40-
<script src="https://github.com/codermarcos/simple-mask-money/releases/download/<RELEASE_VERSION_HERE>/simple-mask-money.js"></script>
41-
```
42-
43-
> remember change **<RELEASE_VERSION_HERE>** by the [last version](https://github.com/codermarcos/simple-mask-money/releases/latest)
44-
45-
Read the [docs](docs/#readme) or chose your implementation:
46-
47-
* [Javascript](examples/javascript/#readme)
48-
* [Angular](examples/angular#readme)
49-
* [React](examples/react#readme)
50-
* [Node](examples/node#readme)
51-
* [Vue](examples/vue#readme)
52-
53-
Then, follow the example to use in your browser:
54-
55-
```html
56-
<body>
57-
<!--
58-
Put inputmode numeric to mobile show only numbers
59-
-->
60-
<input id="myInput" inputmode="numeric" value="0,00">
61-
62-
<script src="./node_modules/simple-mask-money/lib/simple-mask-money.js"></script>
63-
<script>
64-
65-
// configuration
66-
const args = {
67-
allowNegative: false,
68-
negativeSignAfter: false,
69-
prefix: '',
70-
suffix: '',
71-
fixed: true,
72-
fractionDigits: 2,
73-
decimalSeparator: ',',
74-
thousandsSeparator: '.',
75-
cursor: 'move'
76-
};
77-
78-
// select the element
79-
const input = SimpleMaskMoney.setMask('#myInput', args);
80-
81-
// This method return value of your input in format number to save in your database
82-
input.formatToNumber();
83-
84-
</script>
85-
</body>
86-
```
87-
88-
Or if you prefer use the methods in your events
89-
90-
```html
91-
<body>
92-
<!--
93-
Put inputmode numeric to mobile show only numbers
94-
-->
95-
<input inputmode="numeric" value="0,00">
96-
97-
<script src="./node_modules/simple-mask-money/lib/simple-mask-money.js"></script>
98-
<script>
99-
// select the element
100-
let input = document.getElementsByTagName('input')[0];
101-
102-
// configuration
103-
SimpleMaskMoney.args = {
104-
allowNegative: false,
105-
negativeSignAfter: false,
106-
prefix: '',
107-
suffix: '',
108-
fixed: true,
109-
fractionDigits: 2,
110-
decimalSeparator: ',',
111-
thousandsSeparator: '.',
112-
cursor: 'move'
113-
};
114-
115-
input.oninput = () => {
116-
input.value = SimpleMaskMoney.format(input.value);
117-
}
118-
119-
// Your send method
120-
input.onkeyup = (e) => {
121-
if (e.key !== "Enter") return;
122-
// This method return value of your input in format number to save in your database
123-
SimpleMaskMoney.formatToNumber(input.value);
124-
}
125-
</script>
126-
</body>
127-
```
1+
<h1 align="center">SimpleMaskMoney</h1>
2+
<h3 align="center"><b>WARNING</b></h3>
3+
<h5 align="center">
4+
if you are having problems check the version you are using.
5+
<a href="docs/#2.x.x">
6+
The docs to old (2.x.x) version stay <b>here</b>
7+
</a>
8+
</h5>
9+
<p align="center">
10+
<a class="badge-align" href="https://nodei.co/npm/simple-mask-money/">
11+
<img src="https://nodei.co/npm/simple-mask-money.png?downloads=true&downloadRank=true" alt="NPM"></a>
12+
</p>
13+
14+
<p align="center">
15+
<a class="badge-align" href="https://travis-ci.org/codermarcos/simple-mask-money"><img src="https://travis-ci.org/codermarcos/simple-mask-money.svg?branch=master" alt="build Status"/></a>
16+
17+
<a class="badge-align" href="https://badge.fury.io/js/simple-mask-money">
18+
<img src="https://badge.fury.io/js/simple-mask-money.svg" alt="npm version"></a>
19+
20+
<a class="badge-align" href="https://www.npmjs.com/package/simple-mask-money">
21+
<img src="https://img.shields.io/npm/dm/simple-mask-money.svg" alt="npm Downloads"></a>
22+
23+
<a class="badge-align" href="https://www.codacy.com/app/codermarcos/simple-mask-money?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=codermarcos/simple-mask-money&amp;utm_campaign=Badge_Grade">
24+
<img src="https://api.codacy.com/project/badge/Grade/ee8f87689ae749b1822499995ef8d1d2" alt="Codacy Badge"></a>
25+
26+
<a class="badge-align" href="https://opensource.org/licenses/Apache-2.0">
27+
<img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" alt="License"></a>
28+
</p>
29+
30+
<p align="center">
31+
Simple money mask developed with pure JavaScript. To run on <b>Client Side</b> and <b>Server Side</b>.
32+
<a href="https://codermarcos.github.io/simple-mask-money/">Try <b>live demo</b></a>
33+
</p>
34+
35+
## Getting Started
36+
37+
First, install it.
38+
39+
```shell
40+
npm i simple-mask-money --save
41+
```
42+
43+
Or use direct of github release
44+
45+
```html
46+
<script src="https://github.com/codermarcos/simple-mask-money/releases/download/<RELEASE_VERSION_HERE>/simple-mask-money.js"></script>
47+
```
48+
49+
> remember change **<RELEASE_VERSION_HERE>** by the [last version](https://github.com/codermarcos/simple-mask-money/releases/latest)
50+
51+
Read the [docs](docs/#readme) or chose your implementation:
52+
53+
* [Javascript](examples/3.x.x/javascript/#readme)
54+
* [Angular](examples/3.x.x/angular#readme)
55+
* [React](examples/3.x.x/react#readme)
56+
* [Node](examples/3.x.x/node#readme)
57+
* [Vue](examples/3.x.x/vue#readme)
58+
59+
Then, follow the example to use in your browser:
60+
61+
```html
62+
<body>
63+
<!--
64+
Put inputmode numeric to mobile show only numbers
65+
-->
66+
<input id="myInput" inputmode="numeric" value="0,00">
67+
68+
<script src="./node_modules/simple-mask-money/lib/simple-mask-money.js"></script>
69+
<script>
70+
71+
// configuration
72+
const args = {
73+
afterFormat(e) { console.log('afterFormat', e); },
74+
allowNegative: false,
75+
beforeFormat(e) { console.log('beforeFormat', e); },
76+
negativeSignAfter: false,
77+
prefix: '',
78+
suffix: '',
79+
fixed: true,
80+
fractionDigits: 2,
81+
decimalSeparator: ',',
82+
thousandsSeparator: '.',
83+
cursor: 'move'
84+
};
85+
86+
// select the element
87+
const input = SimpleMaskMoney.setMask('#myInput', args);
88+
89+
// This method return value of your input in format number to save in your database
90+
input.formatToNumber();
91+
92+
</script>
93+
</body>
94+
```
95+
96+
Or if you prefer use the methods in your events
97+
98+
```html
99+
<body>
100+
<!--
101+
Put inputmode numeric to mobile show only numbers
102+
-->
103+
<input inputmode="numeric" value="0,00">
104+
105+
<script src="./node_modules/simple-mask-money/lib/simple-mask-money.js"></script>
106+
<script>
107+
// select the element
108+
let input = document.getElementsByTagName('input')[0];
109+
110+
// configuration
111+
SimpleMaskMoney.args = {
112+
afterFormat(e) { console.log('afterFormat', e); },
113+
allowNegative: false,
114+
beforeFormat(e) { console.log('beforeFormat', e); },
115+
negativeSignAfter: false,
116+
prefix: '',
117+
suffix: '',
118+
fixed: true,
119+
fractionDigits: 2,
120+
decimalSeparator: ',',
121+
thousandsSeparator: '.',
122+
cursor: 'move'
123+
};
124+
125+
input.oninput = () => {
126+
input.value = SimpleMaskMoney.format(input.value);
127+
}
128+
129+
// Your send method
130+
input.onkeyup = (e) => {
131+
if (e.key !== "Enter") return;
132+
// This method return value of your input in format number to save in your database
133+
SimpleMaskMoney.formatToNumber(input.value);
134+
}
135+
</script>
136+
</body>
137+
```

‎docs/2.x.x/README.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Documentation SimpleMaskMoney 2.x.x
2+
3+
The ```SimpleMaskMoney``` class hosts three methods for formatting the values and one property to configure the formatting.
4+
5+
## SimpleMaskMoney.args
6+
7+
**.args** is the property, of type object that sets the formatting:
8+
9+
```javascript
10+
// Default args
11+
SimpleMaskMoney.args = {
12+
allowNegative: false,
13+
negativeSignAfter: false,
14+
prefix: '',
15+
suffix: '',
16+
fixed: true,
17+
fractionDigits: 2,
18+
decimalSeparator: ',',
19+
thousandsSeparator: '.',
20+
cursor: 'move'
21+
};
22+
```
23+
24+
The **args** they are:
25+
26+
- **allowNegative**: boolean > *This boolean define if allow values ​​below zero*
27+
- **negativeSignAfter**: boolean > *This boolean define if negative sign stay after the number*
28+
- **prefix**: string > *This string always precedes its value*
29+
- **suffix**: string > *This string always procedes its value*
30+
- **fixed**: boolean > *This boolean define if your value can be empty or always should have value*
31+
- **fractionDigits**: number > *This number define the quantity of decimals digits*
32+
- **decimalSeparator**: string > *This string define the separator of decimals digits*
33+
- **thousandsSeparator**: string > *This string define the separator of thousands digits*
34+
- **cursor**: string > *This string define how the cursor will move. Can be `move`, `end`, or `start`.*
35+
36+
## SimpleMaskMoney.format(...)
37+
38+
**.format(...)** have three arguments, the ```value```, ```args```(optional):
39+
40+
```javascript
41+
// With default args
42+
SimpleMaskMoney.format('123456789'); // 1.234.567,89
43+
// With custom args
44+
SimpleMaskMoney.format('123456789', { prefix: 'R$' }); // R$1.234.567,89
45+
```
46+
47+
The **arguments** they are:
48+
49+
- **value**: string > *The value of your input or value that will be formatted*
50+
- **args**: object > *This is the configurations of the formattation. If this argument is omitted the arguments defined in ```SimpleMaskMoney.args = {}``` will be used*
51+
52+
## SimpleMaskMoney.formatToNumber(...)
53+
54+
**.formatToNumber(...)** have one argument, the ```value```, ```args```(optional) that will be formatted to number:
55+
56+
```javascript
57+
// With default args
58+
SimpleMaskMoney.formatToNumber('$ 1.234.567,89'); // 1234567.89
59+
```
60+
61+
## SimpleMaskMoney.setMask(...)
62+
63+
**.setMask(...)** have two arguments, the ```input``` or ```input selector``` and ```args```.
64+
This method get the input and implements the mask with this args:
65+
66+
```html
67+
<!-- With default args -->
68+
<input type="text" inputmode="numeric" id="#myInput">
69+
```
70+
71+
Use the query selector
72+
73+
```javascript
74+
// With default args
75+
SimpleMaskMoney.setMask('#myInput', args); // 1.234.567,89
76+
```
77+
78+
Or if you prefer pass the input element
79+
80+
```javascript
81+
const element = document.getElementById('#myInput');
82+
83+
SimpleMaskMoney.setMask(element, args); // 1.234.567,89
84+
```

0 commit comments

Comments
 (0)