@makolabs/ripple 0.0.1-dev.75 → 0.0.1-dev.77
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.
|
@@ -14,31 +14,40 @@
|
|
|
14
14
|
class: className = ''
|
|
15
15
|
}: MetricCardProps = $props();
|
|
16
16
|
|
|
17
|
-
const {
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
const {
|
|
18
|
+
base,
|
|
19
|
+
title: titleSlot,
|
|
20
|
+
value: valueSlot,
|
|
21
|
+
detail: detailSlot,
|
|
22
|
+
progress: progressSlot
|
|
23
|
+
} = $derived(metricCard());
|
|
20
24
|
|
|
21
25
|
const baseClass = $derived(cn(base(), 'flex flex-col h-full', className));
|
|
22
26
|
</script>
|
|
23
27
|
|
|
24
28
|
<div class={baseClass}>
|
|
25
|
-
|
|
26
|
-
|
|
29
|
+
{#if title}
|
|
30
|
+
<div class={titleSlot()}>{title}</div>
|
|
31
|
+
{/if}
|
|
32
|
+
|
|
33
|
+
{#if value !== undefined}
|
|
34
|
+
<div class={valueSlot()}>{value}</div>
|
|
35
|
+
{/if}
|
|
27
36
|
|
|
28
37
|
{#if details.length > 0}
|
|
29
38
|
<div class={detailSlot()}>
|
|
30
|
-
{#each details as detail}
|
|
31
|
-
<div class="flex
|
|
32
|
-
<span class="text-
|
|
33
|
-
<span class="
|
|
39
|
+
{#each details as detail, index (detail.label + index)}
|
|
40
|
+
<div class="flex justify-between text-xs">
|
|
41
|
+
<span class="text-default-500">{detail.label}</span>
|
|
42
|
+
<span class="font-medium {detail.color || 'text-default-900'}">{detail.value}</span>
|
|
34
43
|
</div>
|
|
35
44
|
{/each}
|
|
36
45
|
</div>
|
|
37
46
|
{/if}
|
|
38
47
|
|
|
39
48
|
{#if segments}
|
|
40
|
-
<div class={progressSlot()}>
|
|
41
|
-
<Progress
|
|
49
|
+
<div class={cn(progressSlot(), details.length > 0 ? 'pt-2' : '')}>
|
|
50
|
+
<Progress
|
|
42
51
|
value={0}
|
|
43
52
|
{segments}
|
|
44
53
|
size={Size.SM}
|
|
@@ -48,13 +57,8 @@
|
|
|
48
57
|
/>
|
|
49
58
|
</div>
|
|
50
59
|
{:else if percent !== undefined}
|
|
51
|
-
<div class={progressSlot()}>
|
|
52
|
-
<Progress
|
|
53
|
-
value={percent}
|
|
54
|
-
size={Size.SM}
|
|
55
|
-
color={Color.SUCCESS}
|
|
56
|
-
showLabel={false}
|
|
57
|
-
/>
|
|
60
|
+
<div class={cn(progressSlot(), details.length > 0 ? 'pt-2' : '')}>
|
|
61
|
+
<Progress value={percent} size={Size.SM} color={Color.SUCCESS} showLabel={false} />
|
|
58
62
|
</div>
|
|
59
63
|
{/if}
|
|
60
|
-
</div>
|
|
64
|
+
</div>
|
|
@@ -2,9 +2,9 @@ import { tv } from 'tailwind-variants';
|
|
|
2
2
|
export const metricCard = tv({
|
|
3
3
|
slots: {
|
|
4
4
|
base: 'bg-white rounded-lg border border-default-200 p-6 shadow-sm hover:shadow-md transition-shadow',
|
|
5
|
-
title: 'text-sm
|
|
6
|
-
value: 'text-
|
|
7
|
-
detail: 'space-y-
|
|
5
|
+
title: 'text-sm text-default-500',
|
|
6
|
+
value: 'text-3xl font-bold text-default-900 mt-2',
|
|
7
|
+
detail: 'mt-3 space-y-1',
|
|
8
8
|
progress: 'mt-auto'
|
|
9
9
|
}
|
|
10
10
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { setContext } from 'svelte';
|
|
2
|
+
import { setContext, onMount } from 'svelte';
|
|
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';
|
|
@@ -10,6 +10,24 @@
|
|
|
10
10
|
});
|
|
11
11
|
setContext('menubar', menubar);
|
|
12
12
|
|
|
13
|
+
// Track screen size for responsive behavior
|
|
14
|
+
let isSmallScreen = $state(false);
|
|
15
|
+
|
|
16
|
+
function updateCollapseState() {
|
|
17
|
+
if (typeof window !== 'undefined') {
|
|
18
|
+
isSmallScreen = window.innerWidth < 1280; // xl breakpoint
|
|
19
|
+
if (isSmallScreen && !menubar.collapsed) {
|
|
20
|
+
menubar.collapsed = true;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
onMount(() => {
|
|
26
|
+
updateCollapseState();
|
|
27
|
+
window.addEventListener('resize', updateCollapseState);
|
|
28
|
+
return () => window.removeEventListener('resize', updateCollapseState);
|
|
29
|
+
});
|
|
30
|
+
|
|
13
31
|
function toggle() {
|
|
14
32
|
menubar.collapsed = !menubar.collapsed;
|
|
15
33
|
}
|
|
@@ -46,20 +64,16 @@
|
|
|
46
64
|
|
|
47
65
|
// Reactively compute the active states based on the current route
|
|
48
66
|
const navigationItems = $derived(items.map((item) => processNavigationItem(item)));
|
|
49
|
-
$inspect(navigationItems)
|
|
67
|
+
$inspect(navigationItems);
|
|
50
68
|
|
|
51
69
|
const sidebarClasses = $derived(
|
|
52
|
-
clsx(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
clsx('text-xl font-bold text-white', {
|
|
60
|
-
'xl:block': !menubar.collapsed,
|
|
61
|
-
hidden: menubar.collapsed
|
|
62
|
-
})
|
|
70
|
+
clsx(
|
|
71
|
+
`min-h-screen flex flex-col bg-gradient-to-b from-gray-900 to-default-900 h-full shrink-0`,
|
|
72
|
+
{
|
|
73
|
+
'w-16': menubar.collapsed,
|
|
74
|
+
'w-64': !menubar.collapsed
|
|
75
|
+
}
|
|
76
|
+
)
|
|
63
77
|
);
|
|
64
78
|
|
|
65
79
|
const logoWrapperClasses = $derived(
|
|
@@ -80,12 +94,16 @@
|
|
|
80
94
|
<img src={logo.src} alt={logo.title} class="size-8 shrink-0" />
|
|
81
95
|
{/if}
|
|
82
96
|
{#if logo.title && !menubar.collapsed}
|
|
83
|
-
<h1 class=
|
|
97
|
+
<h1 class="text-xl font-bold text-white">{logo.title}</h1>
|
|
84
98
|
{/if}
|
|
85
99
|
</div>
|
|
86
100
|
<button
|
|
87
101
|
onclick={toggle}
|
|
88
|
-
class="
|
|
102
|
+
class="cursor-pointer text-white {isSmallScreen
|
|
103
|
+
? 'block'
|
|
104
|
+
: menubar.collapsed
|
|
105
|
+
? 'block'
|
|
106
|
+
: 'hidden xl:block'}"
|
|
89
107
|
aria-label="Toggle Sidebar"
|
|
90
108
|
>
|
|
91
109
|
{@render ToggleIcon()}
|