@mountainpass/addressr-vue 0.5.0 → 0.6.1
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.
- package/README.md +58 -0
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -42,6 +42,8 @@ function handleSelect(address) {
|
|
|
42
42
|
| `label` | `string` | `"Search Australian addresses"` | Accessible label text |
|
|
43
43
|
| `placeholder` | `string` | `"Start typing an address..."` | Input placeholder |
|
|
44
44
|
| `debounceMs` | `number` | `300` | Debounce delay in milliseconds |
|
|
45
|
+
| `name` | `string` | `"address"` | Input name attribute for form submission |
|
|
46
|
+
| `required` | `boolean` | `false` | Sets `aria-required` on the input |
|
|
45
47
|
| `apiUrl` | `string` | `"https://addressr.p.rapidapi.com/"` | API root URL |
|
|
46
48
|
| `apiHost` | `string` | `"addressr.p.rapidapi.com"` | RapidAPI host header |
|
|
47
49
|
|
|
@@ -51,6 +53,26 @@ function handleSelect(address) {
|
|
|
51
53
|
|-------|---------|-------------|
|
|
52
54
|
| `select` | `AddressDetail` | Emitted when an address is selected |
|
|
53
55
|
|
|
56
|
+
### Slots
|
|
57
|
+
|
|
58
|
+
Override rendering zones while keeping built-in search logic and keyboard navigation:
|
|
59
|
+
|
|
60
|
+
| Slot | Default | Description |
|
|
61
|
+
|------|---------|-------------|
|
|
62
|
+
| `loading` | Animated skeleton lines | Custom loading state |
|
|
63
|
+
| `no-results` | "No addresses found" message | Custom empty state |
|
|
64
|
+
|
|
65
|
+
```vue
|
|
66
|
+
<template>
|
|
67
|
+
<AddressAutocomplete api-url="https://api.addressr.io/" @select="handleSelect">
|
|
68
|
+
<template #loading><li>Loading addresses...</li></template>
|
|
69
|
+
<template #no-results><li>No matches found</li></template>
|
|
70
|
+
</AddressAutocomplete>
|
|
71
|
+
</template>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
When you provide a custom slot, you are responsible for accessibility in that zone.
|
|
75
|
+
|
|
54
76
|
## Headless composable
|
|
55
77
|
|
|
56
78
|
Build your own UI while keeping the search logic, debounce, pagination, and abort handling:
|
|
@@ -102,6 +124,42 @@ All return values are Vue `Ref`s (use `.value` in script, auto-unwrapped in temp
|
|
|
102
124
|
| `selectAddress(pid)` | Fetch full address detail |
|
|
103
125
|
| `clear()` | Reset all state |
|
|
104
126
|
|
|
127
|
+
## Theming
|
|
128
|
+
|
|
129
|
+
All visual styles use CSS custom properties. Override on any ancestor element:
|
|
130
|
+
|
|
131
|
+
```css
|
|
132
|
+
.my-form {
|
|
133
|
+
--addressr-font-family: 'Inter', sans-serif;
|
|
134
|
+
--addressr-border-color: #ccc;
|
|
135
|
+
--addressr-focus-color: #0066cc;
|
|
136
|
+
--addressr-highlight-bg: #e0f0ff;
|
|
137
|
+
--addressr-error-color: #c62828;
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
| Token | Default | Description |
|
|
142
|
+
|-------|---------|-------------|
|
|
143
|
+
| `--addressr-font-family` | `system-ui, -apple-system, sans-serif` | Font stack |
|
|
144
|
+
| `--addressr-padding-x` | `0.75rem` | Horizontal padding |
|
|
145
|
+
| `--addressr-padding-y` | `0.625rem` | Vertical padding |
|
|
146
|
+
| `--addressr-text-color` | `inherit` | Text color |
|
|
147
|
+
| `--addressr-border-color` | `#767676` | Input and dropdown border |
|
|
148
|
+
| `--addressr-border-radius` | `0.25rem` | Corner radius |
|
|
149
|
+
| `--addressr-focus-color` | `#005fcc` | Focus ring and border |
|
|
150
|
+
| `--addressr-z-index` | `1000` | Dropdown stacking order |
|
|
151
|
+
| `--addressr-bg` | `#fff` | Dropdown background |
|
|
152
|
+
| `--addressr-shadow` | `0 4px 6px rgba(0,0,0,0.1)` | Dropdown shadow |
|
|
153
|
+
| `--addressr-highlight-bg` | `#e8f0fe` | Active item background |
|
|
154
|
+
| `--addressr-mark-weight` | `700` | Search match font weight |
|
|
155
|
+
| `--addressr-mark-color` | `inherit` | Search match text color |
|
|
156
|
+
| `--addressr-muted-color` | `#555` | Status and empty text |
|
|
157
|
+
| `--addressr-error-color` | `#d32f2f` | Error message text |
|
|
158
|
+
| `--addressr-skeleton-from` | `#e0e0e0` | Loading skeleton base |
|
|
159
|
+
| `--addressr-skeleton-to` | `#f0f0f0` | Loading skeleton shimmer |
|
|
160
|
+
|
|
161
|
+
The loading state shows animated skeleton lines instead of text. The animation respects `prefers-reduced-motion: reduce`.
|
|
162
|
+
|
|
105
163
|
## Accessibility
|
|
106
164
|
|
|
107
165
|
Implements the WAI-ARIA combobox pattern:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mountainpass/addressr-vue",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "Vue address autocomplete component for Australian address search via Addressr",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Mountain Pass",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@windyroad/link-header": "^1.0.1",
|
|
36
|
-
"@mountainpass/addressr-core": "0.
|
|
36
|
+
"@mountainpass/addressr-core": "0.6.1"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@testing-library/jest-dom": "^6.6.3",
|