chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

close tab on middle mouse button

Browse source
This commit is contained in:
Chris Kruining 2024-11-21 20:43:42 +01:00
parent 22a052c137
commit 76c5de5c32
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
1 changed files with 11 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/tabs.tsx
View file

@ -50,7 +50,7 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType
const tabsContext = useTabs(); const tabsContext = useTabs();
const resolved = children(() => props.children); const resolved = children(() => props.children);
const tabs = createMemo(() => resolved.toArray().filter(c => c instanceof HTMLElement).map(({ id, dataset }, i) => ({ id, label: dataset.tabLabel, options: { closable: dataset.tabClosable } }))); const tabs = createMemo(() => resolved.toArray().filter(c => c instanceof HTMLElement).map(({ id, dataset }, i) => ({ id, label: dataset.tabLabel ?? '', options: { closable: Boolean(dataset.tabClosable ?? 'false') } })));
createEffect(() => { createEffect(() => {
tabsContext.activate(tabs().at(-1)?.id); tabsContext.activate(tabs().at(-1)?.id);
@ -67,9 +67,17 @@ const _Tabs: ParentComponent<{ active: string | undefined, onClose?: CommandType
return <div class={css.tabs}> return <div class={css.tabs}>
<header> <header>
<For each={tabs()}>{ <For each={tabs()}>{
({ id, label, options: { closable = false } }) => <Command.Context for={props.onClose} with={[id]}> ({ id, label, options: { closable } }) => <Command.Context for={props.onClose} with={[id]}>
<span class={css.handle} classList={{ [css.active]: props.active === id }}> <span class={css.handle} classList={{ [css.active]: props.active === id }}>
<button onpointerdown={() => tabsContext.activate(id)}>{label}</button> <button onpointerdown={(e) => {
if (closable && e.pointerType === 'mouse' && e.button === 1) {
onClose(e);
return;
}
tabsContext.activate(id)
}}>{label}</button>
<Show when={closable}> <Show when={closable}>
<button onPointerDown={onClose}> <AiOutlineClose /></button> <button onPointerDown={onClose}> <AiOutlineClose /></button>
</Show> </Show>