Add vanilla address component and Nova address field.

[phuclh]

• Add Address Nova field
• Refactor address javascript into a separate file so we can re-use it everywhere.

Demo: https://youtu.be/RdK0jyGWl98

Component Usage:

Insert the script file to the page:

<script src="{{ asset('js/address.js') }}" async defer type="text/javascript"></script>

Setup the Google API key:

Address.setup({
    googleApiKey: '{{ config('google-api.services.places.key') }}',
    predictionListElement: document.getElementById('results-list'),
    placeElement: document.getElementById('attributions')
});

Then we can do something like this:

Get all predictions from Google API.

Address.getPredictions(query = '123 Street')
.then(res => {
    console.log(res);
})
.catch(error => {
    alert(error);
});

Show/hide prediction list:

Address.showPredictions();
Address.hidePredictions();

Get address info of a place_id:

Address.getAddressInfo(place_id)
.then(res => {
    document.getElementById('address-line-1').value = res.addressLine1;
    document.getElementById('city').value = res.city;
    document.getElementById('state').value = res.state;
    document.getElementById('zip').value = res.zip;

    document.getElementById('address-line-2').focus();
});

Nova Field Usage:

This will create an auto-complete input.

Address::make('Address', 'address_line_1')->postalCode('zip_code'),

When you click an option from the Address field, it will fill other fields like city, postal code, state, etc.

Text::make('City')->required(),

Text::make('Zip', 'zip_code')->required(),

By default, the Address field will auto-complete the associated address fields based on their field names. The Place field will automatically fill fields named address_line_2, city, state, postal_code. However, you may customize the field names that should be auto-completed using the following methods:

• secondAddressLine($column)
• city($column)
• state($column)
• postalCode($column)

Fixes #72 #75