places-autocomplete-svelte 2.0.6 → 2.0.8
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 +39 -71
- package/dist/PlaceAutocomplete.svelte +21 -65
- package/dist/PlaceAutocomplete.svelte.d.ts +7 -16
- package/package.json +11 -6
package/README.md
CHANGED
|
@@ -2,14 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
This Svelte component leverages the [Google Maps Places Autocomplete API](https://developers.google.com/maps/documentation/javascript/place-autocomplete-overview) to provide a user-friendly way to search for and retrieve detailed address information within your [SvelteKit](https://kit.svelte.dev) applications.
|
|
4
4
|
|
|
5
|
+
Preview this package [Demo](https://2bbb9bef.places-autocomplete-demo.pages.dev/)
|
|
6
|
+
|
|
5
7
|
## Features:
|
|
6
8
|
|
|
7
9
|
- **Seamless Integration:** Easily integrate the component into your SvelteKit projects.
|
|
8
10
|
- **Autocomplete Suggestions:** Provide users with real-time suggestions as they type, enhancing the search experience.
|
|
9
11
|
- **Detailed Address Retrieval:** Retrieve comprehensive address information, including street address, city, region, postal code, and country.
|
|
10
|
-
- **Formatted and Unformatted Responses:** Access both formatted address strings and raw address component data for flexible use cases.
|
|
11
12
|
- **Country/Region Selection:** Allow users to specify a region for more targeted results.
|
|
12
|
-
- **Customizable:** Tailor the component's appearance and behavior using language settings
|
|
13
|
+
- **Customizable:** Tailor the component's appearance and behavior using language settings, placeholder text.
|
|
14
|
+
- **Accessible:** Supports keyboard navigation for selecting suggestions.
|
|
13
15
|
|
|
14
16
|
|
|
15
17
|
|
|
@@ -29,33 +31,33 @@ npm i places-autocomplete-svelte
|
|
|
29
31
|
npm i places-autocomplete-svelte@1.0.1
|
|
30
32
|
```
|
|
31
33
|
|
|
32
|
-
## Import Component
|
|
33
|
-
|
|
34
|
-
```javascript
|
|
35
|
-
import PlaceAutocomplete from 'places-autocomplete-svelte';
|
|
36
|
-
```
|
|
37
34
|
|
|
38
35
|
## Basic Usage
|
|
39
36
|
|
|
40
|
-
1. **Provide your Google Maps API Key:** Replace `'
|
|
41
|
-
2. **
|
|
37
|
+
1. **Provide your Google Maps API Key:** Replace `'___YOUR_API_KEY___'` with your actual Google Maps API key.
|
|
38
|
+
2. **Handle the Response:** Use the `onResponse` callback to receive the selected place details.
|
|
42
39
|
|
|
43
40
|
```svelte
|
|
44
41
|
<script>
|
|
45
42
|
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
|
|
46
43
|
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';
|
|
45
|
+
|
|
46
|
+
let fullResponse = $state('')
|
|
47
|
+
let onResponse = (response) => {
|
|
48
|
+
console.log(response)
|
|
49
|
+
fullResponse = response;
|
|
50
|
+
};
|
|
49
51
|
</script>
|
|
50
52
|
|
|
51
|
-
<PlaceAutocomplete
|
|
53
|
+
<PlaceAutocomplete {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} />
|
|
52
54
|
|
|
53
|
-
<p>
|
|
55
|
+
<p>Response Object: {JSON.stringify(fullResponse, null, 2)}</p>
|
|
54
56
|
```
|
|
55
57
|
|
|
56
|
-
##
|
|
58
|
+
## Countries/Regions
|
|
57
59
|
|
|
58
|
-
Use
|
|
60
|
+
Use optional `countries` property to refine search by region:
|
|
59
61
|
|
|
60
62
|
```svelte
|
|
61
63
|
<script>
|
|
@@ -68,66 +70,12 @@ Use the `countries` property to refine search by region:
|
|
|
68
70
|
];
|
|
69
71
|
</script>
|
|
70
72
|
|
|
71
|
-
<PlaceAutocomplete
|
|
73
|
+
<PlaceAutocomplete {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} bind:countries/>
|
|
72
74
|
```
|
|
73
75
|
|
|
74
76
|
- The `region` code follows the [CLDR two-character format](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest).
|
|
75
77
|
- The `language` in which to return results. [See details](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.language)
|
|
76
78
|
|
|
77
|
-
## Accessing Full Response Data
|
|
78
|
-
|
|
79
|
-
For maximum flexibility, access the complete unformatted response from the Google Maps API:
|
|
80
|
-
|
|
81
|
-
```svelte
|
|
82
|
-
<script>
|
|
83
|
-
// ... other imports
|
|
84
|
-
let fullResponse = {};
|
|
85
|
-
</script>
|
|
86
|
-
|
|
87
|
-
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:fullResponse />
|
|
88
|
-
|
|
89
|
-
<pre>{JSON.stringify(fullResponse, null, 2)}</pre>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
## Example
|
|
93
|
-
|
|
94
|
-
```svelte
|
|
95
|
-
<script>
|
|
96
|
-
import { PlaceAutocomplete } from 'places-autocomplete-svelte';
|
|
97
|
-
|
|
98
|
-
let PUBLIC_GOOGLE_MAPS_API_KEY = '--YOUR_API_KEY--';
|
|
99
|
-
let formattedAddress = '';
|
|
100
|
-
let fullResponse = {};
|
|
101
|
-
let formattedAddressObj = {};
|
|
102
|
-
let countries = [
|
|
103
|
-
{ name: 'United Kingdom', region: 'GB' , language:'en-GB'},
|
|
104
|
-
{ name: 'United States', region: 'US',language:'en-US' },
|
|
105
|
-
// ... more countries
|
|
106
|
-
];
|
|
107
|
-
</script>
|
|
108
|
-
|
|
109
|
-
<PlaceAutocomplete
|
|
110
|
-
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
111
|
-
bind:formattedAddress
|
|
112
|
-
bind:fullResponse
|
|
113
|
-
bind:formattedAddressObj
|
|
114
|
-
bind:countries
|
|
115
|
-
placeholder="Enter your address...">
|
|
116
|
-
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
- The `formattedAddress` - selected address as string.
|
|
120
|
-
- The `fullResponse` - the complete unformatted response from the Google Maps API.
|
|
121
|
-
- The `formattedAddressObj` - parsed address components, containing individual elements like street number, town, and postcode.
|
|
122
|
-
|
|
123
|
-
The `formattedAddressObj` mapping corresponds to the following component types:
|
|
124
|
-
|
|
125
|
-
- `formattedAddressObj.street_number`: longText property of the street_number
|
|
126
|
-
- `formattedAddressObj.street`: longText property of the route
|
|
127
|
-
- `formattedAddressObj.town`: longText property of the postal_town
|
|
128
|
-
- `formattedAddressObj.county`: longText property of the administrative_area_level_2
|
|
129
|
-
- `formattedAddressObj.country_iso2`: shortText property of the country
|
|
130
|
-
- `formattedAddressObj.postcode`: longText property of the postal_code
|
|
131
79
|
|
|
132
80
|
## Error Handling
|
|
133
81
|
|
|
@@ -150,13 +98,33 @@ Handle these errors gracefully in your application:
|
|
|
150
98
|
};
|
|
151
99
|
</script>
|
|
152
100
|
|
|
153
|
-
<PlaceAutocomplete
|
|
101
|
+
<PlaceAutocomplete {onError} {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} />
|
|
154
102
|
|
|
155
103
|
{#if pacError}
|
|
156
104
|
<p class="error">{pacError}</p>
|
|
157
105
|
{/if}
|
|
158
106
|
```
|
|
159
107
|
|
|
108
|
+
## Customization
|
|
109
|
+
|
|
110
|
+
- Placeholder: Use the placeholder property to customize the input field's placeholder text.
|
|
111
|
+
- Language: Use the language property to set the language of the autocomplete results.
|
|
112
|
+
- Region: Use the region property to bias the results toward a particular region. If the countries array is provided the region will be used from the selected country.
|
|
113
|
+
- Autocomplete: Use to disable the input autocomplete.
|
|
114
|
+
|
|
115
|
+
```svelte
|
|
116
|
+
<script>
|
|
117
|
+
// ... other imports
|
|
118
|
+
const placeholder = 'Search...';
|
|
119
|
+
const language = 'en-GB';
|
|
120
|
+
const region = 'GB';
|
|
121
|
+
const autocompete = 'off';
|
|
122
|
+
</script>
|
|
123
|
+
|
|
124
|
+
<PlaceAutocomplete {onError} {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} bind:countries {placeholder} {language} {region} {autocomplete}/>
|
|
125
|
+
|
|
126
|
+
```
|
|
127
|
+
|
|
160
128
|
## Contributing
|
|
161
129
|
|
|
162
130
|
Contributions are welcome! Please open an issue or submit a pull request on the [GitHub repository](https://github.com/alexpechkarev/places-autocomplete-svelte/).
|
|
@@ -6,18 +6,13 @@
|
|
|
6
6
|
// Props Interface
|
|
7
7
|
interface Props {
|
|
8
8
|
PUBLIC_GOOGLE_MAPS_API_KEY: string;
|
|
9
|
-
fetchFields
|
|
9
|
+
fetchFields?: string[];
|
|
10
10
|
countries: { name: string; region: string }[];
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
town: string;
|
|
17
|
-
county: string;
|
|
18
|
-
country_iso2: string;
|
|
19
|
-
postcode: string;
|
|
20
|
-
};
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
language?: string;
|
|
13
|
+
region?: string;
|
|
14
|
+
autocomplete?: AutoFill;
|
|
15
|
+
onResponse: (e: Event) => void;
|
|
21
16
|
onError: (error: string) => void;
|
|
22
17
|
}
|
|
23
18
|
// Bindable Props
|
|
@@ -29,16 +24,11 @@
|
|
|
29
24
|
*/
|
|
30
25
|
fetchFields = $bindable(['formattedAddress', 'addressComponents']),
|
|
31
26
|
countries = $bindable([]),
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
town: '',
|
|
38
|
-
county: '',
|
|
39
|
-
country_iso2: '',
|
|
40
|
-
postcode: ''
|
|
41
|
-
}),
|
|
27
|
+
placeholder = $bindable('Search...'),
|
|
28
|
+
language = $bindable('en-GB'),
|
|
29
|
+
region = $bindable('GB'),
|
|
30
|
+
autocomplete = $bindable('off'),
|
|
31
|
+
onResponse = $bindable((e: Event) => {}),
|
|
42
32
|
onError = $bindable((error: string) => {})
|
|
43
33
|
}: Props = $props();
|
|
44
34
|
|
|
@@ -55,8 +45,8 @@
|
|
|
55
45
|
//https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.includedPrimaryTypes
|
|
56
46
|
let request = $state({
|
|
57
47
|
input: '',
|
|
58
|
-
language:
|
|
59
|
-
region:
|
|
48
|
+
language: language,
|
|
49
|
+
region: region,
|
|
60
50
|
sessionToken: ''
|
|
61
51
|
});
|
|
62
52
|
|
|
@@ -92,6 +82,7 @@
|
|
|
92
82
|
}
|
|
93
83
|
|
|
94
84
|
request.input = target.value;
|
|
85
|
+
|
|
95
86
|
try {
|
|
96
87
|
const { suggestions } =
|
|
97
88
|
await placesApi.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
|
|
@@ -124,44 +115,7 @@
|
|
|
124
115
|
fields: fetchFields
|
|
125
116
|
});
|
|
126
117
|
let placeData = place.toJSON();
|
|
127
|
-
|
|
128
|
-
street_number: '',
|
|
129
|
-
street: '',
|
|
130
|
-
town: '',
|
|
131
|
-
county: '',
|
|
132
|
-
country_iso2: '',
|
|
133
|
-
postcode: ''
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
title = 'Selected address: ' + placeData.formattedAddress;
|
|
137
|
-
formattedAddress = placeData.formattedAddress;
|
|
138
|
-
fullResponse = placeData.addressComponents;
|
|
139
|
-
|
|
140
|
-
for (const component of placeData.addressComponents) {
|
|
141
|
-
switch (component.types[0]) {
|
|
142
|
-
case 'street_number':
|
|
143
|
-
case 'point_of_interest':
|
|
144
|
-
case 'establishment':
|
|
145
|
-
formattedAddressObj.street_number = component.longText;
|
|
146
|
-
break;
|
|
147
|
-
case 'route':
|
|
148
|
-
case 'premise':
|
|
149
|
-
formattedAddressObj.street = component.longText;
|
|
150
|
-
break;
|
|
151
|
-
case 'postal_town':
|
|
152
|
-
formattedAddressObj.town = component.longText;
|
|
153
|
-
break;
|
|
154
|
-
case 'administrative_area_level_2':
|
|
155
|
-
formattedAddressObj.county = component.longText;
|
|
156
|
-
break;
|
|
157
|
-
case 'country':
|
|
158
|
-
formattedAddressObj.country_iso2 = component.shortText;
|
|
159
|
-
break;
|
|
160
|
-
case 'postal_code':
|
|
161
|
-
formattedAddressObj.postcode = component.longText;
|
|
162
|
-
break;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
118
|
+
onResponse(placeData);
|
|
165
119
|
} catch (e: any) {
|
|
166
120
|
onError(
|
|
167
121
|
(e.name || 'An error occurred') + ' - ' + (e.message || 'error fetching place details')
|
|
@@ -263,7 +217,8 @@
|
|
|
263
217
|
name="search"
|
|
264
218
|
bind:this={inputRef}
|
|
265
219
|
class="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"
|
|
266
|
-
placeholder=
|
|
220
|
+
placeholder={placeholder}
|
|
221
|
+
autocomplete={autocomplete}
|
|
267
222
|
aria-controls="options"
|
|
268
223
|
bind:value={request.input}
|
|
269
224
|
oninput={makeAcRequest}
|
|
@@ -329,8 +284,9 @@
|
|
|
329
284
|
</div>
|
|
330
285
|
</div>
|
|
331
286
|
|
|
332
|
-
|
|
333
|
-
<div class="text-sm font-medium leading-6 text-gray-500">{title}</div>
|
|
334
|
-
</div>
|
|
287
|
+
|
|
335
288
|
</div>
|
|
336
289
|
</section>
|
|
290
|
+
<style>
|
|
291
|
+
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))}
|
|
292
|
+
</style>
|
|
@@ -1,24 +1,15 @@
|
|
|
1
1
|
declare const PlaceAutocomplete: import("svelte").Component<{
|
|
2
2
|
PUBLIC_GOOGLE_MAPS_API_KEY: string;
|
|
3
|
-
fetchFields
|
|
3
|
+
fetchFields?: string[];
|
|
4
4
|
countries: {
|
|
5
5
|
name: string;
|
|
6
6
|
region: string;
|
|
7
7
|
}[];
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}[];
|
|
14
|
-
formattedAddressObj: {
|
|
15
|
-
street_number: string;
|
|
16
|
-
street: string;
|
|
17
|
-
town: string;
|
|
18
|
-
county: string;
|
|
19
|
-
country_iso2: string;
|
|
20
|
-
postcode: string;
|
|
21
|
-
};
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
language?: string;
|
|
10
|
+
region?: string;
|
|
11
|
+
autocomplete?: AutoFill;
|
|
12
|
+
onResponse: (e: Event) => void;
|
|
22
13
|
onError: (error: string) => void;
|
|
23
|
-
}, {}, "PUBLIC_GOOGLE_MAPS_API_KEY" | "fetchFields" | "
|
|
14
|
+
}, {}, "PUBLIC_GOOGLE_MAPS_API_KEY" | "fetchFields" | "countries" | "placeholder" | "language" | "region" | "autocomplete" | "onResponse" | "onError">;
|
|
24
15
|
export default PlaceAutocomplete;
|
package/package.json
CHANGED
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "places-autocomplete-svelte",
|
|
3
3
|
"license": "MIT",
|
|
4
|
-
"version": "2.0.
|
|
5
|
-
"description": "A Svelte component
|
|
4
|
+
"version": "2.0.8",
|
|
5
|
+
"description": "A lightweight and customizable Svelte component for easy integration of Google Maps Places Autocomplete (New API) in your Svelte/SvelteKit applications. Provides accessible autocomplete suggestions and detailed address retrieval.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"svelte",
|
|
8
|
+
"sveltekit",
|
|
8
9
|
"autocomplete",
|
|
9
|
-
"location",
|
|
10
|
-
"search",
|
|
11
10
|
"google-maps",
|
|
12
11
|
"google-places",
|
|
13
|
-
"places-
|
|
12
|
+
"places-autocomplete",
|
|
13
|
+
"location",
|
|
14
|
+
"geocoding",
|
|
15
|
+
"address",
|
|
16
|
+
"address-input",
|
|
14
17
|
"input",
|
|
15
|
-
"
|
|
18
|
+
"search",
|
|
19
|
+
"new api"
|
|
16
20
|
],
|
|
17
21
|
"homepage": "https://github.com/alexpechkarev",
|
|
18
22
|
"repository": {
|
|
@@ -68,6 +72,7 @@
|
|
|
68
72
|
"@sveltejs/kit": "^2.7.3",
|
|
69
73
|
"@sveltejs/package": "^2.3.7",
|
|
70
74
|
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
|
75
|
+
"@tailwindcss/typography": "^0.5.15",
|
|
71
76
|
"@types/eslint": "^9.6.1",
|
|
72
77
|
"autoprefixer": "^10.4.20",
|
|
73
78
|
"eslint": "^9.13.0",
|