@r2digisolutions/components 0.3.7 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/DropdownMenu/DropdownMenu.svelte +1 -0
- package/dist/components/molecules/PageHeader/PageHeader.stories.d.ts +20 -0
- package/dist/components/molecules/PageHeader/PageHeader.stories.js +47 -1
- package/dist/components/molecules/PageHeader/PageHeader.svelte +95 -10
- package/dist/components/molecules/PageHeader/PageHeader.svelte.d.ts +14 -0
- package/dist/components/molecules/PageHeader/PageHeaderStory.svelte +177 -18
- package/dist/components/molecules/PageHeader/PageHeaderStory.svelte.d.ts +4 -0
- package/dist/components/organisms/DataGrid/DataGrid.svelte +4 -4
- package/package.json +1 -1
|
@@ -4,6 +4,10 @@ declare const meta: {
|
|
|
4
4
|
component: import("svelte").Component<{
|
|
5
5
|
title?: string;
|
|
6
6
|
description?: string;
|
|
7
|
+
size?: "sm" | "md" | "lg";
|
|
8
|
+
sticky?: boolean;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
variant?: "default" | "with-back" | "minimal" | "detail" | "loading" | "tabs" | "sticky";
|
|
7
11
|
}, {}, "">;
|
|
8
12
|
tags: string[];
|
|
9
13
|
argTypes: {
|
|
@@ -13,8 +17,18 @@ declare const meta: {
|
|
|
13
17
|
description: {
|
|
14
18
|
control: "text";
|
|
15
19
|
};
|
|
20
|
+
size: {
|
|
21
|
+
control: "select";
|
|
22
|
+
options: string[];
|
|
23
|
+
};
|
|
24
|
+
variant: {
|
|
25
|
+
control: "select";
|
|
26
|
+
options: string[];
|
|
27
|
+
};
|
|
16
28
|
};
|
|
17
29
|
args: {
|
|
30
|
+
variant: "default";
|
|
31
|
+
size: "md";
|
|
18
32
|
title: string;
|
|
19
33
|
description: string;
|
|
20
34
|
};
|
|
@@ -22,3 +36,9 @@ declare const meta: {
|
|
|
22
36
|
export default meta;
|
|
23
37
|
type Story = StoryObj<typeof meta>;
|
|
24
38
|
export declare const Default: Story;
|
|
39
|
+
export declare const WithBack: Story;
|
|
40
|
+
export declare const Minimal: Story;
|
|
41
|
+
export declare const Detail: Story;
|
|
42
|
+
export declare const Loading: Story;
|
|
43
|
+
export declare const WithTabs: Story;
|
|
44
|
+
export declare const Sticky: Story;
|
|
@@ -5,12 +5,58 @@ const meta = {
|
|
|
5
5
|
tags: ['autodocs'],
|
|
6
6
|
argTypes: {
|
|
7
7
|
title: { control: 'text' },
|
|
8
|
-
description: { control: 'text' }
|
|
8
|
+
description: { control: 'text' },
|
|
9
|
+
size: { control: 'select', options: ['sm', 'md', 'lg'] },
|
|
10
|
+
variant: {
|
|
11
|
+
control: 'select',
|
|
12
|
+
options: ['default', 'with-back', 'minimal', 'detail', 'loading', 'tabs', 'sticky']
|
|
13
|
+
}
|
|
9
14
|
},
|
|
10
15
|
args: {
|
|
16
|
+
variant: 'default',
|
|
17
|
+
size: 'md',
|
|
11
18
|
title: 'Project settings',
|
|
12
19
|
description: 'Manage workspace preferences, members, and billing.'
|
|
13
20
|
}
|
|
14
21
|
};
|
|
15
22
|
export default meta;
|
|
16
23
|
export const Default = {};
|
|
24
|
+
export const WithBack = {
|
|
25
|
+
args: {
|
|
26
|
+
variant: 'with-back',
|
|
27
|
+
title: 'Ana López',
|
|
28
|
+
description: 'Profile, plan and activity for this account.'
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
export const Minimal = {
|
|
32
|
+
args: { variant: 'minimal', title: 'Overview', description: '' }
|
|
33
|
+
};
|
|
34
|
+
export const Detail = {
|
|
35
|
+
args: {
|
|
36
|
+
variant: 'detail',
|
|
37
|
+
size: 'lg',
|
|
38
|
+
title: 'Invoice #1042',
|
|
39
|
+
description: 'Created 28 Jul 2026 — due in 7 days.'
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
export const Loading = {
|
|
43
|
+
args: {
|
|
44
|
+
variant: 'loading',
|
|
45
|
+
title: 'Project settings',
|
|
46
|
+
description: 'Manage workspace preferences, members, and billing.'
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
export const WithTabs = {
|
|
50
|
+
args: {
|
|
51
|
+
variant: 'tabs',
|
|
52
|
+
title: 'Settings',
|
|
53
|
+
description: 'Workspace configuration.'
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
export const Sticky = {
|
|
57
|
+
args: {
|
|
58
|
+
variant: 'sticky',
|
|
59
|
+
title: 'Dashboard',
|
|
60
|
+
description: 'This header sticks to the top as you scroll.'
|
|
61
|
+
}
|
|
62
|
+
};
|
|
@@ -2,14 +2,30 @@
|
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
3
|
import Breadcrumb from '../Breadcrumb/Breadcrumb.svelte';
|
|
4
4
|
import type { BreadcrumbItem } from '../Breadcrumb/Breadcrumb.svelte';
|
|
5
|
+
import Skeleton from '../../atoms/Skeleton/Skeleton.svelte';
|
|
6
|
+
|
|
7
|
+
type PageHeaderSize = 'sm' | 'md' | 'lg';
|
|
5
8
|
|
|
6
9
|
interface PageHeaderProps {
|
|
7
10
|
title: string;
|
|
8
11
|
description?: string;
|
|
9
12
|
breadcrumbs?: BreadcrumbItem[];
|
|
13
|
+
/** Visual size of the title + spacing. Default `md`. */
|
|
14
|
+
size?: PageHeaderSize;
|
|
15
|
+
/** Stick to the top when scrolling (adds backdrop-blur). */
|
|
16
|
+
sticky?: boolean;
|
|
17
|
+
/** Show skeleton placeholders instead of content while loading. */
|
|
18
|
+
loading?: boolean;
|
|
10
19
|
class?: string;
|
|
20
|
+
/** Content placed before the title (e.g. a back-arrow button). */
|
|
21
|
+
leading?: Snippet;
|
|
22
|
+
/** Inline badge/status next to the title. */
|
|
23
|
+
status?: Snippet;
|
|
11
24
|
actions?: Snippet;
|
|
25
|
+
/** Secondary info below the title (badges, meta text…). */
|
|
12
26
|
meta?: Snippet;
|
|
27
|
+
/** Tabs or secondary navigation below the header body. */
|
|
28
|
+
tabs?: Snippet;
|
|
13
29
|
children?: Snippet;
|
|
14
30
|
}
|
|
15
31
|
|
|
@@ -17,38 +33,107 @@
|
|
|
17
33
|
title,
|
|
18
34
|
description,
|
|
19
35
|
breadcrumbs = [],
|
|
36
|
+
size = 'md',
|
|
37
|
+
sticky = false,
|
|
38
|
+
loading = false,
|
|
20
39
|
class: className = '',
|
|
40
|
+
leading,
|
|
41
|
+
status,
|
|
21
42
|
actions,
|
|
22
43
|
meta,
|
|
44
|
+
tabs,
|
|
23
45
|
children
|
|
24
46
|
}: PageHeaderProps = $props();
|
|
47
|
+
|
|
48
|
+
const titleSize: Record<PageHeaderSize, string> = {
|
|
49
|
+
sm: 'text-lg font-semibold',
|
|
50
|
+
md: 'text-2xl font-semibold',
|
|
51
|
+
lg: 'text-3xl font-bold'
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const spacing: Record<PageHeaderSize, string> = {
|
|
55
|
+
sm: 'space-y-2',
|
|
56
|
+
md: 'space-y-3',
|
|
57
|
+
lg: 'space-y-4'
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
const resolvedSize = $derived<PageHeaderSize>(
|
|
61
|
+
size === 'sm' || size === 'lg' ? size : 'md'
|
|
62
|
+
);
|
|
25
63
|
</script>
|
|
26
64
|
|
|
27
|
-
<header
|
|
65
|
+
<header
|
|
66
|
+
class={[
|
|
67
|
+
'w-full',
|
|
68
|
+
spacing[resolvedSize],
|
|
69
|
+
sticky && 'sticky top-0 z-10 bg-surface/90 backdrop-blur-md',
|
|
70
|
+
sticky && 'border-b border-border pb-3',
|
|
71
|
+
className
|
|
72
|
+
]}
|
|
73
|
+
>
|
|
28
74
|
{#if breadcrumbs.length}
|
|
29
75
|
<Breadcrumb items={breadcrumbs} />
|
|
30
76
|
{/if}
|
|
31
77
|
|
|
32
78
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
33
|
-
<div class="min-w-0
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
{/if}
|
|
38
|
-
{#if meta}
|
|
39
|
-
<div class="pt-1">
|
|
40
|
-
{@render meta()}
|
|
79
|
+
<div class="flex min-w-0 items-center gap-2">
|
|
80
|
+
{#if leading}
|
|
81
|
+
<div class="shrink-0">
|
|
82
|
+
{@render leading()}
|
|
41
83
|
</div>
|
|
42
84
|
{/if}
|
|
85
|
+
|
|
86
|
+
<div class="min-w-0 space-y-0.5">
|
|
87
|
+
{#if loading}
|
|
88
|
+
<Skeleton
|
|
89
|
+
variant="rounded"
|
|
90
|
+
width={resolvedSize === 'lg' ? '14rem' : resolvedSize === 'sm' ? '9rem' : '12rem'}
|
|
91
|
+
height={resolvedSize === 'lg' ? '2rem' : resolvedSize === 'sm' ? '1.25rem' : '1.75rem'}
|
|
92
|
+
/>
|
|
93
|
+
{#if description}
|
|
94
|
+
<Skeleton variant="rounded" width="18rem" height="1rem" class="mt-1.5" />
|
|
95
|
+
{/if}
|
|
96
|
+
{:else}
|
|
97
|
+
<div class="flex min-w-0 items-center gap-2">
|
|
98
|
+
<h1 class={['truncate tracking-tight text-primary', titleSize[resolvedSize]]}>
|
|
99
|
+
{title}
|
|
100
|
+
</h1>
|
|
101
|
+
{#if status}
|
|
102
|
+
<div class="shrink-0">
|
|
103
|
+
{@render status()}
|
|
104
|
+
</div>
|
|
105
|
+
{/if}
|
|
106
|
+
</div>
|
|
107
|
+
{#if description}
|
|
108
|
+
<p class="max-w-2xl text-sm leading-snug text-muted">{description}</p>
|
|
109
|
+
{/if}
|
|
110
|
+
{#if meta}
|
|
111
|
+
<div class="pt-1">
|
|
112
|
+
{@render meta()}
|
|
113
|
+
</div>
|
|
114
|
+
{/if}
|
|
115
|
+
{/if}
|
|
116
|
+
</div>
|
|
43
117
|
</div>
|
|
44
118
|
|
|
45
|
-
{#if actions}
|
|
119
|
+
{#if actions && !loading}
|
|
46
120
|
<div class="flex shrink-0 flex-wrap items-center gap-2">
|
|
47
121
|
{@render actions()}
|
|
48
122
|
</div>
|
|
123
|
+
{:else if loading}
|
|
124
|
+
<div class="flex shrink-0 items-center gap-2">
|
|
125
|
+
<Skeleton variant="rounded" width="6rem" height="2rem" />
|
|
126
|
+
<Skeleton variant="rounded" width="5rem" height="2rem" />
|
|
127
|
+
</div>
|
|
49
128
|
{/if}
|
|
50
129
|
</div>
|
|
51
130
|
|
|
131
|
+
{#if tabs && !loading}
|
|
132
|
+
<div>
|
|
133
|
+
{@render tabs()}
|
|
134
|
+
</div>
|
|
135
|
+
{/if}
|
|
136
|
+
|
|
52
137
|
{#if children}
|
|
53
138
|
<div class="pt-1">
|
|
54
139
|
{@render children()}
|
|
@@ -1,12 +1,26 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
import type { BreadcrumbItem } from '../Breadcrumb/Breadcrumb.svelte';
|
|
3
|
+
type PageHeaderSize = 'sm' | 'md' | 'lg';
|
|
3
4
|
interface PageHeaderProps {
|
|
4
5
|
title: string;
|
|
5
6
|
description?: string;
|
|
6
7
|
breadcrumbs?: BreadcrumbItem[];
|
|
8
|
+
/** Visual size of the title + spacing. Default `md`. */
|
|
9
|
+
size?: PageHeaderSize;
|
|
10
|
+
/** Stick to the top when scrolling (adds backdrop-blur). */
|
|
11
|
+
sticky?: boolean;
|
|
12
|
+
/** Show skeleton placeholders instead of content while loading. */
|
|
13
|
+
loading?: boolean;
|
|
7
14
|
class?: string;
|
|
15
|
+
/** Content placed before the title (e.g. a back-arrow button). */
|
|
16
|
+
leading?: Snippet;
|
|
17
|
+
/** Inline badge/status next to the title. */
|
|
18
|
+
status?: Snippet;
|
|
8
19
|
actions?: Snippet;
|
|
20
|
+
/** Secondary info below the title (badges, meta text…). */
|
|
9
21
|
meta?: Snippet;
|
|
22
|
+
/** Tabs or secondary navigation below the header body. */
|
|
23
|
+
tabs?: Snippet;
|
|
10
24
|
children?: Snippet;
|
|
11
25
|
}
|
|
12
26
|
declare const PageHeader: import("svelte").Component<PageHeaderProps, {}, "">;
|
|
@@ -2,29 +2,188 @@
|
|
|
2
2
|
import PageHeader from './PageHeader.svelte';
|
|
3
3
|
import Button from '../../atoms/Button/Button.svelte';
|
|
4
4
|
import Badge from '../../atoms/Badge/Badge.svelte';
|
|
5
|
+
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
|
|
6
|
+
import Plus from '@lucide/svelte/icons/plus';
|
|
7
|
+
import Download from '@lucide/svelte/icons/download';
|
|
5
8
|
|
|
6
9
|
let props = $props<{
|
|
7
10
|
title?: string;
|
|
8
11
|
description?: string;
|
|
12
|
+
size?: 'sm' | 'md' | 'lg';
|
|
13
|
+
sticky?: boolean;
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
variant?: 'default' | 'with-back' | 'minimal' | 'detail' | 'loading' | 'tabs' | 'sticky';
|
|
9
16
|
}>();
|
|
17
|
+
|
|
18
|
+
const variant = $derived(props.variant ?? 'default');
|
|
19
|
+
let activeTab = $state('General');
|
|
10
20
|
</script>
|
|
11
21
|
|
|
12
|
-
<div class="w-full max-w-3xl rounded-2xl border border-border bg-surface-elevated p-6">
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
{
|
|
18
|
-
{
|
|
19
|
-
{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
<div class="w-full max-w-3xl rounded-2xl border border-border bg-surface-elevated p-6">
|
|
23
|
+
|
|
24
|
+
<!-- Default: breadcrumbs + meta + actions -->
|
|
25
|
+
{#if variant === 'default'}
|
|
26
|
+
<PageHeader
|
|
27
|
+
title={props.title ?? 'Project settings'}
|
|
28
|
+
description={props.description ?? 'Manage workspace preferences, members, and billing.'}
|
|
29
|
+
size={props.size}
|
|
30
|
+
breadcrumbs={[
|
|
31
|
+
{ id: 'home', label: 'Home', href: '#' },
|
|
32
|
+
{ id: 'projects', label: 'Projects', href: '#' },
|
|
33
|
+
{ id: 'settings', label: 'Settings' }
|
|
34
|
+
]}
|
|
35
|
+
>
|
|
36
|
+
{#snippet status()}
|
|
37
|
+
<Badge variant="success" dot>Active</Badge>
|
|
38
|
+
{/snippet}
|
|
39
|
+
{#snippet meta()}
|
|
40
|
+
<p class="text-xs text-muted">Last saved 2 minutes ago</p>
|
|
41
|
+
{/snippet}
|
|
42
|
+
{#snippet actions()}
|
|
43
|
+
<Button size="sm" variant="secondary">Cancel</Button>
|
|
44
|
+
<Button size="sm">Save changes</Button>
|
|
45
|
+
{/snippet}
|
|
46
|
+
</PageHeader>
|
|
47
|
+
|
|
48
|
+
<!-- Back arrow + actions -->
|
|
49
|
+
{:else if variant === 'with-back'}
|
|
50
|
+
<PageHeader
|
|
51
|
+
title={props.title ?? 'Ana López'}
|
|
52
|
+
description={props.description ?? 'Profile, plan and activity for this account.'}
|
|
53
|
+
size={props.size}
|
|
54
|
+
>
|
|
55
|
+
{#snippet leading()}
|
|
56
|
+
<a
|
|
57
|
+
href="#"
|
|
58
|
+
class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border text-secondary transition-colors hover:bg-surface-overlay"
|
|
59
|
+
aria-label="Go back"
|
|
60
|
+
>
|
|
61
|
+
<ArrowLeft class="h-4 w-4" />
|
|
62
|
+
</a>
|
|
63
|
+
{/snippet}
|
|
64
|
+
{#snippet status()}
|
|
65
|
+
<Badge variant="error">Suspended</Badge>
|
|
66
|
+
{/snippet}
|
|
67
|
+
{#snippet actions()}
|
|
68
|
+
<Button size="sm" variant="secondary">
|
|
69
|
+
<Download class="mr-1.5 h-3.5 w-3.5" />
|
|
70
|
+
Export
|
|
71
|
+
</Button>
|
|
72
|
+
<Button size="sm" variant="destructive">Suspend</Button>
|
|
73
|
+
{/snippet}
|
|
74
|
+
</PageHeader>
|
|
75
|
+
|
|
76
|
+
<!-- Minimal: just title -->
|
|
77
|
+
{:else if variant === 'minimal'}
|
|
78
|
+
<PageHeader title={props.title ?? 'Overview'} size={props.size} />
|
|
79
|
+
|
|
80
|
+
<!-- Detail: back + breadcrumbs + status + meta + actions -->
|
|
81
|
+
{:else if variant === 'detail'}
|
|
82
|
+
<PageHeader
|
|
83
|
+
title={props.title ?? 'Invoice #1042'}
|
|
84
|
+
description={props.description ?? 'Created 28 Jul 2026 — due in 7 days.'}
|
|
85
|
+
size={props.size ?? 'lg'}
|
|
86
|
+
breadcrumbs={[
|
|
87
|
+
{ id: 'billing', label: 'Billing', href: '#' },
|
|
88
|
+
{ id: 'invoices', label: 'Invoices', href: '#' },
|
|
89
|
+
{ id: 'invoice', label: '#1042' }
|
|
90
|
+
]}
|
|
91
|
+
>
|
|
92
|
+
{#snippet leading()}
|
|
93
|
+
<a
|
|
94
|
+
href="#"
|
|
95
|
+
class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border text-secondary transition-colors hover:bg-surface-overlay"
|
|
96
|
+
aria-label="Go back"
|
|
97
|
+
>
|
|
98
|
+
<ArrowLeft class="h-4 w-4" />
|
|
99
|
+
</a>
|
|
100
|
+
{/snippet}
|
|
101
|
+
{#snippet status()}
|
|
102
|
+
<Badge variant="warning">Pending</Badge>
|
|
103
|
+
{/snippet}
|
|
104
|
+
{#snippet meta()}
|
|
105
|
+
<div class="flex flex-wrap gap-1.5">
|
|
106
|
+
<Badge variant="default">€ 1,280</Badge>
|
|
107
|
+
<span class="text-xs text-muted">Due 4 Aug 2026</span>
|
|
108
|
+
</div>
|
|
109
|
+
{/snippet}
|
|
110
|
+
{#snippet actions()}
|
|
111
|
+
<Button size="sm" variant="secondary">
|
|
112
|
+
<Download class="mr-1.5 h-3.5 w-3.5" />
|
|
113
|
+
Download PDF
|
|
114
|
+
</Button>
|
|
115
|
+
<Button size="sm">
|
|
116
|
+
<Plus class="mr-1.5 h-3.5 w-3.5" />
|
|
117
|
+
Send reminder
|
|
118
|
+
</Button>
|
|
119
|
+
{/snippet}
|
|
120
|
+
</PageHeader>
|
|
121
|
+
|
|
122
|
+
<!-- Loading skeleton -->
|
|
123
|
+
{:else if variant === 'loading'}
|
|
124
|
+
<PageHeader
|
|
125
|
+
title={props.title ?? 'Project settings'}
|
|
126
|
+
description="Loading…"
|
|
127
|
+
loading
|
|
128
|
+
size={props.size}
|
|
129
|
+
>
|
|
130
|
+
{#snippet actions()}
|
|
131
|
+
<Button size="sm">Save</Button>
|
|
132
|
+
{/snippet}
|
|
133
|
+
</PageHeader>
|
|
134
|
+
|
|
135
|
+
<!-- With tabs -->
|
|
136
|
+
{:else if variant === 'tabs'}
|
|
137
|
+
<PageHeader
|
|
138
|
+
title={props.title ?? 'Settings'}
|
|
139
|
+
description={props.description ?? 'Workspace configuration.'}
|
|
140
|
+
size={props.size}
|
|
141
|
+
>
|
|
142
|
+
{#snippet status()}
|
|
143
|
+
<Badge variant="primary">Pro</Badge>
|
|
144
|
+
{/snippet}
|
|
145
|
+
{#snippet actions()}
|
|
146
|
+
<Button size="sm">
|
|
147
|
+
<Plus class="mr-1.5 h-3.5 w-3.5" />
|
|
148
|
+
Invite member
|
|
149
|
+
</Button>
|
|
150
|
+
{/snippet}
|
|
151
|
+
{#snippet tabs()}
|
|
152
|
+
<nav class="flex gap-1 border-b border-border">
|
|
153
|
+
{#each ['General', 'Members', 'Billing', 'Security'] as tab}
|
|
154
|
+
<button
|
|
155
|
+
type="button"
|
|
156
|
+
onclick={() => (activeTab = tab)}
|
|
157
|
+
class={[
|
|
158
|
+
'px-3 pb-2.5 pt-1 text-sm font-medium transition-colors',
|
|
159
|
+
activeTab === tab
|
|
160
|
+
? 'border-b-2 border-brand-500 text-brand-600'
|
|
161
|
+
: 'text-muted hover:text-primary'
|
|
162
|
+
]}
|
|
163
|
+
>{tab}</button>
|
|
164
|
+
{/each}
|
|
165
|
+
</nav>
|
|
166
|
+
{/snippet}
|
|
167
|
+
</PageHeader>
|
|
168
|
+
|
|
169
|
+
<!-- Sticky (scrollable preview) -->
|
|
170
|
+
{:else if variant === 'sticky'}
|
|
171
|
+
<PageHeader
|
|
172
|
+
title={props.title ?? 'Dashboard'}
|
|
173
|
+
description="This header sticks to the top as you scroll."
|
|
174
|
+
sticky
|
|
175
|
+
size={props.size}
|
|
176
|
+
>
|
|
177
|
+
{#snippet actions()}
|
|
178
|
+
<Button size="sm">Action</Button>
|
|
179
|
+
{/snippet}
|
|
180
|
+
</PageHeader>
|
|
181
|
+
<div class="space-y-3 p-6 pt-4 min-h-screen">
|
|
182
|
+
{#each Array.from({ length: 24 }) as _, i}
|
|
183
|
+
<div class="h-8 rounded-lg bg-surface-overlay text-xs flex items-center px-3 text-muted">
|
|
184
|
+
Content row {i + 1}
|
|
185
|
+
</div>
|
|
186
|
+
{/each}
|
|
187
|
+
</div>
|
|
188
|
+
{/if}
|
|
30
189
|
</div>
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
type $$ComponentProps = {
|
|
2
2
|
title?: string;
|
|
3
3
|
description?: string;
|
|
4
|
+
size?: 'sm' | 'md' | 'lg';
|
|
5
|
+
sticky?: boolean;
|
|
6
|
+
loading?: boolean;
|
|
7
|
+
variant?: 'default' | 'with-back' | 'minimal' | 'detail' | 'loading' | 'tabs' | 'sticky';
|
|
4
8
|
};
|
|
5
9
|
declare const PageHeaderStory: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
10
|
type PageHeaderStory = ReturnType<typeof PageHeaderStory>;
|
|
@@ -1865,13 +1865,13 @@
|
|
|
1865
1865
|
onselect={(id) => onRowMenuAction(id, rid)}
|
|
1866
1866
|
>
|
|
1867
1867
|
{#snippet trigger()}
|
|
1868
|
-
<button
|
|
1869
|
-
|
|
1868
|
+
<!-- Content only: DropdownMenu already renders the outer <button> -->
|
|
1869
|
+
<span
|
|
1870
1870
|
class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-secondary hover:bg-surface-overlay hover:text-primary"
|
|
1871
|
-
aria-
|
|
1871
|
+
aria-hidden="true"
|
|
1872
1872
|
>
|
|
1873
1873
|
<MoreHorizontal class="h-4 w-4" strokeWidth={2} />
|
|
1874
|
-
</
|
|
1874
|
+
</span>
|
|
1875
1875
|
{/snippet}
|
|
1876
1876
|
</DropdownMenu>
|
|
1877
1877
|
</td>
|