Something went wrong. Try again.
a tiny atproto handle typeahead web component
atproto bluesky
Something went wrong. Try again.
actor-typeahead custom-elements.json
7.2 kB · 261 lines
JSON
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "actor-typeahead.js", "declarations": [ { "kind": "class", "description": "", "name": "ActorTypeahead", "cssProperties": [ { "description": "Controls the color of the dropdown background.", "name": "--color-background" }, { "description": "Controls the color of the dropdown border.", "name": "--color-border" }, { "description": "Controls the color of the dropdown shadow.", "name": "--color-shadow" }, { "description": "Controls the background color of each row on hover.", "name": "--color-hover" }, { "description": "Controls the background color of an avatar circle if the image fails to load.", "name": "--color-avatar-fallback" }, { "description": "Controls the corner radius of the dropdown.", "name": "--radius" }, { "description": "Controls the padding of the dropdown menu.", "name": "--padding-menu" } ], "cssParts": [ { "description": "The dropdown menu.", "name": "menu" }, { "description": "The user row.", "name": "user" }, { "description": "The user avatar wrapper.", "name": "avatar" }, { "description": "The user avatar image.", "name": "img" }, { "description": "The user handle text.", "name": "handle" } ], "slots": [ { "description": "The <input> tag to progressively enhance.", "name": "" } ], "members": [ { "kind": "field", "name": "tag", "type": { "text": "string" }, "static": true, "default": "\"actor-typeahead\"" }, { "kind": "method", "name": "define", "static": true, "parameters": [ { "name": "tag", "default": "this.tag" } ] }, { "kind": "field", "name": "#shadow", "privacy": "private" }, { "kind": "field", "name": "#actors", "privacy": "private", "type": { "text": "Array<{ handle: string; avatar: string }>" }, "default": "[]" }, { "kind": "field", "name": "#index", "privacy": "private", "type": { "text": "number" }, "default": "-1" }, { "kind": "field", "name": "#pressed", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "#rows", "privacy": "private", "readonly": true }, { "kind": "method", "name": "handleEvent", "parameters": [ { "name": "evt", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "#onkeydown", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "KeyboardEvent" } } ] }, { "kind": "method", "name": "#oninput", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "InputEvent & { target: HTMLInputElement }" } } ] }, { "kind": "method", "name": "#onfocusout", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "Event" } } ] }, { "kind": "method", "name": "#render", "privacy": "private" }, { "kind": "method", "name": "#onpointerdown", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "PointerEvent" } } ] }, { "kind": "method", "name": "#onpointerup", "privacy": "private", "parameters": [ { "name": "evt", "type": { "text": "PointerEvent & { target: HTMLElement }" } } ] } ], "attributes": [ { "type": { "text": "string" }, "description": "The host to which to make the typeahead API call.", "name": "host" }, { "type": { "text": "number" }, "description": "The maximum number of rows to display in the dropdown.", "name": "rows" } ], "superclass": { "name": "HTMLElement" }, "tagName": "actor-typeahead", "customElement": true, "summary": "A small web component that progressively enhances an <input> element into an autocomplete for ATProto handles!" }, { "kind": "variable", "name": "tag" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "ActorTypeahead", "module": "actor-typeahead.js" } }, { "kind": "custom-element-definition", "name": "tag", "declaration": { "name": "anonymous_0", "module": "actor-typeahead.js" } } ] } ]}