Skip to content

Commit 383eda4

Browse files
LouisMazelLouisMazel
committed
First Commit
1 parent 3edc1b0 commit 383eda4

14 files changed

+2047
-217
lines changed

‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.eslintrc.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// http://eslint.org/docs/user-guide/configuring
2+
3+
module.exports = {
4+
root: true,
5+
6+
env: {
7+
node: true
8+
},
9+
10+
extends: [
11+
'plugin:vue/strongly-recommended',
12+
'eslint:recommended'
13+
],
14+
15+
rules: {
16+
'generator-star-spacing': 0,
17+
'arrow-parens': 0,
18+
'prefer-const': 2,
19+
'no-trailing-spaces': 'error',
20+
'no-debugger': 0,
21+
'no-extra-semi': 'error',
22+
semi: [
23+
'error',
24+
'never'
25+
],
26+
'no-var': 'error',
27+
'vue/attributes-order': 'error',
28+
'vue/no-confusing-v-for-v-if': 'error',
29+
'vue/no-v-html': 'error',
30+
'vue/order-in-components': 'error',
31+
'vue/this-in-template': 'error',
32+
'vue/script-indent': 'error'
33+
},
34+
35+
parserOptions: {
36+
parser: 'babel-eslint'
37+
},
38+
39+
overrides: [
40+
{
41+
files: ['*.vue'],
42+
rules: {
43+
indent: 'off',
44+
'vue/script-indent': ['error', 2, { baseIndent: 1 }]
45+
}
46+
}
47+
]
48+
}

‎.npmignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public/
2+
node_modules/
3+
docs/
4+
.gitignore
5+
.editorconfig
6+
.eslintrc

‎README.md

+74-15
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,88 @@
1-
# vue-phone-number-input
1+
# vue-input-ui
22

3-
## Project setup
4-
```
5-
npm install
6-
```
3+
> A beautiful input made with Vue JS
74
8-
### Compiles and hot-reloads for development
9-
```
10-
npm run serve
5+
![vue-input-ui](./public/vue-input-ui-demo.gif)
6+
7+
## Demo
8+
9+
[Enjoy](https://louismazel.github.io/vue-input-ui/)
10+
11+
## Installation
12+
13+
### Using yarn
14+
15+
`yarn add vue-input-ui`
16+
17+
### Using npm
18+
19+
`npm i --save vue-input-ui`
20+
21+
## Usage
22+
23+
### ES6 Modules / CommonJS
24+
25+
```js
26+
import VueInputUi from 'vue-input-ui';
27+
import 'vue-input-ui/dist/vue-input-ui.css';
28+
29+
Vue.component('vue-input-ui', VueInputUi);
1130
```
1231

13-
### Compiles and minifies for production
32+
```html
33+
<VueInputUi v-model="yourValue" />
1434
```
15-
npm run build
35+
36+
### UMD
37+
38+
```html
39+
<VueInputUi v-model="yourValue" />
40+
41+
<script src="https://unpkg.com/vue" charset="utf-8"></script>
42+
<script src="./dist/vue-input-ui.umd.min.js" charset="utf-8"></script>
43+
<link rel="stylesheet" type="text/css" href="./dist/vue-input-ui.css">
44+
45+
<script type="text/javascript">
46+
Vue.component('vue-input-ui', window.VueInputUi.default);
47+
</script>
1648
```
1749

18-
### Run your tests
50+
## Props API
51+
52+
| Props | Type | Required | Default | Options |
53+
|------------|------------|----------|------------|----------------|
54+
| v-model | String/Int | true | - | - |
55+
| id | String | false | VueInputUi | - |
56+
| label | String | false | Enter Text | - |
57+
| type | String | no | text | text or number |
58+
| hint* | text | no | - | |
59+
| error** | Boolean | no | false | |
60+
| disabled | Boolean | no | false | |
61+
| dark | Boolean | no | false | |
62+
| size | Boolean | no | false | |
63+
| readonly | Boolean | no | false | |
64+
| color | String `HEX` | no | dogderblue | |
65+
66+
## Contribution
67+
68+
### Project setup
69+
70+
```bash
71+
npm install
1972
```
20-
npm run test
73+
74+
### Compiles and hot-reloads for development
75+
76+
```bash
77+
npm run serve
2178
```
2279

2380
### Lints and fixes files
24-
```
81+
82+
```bash
2583
npm run lint
2684
```
2785

