a tiny atproto handle typeahead web component
jakelazaroff.com
atproto
bluesky
1{
2 "schemaVersion": "1.0.0",
3 "readme": "",
4 "modules": [
5 {
6 "kind": "javascript-module",
7 "path": "actor-typeahead.js",
8 "declarations": [
9 {
10 "kind": "class",
11 "description": "",
12 "name": "ActorTypeahead",
13 "cssProperties": [
14 {
15 "description": "Controls the color of the dropdown background.",
16 "name": "--color-background"
17 },
18 {
19 "description": "Controls the color of the dropdown border.",
20 "name": "--color-border"
21 },
22 {
23 "description": "Controls the color of the dropdown shadow.",
24 "name": "--color-shadow"
25 },
26 {
27 "description": "Controls the background color of each row on hover.",
28 "name": "--color-hover"
29 },
30 {
31 "description": "Controls the background color of an avatar circle if the image fails to load.",
32 "name": "--color-avatar-fallback"
33 },
34 {
35 "description": "Controls the corner radius of the dropdown.",
36 "name": "--radius"
37 },
38 {
39 "description": "Controls the padding of the dropdown menu.",
40 "name": "--padding-menu"
41 }
42 ],
43 "cssParts": [
44 {
45 "description": "The dropdown menu.",
46 "name": "menu"
47 },
48 {
49 "description": "The user row.",
50 "name": "user"
51 },
52 {
53 "description": "The user avatar wrapper.",
54 "name": "avatar"
55 },
56 {
57 "description": "The user avatar image.",
58 "name": "img"
59 },
60 {
61 "description": "The user handle text.",
62 "name": "handle"
63 }
64 ],
65 "slots": [
66 {
67 "description": "The <input> tag to progressively enhance.",
68 "name": ""
69 }
70 ],
71 "members": [
72 {
73 "kind": "field",
74 "name": "tag",
75 "type": {
76 "text": "string"
77 },
78 "static": true,
79 "default": "\"actor-typeahead\""
80 },
81 {
82 "kind": "method",
83 "name": "define",
84 "static": true,
85 "parameters": [
86 {
87 "name": "tag",
88 "default": "this.tag"
89 }
90 ]
91 },
92 {
93 "kind": "field",
94 "name": "#shadow",
95 "privacy": "private"
96 },
97 {
98 "kind": "field",
99 "name": "#actors",
100 "privacy": "private",
101 "type": {
102 "text": "Array<{ handle: string; avatar: string }>"
103 },
104 "default": "[]"
105 },
106 {
107 "kind": "field",
108 "name": "#index",
109 "privacy": "private",
110 "type": {
111 "text": "number"
112 },
113 "default": "-1"
114 },
115 {
116 "kind": "field",
117 "name": "#pressed",
118 "privacy": "private",
119 "type": {
120 "text": "boolean"
121 },
122 "default": "false"
123 },
124 {
125 "kind": "field",
126 "name": "#rows",
127 "privacy": "private",
128 "readonly": true
129 },
130 {
131 "kind": "method",
132 "name": "handleEvent",
133 "parameters": [
134 {
135 "name": "evt",
136 "type": {
137 "text": "Event"
138 }
139 }
140 ]
141 },
142 {
143 "kind": "method",
144 "name": "#onkeydown",
145 "privacy": "private",
146 "parameters": [
147 {
148 "name": "evt",
149 "type": {
150 "text": "KeyboardEvent"
151 }
152 }
153 ]
154 },
155 {
156 "kind": "method",
157 "name": "#oninput",
158 "privacy": "private",
159 "parameters": [
160 {
161 "name": "evt",
162 "type": {
163 "text": "InputEvent & { target: HTMLInputElement }"
164 }
165 }
166 ]
167 },
168 {
169 "kind": "method",
170 "name": "#onfocusout",
171 "privacy": "private",
172 "parameters": [
173 {
174 "name": "evt",
175 "type": {
176 "text": "Event"
177 }
178 }
179 ]
180 },
181 {
182 "kind": "method",
183 "name": "#render",
184 "privacy": "private"
185 },
186 {
187 "kind": "method",
188 "name": "#onpointerdown",
189 "privacy": "private",
190 "parameters": [
191 {
192 "name": "evt",
193 "type": {
194 "text": "PointerEvent"
195 }
196 }
197 ]
198 },
199 {
200 "kind": "method",
201 "name": "#onpointerup",
202 "privacy": "private",
203 "parameters": [
204 {
205 "name": "evt",
206 "type": {
207 "text": "PointerEvent & { target: HTMLElement }"
208 }
209 }
210 ]
211 }
212 ],
213 "attributes": [
214 {
215 "type": {
216 "text": "string"
217 },
218 "description": "The host to which to make the typeahead API call.",
219 "name": "host"
220 },
221 {
222 "type": {
223 "text": "number"
224 },
225 "description": "The maximum number of rows to display in the dropdown.",
226 "name": "rows"
227 }
228 ],
229 "superclass": {
230 "name": "HTMLElement"
231 },
232 "tagName": "actor-typeahead",
233 "customElement": true,
234 "summary": "A small web component that progressively enhances an <input> element into an autocomplete for ATProto handles!"
235 },
236 {
237 "kind": "variable",
238 "name": "tag"
239 }
240 ],
241 "exports": [
242 {
243 "kind": "js",
244 "name": "default",
245 "declaration": {
246 "name": "ActorTypeahead",
247 "module": "actor-typeahead.js"
248 }
249 },
250 {
251 "kind": "custom-element-definition",
252 "name": "tag",
253 "declaration": {
254 "name": "anonymous_0",
255 "module": "actor-typeahead.js"
256 }
257 }
258 ]
259 }
260 ]
261}