mountainclans/livewire-phone-input

Phone input component for Livewire 3

dev-main 2025-07-03 14:00 UTC

Requires

• php: ^8.2
• illuminate/contracts: ^10.0||^11.0||^12.0
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• laravel/pint: ^1.14
• nunomaduro/collision: ^8.1.1||^7.10.0
• orchestra/testbench: ^10.0.0||^9.0.0||^8.22.0
• pestphp/pest: ^3.0
• pestphp/pest-plugin-arch: ^3.0
• pestphp/pest-plugin-laravel: ^3.0

MIT

• Vladimir Bajenov

• laravel
• Mountain Clans
• livewire-phone-input

README

Доработанная под использование с Vite версия компонента телефонного ввода

Установка

Установите пакет при помощи Composer:

composer require mountainclans/livewire-phone-input

Поскольку функциональность пакета основана на пакете Intl Tel Input, установите его через npm:

npm install intl-tel-input --save

Добавьте в файл проекта resources/js/app.js строки

import intlTelInput from 'intl-tel-input/intlTelInputWithUtils';
import '../../vendor/mountainclans/livewire-phone-input/resources/js/phoneInput';
window.intlTelInput = window.intlTelInputGlobals = intlTelInput;

Добавьте в файл проекта resources/js/app.css строки:

@import 'intl-tel-input/build/css/intlTelInput.css';
@import '../../vendor/mountainclans/livewire-phone-input/resources/css/phoneInput.css';

Обратите внимание, что для корректной стилизации в вашем проекте должен использоваться TailwindCSS.

Добавьте в tailwind.config.js в секцию content:

'./vendor/mountainclans/livewire-phone-input/resources/views/**/*.blade.php'

Использование

<x-ui.phone-input wire:model="phone"
                  value="{{ $phone }}"
                  phone-country-input="phoneCountry"
                  :label="__('Phone')"
                  id="phone"
                  name="phone"
                  id="phone"
                  class="additional-class-here"
/>

Обратите внимание, что для записи кода страны в родительском компоненте должно присутствовать поле phoneCountry (или любое другое, которые вы передадите в prop phone-country-input).

Если Вам необходимо обновить рендеринг компонента phone-input при действиях на бекэнде, воспользуйтесь трейтом RefreshPhoneInputs:

class YourLivewireComponent extends Component
{
    use MountainClans\LivewirePhoneInput\Traits\RefreshPhoneInputs;
    
    // к примеру, после динамического появления телефонного поля в форме
    public function updatedAddPhone(): void
    {
        $this->refreshPhoneInputs();
    }
}

Авторы

• Vladimir Bazhenov
• Victory Osayi
• Jack O'Connor
• All Contributors

Лицензия

The MIT License (MIT). Please see License File for more information.