mountainclans/livewire-phone-input

Phone input component for Livewire 3

Доработанная под использование с 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'

Добавьте переменную с параметрами конфигурации в подвал:

<script>
    window.laravelTelInputConfig = {
        "allowDropdown": true,
        "autoHideDialCode": true,
        "autoPlaceholder": "polite",
        "customContainer": "",
        "customPlaceholder": null,
        "dropdownContainer": null,
        "excludeCountries": [],
        "formatOnDisplay": true,
        "geoIpLookup": "ipinfo",
        "initialCountry": '{{ $phonePreferredCountry }}',
        "localizedCountries": [],
        "nationalMode": true,
        "onlyCountries": [],
        "placeholderNumberType": "MOBILE",
        "preferredCountries": ["ES", "DE", "RU", "US", "GB", "KZ"],
        "separateDialCode": false,
        "utilsScript": "./utils.js"
    }
</script>

Обязательно переопределите $phonePreferredCountry!

Пример функции для получения этой переменной:

public function preferredPhoneInputLocale(): string
{
   return match(app()->currentLocale()) {
       'ru' => 'RU',
       'kk' => 'KZ',
       default => 'GB',
   };
}

Переводы

Названия стран и тексты интерфейса берутся из переводов intl-tel-input. Зарегистрируйте нужные языки в resources/js/app.js — ключ совпадает с локалью приложения:

import ru from 'intl-tel-input/i18n/ru';
window.laravelTelInputI18n = {ru};

Без регистрации названия стран остаются английскими.

Текст поля поиска стран и сообщение «ничего не найдено» задаются ключами перевода в конфиге:

php artisan vendor:publish --tag="livewire-phone-input-config"

'search_placeholder' => 'livewire-phone-input::phone-input.search',
'no_results' => 'livewire-phone-input::phone-input.no_results',

В пакете есть переводы на английский, русский, испанский, немецкий и французский. Чтобы поменять текст, укажите свой ключ или опубликуйте переводы пакета: php artisan vendor:publish --tag="livewire-phone-input-translations".

Поле пропускает только цифры и + в начале, в том числе при вставке. Отключить: "strictMode": false в window.laravelTelInputConfig.

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

<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"
                  :default-classes="false"
                  initial-country="RU"
/>

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

Используйте prop :default-classes="false", если Вы хотите полностью переопределить внешний вид 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.