Phone Number

Tu peux utiliser la librairie int tel input. J'ai deja eu a mettre ca en place avec AlpineJS. Après avoir installé la lib dans ton projet tu peux faire quelque chose comme ceci

Code AlpineJs.

 1// internationalNumber.js
 2import intlTelInput from 'intl-tel-input'
 3 
 4export default (element) => ({
 5  input: element,
 6 
 7  init() {
 8    const phoneNumber = document.querySelector(this.input);
 9    let iti = intlTelInput(phoneNumber, {
10      nationalMode: true,
11      geoIpLookup: function(success, failure) {
12        fetch('https://ipinfo.io').then(response => {
13          let countryCode = (response && response.country) ? response.country : 'CM'
14          success(countryCode)
15        })
16      },
17      utilsScript: 'https://unpkg.com/intl-tel-input@17.0.3/build/js/utils.js'
18    })
19    let handleChange = () => {
20      if (iti.isValidNumber()) {
21        phoneNumber.value = iti.getNumber()
22      }
23    };
24    phoneNumber.addEventListener('change', handleChange)
25    phoneNumber.addEventListener('keyup', handleChange)
26  }
27})
 1// internationalNumber.js
 2import intlTelInput from 'intl-tel-input'
 3 
 4export default (element) => ({
 5  input: element,
 6 
 7  init() {
 8    const phoneNumber = document.querySelector(this.input);
 9    let iti = intlTelInput(phoneNumber, {
10      nationalMode: true,
11      geoIpLookup: function(success, failure) {
12        fetch('https://ipinfo.io').then(response => {
13          let countryCode = (response && response.country) ? response.country : 'CM'
14          success(countryCode)
15        })
16      },
17      utilsScript: 'https://unpkg.com/intl-tel-input@17.0.3/build/js/utils.js'
18    })
19    let handleChange = () => {
20      if (iti.isValidNumber()) {
21        phoneNumber.value = iti.getNumber()
22      }
23    };
24    phoneNumber.addEventListener('change', handleChange)
25    phoneNumber.addEventListener('keyup', handleChange)
26  }
27})

Et dans ton fichier javascript principal ou tu charges AlpineJS tu peux faire ceci

1import internationalNumber from './internationalNumber'
2 
3Alpine.data('internationalNumber', internationalNumber)
4 
5Alpine.start()
1import internationalNumber from './internationalNumber'
2 
3Alpine.data('internationalNumber', internationalNumber)
4 
5Alpine.start()

Et puis n'importe ou dans un fichier blade.php tu peux juste faire ceci

 1<div wire:ignore x-data="internationalNumber('#phone_number')" class="col-span-6 sm:col-span-3">
 2    <x-forms.group for="phone_number" :label="__('Phone Number')">
 3        <x-forms.input wire:model.defer="phone_number" id="phone_number" type="tel" class="pr-10" autocomplete="off" />
 4        @error('shop_phone_number')
 5            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
 6                <svg class="w-5 h-5 text-danger-500" fill="currentColor" viewBox="0 0 20 20">
 7                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
 8                </svg>
 9            </div>
10        @enderror
11    </x-forms.group>
12</div>
 1<div wire:ignore x-data="internationalNumber('#phone_number')" class="col-span-6 sm:col-span-3">
 2    <x-forms.group for="phone_number" :label="__('Phone Number')">
 3        <x-forms.input wire:model.defer="phone_number" id="phone_number" type="tel" class="pr-10" autocomplete="off" />
 4        @error('shop_phone_number')
 5            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
 6                <svg class="w-5 h-5 text-danger-500" fill="currentColor" viewBox="0 0 20 20">
 7                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
 8                </svg>
 9            </div>
10        @enderror
11    </x-forms.group>
12</div>

Biensur tu adaptes les composants ou tu les remplaces par tes inputs