places-autocomplete-svelte 2.0.0 → 2.0.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 +27 -47
- package/dist/PlaceAutocomplete.svelte +72 -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.
|
|
@@ -31,11 +29,6 @@ npm i places-autocomplete-svelte
|
|
|
31
29
|
npm i places-autocomplete-svelte@1.0.1
|
|
32
30
|
```
|
|
33
31
|
|
|
34
|
-
## Import Component
|
|
35
|
-
|
|
36
|
-
```javascript
|
|
37
|
-
import PlaceAutocomplete from 'places-autocomplete-svelte';
|
|
38
|
-
```
|
|
39
32
|
|
|
40
33
|
## Basic Usage
|
|
41
34
|
|
|
@@ -44,39 +37,33 @@ import PlaceAutocomplete from 'places-autocomplete-svelte';
|
|
|
44
37
|
|
|
45
38
|
```svelte
|
|
46
39
|
<script>
|
|
47
|
-
|
|
40
|
+
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
|
|
48
41
|
|
|
49
|
-
|
|
50
|
-
|
|
42
|
+
let formattedAddress = '';
|
|
43
|
+
let PUBLIC_GOOGLE_MAPS_API_KEY = '--YOUR_API_KEY--';
|
|
51
44
|
</script>
|
|
52
45
|
|
|
53
|
-
<PlaceAutocomplete
|
|
54
|
-
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
55
|
-
bind:formattedAddress />
|
|
46
|
+
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:formattedAddress />
|
|
56
47
|
|
|
57
|
-
<p>Formatted Address: {formattedAddress}</p>
|
|
48
|
+
<p>Formatted Address: {formattedAddress}</p>
|
|
58
49
|
```
|
|
59
50
|
|
|
60
|
-
|
|
61
51
|
## Specifying Countries/Regions
|
|
62
52
|
|
|
63
53
|
Use the `countries` property to refine search by region:
|
|
64
54
|
|
|
65
55
|
```svelte
|
|
66
56
|
<script>
|
|
67
|
-
|
|
57
|
+
// ... other imports
|
|
68
58
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
59
|
+
let countries = [
|
|
60
|
+
{ name: 'United Kingdom', region: 'GB', language: 'en-GB' },
|
|
61
|
+
{ name: 'United States', region: 'US', language: 'en-US' }
|
|
62
|
+
// ... more countries
|
|
63
|
+
];
|
|
74
64
|
</script>
|
|
75
65
|
|
|
76
|
-
<PlaceAutocomplete
|
|
77
|
-
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
78
|
-
bind:formattedAddress
|
|
79
|
-
bind:countries />
|
|
66
|
+
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:formattedAddress bind:countries />
|
|
80
67
|
```
|
|
81
68
|
|
|
82
69
|
- The `region` code follows the [CLDR two-character format](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest).
|
|
@@ -88,8 +75,8 @@ For maximum flexibility, access the complete unformatted response from the Googl
|
|
|
88
75
|
|
|
89
76
|
```svelte
|
|
90
77
|
<script>
|
|
91
|
-
|
|
92
|
-
|
|
78
|
+
// ... other imports
|
|
79
|
+
let fullResponse = {};
|
|
93
80
|
</script>
|
|
94
81
|
|
|
95
82
|
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:fullResponse />
|
|
@@ -98,6 +85,7 @@ For maximum flexibility, access the complete unformatted response from the Googl
|
|
|
98
85
|
```
|
|
99
86
|
|
|
100
87
|
## Example
|
|
88
|
+
|
|
101
89
|
```svelte
|
|
102
90
|
<script>
|
|
103
91
|
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
|
|
@@ -113,8 +101,8 @@ For maximum flexibility, access the complete unformatted response from the Googl
|
|
|
113
101
|
];
|
|
114
102
|
</script>
|
|
115
103
|
|
|
116
|
-
<PlaceAutocomplete
|
|
117
|
-
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
104
|
+
<PlaceAutocomplete
|
|
105
|
+
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
118
106
|
bind:formattedAddress
|
|
119
107
|
bind:fullResponse
|
|
120
108
|
bind:formattedAddressObj
|
|
@@ -122,6 +110,7 @@ For maximum flexibility, access the complete unformatted response from the Googl
|
|
|
122
110
|
placeholder="Enter your address...">
|
|
123
111
|
|
|
124
112
|
```
|
|
113
|
+
|
|
125
114
|
- The `formattedAddress` - selected address as string.
|
|
126
115
|
- The `fullResponse` - the complete unformatted response from the Google Maps API.
|
|
127
116
|
- The `formattedAddressObj` - parsed address components, containing individual elements like street number, town, and postcode.
|
|
@@ -135,41 +124,34 @@ The `formattedAddressObj` mapping corresponds to the following component types:
|
|
|
135
124
|
- `formattedAddressObj.country_iso2`: shortText property of the country
|
|
136
125
|
- `formattedAddressObj.postcode`: longText property of the postal_code
|
|
137
126
|
|
|
138
|
-
|
|
139
|
-
|
|
140
127
|
## Error Handling
|
|
141
128
|
|
|
142
129
|
The component will throw an error if:
|
|
143
|
-
|
|
144
|
-
|
|
130
|
+
|
|
131
|
+
- The Google Maps API key is invalid or missing.
|
|
132
|
+
- There are network issues connecting to the Google Maps service.
|
|
145
133
|
|
|
146
134
|
Handle these errors gracefully in your application:
|
|
147
135
|
|
|
148
136
|
```svelte
|
|
149
137
|
<script>
|
|
150
|
-
|
|
138
|
+
// ... other imports
|
|
151
139
|
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
let onError = (error:string) => {
|
|
140
|
+
// Error handler
|
|
141
|
+
let pacError = '';
|
|
142
|
+
let onError = (error: string) => {
|
|
155
143
|
console.error(error);
|
|
156
|
-
|
|
144
|
+
pacError = error;
|
|
157
145
|
};
|
|
158
146
|
</script>
|
|
159
147
|
|
|
160
148
|
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY {onError} />
|
|
161
149
|
|
|
162
150
|
{#if pacError}
|
|
163
|
-
|
|
151
|
+
<p class="error">{pacError}</p>
|
|
164
152
|
{/if}
|
|
165
153
|
```
|
|
166
154
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
155
|
## Contributing
|
|
174
156
|
|
|
175
157
|
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 +159,3 @@ Contributions are welcome! Please open an issue or submit a pull request on the
|
|
|
177
159
|
## License
|
|
178
160
|
|
|
179
161
|
[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,11 @@
|
|
|
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>
|
|
337
|
+
<style>
|
|
338
|
+
input,select,ul{margin:0;padding:0}.absolute,.sr-only{position:absolute}.block,svg{display:block}*,.border-gray-300{--tw-border-opacity:1}.text-gray-500,.text-gray-900,.text-white{--tw-text-opacity:1}*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb;--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:after,:before{--tw-content:''}:host,section{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:system-ui,sans-serif,apple color emoji,segoe ui emoji,Segoe UI Symbol,noto color emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}input,select{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}ul{list-style:none}.cursor-default,:disabled{cursor:default}svg{vertical-align:middle}[type=text],input:where(:not([type])),select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}[type=text]:focus,input:where(:not([type])):focus,select:focus{outline:transparent solid 2px;outline-offset:2px;--tw-ring-inset:var(--tw-empty,);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder{color:#6b7280;opacity:1}select{text-transform:none;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9J25vbmUnIHZpZXdCb3g9JzAgMCAyMCAyMCc+PHBhdGggc3Ryb2tlPScjNmI3MjgwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS13aWR0aD0nMS41JyBkPSdNNiA4bDQgNCA0LTQnLz48L3N2Zz4=);background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}:root{--background:0 0% 100%;--foreground:222.2 84% 4.9%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--primary:222.2 47.4% 11.2%;--primary-foreground:210 40% 98%;--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--accent:210 40% 96.1%;--accent-foreground:222.2 47.4% 11.2%;--destructive:0 72.2% 50.6%;--destructive-foreground:210 40% 98%;--ring:222.2 84% 4.9%;--radius:0.5rem}*{border-color:hsl(var(--border) / var(--tw-border-opacity))}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.sr-only{width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.relative{position:relative}.inset-y-0{top:0;bottom:0}.left-0{left:0}.right-0{right:0}.z-50{z-index:50}.-mb-2{margin-bottom:-.5rem}.mr-1{margin-right:.25rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-10{height:2.5rem}.h-5{height:1.25rem}.max-h-60{max-height:15rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));grid-template-columns:1fr}.items-center{align-items:center}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem;row-gap:1rem}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-gray-300{border-color:rgb(209 213 219 / var(--tw-border-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-indigo-500,.hover\:bg-indigo-500:hover{--tw-bg-opacity:1;background-color:rgb(99 102 241 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-1{padding-left:.25rem;padding-right:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pr-1\.5{padding-right:.375rem}.pr-20{padding-right:5rem}.pr-7{padding-right:1.75rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-gray-500{color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-900{color:rgb(17 24 39 / var(--tw-text-opacity))}.text-white{color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:ring-2:focus,.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0 / var(--tw-ring-opacity))}.focus\:outline-none:focus{outline:transparent solid 2px;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-inset:focus{--tw-ring-inset:inset}@media (min-width:640px){.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}}@keyframes swipe-out{0%{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));opacity:1}to{transform:translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));opacity:0}}.grid{display:grid}@media (min-width:768px){.lg\:grid-cols-6{grid-template-columns:repeat(6,1fr)}.lg\:col-span-6{grid-column-start:span 6}.lg\:col-span-4{grid-column-start:span 4}.lg\:col-span-2{grid-column-start:span 2}}.my-10{margin-top:2.5rem;margin-bottom:2.5rem} .justify-center {justify-content: center;} .hover\:text-white:hover{color:rgb(255 255 255 / var(--tw-text-opacity))}
|
|
339
|
+
</style>
|
|
@@ -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.7",
|
|
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
|
+
}
|