@makolabs/ripple 0.0.1-dev.75 → 0.0.1-dev.76
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
|
});
|