places-autocomplete-svelte 2.1.6 → 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 +40 -34
- package/dist/PlaceAutocomplete.svelte +1 -1
- package/dist/helpers.js +1 -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>
|
|
@@ -152,23 +170,11 @@ const fetchFields = ['formattedAddress', 'addressComponents'];
|
|
|
152
170
|
```
|
|
153
171
|
|
|
154
172
|
|
|
155
|
-
## Component Properties
|
|
156
|
-
| Property | Type | Description | Required | Default Value |
|
|
157
|
-
|--------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------|
|
|
158
|
-
| `PUBLIC_GOOGLE_MAPS_API_KEY` | `String` | Your Google Maps Places API Key. | Yes | |
|
|
159
|
-
| `onResponse` | `CustomEvent` | Dispatched when a place is selected, containing the place details. | Yes | |
|
|
160
|
-
| `onError` | `CustomEvent` | Dispatched when an error occurs. | No | |
|
|
161
|
-
| `placeholder` | `String` | Placeholder text for the input field. | No | `"Search..."` |
|
|
162
|
-
| `autocomplete` | `string` | HTML `autocomplete` attribute for the input field. Set to "off" to disable browser autocomplete.
|
|
163
|
-
| `autofocus` | `boolean` | The attribute indicating that an element should be focused on page load. | No | `false` |
|
|
164
|
-
| `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 | `{}` |
|
|
165
|
-
| `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']` |
|
|
166
|
-
| `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* |
|
|
167
173
|
|
|
168
174
|
|
|
169
175
|
## Error Handling
|
|
170
176
|
|
|
171
|
-
|
|
177
|
+
Use the `onError` event handler to gracefully manage any errors that may occur during the autocomplete process:
|
|
172
178
|
|
|
173
179
|
|
|
174
180
|
```svelte
|
|
@@ -195,7 +201,7 @@ let onError = (error: string) => {
|
|
|
195
201
|
|
|
196
202
|
## Contributing
|
|
197
203
|
|
|
198
|
-
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/).
|
|
199
205
|
|
|
200
206
|
## License
|
|
201
207
|
|
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/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",
|