28-
### Customize configuration
29-
See [Configuration Reference](https://cli.vuejs.org/config/).
86+
## License
87+
88+
This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)

‎package.json

+37-19
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,25 @@
11
{
22
"name": "vue-phone-number-input",
33
"version": "0.1.0",
4-
"private": true,
4+
"description": "A phone number input made with Vue JS && libphonenumber",
5+
"author": "Louis Mazel <[email protected]>",
56
"scripts": {
6-
"serve": "vue-cli-service serve",
7-
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint"
7+
"serve": "vue-cli-service serve --mode development",
8+
"build": "npm run lint && npm run build:lib && npm run build:docs",
9+
"test": "vue-cli-service test:unit /test/specs",
10+
"lint": "vue-cli-service lint",
11+
"before-publish": "npm i && npm run lint && npm run build",
12+
"build:docs": "vue-cli-service build --dest docs --mode production",
13+
"build:lib": "vue-cli-service build --target lib ./src/VueInputUi/index.vue",
14+
"publish-npm:beta": "npm publish --tag beta",
15+
"serve:build": "vue-cli-service serve --mode production",
16+
"test:unit": "vue-cli-service test:unit",
17+
"test:unit:watch": "vue-cli-service test:unit --watch",
18+
"ui": "vue ui"
919
},
20+
"files": [
21+
"dist/"
22+
],
1023
"dependencies": {
1124
"libphonenumber-js": "^1.7.7",
1225
"vue": "^2.5.21",
@@ -23,28 +36,33 @@
2336
"sass-loader": "^7.1.0",
2437
"vue-template-compiler": "^2.5.21"
2538
},
26-
"eslintConfig": {
27-
"root": true,
28-
"env": {
29-
"node": true
30-
},
31-
"extends": [
32-
"plugin:vue/essential",
33-
"eslint:recommended"
34-
],
35-
"rules": {},
36-
"parserOptions": {
37-
"parser": "babel-eslint"
38-
}
39-
},
4039
"postcss": {
4140
"plugins": {
4241
"autoprefixer": {}
4342
}
4443
},
44+
"keywords": [
45+
"vue",
46+
"vuejs",
47+
"input",
48+
"text",
49+
"javascript",
50+
"vue-component"
51+
],
4552
"browserslist": [
4653
"> 1%",
4754
"last 2 versions",
4855
"not ie <= 8"
49-
]
56+
],
57+
"license": "MIT",
58+
"main": "dist/vue-phone-number-input.common.js",
59+
"repository": {
60+
"type": "git",
61+
"url": "git+https://github.com/LouisMazel/vue-phone-number-input.git"
62+
},
63+
"bugs": {
64+
"url": "https://github.com/LouisMazel/vue-phone-number-input/issues"
65+
},
66+
"homepage": "https://github.com/LouisMazel/vue-phone-number-input#readme",
67+
"types": "dist/index.d.ts"
5068
}

‎src/App.vue

+17-9
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
11
<template>
22
<div id="app">
3-
<img alt="Vue logo" src="./assets/logo.png">
4-
<PhoneNumber />
3+
<h1>VuePhoneNumberInput</h1>
4+
<PhoneNumber v-model="value" />
55
</div>
66
</template>
77

88
<script>
9-
import PhoneNumber from './PhoneNumber'
9+
import PhoneNumber from './PhoneNumber'
1010
11-
export default {
12-
name: 'app',
13-
components: {
14-
PhoneNumber
11+
export default {
12+
name: 'App',
13+
components: {
14+
PhoneNumber
15+
},
16+
data () {
17+
return {
18+
value: {
19+
code: 'FR',
20+
phoneNumber: '0658584729'
21+
}
22+
}
23+
}
1524
}
16-
}
1725
</script>
1826

19-
<style>
27+
<style lang="scss" scoped>
2028
#app {
2129
font-family: 'Avenir', Helvetica, Arial, sans-serif;
2230
-webkit-font-smoothing: antialiased;

0 commit comments

Comments
 (0)