places-autocomplete-svelte 2.1.0 → 2.1.2

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 (4) hide show
  1. package/README.md +52 -56
  2. package/dist/PlaceAutocomplete.svelte +7 -2
  3. package/dist/interfaces.d.ts +0 -2
  4. package/package.json +15 -15
package/README.md CHANGED
@@ -42,15 +42,14 @@ npm i places-autocomplete-svelte@1.0.1
42
42
 
43
43
  ```svelte
44
44
  <script>
45
- import { PlaceAutocomplete } from 'places-autocomplete-svelte';
45
+ import { PlaceAutocomplete } from 'places-autocomplete-svelte';
46
46
 
47
- const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';
47
+ const PUBLIC_GOOGLE_MAPS_API_KEY = '___YOUR_API_KEY___';
48
48
 
49
- let fullResponse = $state('')
50
- let onResponse = (response) => {
51
- console.log(response)
52
- fullResponse = response;
53
- };
49
+ let fullResponse = $state('')
50
+ let onResponse = (response) => {
51
+ fullResponse = response;
52
+ };
54
53
  </script>
55
54
 
56
55
  <PlaceAutocomplete {onResponse} {PUBLIC_GOOGLE_MAPS_API_KEY} />
@@ -65,70 +64,67 @@ npm i places-autocomplete-svelte@1.0.1
65
64
  - `countries`: Use countries property to refine search by region
66
65
  - `placeholder`: Use the placeholder property to customize the input field's placeholder text.
67
66
  - `autocomplete`: Use to disable the HTML `<input>` autocomplete attribute.
68
- - `requestParams` (autocomplete request):
69
- - `language`: Use the language property to set the language of the autocomplete results.
70
- - `region`: Use the region property to bias the results toward a particular region. If the countries array is provided the region will be used from the selected country.
71
- - `fetchFields`: Use to control the Place response
67
+ - `requestParams` (optional [AutocompleteRequest properties](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest) ):
68
+ - `language`: in which to return results. If ommited defaults to `en-GB`. [See details](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.language)
69
+ - `region`: the [CLDR two-character format](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). Defaults to `GB`. If the countries array is provided the coutries region overwrites the `region` value in `requestParams`.
70
+ - `fetchFields`: Use to control the Place response. See [types](https://developers.google.com/maps/documentation/javascript/place-class-data-fields) for details. If omitted defaults to `['formattedAddress', 'addressComponents']`
72
71
 
73
72
  ```svelte
74
73
  <script>
75
- // ... other imports
76
-
77
- /**
78
- * @type array optional
79
- */
80
- let countries = [
81
- { name: 'United Kingdom', region: 'GB'},
82
- { name: 'United States', region: 'US' }
83
- // ... more countries
84
- ];
74
+ // ... other imports
75
+
76
+ /**
77
+ * @type array optional
78
+ */
79
+ let countries = [
80
+ { name: 'United Kingdom', region: 'GB'},
81
+ { name: 'United States', region: 'US' }
82
+ // ... more countries
83
+ ];
84
+ /**
85
+ * @type string optional
86
+ */
87
+ const placeholder = 'Search...';
88
+ /**
89
+ * @type string optional
90
+ * The <input> HTML autocomplete attribute.
91
+ * if ommited defaults to 'off'
92
+ * */
93
+ const autocompete = 'off';
94
+ /**
95
+ * @type object optional
96
+ * AutocompleteRequest properties
97
+ */
98
+ const requestParams = {
85
99
  /**
86
100
  * @type string optional
87
101
  */
88
- const placeholder = 'Search...';
102
+ language : 'en-GB',
89
103
  /**
90
104
  * @type string optional
91
- * The <input> HTML autocomplete attribute.
92
- * if ommited defaults to 'off'
93
- * */
94
- const autocompete = 'off';
95
- /**
96
- * @type object optional
97
- * List of accepted AutocompleteRequest properties
98
105
  */
99
- const requestParams = {
100
- /**
101
- * @type string optional
102
- */
103
- language : 'en-GB',
104
- /**
105
- * @type string optional
106
- */
107
- region : 'GB',
108
- }
106
+ region : 'GB',
107
+ }
109
108
 
110
- /**
111
- * @type array optional
112
- */
113
- const fetchFields = ['formattedAddress', 'addressComponents'];
109
+ /**
110
+ * @type array optional
111
+ */
112
+ const fetchFields = ['formattedAddress', 'addressComponents'];
114
113
  </script>
115
114
 
116
115
  <PlaceAutocomplete
117
116
  {onError}
118
117
  {onResponse}
119
118
  {PUBLIC_GOOGLE_MAPS_API_KEY}
120
- bind:countries
119
+ {requestParams}
121
120
  {placeholder}
122
121
  {autocompete}
123
- {fetchFields}/>
122
+ {fetchFields}
123
+ bind:countries
124
+ />
124
125
 
