Download the PHP package victorybiz/laravel-tel-input without Composer
On this page you can find all versions of the php package victorybiz/laravel-tel-input. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download victorybiz/laravel-tel-input
More information about victorybiz/laravel-tel-input
Files in victorybiz/laravel-tel-input
Package laravel-tel-input
Short Description Laravel Telephone Input component for Blade and Livewire based on the intl-tel-input JavaScript plugin.
License MIT
Homepage https://github.com/victorybiz/laravel-tel-input
Informations about the package laravel-tel-input
Laravel Telephone Input
Laravel Telephone Input component for Blade and Livewire based on the intl-tel-input JavaScript plugin.
DEMO PREVIEW
- Simple Usage Demo
- Country Sync Demo
Table of Contents
- Laravel Telephone Input
- DEMO PREVIEW
- Table of Contents
- Installation
- Directives
- Requirements
- Core Dependencies
- Utilities Script
- Configuration
- Usage
- Basic usage
- Add hidden phone-country-input
- Usage with Livewire 2
- Usage with Livewire 3
- Sync tel-input wih a country dropdown
- Event Listener
- Props / Attributes
- Events
- Troubleshooting
- Testing
- Changelog
- Contributing
- Security
- Credits
- License
- Laravel Package Boilerplate
Installation
You can install the package via composer:
Directives
Place the @laravelTelInputStyles
in the <head>
section of your template before any of your other styles. Place the @laravelTelInputScripts
directive in your template right before your closing </body
> tag and after scripts from libraries like Livewire or any other compiled scripts.
Requirements
This package use the following packages.
- International Telephone Input (https://github.com/jackocnr/intl-tel-input)
- Laravel Livewire (https://laravel-livewire.com/) is required when using Livewire
wire:model
Please make sure you install and include these dependencies before using this component.
Core Dependencies
This package uses intl-tel-input under the hood. For the dependency, we recommend you install them through npm or yarn, and then require them in your project's JavaScript. To install each of the dependencies this package makes use of, run this command in the terminal:
Or Yarn:
Import JS
Import CSS:
If you’re using the compiled JavaScript, don’t forget to include the download or CDN versions of the dependencies before it. Please refer to the intl-tel-input readme for additional installation steps.
Utilities Script
Update your webpack.mix.js
to copy the utils.js
script to your public
directory or publish the configuration file to set a custom path.
Configuration
To customize the component, you should publish the configuration file using the vendor:publish
Artisan command. The configuration file will be placed in your application's config directory:
Please refer to the intl-tel-input readme for plugin options.
Usage
Basic usage
Add hidden phone-country-input
Usage with Livewire 2
Usage with Livewire 3
Sync tel-input wih a country dropdown
Event Listener
Props / Attributes
Name | Type | Default | Required | Description |
---|---|---|---|---|
id | String |
Yes | Used to identify the component in events. | |
name | String |
phone |
Yes | Specifies a name for component. |
phone-country-input | String |
No | Used to model or sync the selected phone country to another <input> or <select> input. |
|
value | String\|\|Integer |
null |
No | Presets the input value. Equivalent to the value attribute on <input> . |
placeholder | String |
'Phone number' |
No | Equivalent to the placeholder attribute on <input> . |
class | String |
No | Equivalent to the class attribute on <input> input. |
|
required | Boolean |
false |
No | Equivalent to the required attribute on <input> input. |
disabled | Boolean |
false |
No | Equivalent to the disabled attribute on <input> input. |
Events
Name | Listen to | Description |
---|---|---|
telchange | telchange |
Emitted when tel input value change. See example above. |
Troubleshooting
-
tel-input not rendering in Livewire after component update, refresh or change in DOM content.
The most common issues encountered by Livewire users has to do with Livewire's DOM diffing/patching system. This is the system that selectively updates elements that have been changed, added, or removed after every component update.
For the most part, this system is reliable, but there are certain cases where Livewire is unable to properly track changes. When this happens, hopefully, a helpful error will be thrown and you can debug with the following guide.
If a tel-input fails to render after component update like opening popup/modal with a
tel-input
or switch to tab section with a form containing atel-input
, to fix this, dispatch atelDOMChanged
browser event in the action that triggers/opens the popup or form tab.In some cases where the popup form contains a tel-input with pre-filled values/phone numbers from the component
mount()
and dispatching browser event is not possible from the component. Add the following javascript codes to the end of of the component blade view.
Testing
Changelog
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
Credits
- Victory Osayi Airuoyuwa
- All Contributors
License
The MIT License (MIT). Please see License File for more information.
Laravel Package Boilerplate
This package was generated using the Laravel Package Boilerplate.