places-autocomplete-svelte 2.2.1 → 2.2.2

package/dist/PlaceAutocomplete.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import * as GMaps from '@googlemaps/js-api-loader';
-	import type {Props } from './interfaces.js';
+	import type { Props } from './interfaces.js';
 	import { validateOptions, validateRequestParams, formatDistance } from './helpers.js';
 	const { Loader } = GMaps;
 
@@ -25,7 +25,6 @@
 	// set classes as state
 	let cl = $state(options.classes);
 
-
 	// reset keyboard classes
 	const resetKbdClasses = () => {
 		cl.kbd_down = options.classes.kbd_down;
@@ -39,7 +38,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 +90,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) {
@@ -164,8 +164,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 +193,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 +216,6 @@
 			</div>
 		{/if}
 
-
 		<input
 			type="text"
 			name="search"
@@ -237,7 +241,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 +249,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/helpers.js

@@ -201,10 +201,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

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "places-autocomplete-svelte",
 	"license": "MIT",
-	"version": "2.2.1",
+	"version": "2.2.2",
 	"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,29 +68,29 @@
 	},
 	"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.6",
 		"@tailwindcss/typography": "^0.5.16",
-		"@tailwindcss/vite": "^4.0.5",
+		"@tailwindcss/vite": "^4.0.6",
 		"@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": "^15.15.0",
+		"postcss": "^8.5.2",
+		"prettier": "^3.5.1",
 		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.3.4",
-		"svelte": "^5.19.9",
+		"publint": "^0.3.5",
+		"svelte": "^5.20.1",
 		"svelte-check": "^4.1.4",
-		"tailwindcss": "^4.0.5",
+		"tailwindcss": "^4.0.6",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.3",
-		"typescript-eslint": "^8.23.0",
+		"typescript-eslint": "^8.24.0",
 		"vite": "^6.1.0"
 	},
 	"svelte": "./dist/index.js",