Skip to content

Commit a351030

Browse files
niksmrniksmr
committed
Initial commit
1 parent d8f458c commit a351030

10 files changed

+531
-1
lines changed

‎.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
["es2015", { "modules": false }]
4+
]
5+
}

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log

‎README.md

+27-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
1-
# vue-masked-input
1+
# Vue Masked Input
2+
Dead simple masked input component for Vue.js 2.X. Based on [inputmask-core](https://github.com/insin/inputmask-core).
3+
### [Live Demo](http://127.0.0.1)
4+
5+
## Install
6+
### npm
7+
```
8+
npm install vue-masked-input --save
9+
```
10+
11+
## Usage
12+
Use it with `v-model` just like a native html input with the `mask` attribute:
13+
```vue
14+
<masked-input v-model="date" mask="11/11/1111" placeholder="dd/mm/yyyy" />
15+
```
16+
17+
The following format characters define editable parts of the mask (see [inputmask-core](https://github.com/insin/inputmask-core)):
18+
* `1` - number
19+
* `a` - letter
20+
* `A` - letter, forced to upper case when entered
21+
* `*` - alphanumeric
22+
* `#` - alphanumeric, forced to upper case when entered
23+
24+
If you need to include one of these characters as a static part of the mask, you can escape them with a preceding backslash:
25+
```vue
26+
<masked-input v-model="date" mask="+\\1 (111) 111-1111" placeholder="Phone number" type="tel" />
27+
```

‎index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue-masked-input</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

‎package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "vue-masked-input",
3+
"description": "Masked input component for Vue.js 2.X",
4+
"version": "0.1.0",
5+
"author": "niksmr",
6+
"private": true,
7+
"scripts": {
8+
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
9+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
10+
},
11+
"dependencies": {
12+
"inputmask-core": "^2.2.0",
13+
"vue": "^2.1.0"
14+
},
15+
"devDependencies": {
16+
"babel-core": "^6.0.0",
17+
"babel-loader": "^6.0.0",
18+
"babel-preset-es2015": "^6.0.0",
19+
"cross-env": "^3.0.0",
20+
"css-loader": "^0.25.0",
21+
"file-loader": "^0.9.0",
22+
"vue-loader": "^10.0.0",
23+
"vue-template-compiler": "^2.1.0",
24+
"webpack": "^2.1.0-beta.25",
25+
"webpack-dev-server": "^2.1.0-beta.9"
26+
}
27+
}

‎src/App.vue

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<div id="app">
3+
<h1>Vue Masked Input</h1>
4+
<h3>Dead simple masked input component for Vue.js 2.X</h3>
5+
<hr />
6+
<h4>Date: </h4>
7+
<masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /><span v-if="">{{ date }}</span>
8+
<p class="code">
9+
&lt;masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /&gt;
10+
</p>
11+
<h4>Phone: </h4>
12+
<masked-input v-model="phone" mask="+\1 (111) 1111-11" placeholder="Phone" /><span>{{ phone }}</span>
13+
<p class="code">
14+
&lt;masked-input v-model="phone" mask="+\1 (111) 1111-11" placeholder="Phone" /&gt;
15+
</p>
16+
<h4>Your own mask (hot re-mask available): </h4>
17+
<input v-model="userMask" placeholder="Mask" />
18+
<masked-input v-model="userField" :mask="userMask" placeholder="Text" /><span>{{ userField }}</span>
19+
<br />
20+
<h4>Check <a href="#">GitHub</a> for more</h4>
21+
</div>
22+
</template>
23+
24+
<script>
25+
import MaskedInput from './MaskedInput.vue';
26+
27+
export default {
28+
name: 'app',
29+
data: () => ({
30+
date: '',
31+
phone: '',
32+
userMask: 'aa-aa-AAAA',
33+
userField: '',
34+
}),
35+
components: {
36+
MaskedInput
37+
}
38+
39+
}
40+
</script>
41+
42+
<style>
43+
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
44+
@import url('https://fonts.googleapis.com/css?family=Overpass+Mono:400,700');
45+
body {
46+
background-color: #FAFAFA;
47+
}
48+
49+
#app {
50+
max-width: 780px;
51+
margin: auto;
52+
font-family: 'Roboto', sans-serif;
53+
color: #2c3e50;
54+
}
55+
56+
input {
57+
font-family: inherit;
58+
font-size: inherit;
59+
padding: 8px 16px;
60+
border: none;
61+
border-bottom: 1px solid #4fc08d;
62+
outline: none;
63+
margin-right: 24px;
64+
}
65+
66+
hr {
67+
border: none;
68+
border-bottom: 1px solid #DDD;
69+
}
70+
71+
h1 {
72+
font-size: 48px;
73+
margin: 48px 0 8px 0;
74+
font-weight: 900;
75+
}
76+
77+
h3 {
78+
margin: 0 0 24px;
79+
font-weight: 300;
80+
}
81+
82+
h4 {
83+
margin: 36px 0 12px;
84+
}
85+
86+
span {
87+
opacity: 0.5;
88+
margin-left: 32px;
89+
}
90+
91+
.code {
92+
padding: 24px;
93+
font-family: 'Overpass Mono', monospace;
94+
background-color: #EEE;
95+
font-size: 0.95em;
96+
font-weight: 500;
97+
line-height: 1.5em;
98+
}
99+
</style>

0 commit comments

Comments
 (0)