@makolabs/ripple 0.0.1-dev.80 → 0.0.1-dev.82
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.
|
@@ -5,26 +5,64 @@
|
|
|
5
5
|
|
|
6
6
|
let {
|
|
7
7
|
title,
|
|
8
|
+
subtitle,
|
|
8
9
|
breadcrumbs = [],
|
|
9
10
|
children,
|
|
10
11
|
class: className = '',
|
|
11
|
-
titleclass: titleClassName = ''
|
|
12
|
+
titleclass: titleClassName = '',
|
|
13
|
+
layout = 'vertical'
|
|
12
14
|
}: PageHeaderProps = $props();
|
|
13
15
|
|
|
14
16
|
const defaultTitleClasses =
|
|
15
|
-
'font-bold text-default-900 sm:tracking-tight sm:truncate text-2xl/7 sm:text-3xl
|
|
16
|
-
|
|
17
|
+
'font-bold text-default-900 sm:tracking-tight sm:truncate text-2xl/7 sm:text-3xl';
|
|
18
|
+
|
|
17
19
|
const hasBreadcrumbs = $derived(breadcrumbs && breadcrumbs.length > 0);
|
|
18
20
|
const titleClasses = $derived(cn(defaultTitleClasses, titleClassName));
|
|
19
21
|
</script>
|
|
20
22
|
|
|
21
|
-
<div class=
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
<div class="pb-4">
|
|
24
|
+
{#if layout === 'horizontal'}
|
|
25
|
+
<div
|
|
26
|
+
class="flex flex-col space-y-3 md:flex-row md:items-start md:justify-between md:space-y-0 {className}"
|
|
27
|
+
>
|
|
28
|
+
<!-- Title and subtitle grouped together as one unit -->
|
|
29
|
+
<div class="min-w-0 flex-1 gap-4">
|
|
30
|
+
{#if hasBreadcrumbs}
|
|
31
|
+
<Breadcrumbs items={breadcrumbs} />
|
|
32
|
+
{/if}
|
|
33
|
+
<h2 class={titleClasses}>{title}</h2>
|
|
34
|
+
{#if subtitle}
|
|
35
|
+
<p class="text-default-500 mt-2 text-sm">{subtitle}</p>
|
|
36
|
+
{/if}
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<!-- Actions area - responsive positioning -->
|
|
40
|
+
{#if children}
|
|
41
|
+
<div class="flex-shrink-0 md:ml-6">
|
|
42
|
+
{@render children()}
|
|
43
|
+
</div>
|
|
44
|
+
{/if}
|
|
45
|
+
</div>
|
|
46
|
+
{:else}
|
|
47
|
+
<!-- Vertical layout - title/subtitle unit first, children unit below -->
|
|
48
|
+
<div class={className}>
|
|
49
|
+
<!-- Title and subtitle grouped together -->
|
|
50
|
+
<div class="min-w-0 gap-4">
|
|
51
|
+
{#if hasBreadcrumbs}
|
|
52
|
+
<Breadcrumbs items={breadcrumbs} />
|
|
53
|
+
{/if}
|
|
54
|
+
<h2 class={titleClasses}>{title}</h2>
|
|
55
|
+
{#if subtitle}
|
|
56
|
+
<p class="text-default-500 mt-2 text-sm">{subtitle}</p>
|
|
57
|
+
{/if}
|
|
58
|
+
</div>
|
|
28
59
|
|
|
29
|
-
|
|
60
|
+
<!-- Children as separate unit below -->
|
|
61
|
+
{#if children}
|
|
62
|
+
<div class="mt-4">
|
|
63
|
+
{@render children()}
|
|
64
|
+
</div>
|
|
65
|
+
{/if}
|
|
66
|
+
</div>
|
|
67
|
+
{/if}
|
|
30
68
|
</div>
|
package/dist/index.d.ts
CHANGED
|
@@ -261,10 +261,12 @@ export type BreadcrumbsProps = {
|
|
|
261
261
|
};
|
|
262
262
|
export type PageHeaderProps = {
|
|
263
263
|
title: string;
|
|
264
|
+
subtitle?: string;
|
|
264
265
|
breadcrumbs?: BreadcrumbItem[];
|
|
265
266
|
children?: Snippet;
|
|
266
267
|
class?: ClassValue;
|
|
267
268
|
titleclass?: ClassValue;
|
|
269
|
+
layout?: 'vertical' | 'horizontal';
|
|
268
270
|
};
|
|
269
271
|
export type TabItem = {
|
|
270
272
|
value: string;
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
{/if}
|
|
47
47
|
|
|
48
48
|
{#if segments}
|
|
49
|
-
<div class={cn(progressSlot(),
|
|
49
|
+
<div class={cn(progressSlot(), 'pt-2')}>
|
|
50
50
|
<Progress
|
|
51
51
|
value={0}
|
|
52
52
|
{segments}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
/>
|
|
58
58
|
</div>
|
|
59
59
|
{:else if percent !== undefined}
|
|
60
|
-
<div class={cn(progressSlot(),
|
|
60
|
+
<div class={cn(progressSlot(), 'pt-2')}>
|
|
61
61
|
<Progress value={percent} size={Size.SM} color={Color.SUCCESS} showLabel={false} />
|
|
62
62
|
</div>
|
|
63
63
|
{/if}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import type { MenuBar, NavigationItem, SidebarProps, ParentItem, LinkItem } from '../../index.js';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { isRouteActive } from '../../helper/nav.svelte.js';
|
|
6
|
+
import { goto } from '$app/navigation';
|
|
6
7
|
|
|
7
8
|
let { items = [], logo }: SidebarProps = $props();
|
|
8
9
|
let menubar: MenuBar = $state({
|
|
@@ -130,7 +131,7 @@
|
|
|
130
131
|
: ''} {menubar.collapsed ? 'justify-center' : ''}"
|
|
131
132
|
class:text-white={child.active}
|
|
132
133
|
class:text-gray-300={!child.active}
|
|
133
|
-
onclick={() => (
|
|
134
|
+
onclick={() => goto(child.href)}
|
|
134
135
|
title={menubar.collapsed ? child.label : ''}
|
|
135
136
|
>
|
|
136
137
|
{#if child.Icon}
|