61 lines
1.7 KiB
Plaintext
61 lines
1.7 KiB
Plaintext
component MetricGrid {
|
|
props {
|
|
items = []
|
|
columns = 4
|
|
tabletColumns = 2
|
|
mobileColumns = 1
|
|
gap = "md"
|
|
equalHeight = true
|
|
dividers = false
|
|
size = "default"
|
|
color = "primary"
|
|
variant = "default"
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<div
|
|
data-ui-component="MetricGrid"
|
|
class='grid w-full grid-cols-1 {class}'
|
|
class:grid-cols-2='mobileColumns === 2'
|
|
class:sm:grid-cols-2='tabletColumns === 2'
|
|
class:sm:grid-cols-3='tabletColumns === 3'
|
|
class:lg:grid-cols-2='columns === 2'
|
|
class:lg:grid-cols-3='columns === 3'
|
|
class:lg:grid-cols-4='columns === 4'
|
|
class:lg:grid-cols-5='columns === 5'
|
|
class:lg:grid-cols-6='columns === 6'
|
|
class:gap-3='gap === "sm"'
|
|
class:gap-5='gap === "md"'
|
|
class:gap-8='gap === "lg"'
|
|
class:divide-y='dividers'
|
|
class:sm:divide-y-0='dividers'
|
|
class:sm:divide-x='dividers'
|
|
class:divide-[var(--wire-color-border)]='dividers'
|
|
>
|
|
{#each items as item}
|
|
<MetricCard
|
|
label='{item.label || item.title}'
|
|
value='{item.value}'
|
|
description='{item.description || ""}'
|
|
icon='{item.icon || ""}'
|
|
prefix='{item.prefix || ""}'
|
|
suffix='{item.suffix || ""}'
|
|
trend='{item.trend || ""}'
|
|
trendLabel='{item.trendLabel || ""}'
|
|
trendDirection='{item.trendDirection || "neutral"}'
|
|
href='{item.href || ""}'
|
|
actionLabel='{item.actionLabel || ""}'
|
|
size='{item.size || size}'
|
|
color='{item.color || color}'
|
|
variant='{dividers ? "minimal" : (item.variant || variant)}'
|
|
align='{item.align || "left"}'
|
|
class="h-full"
|
|
/>
|
|
{:empty}
|
|
<slot></slot>
|
|
{/each}
|
|
</div>
|
|
}
|
|
}
|