places-autocomplete-svelte 2.1.8 → 2.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Places (New) Autocomplete Svelte
 
-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 customize.
+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.
 
 
 
@@ -24,7 +24,10 @@ See a live demo of the component in action: [Basic Example](https://places-autoc
 [Customise request parameters](https://places-autocomplete-demo.pages.dev/examples/customise-request-parameters) - construct a `requestParams` object and control various aspects of the search, including language, region, and more.
 
 
-![Places Autocomplete Svelte](places-autocomplete-svelte.gif)
+<video  src="https://github.com/user-attachments/assets/c2913d06-05d2-4b93-afba-379209d9ddc9" width="660" height="764" controls autoplay loop muted>
+</video>
+
+
 
 ## Requirements
 
@@ -89,11 +92,12 @@ let onResponse = (response) => {
 | `autofocus`    | `boolean` | If `true`, the input field will be focused automatically when the component mounts.                                                                        | `false`       |
 | `placeholder` | `String`   | Placeholder text for the input field.                                                                                                                      | `"Search..."` |
 | `autocomplete`| `string`  | HTML `autocomplete` attribute for the input field. Set to `"off"` to disable browser autocomplete.                                                          | `"off"`      |
-| `show_distance`| `boolean` | If `true`, and if an `origin` is specified in `requestParams`, displays the distance to each suggestion. The distance is calculated as a geodesic in meters. | `false`       |
-| `classes`     | `Object`   | Object to override default Tailwind CSS classes.structure.                                                | See [styling](https://places-autocomplete-demo.pages.dev/examples/styling)    |
+| `distance`| `boolean` | If `true`, and if an `origin` is specified in `requestParams`, displays the distance to each suggestion. The distance is calculated as a geodesic in meters. | `false`       |
+| `distance_units`| `km` or `miles` | Specified the distance units. | `km`       |
+| `classes`     | `Object`   | Object to override default Tailwind CSS classes.                                                | See [styling](https://places-autocomplete-demo.pages.dev/examples/styling)    |
 
 ### Styling
-Customize the component's appearance by providing an object to the classes property. This object should contain key-value pairs, where the keys correspond to the component's elements and the values are your custom CSS class names. See [styling](https://places-autocomplete-demo.pages.dev/examples/styling) for details.
+Customise the component's appearance by providing an object to the classes property. This object should contain key-value pairs, where the keys correspond to the component's elements and the values are your custom CSS class names. See [styling](https://places-autocomplete-demo.pages.dev/examples/styling) for details.
 
 
 ### Request Parameters (requestParams)
@@ -103,12 +107,6 @@ Fine-tune the autocomplete search with the requestParams property. This property
 <script>
 // ... other imports
 
-/**
- * @type boolean optional
- * Boolean attribute indicating that an element should be focused on page load.
- * default: false
- * */ 
-const autofocus = false;
 /**
  * @type object optional
  * AutocompleteRequest properties
@@ -128,12 +126,13 @@ const requestParams = {
  * @type object optional
  * Options
  */
-	const options = {
-		autofocus: false,
-		autocompete: 'off',
-		placeholder: 'Start typing your address',
-		show_distance: true,
-	};
+const options = {
+	autofocus: false,
+	autocompete: 'off',
+	placeholder: 'Start typing your address',
+	distance: true,
+	distance_units: 'km' // or miles
+};
 
 /**
  * @type array optional
@@ -189,4 +188,7 @@ Contributions are welcome! Please open an issue or submit a pull request on the
 
 ## License
 
-[MIT](LICENSE)
+[MIT](LICENSE)
+
+etihad
+221b

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 { ComponentOptions, Props } from './interfaces.js';
-	import { validateOptions, validateRequestParams } from './helpers.js';
+	import type {Props } from './interfaces.js';
+	import { validateOptions, validateRequestParams, formatDistance } from './helpers.js';
 	const { Loader } = GMaps;
 
 	let {
@@ -20,24 +20,11 @@
 
 	// validate options
 	options = validateOptions(options);
+	//console.log(options);
 
 	// set classes as state
 	let cl = $state(options.classes);
 
-	// format meters to km and meters
-	const formatMeters = function (meters: number): string|null {
-		if(typeof meters !== 'number') {
-			return null;
-		}
-		const km = Math.floor(meters / 1000);
-		const remainingMeters = meters % 1000;
-		let formattedString = '';
-		if (km > 0) {
-			formattedString += km + 'km ';
-		}
-		formattedString += remainingMeters + 'm';
-		return formattedString;
-	};
 
 	// reset keyboard classes
 	const resetKbdClasses = () => {
@@ -54,8 +41,7 @@
 
 
 	//https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data
-	// validate and merge requestParams with requestParamsDefault
-	//let request = $state(validateRequestParams(Object.assign(requestParamsDefault, requestParams)));
+	// validate requestParams
 	requestParams = validateRequestParams(requestParams);
 	let request = $state(requestParams);
 	//$inspect(request);
@@ -114,7 +100,7 @@
 				results.push({
 					to_pace: suggestion.placePrediction.toPlace(),
 					text: suggestion.placePrediction.text.toString(),
-					distance: formatMeters(suggestion.placePrediction.distanceMeters)
+					distance: formatDistance(suggestion.placePrediction.distanceMeters, options.distance_units ?? 'km'),
 				});
 			}
 		} catch (e: any) {
@@ -274,7 +260,7 @@
 									<!-- <p class="mt-1 truncate text-xs/5 text-gray-500">leslie.alexander@example.com</p> -->
 								</div>
 							</div>
-							{#if options.show_distance && place.distance}
+							{#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}

package/dist/helpers.d.ts

@@ -1,4 +1,7 @@
-import type { RequestParams, ComponentOptions, ComponentClasses } from './interfaces.js';
+import type { RequestParams, ComponentOptions, ComponentClasses, DistanceUnits } from './interfaces.js';
+/**
+ * Default request parameters
+ */
 export declare const requestParamsDefault: RequestParams;
 /**
  * Validate and cast request parameters
@@ -9,9 +12,13 @@ export declare const validateRequestParams: (requestParams: RequestParams | unde
  * Default component classes
  */
 export declare const componentClasses: ComponentClasses;
+/**
+ * Default component options
+ */
 export declare const componentOptions: ComponentOptions;
 /**
  * Validate and cast component options
  * @param options
  */
 export declare const validateOptions: (options: ComponentOptions | undefined) => ComponentOptions;
+export declare const formatDistance: (distance: number, units: DistanceUnits) => string | null;

package/dist/helpers.js

@@ -1,3 +1,6 @@
+/**
+ * Default request parameters
+ */
 export const requestParamsDefault = {
     /**
      * @type string required
@@ -43,7 +46,10 @@ export const requestParamsDefault = {
      * If neither are set, the results will be biased by IP address, meaning the IP address
      * will be mapped to an imprecise location and used as a biasing signal.
      */
-    locationBias: null,
+    locationBias: {
+        lat: 0,
+        lng: 0
+    },
     /**
      * @param LocationRestriction optional
      * Restrict results to a specified location.
@@ -92,6 +98,23 @@ export const requestParamsDefault = {
      */
     sessionToken: ''
 };
+/**
+ * Check if a variable is a valid LatLng object
+ * @param latLng
+ */
+function isValidLatLngLiteral(latLng) {
+    return latLng && typeof latLng === 'object' && 'lat' in latLng && 'lng' in latLng &&
+        typeof latLng.lat === 'number' && typeof latLng.lng === 'number';
+}
+/**
+ * Check if a variable is a valid LatLngBounds object
+ * @param bounds
+ * @returns
+ */
+function isValidLatLngBoundsLiteral(bounds) {
+    return bounds && typeof bounds === 'object' && 'north' in bounds && 'south' in bounds && 'east' in bounds && 'west' in bounds &&
+        typeof bounds.north === 'number' && typeof bounds.south === 'number' && typeof bounds.east === 'number' && typeof bounds.west === 'number';
+}
 /**
  * Validate and cast request parameters
  * @param requestParams
@@ -99,92 +122,71 @@ export const requestParamsDefault = {
 export const validateRequestParams = (requestParams) => {
     // https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data
     /**
-     * If requestParams is not an object, set it to an empty object
+     * create a new object to store validated parameters
     */
-    if (typeof requestParams !== 'object' || Object.keys(requestParams).length === 0) {
-        requestParams = {
-            input: String(''),
-            sessionToken: String(''),
-            includedRegionCodes: ['GB'],
-            language: 'en-GB',
-            region: 'GB',
-        };
-        return requestParams;
-    }
-    // Remove any keys that are not in requestParamsDefault
+    const validatedParams = {
+        input: String(''),
+        sessionToken: String(''),
+        includedRegionCodes: ['GB'],
+        language: 'en-GB',
+        region: 'GB',
+    };
+    // iterate over requestParams
     for (const key in requestParams) {
-        if (!(key in requestParamsDefault)) {
-            delete requestParams[key];
+        // Check if key is in requestParamsDefault
+        if (key in requestParamsDefault) {
+            // Validate and sanitize
+            switch (key) {
+                case 'input':
+                    validatedParams.input = String(requestParams.input);
+                    break;
+                case 'includedPrimaryTypes':
+                    if (Array.isArray(requestParams.includedPrimaryTypes) && requestParams.includedPrimaryTypes.length > 0) {
+                        validatedParams.includedPrimaryTypes = requestParams.includedPrimaryTypes.slice(0, 5).map(String);
+                    }
+                    break;
+                case 'includedRegionCodes':
+                    if (Array.isArray(requestParams.includedRegionCodes) && requestParams.includedRegionCodes.length > 0) {
+                        validatedParams.includedRegionCodes = requestParams.includedRegionCodes.slice(0, 15).map(String);
+                    }
+                    break;
+                case 'inputOffset':
+                    {
+                        const offset = Number(requestParams.inputOffset);
+                        if (!isNaN(offset) && offset >= 0) { // Allow 0 for offset
+                            validatedParams.inputOffset = offset;
+                        }
+                        break;
+                    }
+                case 'language':
+                    validatedParams.language = String(requestParams.language);
+                    break;
+                case 'locationBias':
+                    if (isValidLatLngLiteral(requestParams.locationBias)) {
+                        validatedParams.locationBias = requestParams.locationBias;
+                    }
+                    break;
+                case 'locationRestriction':
+                    if (isValidLatLngBoundsLiteral(requestParams.locationRestriction)) {
+                        validatedParams.locationRestriction = requestParams.locationRestriction;
+                    }
+                    break;
+                case 'origin':
+                    if (isValidLatLngLiteral(requestParams.origin)) {
+                        validatedParams.origin = requestParams.origin;
+                    }
+                    break;
+                case 'region':
+                    validatedParams.region = String(requestParams.region);
+                    break;
+                case 'sessionToken': // Session token should be generated on the client-side
+                    break; // Ignore any provided sessionToken                    
+            }
         }
     }
-    // merge requestParams with requestParamsDefault
-    requestParams = Object.assign(requestParamsDefault, requestParams);
-    // Reset sessionToken to empty string if passed to the component
-    if (requestParams.sessionToken) {
-        requestParams.sessionToken = String('');
-    }
-    /**
-     * If requestParams.input is not a string, set it to an empty string
-     */
-    if (typeof requestParams.input !== 'string') {
-        requestParams.input = String('');
-    }
-    /**
-     * If requestParams.includedPrimaryTypes is not an array or is an empty array, remove it
-     * If requestParams.includedPrimaryTypes is an array and has more than 5 items, slice it to 5
-     */
-    if (!Array.isArray(requestParams.includedPrimaryTypes)
-        || (Array.isArray(requestParams.includedPrimaryTypes) && requestParams.includedPrimaryTypes.length === 0)) {
-        delete requestParams.includedPrimaryTypes;
-    }
-    else if (Array.isArray(requestParams.includedPrimaryTypes) && requestParams.includedPrimaryTypes.length > 5) {
-        requestParams.includedPrimaryTypes = requestParams.includedPrimaryTypes.slice(0, 5);
-    }
-    /**
-     * If requestParams.includedRegionCodes is not an array or is an empty array, remove it
-     * If requestParams.includedRegionCodes is an array and has more than 15 items, slice it to 15
-     */
-    if (!Array.isArray(requestParams.includedRegionCodes)
-        || (Array.isArray(requestParams.includedPrimaryTypes) && requestParams.includedPrimaryTypes.length === 0)) {
-        delete requestParams.includedRegionCodes;
-    }
-    else if (Array.isArray(requestParams.includedRegionCodes) && requestParams.includedRegionCodes.length > 15) {
-        requestParams.includedRegionCodes = requestParams.includedRegionCodes.slice(0, 15);
-    }
-    /**
-     * If requestParams.inputOffset is not a number or is less than 1, remove it
-     */
-    if (typeof requestParams.inputOffset !== 'number'
-        || (typeof requestParams.inputOffset === 'number' && requestParams.inputOffset < 1)) {
-        delete requestParams.inputOffset;
-    }
-    // If language is not a string, remove it
-    if (typeof requestParams.language !== 'string') {
-        delete requestParams.language;
-    }
-    // If locationBias is not a string, remove it
-    if (typeof requestParams.locationBias !== 'string') {
-        delete requestParams.locationBias;
-    }
-    /**
-     * If locationRestriction is not set, remove it
-     */
-    if (requestParams.locationRestriction?.east === 0
-        && requestParams.locationRestriction?.north === 0
-        && requestParams.locationRestriction?.south === 0
-        && requestParams.locationRestriction?.west === 0) {
-        delete requestParams.locationRestriction;
-    }
-    // If origin is not set, remove it
-    if (requestParams.origin?.lat === 0 && requestParams.origin?.lng === 0) {
-        delete requestParams.origin;
-    }
-    // If region is not a string, remove it
-    if (typeof requestParams.region !== 'string') {
-        delete requestParams.region;
-    }
-    //console.log('requestParams:', Object.keys(requestParams));
-    return requestParams;
+    //console.log('validatedParams:', Object.keys(validatedParams));
+    //console.log('validatedParams:', validatedParams);
+    return validatedParams;
 };
 /**
  * Default component classes
@@ -204,40 +206,61 @@ export const componentClasses = {
     li_current: 'bg-indigo-500 text-white',
     li_a: 'block w-full',
 };
+/**
+ * Default component options
+ */
 export const componentOptions = {
     autofocus: false,
     autocomplete: 'off',
+    placeholder: 'Start typing your address',
+    distance: true,
+    distance_units: 'km',
     classes: componentClasses,
-    placeholder: '',
-    show_distance: false
 };
 /**
  * Validate and cast component options
  * @param options
  */
 export const validateOptions = (options) => {
-    // If options is not an object, set it to an empty object
-    if (typeof options !== 'object' || Object.keys(options).length === 0) {
-        options = {
-            autofocus: false,
-            autocomplete: 'off',
-            classes: componentClasses,
-            placeholder: 'Start typing...',
-            show_distance: false
-        };
-        return options;
-    }
-    // Find the missing options properties
-    for (const key in componentOptions) {
-        if (!(key in options)) {
-            options[key] = componentOptions[key];
+    const validatedOptions = { ...componentOptions };
+    if (options && typeof options === 'object') {
+        for (const key in validatedOptions) {
+            if (key in options) {
+                switch (key) {
+                    case 'autofocus':
+                        validatedOptions.autofocus = Boolean(options.autofocus);
+                        break;
+                    case 'autocomplete':
+                        validatedOptions.autocomplete = String(options.autocomplete);
+                        break;
+                    case 'placeholder':
+                        validatedOptions.placeholder = String(options.placeholder);
+                        break;
+                    case 'distance':
+                        validatedOptions.distance = Boolean(options.distance);
+                        break;
+                    case 'distance_units':
+                        validatedOptions.distance_units = String(options.distance_units);
+                        break;
+                    case 'classes':
+                        if (options.classes && typeof options.classes === 'object') {
+                            validatedOptions.classes = { ...componentOptions.classes, ...options.classes };
+                        }
+                        break;
+                }
+            }
         }
     }
-    // Find the missing classes properties
-    for (const key in componentClasses) {
-        if (!(key in options.classes)) {
-            options.classes[key] = componentClasses[key];
-        }
+    return validatedOptions;
+};
+export const formatDistance = function (distance, units) {
+    if (typeof distance !== 'number') {
+        return null;
+    }
+    if (units === 'km') {
+        return `${(distance / 1000).toFixed(2)} km`;
+    }
+    else {
+        return `${(distance / 1609.34).toFixed(2)} miles`;
     }
-    return options;
 };

package/dist/interfaces.d.ts

@@ -8,7 +8,10 @@ export interface RequestParams {
     includedRegionCodes?: string[];
     inputOffset?: number;
     language?: string;
-    locationBias?: unknown | string;
+    locationBias?: {
+        lat: number;
+        lng: number;
+    };
     locationRestriction?: {
         west: number;
         south: number;
@@ -25,21 +28,20 @@ export interface RequestParams {
 export interface ComponentClasses {
     [key: string]: string;
 }
+export type AutoFill = "on" | "off";
+export type DistanceUnits = "km" | "miles";
 export interface ComponentOptions {
-    autofocus: boolean;
-    autocomplete: AutoFill;
+    autofocus?: boolean;
+    autocomplete?: AutoFill;
     classes: ComponentClasses;
-    placeholder: string;
-    show_distance: boolean;
+    placeholder?: string;
+    distance?: boolean;
+    distance_units?: DistanceUnits;
 }
 export interface Props {
     PUBLIC_GOOGLE_MAPS_API_KEY: string;
     options?: ComponentOptions;
     fetchFields?: string[];
-    placeholder?: string;
-    autofocus?: boolean;
-    autocompete?: AutoFill;
-    classes?: ComponentClasses;
     requestParams?: RequestParams;
     onResponse: (e: Event) => void;
     onError: (error: string) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "places-autocomplete-svelte",
 	"license": "MIT",
-	"version": "2.1.8",
+	"version": "2.2.0",
 	"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.1",
-		"@sveltejs/kit": "^2.16.1",
-		"@sveltejs/package": "^2.3.9",
+		"@sveltejs/adapter-cloudflare": "^5.0.2",
+		"@sveltejs/kit": "^2.17.1",
+		"@sveltejs/package": "^2.3.10",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
-		"@tailwindcss/postcss": "^4.0.3",
+		"@tailwindcss/postcss": "^4.0.5",
 		"@tailwindcss/typography": "^0.5.16",
-		"@tailwindcss/vite": "^4.0.3",
+		"@tailwindcss/vite": "^4.0.5",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.19.0",
+		"eslint": "^9.20.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.14.0",
 		"postcss": "^8.5.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.3.2",
-		"svelte": "^5.19.6",
+		"publint": "^0.3.4",
+		"svelte": "^5.19.9",
 		"svelte-check": "^4.1.4",
-		"tailwindcss": "^4.0.3",
+		"tailwindcss": "^4.0.5",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.3",
-		"typescript-eslint": "^8.22.0",
-		"vite": "^6.0.11"
+		"typescript-eslint": "^8.23.0",
+		"vite": "^6.1.0"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/PlaceAutocomplete.svelte.d.ts",