Skip to content

Commit

Permalink
Refactor component options and classes for improved structure and val…
Browse files Browse the repository at this point in the history 
…idation
  • Loading branch information
@alexpechkarev
alexpechkarev committed Feb 2, 2025
1 parent 34de863 commit e741907
Show file tree
Hide file tree
Showing 7 changed files with 317 additions and 242 deletions.
76 changes: 30 additions & 46 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,19 +69,29 @@ let onResponse = (response) => {


## Component Properties
| Property | Type | Description | Required | Default Value |
|--------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------|
| `PUBLIC_GOOGLE_MAPS_API_KEY` | `String` | Your Google Maps Places API Key. | Yes | |
| `onResponse` | `CustomEvent` | Dispatched when a place is selected, containing the place details. | Yes | |
| `onError` | `CustomEvent` | Dispatched when an error occurs. | No | |
| `placeholder` | `String` | Placeholder text for the input field. | No | `"Search..."` |
| `autocomplete` | `string` | HTML `autocomplete` attribute for the input field. Set to "off" to disable browser autocomplete.
| `autofocus` | `boolean` | The attribute indicating that an element should be focused on page load. | No | `false` |
| `requestParams` | `Object` | Object for additional request parameters (e.g., `types`, `bounds`). See [AutocompleteRequest](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). | No | `{}` |
| `fetchFields` | `Array` | Array of place data fields to return. See [Supported Fields](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult) | No | `['formattedAddress', 'addressComponents']` |
| `classes` | `Object` | Object to override default Tailwind CSS classes applied to the component's elements (input, list, etc.). See the "Basic Usage" section for structure and default class names. | No | *Default Tailwind classes* |

| Property | Type | Description | Required | Default Value |
|--------------------------|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------|
| `PUBLIC_GOOGLE_MAPS_API_KEY` | `String` | Your Google Maps Places API Key. | Yes | |
| `onResponse` | `CustomEvent` | Dispatched when a place is selected, containing the place details in `event.detail`. | Yes | |
| `onError` | `CustomEvent` | Dispatched when an error occurs, with the error message in `event.detail`. | No | |
| `requestParams` | `Object` | Object for additional request parameters (e.g., `types`, `bounds`, `origin`, `region`, `language`). See [AutocompleteRequest](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). | No | `{}` |
| `fetchFields` | `Array` | Array of place data fields to return. See [Supported Fields](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult) | No | `['formattedAddress', 'addressComponents']` |
| `options` | `Object` | Options for customizing the component's behavior and appearance. See "Customization" below. | No | See default values in "Customization" |



## Customization
### Options

| Property | Type | Description | Default Value |
|----------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
| `autofocus` | `boolean` | If `true`, the input field will be focused automatically when the component mounts. | `false` |
| `placeholder` | `String` | Placeholder text for the input field. | `"Search..."` |
| `autocomplete`| `string` | HTML `autocomplete` attribute for the input field. Set to `"off"` to disable browser autocomplete. | `"off"` |
| `show_distance`| `boolean` | If `true`, and if an `origin` is specified in `requestParams`, displays the distance to each suggestion. The distance is calculated as a geodesic in meters. | `false` |
| `classes` | `Object` | Object to override default Tailwind CSS classes.structure. | See [styling](https://places-autocomplete-demo.pages.dev/examples/styling) |

### Styling
Customize the component's appearance by providing an object to the classes property. This object should contain key-value pairs, where the keys correspond to the component's elements and the values are your custom CSS class names. See [styling](https://places-autocomplete-demo.pages.dev/examples/styling) for details.

Expand All @@ -93,17 +103,6 @@ Fine-tune the autocomplete search with the requestParams property. This property
<script>
// ... other imports
/**
* @type string optional
*/
const placeholder = 'Search...';
/**
* @type string optional
* The <input> HTML autocomplete attribute.
* default: 'off'
* */
const autocompete = 'off';
/**
* @type boolean optional
* Boolean attribute indicating that an element should be focused on page load.
Expand All @@ -127,27 +126,14 @@ const requestParams = {
/**
* @type object optional
* Component default Tailwind CSS classes
* Options
*/
const classes = {
section: '',
container: 'relative z-10 transform rounded-xl mt-4',
icon_container: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
icon: '<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>',
input:
'border-1 w-full rounded-md border-0 shadow-sm bg-gray-100 px-4 py-2.5 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 sm:text-sm',
kbd_container: 'absolute inset-y-0 right-0 flex py-1.5 pr-1.5',
kbd_escape:
'inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1',
kbd_up:
'inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6',
kbd_down:
'inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6',
ul: 'absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm',
li: 'z-50 cursor-default select-none py-2 pl-4 text-gray-900 hover:bg-indigo-500 hover:text-white',
li_current: 'bg-indigo-500 text-white',
li_a: 'block w-full'
},
const options = {
autofocus: false,
autocompete: 'off',
placeholder: 'Start typing your address',
show_distance: true,
};
/**
* @type array optional
Expand All @@ -160,11 +146,9 @@ const fetchFields = ['formattedAddress', 'addressComponents'];
{onResponse}
{PUBLIC_GOOGLE_MAPS_API_KEY}
{requestParams}
{placeholder}
{autocompete}
{autofocus}
{options}
{fetchFields}
{classes}
/>
```
Expand Down
Loading

0 comments on commit e741907

Please sign in to comment.