@live-change/user-frontend 0.9.29 → 0.9.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/front/src/phone/CountryInput.vue +80 -0
- package/index.js +2 -1
- package/package.json +26 -26
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex flex-row align-items-center">
|
|
3
|
+
<AutoComplete v-model="selectedCountry" dropdown optionLabel="name"
|
|
4
|
+
:suggestions="filteredCountries" @complete="searchCountry"
|
|
5
|
+
class="mr-2 w-14rem">
|
|
6
|
+
<template #option="slotProps">
|
|
7
|
+
<div class="flex align-items-center">
|
|
8
|
+
<img :alt="slotProps.option.name"
|
|
9
|
+
src="../../public/images/flag_placeholder.png"
|
|
10
|
+
:class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`"
|
|
11
|
+
style="width: 18px; height: 12.27px" />
|
|
12
|
+
<div>{{ slotProps.option.name }}</div>
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
15
|
+
</AutoComplete>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
18
|
+
|
|
19
|
+
<script setup>
|
|
20
|
+
|
|
21
|
+
import AutoComplete from 'primevue/autocomplete'
|
|
22
|
+
|
|
23
|
+
import countries from '../utils/countries.js'
|
|
24
|
+
|
|
25
|
+
import { defineProps, defineModel, toRefs, ref, computed, watch } from 'vue'
|
|
26
|
+
|
|
27
|
+
const phoneInput = ref()
|
|
28
|
+
|
|
29
|
+
const value = defineModel({
|
|
30
|
+
type: String,
|
|
31
|
+
required: true
|
|
32
|
+
})
|
|
33
|
+
|
|
34
|
+
const props = defineProps({
|
|
35
|
+
id: {
|
|
36
|
+
type: String,
|
|
37
|
+
required: true
|
|
38
|
+
},
|
|
39
|
+
})
|
|
40
|
+
|
|
41
|
+
const selectedCountry = ref()
|
|
42
|
+
watch(value, (newValue) => {
|
|
43
|
+
if(!newValue) return
|
|
44
|
+
const found = countries.find((country) => newValue.startsWith(country.name))
|
|
45
|
+
if(found) selectedCountry.value = found
|
|
46
|
+
})
|
|
47
|
+
|
|
48
|
+
const filteredCountries = ref(countries)
|
|
49
|
+
function searchCountry(event) {
|
|
50
|
+
if(!event) return
|
|
51
|
+
const numbers = event.query.replace(/[^\d]/g, '')
|
|
52
|
+
console.log("Search country", event.query, numbers, selectedCountry.value)
|
|
53
|
+
filteredCountries.value = countries.filter((country) =>
|
|
54
|
+
country.name.toLowerCase().startsWith(event.query.toLowerCase())
|
|
55
|
+
|| country.code.toLowerCase().startsWith(event.query.toLowerCase())
|
|
56
|
+
|| (numbers.length > 0 && country.dial_code.replace(/[^\d]/g, '').startsWith(numbers))
|
|
57
|
+
)
|
|
58
|
+
console.log("Found", filteredCountries.value)
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
watch(selectedCountry, (country) => {
|
|
62
|
+
value.value = country?.name || country
|
|
63
|
+
})
|
|
64
|
+
|
|
65
|
+
import { usePath, live } from '@live-change/vue3-ssr'
|
|
66
|
+
const path = usePath()
|
|
67
|
+
const geoIpPath = path.geoIp.myCountry({})
|
|
68
|
+
|
|
69
|
+
const myCountry = await live(geoIpPath)
|
|
70
|
+
|
|
71
|
+
if(selectedCountry.value == null) {
|
|
72
|
+
selectedCountry.value = countries.find(c => c.code.toLowerCase() === myCountry.value.toLowerCase())
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
</script>
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
<style scoped lang="scss">
|
|
79
|
+
@use "../utils/flags.scss";
|
|
80
|
+
</style>
|
package/index.js
CHANGED
|
@@ -19,7 +19,8 @@ export { GoogleAccess }
|
|
|
19
19
|
|
|
20
20
|
export * from "./front/src/phone/phoneNumber.js"
|
|
21
21
|
import PhoneInput from "./front/src/phone/PhoneInput.vue"
|
|
22
|
-
|
|
22
|
+
import CountryInput from './front/src/phone/CountryInput.vue'
|
|
23
|
+
export { PhoneInput, CountryInput }
|
|
23
24
|
|
|
24
25
|
export * from './front/src/connected/connected.js'
|
|
25
26
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@live-change/user-frontend",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.31",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"memDev": "node --inspect --expose-gc server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
|
|
6
6
|
"localDevInit": "rm tmp.db; node server/start.js localDev --enableSessions --initScript ./init.js",
|
|
@@ -22,29 +22,29 @@
|
|
|
22
22
|
},
|
|
23
23
|
"type": "module",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@live-change/cli": "^0.9.
|
|
26
|
-
"@live-change/dao": "^0.9.
|
|
27
|
-
"@live-change/dao-vue3": "^0.9.
|
|
28
|
-
"@live-change/dao-websocket": "^0.9.
|
|
29
|
-
"@live-change/email-service": "^0.9.
|
|
30
|
-
"@live-change/framework": "^0.9.
|
|
31
|
-
"@live-change/identicon-service": "^0.9.
|
|
32
|
-
"@live-change/image-frontend": "^0.9.
|
|
33
|
-
"@live-change/message-authentication-service": "^0.9.
|
|
34
|
-
"@live-change/notification-service": "^0.9.
|
|
35
|
-
"@live-change/password-authentication-service": "^0.9.
|
|
36
|
-
"@live-change/pattern": "^0.9.
|
|
37
|
-
"@live-change/secret-code-service": "^0.9.
|
|
38
|
-
"@live-change/secret-link-service": "^0.9.
|
|
39
|
-
"@live-change/security-frontend": "^0.9.
|
|
40
|
-
"@live-change/security-service": "^0.9.
|
|
41
|
-
"@live-change/session-service": "^0.9.
|
|
42
|
-
"@live-change/timer-service": "^0.9.
|
|
43
|
-
"@live-change/upload-service": "^0.9.
|
|
44
|
-
"@live-change/user-identification-service": "^0.9.
|
|
45
|
-
"@live-change/user-service": "^0.9.
|
|
46
|
-
"@live-change/vue3-components": "^0.9.
|
|
47
|
-
"@live-change/vue3-ssr": "^0.9.
|
|
25
|
+
"@live-change/cli": "^0.9.31",
|
|
26
|
+
"@live-change/dao": "^0.9.31",
|
|
27
|
+
"@live-change/dao-vue3": "^0.9.31",
|
|
28
|
+
"@live-change/dao-websocket": "^0.9.31",
|
|
29
|
+
"@live-change/email-service": "^0.9.31",
|
|
30
|
+
"@live-change/framework": "^0.9.31",
|
|
31
|
+
"@live-change/identicon-service": "^0.9.31",
|
|
32
|
+
"@live-change/image-frontend": "^0.9.31",
|
|
33
|
+
"@live-change/message-authentication-service": "^0.9.31",
|
|
34
|
+
"@live-change/notification-service": "^0.9.31",
|
|
35
|
+
"@live-change/password-authentication-service": "^0.9.31",
|
|
36
|
+
"@live-change/pattern": "^0.9.31",
|
|
37
|
+
"@live-change/secret-code-service": "^0.9.31",
|
|
38
|
+
"@live-change/secret-link-service": "^0.9.31",
|
|
39
|
+
"@live-change/security-frontend": "^0.9.31",
|
|
40
|
+
"@live-change/security-service": "^0.9.31",
|
|
41
|
+
"@live-change/session-service": "^0.9.31",
|
|
42
|
+
"@live-change/timer-service": "^0.9.31",
|
|
43
|
+
"@live-change/upload-service": "^0.9.31",
|
|
44
|
+
"@live-change/user-identification-service": "^0.9.31",
|
|
45
|
+
"@live-change/user-service": "^0.9.31",
|
|
46
|
+
"@live-change/vue3-components": "^0.9.31",
|
|
47
|
+
"@live-change/vue3-ssr": "^0.9.31",
|
|
48
48
|
"@vueuse/core": "^12.3.0",
|
|
49
49
|
"codeceptjs-assert": "^0.0.5",
|
|
50
50
|
"codeceptjs-video-helper": "0.1.3",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"wtfnode": "^0.9.1"
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
|
-
"@live-change/codeceptjs-helper": "^0.9.
|
|
68
|
+
"@live-change/codeceptjs-helper": "^0.9.31",
|
|
69
69
|
"codeceptjs": "^3.6.10",
|
|
70
70
|
"generate-password": "1.7.1",
|
|
71
71
|
"playwright": "1.49.1",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"author": "Michał Łaszczewski <michal@laszczewski.pl>",
|
|
77
77
|
"license": "BSD-3-Clause",
|
|
78
78
|
"description": "",
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "4e12be9d3f339492bb9ddc3c6c77581e52d1ba60"
|
|
80
80
|
}
|