WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pre Release New Changes

Browse Source
This commit is contained in:
Clintchiz
2026-07-31 16:30:13 +05:30
parent 358a520bc5
commit 3e565e8d03
189 changed files with 36727 additions and 17249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/FeatureGrid.wrn
+203 -30
View File
@@ -1,7 +1,6 @@
component FeatureGrid {
props {
color = "primary"
size = "default"
items = []
columns = 3
tabletColumns = 2
mobileColumns = 1
@@ -10,46 +9,220 @@ component FeatureGrid {
equalHeight = true
align = "stretch"
maxWidth = "full"
variant = "default"
label = "Features"
class = ""
}
view {
<div
<section
{...attrs}
data-ui-component="FeatureGrid"
data-columns='{columns}'
data-tablet-columns='{tabletColumns}'
data-mobile-columns='{mobileColumns}'
class='grid w-full {class}'
class:wire-feature-grid-autofit='minItemWidth !== ""'
class:grid-cols-1='mobileColumns === 1'
class:grid-cols-2='mobileColumns === 2'
class:sm:grid-cols-1='tabletColumns === 1'
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:gap-10='gap === "xl"'
class:items-stretch='equalHeight || align === "stretch"'
class:items-start='align === "start"'
class:items-center='align === "center"'
class:max-w-5xl='maxWidth === "lg"'
class:max-w-7xl='maxWidth === "xl"'
class:max-w-none='maxWidth === "full"'
style='--wire-feature-grid-min: {minItemWidth || "16rem"};'
data-gap='{gap}'
data-autofit='{minItemWidth !== "" ? "true" : "false"}'
data-equal-height='{equalHeight ? "true" : "false"}'
data-align='{align}'
data-max-width='{maxWidth}'
data-variant='{variant}'
class='wire-feature-grid {class}'
aria-label='{label}'
style='--wire-feature-grid-columns: {columns}; --wire-feature-grid-tablet-columns: {tabletColumns}; --wire-feature-grid-mobile-columns: {mobileColumns}; --wire-feature-grid-min-item-width: {minItemWidth || "17rem"};'
>
<slot></slot>
</div>
<div class="wire-feature-grid__inner">
<div class="wire-feature-grid__grid" role="list">
{#if items.length > 0}
{#each items as item, itemIndex}
<FeatureCard
icon='{item.icon || ""}'
iconStyle='{item.iconStyle || "soft"}'
iconSize='{item.iconSize || "default"}'
eyebrow='{item.eyebrow || ""}'
title='{item.title || item.label || "Feature"}'
description='{item.description || ""}'
image='{item.image || item.imageSrc || ""}'
imageAlt='{item.imageAlt || item.title || item.label || ""}'
imagePosition='{item.imagePosition || "top"}'
imageAspect='{item.imageAspect || "wide"}'
href='{item.href || ""}'
target='{item.target || ""}'
rel='{item.rel || ""}'
external='{item.external || false}'
actionLabel='{item.actionLabel || "Learn more"}'
actionIcon='{item.actionIcon || ""}'
badge='{item.badge || ""}'
badgeColor='{item.badgeColor || item.color || "primary"}'
size='{item.size || "default"}'
color='{item.color || "primary"}'
variant='{item.variant || "default"}'
hover='{item.hover || "lift"}'
align='{item.align || "left"}'
disabled='{item.disabled || false}'
stretchedLink='{item.stretchedLink !== false}'
showArrow='{item.showArrow !== false}'
class='{item.class || ""}'
/>
{/each}
{/if}
<slot></slot>
</div>
</div>
</section>
}
style {
.wire-feature-grid-autofit {
grid-template-columns: repeat(auto-fit, minmax(var(--wire-feature-grid-min), 1fr));
.wire-feature-grid {
--feature-grid-gap: 1.25rem;
position: relative;
width: 100%;
min-width: 0;
color: var(--wire-color-text);
}
.wire-feature-grid[data-gap="none"] {
--feature-grid-gap: 0;
}
.wire-feature-grid[data-gap="xs"] {
--feature-grid-gap: 0.5rem;
}
.wire-feature-grid[data-gap="sm"] {
--feature-grid-gap: 0.75rem;
}
.wire-feature-grid[data-gap="md"] {
--feature-grid-gap: 1.25rem;
}
.wire-feature-grid[data-gap="lg"] {
--feature-grid-gap: 1.75rem;
}
.wire-feature-grid[data-gap="xl"] {
--feature-grid-gap: 2.25rem;
}
.wire-feature-grid__inner {
width: 100%;
margin-inline: auto;
}
.wire-feature-grid[data-max-width="compact"] .wire-feature-grid__inner {
max-width: 64rem;
}
.wire-feature-grid[data-max-width="lg"] .wire-feature-grid__inner {
max-width: 72rem;
}
.wire-feature-grid[data-max-width="xl"] .wire-feature-grid__inner {
max-width: 80rem;
}
.wire-feature-grid[data-max-width="wide"] .wire-feature-grid__inner {
max-width: 90rem;
}
.wire-feature-grid[data-max-width="2xl"] .wire-feature-grid__inner {
max-width: 96rem;
}
.wire-feature-grid[data-max-width="full"] .wire-feature-grid__inner {
max-width: none;
}
.wire-feature-grid__grid {
display: grid;
grid-template-columns: repeat(
var(--wire-feature-grid-mobile-columns),
minmax(0, 1fr)
);
align-items: stretch;
gap: var(--feature-grid-gap);
width: 100%;
min-width: 0;
}
.wire-feature-grid[data-align="start"] .wire-feature-grid__grid {
align-items: start;
}
.wire-feature-grid[data-align="center"] .wire-feature-grid__grid {
align-items: center;
}
.wire-feature-grid[data-align="end"] .wire-feature-grid__grid {
align-items: end;
}
.wire-feature-grid__grid > * {
min-width: 0;
max-width: 100%;
}
.wire-feature-grid[data-equal-height="true"] .wire-feature-grid__grid > * {
height: 100%;
}
.wire-feature-grid[data-variant="panel"] .wire-feature-grid__inner {
padding: 1rem;
background: var(--wire-color-surface-raised);
border: 1px solid var(--wire-color-border);
border-radius: 1.5rem;
}
.wire-feature-grid[data-variant="soft"] .wire-feature-grid__inner {
padding: 1rem;
background: color-mix(in srgb, var(--wire-color-primary) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--wire-color-primary) 14%, var(--wire-color-border));
border-radius: 1.5rem;
}
@media (min-width: 40rem) {
.wire-feature-grid__grid {
grid-template-columns: repeat(
var(--wire-feature-grid-tablet-columns),
minmax(0, 1fr)
);
}
.wire-feature-grid[data-autofit="true"] .wire-feature-grid__grid {
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, var(--wire-feature-grid-min-item-width)), 1fr)
);
}
.wire-feature-grid[data-variant="panel"] .wire-feature-grid__inner,
.wire-feature-grid[data-variant="soft"] .wire-feature-grid__inner {
padding: 1.25rem;
}
}
@media (min-width: 64rem) {
.wire-feature-grid__grid {
grid-template-columns: repeat(
var(--wire-feature-grid-columns),
minmax(0, 1fr)
);
}
.wire-feature-grid[data-autofit="true"] .wire-feature-grid__grid {
grid-template-columns: repeat(
auto-fit,
minmax(min(100%, var(--wire-feature-grid-min-item-width)), 1fr)
);
}
.wire-feature-grid[data-variant="panel"] .wire-feature-grid__inner,
.wire-feature-grid[data-variant="soft"] .wire-feature-grid__inner {
padding: 1.5rem;
}
}
}
}