places-autocomplete-svelte 2.2.10 → 2.2.12

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.
Files changed (5) hide show
  1. package/README.md +20 -15
  2. package/dist/PlaceAutocomplete.svelte +11 -3
  3. package/dist/helpers.js +15 -0
  4. package/dist/interfaces.d.ts +1 -0
  5. package/package.json +14 -15
package/README.md CHANGED
@@ -3,21 +3,20 @@
3
3
  [![npm version](https://badge.fury.io/js/places-autocomplete-svelte.svg)](https://badge.fury.io/js/places-autocomplete-svelte)
4
4
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
5
 
6
- A flexible and customizable [Svelte](https://kit.svelte.dev) component leveraging the [Google Maps Places (New) 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.
6
+ A flexible and customizable [Svelte](https://kit.svelte.dev) component leveraging the [Google Maps Places Autocomplete API (New)](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.
7
7
 
8
8
  This component handles API loading, session tokens, fetching suggestions, and requesting place details, allowing you to focus on integrating the results into your application. Includes features like debounced input, highlighting of matched suggestions, extensive customization via CSS classes, and full TypeScript support.
9
9
 
10
10
 
11
+ ## Also Available: Standalone JavaScript Library
11
12
 
12
- ## Places (New) Autocomplete - JavaScript Library
13
-
14
- A flexible and customizable vanilla JavaScript library leveraging the Google Maps Places (New) Autocomplete API. This library provides a user-friendly way to search for and retrieve detailed address information in any web application.
15
- [View Details](https://github.com/alexpechkarev/places-autocomplete-js)
13
+ Need this functionality for a non-Svelte project? Check out our companion vanilla JavaScript library, `places-autocomplete-js`, which offers the same core Google Places (New) Autocomplete features.
14
+ [View `places-autocomplete-js` on GitHub](https://github.com/alexpechkarev/places-autocomplete-js)
16
15
 
17
16
 
18
17
  ## Features
19
18
 
20
- * Integrates with the modern **Google Places (New) Autocomplete API**.
19
+ * Integrates with the modern **"Google Maps Places Autocomplete API (New)**.
21
20
  * Automatically handles **session tokens** for cost management per Google's guidelines.
22
21
  * **Debounced Input:** Limits API calls while the user is typing (configurable).
23
22
  * **Suggestion Highlighting:** Automatically highlights the portion of text matching the user's input in the suggestions list.
@@ -37,8 +36,11 @@ See a live demo of the component in action: [Basic Example](https://places-autoc
37
36
 
38
37
  [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.
39
38
 
39
+ [Retain Input Value After Selection](https://places-autocomplete-demo.pages.dev/examples/retain-input-value) -
40
+ This example demonstrates how to configure the Places (New) Autocomplete Svelte component to keep the selected address visible in the input field after a suggestion is chosen. It utilises the `options.clear_input = false` setting.
41
+
40
42
 
41
- <img src="places-autocomplete-svelte.gif" alt="Places (New) Autocomplete Svelte">
43
+ <img src="places-autocomplete-svelte.gif" alt="A video demonstrating the Places Autocomplete Svelte component in action, showing address suggestions and selection.">
42
44
 
43
45
 
44
46
 
@@ -49,9 +51,9 @@ See a live demo of the component in action: [Basic Example](https://places-autoc
49
51
 
50
52
  ## Requirements
51
53
 
52
- - **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.
54
+ - **Google Maps API Key** with the Google Maps Places API (New) enabled. Refer to [Use API Keys](https://developers.google.com/maps/documentation/javascript/get-api-key) for detailed instructions.
53
55
 
54
- ## Installation Svelte 5
56
+ ## Installation
55
57
 
56
58
  ```bash
57
59
  npm install places-autocomplete-svelte
@@ -66,7 +68,7 @@ yarn add places-autocomplete-svelte
66
68
  1. Replace `'___YOUR_API_KEY___'` with your actual **Google Maps API Key**.
67
69
  2. Use the `onResponse` callback to **handle the response**.
68
70
 
69
- ```js
71
+ ```svelte
70
72
  <script>
71
73
  import { PlaceAutocomplete } from 'places-autocomplete-svelte';
72
74
  import type { PlaceResult, ComponentOptions, RequestParams } from 'places-autocomplete-svelte/interfaces'; // Adjust path if needed
@@ -112,7 +114,8 @@ const options: Partial<ComponentOptions> = $state({
112
114
  // Example: Override input styling and highlight class
113
115
  input: 'my-custom-input-class border-blue-500',
114
116
  highlight: 'bg-yellow-200 text-black', // Customize suggestion highlighting
115
- }
117
+ },
118
+ clear_input: false, // Overriding the default value to keep the input value after selecting a suggestion. The value of the input will be the value of `formattedAddress`
116
119
  });
117
120
 
118
121
  </script>
@@ -151,7 +154,7 @@ const options: Partial<ComponentOptions> = $state({
151
154
  }
152
155
  </style>
153
156
  ```
154
- ## Component Properties
157
+ ## Props
155
158
  | Prop | Type | Required | Default | Description |
156
159
  |----------------------------|---------------------------------|----------|-------------------------------------------|-----------------------------------------------------------------------------------------------------------------|
157
160
  | PUBLIC_GOOGLE_MAPS_API_KEY | string | Yes | - | Your Google Maps API Key with Places API enabled. |
@@ -169,13 +172,14 @@ const options: Partial<ComponentOptions> = $state({
169
172
  | Option | Type | Default | Description |
170
173
  |----------------|---------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------|
171
174
  | placeholder | string | '' | Placeholder text for the input field. |
172
- | debounce | number | 100 | (New) Delay in milliseconds before triggering autocomplete API request after user stops typing. Set to 0 to disable debouncing. |
175
+ | debounce | number | 100 | Delay in milliseconds before triggering autocomplete API request after user stops typing. Set to 0 to disable debouncing. |
173
176
  | distance | boolean | true | Show distance from requestParams.origin in suggestions (if origin is provided). |
174
177
  | distance_units | 'km' \| 'miles' | 'km' | Units to display distance in. |
175
178
  | label | string | '' | Optional label text displayed above the input field. |
176
179
  | autofocus | boolean | false | Automatically focus the input field on mount. |
177
180
  | autocomplete | string | 'off' | Standard HTML autocomplete attribute for the input field. |
178
- | classes | Partial<ComponentClasses> | {} | Object to override default CSS classes. See Styling section. |
181
+ | classes | Partial<ComponentClasses> | {} | Object to override default CSS classes for various component parts. See Styling (options.classes) section for keys. | |
182
+ | clear_input | Boolean | true | If `true` (default), clears the input field after a suggestion is selected. If `false`, the input field retains the `formattedAddress` of the selected place. |
179
183
 
180
184
 
181
185
 
@@ -187,6 +191,7 @@ You can customize the appearance of the component by providing your own CSS clas
187
191
 
188
192
 
189
193
  **Available Class Keys:**
194
+ The following keys can be used within the `options.classes object to target specific parts of the component:
190
195
 
191
196
  - `section`: The main container section.
192
197
  - `container`: The div containing the input and suggestions list.
@@ -208,7 +213,7 @@ You can customize the appearance of the component by providing your own CSS clas
208
213
  - `kbd_escape`: The `<kbd>` tag for the 'Esc' hint.
209
214
  - `kbd_up`: The `<kbd>` tag for the 'Up Arrow' hint.
210
215
  - `kbd_down`: The `<kbd>` tag for the 'Down Arrow' hint.
211
- - `highlight`: **(New)** The class applied to the `<span>` wrapping the matched text within suggestions. Defaults to `'font-bold'`.
216
+ - `highlight`: The class applied to the `<span>` wrapping the matched text within suggestions. Defaults to `'font-bold'`.
212
217
 
213
218
  ### Example:
214
219
 
package/dist/PlaceAutocomplete.svelte CHANGED
@@ -62,9 +62,16 @@
62
62
  /**
63
63
  * Reset search input and results.
64
64
  */
65
- const reset = () => {
65
+ const reset = (placeData?: PlaceResult) => {
66
66
  currentSuggestion = -1;
67
- request.input = '';
67
+ if(options?.clear_input == false){
68
+ if (placeData && placeData.formattedAddress) {
69
+ // set input to formatted address
70
+ request.input = placeData.formattedAddress;
71
+ }
72
+ }else{
73
+ request.input = '';
74
+ }
68
75
  results = [];
69
76
  setSessionToken();
70
77
  //console.log('reset completed', results);
@@ -188,7 +195,7 @@
188
195
  });
189
196
  let placeData = place.toJSON();
190
197
  // reset search input and results
191
- reset();
198
+ reset(placeData);
192
199
  onResponse(placeData);
193
200
  } catch (e: any) {
194
201
  // reset search input and results
@@ -264,6 +271,7 @@
264
271
  }
265
272
  } else if (e.key === 'Escape') {
266
273
  // reset srarch input and results
274
+ request.input = '';
267
275
  reset();
268
276
  }
269
277
  // Optional: Scroll suggestion into view
package/dist/helpers.js CHANGED
@@ -324,6 +324,7 @@ export const componentOptions = {
324
324
  classes: componentClasses,
325
325
  label: '',
326
326
  debounce: 100,
327
+ clear_input: true
327
328
  };
328
329
  /**
329
330
  * Validate and cast component options
@@ -361,6 +362,20 @@ export const validateOptions = (options) => {
361
362
  };
362
363
  }
363
364
  break;
365
+ case 'debounce':
366
+ {
367
+ const debounceValue = Number(options.debounce);
368
+ if (!isNaN(debounceValue) && debounceValue >= 0) { // Allow 0 for debounce
369
+ validatedOptions.debounce = debounceValue;
370
+ }
371
+ break;
372
+ }
373
+ case 'clear_input':
374
+ validatedOptions.clear_input = Boolean(options.clear_input);
375
+ break;
376
+ default:
377
+ // Ignore any other keys that are not in the default options
378
+ break;
364
379
  }
365
380
  }
366
381
  }
package/dist/interfaces.d.ts CHANGED
@@ -39,6 +39,7 @@ export interface ComponentOptions {
39
39
  distance_units?: DistanceUnits;
40
40
  label?: string;
41
41
  debounce?: number;
42
+ clear_input?: boolean;
42
43
  }
43
44
  export interface PlaceResult {
44
45
  formattedAddress: string;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "places-autocomplete-svelte",
3
3
  "license": "MIT",
4
- "version": "2.2.10",
4
+ "version": "2.2.12",
5
5
  "description": "A flexible and customizable Svelte component leveraging the Google Maps Places (New) Autocomplete API to provide a user-friendly way to search for and retrieve detailed address information within your SvelteKit applications.",
6
6
  "keywords": [
7
7
  "svelte",
@@ -15,8 +15,7 @@
15
15
  "address",
16
16
  "address-input",
17
17
  "input",
18
- "search",
19
- "new api"
18
+ "search"
20
19
  ],
21
20
  "homepage": "https://places-autocomplete-demo.pages.dev",
22
21
  "repository": {
@@ -69,33 +68,33 @@
69
68
  "provenance": true
70
69
  },
71
70
  "peerDependencies": {
72
- "svelte": "^5.1.4"
71
+ "svelte": "^5.0.0"
73
72
  },
74
73
  "devDependencies": {
75
74
  "@sveltejs/adapter-auto": "^6.0.1",
76
75
  "@sveltejs/adapter-cloudflare": "^7.0.3",
77
- "@sveltejs/kit": "^2.21.1",
76
+ "@sveltejs/kit": "^2.21.2",
78
77
  "@sveltejs/package": "^2.3.11",
79
- "@sveltejs/vite-plugin-svelte": "^5.0.3",
80
- "@tailwindcss/postcss": "^4.1.7",
78
+ "@sveltejs/vite-plugin-svelte": "^5.1.0",
79
+ "@tailwindcss/postcss": "^4.1.8",
81
80
  "@tailwindcss/typography": "^0.5.16",
82
- "@tailwindcss/vite": "^4.1.7",
81
+ "@tailwindcss/vite": "^4.1.8",
83
82
  "@types/eslint": "^9.6.1",
84
83
  "autoprefixer": "^10.4.21",
85
- "eslint": "^9.27.0",
84
+ "eslint": "^9.28.0",
86
85
  "eslint-config-prettier": "^10.1.5",
87
- "eslint-plugin-svelte": "^3.9.0",
88
- "globals": "^16.1.0",
89
- "postcss": "^8.5.3",
86
+ "eslint-plugin-svelte": "^3.9.1",
87
+ "globals": "^16.2.0",
88
+ "postcss": "^8.5.4",
90
89
  "prettier": "^3.5.3",
91
90
  "prettier-plugin-svelte": "^3.4.0",
92
91
  "publint": "^0.3.12",
93
- "svelte": "^5.33.1",
92
+ "svelte": "^5.33.16",
94
93
  "svelte-check": "^4.2.1",
95
- "tailwindcss": "^4.1.7",
94
+ "tailwindcss": "^4.1.8",
96
95
  "tslib": "^2.8.1",
97
96
  "typescript": "^5.8.3",
98
- "typescript-eslint": "^8.32.1",
97
+ "typescript-eslint": "^8.33.1",
99
98
  "vite": "^6.3.5"
100
99
  },
101
100
  "svelte": "./dist/index.js",