/* ============================================================
F2 UI — Navigation library
Tabs · Breadcrumb · Pagination · DropdownMenu · CommandPalette · Stepper
============================================================ */
(function () {
const { Icon } = window.F2;
const { useDismiss } = window.SB;
/* ====================== Tabs ====================== */
function Tabs({ tabs = [], value, onChange, variant = 'line', style = {} }) {
const items = tabs.map((t) => (typeof t === 'string' ? { value: t, label: t } : t));
const idx = Math.max(0, items.findIndex((t) => t.value === value));
function onKey(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
e.preventDefault();
const next = e.key === 'ArrowRight' ? Math.min(idx + 1, items.length - 1) : Math.max(idx - 1, 0);
onChange && onChange(items[next].value);
}
}
if (variant === 'pill') {
return (
{items.map((t) => {
const on = t.value === value;
return (
);
})}
);
}
return (
{items.map((t) => {
const on = t.value === value;
return (
);
})}
);
}
/* ====================== Breadcrumb ====================== */
function Breadcrumb({ items = [], style = {} }) {
return (
);
}
/* ====================== Pagination ====================== */
function pageList(page, count) {
const out = []; const push = (x) => out.push(x);
if (count <= 7) { for (let i = 1; i <= count; i++) push(i); return out; }
push(1);
const lo = Math.max(2, page - 1), hi = Math.min(count - 1, page + 1);
if (lo > 2) push('…');
for (let i = lo; i <= hi; i++) push(i);
if (hi < count - 1) push('…');
push(count);
return out;
}
function Pagination({ page = 1, count = 1, onChange, style = {} }) {
const go = (p) => { if (p >= 1 && p <= count && p !== page) onChange && onChange(p); };
const btn = (active, disabled) => ({
minWidth: 34, height: 34, padding: '0 8px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
borderRadius: 'var(--f2-radius-control)', border: `1px solid ${active ? 'var(--f2-accent)' : 'var(--f2-border)'}`,
background: active ? 'var(--f2-surface-accent)' : 'transparent', color: active ? 'var(--f2-accent-text)' : (disabled ? 'var(--f2-text-faint)' : 'var(--f2-text-secondary)'),
fontFamily: 'var(--f2-font-mono)', fontSize: 13, cursor: disabled ? 'not-allowed' : 'pointer',
});
return (
);
}
/* ====================== DropdownMenu ====================== */
function DropdownMenu({ trigger, items = [], align = 'start', width = 220, style = {} }) {
const [open, setOpen] = React.useState(false);
const [active, setActive] = React.useState(-1);
const ref = React.useRef(null);
useDismiss(ref, () => setOpen(false), open);
const real = items.map((it, i) => ({ it, i })).filter(({ it }) => !it.divider);
function onKey(e) {
if (!open && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); setOpen(true); setActive(0); return; }
if (!open) return;
if (e.key === 'ArrowDown') { e.preventDefault(); setActive((a) => Math.min(a + 1, real.length - 1)); }
else if (e.key === 'ArrowUp') { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }
else if (e.key === 'Enter') { e.preventDefault(); const r = real[active]; if (r && !r.it.disabled) { r.it.onClick && r.it.onClick(); setOpen(false); } }
}
return (
setOpen((o) => !o)} onKeyDown={onKey} tabIndex={-1}>{trigger}
{open && (
{items.map((it, i) => {
if (it.divider) return
;
const ri = real.findIndex((r) => r.i === i);
const danger = it.danger;
return (
);
})}
{ setQ(e.target.value); setActive(0); }} onKeyDown={onKey}
style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', color: 'var(--f2-text)', fontFamily: 'var(--f2-font-body)', fontSize: 16 }} />
ESC
{flat.length === 0 &&
No results for "{q}"
}
{filteredGroups.map((g) => (
{g.label}
{g.items.map((it) => {
runIdx++; const isActive = runIdx === active;
return (
);
})}
))}
);
}
/* ====================== Stepper ====================== */
function Stepper({ steps = [], current = 0, orientation = 'horizontal', style = {} }) {
const items = steps.map((s) => (typeof s === 'string' ? { label: s } : s));
const vert = orientation === 'vertical';
return (
{items.map((s, i) => {
const done = i < current, active = i === current;
const color = done || active ? 'var(--f2-accent)' : 'var(--f2-border-strong)';
return (
-
{!vert &&
}
{done ? : i + 1}
{!vert &&
}
{vert && i < items.length - 1 &&
}
{s.label}
{s.description &&
{s.description}
}
);
})}
);
}
Object.assign(window.F2, { Tabs, Breadcrumb, Pagination, DropdownMenu, CommandPalette, Stepper });
})();