places-autocomplete-svelte 2.1.5 → 2.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -34
- package/dist/PlaceAutocomplete.svelte +6 -3
- package/dist/helpers.js +1 -1
- package/dist/interfaces.d.ts +2 -1
- package/package.json +17 -15
package/README.md
CHANGED
|
@@ -1,29 +1,34 @@
|
|
|
1
1
|
# Places (New) Autocomplete Svelte
|
|
2
2
|
|
|
3
|
-
This Svelte component
|
|
3
|
+
This Svelte component provides a user-friendly way to search for and retrieve detailed address information within your [SvelteKit](https://kit.svelte.dev) applications, leveraging the power of the [Google Maps Places (New) Autocomplete API](https://developers.google.com/maps/documentation/javascript/place-autocomplete-overview). It comes with default styling using [Tailwind CSS](https://tailwindcss.com/), which you can fully customize.
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
## Features
|
|
7
|
+
## Features
|
|
8
8
|
|
|
9
|
-
- **Seamless Integration:** Easily
|
|
10
|
-
- **Autocomplete Suggestions:**
|
|
11
|
-
- **
|
|
12
|
-
- **Country/Region Filtering:**
|
|
13
|
-
- **Customizable
|
|
14
|
-
- **Flexible Data
|
|
15
|
-
- **
|
|
9
|
+
- **Seamless SvelteKit Integration:** Easily add the component to your SvelteKit projects.
|
|
10
|
+
- **Real-time Autocomplete Suggestions:** As the user types, address suggestions appear dynamically.
|
|
11
|
+
- **Comprehensive Address Details:** Retrieve detailed information, including street address, city, state/province, postal code, country, and more.
|
|
12
|
+
- **Country/Region Filtering:** Narrow down search results by specifying target countries or regions.
|
|
13
|
+
- **Customizable Styles:** Tailor the component's appearance to match your application's design by overriding the default Tailwind CSS classes.
|
|
14
|
+
- **Flexible Data Control:** Choose the specific data fields you want to retrieve using the `fetchFields` property.
|
|
15
|
+
- **Keyboard Navigation & Accessibility:** Use keyboard navigation for selecting suggestions, ensuring accessibility for all users.
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
## Demo
|
|
19
19
|
|
|
20
|
-
See a live demo of the component in action: [
|
|
20
|
+
See a live demo of the component in action: [Basic Example](https://places-autocomplete-demo.pages.dev/)
|
|
21
|
+
|
|
22
|
+
[Reactive parameters](https://places-autocomplete-demo.pages.dev/examples/reactive-parameters) - change the search criteria based on user input, like filtering by country or change results language.
|
|
23
|
+
|
|
24
|
+
[Customise request parameters](https://places-autocomplete-demo.pages.dev/examples/customise-request-parameters) - construct a `requestParams` object and control various aspects of the search, including language, region, and more.
|
|
25
|
+
|
|
21
26
|
|
|
22
27
|
|
|
23
28
|
|
|
24
29
|
## Requirements
|
|
25
30
|
|
|
26
|
-
- **Google Maps API Key
|
|
31
|
+
- **Google Maps API Key** with the Places API (New) enabled. Refer to [Use API Keys](https://developers.google.com/maps/documentation/javascript/get-api-key) for detailed instructions.
|
|
27
32
|
|
|
28
33
|
## Installation Svelte 5
|
|
29
34
|
|
|
@@ -40,15 +45,17 @@ npm i places-autocomplete-svelte@1.0.1
|
|
|
40
45
|
|
|
41
46
|
## Basic Usage
|
|
42
47
|
|
|
43
|
-
1.
|
|
44
|
-
2.
|
|
48
|
+
1. Replace `'___YOUR_API_KEY___'` with your actual **Google Maps API Key**.
|
|
49
|
+
2. Use the `onResponse` callback to **handle the response**.
|
|
45
50
|
|
|
46
51
|
```svelte
|
|
47
52
|
<script>
|
|
48
53
|
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
|
|
49
54
|
|
|
55
|
+
//Recommended: Store your key securely as an environment variable
|
|
50
56
|
const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';
|
|
51
57
|
|
|
58
|
+
|
|
52
59
|
let fullResponse = $state('')
|
|
53
60
|
let onResponse = (response) => {
|
|
54
61
|
fullResponse = response;
|
|
@@ -61,15 +68,26 @@ let onResponse = (response) => {
|
|
|
61
68
|
```
|
|
62
69
|
|
|
63
70
|
|
|
71
|
+
## Component Properties
|
|
72
|
+
| Property | Type | Description | Required | Default Value |
|
|
73
|
+
|--------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------|
|
|
74
|
+
| `PUBLIC_GOOGLE_MAPS_API_KEY` | `String` | Your Google Maps Places API Key. | Yes | |
|
|
75
|
+
| `onResponse` | `CustomEvent` | Dispatched when a place is selected, containing the place details. | Yes | |
|
|
76
|
+
| `onError` | `CustomEvent` | Dispatched when an error occurs. | No | |
|
|
77
|
+
| `placeholder` | `String` | Placeholder text for the input field. | No | `"Search..."` |
|
|
78
|
+
| `autocomplete` | `string` | HTML `autocomplete` attribute for the input field. Set to "off" to disable browser autocomplete.
|
|
79
|
+
| `autofocus` | `boolean` | The attribute indicating that an element should be focused on page load. | No | `false` |
|
|
80
|
+
| `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 | `{}` |
|
|
81
|
+
| `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']` |
|
|
82
|
+
| `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* |
|
|
64
83
|
|
|
65
84
|
## Customization
|
|
66
|
-
|
|
67
|
-
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
-
|
|
72
|
-
- `classes`: Customize the styling by providing an object with your CSS classes. This overrides the default Tailwind CSS classes. See the example in the "Basic Usage" section for the structure of the classes object and default class names.
|
|
85
|
+
### Styling
|
|
86
|
+
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.
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
### Request Parameters (requestParams)
|
|
90
|
+
Fine-tune the autocomplete search with the requestParams property. This property accepts an object corresponding to the AutocompleteRequest object in the Google Maps API documentation. See this [request parameters](https://places-autocomplete-demo.pages.dev/component/request-parameters) for more details. Here are some common examples:
|
|
73
91
|
|
|
74
92
|
```svelte
|
|
75
93
|
<script>
|
|
@@ -82,9 +100,16 @@ const placeholder = 'Search...';
|
|
|
82
100
|
/**
|
|
83
101
|
* @type string optional
|
|
84
102
|
* The <input> HTML autocomplete attribute.
|
|
85
|
-
*
|
|
103
|
+
* default: 'off'
|
|
86
104
|
* */
|
|
87
105
|
const autocompete = 'off';
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* @type boolean optional
|
|
109
|
+
* Boolean attribute indicating that an element should be focused on page load.
|
|
110
|
+
* default: false
|
|
111
|
+
* */
|
|
112
|
+
const autofocus = false;
|
|
88
113
|
/**
|
|
89
114
|
* @type object optional
|
|
90
115
|
* AutocompleteRequest properties
|
|
@@ -137,6 +162,7 @@ const fetchFields = ['formattedAddress', 'addressComponents'];
|
|
|
137
162
|
{requestParams}
|
|
138
163
|
{placeholder}
|
|
139
164
|
{autocompete}
|
|
165
|
+
{autofocus}
|
|
140
166
|
{fetchFields}
|
|
141
167
|
{classes}
|
|
142
168
|
/>
|
|
@@ -144,22 +170,11 @@ const fetchFields = ['formattedAddress', 'addressComponents'];
|
|
|
144
170
|
```
|
|
145
171
|
|
|
146
172
|
|
|
147
|
-
## Component Properties
|
|
148
|
-
| Property | Type | Description | Required | Default Value |
|
|
149
|
-
|--------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------|
|
|
150
|
-
| `PUBLIC_GOOGLE_MAPS_API_KEY` | `String` | Your Google Maps Places API Key. | Yes | |
|
|
151
|
-
| `onResponse` | `CustomEvent` | Dispatched when a place is selected, containing the place details. | Yes | |
|
|
152
|
-
| `onError` | `CustomEvent` | Dispatched when an error occurs. | No | |
|
|
153
|
-
| `placeholder` | `String` | Placeholder text for the input field. | No | `"Search..."` |
|
|
154
|
-
| `autocomplete` | `string` | HTML `autocomplete` attribute for the input field. Set to "off" to disable browser autocomplete. | No | `"off"` |
|
|
155
|
-
| `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 | `{}` |
|
|
156
|
-
| `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']` |
|
|
157
|
-
| `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* |
|
|
158
173
|
|
|
159
174
|
|
|
160
175
|
## Error Handling
|
|
161
176
|
|
|
162
|
-
|
|
177
|
+
Use the `onError` event handler to gracefully manage any errors that may occur during the autocomplete process:
|
|
163
178
|
|
|
164
179
|
|
|
165
180
|
```svelte
|
|
@@ -186,7 +201,7 @@ let onError = (error: string) => {
|
|
|
186
201
|
|
|
187
202
|
## Contributing
|
|
188
203
|
|
|
189
|
-
Contributions are welcome! Please open an issue or submit a pull request on the [GitHub
|
|
204
|
+
Contributions are welcome! Please open an issue or submit a pull request on the [GitHub](https://github.com/alexpechkarev/places-autocomplete-svelte/).
|
|
190
205
|
|
|
191
206
|
## License
|
|
192
207
|
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
fetchFields = $bindable(['formattedAddress', 'addressComponents']),
|
|
15
15
|
placeholder = 'Search...',
|
|
16
16
|
autocompete = 'off',
|
|
17
|
+
autofocus = false,
|
|
17
18
|
classes = {
|
|
18
19
|
section: '',
|
|
19
20
|
container: 'relative z-10 transform rounded-xl mt-4',
|
|
@@ -35,7 +36,7 @@
|
|
|
35
36
|
},
|
|
36
37
|
onResponse = $bindable((e: Event) => {}),
|
|
37
38
|
onError = $bindable((error: string) => {}),
|
|
38
|
-
requestParams
|
|
39
|
+
requestParams = {}
|
|
39
40
|
}: Props = $props();
|
|
40
41
|
|
|
41
42
|
// set classes as state
|
|
@@ -161,8 +162,10 @@
|
|
|
161
162
|
* Initialize the Google Maps JavaScript API Loader.
|
|
162
163
|
*/
|
|
163
164
|
onMount(async (): Promise<void> => {
|
|
164
|
-
|
|
165
|
-
|
|
165
|
+
if(autofocus) {
|
|
166
|
+
// focus on the input
|
|
167
|
+
inputRef.focus();
|
|
168
|
+
}
|
|
166
169
|
|
|
167
170
|
// load the Google Maps API
|
|
168
171
|
try {
|
package/dist/helpers.js
CHANGED
|
@@ -101,7 +101,7 @@ export const validateRequestParams = (requestParams) => {
|
|
|
101
101
|
/**
|
|
102
102
|
* If requestParams is not an object, set it to an empty object
|
|
103
103
|
*/
|
|
104
|
-
if (typeof requestParams !== 'object') {
|
|
104
|
+
if (typeof requestParams !== 'object' || Object.keys(requestParams).length === 0) {
|
|
105
105
|
requestParams = {
|
|
106
106
|
input: String(''),
|
|
107
107
|
sessionToken: String(''),
|
package/dist/interfaces.d.ts
CHANGED
|
@@ -41,8 +41,9 @@ export interface Props {
|
|
|
41
41
|
PUBLIC_GOOGLE_MAPS_API_KEY: string;
|
|
42
42
|
fetchFields?: string[];
|
|
43
43
|
placeholder?: string;
|
|
44
|
-
|
|
44
|
+
autofocus?: boolean;
|
|
45
45
|
autocompete?: AutoFill;
|
|
46
|
+
classes?: ComponentClasses;
|
|
46
47
|
requestParams?: RequestParams;
|
|
47
48
|
onResponse: (e: Event) => void;
|
|
48
49
|
onError: (error: string) => void;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "places-autocomplete-svelte",
|
|
3
3
|
"license": "MIT",
|
|
4
|
-
"version": "2.1.
|
|
4
|
+
"version": "2.1.7",
|
|
5
5
|
"description": "A lightweight and customizable Svelte component for easy integration of Google Maps Places (New) Autocomplete in your Svelte/SvelteKit applications. Provides accessible autocomplete suggestions and detailed address retrieval.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"svelte",
|
|
@@ -67,29 +67,31 @@
|
|
|
67
67
|
"svelte": "^5.1.4"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
|
-
"@sveltejs/adapter-auto": "^
|
|
71
|
-
"@sveltejs/adapter-cloudflare": "^5.0.
|
|
72
|
-
"@sveltejs/kit": "^2.
|
|
73
|
-
"@sveltejs/package": "^2.3.
|
|
70
|
+
"@sveltejs/adapter-auto": "^4.0.0",
|
|
71
|
+
"@sveltejs/adapter-cloudflare": "^5.0.1",
|
|
72
|
+
"@sveltejs/kit": "^2.16.1",
|
|
73
|
+
"@sveltejs/package": "^2.3.9",
|
|
74
74
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
75
|
+
"@tailwindcss/postcss": "^4.0.0",
|
|
75
76
|
"@tailwindcss/typography": "^0.5.16",
|
|
77
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
76
78
|
"@types/eslint": "^9.6.1",
|
|
77
79
|
"autoprefixer": "^10.4.20",
|
|
78
|
-
"eslint": "^9.
|
|
79
|
-
"eslint-config-prettier": "^
|
|
80
|
+
"eslint": "^9.19.0",
|
|
81
|
+
"eslint-config-prettier": "^10.0.1",
|
|
80
82
|
"eslint-plugin-svelte": "^2.46.1",
|
|
81
83
|
"globals": "^15.14.0",
|
|
82
|
-
"postcss": "^8.
|
|
84
|
+
"postcss": "^8.5.1",
|
|
83
85
|
"prettier": "^3.4.2",
|
|
84
|
-
"prettier-plugin-svelte": "^3.3.
|
|
85
|
-
"publint": "^0.3.
|
|
86
|
-
"svelte": "^5.
|
|
87
|
-
"svelte-check": "^4.1.
|
|
88
|
-
"tailwindcss": "^
|
|
86
|
+
"prettier-plugin-svelte": "^3.3.3",
|
|
87
|
+
"publint": "^0.3.2",
|
|
88
|
+
"svelte": "^5.19.4",
|
|
89
|
+
"svelte-check": "^4.1.4",
|
|
90
|
+
"tailwindcss": "^4.0.0",
|
|
89
91
|
"tslib": "^2.8.1",
|
|
90
92
|
"typescript": "^5.7.3",
|
|
91
|
-
"typescript-eslint": "^8.
|
|
92
|
-
"vite": "^6.0.
|
|
93
|
+
"typescript-eslint": "^8.22.0",
|
|
94
|
+
"vite": "^6.0.11"
|
|
93
95
|
},
|
|
94
96
|
"svelte": "./dist/index.js",
|
|
95
97
|
"types": "./dist/PlaceAutocomplete.svelte.d.ts",
|