Add D-prefixed Blazor wrappers for every daisyUI 5 component
Components/Daisy/ wraps all 69 components in daisyUI's llms.txt, grouped by daisyUI's categories (Actions, DataDisplay, Navigation, Feedback, DataInput, Layout, Mockup), with part components where daisyUI has repeating parts (DTab, DMenuItem, DTimelineItem, ...). - Each enum maps to whole literal class names in a switch, so Tailwind's scanner generates them. Nothing is concatenated. - Value-holding fields derive from DInputBase<TValue>, Blazor's InputBase, so @bind-Value and EditForm validation work. Invalid fields get the component's *-error class. - Open and active state lives in C# (@bind-IsOpen, @bind-Active) and is rendered with daisyUI's *-open modifiers. DDropdown adds an outside-click layer and Escape. No component uses JS interop. - The one exception is DCalendar, which wraps the Cally web component, vendored as wwwroot/vendor/cally.js (0.9.2, MIT). /styleguide (not linked) renders every component in all its colours, sizes and states, with a theme and hue picker that previews without saving. neo.css follows what the styleguide showed: - select keeps daisyUI's arrow; - skeleton-text isn't sunk; - the phone mockup and dock are raised; - active menu items and OTP digits are inset; - a joined accordion is raised as one block. The primary, secondary and accent colours are deeper, so they still read as text. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
thepraandClaude Opus 5.5 committed
1 parent
8e03d12a3e
commit
90e4b9200c
127 files changed
+6962
-17
No files matched your search
@@ -0,0 +1,236 @@
|
||||
@* Styleguide: every Feedback component (Components/Daisy/Feedback) with its main variants. *@
|
||||
<div class="grid gap-8 lg:grid-cols-2">
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DAlert</h3>
|
||||
<DAlert><Icon><i class="ion-md-information-circle text-xl"></i></Icon><ChildContent>Default alert</ChildContent></DAlert>
|
||||
@foreach (var (color, icon) in alertColors)
|
||||
{
|
||||
<DAlert Color="color"><Icon><i class="@icon text-xl"></i></Icon><ChildContent>@color alert</ChildContent></DAlert>
|
||||
}
|
||||
@foreach (var variant in new[] { DAlertVariant.Soft, DAlertVariant.Outline, DAlertVariant.Dash })
|
||||
{
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
<DAlert Variant="variant">@variant</DAlert>
|
||||
@foreach (var (color, _) in alertColors)
|
||||
{
|
||||
<DAlert Variant="variant" Color="color">@variant @color</DAlert>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
<DAlert Direction="DDirection.Vertical" Color="DAlertColor.Info">
|
||||
<Icon><i class="ion-md-information-circle text-xl"></i></Icon>
|
||||
<ChildContent>Vertical, with actions</ChildContent>
|
||||
<Actions><DButton Size="DSize.Sm">Deny</DButton><DButton Size="DSize.Sm" Color="DColor.Primary">Accept</DButton></Actions>
|
||||
</DAlert>
|
||||
@if (alertDismissed)
|
||||
{
|
||||
<DButton Size="DSize.Sm" class="self-start" OnClick="() => alertDismissed = false">Bring the alert back</DButton>
|
||||
}
|
||||
else
|
||||
{
|
||||
<DAlert Responsive="true">
|
||||
<Icon><i class="ion-md-notifications text-xl"></i></Icon>
|
||||
<ChildContent>
|
||||
<h4 class="font-bold">Responsive, with a heading</h4>
|
||||
<div class="text-xs">Vertical below sm, horizontal above. Dismiss me.</div>
|
||||
</ChildContent>
|
||||
<Actions><DButton Size="DSize.Sm" OnClick="() => alertDismissed = true">Dismiss</DButton></Actions>
|
||||
</DAlert>
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DLoading</h3>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
@foreach (var variant in Enum.GetValues<DLoadingVariant>())
|
||||
{
|
||||
<DLoading Variant="variant" Size="DSize.Lg" title="@variant.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl })
|
||||
{
|
||||
<DLoading Variant="DLoadingVariant.Dots" Size="size" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
@foreach (var color in colors)
|
||||
{
|
||||
<DLoading Variant="DLoadingVariant.Ring" Color="color" title="@color.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<DButton class="self-start" Disabled="true"><DLoading Size="DSize.Sm" /> Loading in a button</DButton>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DProgress</h3>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<DButton Size="DSize.Sm" OnClick="() => progress = Math.Max(0, progress - 10)">−10</DButton>
|
||||
<DButton Size="DSize.Sm" OnClick="() => progress = Math.Min(100, progress + 10)">+10</DButton>
|
||||
<span class="text-sm">@progress%</span>
|
||||
</div>
|
||||
<DProgress Value="progress" />
|
||||
@for (var i = 0; i < colors.Length; i++)
|
||||
{
|
||||
<DProgress Value="10 + i * 12" Color="colors[i]" title="@colors[i].ToString()" />
|
||||
}
|
||||
<p class="text-xs opacity-60">Indeterminate (Value null)</p>
|
||||
<DProgress Color="DColor.Primary" />
|
||||
<DProgress Value="0.25" Max="1" Color="DColor.Accent" class="w-56" />
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DRadialProgress</h3>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DRadialProgress Value="progress" Color="DColor.Primary" />
|
||||
@foreach (var value in new[] { 0, 20, 60, 80, 100 })
|
||||
{
|
||||
<DRadialProgress Value="value" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
@foreach (var color in colors)
|
||||
{
|
||||
<DRadialProgress Value="70" Color="color" Diameter="3.5rem" title="@color.ToString()" />
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<DRadialProgress Value="progress" Diameter="8rem" Thickness="2px" />
|
||||
<DRadialProgress Value="progress" Diameter="8rem" Thickness="1.5rem" Color="DColor.Secondary" />
|
||||
<DRadialProgress Value="progress" class="border-4 border-primary bg-primary text-primary-content" />
|
||||
<DRadialProgress Value="3" Max="4"><i class="ion-md-star text-2xl"></i></DRadialProgress>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DSkeleton</h3>
|
||||
<div class="flex w-64 flex-col gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<DSkeleton class="h-16 w-16 shrink-0 rounded-full" />
|
||||
<div class="flex flex-col gap-4">
|
||||
<DSkeleton class="h-4 w-20" />
|
||||
<DSkeleton class="h-4 w-28" />
|
||||
</div>
|
||||
</div>
|
||||
<DSkeleton class="h-32 w-full" />
|
||||
</div>
|
||||
<DSkeleton IsText="true">Loading data, please wait…</DSkeleton>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DToast</h3>
|
||||
<p class="text-xs opacity-60">Previews pinned with class="absolute" inside a box</p>
|
||||
<div class="relative h-48 overflow-hidden rounded-box border border-base-300">
|
||||
<DToast Horizontal="DToastHorizontal.Start" Vertical="DToastVertical.Top" class="absolute">
|
||||
<DAlert Color="DAlertColor.Info">Top start</DAlert>
|
||||
</DToast>
|
||||
<DToast Horizontal="DToastHorizontal.Center" Vertical="DToastVertical.Middle" class="absolute">
|
||||
<DAlert Color="DAlertColor.Success">Middle center</DAlert>
|
||||
</DToast>
|
||||
<DToast class="absolute">
|
||||
<DAlert Color="DAlertColor.Warning">Bottom end (default)</DAlert>
|
||||
<DAlert Color="DAlertColor.Error">Stacked</DAlert>
|
||||
</DToast>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<div class="join">
|
||||
@foreach (var horizontal in Enum.GetValues<DToastHorizontal>())
|
||||
{
|
||||
<DButton Size="DSize.Sm" class="join-item" Active="toastHorizontal == horizontal" OnClick="() => toastHorizontal = horizontal">@horizontal</DButton>
|
||||
}
|
||||
</div>
|
||||
<div class="join">
|
||||
@foreach (var vertical in Enum.GetValues<DToastVertical>())
|
||||
{
|
||||
<DButton Size="DSize.Sm" class="join-item" Active="toastVertical == vertical" OnClick="() => toastVertical = vertical">@vertical</DButton>
|
||||
}
|
||||
</div>
|
||||
<DButton Size="DSize.Sm" Color="DColor.Primary" OnClick="ShowToast">Show a toast</DButton>
|
||||
</div>
|
||||
<DToast Horizontal="toastHorizontal" Vertical="toastVertical" class="z-50">
|
||||
@foreach (var toast in toasts)
|
||||
{
|
||||
<DAlert @key="toast.Id" Color="toast.Color">
|
||||
<ChildContent>Toast #@toast.Id, gone in 3 s</ChildContent>
|
||||
<Actions><DButton Size="DSize.Xs" Variant="DButtonVariant.Ghost" aria-label="Close" OnClick="() => toasts.Remove(toast)"><i class="ion-md-close"></i></DButton></Actions>
|
||||
</DAlert>
|
||||
}
|
||||
</DToast>
|
||||
</section>
|
||||
|
||||
<section class="flex flex-col gap-3">
|
||||
<h3 class="text-lg font-bold">DTooltip</h3>
|
||||
<div class="flex flex-wrap items-center gap-4 py-8">
|
||||
@foreach (var placement in Enum.GetValues<DTooltipPlacement>())
|
||||
{
|
||||
<DTooltip Tip="@placement.ToString()" Placement="placement">
|
||||
<DButton Size="DSize.Sm">@placement</DButton>
|
||||
</DTooltip>
|
||||
}
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-4 pt-8">
|
||||
@foreach (var color in colors)
|
||||
{
|
||||
<DTooltip Tip="@color.ToString()" Color="color" IsOpen="tooltipsOpen">
|
||||
<DButton Size="DSize.Sm" Color="color">@color</DButton>
|
||||
</DTooltip>
|
||||
}
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" class="checkbox checkbox-sm" @bind="tooltipsOpen" /> Force the colour tooltips open (IsOpen)
|
||||
</label>
|
||||
<div class="flex flex-wrap items-center gap-4 pt-10">
|
||||
@foreach (var align in Enum.GetValues<DTooltipAlign>())
|
||||
{
|
||||
<DTooltip Tip="@($"Aligned {align}, a longer tip")" Align="align" IsOpen="true">
|
||||
<DButton Size="DSize.Sm" class="w-28">@align</DButton>
|
||||
</DTooltip>
|
||||
}
|
||||
</div>
|
||||
<div class="pt-16">
|
||||
<DTooltip Color="DColor.Accent">
|
||||
<TipContent>
|
||||
<div class="flex items-center gap-2"><i class="ion-md-heart text-error"></i> <b>TipContent</b> markup</div>
|
||||
</TipContent>
|
||||
<ChildContent><DButton Size="DSize.Sm">Hover for markup</DButton></ChildContent>
|
||||
</DTooltip>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
static readonly DColor[] colors =
|
||||
{
|
||||
DColor.Neutral, DColor.Primary, DColor.Secondary, DColor.Accent, DColor.Info, DColor.Success, DColor.Warning, DColor.Error
|
||||
};
|
||||
|
||||
static readonly (DAlertColor Color, string Icon)[] alertColors =
|
||||
{
|
||||
(DAlertColor.Info, "ion-md-information-circle"),
|
||||
(DAlertColor.Success, "ion-md-checkmark-circle"),
|
||||
(DAlertColor.Warning, "ion-md-warning"),
|
||||
(DAlertColor.Error, "ion-md-close-circle")
|
||||
};
|
||||
|
||||
static readonly DAlertColor[] toastColors = { DAlertColor.Info, DAlertColor.Success, DAlertColor.Warning, DAlertColor.Error };
|
||||
|
||||
record Toast(int Id, DAlertColor Color);
|
||||
|
||||
readonly List<Toast> toasts = new();
|
||||
DToastHorizontal toastHorizontal;
|
||||
DToastVertical toastVertical;
|
||||
int toastCount;
|
||||
|
||||
bool alertDismissed;
|
||||
int progress = 40;
|
||||
bool tooltipsOpen;
|
||||
|
||||
// Blazor renders once the handler yields (toast shown) and again when it completes (toast gone).
|
||||
async Task ShowToast()
|
||||
{
|
||||
var toast = new Toast(++toastCount, toastColors[toastCount % toastColors.Length]);
|
||||
toasts.Add(toast);
|
||||
await Task.Delay(3000);
|
||||
toasts.Remove(toast);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user