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

Refactor mobile detection to use unified composable
All checks were successful
Build And Push Image / docker (push) Successful in 2m52s
Details

Browse Source 
- Add useMobileDetection composable to centralize device detection logic
- Replace direct utility imports with composable usage across components
- Update MultipleNationalityInput, PhoneInputWrapper, and auth pages
- Simplify mobile-specific styling and behavior handling
- Improve code maintainability by consolidating detection logic
This commit is contained in:
Matt
2025-08-09 19:27:15 +02:00
parent d14008efd4
commit 2b2cd5891f
8 changed files with 310 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/MultipleNationalityInput.vue
View File

@@ -214,12 +214,8 @@
</template>
<script setup lang="ts">
import { getAllCountries, getCountryName } from '~/utils/countries';
import {
getDeviceInfo,
needsPerformanceOptimization,
getOptimizedClasses
} from '~/utils/mobile-safari-utils';
import { getAllCountries, searchCountries } from '~/utils/countries';
import { useMobileDetection } from '~/composables/useMobileDetection';
interface Props {
modelValue?: string; // Comma-separated string like "FR,MC,US"
@@ -245,10 +241,10 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<Emits>();
// Mobile Safari detection
const deviceInfo = ref(getDeviceInfo());
const isMobileSafari = computed(() => deviceInfo.value.isMobileSafari);
const needsPerformanceMode = computed(() => needsPerformanceOptimization());
// Use unified mobile detection
const mobileDetection = useMobileDetection();
const isMobileSafari = computed(() => mobileDetection.isMobileSafari);
const needsPerformanceMode = computed(() => mobileDetection.isMobileSafari || mobileDetection.isMobile);
// Parse initial nationalities from comma-separated string
const parseNationalities = (value: string): string[] => {
@@ -344,6 +340,14 @@ const updateNationalities = () => {
emit('update:modelValue', result);
};
// Helper methods
const getCountryName = (countryCode: string): string => {
if (!countryCode) return '';
const countries = getAllCountries();
const country = countries.find(c => c.code === countryCode);
return country?.name || '';
};
// Mobile Safari specific methods
const getSelectedCountryName = (countryCode: string): string => {
if (!countryCode) return '';

310
components/PhoneInputWrapper.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="phone-input-wrapper" :class="{ 'phone-input-wrapper--mobile': isMobile }">
<div class="phone-input-wrapper" :class="{ 'phone-input-wrapper--mobile': mobileDetection.isMobile }">
<v-text-field
v-model="localNumber"
:label="label"
@@ -11,7 +11,7 @@
:required="required"
:disabled="disabled"
variant="outlined"
:density="isMobile ? 'default' : 'comfortable'"
:density="mobileDetection.isMobile ? 'default' : 'comfortable'"
class="phone-text-field"
@input="handleInput"
@blur="handleBlur"
@@ -21,13 +21,11 @@
<v-menu
v-model="dropdownOpen"
:close-on-content-click="false"
:location="isMobile ? undefined : 'bottom start'"
:offset="isMobile ? 0 : 4"
:min-width="isMobile ? undefined : '280'"
:transition="isMobile ? 'fade-transition' : 'fade-transition'"
:no-click-animation="isMobile"
:attach="isMobile"
:strategy="isMobile ? 'fixed' : 'absolute'"
location="bottom start"
:offset="4"
:min-width="mobileDetection.isMobile ? '90vw' : '280'"
transition="fade-transition"
:no-click-animation="true"
>
<template #activator="{ props: menuProps }">
<div
@@ -35,7 +33,7 @@
class="country-selector"
:class="{
'country-selector--open': dropdownOpen,
'country-selector--mobile': isMobile
'country-selector--mobile': mobileDetection.isMobile
}"
>
<img
@@ -46,7 +44,7 @@
/>
<span class="country-code">{{ selectedCountry.dialCode }}</span>
<v-icon
:size="isMobile ? 18 : 16"
:size="mobileDetection.isMobile ? 18 : 16"
class="dropdown-icon"
:class="{ 'dropdown-icon--rotated': dropdownOpen }"
>
@@ -55,23 +53,14 @@
</div>
</template>
<!-- Mobile Full-Screen Overlay -->
<div
v-if="isMobile && dropdownOpen"
class="mobile-overlay"
@click="closeDropdown"
@touchstart="handleOverlayTouch"
/>
<!-- Dropdown Content -->
<v-card
class="country-dropdown"
:class="{ 'country-dropdown--mobile': isMobile }"
elevation="8"
:style="isMobile ? 'display: block !important;' : ''"
:class="{ 'country-dropdown--mobile': mobileDetection.isMobile }"
:elevation="mobileDetection.isMobile ? 24 : 8"
>
<!-- Mobile Header -->
<div v-if="isMobile" class="mobile-header">
<div v-if="mobileDetection.isMobile" class="mobile-header">
<h3 class="mobile-title">Select Country</h3>
<v-btn
icon="mdi-close"
@@ -88,11 +77,11 @@
v-model="searchQuery"
placeholder="Search countries..."
variant="outlined"
:density="isMobile ? 'default' : 'compact'"
:density="mobileDetection.isMobile ? 'default' : 'compact'"
prepend-inner-icon="mdi-magnify"
hide-details
class="search-input"
:autofocus="!isMobile"
:autofocus="!mobileDetection.isMobile"
clearable
/>
</div>
@@ -100,8 +89,8 @@
<!-- Country List -->
<v-list
class="country-list"
:class="{ 'country-list--mobile': isMobile }"
:density="isMobile ? 'default' : 'compact'"
:class="{ 'country-list--mobile': mobileDetection.isMobile }"
:density="mobileDetection.isMobile ? 'default' : 'compact'"
>
<v-list-item
v-for="country in filteredCountries"
@@ -110,25 +99,24 @@
'country-item': true,
'country-item--selected': country.iso2 === selectedCountry.iso2,
'country-item--preferred': isPreferredCountry(country.iso2),
'country-item--mobile': isMobile
'country-item--mobile': mobileDetection.isMobile
}"
@click="selectCountry(country)"
@touchstart="handleCountryTouch"
:ripple="isMobile"
:ripple="mobileDetection.isMobile"
>
<template #prepend>
<img
:src="getCountryFlagUrl(country.iso2)"
:alt="`${country.name} flag`"
class="list-flag"
:class="{ 'list-flag--mobile': isMobile }"
:class="{ 'list-flag--mobile': mobileDetection.isMobile }"
@error="handleFlagError"
/>
</template>
<v-list-item-title
class="country-name"
:class="{ 'country-name--mobile': isMobile }"
:class="{ 'country-name--mobile': mobileDetection.isMobile }"
>
{{ country.name }}
</v-list-item-title>
@@ -136,7 +124,7 @@
<template #append>
<span
class="dial-code"
:class="{ 'dial-code--mobile': isMobile }"
:class="{ 'dial-code--mobile': mobileDetection.isMobile }"
>
{{ country.dialCode }}
</span>
@@ -145,7 +133,7 @@
</v-list>
<!-- Mobile Footer -->
<div v-if="isMobile" class="mobile-footer">
<div v-if="mobileDetection.isMobile" class="mobile-footer">
<v-btn
block
variant="text"
@@ -165,6 +153,7 @@
<script setup lang="ts">
import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
import { getPhoneCountriesWithPreferred, searchPhoneCountries, getPhoneCountryByCode, type PhoneCountry } from '~/utils/phone-countries';
import { useMobileDetection } from '~/composables/useMobileDetection';
interface Props {
modelValue?: string;
@@ -197,6 +186,9 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<Emits>();
// Use unified mobile detection
const mobileDetection = useMobileDetection();
// Get comprehensive countries list
const countries = getPhoneCountriesWithPreferred(props.preferredCountries);
@@ -208,26 +200,9 @@ const selectedCountry = ref<PhoneCountry>(
getPhoneCountryByCode(props.defaultCountry) || countries[0]
);
// Mobile detection
const isMobile = ref(false);
// Computed
const flagUrl = computed(() => getCountryFlagUrl(selectedCountry.value.iso2));
// Mobile detection on mount
onMounted(() => {
const checkMobile = () => {
isMobile.value = window.innerWidth <= 768 || 'ontouchstart' in window;
};
checkMobile();
window.addEventListener('resize', checkMobile);
onUnmounted(() => {
window.removeEventListener('resize', checkMobile);
});
});
const filteredCountries = computed(() => {
return searchPhoneCountries(searchQuery.value, props.preferredCountries);
});
@@ -241,18 +216,10 @@ const isPreferredCountry = (iso2: string) => {
return props.preferredCountries.includes(iso2);
};
const toggleDropdown = () => {
if (!props.disabled) {
dropdownOpen.value = !dropdownOpen.value;
if (dropdownOpen.value) {
searchQuery.value = '';
}
}
};
const selectCountry = (country: PhoneCountry) => {
selectedCountry.value = country;
dropdownOpen.value = false;
searchQuery.value = ''; // Clear search on selection
emit('country-changed', country);
// Reformat existing number with new country
@@ -314,25 +281,6 @@ const closeDropdown = () => {
searchQuery.value = '';
};
const handleTouchStart = (event: TouchEvent) => {
// Allow natural touch behavior, just ensure dropdown works
if (!dropdownOpen.value && !props.disabled) {
dropdownOpen.value = true;
searchQuery.value = '';
}
};
const handleOverlayTouch = (event: TouchEvent) => {
// Close dropdown when touching overlay
event.preventDefault();
closeDropdown();
};
const handleCountryTouch = (event: TouchEvent) => {
// Allow touch to work naturally for country selection
// Don't prevent default as it interferes with click events
};
// Initialize from modelValue
watch(() => props.modelValue, (newValue) => {
if (newValue && newValue !== selectedCountry.value.dialCode + localNumber.value.replace(/\D/g, '')) {
@@ -357,6 +305,16 @@ watch(() => props.modelValue, (newValue) => {
}
}
}, { immediate: true });
// Clean up search query when dropdown closes
watch(dropdownOpen, (isOpen) => {
if (!isOpen) {
// Clear search after a small delay to allow selection to complete
setTimeout(() => {
searchQuery.value = '';
}, 100);
}
});
</script>
<style scoped>
@@ -375,6 +333,8 @@ watch(() => props.modelValue, (newValue) => {
background: rgba(var(--v-theme-surface), 1);
border: 1px solid transparent;
margin-right: 8px;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.country-selector:hover {
@@ -438,6 +398,7 @@ watch(() => props.modelValue, (newValue) => {
max-height: 300px;
overflow-y: auto;
background: rgba(var(--v-theme-surface), 1);
-webkit-overflow-scrolling: touch;
}
.country-list::-webkit-scrollbar {
@@ -494,19 +455,6 @@ watch(() => props.modelValue, (newValue) => {
font-family: 'Roboto Mono', monospace;
}
/* Mobile Overlay */
.mobile-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1999;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Mobile Header */
.mobile-header {
display: flex;
@@ -550,57 +498,33 @@ watch(() => props.modelValue, (newValue) => {
border-radius: 8px;
min-height: 44px; /* Touch-friendly size */
align-items: center;
-webkit-tap-highlight-color: transparent;
}
.country-selector--mobile:hover {
background: rgba(var(--v-theme-primary), 0.12);
.country-selector--mobile:active {
background: rgba(var(--v-theme-primary), 0.16);
}
.country-dropdown--mobile {
position: fixed !important;
top: 10% !important;
left: 5% !important;
right: 5% !important;
width: 90vw !important;
max-width: 400px !important;
min-height: 400px !important;
max-height: 80vh !important;
height: auto !important;
margin: 0 auto !important;
border-radius: 16px !important;
z-index: 2000 !important;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
max-height: 70vh !important;
}
.country-list--mobile {
flex: 1 !important;
min-height: 200px !important;
max-height: calc(60vh - 120px) !important;
overflow-y: auto !important;
max-height: calc(50vh - 120px) !important;
-webkit-overflow-scrolling: touch;
}
.country-list--mobile::-webkit-scrollbar {
width: 8px;
}
.country-list--mobile::-webkit-scrollbar-thumb {
background: rgba(var(--v-theme-primary), 0.4);
border-radius: 4px;
}
.country-item--mobile {
min-height: 56px !important;
padding: 12px 20px !important;
border-left-width: 4px !important;
-webkit-tap-highlight-color: transparent;
}
.country-item--mobile:active {
background: rgba(var(--v-theme-primary), 0.16) !important;
transform: scale(0.98);
}
.list-flag--mobile {
@@ -636,7 +560,7 @@ watch(() => props.modelValue, (newValue) => {
}
.country-list {
max-height: 200px;
max-height: 250px;
}
.country-selector {
@@ -644,74 +568,11 @@ watch(() => props.modelValue, (newValue) => {
padding: 6px 10px;
}
.country-flag {
width: 24px;
height: 18px;
}
.country-code {
font-size: 0.875rem;
min-width: 36px;
}
.search-container {
padding: 16px;
}
.search-input :deep(.v-field) {
.search-input :deep(.v-field__input) {
font-size: 16px !important; /* Prevent zoom */
}
}
@media (max-width: 480px) {
.country-dropdown--mobile {
width: 95vw !important;
max-height: 85vh !important;
border-radius: 12px !important;
}
.country-list--mobile {
max-height: calc(65vh - 140px) !important;
}
.country-item--mobile {
min-height: 52px !important;
padding: 10px 16px !important;
}
.mobile-header,
.mobile-footer,
.search-container {
padding: 12px 16px;
}
.mobile-title {
font-size: 1rem;
}
}
/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
.country-dropdown--mobile {
max-height: 90vh !important;
width: 60vw !important;
max-width: 500px !important;
}
.country-list--mobile {
max-height: calc(75vh - 120px) !important;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.country-flag,
.list-flag {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
.phone-input-wrapper--mobile .phone-text-field :deep(.v-field__input) {
@@ -719,79 +580,22 @@ watch(() => props.modelValue, (newValue) => {
-webkit-appearance: none;
}
.country-dropdown--mobile {
-webkit-backdrop-filter: blur(8px);
.search-input :deep(.v-field__input) {
font-size: 16px !important;
-webkit-appearance: none;
}
.mobile-overlay {
-webkit-backdrop-filter: blur(4px);
.country-list {
-webkit-overflow-scrolling: touch;
}
}
/* Android specific fixes */
@media (pointer: coarse) {
.country-item--mobile {
min-height: 56px !important; /* Material Design touch target */
}
.country-selector--mobile {
min-height: 48px !important;
}
}
/* Accessibility improvements for mobile */
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.country-item--mobile,
.country-selector--mobile {
.country-item,
.country-selector,
.dropdown-icon {
transition: none !important;
}
.mobile-overlay {
backdrop-filter: none;
}
.country-dropdown--mobile {
backdrop-filter: none;
}
}
/* High contrast mode for mobile */
@media (prefers-contrast: high) {
.country-dropdown--mobile {
border: 3px solid rgb(var(--v-theme-outline));
}
.country-item--mobile {
border-bottom: 1px solid rgb(var(--v-theme-outline));
}
.mobile-header {
border-bottom: 2px solid rgb(var(--v-theme-outline));
}
}
/* Dark theme support */
@media (prefers-color-scheme: dark) {
.country-dropdown {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.country-dropdown--mobile {
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6) !important;
}
.mobile-overlay {
background: rgba(0, 0, 0, 0.7);
}
}
/* Safe area handling for notched devices */
@supports (padding: max(0px)) {
.country-dropdown--mobile {
padding-top: max(16px, env(safe-area-inset-top));
padding-bottom: max(16px, env(safe-area-inset-bottom));
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
}
</style>