places-autocomplete-svelte 1.0.0 → 1.0.1
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 +204 -1
- package/dist/PlaceAutocomplete.svelte +27 -14
- package/dist/PlaceAutocomplete.svelte.d.ts +3 -2
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1 +1,204 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Places Autocomplete Svelte
|
|
2
|
+
|
|
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
|
+
|
|
5
|
+
## Features:
|
|
6
|
+
- Seamless Integration: Easily integrate the component into your SvelteKit projects.
|
|
7
|
+
- Autocomplete Suggestions: Provide users with real-time suggestions as they type, enhancing the search experience.
|
|
8
|
+
- Detailed Address Retrieval: Retrieve comprehensive address information, including street address, city, region, postal code, and country.
|
|
9
|
+
- Formatted and Unformatted Responses: Access both formatted address strings and raw address component data for flexible use cases.
|
|
10
|
+
- Country Selection: Allow users to specify a region for more targeted results.
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## Requirements
|
|
18
|
+
|
|
19
|
+
Before using this component, you'll need:
|
|
20
|
+
- 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.
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
Using npm:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
$ npm i places-autocomplete-svelte
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## Import Component
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
import PlaceAutocomplete from 'places-autocomplete-svelte';
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Basic Usage
|
|
39
|
+
|
|
40
|
+
Initiate the component with your public Google Maps API key `PUBLIC_GOOGLE_MAPS_API_KEY` and `formattedAddress` properties. Enter your search query in the search box, then click to select the results. The `formattedAddress` property poulated with the place name and address.
|
|
41
|
+
|
|
42
|
+
The request default `language: 'en-GB'` and `region: 'GB'`, see below to specify different.
|
|
43
|
+
|
|
44
|
+
Use keyboard `up` and `down` key to navigate the suggested results. `esc` will clear the search query.
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
<script>
|
|
48
|
+
import {PlaceAutocomplete} from 'places-autocomplete-svelte';
|
|
49
|
+
|
|
50
|
+
//the business name and address.
|
|
51
|
+
let formattedAddress = '';
|
|
52
|
+
// Your Google Maps Public API Key
|
|
53
|
+
let PUBLIC_GOOGLE_MAPS_API_KEY = '--YOUR_API_KEY--';
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<PlaceAutocomplete bind:PUBLIC_GOOGLE_MAPS_API_KEY bind:formattedAddress/>
|
|
57
|
+
|
|
58
|
+
// Etihad Stadium, Etihad Campus, Manchester M11 3FF
|
|
59
|
+
<p>{formattedAddress}</p>
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
- Replace `'--YOUR_API_KEY--'` with your actual Google Maps API key.
|
|
63
|
+
- The `formattedAddress` variable will be populated with the selected place's formatted address string.
|
|
64
|
+
|
|
65
|
+
## Accessing Address Components
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
<script>
|
|
69
|
+
import {PlaceAutocomplete} from 'places-autocomplete-svelte';
|
|
70
|
+
// formatted address object
|
|
71
|
+
let formattedAddressObj = {
|
|
72
|
+
street_number: '',
|
|
73
|
+
street: '',
|
|
74
|
+
town: '',
|
|
75
|
+
county: '',
|
|
76
|
+
country_iso2: '',
|
|
77
|
+
postcode: ''
|
|
78
|
+
};
|
|
79
|
+
// Your Google Maps Public API Key
|
|
80
|
+
let PUBLIC_GOOGLE_MAPS_API_KEY = '--YOUR_API_KEY--';
|
|
81
|
+
|
|
82
|
+
</script>
|
|
83
|
+
|
|
84
|
+
<PlaceAutocomplete
|
|
85
|
+
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
86
|
+
bind:formattedAddressObj />
|
|
87
|
+
/**
|
|
88
|
+
* Formatted address
|
|
89
|
+
* {
|
|
90
|
+
* "street_number":"Etihad Stadium",
|
|
91
|
+
* "street":"Etihad Campus",
|
|
92
|
+
* "town":"Manchester",
|
|
93
|
+
* "county":"Greater Manchester",
|
|
94
|
+
* "country_iso2":"GB",
|
|
95
|
+
* "postcode":"M11 3FF"
|
|
96
|
+
* }
|
|
97
|
+
*/
|
|
98
|
+
<p>{JSON.stringify(formattedAddressObj)}</p>
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
- The `formattedAddressObj` will contain parsed address components, allowing you to access individual elements like street number, town, and postcode.
|
|
103
|
+
|
|
104
|
+
Address Parsing:
|
|
105
|
+
|
|
106
|
+
The Google Mps API `fetchFields()` method retrieves detailed place information. This information is then mapped to the `formattedAddressObj` based on address component types. The following mapping corresponds to the following component types:
|
|
107
|
+
|
|
108
|
+
- `street_number`: longText property of the `street_number`
|
|
109
|
+
- `street`: longText property of the `route`
|
|
110
|
+
- `town`: longText property of the `postal_town`
|
|
111
|
+
- `county`: longText property of the `administrative_area_level_2`
|
|
112
|
+
- `country_iso2`: shortText property of the `country`
|
|
113
|
+
- `postcode`: longText property of the `postal_code`
|
|
114
|
+
|
|
115
|
+
Benefits:
|
|
116
|
+
|
|
117
|
+
By using `formattedAddressObj`, you can easily access individual address components like street number, town, and postcode, simplifying address manipulation in your application.
|
|
118
|
+
|
|
119
|
+
## Specifying Countries
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
```js
|
|
123
|
+
<script>
|
|
124
|
+
import {PlaceAutocomplete} from 'places-autocomplete-svelte';
|
|
125
|
+
|
|
126
|
+
//the business name and address.
|
|
127
|
+
let formattedAddress = '';
|
|
128
|
+
// Your Google Maps Public API Key
|
|
129
|
+
let PUBLIC_GOOGLE_MAPS_API_KEY = '--YOUR_API_KEY--';
|
|
130
|
+
// countries
|
|
131
|
+
let countries = [
|
|
132
|
+
{ name: 'United Kingdom', region: 'GB' },
|
|
133
|
+
{ name: 'United States', region: 'US' },
|
|
134
|
+
{ name: 'Switzerland', region: 'CH' },
|
|
135
|
+
{ name: 'Greece', region: 'GR' },
|
|
136
|
+
{ name: 'Russia', region: 'RU' },
|
|
137
|
+
{ name: 'Japan', region: 'JP' }
|
|
138
|
+
];
|
|
139
|
+
</script>
|
|
140
|
+
|
|
141
|
+
<PlaceAutocomplete
|
|
142
|
+
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
143
|
+
bind:formattedAddress
|
|
144
|
+
bind:countries/>
|
|
145
|
+
|
|
146
|
+
// Etihad Stadium, Etihad Campus, Manchester M11 3FF
|
|
147
|
+
<p>{formattedAddress}</p>
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
- The `countries` array allows users to select a specific region for their search.
|
|
152
|
+
|
|
153
|
+
An optional property `countries` to allow country selection. As per [Google Maps documentation](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest):
|
|
154
|
+
|
|
155
|
+
`The region code, specified as a CLDR two-character region code. This affects address formatting, result ranking, and may influence what results are returned. This does not restrict results to the specified region.`
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
## Formatted and Unformatted reponses
|
|
159
|
+
|
|
160
|
+
```js
|
|
161
|
+
<script>
|
|
162
|
+
import {PlaceAutocomplete} from 'places-autocomplete-svelte';
|
|
163
|
+
|
|
164
|
+
//the business name and address.
|
|
165
|
+
let formattedAddress = '';
|
|
166
|
+
// full unformatted response
|
|
167
|
+
let fullResponse = [];
|
|
168
|
+
// Your Google Maps Public API Key
|
|
169
|
+
let PUBLIC_GOOGLE_MAPS_API_KEY = '--YOUR_API_KEY--';
|
|
170
|
+
// countries
|
|
171
|
+
let countries = [
|
|
172
|
+
{ name: 'United Kingdom', region: 'GB' },
|
|
173
|
+
{ name: 'United States', region: 'US' },
|
|
174
|
+
{ name: 'Switzerland', region: 'CH' },
|
|
175
|
+
{ name: 'Greece', region: 'GR' },
|
|
176
|
+
{ name: 'Russia', region: 'RU' },
|
|
177
|
+
{ name: 'Japan', region: 'JP' }
|
|
178
|
+
];
|
|
179
|
+
</script>
|
|
180
|
+
|
|
181
|
+
<PlaceAutocomplete
|
|
182
|
+
bind:formattedAddress
|
|
183
|
+
bind:formattedAddressObj
|
|
184
|
+
bind:fullResponse
|
|
185
|
+
bind:PUBLIC_GOOGLE_MAPS_API_KEY
|
|
186
|
+
bind:countries/>
|
|
187
|
+
|
|
188
|
+
```
|
|
189
|
+
Depending on your application requirements you can bind the component properties as needed.
|
|
190
|
+
Below example binds all three responsones:
|
|
191
|
+
- `formattedAddress` - place name and address as string
|
|
192
|
+
- `formattedAddressObj` - populated with the parsed address components
|
|
193
|
+
- `fullResponse` - populated address components response as it retruned from `fetchFilds()` method
|
|
194
|
+
|
|
195
|
+
## Customization:
|
|
196
|
+
|
|
197
|
+
- **Language:** The component defaults to `language: 'en-GB'` and `region: 'GB'`. You can customize these settings as needed.
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
[MIT](LICENSE)
|
|
204
|
+
|
|
@@ -5,9 +5,10 @@ export let PUBLIC_GOOGLE_MAPS_API_KEY = "";
|
|
|
5
5
|
export let fetchFields = ["displayName", "formattedAddress", "addressComponents"];
|
|
6
6
|
export let countries = [];
|
|
7
7
|
let hasCountries = countries.length > 0;
|
|
8
|
+
export let formattedAddress = "";
|
|
8
9
|
export let fullResponse = [];
|
|
9
|
-
export let
|
|
10
|
-
|
|
10
|
+
export let formattedAddressObj = {
|
|
11
|
+
street_number: "",
|
|
11
12
|
street: "",
|
|
12
13
|
town: "",
|
|
13
14
|
county: "",
|
|
@@ -62,27 +63,39 @@ const onPlaceSelected = async (place) => {
|
|
|
62
63
|
fields: fetchFields
|
|
63
64
|
});
|
|
64
65
|
let placeData = place.toJSON();
|
|
66
|
+
formattedAddressObj = {
|
|
67
|
+
street_number: "",
|
|
68
|
+
street: "",
|
|
69
|
+
town: "",
|
|
70
|
+
county: "",
|
|
71
|
+
country_iso2: "",
|
|
72
|
+
postcode: ""
|
|
73
|
+
};
|
|
65
74
|
title = "Selected address: " + placeData.formattedAddress;
|
|
75
|
+
formattedAddress = placeData.formattedAddress;
|
|
66
76
|
fullResponse = placeData.addressComponents;
|
|
67
77
|
for (const component of placeData.addressComponents) {
|
|
68
78
|
switch (component.types[0]) {
|
|
69
79
|
case "street_number":
|
|
70
|
-
|
|
80
|
+
case "point_of_interest":
|
|
81
|
+
case "establishment":
|
|
82
|
+
formattedAddressObj.street_number = component.longText;
|
|
71
83
|
break;
|
|
72
84
|
case "route":
|
|
73
|
-
|
|
85
|
+
case "premise":
|
|
86
|
+
formattedAddressObj.street = component.longText;
|
|
74
87
|
break;
|
|
75
88
|
case "postal_town":
|
|
76
|
-
|
|
89
|
+
formattedAddressObj.town = component.longText;
|
|
77
90
|
break;
|
|
78
91
|
case "administrative_area_level_2":
|
|
79
|
-
|
|
92
|
+
formattedAddressObj.county = component.longText;
|
|
80
93
|
break;
|
|
81
94
|
case "country":
|
|
82
|
-
|
|
95
|
+
formattedAddressObj.country_iso2 = component.shortText;
|
|
83
96
|
break;
|
|
84
97
|
case "postal_code":
|
|
85
|
-
|
|
98
|
+
formattedAddressObj.postcode = component.longText;
|
|
86
99
|
break;
|
|
87
100
|
}
|
|
88
101
|
}
|
|
@@ -143,7 +156,7 @@ function onKeyDown(e) {
|
|
|
143
156
|
|
|
144
157
|
<div class="grid grid-cols-1 lg:grid-cols-6 gap-x-4">
|
|
145
158
|
<div class:lg:col-span-4={hasCountries} class:lg:col-span-6={!hasCountries}>
|
|
146
|
-
<label class="text-sm text-gray-
|
|
159
|
+
<label class="mt-1 text-sm leading-6 text-gray-600" for="search">Start typing your address</label>
|
|
147
160
|
<div class="relative z-50 transform rounded-xl mt-4">
|
|
148
161
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
|
149
162
|
<svg
|
|
@@ -171,15 +184,15 @@ function onKeyDown(e) {
|
|
|
171
184
|
{#if results.length > 0}
|
|
172
185
|
<div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
|
|
173
186
|
<kbd
|
|
174
|
-
class="inline-flex items-center rounded border border-gray-
|
|
187
|
+
class="inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1"
|
|
175
188
|
>Esc</kbd
|
|
176
189
|
>
|
|
177
190
|
<kbd
|
|
178
|
-
class="inline-flex items-center justify-center rounded border border-gray-
|
|
191
|
+
class="inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6"
|
|
179
192
|
>⇑</kbd
|
|
180
193
|
>
|
|
181
194
|
<kbd
|
|
182
|
-
class="inline-flex items-center rounded border border-gray-
|
|
195
|
+
class="inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6"
|
|
183
196
|
>⇓</kbd
|
|
184
197
|
>
|
|
185
198
|
</div>
|
|
@@ -209,7 +222,7 @@ function onKeyDown(e) {
|
|
|
209
222
|
</div>
|
|
210
223
|
|
|
211
224
|
<div class:lg:col-span-2={hasCountries} class:hidden={!hasCountries}>
|
|
212
|
-
<label class="text-sm text-gray-
|
|
225
|
+
<label class="mt-1 text-sm leading-6 text-gray-600" for="search">Address country</label>
|
|
213
226
|
<div class="flex items-center mt-4">
|
|
214
227
|
<label for="country" class="sr-only">Country</label>
|
|
215
228
|
<select
|
|
@@ -232,5 +245,5 @@ function onKeyDown(e) {
|
|
|
232
245
|
</section>
|
|
233
246
|
|
|
234
247
|
<style>
|
|
235
|
-
input,select,ul{margin:0;padding:0}.absolute,.sr-only{position:absolute}.block,svg{display:block}*,.border-gray-200,.border-gray-300{--tw-border-opacity:1}.text-gray-400,.text-gray-500,.text-gray-700,.text-gray-900,.text-red-700,.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}strong{font-weight:bolder}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}input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-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-200{border-color:rgb(229 231 235 / var(--tw-border-opacity))}.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}.py-3{padding-top:.75rem;padding-bottom:.75rem}.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-400{color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-500{color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-700{color:rgb(55 65 81 / var(--tw-text-opacity))}.text-gray-900{color:rgb(17 24 39 / var(--tw-text-opacity))}.text-red-700{color:rgb(185 28 28 / 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-1:focus,.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)}.focus\:ring-1:focus,.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}
|
|
248
|
+
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-red-700,.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}strong{font-weight:bolder}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}input:where([type=button]),input:where([type=reset]),input:where([type=submit]){background-color:transparent;background-image:none}:-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}.py-3{padding-top:.75rem;padding-bottom:.75rem}.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-red-700{color:rgb(185 28 28 / 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-1:focus,.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)}.focus\:ring-1:focus,.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))}
|
|
236
249
|
</style>
|
|
@@ -7,13 +7,14 @@ declare const __propDef: {
|
|
|
7
7
|
name: string;
|
|
8
8
|
region: string;
|
|
9
9
|
}[];
|
|
10
|
+
formattedAddress?: string;
|
|
10
11
|
fullResponse?: {
|
|
11
12
|
longText: string;
|
|
12
13
|
shortText: string;
|
|
13
14
|
types: Array<string>;
|
|
14
15
|
}[];
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
formattedAddressObj?: {
|
|
17
|
+
street_number: string;
|
|
17
18
|
street: string;
|
|
18
19
|
town: string;
|
|
19
20
|
county: string;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "places-autocomplete-svelte",
|
|
3
3
|
"license": "MIT",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.1",
|
|
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",
|
|
@@ -60,6 +60,7 @@
|
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
62
|
"@sveltejs/adapter-auto": "^3.2.2",
|
|
63
|
+
"@sveltejs/adapter-cloudflare": "^4.6.1",
|
|
63
64
|
"@sveltejs/kit": "^2.5.18",
|
|
64
65
|
"@sveltejs/package": "^2.3.2",
|
|
65
66
|
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|