matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

successfully replaced your oversized, clunky phone input with a professional vue-tel-input library
Build And Push Image / docker (push) Successful in 2m46s Details

This commit is contained in:
Matt 2025-08-08 00:35:57 +02:00
parent 0193269749
commit 65bda25c8f
4 changed files with 405 additions and 487 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/PhoneInputDemo.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="demo-container">
<v-card class="pa-6" elevation="2">
<v-card-title class="text-h5 mb-4">
🎨 New Professional Phone Input
</v-card-title>
<v-row>
<v-col cols="12" md="6">
<PhoneInputWrapper
v-model="phoneNumber"
label="Phone Number"
placeholder="Enter your phone number"
help-text="Monaco 🇲🇨 and France 🇫🇷 are prioritized at the top"
@phone-data="handlePhoneData"
@country-changed="handleCountryChange"
/>
</v-col>
<v-col cols="12" md="6">
<v-card variant="outlined" class="pa-4">
<v-card-title class="text-subtitle-1">Live Data:</v-card-title>
<div class="mt-2">
<p><strong>Phone:</strong> {{ phoneNumber }}</p>
<p><strong>Valid:</strong> {{ phoneData?.isValid ? '✅' : '❌' }}</p>
<p><strong>Country:</strong> {{ phoneData?.country?.name }} {{ getCountryFlag(phoneData?.country?.iso2) }}</p>
<p><strong>Format:</strong> International</p>
</div>
</v-card>
</v-col>
</v-row>
<v-alert type="success" variant="tonal" class="mt-4">
<template #title>✨ Key Features:</template>
<ul class="mt-2">
<li><strong>Compact Dropdown:</strong> Max 240px height, professional styling</li>
<li><strong>Monaco Priority:</strong> 🇲🇨 Monaco and 🇫🇷 France at the top</li>
<li><strong>Real Flags:</strong> High-quality country flag icons</li>
<li><strong>Auto-Validation:</strong> Built-in phone number validation</li>
<li><strong>Smart Formatting:</strong> International format with country codes</li>
<li><strong>Responsive:</strong> Mobile-optimized design</li>
</ul>
</v-alert>
</v-card>
</div>
</template>
<script setup lang="ts">
import PhoneInputWrapper from './PhoneInputWrapper.vue';
const phoneNumber = ref('');
const phoneData = ref<any>(null);
const handlePhoneData = (data: any) => {
phoneData.value = data;
console.log('Phone data:', data);
};
const handleCountryChange = (country: any) => {
console.log('Country changed:', country);
};
const getCountryFlag = (iso2: string | undefined) => {
if (!iso2) return '';
const flagMap: Record<string, string> = {
'MC': '🇲🇨',
'FR': '🇫🇷',
'US': '🇺🇸',
'IT': '🇮🇹',
'CH': '🇨🇭',
'GB': '🇬🇧',
'DE': '🇩🇪',
'ES': '🇪🇸',
'CA': '🇨🇦'
};
return flagMap[iso2.toUpperCase()] || '';
};
</script>
<style scoped>
.demo-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
</style>

701
components/PhoneInputWrapper.vue
View File

