Skip to content

Commit 1cab4f4

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

22 files changed

+411
-89
lines changed

‎demo/App.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -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: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,11 @@
101101
@use 'src/lib/styles/common/flex' as flex;
102102
103103
.column {
104-
@include flex.column($center: true, $gap: var(--gap-lg));
104+
@include flex.column($center: true, $gap: var(--neo-gap-lg));
105105
}
106106
107107
.row {
108-
@include flex.row($gap: var(--gap-xl));
108+
@include flex.row($gap: var(--neo-gap-xl));
109109
110110
align-items: center;
111111
justify-content: center;
@@ -114,11 +114,11 @@
114114
115115
@media (width > 1550px) {
116116
.column {
117-
@include flex.row($gap: var(--gap-xl));
117+
@include flex.row($gap: var(--neo-gap-xl));
118118
}
119119
120120
.row {
121-
@include flex.column($center: true, $gap: var(--gap-xl));
121+
@include flex.column($center: true, $gap: var(--neo-gap-xl));
122122
}
123123
124124
.label {

‎demo/components/DemoCards.svelte‎

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

‎demo/router/routes.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export const Route = {
66
ButtonGroups: 'button-groups' as const,
77
Tabs: 'tabs' as const,
88
TabsPanels: 'tabs-panels' as const,
9+
Cards: 'cards' as const,
910
} as const;
1011

1112
export type Routes = (typeof Route)[keyof typeof Route];
@@ -15,13 +16,15 @@ export const Path: Record<keyof typeof Route, string> = {
1516
ButtonGroups: '/buttons/groups' as const,
1617
Tabs: '/tabs' as const,
1718
TabsPanels: '/tabs/panels' as const,
19+
Cards: '/cards' as const,
1820
Any: '*' as const,
1921
} as const;
2022

2123
export const routes = Object.values(Route).filter(key => key !== Route.Any);
2224

2325
export const options: RouterOptions<Routes> = {
2426
hash: true,
27+
listen: 'navigation',
2528
routes: [
2629
{
2730
name: Route.Buttons,
@@ -43,6 +46,11 @@ export const options: RouterOptions<Routes> = {
4346
path: Path.TabsPanels,
4447
component: () => import('../components/DemoTabsPanels.svelte'),
4548
},
49+
{
50+
name: Route.Cards,
51+
path: Path.Cards,
52+
component: () => import('../components/DemoCards.svelte'),
53+
},
4654
{
4755
name: Route.Any,
4856
path: Path.Any,

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
"svelte": ">=5"
7979
},
8080
"dependencies": {
81-
"@dvcol/common-utils": "^1.18.1",
81+
"@dvcol/common-utils": "^1.18.3",
8282
"@dvcol/svelte-utils": "^1.3.0",
8383
"svelte": "^5.1.9",
8484
"vite": "^5.4.10"
@@ -88,7 +88,7 @@
8888
"@commitlint/config-conventional": "^19.4.1",
8989
"@dvcol/eslint-plugin-presets": "^1.3.11",
9090
"@dvcol/stylelint-plugin-presets": "^2.1.2",
91-
"@dvcol/svelte-simple-router": "^1.7.1",
91+
"@dvcol/svelte-simple-router": "^1.7.3",
9292
"@sveltejs/adapter-auto": "^3.2.5",
9393
"@sveltejs/kit": "^2.7.4",
9494
"@sveltejs/package": "^2.3.7",

0 commit comments

Comments
 (0)