josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Add Prettier and ESLint tooling (Refs #77)

Browse Source
This commit is contained in:
josh
2026-10-09 15:56:13 -04:00
parent 8ed059b8d3
commit 16469e2d43
711 changed files with 99737 additions and 28286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/ui/components/primitives/Tabs.svelte
+47 -14
View File
@@ -18,7 +18,15 @@
}
const uid = $props.id();
let { tabs, value = $bindable(), onchange, ariaLabel, size = 'md', panelId, idPrefix = uid }: Props = $props();
let {
tabs,
value = $bindable(),
onchange,
ariaLabel,
size = 'md',
panelId,
idPrefix = uid
}: Props = $props();
let tablist = $state<HTMLDivElement | null>(null);
// Keep a deep-linked or keyboard-selected tab visible without scrolling the page.
@@ -36,24 +44,33 @@
const bounds = node.getBoundingClientRect();
const target = tab.getBoundingClientRect();
if (target.left < bounds.left + 4) node.scrollLeft -= bounds.left + 4 - target.left;
else if (target.right > bounds.right - 4) node.scrollLeft += target.right - bounds.right + 4;
else if (target.right > bounds.right - 4)
node.scrollLeft += target.right - bounds.right + 4;
};
reveal();
observer = new ResizeObserver(reveal);
observer.observe(node);
observer.observe(tab);
});
return () => { cancelled = true; observer?.disconnect(); };
return () => {
cancelled = true;
observer?.disconnect();
};
});
function onKey(event: KeyboardEvent) {
if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
event.preventDefault();
const enabled = tabs.filter(t => !t.disabled);
const enabled = tabs.filter((t) => !t.disabled);
if (!enabled.length) return;
const index = enabled.findIndex(t => t.id === value);
const next = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1
: (index + (event.key === 'ArrowRight' ? 1 : -1) + enabled.length) % enabled.length;
const index = enabled.findIndex((t) => t.id === value);
const next =
event.key === 'Home'
? 0
: event.key === 'End'
? enabled.length - 1
: (index + (event.key === 'ArrowRight' ? 1 : -1) + enabled.length) %
enabled.length;
select(enabled[next].id, false);
document.getElementById(`${idPrefix}-${enabled[next].id}`)?.focus();
}
@@ -119,12 +136,26 @@
color var(--dur-fast) var(--ease-standard),
background-color var(--dur-fast) var(--ease-standard);
}
.s-sm .tab { padding: 6px 12px; font-size: var(--text-xs); }
.s-md .tab { padding: 8px 16px; font-size: var(--text-sm); }
.s-sm .tab {
padding: 6px 12px;
font-size: var(--text-xs);
}
.s-md .tab {
padding: 8px 16px;
font-size: var(--text-sm);
}
.tab:hover:not(:disabled):not(.active) { color: var(--text-primary); }
.tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tab:disabled { opacity: 0.4; cursor: not-allowed; }
.tab:hover:not(:disabled):not(.active) {
color: var(--text-primary);
}
.tab:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.tab:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.tab.active {
background: var(--surface-raised);
@@ -144,9 +175,11 @@
color: var(--text-secondary);
font-family: var(--font-numeric);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums; }
font-variant-numeric: tabular-nums;
}
.tab.active .badge {
background: var(--accent-primary);
color: var(--text-on-accent);
font-variant-numeric: tabular-nums; }
font-variant-numeric: tabular-nums;
}
</style>