Skip to content

Commit 02cfac5

Browse files
dvcoldvcol
committed
fix(tabs): adds flex override and nowrap
1 parent 50496e4 commit 02cfac5

19 files changed

+202
-75
lines changed

‎demo/App.svelte‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
const onChange = async () => {
3737
if (first) return;
3838
transitioning = true;
39-
await wait(300);
39+
await wait(100);
4040
};
4141
4242
const onLoaded = async () => {
@@ -88,7 +88,7 @@
8888
</NeoButtonGroup>
8989
</div>
9090

91-
<main class="row view" class:transition={transitioning}>
91+
<main class="column view" class:transition={transitioning}>
9292
<RouterView {router} {transition} {onChange} {onLoaded} />
9393
</main>
9494
</div>
@@ -101,6 +101,10 @@
101101
@include flex.row($center: true, $gap: var(--neo-gap-xl));
102102
}
103103
104+
.column {
105+
@include flex.column($center: true, $gap: var(--neo-gap-lg));
106+
}
107+
104108
.view {
105109
min-height: 70vh;
106110
overflow: hidden;

‎demo/components/DemoButtonGroups.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
}
9999
100100
.row {
101-
@include flex.row($gap: var(--neo-gap-xl));
101+
@include flex.row($gap: var(--neo-gap-xl), $flex: 0 1 auto);
102102
103103
align-items: center;
104104
justify-content: center;
@@ -111,7 +111,7 @@
111111
}
112112
113113
.row {
114-
@include flex.column($center: true, $gap: var(--neo-gap-xl));
114+
@include flex.column($center: true, $gap: var(--neo-gap-xl), $flex: 0 1 auto);
115115
}
116116
117117
.label {

‎demo/components/DemoButtons.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
}
107107
108108
.row {
109-
@include flex.row($gap: var(--neo-gap-xl));
109+
@include flex.row($gap: var(--neo-gap-xl), $flex: 0 1 auto);
110110
111111
align-items: center;
112112
justify-content: center;
@@ -119,7 +119,7 @@
119119
}
120120
121121
.row {
122-
@include flex.column($center: true, $gap: var(--neo-gap-xl));
122+
@include flex.column($center: true, $gap: var(--neo-gap-xl), $flex: 0 1 auto);
123123
}
124124
125125
.label {

‎demo/components/DemoCards.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
44
import type { NeoCardProps } from '~/cards/neo-card.model';
55
6-
import type { TabsProps } from '~/nav/neo-tabs.model.js';
6+
import type { NeoTabsProps } from '~/nav/neo-tabs.model.js';
77
88
import NeoButton from '~/buttons/NeoButton.svelte';
99
import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
@@ -73,7 +73,7 @@
7373
</div>
7474
{/snippet}
7575

76-
{#snippet group(props: TabsProps = {})}
76+
{#snippet group(props: NeoTabsProps = {})}
7777
<div class="column">
7878
<NeoCard {...options} {...props}>
7979
{@render lorem()}
@@ -103,7 +103,7 @@
103103
}
104104
105105
.row {
106-
@include flex.row($gap: var(--neo-gap-xl));
106+
@include flex.row($gap: var(--neo-gap-xl), $flex: 0 1 auto);
107107
108108
align-items: center;
109109
justify-content: center;

‎demo/components/DemoTabs.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
import { useButtonState } from '../utils/use-button-state.svelte';
88
99
import type { TabId } from '~/nav/neo-tab.model';
10-
import type { TabsProps } from '~/nav/neo-tabs.model.js';
10+
import type { NeoTabsProps } from '~/nav/neo-tabs.model.js';
1111
1212
import NeoButton from '~/buttons/NeoButton.svelte';
1313
import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
@@ -46,7 +46,7 @@
4646
4747
const options = $state({ disabled: false, close: false, add: false, slide: true, shallow: false, toggle: false });
4848
49-
const columns: { label: string; props?: TabsProps }[] = [
49+
const columns: { label: string; props?: NeoTabsProps }[] = [
5050
{ label: 'Default' },
5151
{ label: 'Rounded', props: { rounded: true } },
5252
{ label: 'Flat', props: { flat: true } },
@@ -73,7 +73,7 @@
7373
{/each}
7474
{/snippet}
7575

76-
{#snippet group(props: TabsProps = {})}
76+
{#snippet group(props: NeoTabsProps = {})}
7777
<NeoTabs bind:active onchange={onChange} {vertical} {skeleton} {onclose} {onadd} {...options} {...props}>
7878
{@render tabs()}
7979
</NeoTabs>
@@ -121,7 +121,7 @@
121121
}
122122
123123
.row {
124-
@include flex.row($gap: var(--neo-gap-xl));
124+
@include flex.row($gap: var(--neo-gap-xl), $flex: 0 1 auto);
125125
126126
align-items: center;
127127
justify-content: center;
@@ -134,7 +134,7 @@
134134
}
135135
136136
.row {
137-
@include flex.column($center: true, $gap: var(--neo-gap-xl));
137+
@include flex.column($center: true, $gap: var(--neo-gap-xl), $flex: 0 1 auto);
138138
}
139139
140140
.label {

‎demo/components/DemoTabsPanels.svelte‎

Lines changed: 50 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,41 @@
11
<script lang="ts">
22
import { randomHex } from '@dvcol/common-utils/common/crypto';
33
4+
import { fade } from 'svelte/transition';
5+
46
import SphereBackdrop from '../utils/SphereBackdrop.svelte';
57
68
import type { TabId } from '~/nav/neo-tab.model.js';
7-
import type { TabsProps } from '~/nav/neo-tabs.model.js';
9+
import type { NeoTabsProps } from '~/nav/neo-tabs.model.js';
810
911
import NeoButton from '~/buttons/NeoButton.svelte';
1012
import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
1113
import NeoCard from '~/cards/NeoCard.svelte';
14+
import TransitionContainer from '~/container/TransitionContainer.svelte';
1215
import IconAccount from '~/icons/IconAccount.svelte';
1316
import NeoTab from '~/nav/NeoTab.svelte';
1417
import NeoTabPane from '~/nav/NeoTabPane.svelte';
1518
import NeoTabs from '~/nav/NeoTabs.svelte';
1619
1720
const added = $state([
18-
{ text: `Added ${randomHex(2)}-0`, tabId: crypto.randomUUID() },
19-
{ text: `Added ${randomHex(2)}-1`, tabId: crypto.randomUUID() },
21+
{ text: `Added ${randomHex(1)}-0`, tabId: crypto.randomUUID() },
22+
{ text: `Added ${randomHex(1)}-1`, tabId: crypto.randomUUID() },
2023
]);
2124
const onclose = (id: TabId) => {
2225
const index = added.findIndex(tab => tab.tabId === id);
2326
if (index === -1) return;
2427
added.splice(index, 1);
2528
};
2629
const onadd = () => {
27-
added.push({ text: `Added ${randomHex(2)}-${added.length + 1}`, tabId: crypto.randomUUID() });
30+
added.push({ text: `Added ${randomHex(1)}-${added.length + 1}`, tabId: crypto.randomUUID() });
2831
};
2932
3033
let active: unknown | undefined = $state();
3134
const onClear = () => {
3235
active = undefined;
3336
};
3437
35-
let loading = $state(false);
36-
const options = $state<TabsProps>({
38+
const options = $state<NeoTabsProps>({
3739
disabled: false,
3840
close: true,
3941
add: true,
@@ -43,9 +45,10 @@
4345
before: false,
4446
skeleton: false,
4547
vertical: false,
48+
nowrap: false,
4649
});
4750
48-
const columns: { label: string; props?: TabsProps }[] = [{ label: 'Default' }];
51+
const columns: { label: string; props?: NeoTabsProps }[] = [{ label: 'Default' }];
4952
</script>
5053

5154
<div class="row">
@@ -55,8 +58,8 @@
5558
<NeoButton toggle bind:checked={options.shallow}>Shallow</NeoButton>
5659
<NeoButton toggle bind:checked={options.before}>Before</NeoButton>
5760
<NeoButton toggle bind:checked={options.vertical}>Vertical</NeoButton>
61+
<NeoButton toggle bind:checked={options.nowrap}>No Wrap</NeoButton>
5862
<NeoButton toggle bind:checked={options.skeleton}>Skeleton</NeoButton>
59-
<NeoButton toggle bind:checked={loading}>Loading</NeoButton>
6063
<NeoButton onclick={onClear}>Clear</NeoButton>
6164
</NeoButtonGroup>
6265
</div>
@@ -68,45 +71,49 @@
6871

6972
{#snippet tabs()}
7073
<NeoTab tabId="button" value="button" close={false}>Button</NeoTab>
71-
<NeoTab tabId="icon" value="icon" {loading} close={false} {icon} />
74+
<NeoTab tabId="icon" value="icon" close={false} {icon}>Icon</NeoTab>
7275
<NeoTab tabId="reversed" value="reversed" reverse close={false} {icon}>Reversed</NeoTab>
7376
{#each added as { text, ...tab } (tab.tabId)}
7477
<NeoTab {...tab}>{text}</NeoTab>
7578
{/each}
7679
{/snippet}
7780

7881
{#snippet content(word)}
79-
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
80-
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
81-
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
82-
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
83-
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
82+
<div class="panel" in:fade={{ delay: 400 }} out:fade>
83+
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
84+
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
85+
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
86+
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
87+
<div>{Array.from({ length: 10 }, () => word).join(' ')}</div>
88+
</div>
8489
{/snippet}
8590

8691
{#snippet panes()}
8792
<NeoCard>
88-
<NeoTabPane empty>
89-
{@render content('Empty')}
90-
</NeoTabPane>
91-
<NeoTabPane tabId="button">
92-
{@render content('Button')}
93-
</NeoTabPane>
94-
<NeoTabPane tabId="icon">
95-
{@render content('Icon')}
96-
</NeoTabPane>
97-
<NeoTabPane tabId="reversed">
98-
{@render content('Reversed')}
99-
</NeoTabPane>
100-
101-
{#each added as { text, tabId } (tabId)}
102-
<NeoTabPane {tabId}>
103-
{@render content(text)}
93+
<TransitionContainer>
94+
<NeoTabPane empty>
95+
{@render content('Empty')}
96+
</NeoTabPane>
97+
<NeoTabPane tabId="button">
98+
{@render content('Button')}
99+
</NeoTabPane>
100+
<NeoTabPane tabId="icon">
101+
{@render content('Icon')}
104102
</NeoTabPane>
105-
{/each}
103+
<NeoTabPane tabId="reversed">
104+
{@render content('Reversed')}
105+
</NeoTabPane>
106+
107+
{#each added as { text, tabId } (tabId)}
108+
<NeoTabPane {tabId}>
109+
{@render content(text)}
110+
</NeoTabPane>
111+
{/each}
112+
</TransitionContainer>
106113
</NeoCard>
107114
{/snippet}
108115

109-
{#snippet group(props: TabsProps = {})}
116+
{#snippet group(props: NeoTabsProps = {})}
110117
<div class="column">
111118
<NeoTabs {panes} {active} {onclose} {onadd} {...options} {...props}>
112119
{@render tabs()}
@@ -131,19 +138,25 @@
131138
<style lang="scss">
132139
@use 'src/lib/styles/common/flex' as flex;
133140
134-
.content {
135-
width: min-content;
136-
}
137-
138141
.column {
139142
@include flex.column($center: true, $gap: var(--neo-gap-lg));
140143
}
141144
142145
.row {
143-
@include flex.row($gap: var(--neo-gap-xl));
146+
@include flex.row($gap: var(--neo-gap-xl), $flex: 0 1 auto);
144147
145148
align-items: center;
146149
justify-content: center;
147150
margin: 2rem 0;
148151
}
152+
153+
.content {
154+
flex: 0 1 37.5rem;
155+
max-width: 37.5rem;
156+
}
157+
158+
.panel {
159+
min-width: 37.5rem;
160+
min-height: 15rem;
161+
}
149162
</style>

‎src/lib/buttons/NeoButton.svelte‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
icon,
1414
1515
// States
16+
ref = $bindable(),
1617
tag,
1718
href,
1819
loading,
@@ -37,6 +38,11 @@
3738
coalesce,
3839
pulse,
3940
41+
// Flex
42+
justify,
43+
align,
44+
flex,
45+
4046
// Events
4147
onchecked,
4248
onclick,
@@ -113,6 +119,7 @@
113119

114120
<svelte:element
115121
this={element}
122+
bind:this={ref}
116123
{href}
117124
{role}
118125
{tabindex}
@@ -130,6 +137,9 @@
130137
class:rounded
131138
class:rotate
132139
class:empty
140+
style:justify-content={justify}
141+
style:align-items={align}
142+
style:flex
133143
use:useFn={useProps}
134144
out:outFn={outProps}
135145
in:inFn={inProps}

0 commit comments

Comments
 (0)