places-autocomplete-svelte 2.2.2 → 2.2.4
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 +10 -5
- package/dist/PlaceAutocomplete.svelte +10 -8
- package/dist/PlaceAutocomplete.svelte.d.ts +1 -1
- package/dist/helpers.d.ts +19 -0
- package/dist/helpers.js +104 -0
- package/package.json +20 -20
package/README.md
CHANGED
|
@@ -3,6 +3,11 @@
|
|
|
3
3
|
This Svelte component provides a user-friendly way to search for and retrieve detailed address information within your [SvelteKit](https://kit.svelte.dev) applications, leveraging the power of the [Google Maps Places (New) Autocomplete API](https://developers.google.com/maps/documentation/javascript/place-autocomplete-overview). It comes with default styling using [Tailwind CSS](https://tailwindcss.com/), which you can fully customise.
|
|
4
4
|
|
|
5
5
|
|
|
6
|
+
## Places (New) Autocomplete – JavaScript Integration
|
|
7
|
+
|
|
8
|
+
Simply include a single script tag and handle the response in your JavaScript code.
|
|
9
|
+
[View Details](https://pacservice.pages.dev/)
|
|
10
|
+
|
|
6
11
|
|
|
7
12
|
## Features
|
|
8
13
|
|
|
@@ -29,6 +34,10 @@ See a live demo of the component in action: [Basic Example](https://places-autoc
|
|
|
29
34
|
|
|
30
35
|
|
|
31
36
|
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
32
41
|
## Requirements
|
|
33
42
|
|
|
34
43
|
- **Google Maps API Key** with the Places API (New) enabled. Refer to [Use API Keys](https://developers.google.com/maps/documentation/javascript/get-api-key) for detailed instructions.
|
|
@@ -39,11 +48,7 @@ See a live demo of the component in action: [Basic Example](https://places-autoc
|
|
|
39
48
|
npm i places-autocomplete-svelte
|
|
40
49
|
```
|
|
41
50
|
|
|
42
|
-
## Installation Svelte 4
|
|
43
51
|
|
|
44
|
-
```bash
|
|
45
|
-
npm i places-autocomplete-svelte@1.0.1
|
|
46
|
-
```
|
|
47
52
|
|
|
48
53
|
|
|
49
54
|
## Basic Usage
|
|
@@ -79,7 +84,7 @@ let onResponse = (response) => {
|
|
|
79
84
|
| `onResponse` | `CustomEvent` | Dispatched when a place is selected, containing the place details in `event.detail`. | Yes | |
|
|
80
85
|
| `onError` | `CustomEvent` | Dispatched when an error occurs, with the error message in `event.detail`. | No | |
|
|
81
86
|
| `requestParams` | `Object` | Object for additional request parameters (e.g., `types`, `bounds`, `origin`, `region`, `language`). See [AutocompleteRequest](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). | No | `{}` |
|
|
82
|
-
| `fetchFields` | `Array` | Array of place data fields to return. See [Supported Fields](https://developers.google.com/maps/documentation/javascript/
|
|
87
|
+
| `fetchFields` | `Array` | Array of place data fields to return. See [Supported Fields](https://developers.google.com/maps/documentation/javascript/place-class-data-fields) documentation for a comprehensive list of available fields. Note that the Places Autocomplete service does not support the following fields, even if they are available in the Place Details API: `geometry`, `icon`, `name`, `permanentlyClosed`, `photo`, `placeId`, `url`, `utcOffset`, `vicinity`, `openingHours`, `icon`, and `name`. If you need these fields, make a separate call to the Place Details API using the returned `place_id`. | No | `['formattedAddress', 'addressComponents']` |
|
|
83
88
|
| `options` | `Object` | Options for customizing the component's behavior and appearance. See "Customization" below. | No | See default values in "Customization" |
|
|
84
89
|
|
|
85
90
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { onMount } from 'svelte';
|
|
3
3
|
import * as GMaps from '@googlemaps/js-api-loader';
|
|
4
4
|
import type { Props } from './interfaces.js';
|
|
5
|
-
import { validateOptions, validateRequestParams, formatDistance } from './helpers.js';
|
|
5
|
+
import { validateOptions, validateRequestParams, formatDistance, validateFetchFields } from './helpers.js';
|
|
6
6
|
const { Loader } = GMaps;
|
|
7
7
|
|
|
8
8
|
let {
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
* @see https://developers.google.com/maps/documentation/javascript/usage-and-billing#location-placedetails
|
|
12
12
|
*/
|
|
13
13
|
PUBLIC_GOOGLE_MAPS_API_KEY,
|
|
14
|
-
fetchFields = $bindable(['formattedAddress', 'addressComponents']),
|
|
14
|
+
//fetchFields = $bindable(['formattedAddress', 'addressComponents']),
|
|
15
|
+
fetchFields,
|
|
15
16
|
options,
|
|
16
17
|
onResponse = $bindable((e: Event) => {}),
|
|
17
18
|
onError = $bindable((error: string) => {}),
|
|
@@ -22,6 +23,10 @@
|
|
|
22
23
|
options = validateOptions(options);
|
|
23
24
|
//console.log(options);
|
|
24
25
|
|
|
26
|
+
// validate fetchFields
|
|
27
|
+
fetchFields = validateFetchFields(fetchFields);
|
|
28
|
+
//console.log(fetchFields);
|
|
29
|
+
|
|
25
30
|
// set classes as state
|
|
26
31
|
let cl = $state(options.classes);
|
|
27
32
|
|
|
@@ -112,13 +117,10 @@
|
|
|
112
117
|
//https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteSuggestion
|
|
113
118
|
* @param place
|
|
114
119
|
*/
|
|
115
|
-
const onPlaceSelected = async (place: {
|
|
116
|
-
[x: string]: any;
|
|
117
|
-
fetchFields: (arg0: { fields: string[] }) => any;
|
|
118
|
-
addressComponents: any;
|
|
119
|
-
formattedAddress: string;
|
|
120
|
-
}): Promise<void> => {
|
|
120
|
+
const onPlaceSelected = async (place: { fetchFields: (arg0: { fields: string[]; }) => any; toJSON: () => any; }): Promise<void> => {
|
|
121
121
|
try {
|
|
122
|
+
// console.log(place);
|
|
123
|
+
// console.log(fetchFields);
|
|
122
124
|
await place.fetchFields({
|
|
123
125
|
fields: fetchFields
|
|
124
126
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { Props } from './interfaces.js';
|
|
2
|
-
declare const PlaceAutocomplete: import("svelte").Component<Props, {}, "
|
|
2
|
+
declare const PlaceAutocomplete: import("svelte").Component<Props, {}, "onResponse" | "onError">;
|
|
3
3
|
type PlaceAutocomplete = ReturnType<typeof PlaceAutocomplete>;
|
|
4
4
|
export default PlaceAutocomplete;
|
package/dist/helpers.d.ts
CHANGED
|
@@ -3,11 +3,24 @@ import type { RequestParams, ComponentOptions, ComponentClasses, DistanceUnits }
|
|
|
3
3
|
* Default request parameters
|
|
4
4
|
*/
|
|
5
5
|
export declare const requestParamsDefault: RequestParams;
|
|
6
|
+
/**
|
|
7
|
+
* Default fetch fields values
|
|
8
|
+
* https://developers.google.com/maps/documentation/javascript/place-class-data-fields
|
|
9
|
+
*
|
|
10
|
+
* unsupported field values
|
|
11
|
+
* geometry, icon, name, permanentlyClosed, photo, placeId, url, utcOffset, vicinity, openingHours, icon, name
|
|
12
|
+
*/
|
|
13
|
+
export declare const defaultFetchFields: Array<string>;
|
|
6
14
|
/**
|
|
7
15
|
* Validate and cast request parameters
|
|
8
16
|
* @param requestParams
|
|
9
17
|
*/
|
|
10
18
|
export declare const validateRequestParams: (requestParams: RequestParams | undefined) => RequestParams;
|
|
19
|
+
/**
|
|
20
|
+
* Validate fetchFields array parameters
|
|
21
|
+
* @param fetchFields
|
|
22
|
+
*/
|
|
23
|
+
export declare const validateFetchFields: (fetchFields: Array<string> | undefined) => string[];
|
|
11
24
|
/**
|
|
12
25
|
* Default component classes
|
|
13
26
|
*/
|
|
@@ -21,4 +34,10 @@ export declare const componentOptions: ComponentOptions;
|
|
|
21
34
|
* @param options
|
|
22
35
|
*/
|
|
23
36
|
export declare const validateOptions: (options: ComponentOptions | undefined) => ComponentOptions;
|
|
37
|
+
/**
|
|
38
|
+
* Display distance in km or miles
|
|
39
|
+
* @param distance
|
|
40
|
+
* @param units
|
|
41
|
+
* @returns
|
|
42
|
+
*/
|
|
24
43
|
export declare const formatDistance: (distance: number, units: DistanceUnits) => string | null;
|
package/dist/helpers.js
CHANGED
|
@@ -98,6 +98,71 @@ export const requestParamsDefault = {
|
|
|
98
98
|
*/
|
|
99
99
|
sessionToken: ''
|
|
100
100
|
};
|
|
101
|
+
/**
|
|
102
|
+
* Default fetch fields values
|
|
103
|
+
* https://developers.google.com/maps/documentation/javascript/place-class-data-fields
|
|
104
|
+
*
|
|
105
|
+
* unsupported field values
|
|
106
|
+
* geometry, icon, name, permanentlyClosed, photo, placeId, url, utcOffset, vicinity, openingHours, icon, name
|
|
107
|
+
*/
|
|
108
|
+
export const defaultFetchFields = [
|
|
109
|
+
'formattedAddress',
|
|
110
|
+
'addressComponents',
|
|
111
|
+
'accessibilityOptions',
|
|
112
|
+
'allowsDogs',
|
|
113
|
+
'businessStatus',
|
|
114
|
+
'hasCurbsidePickup',
|
|
115
|
+
'hasDelivery',
|
|
116
|
+
'hasDineIn',
|
|
117
|
+
'displayName',
|
|
118
|
+
'displayNameLanguageCode',
|
|
119
|
+
'editorialSummary',
|
|
120
|
+
'evChargeOptions',
|
|
121
|
+
'adrFormatAddress',
|
|
122
|
+
'fuelOptions',
|
|
123
|
+
'isGoodForChildren',
|
|
124
|
+
'isGoodForGroups',
|
|
125
|
+
'isGoodForWatchingSports',
|
|
126
|
+
'svgIconMaskURI',
|
|
127
|
+
'iconBackgroundColor',
|
|
128
|
+
'internationalPhoneNumber',
|
|
129
|
+
'hasLiveMusic',
|
|
130
|
+
'location',
|
|
131
|
+
'hasMenuForChildren',
|
|
132
|
+
'regularOpeningHours',
|
|
133
|
+
'hasOutdoorSeating',
|
|
134
|
+
'parkingOptions',
|
|
135
|
+
'paymentOptions',
|
|
136
|
+
'photos',
|
|
137
|
+
'nationalPhoneNumber',
|
|
138
|
+
'id',
|
|
139
|
+
'plusCode',
|
|
140
|
+
'priceLevel',
|
|
141
|
+
'primaryType',
|
|
142
|
+
'primaryTypeDisplayName',
|
|
143
|
+
'primaryTypeDisplayNameLanguageCode',
|
|
144
|
+
'rating',
|
|
145
|
+
'userRatingCount',
|
|
146
|
+
'isReservable',
|
|
147
|
+
'hasRestroom',
|
|
148
|
+
'reviews',
|
|
149
|
+
'servesBeer',
|
|
150
|
+
'servesBreakfast',
|
|
151
|
+
'servesBrunch',
|
|
152
|
+
'servesCocktails',
|
|
153
|
+
'servesCoffee',
|
|
154
|
+
'servesDessert',
|
|
155
|
+
'servesDinner',
|
|
156
|
+
'servesLunch',
|
|
157
|
+
'servesVegetarianFood',
|
|
158
|
+
'servesWine',
|
|
159
|
+
'hasTakeout',
|
|
160
|
+
'types',
|
|
161
|
+
'websiteURI',
|
|
162
|
+
'utcOffsetMinutes',
|
|
163
|
+
'viewport',
|
|
164
|
+
'websiteURI'
|
|
165
|
+
];
|
|
101
166
|
/**
|
|
102
167
|
* Check if a variable is a valid LatLng object
|
|
103
168
|
* @param latLng
|
|
@@ -188,6 +253,39 @@ export const validateRequestParams = (requestParams) => {
|
|
|
188
253
|
//console.log('validatedParams:', validatedParams);
|
|
189
254
|
return validatedParams;
|
|
190
255
|
};
|
|
256
|
+
/**
|
|
257
|
+
* Validate fetchFields array parameters
|
|
258
|
+
* @param fetchFields
|
|
259
|
+
*/
|
|
260
|
+
export const validateFetchFields = (fetchFields) => {
|
|
261
|
+
//https://developers.google.com/maps/documentation/javascript/place-class-data-fields
|
|
262
|
+
/**
|
|
263
|
+
* create a new object to store validated parameters
|
|
264
|
+
*/
|
|
265
|
+
const validatedFetchFields = [];
|
|
266
|
+
if (typeof fetchFields === 'undefined' || fetchFields.length === 0) {
|
|
267
|
+
return [
|
|
268
|
+
'formattedAddress',
|
|
269
|
+
'addressComponents'
|
|
270
|
+
];
|
|
271
|
+
}
|
|
272
|
+
// iterate over requestParams
|
|
273
|
+
for (const key of fetchFields) {
|
|
274
|
+
// Check if key is in requestParamsDefault
|
|
275
|
+
if (defaultFetchFields.includes(key)) {
|
|
276
|
+
validatedFetchFields.push(key);
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
if (validateFetchFields.length === 0) {
|
|
280
|
+
return [
|
|
281
|
+
'formattedAddress',
|
|
282
|
+
'addressComponents'
|
|
283
|
+
];
|
|
284
|
+
}
|
|
285
|
+
//console.log('validatedParams:', Object.keys(validatedParams));
|
|
286
|
+
//console.log('validatedParams:', validatedParams);
|
|
287
|
+
return validatedFetchFields;
|
|
288
|
+
};
|
|
191
289
|
/**
|
|
192
290
|
* Default component classes
|
|
193
291
|
*/
|
|
@@ -260,6 +358,12 @@ export const validateOptions = (options) => {
|
|
|
260
358
|
}
|
|
261
359
|
return validatedOptions;
|
|
262
360
|
};
|
|
361
|
+
/**
|
|
362
|
+
* Display distance in km or miles
|
|
363
|
+
* @param distance
|
|
364
|
+
* @param units
|
|
365
|
+
* @returns
|
|
366
|
+
*/
|
|
263
367
|
export const formatDistance = function (distance, units) {
|
|
264
368
|
if (typeof distance !== 'number') {
|
|
265
369
|
return null;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "places-autocomplete-svelte",
|
|
3
3
|
"license": "MIT",
|
|
4
|
-
"version": "2.2.
|
|
4
|
+
"version": "2.2.4",
|
|
5
5
|
"description": "A lightweight and customizable Svelte component for easy integration of Google Maps Places (New) Autocomplete in your Svelte/SvelteKit applications. Provides accessible autocomplete suggestions and detailed address retrieval.",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"svelte",
|
|
@@ -67,31 +67,31 @@
|
|
|
67
67
|
"svelte": "^5.1.4"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
|
-
"@sveltejs/adapter-auto": "^
|
|
71
|
-
"@sveltejs/adapter-cloudflare": "^
|
|
72
|
-
"@sveltejs/kit": "^2.
|
|
70
|
+
"@sveltejs/adapter-auto": "^5.0.0",
|
|
71
|
+
"@sveltejs/adapter-cloudflare": "^6.0.1",
|
|
72
|
+
"@sveltejs/kit": "^2.20.2",
|
|
73
73
|
"@sveltejs/package": "^2.3.10",
|
|
74
74
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
75
|
-
"@tailwindcss/postcss": "^4.0.
|
|
75
|
+
"@tailwindcss/postcss": "^4.0.15",
|
|
76
76
|
"@tailwindcss/typography": "^0.5.16",
|
|
77
|
-
"@tailwindcss/vite": "^4.0.
|
|
77
|
+
"@tailwindcss/vite": "^4.0.15",
|
|
78
78
|
"@types/eslint": "^9.6.1",
|
|
79
|
-
"autoprefixer": "^10.4.
|
|
80
|
-
"eslint": "^9.
|
|
81
|
-
"eslint-config-prettier": "^10.
|
|
82
|
-
"eslint-plugin-svelte": "^
|
|
83
|
-
"globals": "^
|
|
84
|
-
"postcss": "^8.5.
|
|
85
|
-
"prettier": "^3.5.
|
|
79
|
+
"autoprefixer": "^10.4.21",
|
|
80
|
+
"eslint": "^9.23.0",
|
|
81
|
+
"eslint-config-prettier": "^10.1.1",
|
|
82
|
+
"eslint-plugin-svelte": "^3.3.3",
|
|
83
|
+
"globals": "^16.0.0",
|
|
84
|
+
"postcss": "^8.5.3",
|
|
85
|
+
"prettier": "^3.5.3",
|
|
86
86
|
"prettier-plugin-svelte": "^3.3.3",
|
|
87
|
-
"publint": "^0.3.
|
|
88
|
-
"svelte": "^5.
|
|
89
|
-
"svelte-check": "^4.1.
|
|
90
|
-
"tailwindcss": "^4.0.
|
|
87
|
+
"publint": "^0.3.9",
|
|
88
|
+
"svelte": "^5.25.2",
|
|
89
|
+
"svelte-check": "^4.1.5",
|
|
90
|
+
"tailwindcss": "^4.0.15",
|
|
91
91
|
"tslib": "^2.8.1",
|
|
92
|
-
"typescript": "^5.
|
|
93
|
-
"typescript-eslint": "^8.
|
|
94
|
-
"vite": "^6.
|
|
92
|
+
"typescript": "^5.8.2",
|
|
93
|
+
"typescript-eslint": "^8.27.0",
|
|
94
|
+
"vite": "^6.2.2"
|
|
95
95
|
},
|
|
96
96
|
"svelte": "./dist/index.js",
|
|
97
97
|
"types": "./dist/PlaceAutocomplete.svelte.d.ts",
|