thepra/decePubClient
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity
Files
3ad4f55b119c33aab18889e4e6746b68a8e5a5fc
decePubClient/Components/Styleguide/LayoutSection.razor
T
thepraandClaude Opus 5.5 90e4b9200c 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
2026-10-03 12:01:42 +02:00

223 lines
9.4 KiB
Plaintext
Raw Blame History

@* Styleguide: the Layout components (Divider, Drawer, Footer, Hero, Indicator, Join, Mask, Stack). *@
<div class="grid gap-8 lg:grid-cols-2">
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DDivider</h3>
<div class="flex flex-col">
<div class="rounded-box bg-base-200 p-3">Above</div>
<DDivider>OR</DDivider>
<div class="rounded-box bg-base-200 p-3">Below</div>
<DDivider />
@foreach (var color in Enum.GetValues<DColor>().Skip(1))
{
<DDivider Color="color">@color</DDivider>
}
<DDivider Placement="DDividerPlacement.Start">Start</DDivider>
<DDivider Placement="DDividerPlacement.End" Direction="DDividerDirection.Vertical">End (vertical)</DDivider>
</div>
<div class="flex h-24">
<div class="grid grow place-items-center rounded-box bg-base-200">Left</div>
<DDivider Direction="DDividerDirection.Horizontal" Color="DColor.Primary">OR</DDivider>
<div class="grid grow place-items-center rounded-box bg-base-200">Right</div>
</div>
</section>
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DDrawer</h3>
<div class="flex flex-wrap items-center gap-2">
<DButton OnClick="() => drawerOpen = true">Open (@(drawerOpen ? "open" : "closed"))</DButton>
<label class="flex items-center gap-2 text-sm"><input type="checkbox" class="toggle toggle-sm" @bind="drawerEnd" /> End</label>
</div>
<p class="text-sm opacity-60">The box contains the fixed side (transform-gpu); the overlay, Escape and the side's buttons close it.</p>
<div class="h-72 transform-gpu overflow-hidden rounded-box bg-base-200">
<DDrawer @bind-IsOpen="drawerOpen" End="drawerEnd" ToggleId="styleguide-drawer" class="h-full"
ContentClass="flex flex-col items-center justify-center gap-2">
<ChildContent>
<p>Page content</p>
<label for="styleguide-drawer" class="btn btn-primary drawer-button">Open with a label</label>
</ChildContent>
<Side>
<ul class="menu min-h-full w-56 bg-base-100 p-4">
<li><button type="button" @onclick="() => drawerOpen = false"><i class="ion-md-home"></i> Home</button></li>
<li><button type="button" @onclick="() => drawerOpen = false"><i class="ion-md-settings"></i> Settings</button></li>
</ul>
</Side>
</DDrawer>
</div>
<p class="text-sm opacity-60">OpenFrom="Lg": always open beside the content from lg up.</p>
<div class="h-48 transform-gpu overflow-hidden rounded-box bg-base-200">
<DDrawer @bind-IsOpen="drawerLgOpen" OpenFrom="DDrawerOpenFrom.Lg" class="h-full" ContentClass="p-4">
<ChildContent>
<DButton Size="DSize.Sm" class="lg:hidden" OnClick="() => drawerLgOpen = true">Open</DButton>
<p>Content</p>
</ChildContent>
<Side>
<ul class="menu min-h-full w-40 bg-base-100 p-2">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</Side>
</DDrawer>
</div>
</section>
<section class="flex flex-col gap-3 lg:col-span-2">
<h3 class="text-lg font-bold">DFooter</h3>
<DFooter Direction="DFooterDirection.HorizontalFromSm" class="rounded-box bg-base-200 p-10">
<aside>
<i class="ion-md-code-working text-4xl"></i>
<p>decePub<br />Responsive: a row from sm up</p>
</aside>
<DFooterNav>
<Heading>Services</Heading>
<ChildContent>
<a class="link link-hover">Branding</a>
<a class="link link-hover">Design</a>
</ChildContent>
</DFooterNav>
<DFooterNav>
<Heading>Company</Heading>
<ChildContent>
<a class="link link-hover">About us</a>
<a class="link link-hover">Contact</a>
</ChildContent>
</DFooterNav>
</DFooter>
<DFooter Center="true" Direction="DFooterDirection.Horizontal" class="rounded-box bg-base-200 p-6">
<DFooterNav class="grid-flow-col gap-4">
<a class="link link-hover">About</a>
<a class="link link-hover">Contact</a>
<a class="link link-hover">Jobs</a>
</DFooterNav>
<aside><p>Centered, horizontal</p></aside>
</DFooter>
</section>
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DHero</h3>
<DHero class="rounded-box bg-base-200" ContentClass="text-center">
<div class="max-w-md">
<h1 class="text-3xl font-bold">Hello there</h1>
<p class="py-4">A centered hero.</p>
<DButton Color="DColor.Primary">Get started</DButton>
</div>
</DHero>
<DHero BackgroundImage="https://picsum.photos/seed/hero/800/400" Overlay="true" class="min-h-64 rounded-box overflow-hidden"
ContentClass="text-neutral-content text-center">
<div class="max-w-md">
<h1 class="text-3xl font-bold">With an overlay</h1>
<p class="py-4">Background image and hero-overlay.</p>
</div>
</DHero>
<DHero class="rounded-box bg-base-200" ContentClass="flex-col lg:flex-row">
<img src="https://picsum.photos/seed/figure/200/260" class="max-w-32 rounded-lg shadow-2xl" alt="" />
<div>
<h1 class="text-2xl font-bold">With a figure</h1>
<p class="py-2">Column on small screens, row from lg up.</p>
</div>
</DHero>
</section>
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DIndicator</h3>
<div class="flex flex-wrap items-center gap-8 p-4">
<DIndicator>
<DIndicatorItem class="badge badge-secondary">new</DIndicatorItem>
<div class="grid h-24 w-24 place-items-center rounded-box bg-base-300">content</div>
</DIndicator>
<DIndicator>
<DIndicatorItem class="status status-success"></DIndicatorItem>
<DButton>Inbox</DButton>
</DIndicator>
<DIndicator>
<DIndicatorItem Vertical="DIndicatorVertical.Bottom" class="badge badge-primary">99+</DIndicatorItem>
<DButton Shape="DButtonShape.Circle"><i class="ion-md-notifications"></i></DButton>
</DIndicator>
</div>
<DIndicator class="m-4">
<DIndicatorItem Horizontal="DIndicatorHorizontal.Start" class="badge">↖︎</DIndicatorItem>
<DIndicatorItem Horizontal="DIndicatorHorizontal.Center" class="badge">↑</DIndicatorItem>
<DIndicatorItem class="badge">↗︎</DIndicatorItem>
<DIndicatorItem Horizontal="DIndicatorHorizontal.Start" Vertical="DIndicatorVertical.Middle" class="badge">←</DIndicatorItem>
<DIndicatorItem Horizontal="DIndicatorHorizontal.Center" Vertical="DIndicatorVertical.Middle" class="badge">●</DIndicatorItem>
<DIndicatorItem Vertical="DIndicatorVertical.Middle" class="badge">→</DIndicatorItem>
<DIndicatorItem Horizontal="DIndicatorHorizontal.Start" Vertical="DIndicatorVertical.Bottom" class="badge">↙︎</DIndicatorItem>
<DIndicatorItem Horizontal="DIndicatorHorizontal.Center" Vertical="DIndicatorVertical.Bottom" class="badge">↓</DIndicatorItem>
<DIndicatorItem Vertical="DIndicatorVertical.Bottom" class="badge">↘︎</DIndicatorItem>
<div class="grid h-32 w-60 place-items-center rounded-box bg-base-300">all placements</div>
</DIndicator>
</section>
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DJoin</h3>
<DJoin>
<DButton class="join-item">One</DButton>
<DButton class="join-item" Active="true">Two</DButton>
<DButton class="join-item">Three</DButton>
</DJoin>
<DJoin Direction="DDirection.Vertical" class="w-fit">
<DButton class="join-item">Top</DButton>
<DButton class="join-item">Middle</DButton>
<DButton class="join-item">Bottom</DButton>
</DJoin>
<DJoin Direction="DDirection.Vertical" class="lg:join-horizontal w-fit">
<DButton class="join-item">Vertical</DButton>
<DButton class="join-item">then horizontal</DButton>
<DButton class="join-item">from lg</DButton>
</DJoin>
<DJoin>
<input class="input join-item" placeholder="Email" />
<select class="select join-item w-28">
<option>Filter</option>
<option>Sci-fi</option>
</select>
<DButton class="join-item" Color="DColor.Primary"><i class="ion-md-search"></i></DButton>
</DJoin>
</section>
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DMask</h3>
<div class="flex flex-wrap gap-3">
@foreach (var shape in Enum.GetValues<DMaskShape>().Skip(1))
{
<div class="flex flex-col items-center gap-1 text-xs">
<DMask Shape="shape" Src="https://picsum.photos/seed/mask/160/160" alt="@shape" class="h-16 w-16" />
@shape
</div>
}
</div>
<div class="flex items-center gap-1">
<DMask Shape="DMaskShape.Star2" Half="DMaskHalf.First" class="h-10 w-5 bg-warning" />
<DMask Shape="DMaskShape.Star2" Half="DMaskHalf.Second" class="h-10 w-5 bg-warning" />
<DMask Shape="DMaskShape.Heart" class="ml-4 grid h-16 w-16 place-items-center bg-error text-error-content">div</DMask>
</div>
</section>
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DStack</h3>
<div class="flex flex-wrap gap-10 p-4">
@foreach (var placement in Enum.GetValues<DStackPlacement>())
{
<div class="flex flex-col items-center gap-3 text-sm">
<DStack Placement="placement" class="h-20 w-28">
<div class="grid place-content-center rounded-box bg-primary text-primary-content">1</div>
<div class="grid place-content-center rounded-box bg-accent text-accent-content">2</div>
<div class="grid place-content-center rounded-box bg-secondary text-secondary-content">3</div>
</DStack>
@placement
</div>
}
<DStack class="w-32">
<img src="https://picsum.photos/seed/stack1/200/140" class="rounded-box" alt="" />
<img src="https://picsum.photos/seed/stack2/200/140" class="rounded-box" alt="" />
<img src="https://picsum.photos/seed/stack3/200/140" class="rounded-box" alt="" />
</DStack>
</div>
</section>
</div>
@code {
bool drawerOpen;
bool drawerEnd;
bool drawerLgOpen;
}
Reference in new issue View Git Blame Copy Permalink