Giter Club home page Giter Club logo

nova-phone-field's Introduction

A global Phone Number field for Laravel Nova

Latest Version on Packagist Total Downloads StyleCI

Nova Phone Number field with a dynamic mask based on the country code inserted by the user.

screenshot of the phone field

Requirements

  • Laravel Nova
  • Laravel Framework 5.7+ / 6.0+

NOTE: For Laravel version <= 5.6 use our package version v.0.0.3

Installation

You can install this package into a Laravel app that uses Nova via composer:

composer require bissolli/nova-phone-field

Usage

Go straight to your Nova resource and use Bissolli\NovaPhoneField\PhoneNumber field:

namespace App\Nova;

use Bissolli\NovaPhoneField\PhoneNumber;

class Member extends Resource
{
    // ...
    
    public function fields(Request $request)
    {
        return [
            // ...
            
            PhoneNumber::make('Phone Number'),

            // ...
        ];
    }
}

Now you can view and add tags on the blog posts screen in your Nova app. All tags will be saved in the tags table.

Filtering

By default, every country mask available inside bissolli/nova-phone-field/resources/js/data/phone-masks.json will be loaded and working. However, you can always select the desired countries calling the onlyCountries() method.

PhoneNumber::make('Phone Number')
    ->onlyCountries('BR', 'US', 'IE'),

Custom number format

You can also add custom phone formats with withCustomFormats().

PhoneNumber::make('Phone Number')
    ->withCustomFormats('+123 ## #.#', '+123 ## ####.####'),

Or else use only your own phone formats calling for withCustomFormats() among with onlyCustomFormats().

PhoneNumber::make('Phone Number')
    ->withCustomFormats('+123 ## #.#', '+123 ## ####.####')
    ->onlyCustomFormats(),

Changelog

Please see CHANGELOG for more information on 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

Special thanks to Robin Herbots who built one of the best InputMask from the internet.

License

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

Support on Beerpay

Hey dude! Help me out for a couple of ๐Ÿป!

Beerpay Beerpay

nova-phone-field's People

Contributors

bissolli avatar drsdre avatar nibri10 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

nova-phone-field's Issues

Cannot read property 'replace' of null

if phone field is null then this error in console

TypeError: Cannot read property 'replace' of null
at a.unmaskedValue (nova-phone-field:1)
at Ne.I3G/.Ne.get (vendor.js?id=b30263b2f9d68433c3ce:1)
at Ne.I3G/.Ne.evaluate (vendor.js?id=b30263b2f9d68433c3ce:1)
at a.unmaskedValue (vendor.js?id=b30263b2f9d68433c3ce:1)
at a.render (nova-phone-field:1)
at a.I3G/.t._render (vendor.js?id=b30263b2f9d68433c3ce:1)
at a.n (vendor.js?id=b30263b2f9d68433c3ce:1)
at Ne.I3G/.Ne.get (vendor.js?id=b30263b2f9d68433c3ce:1)
at new Ne (vendor.js?id=b30263b2f9d68433c3ce:1)
at vendor.js?id=b30263b2f9d68433c3ce:1

Kindly force the direction to be (ltr) for the input style (for rtl layouts)

Hey!
Thank you for amazing work.

Kindly always force the direction to be ltr as styling the input because when the page's direction is rtl for other languages the input mask does not show as expected.

current:
Screenshot 2020-03-26 04 10 07

If direction is ltr:
Screenshot 2020-03-26 04 12 21

and phone numbers are handled left to right for all languages as far as i know

Thanks!

Suggestion: Can we forbid the number for the first step of number

For example: (+XX) YYY-ZZ-WW
This is the number format.
In my country country and most of the other countries phone codes end with "0".
+70 707 70 70 or +90 909 90 90
But when people calling each other without "+9"
0707 70 70 / 0909 90 90
So my customers cant figure out default country code section and writing one more 0.
writing "+90 090 09 09" instead of "+90 909 90 90".
I hope i could express myself. I can override your code but i can use your package all the time i sure :) And other people may need to this. We need to block 0 for 4. string.
+90 X.... This X can't be 0. Can we do this? Or should i just override?

The problem with validation

Hello. How to validate a value if the value in the field is not specified?

I made a field
->onlyCountries('RU')
Mask : +7 (###) ###-##-##

and added a validation rule:

->rules(['nullable', 'regex:/^(\+7) \(\d{3}\) \d{3}-\d{2}-\d{2}$/'])

If I erase the value from the field and try to save the form, then the value +7 (___) ___-__-__ inevitably comes in the request

It seems to me that you should make it so that the mask is activated only by input / focus ...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.