87 lines
2.7 KiB
Vue
87 lines
2.7 KiB
Vue
<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>
|