mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: "/" or "CMD+K" should focus search bar (#1852)

Browse source
This commit is contained in:
metonym 2023-11-21 10:16:21 -08:00 • committed by GitHub
commit b0b51a818a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

29
docs/src/pages/_layout.svelte
View file

@ -1,3 +1,8 @@
<script context="module">
// Pressing these keys will focus the search bar.
const FOCUS_KEYS = new Set(["/", "Metak"]);
</script>
<script> <script>
import { import {
isActive, isActive,
@ -42,6 +47,7 @@
const deprecated = []; const deprecated = [];
const new_components = []; const new_components = [];
let keys = "";
let value = ""; let value = "";
let active = false; let active = false;
$: results = miniSearch.search(value).slice(0, 10); $: results = miniSearch.search(value).slice(0, 10);
@ -64,6 +70,29 @@
<!-- routify:options bundle=true --> <!-- routify:options bundle=true -->
<svelte:window bind:innerWidth /> <svelte:window bind:innerWidth />
<svelte:body
on:keydown="{(e) => {
keys += e.key;
}}"
on:keyup="{(e) => {
if (active) return;
if (FOCUS_KEYS.has(keys)) {
if (
document.activeElement instanceof HTMLInputElement ||
document.activeElement instanceof HTMLTextAreaElement
) {
// Exit early if an inputtable element is already focused.
return;
}
e.preventDefault();
active = true;
}
keys = '';
}}" />
<Theme persist bind:theme="{$theme}"> <Theme persist bind:theme="{$theme}">
<Header <Header
aria-label="Navigation" aria-label="Navigation"