matt
/
port-nimara-client-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add v-phone-input component for enhanced phone number fields 

Replace basic text fields with v-phone-input in CreateInterestModal and
InterestDetailsModal to provide country selection, validation, and better
UX for phone number entry. Includes US as default with preferred countries
list and search functionality.
This commit is contained in:
Matt 2025-06-04 02:43:21 +02:00
parent fe90bd63c3
commit 6b922580c5
5 changed files with 81 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/CreateInterestModal.vue
View File

@ -76,13 +76,15 @@
></v-text-field>
</v-col>
<v-col cols="12" md="4">
<v-text-field
<v-phone-input
v-model="newInterest['Phone Number']"
label="Phone Number"
variant="outlined"
density="comfortable"
prepend-inner-icon="mdi-phone"
></v-text-field>
country="US"
:preferred-countries="['US', 'FR', 'ES', 'PT', 'GB']"
:enable-searching-country="true"
/>
</v-col>
<v-col cols="12" md="4">
<v-text-field

8
components/InterestDetailsModal.vue
View File

@ -184,13 +184,15 @@
></v-text-field>
</v-col>
<v-col cols="12" md="4">
<v-text-field
<v-phone-input
v-model="interest['Phone Number']"
label="Phone Number"
variant="outlined"
density="comfortable"
prepend-inner-icon="mdi-phone"
></v-text-field>
country="US"
:preferred-countries="['US', 'FR', 'ES', 'PT', 'GB']"
:enable-searching-country="true"
/>
</v-col>
<v-col cols="12" md="4">
<v-text-field

58
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "app",
"name": "client-portal",
"lockfileVersion": 3,
"requires": true,
"packages": {
@ -9,6 +9,7 @@
"@vite-pwa/nuxt": "^0.10.6",
"nuxt": "^3.15.4",
"nuxt-directus": "^5.7.0",
"v-phone-input": "^4.4.2",
"vue": "latest",
"vue-router": "latest",
"vuetify-nuxt-module": "^0.18.3"
@ -4514,6 +4515,20 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/awesome-phonenumber": {
"version": "6.12.0",
"resolved": "https://registry.npmjs.org/awesome-phonenumber/-/awesome-phonenumber-6.12.0.tgz",
"integrity": "sha512-17Ts/ceWeWXzWZqTIRKA48y3+OyxYsAXYzuxYCn4n0+By+W0dcHk3fHszW6lLxAlCZt3VmVKY6n9AxOCU84qNw==",
"license": "MIT",
"workspaces": [
"webpack",
"cjs-test",
"esm-test"
],
"engines": {
"node": ">=18"
}
},
"node_modules/b4a": {
"version": "1.6.7",
"resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@ -5200,6 +5215,12 @@
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
"license": "MIT"
},
"node_modules/countries-list": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/countries-list/-/countries-list-3.1.1.tgz",
"integrity": "sha512-nPklKJ5qtmY5MdBKw1NiBAoyx5Sa7p2yPpljZyQ7gyCN1m+eMFs9I6CT37Mxt8zvR5L3VzD3DJBE4WQzX3WF4A==",
"license": "MIT"
},
"node_modules/crc-32": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
@ -6325,6 +6346,13 @@
"node": ">=8"
}
},
"node_modules/flag-icons": {
"version": "7.5.0",
"resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-7.5.0.tgz",
"integrity": "sha512-kd+MNXviFIg5hijH766tt+3x76ele1AXlo4zDdCxIvqWZhKt4T83bOtxUOOMlTx/EcFdUMH5yvQgYlFh1EqqFg==",
"license": "MIT",
"optional": true
},
"node_modules/flatted": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
@ -12801,6 +12829,27 @@
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
"license": "MIT"
},
"node_modules/v-phone-input": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/v-phone-input/-/v-phone-input-4.4.2.tgz",
"integrity": "sha512-OJXRv2kl0DEMYToTDvFGo0nTNC4ZkIycgrltxoc8o/0E7mLAVf0nuszOaX+NZHRRq5SmlwQ8D9bhUWBKRBMmJg==",
"license": "MIT",
"dependencies": {
"awesome-phonenumber": "^6.4.0",
"countries-list": "^3.1.0"
},
"engines": {
"node": ">=12"
},
"optionalDependencies": {
"flag-icons": "^7.1.0",
"world-flags-sprite": "^0.0.2"
},
"peerDependencies": {
"vue": "^3.0.0",
"vuetify": "^3.0.0"
}
},
"node_modules/vite": {
"version": "6.0.11",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
@ -13834,6 +13883,13 @@
"workbox-core": "7.3.0"
}
},
"node_modules/world-flags-sprite": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/world-flags-sprite/-/world-flags-sprite-0.0.2.tgz",
"integrity": "sha512-v4Qjd8+5hBNVyn9AKFcVTaKZWaz0fZliHZ7FK0ugPMbAv+oI5BZrT72rBxmGiD6D86yshA08FTo/CcAaZW7buw==",
"license": "ISC",
"optional": true
},
"node_modules/wrap-ansi": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",

1
package.json
View File

@ -11,6 +11,7 @@
"@vite-pwa/nuxt": "^0.10.6",
"nuxt": "^3.15.4",
"nuxt-directus": "^5.7.0",
"v-phone-input": "^4.4.2",
"vue": "latest",
"vue-router": "latest",
"vuetify-nuxt-module": "^0.18.3"

13
plugins/v-phone-input.client.ts Normal file
View File

@ -0,0 +1,13 @@
import { defineNuxtPlugin } from '#app'
import { createVPhoneInput } from 'v-phone-input'
import 'v-phone-input/dist/v-phone-input.css'
export default defineNuxtPlugin((nuxtApp) => {
const vPhoneInput = createVPhoneInput({
defaultCountry: 'US',
preferredCountries: ['US', 'FR', 'ES', 'PT', 'GB'],
enableSearchingCountry: true,
})
nuxtApp.vueApp.use(vPhoneInput)
})