Skip to content

Commit ff80bf2

Browse files
aleksilassilaaleksilassila
committed
refactor: tabs components
1 parent 8b4a455 commit ff80bf2

File tree

5 files changed

+92
-87
lines changed

5 files changed

+92
-87
lines changed

‎src/lib/components/Tab/Tab.svelte

+17-26
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
export let tab: number;
88
export let index: number = tab;
99
export let openTab: Writable<number>;
10-
export let size: 'hug' | 'stretch' = 'hug';
1110
export let direction: 'horizontal' | 'vertical' = 'horizontal';
1211
1312
let selectable: Selectable;
@@ -35,35 +34,27 @@
3534
</script>
3635

3736
<Container
38-
class={classNames('col-start-1 col-end-1 row-start-1 row-end-1', {
39-
'absolute pointer-events-none left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2':
40-
!active && size === 'hug',
41-
'absolute pointer-events-none inset-0': !active && size === 'stretch',
42-
'': active
43-
})}
37+
class={classNames(
38+
'absolute inset-0 transition-[transform,opacity] overflow-y-auto overflow-x-hidden scrollbar-hide',
39+
{
40+
'pointer-events-none opacity-0': !active
41+
},
42+
direction === 'horizontal'
43+
? {
44+
'-translate-x-10': !active && $openTab >= index,
45+
'translate-x-10': !active && $openTab < index
46+
}
47+
: {
48+
'-translate-y-10': !active && $openTab >= index,
49+
'translate-y-10': !active && $openTab < index
50+
}
51+
)}
4452
bind:selectable
4553
on:back
4654
on:navigate={handleNavigate}
4755
disabled={!active}
4856
>
49-
<div
50-
class={classNames(
51-
$$restProps.class,
52-
'transition-[transform,opacity]',
53-
{
54-
'opacity-0 pointer-events-none': !active
55-
},
56-
direction === 'horizontal'
57-
? {
58-
'-translate-x-10': !active && $openTab >= index,
59-
'translate-x-10': !active && $openTab < index
60-
}
61-
: {
62-
'-translate-y-10': !active && $openTab >= index,
63-
'translate-y-10': !active && $openTab < index
64-
}
65-
)}
66-
>
67-
<slot />
57+
<div class={$$restProps.class}>
58+
<slot {active} />
6859
</div>
6960
</Container>

‎src/lib/components/Tab/Tab.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { writable } from 'svelte/store';
2-
import type { ComponentProps } from 'svelte';
3-
import Tab from './Tab.svelte';
42

