tijs.org
A Web Component that provides typeahead suggestions for AT Protocol (Bluesky) handles. Uses the public app.bsky.actor.searchActorsTypeahead API directly from the client.
Add JSDoc, package description, bump to 0.2.0
+43
-3
+1
-1
.github/workflows/publish.yml
+1
-1
.github/workflows/publish.yml
+2
-1
deno.json
+2
-1
deno.json
+15
mod.ts
+15
mod.ts
···
1
+
/**
2
+
* Typeahead Web Component for AT Protocol actor handles.
3
+
*
4
+
* Wrap any `<input>` element with `<actor-typeahead>` to get autocomplete
5
+
* suggestions from Bluesky's public API. Framework-agnostic, zero dependencies.
6
+
*
7
+
* @example
8
+
* ```html
9
+
* <actor-typeahead>
10
+
* <input type="text" placeholder="alice.bsky.social" />
11
+
* </actor-typeahead>
12
+
* ```
13
+
*
14
+
* @module
15
+
*/
16
export { default as ActorTypeahead } from "./src/actor-typeahead.ts";
+25
-1
src/actor-typeahead.ts
+25
-1
src/actor-typeahead.ts
···
103
return tmpl.cloneNode(true) as T;
104
}
105
106
-
interface Actor {
107
handle: string;
108
avatar?: string;
109
}
110
111
export default class ActorTypeahead extends HTMLElement {
112
static tag = "actor-typeahead";
113
114
static define(tag = this.tag): void {
115
this.tag = tag;
116
···
156
return rows;
157
}
158
159
handleEvent(evt: Event) {
160
switch (evt.type) {
161
case "input":
···
103
return tmpl.cloneNode(true) as T;
104
}
105
106
+
/** An actor returned from the Bluesky typeahead API. */
107
+
export interface Actor {
108
+
/** The actor's handle (e.g. "alice.bsky.social"). */
109
handle: string;
110
+
/** URL to the actor's avatar image. */
111
avatar?: string;
112
}
113
114
+
/**
115
+
* A Web Component that provides typeahead suggestions for AT Protocol handles.
116
+
*
117
+
* Wraps a slotted `<input>` element and displays a dropdown of matching actors
118
+
* fetched from Bluesky's `app.bsky.actor.searchActorsTypeahead` API.
119
+
* Supports keyboard navigation, pointer/click selection, and dispatches native
120
+
* `input` events so frameworks like React can detect value changes.
121
+
*
122
+
* Themeable via CSS custom properties: `--color-background`, `--color-border`,
123
+
* `--color-hover`, `--color-avatar-fallback`, `--radius`, `--padding-menu`.
124
+
*
125
+
* @example
126
+
* ```html
127
+
* <actor-typeahead rows="8">
128
+
* <input type="text" placeholder="alice.bsky.social" />
129
+
* </actor-typeahead>
130
+
* ```
131
+
*/
132
export default class ActorTypeahead extends HTMLElement {
133
+
/** The default custom element tag name. */
134
static tag = "actor-typeahead";
135
136
+
/** Register this component as a custom element under the given tag name. */
137
static define(tag = this.tag): void {
138
this.tag = tag;
139
···
179
return rows;
180
}
181
182
+
/** Routes DOM events to the appropriate internal handler. */
183
handleEvent(evt: Event) {
184
switch (evt.type) {
185
case "input":