@ -1,91 +1,42 @@
<template>
<div class="premium-phone-input-wrapper">
<div class="premium-phone-wrapper">
<!-- Label -->
<v-label v-if="label" class="phone-label">
{{ label }}
<span v-if="required" class="text-error ml-1">*</span>
</v-label>
<div class="premium-phone-container" :class="{
'premium-phone-container--error': hasError,
'premium-phone-container--focused': isFocused,
'premium-phone-container--disabled': disabled
<!-- Vue Tel Input with Professional Styling -->
<div class="phone-input-container" :class="{
'phone-input-container--error': hasError,
'phone-input-container--disabled': disabled
}">
<!-- Country Selector -->
<div class="country-selector-section" @click="toggleCountryDropdown">
<div class="selected-country-display">
<div class="flag-container">
<span class="flag-emoji">{{ selectedCountry.flag }}</span>
</div>
<span class="country-code">{{ selectedCountry.dialCode }}</span>
<v-icon size="16" class="dropdown-icon" :class="{ 'rotated': showCountryDropdown }">
mdi-chevron-down
</v-icon>
</div>
<!-- Country Dropdown -->
<div v-if="showCountryDropdown" class="country-dropdown" v-click-outside="closeCountryDropdown">
<div class="country-search">
<v-text-field
v-model="countrySearch"
placeholder="Search countries..."
variant="outlined"
density="compact"
prepend-inner-icon="mdi-magnify"
hide-details
@click.stop
/>
</div>
<div class="country-list">
<div
v-for="country in filteredCountries"
:key="country.iso2"
class="country-option"
:class="{ 'selected': country.iso2 === selectedCountry.iso2 }"
@click.stop="selectCountry(country)"
>
<span class="country-flag">{{ country.flag }}</span>
<span class="country-name">{{ country.name }}</span>
<span class="country-dial-code">{{ country.dialCode }}</span>
</div>
</div>
</div>
</div>
<!-- Phone Number Input -->
<div class="phone-input-section">
<v-text-field
v-model="phoneNumber"
:placeholder="dynamicPlaceholder"
variant="plain"
hide-details
density="comfortable"
@focus="handleFocus"
@blur="handleBlur"
@input="handlePhoneInput"
<vue-tel-input
v-model="phoneValue"
:preferred-countries="preferredCountries"
:only-countries="onlyCountries.length > 0 ? onlyCountries : undefined"
:ignored-countries="ignoredCountries"
:placeholder="placeholder"
:disabled="disabled"
class="phone-number-input"
/>
</div>
<!-- Validation Icon -->
<div class="validation-section" v-if="phoneNumber">
<v-icon
v-if="isValidPhone"
color="success"
size="20"
class="validation-icon success"
:required="required"
:valid-characters-only="true"
:auto-default-country="false"
:default-country="defaultCountry"
:input-options="inputOptions"
:dropdown-options="dropdownOptions"
mode="international"
@on-input="handlePhoneInput"
@country-changed="handleCountryChange"
@validate="handleValidation"
:wrapper-classes="wrapperClasses"
:input-classes="inputClasses"
class="vue-tel-input-styled"
>
mdi-check-circle
</v-icon>
<v-icon
v-else-if="phoneNumber.length > 3"
color="warning"
size="20"
class="validation-icon warning"
>
mdi-alert-circle
</v-icon>
</div>
<!-- Custom arrow icon slot -->
<template #arrow-icon>
<v-icon size="16" class="dropdown-arrow">mdi-chevron-down</v-icon>
</template>
</vue-tel-input>
</div>
<!-- Error Message -->
@ -102,12 +53,8 @@
</template>
<script setup lang="ts">
interface Country {
name: string;
iso2: string;
dialCode: string;
flag: string;
}
import { VueTelInput } from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';
interface Props {
modelValue?: string;
@ -118,11 +65,28 @@ interface Props {
helpText?: string;
required?: boolean;
disabled?: boolean;
defaultCountry?: string;
onlyCountries?: string[];
ignoredCountries?: string[];
}
interface PhoneObject {
number: string;
isValid: boolean;
country: {
name: string;
iso2: string;
dialCode: string;
priority: number;
areaCodes?: string[];
};
}
interface Emits {
(e: 'update:modelValue', value: string): void;
(e: 'phone-data', data: any): void;
(e: 'phone-data', data: PhoneObject): void;
(e: 'country-changed', country: any): void;
(e: 'validate', data: PhoneObject): void;
}
const props = withDefaults(defineProps<Props>(), {
@ -130,208 +94,81 @@ const props = withDefaults(defineProps<Props>(), {
placeholder: 'Phone number',
error: false,
required: false,
disabled: false
disabled: false,
defaultCountry: 'MC', // Default to Monaco
onlyCountries: () => [],
ignoredCountries: () => []
});
const emit = defineEmits<Emits>();
// Reactive state
const isFocused = ref(false);
const phoneNumber = ref('');
const showCountryDropdown = ref(false);
const countrySearch = ref('');
// Monaco and France prioritized countries
const preferredCountries = ['MC', 'FR', 'US', 'IT', 'CH', 'GB', 'DE', 'ES', 'CA'];
// Countries data with Monaco and France prioritized
const countries: Country[] = [
{ name: 'Monaco', iso2: 'MC', dialCode: '+377', flag: '🇲🇨' },
{ name: 'France', iso2: 'FR', dialCode: '+33', flag: '🇫🇷' },
{ name: 'United States', iso2: 'US', dialCode: '+1', flag: '🇺🇸' },
{ name: 'Italy', iso2: 'IT', dialCode: '+39', flag: '🇮🇹' },
{ name: 'Switzerland', iso2: 'CH', dialCode: '+41', flag: '🇨🇭' },
{ name: 'United Kingdom', iso2: 'GB', dialCode: '+44', flag: '🇬🇧' },
{ name: 'Germany', iso2: 'DE', dialCode: '+49', flag: '🇩🇪' },
{ name: 'Spain', iso2: 'ES', dialCode: '+34', flag: '🇪🇸' },
{ name: 'Canada', iso2: 'CA', dialCode: '+1', flag: '🇨🇦' },
{ name: 'Australia', iso2: 'AU', dialCode: '+61', flag: '🇦🇺' },
];
// Internal phone value
const phoneValue = ref(props.modelValue);
const selectedCountry = ref<Country>(countries[0]); // Default to Monaco
// Computed properties
const filteredCountries = computed(() => {
if (!countrySearch.value) return countries;
const search = countrySearch.value.toLowerCase();
return countries.filter(country =>
country.name.toLowerCase().includes(search) ||
country.dialCode.includes(search) ||
country.iso2.toLowerCase().includes(search)
);
});
const dynamicPlaceholder = computed(() => {
const examples: { [key: string]: string } = {
'MC': '06 12 34 56 78',
'FR': '01 23 45 67 89',
'US': '(555) 123-4567',
'IT': '320 123 4567',
'CH': '078 123 45 67',
'GB': '07700 123456',
'DE': '0176 12345678',
'ES': '612 34 56 78',
'CA': '(555) 123-4567',
'AU': '0412 345 678'
// Input and dropdown configuration
const inputOptions = {
placeholder: props.placeholder,
required: props.required,
disabled: props.disabled,
showDialCode: false,
tabindex: 0
};
return examples[selectedCountry.value.iso2] || props.placeholder || 'Phone number';
});
const dropdownOptions = {
showDialCode: true,
tabindex: 0,
disabledDialCode: false
};
const isValidPhone = computed(() => {
if (!phoneNumber.value) return false;
// Basic validation - at least 6 digits for most countries
const digits = phoneNumber.value.replace(/\D/g, '');
return digits.length >= 6 && digits.length <= 15;
});
const fullPhoneNumber = computed(() => {
if (!phoneNumber.value) return '';
return `${selectedCountry.value.dialCode} ${phoneNumber.value}`.trim();
});
// Custom CSS classes
const wrapperClasses = 'premium-tel-wrapper';
const inputClasses = 'premium-tel-input';
// Computed
const hasError = computed(() => {
return props.error || !!props.errorMessage;
});
// Methods
const toggleCountryDropdown = () => {
if (!props.disabled) {
showCountryDropdown.value = !showCountryDropdown.value;
if (showCountryDropdown.value) {
countrySearch.value = '';
}
}
};
const closeCountryDropdown = () => {
showCountryDropdown.value = false;
countrySearch.value = '';
};
const selectCountry = (country: Country) => {
selectedCountry.value = country;
showCountryDropdown.value = false;
countrySearch.value = '';
// Emit updated full phone number
emit('update:modelValue', fullPhoneNumber.value);
emit('phone-data', {
country: country,
nationalNumber: phoneNumber.value,
internationalNumber: fullPhoneNumber.value,
isValid: isValidPhone.value
});
};
const handleFocus = () => {
isFocused.value = true;
};
const handleBlur = () => {
isFocused.value = false;
};
const handlePhoneInput = (value: string) => {
// Format the phone number as user types
let formatted = value;
// Remove any non-digits for processing
const digits = value.replace(/\D/g, '');
// Apply country-specific formatting
switch (selectedCountry.value.iso2) {
case 'MC':
case 'FR':
// Format as XX XX XX XX XX
if (digits.length > 0) {
formatted = digits.replace(/(\d{2})(?=\d)/g, '$1 ').trim();
}
break;
case 'US':
case 'CA':
// Format as (XXX) XXX-XXXX
if (digits.length >= 6) {
formatted = `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
} else if (digits.length >= 3) {
formatted = `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
} else {
formatted = digits;
}
break;
case 'GB':
// Format as XXXXX XXXXXX
if (digits.length > 5) {
formatted = `${digits.slice(0, 5)} ${digits.slice(5)}`;
} else {
formatted = digits;
}
break;
default:
// Default formatting with spaces every 3 digits
formatted = digits.replace(/(\d{3})(?=\d)/g, '$1 ').trim();
}
phoneNumber.value = formatted;
// Emit the full international number
const fullNumber = fullPhoneNumber.value;
emit('update:modelValue', fullNumber);
emit('phone-data', {
country: selectedCountry.value,
nationalNumber: phoneNumber.value,
internationalNumber: fullNumber,
isValid: isValidPhone.value
});
};
// Initialize phone number from modelValue
// Watch for external model value changes
watch(() => props.modelValue, (newValue) => {
if (newValue) {
// Try to extract country code and number
for (const country of countries) {
if (newValue.startsWith(country.dialCode)) {
selectedCountry.value = country;
phoneNumber.value = newValue.slice(country.dialCode.length).trim();
break;
if (newValue !== phoneValue.value) {
phoneValue.value = newValue || '';
}
}
} else {
phoneNumber.value = '';
}
}, { immediate: true });
});
// Click outside directive
const vClickOutside = {
mounted(el: any, binding: any) {
const handler = (event: Event) => {
if (!el.contains(event.target as Node)) {
binding.value();
}
// Watch internal value changes
watch(phoneValue, (newValue) => {
emit('update:modelValue', newValue || '');
});
// Event handlers
const handlePhoneInput = (phoneNumber: string, phoneObject: PhoneObject) => {
phoneValue.value = phoneNumber;
emit('update:modelValue', phoneNumber);
emit('phone-data', phoneObject);
};
el.__clickOutsideHandler = handler;
document.addEventListener('click', handler);
},
unmounted(el: any) {
if (el.__clickOutsideHandler) {
document.removeEventListener('click', el.__clickOutsideHandler);
delete el.__clickOutsideHandler;
}
}
const handleCountryChange = (country: any) => {
emit('country-changed', country);
};
const handleValidation = (phoneObject: PhoneObject) => {
emit('validate', phoneObject);
};
// Initialize with model value
onMounted(() => {
if (props.modelValue) {
phoneValue.value = props.modelValue;
}
});
</script>
<style scoped>
.premium-phone-input-wrapper {
.premium-phone-wrapper {
width: 100%;
position: relative;
}
@ -344,225 +181,182 @@ const vClickOutside = {
margin-bottom: 8px;
}
.premium-phone-container {
display: flex;
align-items: center;
background: rgb(var(--v-theme-surface));
border: 2px solid rgba(var(--v-theme-outline), 0.38);
border-radius: 12px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
.phone-input-container {
position: relative;
border-radius: 8px;
transition: all 0.2s ease;
}
.premium-phone-container:hover {
border-color: rgba(var(--v-theme-on-surface), 0.6);
box-shadow: 0 2px 8px rgba(var(--v-theme-on-surface), 0.04);
}
.premium-phone-container--focused {
border-color: rgb(var(--v-theme-primary)) !important;
box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.12);
}
.premium-phone-container--error {
.phone-input-container--error :deep(.vue-tel-input) {
border-color: rgb(var(--v-theme-error)) !important;
box-shadow: 0 0 0 3px rgba(var(--v-theme-error), 0.12);
}
.premium-phone-container--disabled {
background: rgba(var(--v-theme-on-surface), 0.04);
border-color: rgba(var(--v-theme-outline), 0.24);
cursor: not-allowed;
.phone-input-container--disabled {
opacity: 0.6;
pointer-events: none;
}
/* Country Selector Section */
.country-selector-section {
position: relative;
flex-shrink: 0;
/* Vue Tel Input Styling */
.vue-tel-input-styled :deep(.vue-tel-input) {
border: 2px solid rgba(var(--v-theme-outline), 0.38);
border-radius: 8px;
background: rgb(var(--v-theme-surface));
transition: all 0.2s ease;
overflow: hidden;
}
.selected-country-display {
.vue-tel-input-styled :deep(.vue-tel-input:hover) {
border-color: rgba(var(--v-theme-on-surface), 0.6);
}
.vue-tel-input-styled :deep(.vue-tel-input:focus-within) {
border-color: rgb(var(--v-theme-primary));
box-shadow: 0 0 0 2px rgba(var(--v-theme-primary), 0.12);
}
/* Country Selection Styling */
.vue-tel-input-styled :deep(.country-selector) {
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.04) 0%, rgba(var(--v-theme-primary), 0.08) 100%);
border-right: 1px solid rgba(var(--v-theme-outline), 0.12);
padding: 14px 12px;
cursor: pointer;
transition: all 0.2s ease;
min-width: 80px;
display: flex;
align-items: center;
gap: 8px;
padding: 16px 12px;
cursor: pointer;
transition: background-color 0.2s ease;
border-radius: 8px 0 0 8px;
min-width: 120px;
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.02) 0%, rgba(var(--v-theme-primary), 0.06) 100%);
border-right: 1px solid rgba(var(--v-theme-outline), 0.12);
}
.selected-country-display:hover {
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.06) 0%, rgba(var(--v-theme-primary), 0.12) 100%);
.vue-tel-input-styled :deep(.country-selector:hover) {
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.08) 0%, rgba(var(--v-theme-primary), 0.16) 100%);
}
.flag-container {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 18px;
border-radius: 3px;
overflow: hidden;
.vue-tel-input-styled :deep(.country-selector .iti-flag) {
width: 20px;
height: 15px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.flag-emoji {
font-size: 16px;
line-height: 1;
}
.country-code {
.vue-tel-input-styled :deep(.country-selector .selection) {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 0.875rem;
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
min-width: 40px;
}
.dropdown-icon {
transition: transform 0.2s ease;
/* Input Field Styling */
.vue-tel-input-styled :deep(.vue-tel-input input) {
border: none !important;
outline: none !important;
padding: 14px 16px;
font-size: 1rem;
font-weight: 500;
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
background: transparent;
flex: 1;
font-family: 'Roboto', sans-serif;
}
.vue-tel-input-styled :deep(.vue-tel-input input::placeholder) {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-weight: 400;
}
.dropdown-icon.rotated {
transform: rotate(180deg);
}
/* Country Dropdown */
.country-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
/* Dropdown Styling - COMPACT AND BEAUTIFUL */
.vue-tel-input-styled :deep(.country-list) {
background: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-outline), 0.24);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
margin-top: 4px;
overflow: hidden;
backdrop-filter: blur(8px);
}
.country-search {
padding: 12px;
border-bottom: 1px solid rgba(var(--v-theme-outline), 0.12);
background: rgba(var(--v-theme-primary), 0.02);
}
.country-list {
max-height: 200px;
overflow-y: auto;
max-height: 240px !important; /* COMPACT HEIGHT */
scrollbar-width: thin;
scrollbar-color: rgba(var(--v-theme-primary), 0.3) transparent;
}
.country-list::-webkit-scrollbar {
.vue-tel-input-styled :deep(.country-list::-webkit-scrollbar) {
width: 6px;
}
.country-list::-webkit-scrollbar-track {
.vue-tel-input-styled :deep(.country-list::-webkit-scrollbar-track) {
background: transparent;
}
.country-list::-webkit-scrollbar-thumb {
.vue-tel-input-styled :deep(.country-list::-webkit-scrollbar-thumb) {
background: rgba(var(--v-theme-primary), 0.3);
border-radius: 3px;
}
.country-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
/* Country List Items - COMPACT AND CLEAN */
.vue-tel-input-styled :deep(.country-list li) {
padding: 10px 16px !important; /* COMPACT PADDING */
cursor: pointer;
transition: all 0.15s ease;
border-bottom: 1px solid rgba(var(--v-theme-outline), 0.06);
display: flex;
align-items: center;
gap: 12px;
font-size: 0.875rem !important; /* SMALLER FONT */
line-height: 1.2 !important;
}
.country-option:hover {
.vue-tel-input-styled :deep(.country-list li:hover) {
background: rgba(var(--v-theme-primary), 0.08);
transform: translateX(2px);
}
.country-option.selected {
.vue-tel-input-styled :deep(.country-list li.highlighted) {
background: rgba(var(--v-theme-primary), 0.12);
font-weight: 600;
color: rgb(var(--v-theme-primary));
}
.country-option:last-child {
.vue-tel-input-styled :deep(.country-list li.preferred) {
background: linear-gradient(90deg, rgba(var(--v-theme-primary), 0.04) 0%, transparent 100%);
border-left: 3px solid rgb(var(--v-theme-primary));
font-weight: 600;
}
.vue-tel-input-styled :deep(.country-list li:last-child) {
border-bottom: none;
}
.country-flag {
font-size: 18px;
width: 24px;
text-align: center;
/* Flag Styling in Dropdown */
.vue-tel-input-styled :deep(.country-list .iti-flag) {
width: 20px !important;
height: 15px !important;
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
}
.country-name {
/* Country Names and Codes */
.vue-tel-input-styled :deep(.country-list .country-name) {
flex: 1;
font-size: 0.875rem;
font-weight: 500;
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
.country-dial-code {
font-size: 0.8125rem;
.vue-tel-input-styled :deep(.country-list .dial-code) {
font-weight: 600;
font-size: 0.8125rem;
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-family: 'Roboto Mono', monospace;
}
/* Phone Input Section */
.phone-input-section {
flex: 1;
min-width: 0;
/* Arrow Icon Styling */
.dropdown-arrow {
transition: transform 0.2s ease;
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}
.phone-number-input {
height: 56px;
}
.phone-number-input :deep(.v-field) {
border: none !important;
box-shadow: none !important;
}
.phone-number-input :deep(.v-field__field) {
padding: 0 16px;
font-size: 1rem;
font-weight: 500;
}
.phone-number-input :deep(.v-field__input) {
padding: 0;
font-family: 'Roboto Mono', 'Roboto', sans-serif;
letter-spacing: 0.5px;
}
/* Validation Section */
.validation-section {
display: flex;
align-items: center;
padding: 0 16px 0 8px;
flex-shrink: 0;
}
.validation-icon {
animation: fadeIn 0.2s ease-in-out;
}
.validation-icon.success {
animation: bounceIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.validation-icon.warning {
animation: shake 0.5s ease-in-out;
.vue-tel-input-styled :deep(.country-selector.open) .dropdown-arrow {
transform: rotate(180deg);
}
/* Error Message */
@ -570,10 +364,10 @@ const vClickOutside = {
display: flex;
align-items: center;
margin-top: 8px;
padding: 8px 12px;
padding: 6px 12px;
background: rgba(var(--v-theme-error), 0.08);
border-radius: 8px;
border-left: 4px solid rgb(var(--v-theme-error));
border-radius: 6px;
border-left: 3px solid rgb(var(--v-theme-error));
}
/* Help Text */
@ -583,85 +377,46 @@ const vClickOutside = {
opacity: 0.8;
}
/* Monaco & France Priority Styling */
.country-option:nth-child(1),
.country-option:nth-child(2) {
background: linear-gradient(90deg, rgba(var(--v-theme-primary), 0.04) 0%, transparent 100%);
border-left: 3px solid rgb(var(--v-theme-primary));
/* Responsive Design */
@media (max-width: 768px) {
.vue-tel-input-styled :deep(.country-selector) {
min-width: 70px;
padding: 12px 10px;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
.vue-tel-input-styled :deep(.vue-tel-input input) {
padding: 12px 14px;
font-size: 0.9375rem;
}
@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
.vue-tel-input-styled :deep(.country-list) {
max-height: 200px !important;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
20%, 40%, 60%, 80% { transform: translateX(2px); }
.vue-tel-input-styled :deep(.country-list li) {
padding: 8px 14px !important;
}
}
/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
.premium-phone-container {
border-color: rgba(var(--v-theme-outline), 0.3);
}
.country-dropdown {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
.vue-tel-input-styled :deep(.country-list) {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.premium-phone-container {
border-radius: 8px;
}
.selected-country-display {
min-width: 100px;
padding: 14px 10px;
}
.country-code {
font-size: 0.8125rem;
}
.phone-number-input :deep(.v-field__field) {
padding: 0 12px;
font-size: 0.9375rem;
}
.country-dropdown {
margin-left: -1px;
margin-right: -1px;
}
}
/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
.phone-number-input :deep(.v-field__input) {
font-size: 16px !important; /* Prevent zoom on focus */
}
}
/* High contrast mode support */
/* High Contrast Support */
@media (prefers-contrast: high) {
.premium-phone-container {
.vue-tel-input-styled :deep(.vue-tel-input) {
border-width: 3px;
}
.country-option.selected {
outline: 2px solid rgb(var(--v-theme-primary));
outline-offset: -2px;
}
/* Monaco and France Priority Visual Enhancement */
.vue-tel-input-styled :deep(.country-list li[data-country-code="mc"]),
.vue-tel-input-styled :deep(.country-list li[data-country-code="fr"]) {
background: linear-gradient(90deg, rgba(var(--v-theme-primary), 0.06) 0%, rgba(var(--v-theme-primary), 0.02) 100%);
border-left: 2px solid rgb(var(--v-theme-primary));
font-weight: 600;
}
</style>

77
package-lock.json generated
View File

@ -22,13 +22,15 @@
"vue": "latest",
"vue-country-flag-next": "^2.3.2",
"vue-router": "latest",
"vue-tel-input": "^9.3.0",
"vuetify-nuxt-module": "^0.18.3"
},
"devDependencies": {
"@types/cookie": "^0.6.0",
"@types/formidable": "^3.4.5",
"@types/mime-types": "^3.0.1",
"@types/node": "^20.0.0"
"@types/node": "^20.0.0",
"@types/vue-tel-input": "^2.1.7"
}
},
"node_modules/@alloc/quick-lru": {
@ -6148,6 +6150,52 @@
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
"license": "MIT"
},
"node_modules/@types/vue-tel-input": {
"version": "2.1.7",
"resolved": "https://registry.npmjs.org/@types/vue-tel-input/-/vue-tel-input-2.1.7.tgz",
"integrity": "sha512-s7bj9VBEQwfSaHDfWJ1KnQ+bgx0N+GT+y3pcsvoEqOZv4zJn/DX3CxNWnyBOQx8hwt3fGWp/aTm/X+fbq91Uiw==",
"dev": true,
"license": "MIT",
"dependencies": {
"vue": "^2.0.0"
}
},
"node_modules/@types/vue-tel-input/node_modules/@vue/compiler-sfc": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
"dev": true,
"dependencies": {
"@babel/parser": "^7.23.5",
"postcss": "^8.4.14",
"source-map": "^0.6.1"
},
"optionalDependencies": {
"prettier": "^1.18.2 || ^2.0.0"
}
},
"node_modules/@types/vue-tel-input/node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"dev": true,
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/@types/vue-tel-input/node_modules/vue": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
"integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/compiler-sfc": "2.7.16",
"csstype": "^3.1.0"
}
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.21",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
@ -14352,6 +14400,23 @@
"node": ">=18"
}
},
"node_modules/prettier": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"dev": true,
"license": "MIT",
"optional": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/pretty-bytes": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
@ -17696,6 +17761,16 @@
"vue": "^3.2.0"
}
},
"node_modules/vue-tel-input": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/vue-tel-input/-/vue-tel-input-9.3.0.tgz",
"integrity": "sha512-8PgAFxO5npztMruL1O0NZxPDJScfc9Qx2mDERErRKS7XQ1l/MSk8rfi0XgPbNdOBiocdweDnikNdo3xSJrQodA==",
"license": "MIT",
"peerDependencies": {
"libphonenumber-js": "^1.10.51",
"vue": "^3.5.4"
}
},
"node_modules/vuetify": {
"version": "3.9.4",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.9.4.tgz",

4
package.json
View File

@ -25,12 +25,14 @@
"vue": "latest",
"vue-country-flag-next": "^2.3.2",
"vue-router": "latest",
"vue-tel-input": "^9.3.0",
"vuetify-nuxt-module": "^0.18.3"
},
"devDependencies": {
"@types/cookie": "^0.6.0",
"@types/formidable": "^3.4.5",
"@types/mime-types": "^3.0.1",
"@types/node": "^20.0.0"
"@types/node": "^20.0.0",
"@types/vue-tel-input": "^2.1.7"
}
}