5-
export function useTabs(defaultTab: number, props: Pick<ComponentProps<Tab>, 'size'> = {}) {
3+
export function useTabs(defaultTab: number, props: Record<string, any> = {}) {
64
const openTab = writable<number>(defaultTab);
75

86
const next = () => openTab.update((n) => n + 1);

‎src/lib/components/Tab/TabContainer.svelte

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<script lang="ts">
2+
import classNames from 'classnames';
23
import Container from '../Container.svelte';
3-
import type { NavigateEvent } from '../../selectable';
4-
5-
function handleNavigate({ detail }: CustomEvent<NavigateEvent>) {}
64
</script>
75

8-
<Container on:navigate={handleNavigate}>
6+
<Container class={classNames('w-full h-full relative', $$restProps.class)}>
97
<slot />
108
</Container>

‎src/lib/components/Tab/TabSelect.svelte

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
import Container from '$components/Container.svelte';
3+
import { createEventDispatcher } from 'svelte';
4+
import type { Writable } from 'svelte/store';
5+
6+
export let tabValue: number;
7+
export let openTab: Writable<number>;
8+
9+
const dispatch = createEventDispatcher();
10+
11+
function handleSelect() {
12+
openTab.set(tabValue);
13+
dispatch('select', { value: tabValue });
14+
}
15+
16+
$: isActive = $openTab === tabValue;
17+
</script>
18+
19+
<Container
20+
on:enter={handleSelect}
21+
on:clickOrSelect={handleSelect}
22+
let:hasFocus
23+
focusOnClick
24+
{...$$restProps}
25+
>
26+
<slot {isActive} {hasFocus} />
27+
</Container>

‎src/lib/pages/ManagePage/ManagePage.svelte

+45-54
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import Container from '$components/Container.svelte';
3+
import TabContainer from '$lib/components/Tab/TabContainer.svelte';
34
import { scrollIntoView } from '$lib/selectable';
45
import classNames from 'classnames';
56
import { ArrowRight, Exit, Pencil2, Plus } from 'radix-icons-svelte';
@@ -12,6 +13,7 @@
1213
import SelectField from '../../components/SelectField.svelte';
1314
import { useTabs } from '../../components/Tab/Tab';
1415
import Tab from '../../components/Tab/Tab.svelte';
16+
import TabSelect from '../../components/Tab/TabSelect.svelte';
1517
import Toggle from '../../components/Toggle.svelte';
1618
import { localSettings } from '../../stores/localstorage.store';
1719
import { sessions } from '../../stores/session.store';
@@ -24,7 +26,7 @@
2426
About
2527
}
2628
27-
const tab = useTabs(Tabs.Interface, { size: 'stretch' });
29+
const tab = useTabs(Tabs.Interface, { direction: 'vertical' });
2830
2931
let lastKeyCode = 0;
3032
let lastKey = '';
@@ -68,71 +70,60 @@
6870
<h1 class="h1">Settings</h1>
6971
<p class="body">Manage your settings and integrations.</p>
7072
</div>
71-
<div class="flex-1 flex mx-auto h-full w-full overflow-y-hidden max-w-7xl items-start space-x-16">
73+
<div class="flex-1 flex mx-auto h-full w-full max-w-7xl items-start space-x-16">
7274
<Container direction="vertical" class="space-y-4 h3 w-52 lg:w-72 flex flex-col *:flex-1">
73-
<Container
74-
on:enter={() => tab.set(Tabs.Account)}
75-
on:clickOrSelect={() => tab.set(Tabs.Account)}
76-
let:hasFocus
77-
focusOnClick
78-
class={classNames('flex items-center cursor-pointer py-3 px-6 w-full rounded-xl', {
79-
'bg-secondary-800': $tab === Tabs.Account
80-
})}
81-
>
75+
<TabSelect tabValue={Tabs.Account} openTab={tab.openTab} let:hasFocus let:isActive>
8276
<span
83-
class={classNames('', {
84-
'text-secondary-400': $tab !== Tabs.Account,
85-
'text-secondary-200': $tab === Tabs.Account && !hasFocus,
86-
'text-primary-500': hasFocus
87-
})}
77+
class={classNames(
78+
'flex items-center cursor-pointer py-3 px-6 w-full rounded-xl',
79+
{
80+
'bg-secondary-800': isActive,
81+
'text-secondary-400': !isActive,
82+
'text-secondary-200': isActive && !hasFocus,
83+
'text-primary-500': hasFocus
84+
},
85+
$$restProps.class
86+
)}
8887
>
8988
Account
9089
</span>
91-
</Container>
92-
<Container
93-
on:enter={() => tab.set(Tabs.Interface)}
94-
on:clickOrSelect={() => tab.set(Tabs.Interface)}
95-
let:hasFocus
96-
focusOnClick
97-
class={classNames('flex items-center cursor-pointer py-3 px-6 w-full rounded-xl', {
98-
'bg-secondary-800': $tab === Tabs.Interface
99-
})}
100-
>
90+
</TabSelect>
91+
<TabSelect tabValue={Tabs.Interface} openTab={tab.openTab} let:hasFocus let:isActive>
10192
<span
102-
class={classNames('', {
103-
'text-secondary-400': $tab !== Tabs.Interface,
104-
'text-secondary-200': $tab === Tabs.Interface && !hasFocus,
105-
'text-primary-500': hasFocus
106-
})}
93+
class={classNames(
94+
'flex items-center cursor-pointer py-3 px-6 w-full rounded-xl',
95+
{
96+
'bg-secondary-800': isActive,
97+
'text-secondary-400': !isActive,
98+
'text-secondary-200': isActive && !hasFocus,
99+
'text-primary-500': hasFocus
100+
},
101+
$$restProps.class
102+
)}
107103
>
108104
Options
109105
</span>
110-
</Container>
111-
<Container
112-
on:enter={() => tab.set(Tabs.About)}
113-
on:clickOrSelect={() => tab.set(Tabs.About)}
114-
let:hasFocus
115-
focusOnClick
116-
class={classNames('flex items-center cursor-pointer py-3 px-6 w-full rounded-xl', {
117-
'bg-secondary-800': $tab === Tabs.About
118-
})}
119-
>
106+
</TabSelect>
107+
<TabSelect tabValue={Tabs.About} openTab={tab.openTab} let:hasFocus let:isActive>
120108
<span
121-
class={classNames('', {
122-
'text-secondary-400': $tab !== Tabs.About,
123-
'text-secondary-200': $tab === Tabs.About && !hasFocus,
124-
'text-primary-500': hasFocus
125-
})}
109+
class={classNames(
110+
'flex items-center cursor-pointer py-3 px-6 w-full rounded-xl',
111+
{
112+
'bg-secondary-800': isActive,
113+
'text-secondary-400': !isActive,
114+
'text-secondary-200': isActive && !hasFocus,
115+
'text-primary-500': hasFocus
116+
},
117+
$$restProps.class
118+
)}
126119
>
127120
About
128121
</span>
129-
</Container>
122+
</TabSelect>
130123
</Container>
131124

132-
<Container
133-
class="flex-1 grid w-full h-full overflow-y-hidden relative *:pb-16 *:overflow-y-auto *:scrollbar-hide -mx-4 px-4 *:-mx-4 *:px-4"
134-
>
135-
<Tab {...tab} direction="vertical" tab={Tabs.Account} class="space-y-16">
125+
<TabContainer>
126+
<Tab {...tab} tab={Tabs.Account} class="space-y-16 pb-16">
136127
<div>
137128
<Container class="bg-primary-800 rounded-xl p-8" on:enter={scrollIntoView({ top: 9999 })}>
138129
<h1 class="h4 mb-4">My Profile</h1>
@@ -305,7 +296,7 @@
305296
</div>
306297
</Tab>
307298

308-
<Tab {...tab} direction="vertical" tab={Tabs.Interface} class="w-full">
299+
<Tab {...tab} tab={Tabs.Interface}>
309300
<div class="flex items-center justify-between text-lg font-medium text-secondary-100 py-2">
310301
<label class="mr-2">Animate scrolling</label>
311302
<Toggle
@@ -348,7 +339,7 @@
348339
</div>
349340
</Tab>
350341

351-
<Tab {...tab} direction="vertical" tab={Tabs.About}>
342+
<Tab {...tab} tab={Tabs.About}>
352343
<div>
353344
Version: {REIVERR_VERSION}
354345
</div>
@@ -369,6 +360,6 @@
369360
<Button on:clickOrSelect={handleLogOut} class="hover:bg-red-500">Log Out</Button>
370361
</div>
371362
</Tab>
372-
</Container>
363+
</TabContainer>
373364
</div>
374365
</Container>

0 commit comments

Comments
 (0)