Skip to content

Commit 3edc1b0

Browse files
LouisMazelLouisMazel
committed
add depedencies
1 parent ded1ae4 commit 3edc1b0

10 files changed

+3314
-25
lines changed

‎package-lock.json

+764-21
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11-
"vue": "^2.5.21"
11+
"libphonenumber-js": "^1.7.7",
12+
"vue": "^2.5.21",
13+
"vue-input-ui": "^0.1.0"
1214
},
1315
"devDependencies": {
1416
"@vue/cli-plugin-babel": "^3.3.0",
@@ -17,6 +19,8 @@
1719
"babel-eslint": "^10.0.1",
1820
"eslint": "^5.8.0",
1921
"eslint-plugin-vue": "^5.0.0",
22+
"node-sass": "^4.11.0",
23+
"sass-loader": "^7.1.0",
2024
"vue-template-compiler": "^2.5.21"
2125
},
2226
"eslintConfig": {

‎src/App.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
22
<div id="app">
33
<img alt="Vue logo" src="./assets/logo.png">
4-
<HelloWorld msg="Welcome to Your Vue.js App"/>
4+
<PhoneNumber />
55
</div>
66
</template>
77

88
<script>
9-
import HelloWorld from './components/HelloWorld.vue'
9+
import PhoneNumber from './PhoneNumber'
1010
1111
export default {
1212
name: 'app',
1313
components: {
14-
HelloWorld
14+
PhoneNumber
1515
}
1616
}
1717
</script>

‎src/PhoneNumber/_subs/SelectCountry.vue

+218
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
<template>
2+
<div
3+
ref="parent"
4+
:class="{'is-focused': isOpen, 'has-value': valueToShow}"
5+
class="field has-label"
6+
@click="isOpen ? close : open"
7+
>
8+
<label
9+
for="ctk-input"
10+
class="field-label"
11+
>{{ hint || label }}</label>
12+
<div class="flag-container field-country-flag">
13+
<img
14+
:class="`flag-small flag flag-${value.toLowerCase()}`"
15+
:alt="value.toLowerCase()"
16+
src="./../assets/flags/blank.gif"
17+
>
18+
</div>
19+
<i
20+
aria-hidden="true"
21+
class="material-icons field-arrow"
22+
>arrow_drop_down</i>
23+
<input
24+
id="ctk-input"
25+
ref="ctkInput"
26+
:placeholder="label"
27+
:value="valueToShow"
28+
type="text"
29+
class="field-input dots-text"
30+
readonly
31+
@focus="open"
32+
@blur="close">
33+
<input
34+
ref="ctkInput"
35+
:value="value"
36+
type="hidden">
37+
<ul
38+
v-show="isOpen"
39+
class="ctk-input-select-list">
40+
<li
41+
v-for="item in items"
42+
:class="{'selected': value === item.code }"
43+
:key="item.code"
44+
class="flex ctk-input-select-item"
45+
@click.stop="updateValue(item.code)"
46+
>
47+
<div class="flag-container mr-2">
48+
<img
49+
:class="`flag-small flag flag-${item.code.toLowerCase()}`"
50+
:alt="item.code.toLowerCase()"
51+
src="./../assets/flags/blank.gif"
52+
>
53+
</div>
54+
<div>
55+
{{ item.dial_code }} - <b>{{ item.name }}</b>
56+
</div>
57+
</li>
58+
</ul>
59+
</div>
60+
</template>
61+
62+
<script>
63+
export default {
64+
name: 'SelectCountry',
65+
props: {
66+
label: {
67+
type: String,
68+
default: 'Label'
69+
},
70+
value: {
71+
type: null,
72+
default: null,
73+
require: true
74+
},
75+
hint: {
76+
type: String,
77+
default: null
78+
},
79+
errorHint: {
80+
type: Boolean,
81+
default: false
82+
},
83+
items: {
84+
type: Array,
85+
required: true
86+
},
87+
valueToShow: {
88+
type: String,
89+
default: null
90+
},
91+
isOpen: {
92+
type: Boolean,
93+
default: false
94+
}
95+
},
96+
data () {
97+
return {
98+
inputValue: null
99+
}
100+
},
101+
methods: {
102+
open () {
103+
this.$emit('toggle', true)
104+
},
105+
close () {
106+
setTimeout(() => {
107+
this.$emit('toggle', false)
108+
}, 300)
109+
},
110+
updateValue (code) {
111+
this.$emit('input', code || this.value)
112+
}
113+
}
114+
}
115+
</script>
116+
117+
<style lang="scss" scoped>
118+
.field {
119+
user-select: none;
120+
cursor: pointer;
121+
position: relative;
122+
123+
.flag-container{
124+
margin: auto 0;
125+
126+
img{
127+
position: absolute;
128+
}
129+
}
130+
131+
.field-label{
132+
cursor: pointer;
133+
position: absolute;
134+
top: 3px;
135+
left: 13px;
136+
transform: translateY(0);
137+
opacity: 1;
138+
transition: all .25s cubic-bezier(.645,.045,.355,1);
139+
font-size: 11px;
140+
color: rgba(0,0,0, 0.54);
141+
}
142+
.field-country-flag {
143+
position: absolute;
144+
top: 19px;
145+
left: 13px;
146+
}
147+
.field-input{
148+
user-select: none;
149+
cursor: pointer;
150+
transition-duration: 0.3s;
151+
position: relative;
152+
width: 100%;
153+
height: 42px;
154+
min-height: 42px;
155+
padding: 0 12px;
156+
padding-left: 40px;
157+
padding-top: 14px;
158+
159+
font-weight: 400;
160+
-webkit-appearance: none;
161+
outline: none;
162+
163+
background-color: transparent;
164+
border: 1px solid rgba(0,0,0, 0.2);
165+
border-radius: 4px;
166+
border-top-right-radius: 0;
167+
border-bottom-right-radius: 0;
168+
&.has-error {
169+
border-color: $danger !important;
170+
}
171+
}
172+
.field-arrow {
173+
cursor: pointer;
174+
position: absolute;
175+
right: 5px;
176+
top: 10px;
177+
color: rgba(0,0,0, 0.54);
178+
}
179+
&.is-focused {
180+
.field-input {
181+
border-color: $info;
182+
}
183+
.field-label {
184+
color: $info;
185+
}
186+
}
187+
.ctk-input-select-list {
188+
padding: 0;
189+
list-style: none;
190+
background: #FFF;
191+
max-height: 200px;
192+
overflow: auto;
193+
z-index: 9;
194+
max-width: 100%;
195+
position: absolute;
196+
top: 42px;
197+
border-radius: 4px;
198+
width: 100%;
199+
min-width: 230px;
200+
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
201+
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
202+
.ctk-input-select-item {
203+
padding: 5px 10px;
204+
text-overflow: ellipsis;
205+
white-space: nowrap;
206+
overflow: hidden;
207+
cursor: pointer;
208+
&:hover {
209+
background-color: #F2F2F2;
210+
}
211+
&.selected {
212+
background: $info;
213+
color: #FFF;
214+
}
215+
}
216+
}
217+
}
218+
</style>

‎src/PhoneNumber/assets/flags/blank.gif

46 Bytes
Loading

0 commit comments

Comments
 (0)