Skip to content

Commit 50496e4

Browse files
dvcoldvcol
committed
feat(cards): first commit about cards
1 parent b845aaa commit 50496e4

23 files changed

+493
-132
lines changed

‎demo/App.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
const transition: TransitionProps = {
2525
in: fade,
2626
out: fade,
27-
params: { in: { delay: 100, duration: 100 }, out: { duration: 100 } },
27+
params: { in: { delay: 200, duration: 200 }, out: { duration: 200 } },
2828
props: { container: { style: 'display: flex; justify-content: center; align-items: center;' } },
2929
skipFirst: true,
3030
};
@@ -36,15 +36,15 @@
3636
const onChange = async () => {
3737
if (first) return;
3838
transitioning = true;
39-
await wait(150);
39+
await wait(300);
4040
};
4141
4242
const onLoaded = async () => {
4343
if (active && first) {
4444
first = false;
4545
return;
4646
}
47-
await wait(100);
47+
await wait(300);
4848
transitioning = false;
4949
};
5050
@@ -98,7 +98,7 @@
9898
@use 'src/lib/styles/common/flex' as flex;
9999
100100
.row {
101-
@include flex.row($center: true, $gap: var(--gap-xl));
101+
@include flex.row($center: true, $gap: var(--neo-gap-xl));
102102
}
103103
104104
.view {
@@ -107,7 +107,7 @@
107107
}
108108
109109
.container {
110-
@include flex.column($gap: var(--gap-xl));
110+
@include flex.column($gap: var(--neo-gap-xl));
111111
112112
padding: 1rem;
113113

‎demo/components/DemoButtonGroups.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,11 @@
9494
@use 'src/lib/styles/common/flex' as flex;
9595
9696
.column {
97-
@include flex.column($center: true, $gap: var(--gap-lg));
97+
@include flex.column($center: true, $gap: var(--neo-gap-lg));
9898
}
9999
100100
.row {
101-
@include flex.row($gap: var(--gap-xl));
101+
@include flex.row($gap: var(--neo-gap-xl));
102102
103103
align-items: center;
104104
justify-content: center;
@@ -107,11 +107,11 @@
107107
108108
@media (width > 1550px) {
109109
.column {
110-
@include flex.row($gap: var(--gap-xxl));
110+
@include flex.row($gap: var(--neo-gap-xxl));
111111
}
112112
113113
.row {
114-
@include flex.column($center: true, $gap: var(--gap-xl));
114+
@include flex.column($center: true, $gap: var(--neo-gap-xl));
115115
}
116116
117117
.label {

‎demo/components/DemoButtons.svelte‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
1515
const { onClick, loading: isLoading, onLoading } = useButtonState('DemoButtonClick');
1616
17-
const options = $state({ disabled: false, shallow: false, skeleton: false, loading: false });
17+
const options = $state({ disabled: false, shallow: false, skeleton: false, loading: false, borderless: false });
1818
1919
const loading = $derived.by(() => isLoading() || options.loading);
2020
@@ -49,6 +49,7 @@
4949
<NeoButton toggle bind:checked={options.disabled}>Disabled</NeoButton>
5050
<NeoButton toggle bind:checked={options.loading}>Loading</NeoButton>
5151
<NeoButton toggle bind:checked={options.shallow}>Shallow</NeoButton>
52+
<NeoButton toggle bind:checked={options.borderless}>Borderless</NeoButton>
5253
<NeoButton toggle bind:checked={options.skeleton}>Skeleton</NeoButton>
5354
</NeoButtonGroup>
5455
</div>
@@ -101,11 +102,11 @@
101102
@use 'src/lib/styles/common/flex' as flex;
102103
103104
.column {
104-
@include flex.column($center: true, $gap: var(--gap-lg));
105+
@include flex.column($center: true, $gap: var(--neo-gap-lg));
105106
}
106107
107108
.row {
108-
@include flex.row($gap: var(--gap-xl));
109+
@include flex.row($gap: var(--neo-gap-xl));
109110
110111
align-items: center;
111112
justify-content: center;
@@ -114,11 +115,11 @@
114115
115116
@media (width > 1550px) {
116117
.column {
117-
@include flex.row($gap: var(--gap-xl));
118+
@include flex.row($gap: var(--neo-gap-xl));
118119
}
119120
120121
.row {
121-
@include flex.column($center: true, $gap: var(--gap-xl));
122+
@include flex.column($center: true, $gap: var(--neo-gap-xl));
122123
}
123124
124125
.label {

‎demo/components/DemoCards.svelte‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<script lang="ts">
2+
import SphereBackdrop from '../utils/SphereBackdrop.svelte';
3+
4+
import type { NeoCardProps } from '~/cards/neo-card.model';
5+
6+
import type { TabsProps } from '~/nav/neo-tabs.model.js';
7+
8+
import NeoButton from '~/buttons/NeoButton.svelte';
9+
import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
10+
import NeoCard from '~/cards/NeoCard.svelte';
11+
import IconAdd from '~/icons/IconAdd.svelte';
12+
import IconMinus from '~/icons/IconMinus.svelte';
13+
14+
const options = $state<NeoCardProps>({
15+
elevation: 2,
16+
borderless: false,
17+
skeleton: false,
18+
loading: false,
19+
});
20+
21+
const onElevation = (value: number) => {
22+
const halfStep = (value > 0 && [-1, -0.5, 0, 0.5].includes(options.elevation)) || (value < 0 && [-0.5, 0, 0.5, 1].includes(options.elevation));
23+
options.elevation += halfStep ? Math.sign(value) * 0.5 : value;
24+
};
25+
26+
const resetElevation = () => {
27+
options.elevation = 2;
28+
};
29+
30+
const columns: { label: string; props?: NeoCardProps }[] = [{ label: 'Default' }, { label: 'Glass', props: { glass: true } }];
31+
</script>
32+
33+
<div class="row">
34+
<div class="column">
35+
<NeoButtonGroup>
36+
<NeoButton toggle bind:checked={options.borderless}>Borderless</NeoButton>
37+
<NeoButton toggle bind:checked={options.skeleton}>Skeleton</NeoButton>
38+
<NeoButton toggle bind:checked={options.loading}>Loading</NeoButton>
39+
</NeoButtonGroup>
40+
41+
<NeoButtonGroup rounded>
42+
<NeoButton disabled={options.elevation <= -4} onclick={() => onElevation(-1)}>
43+
{#snippet icon()}
44+
<IconMinus />
45+
{/snippet}
46+
</NeoButton>
47+
<NeoButton onclick={resetElevation}>{options.elevation}</NeoButton>
48+
<NeoButton disabled={options.elevation >= 4} onclick={() => onElevation(1)}>
49+
{#snippet icon()}
50+
<IconAdd />
51+
{/snippet}
52+
</NeoButton>
53+
</NeoButtonGroup>
54+
</div>
55+
</div>
56+
57+
{#snippet lorem()}
58+
<div class="column">
59+
<p>
60+
Lorem ipsum odor amet, consectetuer adipiscing elit. Malesuada pharetra ullamcorper eget hac; imperdiet a finibus hac. Sollicitudin tincidunt
61+
mauris eros ex pharetra imperdiet. Nibh facilisi ante vestibulum feugiat facilisi quam risus ex? Malesuada condimentum nulla odio facilisi
62+
semper sodales. Dapibus est duis odio tincidunt elementum. Sodales scelerisque venenatis hac ridiculus scelerisque massa vitae. Hendrerit
63+
blandit sed, ac cursus ante varius quam. Malesuada habitant curae diam pulvinar proin congue tristique dictum.
64+
</p>
65+
66+
<p>
67+
Dignissim quisque non fermentum ipsum; sapien dignissim lobortis. Quam montes lacus ipsum ac dolor class. Erat accumsan morbi fermentum
68+
consectetur sollicitudin elit a. Primis tincidunt aenean malesuada eleifend nunc morbi consequat. Aenean malesuada sapien habitant feugiat
69+
sapien consectetur torquent risus nascetur. Dui elit gravida sollicitudin nascetur suscipit facilisi est sodales? Vulputate rhoncus rhoncus
70+
suspendisse amet nostra quisque eleifend tellus interdum? Volutpat nunc imperdiet sagittis, efficitur nibh eget maecenas. Finibus justo nascetur
71+
parturient nascetur ac condimentum erat ultrices. Sociosqu nascetur quisque; elit iaculis libero quis.
72+
</p>
73+
</div>
74+
{/snippet}
75+
76+
{#snippet group(props: TabsProps = {})}
77+
<div class="column">
78+
<NeoCard {...options} {...props}>
79+
{@render lorem()}
80+
</NeoCard>
81+
</div>
82+
{/snippet}
83+
84+
<div class="row">
85+
{#each columns as { label, props }}
86+
<div class="column">
87+
<span class="label">{label}</span>
88+
89+
{#if props?.glass}
90+
<SphereBackdrop>{@render group(props)}</SphereBackdrop>
91+
{:else}
92+
{@render group(props)}
93+
{/if}
94+
</div>
95+
{/each}
96+
</div>
97+
98+
<style lang="scss">
99+
@use 'src/lib/styles/common/flex' as flex;
100+
101+
.column {
102+
@include flex.column($center: true, $gap: var(--neo-gap-lg));
103+
}
104+
105+
.row {
106+
@include flex.row($gap: var(--neo-gap-xl));
107+
108+
align-items: center;
109+
justify-content: center;
110+
margin: 2rem 0;
111+
}
112+
</style>

‎demo/components/DemoTabs.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,11 @@
117117
@use 'src/lib/styles/common/flex' as flex;
118118
119119
.column {
120-
@include flex.column($center: true, $gap: var(--gap-lg));
120+
@include flex.column($center: true, $gap: var(--neo-gap-lg));
121121
}
122122
123123
.row {
124-
@include flex.row($gap: var(--gap-xl));
124+
@include flex.row($gap: var(--neo-gap-xl));
125125
126126
align-items: center;
127127
justify-content: center;
@@ -130,11 +130,11 @@
130130
131131
@media (width > 1550px) {
132132
.column {
133-
@include flex.row($gap: var(--gap-xxl));
133+
@include flex.row($gap: var(--neo-gap-xxl));
134134
}
135135
136136
.row {
137-
@include flex.column($center: true, $gap: var(--gap-xl));
137+
@include flex.column($center: true, $gap: var(--neo-gap-xl));
138138
}
139139
140140
.label {

‎demo/components/DemoTabsPanels.svelte‎

Lines changed: 51 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
99
import NeoButton from '~/buttons/NeoButton.svelte';
1010
import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
11+
import NeoCard from '~/cards/NeoCard.svelte';
1112
import IconAccount from '~/icons/IconAccount.svelte';
1213
import NeoTab from '~/nav/NeoTab.svelte';
1314
import NeoTabPane from '~/nav/NeoTabPane.svelte';
@@ -32,13 +33,17 @@
3233
};
3334
3435
let loading = $state(false);
35-
let skeleton = $state(false);
36-
let vertical = $state(false);
37-
const options = $state({ disabled: false, close: true, add: true, slide: true, shallow: false, toggle: true, position: 'after' });
38-
39-
const togglePosition = () => {
40-
options.position = options.position === 'after' ? 'before' : 'after';
41-
};
36+
const options = $state<TabsProps>({
37+
disabled: false,
38+
close: true,
39+
add: true,
40+
slide: true,
41+
shallow: false,
42+
toggle: true,
43+
before: false,
44+
skeleton: false,
45+
vertical: false,
46+
});
4247
4348
const columns: { label: string; props?: TabsProps }[] = [{ label: 'Default' }];
4449
</script>
@@ -48,9 +53,9 @@
4853
<NeoButtonGroup>
4954
<NeoButton toggle bind:checked={options.disabled}>Disabled</NeoButton>
5055
<NeoButton toggle bind:checked={options.shallow}>Shallow</NeoButton>
51-
<NeoButton onclick={togglePosition}>Position</NeoButton>
52-
<NeoButton toggle bind:checked={vertical}>Vertical</NeoButton>
53-
<NeoButton toggle bind:checked={skeleton}>Skeleton</NeoButton>
56+
<NeoButton toggle bind:checked={options.before}>Before</NeoButton>
57+
<NeoButton toggle bind:checked={options.vertical}>Vertical</NeoButton>
58+
<NeoButton toggle bind:checked={options.skeleton}>Skeleton</NeoButton>
5459
<NeoButton toggle bind:checked={loading}>Loading</NeoButton>
5560
<NeoButton onclick={onClear}>Clear</NeoButton>
5661
</NeoButtonGroup>
@@ -70,36 +75,48 @@
7075
{/each}
7176
{/snippet}
7277

78+
{#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>
84+
{/snippet}
85+
7386
{#snippet panes()}
74-
<NeoTabPane empty>
75-
<div>Empty</div>
76-
</NeoTabPane>
77-
<NeoTabPane tabId="button">
78-
<div>Button</div>
79-
</NeoTabPane>
80-
<NeoTabPane tabId="icon" {loading} {icon}>
81-
<div>Icon</div>
82-
</NeoTabPane>
83-
<NeoTabPane tabId="reversed" {icon}>
84-
<div>Reversed</div>
85-
</NeoTabPane>
86-
87-
{#each added as { text, tabId } (tabId)}
88-
<NeoTabPane {tabId}>{text}</NeoTabPane>
89-
{/each}
87+
<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)}
104+
</NeoTabPane>
105+
{/each}
106+
</NeoCard>
90107
{/snippet}
91108

92109
{#snippet group(props: TabsProps = {})}
93110
<div class="column">
94-
<NeoTabs {panes} {active} {vertical} {skeleton} {onclose} {onadd} {...options} {...props}>
111+
<NeoTabs {panes} {active} {onclose} {onadd} {...options} {...props}>
95112
{@render tabs()}
96113
</NeoTabs>
97114
</div>
98115
{/snippet}
99116

100117
<div class="row">
101118
{#each columns as { label, props }}
102-
<div class="column">
119+
<div class="column content">
103120
<span class="label">{label}</span>
104121

105122
{#if props?.glass}
@@ -114,12 +131,16 @@
114131
<style lang="scss">
115132
@use 'src/lib/styles/common/flex' as flex;
116133
134+
.content {
135+
width: min-content;
136+
}
137+
117138
.column {
118-
@include flex.column($center: true, $gap: var(--gap-lg));
139+
@include flex.column($center: true, $gap: var(--neo-gap-lg));
119140
}
120141
121142
.row {
122-
@include flex.row($gap: var(--gap-xl));
143+
@include flex.row($gap: var(--neo-gap-xl));
123144
124145
align-items: center;
125146
justify-content: center;

0 commit comments

Comments
 (0)