places-autocomplete-svelte 2.0.0 → 2.0.6
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 +27 -42
- package/dist/PlaceAutocomplete.svelte +69 -50
- package/dist/PlaceAutocomplete.svelte.d.ts +9 -25
- package/package.json +7 -6
package/README.md
CHANGED
|
@@ -13,8 +13,6 @@ This Svelte component leverages the [Google Maps Places Autocomplete API](https:
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
16
|
## Requirements
|
|
19
17
|
|
|
20
18
|
- **Google Maps API Key:** Create an 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.
|
|
@@ -44,39 +42,33 @@ import PlaceAutocomplete from 'places-autocomplete-svelte';
|
|
|
44
42
|
|
|
45
43
|
```svelte
|
|
46
44
|
<script>
|
|
47
|
-
|
|
45
|
+
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
|
|
48
46
|
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
let formattedAddress = '';
|
|
48
|
+
let PUBLIC_GOOGLE_MAPS_API_KEY = '--YOUR_API_KEY--';
|
|
51
49
|
</script>
|
|
52
50
|
|
|
53
|
-
<PlaceAutocomplete
|
|
54
|
-
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
55
|
-
bind:formattedAddress />
|
|
51
|
+
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:formattedAddress />
|
|
56
52
|
|
|
57
|
-
<p>Formatted Address: {formattedAddress}</p>
|
|
53
|
+
<p>Formatted Address: {formattedAddress}</p>
|
|
58
54
|
```
|
|
59
55
|
|
|
60
|
-
|
|
61
56
|
## Specifying Countries/Regions
|
|
62
57
|
|
|
63
58
|
Use the `countries` property to refine search by region:
|
|
64
59
|
|
|
65
60
|
```svelte
|
|
66
61
|
<script>
|
|
67
|
-
|
|
62
|
+
// ... other imports
|
|
68
63
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
64
|
+
let countries = [
|
|
65
|
+
{ name: 'United Kingdom', region: 'GB', language: 'en-GB' },
|
|
66
|
+
{ name: 'United States', region: 'US', language: 'en-US' }
|
|
67
|
+
// ... more countries
|
|
68
|
+
];
|
|
74
69
|
</script>
|
|
75
70
|
|
|
76
|
-
<PlaceAutocomplete
|
|
77
|
-
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
78
|
-
bind:formattedAddress
|
|
79
|
-
bind:countries />
|
|
71
|
+
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:formattedAddress bind:countries />
|
|
80
72
|
```
|
|
81
73
|
|
|
82
74
|
- The `region` code follows the [CLDR two-character format](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest).
|
|
@@ -88,8 +80,8 @@ For maximum flexibility, access the complete unformatted response from the Googl
|
|
|
88
80
|
|
|
89
81
|
```svelte
|
|
90
82
|
<script>
|
|
91
|
-
|
|
92
|
-
|
|
83
|
+
// ... other imports
|
|
84
|
+
let fullResponse = {};
|
|
93
85
|
</script>
|
|
94
86
|
|
|
95
87
|
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:fullResponse />
|
|
@@ -98,6 +90,7 @@ For maximum flexibility, access the complete unformatted response from the Googl
|
|
|
98
90
|
```
|
|
99
91
|
|
|
100
92
|
## Example
|
|
93
|
+
|
|
101
94
|
```svelte
|
|
102
95
|
<script>
|
|
103
96
|
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
|
|
@@ -113,8 +106,8 @@ For maximum flexibility, access the complete unformatted response from the Googl
|
|
|
113
106
|
];
|
|
114
107
|
</script>
|
|
115
108
|
|
|
116
|
-
<PlaceAutocomplete
|
|
117
|
-
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
109
|
+
<PlaceAutocomplete
|
|
110
|
+
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
118
111
|
bind:formattedAddress
|
|
119
112
|
bind:fullResponse
|
|
120
113
|
bind:formattedAddressObj
|
|
@@ -122,6 +115,7 @@ For maximum flexibility, access the complete unformatted response from the Googl
|
|
|
122
115
|
placeholder="Enter your address...">
|
|
123
116
|
|
|
124
117
|
```
|
|
118
|
+
|
|
125
119
|
- The `formattedAddress` - selected address as string.
|
|
126
120
|
- The `fullResponse` - the complete unformatted response from the Google Maps API.
|
|
127
121
|
- The `formattedAddressObj` - parsed address components, containing individual elements like street number, town, and postcode.
|
|
@@ -135,41 +129,34 @@ The `formattedAddressObj` mapping corresponds to the following component types:
|
|
|
135
129
|
- `formattedAddressObj.country_iso2`: shortText property of the country
|
|
136
130
|
- `formattedAddressObj.postcode`: longText property of the postal_code
|
|
137
131
|
|
|
138
|
-
|
|
139
|
-
|
|
140
132
|
## Error Handling
|
|
141
133
|
|
|
142
134
|
The component will throw an error if:
|
|
143
|
-
|
|
144
|
-
|
|
135
|
+
|
|
136
|
+
- The Google Maps API key is invalid or missing.
|
|
137
|
+
- There are network issues connecting to the Google Maps service.
|
|
145
138
|
|
|
146
139
|
Handle these errors gracefully in your application:
|
|
147
140
|
|
|
148
141
|
```svelte
|
|
149
142
|
<script>
|
|
150
|
-
|
|
143
|
+
// ... other imports
|
|
151
144
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
let onError = (error:string) => {
|
|
145
|
+
// Error handler
|
|
146
|
+
let pacError = '';
|
|
147
|
+
let onError = (error: string) => {
|
|
155
148
|
console.error(error);
|
|
156
|
-
|
|
149
|
+
pacError = error;
|
|
157
150
|
};
|
|
158
151
|
</script>
|
|
159
152
|
|
|
160
153
|
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY {onError} />
|
|
161
154
|
|
|
162
155
|
{#if pacError}
|
|
163
|
-
|
|
156
|
+
<p class="error">{pacError}</p>
|
|
164
157
|
{/if}
|
|
165
158
|
```
|
|
166
159
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
160
|
## Contributing
|
|
174
161
|
|
|
175
162
|
Contributions are welcome! Please open an issue or submit a pull request on the [GitHub repository](https://github.com/alexpechkarev/places-autocomplete-svelte/).
|
|
@@ -177,5 +164,3 @@ Contributions are welcome! Please open an issue or submit a pull request on the
|
|
|
177
164
|
## License
|
|
178
165
|
|
|
179
166
|
[MIT](LICENSE)
|
|
180
|
-
|
|
181
|
-
|
|
@@ -3,52 +3,68 @@
|
|
|
3
3
|
import * as GMaps from '@googlemaps/js-api-loader';
|
|
4
4
|
const { Loader } = GMaps;
|
|
5
5
|
|
|
6
|
+
// Props Interface
|
|
7
|
+
interface Props {
|
|
8
|
+
PUBLIC_GOOGLE_MAPS_API_KEY: string;
|
|
9
|
+
fetchFields: string[];
|
|
10
|
+
countries: { name: string; region: string }[];
|
|
11
|
+
formattedAddress: string;
|
|
12
|
+
fullResponse: { longText: string; shortText: string; types: Array<string> }[];
|
|
13
|
+
formattedAddressObj: {
|
|
14
|
+
street_number: string;
|
|
15
|
+
street: string;
|
|
16
|
+
town: string;
|
|
17
|
+
county: string;
|
|
18
|
+
country_iso2: string;
|
|
19
|
+
postcode: string;
|
|
20
|
+
};
|
|
21
|
+
onError: (error: string) => void;
|
|
22
|
+
}
|
|
23
|
+
// Bindable Props
|
|
24
|
+
let {
|
|
25
|
+
PUBLIC_GOOGLE_MAPS_API_KEY = $bindable(''),
|
|
26
|
+
/**
|
|
27
|
+
* By default using SKU: Place Detals (Location Only) - 0.005 USD per each
|
|
28
|
+
* @see https://developers.google.com/maps/documentation/javascript/usage-and-billing#location-placedetails
|
|
29
|
+
*/
|
|
30
|
+
fetchFields = $bindable(['formattedAddress', 'addressComponents']),
|
|
31
|
+
countries = $bindable([]),
|
|
32
|
+
formattedAddress = $bindable(''),
|
|
33
|
+
fullResponse = $bindable([]),
|
|
34
|
+
formattedAddressObj = $bindable({
|
|
35
|
+
street_number: '',
|
|
36
|
+
street: '',
|
|
37
|
+
town: '',
|
|
38
|
+
county: '',
|
|
39
|
+
country_iso2: '',
|
|
40
|
+
postcode: ''
|
|
41
|
+
}),
|
|
42
|
+
onError = $bindable((error: string) => {})
|
|
43
|
+
}: Props = $props();
|
|
6
44
|
|
|
7
|
-
|
|
8
|
-
export let PUBLIC_GOOGLE_MAPS_API_KEY: string = '';
|
|
9
|
-
export let fetchFields: string[] = ['displayName', 'formattedAddress', 'addressComponents'];
|
|
10
|
-
export let countries: { name: string; region: string }[] = [];
|
|
45
|
+
// Check if countries are available
|
|
11
46
|
let hasCountries = countries.length > 0;
|
|
12
|
-
|
|
13
|
-
export let formattedAddress: string = '';
|
|
14
|
-
export let fullResponse: { longText: string; shortText: string; types: Array<string> }[] = [];
|
|
15
|
-
export let formattedAddressObj: {
|
|
16
|
-
street_number: string;
|
|
17
|
-
street: string;
|
|
18
|
-
town: string;
|
|
19
|
-
county: string;
|
|
20
|
-
country_iso2: string;
|
|
21
|
-
postcode: string;
|
|
22
|
-
} = {
|
|
23
|
-
street_number: '',
|
|
24
|
-
street: '',
|
|
25
|
-
town: '',
|
|
26
|
-
county: '',
|
|
27
|
-
country_iso2: '',
|
|
28
|
-
postcode: ''
|
|
29
|
-
};
|
|
30
|
-
export let onError: (error: string) => void = (error: string) => {};
|
|
31
|
-
|
|
47
|
+
// Local variables
|
|
32
48
|
let inputRef: HTMLInputElement;
|
|
33
|
-
let currentSuggestion = -1;
|
|
34
|
-
let title: string = '';
|
|
35
|
-
let results: any[] = [];
|
|
49
|
+
let currentSuggestion = $state(-1);
|
|
50
|
+
let title: string = $state('');
|
|
51
|
+
let results: any[] = $state([]);
|
|
36
52
|
let token;
|
|
37
53
|
let loader: GMaps.Loader;
|
|
38
54
|
let placesApi: { [key: string]: any } = {};
|
|
39
55
|
//https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.includedPrimaryTypes
|
|
40
|
-
let request = {
|
|
56
|
+
let request = $state({
|
|
41
57
|
input: '',
|
|
42
58
|
language: 'en-GB',
|
|
43
59
|
region: 'GB',
|
|
44
60
|
sessionToken: ''
|
|
45
|
-
};
|
|
61
|
+
});
|
|
46
62
|
|
|
47
|
-
|
|
63
|
+
$effect(() => {
|
|
48
64
|
if (request.input == '') {
|
|
49
65
|
results = [];
|
|
50
66
|
}
|
|
51
|
-
}
|
|
67
|
+
});
|
|
52
68
|
|
|
53
69
|
/**
|
|
54
70
|
* Reset search input and results.
|
|
@@ -88,7 +104,7 @@
|
|
|
88
104
|
text: suggestion.placePrediction.text.toString()
|
|
89
105
|
});
|
|
90
106
|
}
|
|
91
|
-
} catch (e) {
|
|
107
|
+
} catch (e: any) {
|
|
92
108
|
onError((e.name || 'An error occurred') + ' - ' + (e.message || 'see console for details.'));
|
|
93
109
|
}
|
|
94
110
|
};
|
|
@@ -104,7 +120,6 @@
|
|
|
104
120
|
formattedAddress: string;
|
|
105
121
|
}): Promise<void> => {
|
|
106
122
|
try {
|
|
107
|
-
|
|
108
123
|
await place.fetchFields({
|
|
109
124
|
fields: fetchFields
|
|
110
125
|
});
|
|
@@ -147,8 +162,10 @@
|
|
|
147
162
|
break;
|
|
148
163
|
}
|
|
149
164
|
}
|
|
150
|
-
} catch (e) {
|
|
151
|
-
onError(
|
|
165
|
+
} catch (e: any) {
|
|
166
|
+
onError(
|
|
167
|
+
(e.name || 'An error occurred') + ' - ' + (e.message || 'error fetching place details')
|
|
168
|
+
);
|
|
152
169
|
}
|
|
153
170
|
|
|
154
171
|
// reset srarch input and results
|
|
@@ -165,12 +182,11 @@
|
|
|
165
182
|
region?: string;
|
|
166
183
|
sessionToken?: any;
|
|
167
184
|
}): Promise<{ input?: string; language?: string; region?: string; sessionToken?: any }> => {
|
|
168
|
-
try{
|
|
185
|
+
try {
|
|
169
186
|
token = new placesApi.AutocompleteSessionToken();
|
|
170
187
|
request.sessionToken = token;
|
|
171
188
|
return request;
|
|
172
|
-
|
|
173
|
-
}catch(e){
|
|
189
|
+
} catch (e: any) {
|
|
174
190
|
onError((e.name || 'An error occurred') + ' - ' + (e.message || 'error fetch token'));
|
|
175
191
|
return request;
|
|
176
192
|
}
|
|
@@ -187,14 +203,14 @@
|
|
|
187
203
|
version: 'weekly',
|
|
188
204
|
libraries: ['places']
|
|
189
205
|
});
|
|
190
|
-
|
|
206
|
+
|
|
191
207
|
const { AutocompleteSessionToken, AutocompleteSuggestion } =
|
|
192
208
|
await loader.importLibrary('places');
|
|
193
209
|
placesApi.AutocompleteSessionToken = AutocompleteSessionToken;
|
|
194
210
|
placesApi.AutocompleteSuggestion = AutocompleteSuggestion;
|
|
195
211
|
token = new placesApi.AutocompleteSessionToken();
|
|
196
212
|
request.sessionToken = token;
|
|
197
|
-
} catch (e) {
|
|
213
|
+
} catch (e: any) {
|
|
198
214
|
onError(
|
|
199
215
|
(e.name || 'An error occurred') + ' - ' + (e.message || 'Error loading Google Maps API')
|
|
200
216
|
);
|
|
@@ -241,7 +257,7 @@
|
|
|
241
257
|
stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg
|
|
242
258
|
>
|
|
243
259
|
</div>
|
|
244
|
-
|
|
260
|
+
|
|
245
261
|
<input
|
|
246
262
|
type="text"
|
|
247
263
|
name="search"
|
|
@@ -250,7 +266,7 @@
|
|
|
250
266
|
placeholder="Search..."
|
|
251
267
|
aria-controls="options"
|
|
252
268
|
bind:value={request.input}
|
|
253
|
-
|
|
269
|
+
oninput={makeAcRequest}
|
|
254
270
|
/>
|
|
255
271
|
|
|
256
272
|
{#if results.length > 0}
|
|
@@ -273,19 +289,22 @@
|
|
|
273
289
|
id="options"
|
|
274
290
|
>
|
|
275
291
|
{#each results as place, i}
|
|
276
|
-
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
277
|
-
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
278
|
-
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
279
292
|
<li
|
|
280
293
|
class="z-50 cursor-default select-none py-2 pl-4 text-gray-900 hover:bg-indigo-500 hover:text-white"
|
|
281
294
|
class:bg-indigo-500={i === currentSuggestion}
|
|
282
295
|
class:bg-white={i !== currentSuggestion}
|
|
283
296
|
class:text-white={i === currentSuggestion}
|
|
284
297
|
id="option-{i + 1}"
|
|
285
|
-
tabindex={i + 1}
|
|
286
|
-
on:click={() => onPlaceSelected(place.to_pace)}
|
|
287
298
|
>
|
|
288
|
-
|
|
299
|
+
<!-- svelte-ignore a11y_invalid_attribute -->
|
|
300
|
+
<a
|
|
301
|
+
href="javascript:void(0)"
|
|
302
|
+
class="block w-full"
|
|
303
|
+
tabindex={i + 1}
|
|
304
|
+
onclick={() => onPlaceSelected(place.to_pace)}
|
|
305
|
+
>
|
|
306
|
+
{place.text}
|
|
307
|
+
</a>
|
|
289
308
|
</li>
|
|
290
309
|
{/each}
|
|
291
310
|
</ul>
|
|
@@ -310,8 +329,8 @@
|
|
|
310
329
|
</div>
|
|
311
330
|
</div>
|
|
312
331
|
|
|
313
|
-
<div class="lg:col-span-6">
|
|
332
|
+
<div class="lg:col-span-6 mt-2">
|
|
314
333
|
<div class="text-sm font-medium leading-6 text-gray-500">{title}</div>
|
|
315
334
|
</div>
|
|
316
335
|
</div>
|
|
317
|
-
</section>
|
|
336
|
+
</section>
|
|
@@ -1,30 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
(internal: unknown, props: Props & {
|
|
6
|
-
$$events?: Events;
|
|
7
|
-
$$slots?: Slots;
|
|
8
|
-
}): Exports & {
|
|
9
|
-
$set?: any;
|
|
10
|
-
$on?: any;
|
|
11
|
-
};
|
|
12
|
-
z_$$bindings?: Bindings;
|
|
13
|
-
}
|
|
14
|
-
declare const PlaceAutocomplete: $$__sveltets_2_IsomorphicComponent<{
|
|
15
|
-
PUBLIC_GOOGLE_MAPS_API_KEY?: string;
|
|
16
|
-
fetchFields?: string[];
|
|
17
|
-
countries?: {
|
|
1
|
+
declare const PlaceAutocomplete: import("svelte").Component<{
|
|
2
|
+
PUBLIC_GOOGLE_MAPS_API_KEY: string;
|
|
3
|
+
fetchFields: string[];
|
|
4
|
+
countries: {
|
|
18
5
|
name: string;
|
|
19
6
|
region: string;
|
|
20
7
|
}[];
|
|
21
|
-
formattedAddress
|
|
22
|
-
fullResponse
|
|
8
|
+
formattedAddress: string;
|
|
9
|
+
fullResponse: {
|
|
23
10
|
longText: string;
|
|
24
11
|
shortText: string;
|
|
25
12
|
types: Array<string>;
|
|
26
13
|
}[];
|
|
27
|
-
formattedAddressObj
|
|
14
|
+
formattedAddressObj: {
|
|
28
15
|
street_number: string;
|
|
29
16
|
street: string;
|
|
30
17
|
town: string;
|
|
@@ -32,9 +19,6 @@ declare const PlaceAutocomplete: $$__sveltets_2_IsomorphicComponent<{
|
|
|
32
19
|
country_iso2: string;
|
|
33
20
|
postcode: string;
|
|
34
21
|
};
|
|
35
|
-
onError
|
|
36
|
-
}, {
|
|
37
|
-
[evt: string]: CustomEvent<any>;
|
|
38
|
-
}, {}, {}, string>;
|
|
39
|
-
type PlaceAutocomplete = InstanceType<typeof PlaceAutocomplete>;
|
|
22
|
+
onError: (error: string) => void;
|
|
23
|
+
}, {}, "PUBLIC_GOOGLE_MAPS_API_KEY" | "fetchFields" | "formattedAddress" | "countries" | "fullResponse" | "formattedAddressObj" | "onError">;
|
|
40
24
|
export default PlaceAutocomplete;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "places-autocomplete-svelte",
|
|
3
3
|
"license": "MIT",
|
|
4
|
-
"version": "2.0.
|
|
4
|
+
"version": "2.0.6",
|
|
5
5
|
"description": "A Svelte component that leverages the power of Google Places New API to provide a user-friendly autocomplete experience for location searches.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"svelte",
|
|
@@ -56,10 +56,11 @@
|
|
|
56
56
|
"!dist/**/*.spec.*"
|
|
57
57
|
],
|
|
58
58
|
"publishConfig": {
|
|
59
|
-
"@alexpechkarev:registry": "https://npm.pkg.github.com"
|
|
59
|
+
"@alexpechkarev:registry": "https://npm.pkg.github.com",
|
|
60
|
+
"provenance": true
|
|
60
61
|
},
|
|
61
62
|
"peerDependencies": {
|
|
62
|
-
"svelte": "^
|
|
63
|
+
"svelte": "^5.1.4"
|
|
63
64
|
},
|
|
64
65
|
"devDependencies": {
|
|
65
66
|
"@sveltejs/adapter-auto": "^3.3.1",
|
|
@@ -77,12 +78,12 @@
|
|
|
77
78
|
"prettier": "^3.3.3",
|
|
78
79
|
"prettier-plugin-svelte": "^3.2.7",
|
|
79
80
|
"publint": "^0.2.12",
|
|
80
|
-
"svelte": "^5.1.
|
|
81
|
+
"svelte": "^5.1.4",
|
|
81
82
|
"svelte-check": "^4.0.5",
|
|
82
83
|
"tailwindcss": "^3.4.14",
|
|
83
84
|
"tslib": "^2.8.0",
|
|
84
85
|
"typescript": "^5.6.3",
|
|
85
|
-
"typescript-eslint": "^8.
|
|
86
|
+
"typescript-eslint": "^8.12.2",
|
|
86
87
|
"vite": "^5.4.10"
|
|
87
88
|
},
|
|
88
89
|
"svelte": "./dist/index.js",
|
|
@@ -91,4 +92,4 @@
|
|
|
91
92
|
"dependencies": {
|
|
92
93
|
"@googlemaps/js-api-loader": "^1.16.8"
|
|
93
94
|
}
|
|
94
|
-
}
|
|
95
|
+
}
|