places-autocomplete-svelte 2.2.10 → 2.2.11

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 +11 -10
  2. package/dist/PlaceAutocomplete.svelte +10 -3
  3. package/dist/helpers.js +15 -0
  4. package/dist/interfaces.d.ts +1 -0
  5. package/package.json +12 -12
package/README.md CHANGED
@@ -8,11 +8,10 @@ A flexible and customizable [Svelte](https://kit.svelte.dev) component leveragin
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
@@ -38,7 +37,7 @@ See a live demo of the component in action: [Basic Example](https://places-autoc
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
 
40
39
 
41
- <img src="places-autocomplete-svelte.gif" alt="Places (New) Autocomplete Svelte">
40
+ <img src="places-autocomplete-svelte.gif" alt="A video demonstrating the Places Autocomplete Svelte component in action, showing address suggestions and selection.">
42
41
 
43
42
 
44
43
 
@@ -51,7 +50,7 @@ See a live demo of the component in action: [Basic Example](https://places-autoc
51
50
 
52
51
  - **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.
53
52
 
54
- ## Installation Svelte 5
53
+ ## Installation
55
54
 
56
55
  ```bash
57
56
  npm install places-autocomplete-svelte
@@ -112,7 +111,8 @@ const options: Partial<ComponentOptions> = $state({
112
111
  // Example: Override input styling and highlight class
113
112
  input: 'my-custom-input-class border-blue-500',
114
113
  highlight: 'bg-yellow-200 text-black', // Customize suggestion highlighting
115
- }
114
+ },
115
+ clear_input: false, // Keep the input value after selecting a suggestion. The value of the input will be the value of `formattedAddress`
116
116
  });
117
117
 
118
118
  </script>
@@ -169,13 +169,14 @@ const options: Partial<ComponentOptions> = $state({
169
169
  | Option | Type | Default | Description |
170
170
  |----------------|---------------------------|---------|---------------------------------------------------------------------------------------------------------------------------------|
171
171
  | 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. |
172
+ | debounce | number | 100 | Delay in milliseconds before triggering autocomplete API request after user stops typing. Set to 0 to disable debouncing. |
173
173
  | distance | boolean | true | Show distance from requestParams.origin in suggestions (if origin is provided). |
174
174
  | distance_units | 'km' \| 'miles' | 'km' | Units to display distance in. |
175
175
  | label | string | '' | Optional label text displayed above the input field. |
176
176
  | autofocus | boolean | false | Automatically focus the input field on mount. |
177
177
  | autocomplete | string | 'off' | Standard HTML autocomplete attribute for the input field. |
178
- | classes | Partial<ComponentClasses> | {} | Object to override default CSS classes. See Styling section. |
178
+ | classes | Partial<ComponentClasses> | {} | Object to override default CSS classes. See Styling section. | |
179
+ | 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
180
 
180
181
 
181
182
 
@@ -208,7 +209,7 @@ You can customize the appearance of the component by providing your own CSS clas
208
209
  - `kbd_escape`: The `<kbd>` tag for the 'Esc' hint.
209
210
  - `kbd_up`: The `<kbd>` tag for the 'Up Arrow' hint.
210
211
  - `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'`.
212
+ - `highlight`: The class applied to the `<span>` wrapping the matched text within suggestions. Defaults to `'font-bold'`.
212
213
 
213
214
  ### Example:
214
215
 
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
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.11",
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",
@@ -74,28 +74,28 @@
74
74
  "devDependencies": {
75
75
  "@sveltejs/adapter-auto": "^6.0.1",
76
76
  "@sveltejs/adapter-cloudflare": "^7.0.3",
77
- "@sveltejs/kit": "^2.21.1",
77
+ "@sveltejs/kit": "^2.21.2",
78
78
  "@sveltejs/package": "^2.3.11",
79
- "@sveltejs/vite-plugin-svelte": "^5.0.3",
80
- "@tailwindcss/postcss": "^4.1.7",
79
+ "@sveltejs/vite-plugin-svelte": "^5.1.0",
80
+ "@tailwindcss/postcss": "^4.1.8",
81
81
  "@tailwindcss/typography": "^0.5.16",
82
- "@tailwindcss/vite": "^4.1.7",
82
+ "@tailwindcss/vite": "^4.1.8",
83
83
  "@types/eslint": "^9.6.1",
84
84
  "autoprefixer": "^10.4.21",
85
- "eslint": "^9.27.0",
85
+ "eslint": "^9.28.0",
86
86
  "eslint-config-prettier": "^10.1.5",
87
- "eslint-plugin-svelte": "^3.9.0",
88
- "globals": "^16.1.0",
89
- "postcss": "^8.5.3",
87
+ "eslint-plugin-svelte": "^3.9.1",
88
+ "globals": "^16.2.0",
89
+ "postcss": "^8.5.4",
90
90
  "prettier": "^3.5.3",
91
91
  "prettier-plugin-svelte": "^3.4.0",
92
92
  "publint": "^0.3.12",
93
- "svelte": "^5.33.1",
93
+ "svelte": "^5.33.14",
94
94
  "svelte-check": "^4.2.1",
95
- "tailwindcss": "^4.1.7",
95
+ "tailwindcss": "^4.1.8",
96
96
  "tslib": "^2.8.1",
97
97
  "typescript": "^5.8.3",
98
- "typescript-eslint": "^8.32.1",
98
+ "typescript-eslint": "^8.33.1",
99
99
  "vite": "^6.3.5"
100
100
  },
101
101
  "svelte": "./dist/index.js",