places-autocomplete-svelte 2.2.1 → 2.2.3

package/README.md

@@ -79,7 +79,7 @@ let onResponse = (response) => {
 | `onResponse`              | `CustomEvent`    | Dispatched when a place is selected, containing the place details in `event.detail`.                                                                                                                                              | Yes       |                                               |
 | `onError`                 | `CustomEvent`    | Dispatched when an error occurs, with the error message in `event.detail`.                                                                                                                                                 | No        |                                               |
 | `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        | `{}`                                       |
-| `fetchFields`            | `Array`         | Array of place data fields to return. See [Supported Fields](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult)                                                            | No        | `['formattedAddress', 'addressComponents']` |
+| `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, you must make a separate call to the Place Details API using the returned `place_id`.                                                            | No        | `['formattedAddress', 'addressComponents']` |
 | `options`                | `Object`        |  Options for customizing the component's behavior and appearance. See "Customization" below.                                                                                                                               | No        | See default values in "Customization"       |
 
 

package/dist/PlaceAutocomplete.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import * as GMaps from '@googlemaps/js-api-loader';
-	import type {Props } from './interfaces.js';
-	import { validateOptions, validateRequestParams, formatDistance } from './helpers.js';
+	import type { Props } from './interfaces.js';
+	import { validateOptions, validateRequestParams, formatDistance, validateFetchFields } from './helpers.js';
 	const { Loader } = GMaps;
 
 	let {
@@ -11,7 +11,8 @@
 		 * @see https://developers.google.com/maps/documentation/javascript/usage-and-billing#location-placedetails
 		 */
 		PUBLIC_GOOGLE_MAPS_API_KEY,
-		fetchFields = $bindable(['formattedAddress', 'addressComponents']),
+		//fetchFields = $bindable(['formattedAddress', 'addressComponents']),
+		fetchFields,
 		options,
 		onResponse = $bindable((e: Event) => {}),
 		onError = $bindable((error: string) => {}),
@@ -22,10 +23,13 @@
 	options = validateOptions(options);
 	//console.log(options);
 
+	// validate fetchFields
+	fetchFields = validateFetchFields(fetchFields);
+	//console.log(fetchFields);
+
 	// set classes as state
 	let cl = $state(options.classes);
 
-
 	// reset keyboard classes
 	const resetKbdClasses = () => {
 		cl.kbd_down = options.classes.kbd_down;
@@ -39,7 +43,6 @@
 	let loader: GMaps.Loader;
 	let placesApi: { [key: string]: any } = {};
 
-
 	//https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data
 	// validate requestParams
 	requestParams = validateRequestParams(requestParams);
@@ -92,15 +95,17 @@
 			const { suggestions } =
 				await placesApi.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);
 			results = [];
-			const formatter = new Intl.NumberFormat('en');
+			//const formatter = new Intl.NumberFormat('en');
 			// iterate suggestions and add results to an array
 			for (const suggestion of suggestions) {
-				
 				// add suggestions to results
 				results.push({
-					to_pace: suggestion.placePrediction.toPlace(),
+					place: suggestion.placePrediction.toPlace(),
 					text: suggestion.placePrediction.text.toString(),
-					distance: formatDistance(suggestion.placePrediction.distanceMeters, options.distance_units ?? 'km'),
+					distance: formatDistance(
+						suggestion.placePrediction.distanceMeters,
+						options.distance_units ?? 'km'
+					)
 				});
 			}
 		} catch (e: any) {
@@ -112,13 +117,10 @@
      //https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteSuggestion
      * @param place
      */
-	const onPlaceSelected = async (place: {
-		[x: string]: any;
-		fetchFields: (arg0: { fields: string[] }) => any;
-		addressComponents: any;
-		formattedAddress: string;
-	}): Promise<void> => {
+	const onPlaceSelected = async (place: { fetchFields: (arg0: { fields: string[]; }) => any; toJSON: () => any; }): Promise<void> => {
 		try {
+			// console.log(place);
+			// console.log(fetchFields);
 			await place.fetchFields({
 				fields: fetchFields
 			});
@@ -164,8 +166,13 @@
 
 			const { AutocompleteSessionToken, AutocompleteSuggestion } =
 				await loader.importLibrary('places');
+
 			placesApi.AutocompleteSessionToken = AutocompleteSessionToken;
 			placesApi.AutocompleteSuggestion = AutocompleteSuggestion;
+
+			// const {Geocoder} = await loader.importLibrary("geocoding");
+			// placesApi.Geocoder = new Geocoder();
+
 			setSessionToken();
 		} catch (e: any) {
 			onError(
@@ -188,7 +195,7 @@
 		} else if (e.key === 'Enter') {
 			e.preventDefault();
 			if (currentSuggestion >= 0) {
-				onPlaceSelected(results[currentSuggestion].to_pace);
+				onPlaceSelected(results[currentSuggestion].place);
 			}
 		} else if (e.key === 'Escape') {
 			// reset srarch input and results
@@ -211,7 +218,6 @@
 			</div>
 		{/if}
 
-
 		<input
 			type="text"
 			name="search"
@@ -237,7 +243,7 @@
 			</div>
 
 			<ul class={options.classes.ul} id="options">
-				{#each results as place, i}
+				{#each results as p, i}
 					<li
 						class={[options.classes.li, i === currentSuggestion && options.classes.li_current]}
 						id="option-{i + 1}"
@@ -245,25 +251,39 @@
 						<!-- svelte-ignore a11y_invalid_attribute -->
 						<a
 							href="javascript:void(0)"
-							class={[options.classes?.li_a, 'flex justify-between']}
+							class={[
+								options.classes?.li_a,
+								i === currentSuggestion && options.classes.li_a_current
+							]}
 							tabindex={i + 1}
-							onclick={() => onPlaceSelected(place.to_pace)}
+							onclick={() => onPlaceSelected(p.place)}
 						>
-							<div class="flex min-w-0 gap-x-4">
-								<!-- <img
-									class="size-12 flex-none rounded-full bg-gray-50"
-									src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-									alt=""
-								/> -->
-								<div class="min-w-0 flex-auto">
-									<p class={[i === currentSuggestion && options.classes.li_current,'text-sm/6 font-semibold text-gray-900']}>{place.text}</p>
-									<!-- <p class="mt-1 truncate text-xs/5 text-gray-500">leslie.alexander@example.com</p> -->
+							<div class={[options.classes.li_div_container]}>
+								<div
+									class={[
+										options.classes.li_div_one,
+										i === currentSuggestion && options.classes.li_div_current
+									]}
+								>
+									<p
+										class={[
+											i === currentSuggestion && options.classes.li_current,
+											options.classes.li_div_one_p
+										]}
+									>
+										{p.text}
+									</p>
 								</div>
 							</div>
-							{#if options.distance && place.distance}
-								<div class="shrink-0 flex flex-col items-end min-w-16">
-									<p class={[i === currentSuggestion && options.classes.li_current,'mt-1 text-xs/5 text-gray-500']}>
-										{place.distance}
+							{#if options.distance && p.distance}
+								<div class={[options.classes.li_div_two]}>
+									<p
+										class={[
+											i === currentSuggestion && options.classes.li_current,
+											options.classes.li_div_two_p
+										]}
+									>
+										{p.distance}
 									</p>
 								</div>
 							{/if}

package/dist/PlaceAutocomplete.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { Props } from './interfaces.js';
-declare const PlaceAutocomplete: import("svelte").Component<Props, {}, "fetchFields" | "onResponse" | "onError">;
+declare const PlaceAutocomplete: import("svelte").Component<Props, {}, "onResponse" | "onError">;
 type PlaceAutocomplete = ReturnType<typeof PlaceAutocomplete>;
 export default PlaceAutocomplete;

package/dist/helpers.d.ts

@@ -3,11 +3,24 @@ import type { RequestParams, ComponentOptions, ComponentClasses, DistanceUnits }
  * Default request parameters
  */
 export declare const requestParamsDefault: RequestParams;
+/**
+ * Default fetch fields values
+ * https://developers.google.com/maps/documentation/javascript/place-class-data-fields
+ *
+ * unsupported field values
+ * geometry, icon, name, permanentlyClosed, photo, placeId, url, utcOffset, vicinity, openingHours, icon, name
+ */
+export declare const defaultFetchFields: Array<string>;
 /**
  * Validate and cast request parameters
  * @param requestParams
  */
 export declare const validateRequestParams: (requestParams: RequestParams | undefined) => RequestParams;
+/**
+ * Validate fetchFields array parameters
+ * @param fetchFields
+ */
+export declare const validateFetchFields: (fetchFields: Array<string> | undefined) => string[];
 /**
  * Default component classes
  */
@@ -21,4 +34,10 @@ export declare const componentOptions: ComponentOptions;
  * @param options
  */
 export declare const validateOptions: (options: ComponentOptions | undefined) => ComponentOptions;
+/**
+ * Display distance in km or miles
+ * @param distance
+ * @param units
+ * @returns
+ */
 export declare const formatDistance: (distance: number, units: DistanceUnits) => string | null;

package/dist/helpers.js

@@ -98,6 +98,71 @@ export const requestParamsDefault = {
      */
     sessionToken: ''
 };
+/**
+ * Default fetch fields values
+ * https://developers.google.com/maps/documentation/javascript/place-class-data-fields
+ *
+ * unsupported field values
+ * geometry, icon, name, permanentlyClosed, photo, placeId, url, utcOffset, vicinity, openingHours, icon, name
+ */
+export const defaultFetchFields = [
+    'formattedAddress',
+    'addressComponents',
+    'accessibilityOptions',
+    'allowsDogs',
+    'businessStatus',
+    'hasCurbsidePickup',
+    'hasDelivery',
+    'hasDineIn',
+    'displayName',
+    'displayNameLanguageCode',
+    'editorialSummary',
+    'evChargeOptions',
+    'adrFormatAddress',
+    'fuelOptions',
+    'isGoodForChildren',
+    'isGoodForGroups',
+    'isGoodForWatchingSports',
+    'svgIconMaskURI',
+    'iconBackgroundColor',
+    'internationalPhoneNumber',
+    'hasLiveMusic',
+    'location',
+    'hasMenuForChildren',
+    'regularOpeningHours',
+    'hasOutdoorSeating',
+    'parkingOptions',
+    'paymentOptions',
+    'photos',
+    'nationalPhoneNumber',
+    'id',
+    'plusCode',
+    'priceLevel',
+    'primaryType',
+    'primaryTypeDisplayName',
+    'primaryTypeDisplayNameLanguageCode',
+    'rating',
+    'userRatingCount',
+    'isReservable',
+    'hasRestroom',
+    'reviews',
+    'servesBeer',
+    'servesBreakfast',
+    'servesBrunch',
+    'servesCocktails',
+    'servesCoffee',
+    'servesDessert',
+    'servesDinner',
+    'servesLunch',
+    'servesVegetarianFood',
+    'servesWine',
+    'hasTakeout',
+    'types',
+    'websiteURI',
+    'utcOffsetMinutes',
+    'viewport',
+    'websiteURI'
+];
 /**
  * Check if a variable is a valid LatLng object
  * @param latLng
@@ -188,6 +253,39 @@ export const validateRequestParams = (requestParams) => {
     //console.log('validatedParams:', validatedParams);
     return validatedParams;
 };
+/**
+ * Validate fetchFields array parameters
+ * @param fetchFields
+ */
+export const validateFetchFields = (fetchFields) => {
+    //https://developers.google.com/maps/documentation/javascript/place-class-data-fields
+    /**
+     * create a new object to store validated parameters
+    */
+    const validatedFetchFields = [];
+    if (typeof fetchFields === 'undefined' || fetchFields.length === 0) {
+        return [
+            'formattedAddress',
+            'addressComponents'
+        ];
+    }
+    // iterate over requestParams
+    for (const key of fetchFields) {
+        // Check if key is in requestParamsDefault
+        if (defaultFetchFields.includes(key)) {
+            validatedFetchFields.push(key);
+        }
+    }
+    if (validateFetchFields.length === 0) {
+        return [
+            'formattedAddress',
+            'addressComponents'
+        ];
+    }
+    //console.log('validatedParams:', Object.keys(validatedParams));
+    //console.log('validatedParams:', validatedParams);
+    return validatedFetchFields;
+};
 /**
  * Default component classes
  */
@@ -201,10 +299,17 @@ export const componentClasses = {
     kbd_escape: 'inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1',
     kbd_up: 'inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6',
     kbd_down: 'inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6',
+    kbd_active: 'bg-indigo-500 text-white',
     ul: 'absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm divide-y divide-gray-100',
     li: 'z-50 cursor-default select-none py-2 px-2 lg:px-4 text-gray-900 hover:bg-indigo-500 hover:text-white',
-    li_current: 'bg-indigo-500 text-white',
-    li_a: 'block w-full',
+    li_current: 'bg-indigo-500',
+    li_a: 'block w-full flex justify-between',
+    li_a_current: 'text-white',
+    li_div_container: 'flex min-w-0 gap-x-4',
+    li_div_one: 'min-w-0 flex-auto',
+    li_div_one_p: 'text-sm/6 font-semibold',
+    li_div_two: 'shrink-0 flex flex-col items-end min-w-16',
+    li_div_two_p: 'mt-1 text-xs/5'
 };
 /**
  * Default component options
@@ -253,6 +358,12 @@ export const validateOptions = (options) => {
     }
     return validatedOptions;
 };
+/**
+ * Display distance in km or miles
+ * @param distance
+ * @param units
+ * @returns
+ */
 export const formatDistance = function (distance, units) {
     if (typeof distance !== 'number') {
         return null;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "places-autocomplete-svelte",
 	"license": "MIT",
-	"version": "2.2.1",
+	"version": "2.2.3",
 	"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.",
 	"keywords": [
 		"svelte",
@@ -68,30 +68,30 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/adapter-cloudflare": "^5.0.2",
-		"@sveltejs/kit": "^2.17.1",
+		"@sveltejs/adapter-cloudflare": "^5.0.3",
+		"@sveltejs/kit": "^2.17.2",
 		"@sveltejs/package": "^2.3.10",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/postcss": "^4.0.5",
+		"@tailwindcss/postcss": "^4.0.7",
 		"@tailwindcss/typography": "^0.5.16",
-		"@tailwindcss/vite": "^4.0.5",
+		"@tailwindcss/vite": "^4.0.7",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.20.0",
+		"eslint": "^9.20.1",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
-		"globals": "^15.14.0",
-		"postcss": "^8.5.1",
-		"prettier": "^3.4.2",
+		"globals": "^16.0.0",
+		"postcss": "^8.5.3",
+		"prettier": "^3.5.1",
 		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.3.4",
-		"svelte": "^5.19.9",
+		"publint": "^0.3.6",
+		"svelte": "^5.20.2",
 		"svelte-check": "^4.1.4",
-		"tailwindcss": "^4.0.5",
+		"tailwindcss": "^4.0.7",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.3",
-		"typescript-eslint": "^8.23.0",
-		"vite": "^6.1.0"
+		"typescript-eslint": "^8.24.1",
+		"vite": "^6.1.1"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/PlaceAutocomplete.svelte.d.ts",