thepraandClaude Opus 5.5
90e4b9200c
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
86 lines
3.2 KiB
Plaintext
86 lines
3.2 KiB
Plaintext
@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
|
|
};
|
|
}
|