125
126
  ```
126
127
 
127
- - `region` code follows the [CLDR two-character format](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). The selected country region overwrites the `region` value in `requestParams`
128
- - `language` in which to return results. If ommited defaults to the browser's language preference. [See details](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.language)
129
- - `requestParams` list of accepted [AutocompleteRequest properties](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest)
130
- - `fetchFields` the [types](https://developers.google.com/maps/documentation/javascript/place-class-data-fields) of Place data to return when requesting place details. If omitted defaults to `['formattedAddress', 'addressComponents']`
131
-
132
128
 
133
129
  ## Component Properties
134
130
  | Property | Type | Description | Required | Default Value |
@@ -150,13 +146,13 @@ The `onError` event will be dispatched if there is an issue with the Google Maps
150
146
 
151
147
  ```svelte
152
148
  <script>
153
- // ... other imports
149
+ // ... other imports
154
150
 
155
- // Error handler
156
- let pacError = '';
157
- let onError = (error: string) => {
158
- console.error(error);
159
- pacError = error;
151
+ // Error handler
152
+ let pacError = '';
153
+ let onError = (error: string) => {
154
+ console.error(error);
155
+ pacError = error;
160
156
  };
161
157
  </script>
162
158
 
package/dist/PlaceAutocomplete.svelte CHANGED
@@ -179,7 +179,7 @@
179
179
  }
180
180
  </script>
181
181
 
182
- <svelte:window on:keydown={onKeyDown} />
182
+ <svelte:window onkeydown={onKeyDown} />
183
183
 
184
184
  <section class="my-10">
185
185
  <div class="grid grid-cols-1 lg:grid-cols-6 gap-x-4">
@@ -187,7 +187,7 @@
187
187
  <label class="mt-1 text-sm leading-6 text-gray-600" for="search"
188
188
  >Start typing your address</label
189
189
  >
190
- <div class="relative z-50 transform rounded-xl mt-4">
190
+ <div class="relative z-10 transform rounded-xl mt-4">
191
191
  <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
192
192
  <svg
193
193
  xmlns="http://www.w3.org/2000/svg"
@@ -209,6 +209,11 @@
209
209
  {placeholder}
210
210
  autocomplete={autocompete}
211
211
  aria-controls="options"
212
+ aria-autocomplete="list"
213
+ aria-owns="options"
214
+ aria-labelledby="search"
215
+ aria-label="Search"
216
+ aria-haspopup="listbox"
212
217
  bind:value={request.input}
213
218
  oninput={makeAcRequest}
214
219
  />
package/dist/interfaces.d.ts CHANGED
@@ -30,8 +30,6 @@ export interface Props {
30
30
  region: string;
31
31
  }[];
32
32
  placeholder?: string;
33
- language?: string;
34
- region?: string;
35
33
  autocompete?: AutoFill;
36
34
  requestParams: RequestParams;
37
35
  onResponse: (e: Event) => void;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "places-autocomplete-svelte",
3
3
  "license": "MIT",
4
- "version": "2.1.0",
4
+ "version": "2.1.2",
5
5
  "description": "A lightweight and customizable Svelte component for easy integration of Google Maps Places Autocomplete (New API) in your Svelte/SvelteKit applications. Provides accessible autocomplete suggestions and detailed address retrieval.",
6
6
  "keywords": [
7
7
  "svelte",
@@ -68,28 +68,28 @@
68
68
  },
69
69
  "devDependencies": {
70
70
  "@sveltejs/adapter-auto": "^3.3.1",
71
- "@sveltejs/adapter-cloudflare": "^4.7.4",
72
- "@sveltejs/kit": "^2.8.0",
71
+ "@sveltejs/adapter-cloudflare": "^4.8.0",
72
+ "@sveltejs/kit": "^2.9.0",
73
73
  "@sveltejs/package": "^2.3.7",
74
- "@sveltejs/vite-plugin-svelte": "^4.0.0",
74
+ "@sveltejs/vite-plugin-svelte": "^4.0.1",
75
75
  "@tailwindcss/typography": "^0.5.15",
76
76
  "@types/eslint": "^9.6.1",
77
77
  "autoprefixer": "^10.4.20",
78
- "eslint": "^9.14.0",
78
+ "eslint": "^9.16.0",
79
79
  "eslint-config-prettier": "^9.1.0",
80
- "eslint-plugin-svelte": "^2.46.0",
80
+ "eslint-plugin-svelte": "^2.46.1",
81
81
  "globals": "^15.12.0",
82
- "postcss": "^8.4.47",
83
- "prettier": "^3.3.3",
84
- "prettier-plugin-svelte": "^3.2.7",
82
+ "postcss": "^8.4.49",
83
+ "prettier": "^3.4.1",
84
+ "prettier-plugin-svelte": "^3.3.2",
85
85
  "publint": "^0.2.12",
86
- "svelte": "^5.1.12",
87
- "svelte-check": "^4.0.6",
88
- "tailwindcss": "^3.4.14",
86
+ "svelte": "^5.2.11",
87
+ "svelte-check": "^4.1.0",
88
+ "tailwindcss": "^3.4.15",
89
89
  "tslib": "^2.8.1",
90
- "typescript": "^5.6.3",
91
- "typescript-eslint": "^8.13.0",
92
- "vite": "^5.4.10"
90
+ "typescript": "^5.7.2",
91
+ "typescript-eslint": "^8.16.0",
92
+ "vite": "^5.4.11"
93
93
  },
94
94
  "svelte": "./dist/index.js",
95
95
  "types": "./dist/PlaceAutocomplete.svelte.d.ts",