places-autocomplete-svelte 2.2.11 → 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 (3) hide show
  1. package/README.md +11 -7
  2. package/dist/PlaceAutocomplete.svelte +1 -0
  3. package/package.json +4 -5
package/README.md CHANGED
@@ -3,7 +3,7 @@
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
 
@@ -16,7 +16,7 @@ Need this functionality for a non-Svelte project? Check out our companion vanill
16
16
 
17
17
  ## Features
18
18
 
19
- * Integrates with the modern **Google Places (New) Autocomplete API**.
19
+ * Integrates with the modern **"Google Maps Places Autocomplete API (New)**.
20
20
  * Automatically handles **session tokens** for cost management per Google's guidelines.
21
21
  * **Debounced Input:** Limits API calls while the user is typing (configurable).
22
22
  * **Suggestion Highlighting:** Automatically highlights the portion of text matching the user's input in the suggestions list.
@@ -36,6 +36,9 @@ See a live demo of the component in action: [Basic Example](https://places-autoc
36
36
 
37
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.
38
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
+
39
42
 
40
43
  <img src="places-autocomplete-svelte.gif" alt="A video demonstrating the Places Autocomplete Svelte component in action, showing address suggestions and selection.">
41
44
 
@@ -48,7 +51,7 @@ See a live demo of the component in action: [Basic Example](https://places-autoc
48
51
 
49
52
  ## Requirements
50
53
 
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.
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.
52
55
 
53
56
  ## Installation
54
57
 
@@ -65,7 +68,7 @@ yarn add places-autocomplete-svelte
65
68
  1. Replace `'___YOUR_API_KEY___'` with your actual **Google Maps API Key**.
66
69
  2. Use the `onResponse` callback to **handle the response**.
67
70
 
68
- ```js
71
+ ```svelte
69
72
  <script>
70
73
  import { PlaceAutocomplete } from 'places-autocomplete-svelte';
71
74
  import type { PlaceResult, ComponentOptions, RequestParams } from 'places-autocomplete-svelte/interfaces'; // Adjust path if needed
@@ -112,7 +115,7 @@ const options: Partial<ComponentOptions> = $state({
112
115
  input: 'my-custom-input-class border-blue-500',
113
116
  highlight: 'bg-yellow-200 text-black', // Customize suggestion highlighting
114
117
  },
115
- clear_input: false, // Keep the input value after selecting a suggestion. The value of the input will be the value of `formattedAddress`
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. |
@@ -175,7 +178,7 @@ const options: Partial<ComponentOptions> = $state({
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. | |
179
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. |
180
183
 
181
184
 
@@ -188,6 +191,7 @@ You can customize the appearance of the component by providing your own CSS clas
188
191
 
189
192
 
190
193
  **Available Class Keys:**
194
+ The following keys can be used within the `options.classes object to target specific parts of the component:
191
195
 
192
196
  - `section`: The main container section.
193
197
  - `container`: The div containing the input and suggestions list.
package/dist/PlaceAutocomplete.svelte CHANGED
@@ -271,6 +271,7 @@
271
271
  }
272
272
  } else if (e.key === 'Escape') {
273
273
  // reset srarch input and results
274
+ request.input = '';
274
275
  reset();
275
276
  }
276
277
  // Optional: Scroll suggestion into view
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "places-autocomplete-svelte",
3
3
  "license": "MIT",
4
- "version": "2.2.11",
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,7 +68,7 @@
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",
@@ -90,7 +89,7 @@
90
89
  "prettier": "^3.5.3",
91
90
  "prettier-plugin-svelte": "^3.4.0",
92
91
  "publint": "^0.3.12",
93
- "svelte": "^5.33.14",
92
+ "svelte": "^5.33.16",
94
93
  "svelte-check": "^4.2.1",
95
94
  "tailwindcss": "^4.1.8",
96
95
  "tslib": "^2.8.1",