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:
1 parent
8e03d12a3e
commit
90e4b9200c
127 files changed
+6962
-17
No files matched your search
@@ -0,0 +1,85 @@
|
||||
@inherits DInputBase<int>
|
||||
|
||||
@* daisyUI Rating: https://daisyui.com/components/rating/ . A radio per item, sharing a per-instance name; Value is the
|
||||
number of the checked item, 0 for none. With Half every item is two half radios and Value counts halves (3 = 1.5
|
||||
stars). Static renders the read-only <div> version, marking the current item with aria-current. *@
|
||||
<div @attributes="InputAttributes" class="@CssClassFull">
|
||||
@if (Static)
|
||||
{
|
||||
for (var i = 1; i <= Items; i++)
|
||||
{
|
||||
<div class="@ItemCss(i)" aria-label="@ItemText(i)" aria-current="@(i == CurrentValue ? "true" : null)"></div>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if (Clearable)
|
||||
{
|
||||
<input type="radio" name="@GroupName" class="rating-hidden" aria-label="@ClearText" checked="@(CurrentValue == 0)"
|
||||
disabled="@Disabled" @onchange="() => CurrentValue = 0" />
|
||||
}
|
||||
for (var i = 1; i <= Items; i++)
|
||||
{
|
||||
var item = i;
|
||||
<input type="radio" name="@GroupName" class="@ItemCss(item)" aria-label="@ItemText(item)" checked="@(item == CurrentValue)"
|
||||
disabled="@Disabled" @onchange="() => CurrentValue = item" aria-invalid="@(IsInvalid ? "true" : null)" />
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public int Count { get; set; } = 5;
|
||||
[Parameter] public DRatingMask Mask { get; set; }
|
||||
[Parameter] public bool Half { get; set; }
|
||||
[Parameter] public DSize Size { get; set; }
|
||||
/// <summary>Adds the hidden first radio (rating-hidden) that clears the rating to 0.</summary>
|
||||
[Parameter] public bool Clearable { get; set; }
|
||||
/// <summary>Read-only rating: <div> items instead of radios.</summary>
|
||||
[Parameter] public bool Static { get; set; }
|
||||
[Parameter] public bool Disabled { get; set; }
|
||||
/// <summary>Classes for every item, e.g. a color: bg-orange-400.</summary>
|
||||
[Parameter] public string ItemClass { get; set; }
|
||||
/// <summary>The unit in each item's aria-label ("2 star").</summary>
|
||||
[Parameter] public string UnitText { get; set; } = "star";
|
||||
[Parameter] public string ClearText { get; set; } = "clear";
|
||||
|
||||
readonly string uid = "d" + Guid.NewGuid().ToString("N")[..8];
|
||||
|
||||
string GroupName => string.IsNullOrEmpty(NameAttributeValue) ? uid : NameAttributeValue;
|
||||
|
||||
int Items => Half ? Count * 2 : Count;
|
||||
|
||||
string CssClassFull => Cx("rating", Half ? "rating-half" : null, SizeClass, CssClass);
|
||||
|
||||
string ItemCss(int item) => Cx("mask", MaskClass, Half ? (item % 2 == 1 ? "mask-half-1" : "mask-half-2") : null, ItemClass);
|
||||
|
||||
string ItemText(int item) =>
|
||||
$"{(Half ? item / 2.0 : item).ToString(System.Globalization.CultureInfo.InvariantCulture)} {UnitText}";
|
||||
|
||||
string MaskClass => Mask switch
|
||||
{
|
||||
DRatingMask.Star2 => "mask-star-2",
|
||||
DRatingMask.Heart => "mask-heart",
|
||||
DRatingMask.Squircle => "mask-squircle",
|
||||
DRatingMask.Hexagon => "mask-hexagon",
|
||||
DRatingMask.Hexagon2 => "mask-hexagon-2",
|
||||
DRatingMask.Decagon => "mask-decagon",
|
||||
DRatingMask.Pentagon => "mask-pentagon",
|
||||
DRatingMask.Diamond => "mask-diamond",
|
||||
DRatingMask.Circle => "mask-circle",
|
||||
DRatingMask.Triangle => "mask-triangle",
|
||||
DRatingMask.Triangle2 => "mask-triangle-2",
|
||||
DRatingMask.Triangle3 => "mask-triangle-3",
|
||||
DRatingMask.Triangle4 => "mask-triangle-4",
|
||||
_ => "mask-star"
|
||||
};
|
||||
|
||||
string SizeClass => Size switch
|
||||
{
|
||||
DSize.Xs => "rating-xs",
|
||||
DSize.Sm => "rating-sm",
|
||||
DSize.Lg => "rating-lg",
|
||||
DSize.Xl => "rating-xl",
|
||||
_ => null
|
||||
};
|
||||
}
|
||||
Reference in new issue
Block a user