Compare commits
9 Commits
086917b5aa
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 shaamilahmed
|
b7c75716e8 | ||
|
shaamilahmed
|
398d22169d | ||
|
shaamilahmed
|
a8b13d1120 | ||
|
shaamilahmed
|
bd3827bb41 | ||
|
shaamilahmed
|
32cad03088 | ||
|
shaamilahmed
|
4411307383 | ||
|
shaamilahmed
|
5668cf20d9 | ||
|
shaamilahmed
|
b323862e03 | ||
|
shaamilahmed
|
d1f0967a0c |
@@ -17,7 +17,6 @@
|
||||
</script>
|
||||
<link rel="stylesheet" href="_content/Enciphered.Blazor.UIComponents/css/app.css" />
|
||||
<link rel="stylesheet" href="@Assets["css/app.css"]" />
|
||||
<link rel="stylesheet" href="@Assets["Enciphered.Blazor.UIComponents.Demo.styles.css"]" />
|
||||
<ImportMap />
|
||||
<link rel="icon" type="image/svg+xml" href="enci_white.svg" />
|
||||
<HeadOutlet />
|
||||
@@ -26,11 +25,16 @@
|
||||
<body class="min-h-svh antialiased bg-background text-foreground">
|
||||
<Routes />
|
||||
<script src="_framework/blazor.web.js"></script>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"
|
||||
integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
|
||||
crossorigin="anonymous"></script>
|
||||
<script type="module">
|
||||
import { init as initDarkMode } from '/_content/Enciphered.Blazor.UIComponents/js/darkmode.js';
|
||||
import { init as initSidebar } from '/_content/Enciphered.Blazor.UIComponents/js/sidebar.js';
|
||||
import { init as initForms } from '/_content/Enciphered.Blazor.UIComponents/js/forms.js';
|
||||
initDarkMode();
|
||||
initSidebar();
|
||||
initForms();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
@page "/cards"
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Cards</PageTitle>
|
||||
|
||||
|
||||
@@ -1,19 +1,9 @@
|
||||
@page "/counter"
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Counter</PageTitle>
|
||||
|
||||
<h1>Counter</h1>
|
||||
|
||||
<p role="status">Current count: @currentCount</p>
|
||||
<p role="status">Current count: <span id="counter-value">0</span></p>
|
||||
|
||||
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
|
||||
|
||||
@code {
|
||||
private int currentCount = 0;
|
||||
|
||||
private void IncrementCount()
|
||||
{
|
||||
currentCount++;
|
||||
}
|
||||
}
|
||||
<button class="btn btn-primary" id="counter-btn" onclick="document.getElementById('counter-value').textContent = ++window._count || (window._count=1)">Click me</button>
|
||||
|
||||
@@ -1,126 +1,50 @@
|
||||
@page "/forms"
|
||||
@rendermode InteractiveServer
|
||||
@using System.ComponentModel.DataAnnotations
|
||||
|
||||
<PageTitle>Forms</PageTitle>
|
||||
|
||||
<div class="space-y-6 max-w-lg">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold tracking-tight">Forms Demo</h1>
|
||||
<p class="text-muted-foreground">All input components with DataAnnotations validation.</p>
|
||||
<p class="text-muted-foreground">All input components — fully static SSR with htmx validation.</p>
|
||||
</div>
|
||||
|
||||
<EditForm EditContext="_editContext" OnSubmit="HandleSubmit" FormName="demo-form">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
<div class="space-y-4">
|
||||
<FormField Label="Full Name" For="name" Error="@GetError(nameof(Model.Name))">
|
||||
<TextInput Id="name" @bind-Value="Model.Name" Placeholder="Jane Doe" data-testid="input-name" />
|
||||
<HtmxForm Endpoint="/api/contact">
|
||||
<FormField Label="Full Name" For="name">
|
||||
<TextInput Id="name" Name="name" Placeholder="Jane Doe" data-testid="input-name" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Email" For="email" Error="@GetError(nameof(Model.Email))">
|
||||
<TextInput Id="email" Type="email" @bind-Value="Model.Email" Placeholder="jane@example.com" data-testid="input-email" />
|
||||
<FormField Label="Email" For="email">
|
||||
<TextInput Id="email" Name="email" Type="email" Placeholder="jane@example.com" data-testid="input-email" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Password" For="password" Error="@GetError(nameof(Model.Password))">
|
||||
<TextInput Id="password" Type="password" @bind-Value="Model.Password" Placeholder="••••••••" data-testid="input-password" />
|
||||
<FormField Label="Password" For="password">
|
||||
<TextInput Id="password" Name="password" Type="password" Placeholder="••••••••" data-testid="input-password" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Age" For="age" Error="@GetError(nameof(Model.Age))">
|
||||
<NumberInput Id="age" @bind-Value="Model.Age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
|
||||
<FormField Label="Age" For="age">
|
||||
<NumberInput Id="age" Name="age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Birth Date" For="birthdate" Error="@GetError(nameof(Model.BirthDate))">
|
||||
<DateInput Id="birthdate" @bind-Value="Model.BirthDate" data-testid="input-birthdate" />
|
||||
<FormField Label="Birth Date" For="birthdate">
|
||||
<DateInput Id="birthdate" Name="birthdate" data-testid="input-birthdate" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Preferred Time" For="preferredtime" Error="@GetError(nameof(Model.PreferredTime))">
|
||||
<TimeInput Id="preferredtime" @bind-Value="Model.PreferredTime" data-testid="input-time" />
|
||||
<FormField Label="Preferred Time" For="preferredtime">
|
||||
<TimeInput Id="preferredtime" Name="preferredtime" data-testid="input-time" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Appointment" For="appointment" Error="@GetError(nameof(Model.Appointment))">
|
||||
<DateTimeInput Id="appointment" @bind-Value="Model.Appointment" data-testid="input-appointment" />
|
||||
<FormField Label="Appointment" For="appointment">
|
||||
<DateTimeInput Id="appointment" Name="appointment" data-testid="input-appointment" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Confirmation" For="confirmation">
|
||||
<TextInput Id="confirmation" Name="confirmation" Placeholder='Type "CONFIRM"' data-testid="input-confirmation" />
|
||||
</FormField>
|
||||
|
||||
<div class="flex gap-2 pt-2">
|
||||
<Button Type="submit" data-testid="btn-submit">Submit</Button>
|
||||
<Button Variant="@ButtonVariant.Outline" OnClick="HandleReset" data-testid="btn-reset">Reset</Button>
|
||||
<Button Type="reset" Variant="@ButtonVariant.Outline" data-testid="btn-reset">Reset</Button>
|
||||
<Button Variant="@ButtonVariant.Destructive" Disabled="true" data-testid="btn-disabled">Disabled</Button>
|
||||
</div>
|
||||
</HtmxForm>
|
||||
</div>
|
||||
</EditForm>
|
||||
|
||||
@if (_submitted)
|
||||
{
|
||||
<div data-testid="success-message"
|
||||
class="rounded-md border border-input bg-card p-4 text-sm text-card-foreground">
|
||||
<p class="font-medium">✓ Form submitted successfully</p>
|
||||
<p class="text-muted-foreground mt-1">Name: @_submittedName</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private FormModel Model { get; set; } = new();
|
||||
private EditContext _editContext = null!;
|
||||
private bool _submitted;
|
||||
private string _submittedName = "";
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
_editContext = new EditContext(Model);
|
||||
}
|
||||
|
||||
private string? GetError(string fieldName)
|
||||
{
|
||||
var field = _editContext.Field(fieldName);
|
||||
var messages = _editContext.GetValidationMessages(field);
|
||||
return messages.FirstOrDefault();
|
||||
}
|
||||
|
||||
private void HandleSubmit()
|
||||
{
|
||||
_submitted = false;
|
||||
|
||||
if (!_editContext.Validate())
|
||||
return;
|
||||
|
||||
_submittedName = Model.Name!;
|
||||
_submitted = true;
|
||||
}
|
||||
|
||||
private void HandleReset()
|
||||
{
|
||||
Model = new();
|
||||
_submitted = false;
|
||||
_editContext = new EditContext(Model);
|
||||
}
|
||||
|
||||
public class FormModel
|
||||
{
|
||||
[Required(ErrorMessage = "Name is required.")]
|
||||
[StringLength(100, MinimumLength = 2, ErrorMessage = "Name must be 2–100 characters.")]
|
||||
public string? Name { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Email is required.")]
|
||||
[EmailAddress(ErrorMessage = "Invalid email address.")]
|
||||
public string? Email { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Password is required.")]
|
||||
[StringLength(64, MinimumLength = 8, ErrorMessage = "Password must be 8–64 characters.")]
|
||||
public string? Password { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Age is required.")]
|
||||
[Range(1, 150, ErrorMessage = "Age must be between 1 and 150.")]
|
||||
public double? Age { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Birth date is required.")]
|
||||
public DateOnly? BirthDate { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Preferred time is required.")]
|
||||
public TimeOnly? PreferredTime { get; set; }
|
||||
|
||||
[Required(ErrorMessage = "Appointment is required.")]
|
||||
public DateTime? Appointment { get; set; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@page "/weather"
|
||||
@using Enciphered.Blazor.UIComponents
|
||||
@attribute [StreamRendering]
|
||||
|
||||
<PageTitle>Weather</PageTitle>
|
||||
@@ -13,27 +14,20 @@
|
||||
}
|
||||
else
|
||||
{
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<Table Items="forecasts">
|
||||
<Columns>
|
||||
<th>Date</th>
|
||||
<th aria-label="Temperature in Celsius">Temp. (C)</th>
|
||||
<th aria-label="Temperature in Farenheit">Temp. (F)</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var forecast in forecasts)
|
||||
{
|
||||
<tr>
|
||||
</Columns>
|
||||
<RowTemplate Context="forecast">
|
||||
<td>@forecast.Date.ToShortDateString()</td>
|
||||
<td>@forecast.TemperatureC</td>
|
||||
<td>@forecast.TemperatureF</td>
|
||||
<td>@forecast.Summary</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</RowTemplate>
|
||||
</Table>
|
||||
}
|
||||
|
||||
@code {
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
namespace Enciphered.Blazor.UIComponents.Demo;
|
||||
|
||||
public class ContactFormModel
|
||||
{
|
||||
public string Name { get; set; } = "";
|
||||
public string Email { get; set; } = "";
|
||||
public string Password { get; set; } = "";
|
||||
public int? Age { get; set; }
|
||||
public DateOnly? Birthdate { get; set; }
|
||||
public TimeOnly? Preferredtime { get; set; }
|
||||
public DateTime? Appointment { get; set; }
|
||||
public string Confirmation { get; set; } = "";
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
using Enciphered.Blazor.UIComponents.Validation;
|
||||
|
||||
namespace Enciphered.Blazor.UIComponents.Demo;
|
||||
|
||||
public class ContactFormValidator : FormValidator
|
||||
{
|
||||
public ContactFormValidator()
|
||||
{
|
||||
RuleFor("name",
|
||||
displayName: "Name",
|
||||
required: true,
|
||||
minLength: 2);
|
||||
|
||||
RuleFor("email",
|
||||
displayName: "Email",
|
||||
required: true,
|
||||
pattern: @".+@.+\..+",
|
||||
message: "Please enter a valid email address.");
|
||||
|
||||
RuleFor("password",
|
||||
displayName: "Password",
|
||||
required: true,
|
||||
minLength: 6);
|
||||
|
||||
RuleFor("age",
|
||||
displayName: "Age",
|
||||
min: 0,
|
||||
max: 150);
|
||||
|
||||
RuleFor("birthdate",
|
||||
displayName: "Birth Date",
|
||||
custom: value => !DateOnly.TryParse(value, out _) ? "Please enter a valid date." : null);
|
||||
|
||||
RuleFor("preferredtime",
|
||||
displayName: "Preferred Time",
|
||||
custom: value => !TimeOnly.TryParse(value, out _) ? "Please enter a valid time." : null);
|
||||
|
||||
RuleFor("appointment",
|
||||
displayName: "Appointment",
|
||||
custom: value => !DateTime.TryParse(value, out _) ? "Please enter a valid date and time." : null);
|
||||
|
||||
RuleFor("confirmation",
|
||||
displayName: "Confirmation",
|
||||
required: true,
|
||||
custom: value => value != "CONFIRM" ? "You must type CONFIRM to proceed." : null);
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,15 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk.Web">
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net10.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<RunAOTCompilation>true</RunAOTCompilation>
|
||||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<ProjectReference Include="..\Enciphered.Blazor.UIComponents\Enciphered.Blazor.UIComponents.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net9.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
</PropertyGroup>
|
||||
|
||||
<Target Name="TailwindBuild" BeforeTargets="Build">
|
||||
<Exec Command="npx @tailwindcss/cli -i Styles/app.css -o wwwroot/css/app.css --minify" />
|
||||
</Target>
|
||||
|
||||
@@ -1,29 +1,41 @@
|
||||
using Enciphered.Blazor.UIComponents.Demo;
|
||||
using Enciphered.Blazor.UIComponents.Demo.Components;
|
||||
using Enciphered.Blazor.UIComponents.Validation;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorComponents()
|
||||
.AddInteractiveServerComponents();
|
||||
builder.Services.AddRazorComponents();
|
||||
builder.Services.AddAntiforgery();
|
||||
|
||||
var app = builder.Build();
|
||||
|
||||
// Configure the HTTP request pipeline.
|
||||
if (!app.Environment.IsDevelopment())
|
||||
{
|
||||
app.UseExceptionHandler("/Error", createScopeForErrors: true);
|
||||
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
|
||||
app.UseHsts();
|
||||
}
|
||||
|
||||
app.UseHttpsRedirection();
|
||||
|
||||
|
||||
app.UseAntiforgery();
|
||||
|
||||
app.MapStaticAssets();
|
||||
app.MapRazorComponents<App>()
|
||||
.AddInteractiveServerRenderMode()
|
||||
.AddAdditionalAssemblies(typeof(Enciphered.Blazor.UIComponents.SidebarProvider).Assembly);
|
||||
|
||||
app.MapFormValidation<ContactFormValidator, ContactFormModel>("/api/contact",
|
||||
onSuccess: async model =>
|
||||
{
|
||||
Console.WriteLine("── Form Submitted ──");
|
||||
Console.WriteLine($" Name: {model.Name}");
|
||||
Console.WriteLine($" Email: {model.Email}");
|
||||
Console.WriteLine($" Password: {model.Password}");
|
||||
Console.WriteLine($" Age: {model.Age}");
|
||||
Console.WriteLine($" Birth Date: {model.Birthdate}");
|
||||
Console.WriteLine($" Time: {model.Preferredtime}");
|
||||
Console.WriteLine($" Appointment: {model.Appointment}");
|
||||
Console.WriteLine($" Confirmation: {model.Confirmation}");
|
||||
await Task.CompletedTask;
|
||||
});
|
||||
|
||||
app.Run();
|
||||
File diff suppressed because one or more lines are too long
@@ -10,7 +10,7 @@ public class FormsTests : PlaywrightTestBase
|
||||
private async Task GoToFormsAsync()
|
||||
{
|
||||
await Page.GotoAsync($"{BaseUrl}/forms", new PageGotoOptions { WaitUntil = WaitUntilState.NetworkIdle });
|
||||
// Wait for Blazor interactive mode to be ready
|
||||
// Wait for the form to be rendered
|
||||
await Page.WaitForSelectorAsync("[data-testid='btn-submit']", new PageWaitForSelectorOptions { Timeout = 10_000 });
|
||||
}
|
||||
|
||||
@@ -18,6 +18,15 @@ public class FormsTests : PlaywrightTestBase
|
||||
private ILocator Trigger(string testId) => Page.Locator($"[data-testid='{testId}']");
|
||||
private ILocator Btn(string testId) => Page.Locator($"[data-testid='{testId}']");
|
||||
|
||||
/// <summary>
|
||||
/// Get the open popover panel nearest to a trigger.
|
||||
/// </summary>
|
||||
private ILocator PopoverPanelFor(string triggerId) =>
|
||||
Trigger(triggerId).Locator("xpath=ancestor::*[@data-popover]").Locator("[data-popover-panel]");
|
||||
|
||||
private ILocator PopoverBackdropFor(string triggerId) =>
|
||||
Trigger(triggerId).Locator("xpath=ancestor::*[@data-popover]").Locator("[data-popover-backdrop]");
|
||||
|
||||
/// <summary>
|
||||
/// Select a date via the calendar popover.
|
||||
/// Opens the trigger, uses month/year pickers to navigate, then clicks the day.
|
||||
@@ -26,62 +35,61 @@ public class FormsTests : PlaywrightTestBase
|
||||
{
|
||||
// Open the popover
|
||||
await Trigger(triggerId).ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
await NavigateCalendarToDate(target);
|
||||
var panel = PopoverPanelFor(triggerId);
|
||||
await NavigateCalendarToDate(panel, target);
|
||||
|
||||
// Click the target day (only enabled buttons in the calendar day grid)
|
||||
// The day grid is the last grid-cols-7 div; find the button with matching day text
|
||||
var dayGrid = Page.Locator(".grid.grid-cols-7").Last;
|
||||
// Click the target day
|
||||
var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
|
||||
var dayButton = dayGrid.Locator($"button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = target.Day.ToString() }).First;
|
||||
await dayButton.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Navigate the open calendar to a specific month/year using the month and year pickers.
|
||||
/// </summary>
|
||||
private async Task NavigateCalendarToDate(DateOnly target)
|
||||
private async Task NavigateCalendarToDate(ILocator panel, DateOnly target)
|
||||
{
|
||||
// Click year header to open year picker, then select the year
|
||||
var yearButton = Page.Locator("[data-calendar-year]");
|
||||
var yearButton = panel.Locator("[data-calendar-year]");
|
||||
await yearButton.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
|
||||
// The year picker is a scrollable grid; find and click the target year
|
||||
var yearGrid = Page.Locator(".grid.grid-cols-4");
|
||||
// The year picker grid is inside the calendar content
|
||||
var yearGrid = panel.Locator(".grid.grid-cols-4");
|
||||
var targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
|
||||
|
||||
// If the year isn't visible, use prev/next to shift the year range (±20 per click)
|
||||
// If the year isn't visible, use prev/next to shift the year range
|
||||
var attempts = 0;
|
||||
while (await targetYearBtn.CountAsync() == 0 && attempts < 10)
|
||||
{
|
||||
// Read the first year button text to determine which direction to go
|
||||
var firstYearText = await yearGrid.Locator("button").First.InnerTextAsync();
|
||||
var firstYear = int.Parse(firstYearText.Trim());
|
||||
|
||||
if (target.Year < firstYear)
|
||||
await Page.Locator("button[aria-label='Previous month']").ClickAsync();
|
||||
await panel.Locator("button[aria-label='Previous month']").ClickAsync();
|
||||
else
|
||||
await Page.Locator("button[aria-label='Next month']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
yearGrid = Page.Locator(".grid.grid-cols-4");
|
||||
await panel.Locator("button[aria-label='Next month']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
yearGrid = panel.Locator(".grid.grid-cols-4");
|
||||
targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
|
||||
attempts++;
|
||||
}
|
||||
|
||||
await targetYearBtn.First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
|
||||
// Now click month header to open month picker, then select the month
|
||||
var monthButton = Page.Locator("[data-calendar-month]");
|
||||
var monthButton = panel.Locator("[data-calendar-month]");
|
||||
await monthButton.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
|
||||
var monthGrid = Page.Locator(".grid.grid-cols-3");
|
||||
var monthGrid = panel.Locator(".grid.grid-cols-3");
|
||||
var targetMonthText = new DateOnly(2000, target.Month, 1).ToString("MMM");
|
||||
await monthGrid.Locator($"button:has-text('{targetMonthText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
@@ -92,44 +100,42 @@ public class FormsTests : PlaywrightTestBase
|
||||
{
|
||||
// Open the popover
|
||||
await Trigger(triggerId).ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
await PickTimeInOpenPopover(hour, minute);
|
||||
var panel = PopoverPanelFor(triggerId);
|
||||
await PickTimeInOpenPopover(panel, hour, minute);
|
||||
|
||||
// Close popover by clicking the backdrop overlay
|
||||
await Page.Locator(".fixed.inset-0.z-40").ClickAsync(new LocatorClickOptions { Force = true });
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
var backdrop = PopoverBackdropFor(triggerId);
|
||||
await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Pick hour, minute, and AM/PM in an already-open time picker.
|
||||
/// Scopes all locators to the visible popover content to avoid backdrop interception.
|
||||
/// </summary>
|
||||
private async Task PickTimeInOpenPopover(int hour, int minute)
|
||||
private async Task PickTimeInOpenPopover(ILocator panel, int hour, int minute)
|
||||
{
|
||||
// The popover content sits in a z-50 absolutely positioned container
|
||||
var popoverContent = Page.Locator(".absolute.z-50");
|
||||
|
||||
// Convert to 12-hour format
|
||||
var isPm = hour >= 12;
|
||||
var hour12 = hour % 12;
|
||||
if (hour12 == 0) hour12 = 12;
|
||||
|
||||
// Click the hour in the first scrollable column (within the popover)
|
||||
// Click the hour in the first scrollable column
|
||||
var hourText = hour12.ToString("D2");
|
||||
var hourColumn = popoverContent.Locator(".scrollbar-thin").First;
|
||||
var hourColumn = panel.Locator(".scrollbar-thin").First;
|
||||
await hourColumn.Locator($"button:has-text('{hourText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
|
||||
// Click the minute in the second scrollable column (within the popover)
|
||||
// Click the minute in the second scrollable column
|
||||
var minuteText = minute.ToString("D2");
|
||||
var minuteColumn = popoverContent.Locator(".scrollbar-thin").Nth(1);
|
||||
var minuteColumn = panel.Locator(".scrollbar-thin").Nth(1);
|
||||
await minuteColumn.Locator($"button:has-text('{minuteText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
|
||||
// Click AM/PM (within the popover)
|
||||
// Click AM/PM
|
||||
var periodText = isPm ? "PM" : "AM";
|
||||
await popoverContent.Locator($"button:has-text('{periodText}')").First.ClickAsync();
|
||||
await panel.Locator($"button:has-text('{periodText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
}
|
||||
|
||||
@@ -260,7 +266,7 @@ public class FormsTests : PlaywrightTestBase
|
||||
|
||||
var labels = Page.Locator("label");
|
||||
var count = await labels.CountAsync();
|
||||
Assert.That(count, Is.EqualTo(7), "Expected 7 labels (one per form field)");
|
||||
Assert.That(count, Is.EqualTo(8), "Expected 8 labels (one per form field)");
|
||||
}
|
||||
|
||||
[Test]
|
||||
@@ -276,7 +282,7 @@ public class FormsTests : PlaywrightTestBase
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Two-way binding
|
||||
// Value binding (native)
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
@@ -334,137 +340,12 @@ public class FormsTests : PlaywrightTestBase
|
||||
// Pick the time part via the time trigger
|
||||
await SelectTimeAsync("trigger-appointment-time", 10, 0);
|
||||
|
||||
// The hidden input should have the combined datetime value
|
||||
var value = await Input("input-appointment").InputValueAsync();
|
||||
Assert.That(value, Does.StartWith("2025-12-25T10:00"));
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Validation — empty submit shows errors
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Empty_Submit_Shows_Validation_Errors()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
|
||||
// Wait for at least one error message to appear
|
||||
await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
|
||||
|
||||
var errors = Page.Locator("p.text-destructive");
|
||||
var count = await errors.CountAsync();
|
||||
Assert.That(count, Is.GreaterThanOrEqualTo(7), "Expected at least 7 validation errors (one per required field)");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Validation_Error_Shows_Name_Required()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
|
||||
|
||||
var nameError = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "Name is required" });
|
||||
await Expect(nameError).ToBeVisibleAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Validation_Error_Shows_Email_Required()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
|
||||
|
||||
var emailError = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "Email is required" });
|
||||
await Expect(emailError).ToBeVisibleAsync();
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Validation — specific error messages
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Short_Name_Shows_Length_Error()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-name");
|
||||
await input.FillAsync("A");
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
|
||||
|
||||
var error = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "2–100 characters" });
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Invalid_Email_Shows_Error()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-email");
|
||||
await input.FillAsync("not-an-email");
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
|
||||
|
||||
var error = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "Invalid email" });
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Short_Password_Shows_Error()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-password");
|
||||
await input.FillAsync("123");
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForSelectorAsync("p.text-destructive", new PageWaitForSelectorOptions { Timeout = 5_000 });
|
||||
|
||||
var error = Page.Locator("p.text-destructive", new PageLocatorOptions { HasTextString = "8–64 characters" });
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Valid submission
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Valid_Form_Shows_Success_Message()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await Input("input-name").FillAsync("Jane Doe");
|
||||
await Input("input-email").FillAsync("jane@example.com");
|
||||
await Input("input-password").FillAsync("securepassword123");
|
||||
await Input("input-age").FillAsync("30");
|
||||
|
||||
// Use popover pickers for date/time fields
|
||||
await SelectDateAsync("trigger-birthdate", new DateOnly(1995, 3, 15));
|
||||
await SelectTimeAsync("trigger-preferredtime", 9, 30);
|
||||
|
||||
// DateTime: pick date and time via separate triggers
|
||||
await SelectDateAsync("trigger-appointment-date", new DateOnly(2025, 12, 25));
|
||||
await SelectTimeAsync("trigger-appointment-time", 10, 0);
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeVisibleAsync(new LocatorAssertionsToBeVisibleOptions { Timeout = 5_000 });
|
||||
await Expect(success).ToContainTextAsync("Form submitted successfully");
|
||||
await Expect(success).ToContainTextAsync("Jane Doe");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task No_Success_Message_Before_Submit()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeHiddenAsync();
|
||||
// The hidden datetime-local input should have the combined value
|
||||
// Note: DateTime hidden input is composed from separate date/time part hidden inputs
|
||||
var datePartVal = await Page.Locator("#appointment-date-part").InputValueAsync();
|
||||
var timePartVal = await Page.Locator("#appointment-time-part").InputValueAsync();
|
||||
Assert.That(datePartVal, Is.EqualTo("2025-12-25"));
|
||||
Assert.That(timePartVal, Is.EqualTo("10:00"));
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
@@ -512,7 +393,7 @@ public class FormsTests : PlaywrightTestBase
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Reset
|
||||
// Reset (native HTML reset)
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
@@ -524,7 +405,7 @@ public class FormsTests : PlaywrightTestBase
|
||||
await Input("input-name").FillAsync("Alice");
|
||||
await Input("input-email").FillAsync("alice@test.com");
|
||||
|
||||
// Reset
|
||||
// Reset (native form reset)
|
||||
await Btn("btn-reset").ClickAsync();
|
||||
|
||||
// Fields should be empty
|
||||
@@ -532,35 +413,6 @@ public class FormsTests : PlaywrightTestBase
|
||||
await Expect(Input("input-email")).ToHaveValueAsync("");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Reset_Button_Clears_Success_Message()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Submit valid form
|
||||
await Input("input-name").FillAsync("Jane Doe");
|
||||
await Input("input-email").FillAsync("jane@example.com");
|
||||
await Input("input-password").FillAsync("securepassword123");
|
||||
await Input("input-age").FillAsync("30");
|
||||
|
||||
await SelectDateAsync("trigger-birthdate", new DateOnly(1995, 3, 15));
|
||||
await SelectTimeAsync("trigger-preferredtime", 9, 30);
|
||||
|
||||
// DateTime picker — date and time via separate triggers
|
||||
await SelectDateAsync("trigger-appointment-date", new DateOnly(2025, 12, 25));
|
||||
await SelectTimeAsync("trigger-appointment-time", 10, 0);
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeVisibleAsync(new LocatorAssertionsToBeVisibleOptions { Timeout = 5_000 });
|
||||
|
||||
// Reset
|
||||
await Btn("btn-reset").ClickAsync();
|
||||
|
||||
await Expect(success).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Input styling (base CSS classes present)
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
@@ -0,0 +1,718 @@
|
||||
using Microsoft.Playwright;
|
||||
|
||||
namespace Enciphered.Blazor.UIComponents.Tests;
|
||||
|
||||
/// <summary>
|
||||
/// Tests that cover interactive behavior gaps to ensure safe JS migration.
|
||||
/// Covers: NumberInput +/- buttons & min/max clamping, Popover open/close mechanics,
|
||||
/// Calendar arrow navigation, and trigger text updates for Date/Time/DateTime inputs.
|
||||
/// </summary>
|
||||
[TestFixture]
|
||||
public class InteractivityTests : PlaywrightTestBase
|
||||
{
|
||||
// ── Helpers ──────────────────────────────────────────────────────────────
|
||||
|
||||
private async Task GoToFormsAsync()
|
||||
{
|
||||
await Page.GotoAsync($"{BaseUrl}/forms", new PageGotoOptions { WaitUntil = WaitUntilState.NetworkIdle });
|
||||
await Page.WaitForSelectorAsync("[data-testid='btn-submit']", new PageWaitForSelectorOptions { Timeout = 10_000 });
|
||||
}
|
||||
|
||||
private ILocator Input(string testId) => Page.Locator($"[data-testid='{testId}']");
|
||||
private ILocator Trigger(string testId) => Page.Locator($"[data-testid='{testId}']");
|
||||
|
||||
/// <summary>
|
||||
/// Get the popover panel scoped to the popover containing a trigger.
|
||||
/// </summary>
|
||||
private ILocator PopoverPanelFor(string triggerId) =>
|
||||
Trigger(triggerId).Locator("xpath=ancestor::*[@data-popover]").Locator("[data-popover-panel]");
|
||||
|
||||
private ILocator PopoverBackdropFor(string triggerId) =>
|
||||
Trigger(triggerId).Locator("xpath=ancestor::*[@data-popover]").Locator("[data-popover-backdrop]");
|
||||
|
||||
/// <summary>
|
||||
/// Navigate the open calendar to a specific month/year using the month and year pickers.
|
||||
/// </summary>
|
||||
private async Task NavigateCalendarToDate(ILocator panel, DateOnly target)
|
||||
{
|
||||
var yearButton = panel.Locator("[data-calendar-year]");
|
||||
await yearButton.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
|
||||
var yearGrid = panel.Locator(".grid.grid-cols-4");
|
||||
var targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
|
||||
|
||||
var attempts = 0;
|
||||
while (await targetYearBtn.CountAsync() == 0 && attempts < 10)
|
||||
{
|
||||
var firstYearText = await yearGrid.Locator("button").First.InnerTextAsync();
|
||||
var firstYear = int.Parse(firstYearText.Trim());
|
||||
|
||||
if (target.Year < firstYear)
|
||||
await panel.Locator("button[aria-label='Previous month']").ClickAsync();
|
||||
else
|
||||
await panel.Locator("button[aria-label='Next month']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
yearGrid = panel.Locator(".grid.grid-cols-4");
|
||||
targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
|
||||
attempts++;
|
||||
}
|
||||
|
||||
await targetYearBtn.First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
|
||||
var monthButton = panel.Locator("[data-calendar-month]");
|
||||
await monthButton.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
|
||||
var monthGrid = panel.Locator(".grid.grid-cols-3");
|
||||
var targetMonthText = new DateOnly(2000, target.Month, 1).ToString("MMM");
|
||||
await monthGrid.Locator($"button:has-text('{targetMonthText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Pick hour, minute, and AM/PM in an already-open time picker popover.
|
||||
/// </summary>
|
||||
private async Task PickTimeInOpenPopover(ILocator panel, int hour, int minute)
|
||||
{
|
||||
var isPm = hour >= 12;
|
||||
var hour12 = hour % 12;
|
||||
if (hour12 == 0) hour12 = 12;
|
||||
|
||||
var hourText = hour12.ToString("D2");
|
||||
var hourColumn = panel.Locator(".scrollbar-thin").First;
|
||||
await hourColumn.Locator($"button:has-text('{hourText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
|
||||
var minuteText = minute.ToString("D2");
|
||||
var minuteColumn = panel.Locator(".scrollbar-thin").Nth(1);
|
||||
await minuteColumn.Locator($"button:has-text('{minuteText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
|
||||
var periodText = isPm ? "PM" : "AM";
|
||||
await panel.Locator($"button:has-text('{periodText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// NumberInput: Increment / Decrement buttons
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task NumberInput_Increment_Button_Increases_Value()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-age");
|
||||
await input.FillAsync("25");
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
|
||||
await incrementBtn.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
await Expect(input).ToHaveValueAsync("26");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task NumberInput_Decrement_Button_Decreases_Value()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-age");
|
||||
await input.FillAsync("25");
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
var decrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Decrement']");
|
||||
await decrementBtn.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
await Expect(input).ToHaveValueAsync("24");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task NumberInput_Increment_Multiple_Times()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-age");
|
||||
await input.FillAsync("10");
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
|
||||
await incrementBtn.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
await incrementBtn.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
await incrementBtn.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
await Expect(input).ToHaveValueAsync("13");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task NumberInput_Increment_From_Empty_Sets_Value_To_One()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-age");
|
||||
await input.FillAsync("");
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
|
||||
await incrementBtn.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
await Expect(input).ToHaveValueAsync("1");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task NumberInput_Decrement_From_Empty_Sets_Value_To_Negative_One_Or_Min()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-age");
|
||||
await input.FillAsync("");
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
var decrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Decrement']");
|
||||
await decrementBtn.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
// Age has Min=0, so decrement from 0 (default) should clamp to 0
|
||||
await Expect(input).ToHaveValueAsync("0");
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// NumberInput: Min / Max clamping
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task NumberInput_Increment_Button_Disabled_At_Max()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-age");
|
||||
await input.FillAsync("150"); // Max is 150
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
|
||||
await Expect(incrementBtn).ToBeDisabledAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task NumberInput_Decrement_Button_Disabled_At_Min()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-age");
|
||||
await input.FillAsync("0"); // Min is 0
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
var decrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Decrement']");
|
||||
await Expect(decrementBtn).ToBeDisabledAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task NumberInput_Increment_At_Max_Does_Not_Exceed()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-age");
|
||||
await input.FillAsync("149");
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
var incrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Increment']");
|
||||
await incrementBtn.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
await Expect(input).ToHaveValueAsync("150");
|
||||
await Expect(incrementBtn).ToBeDisabledAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task NumberInput_Decrement_At_Min_Does_Not_Go_Below()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var input = Input("input-age");
|
||||
await input.FillAsync("1");
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
var decrementBtn = Page.Locator("[data-testid='input-age']").Locator("..").Locator("button[aria-label='Decrement']");
|
||||
await decrementBtn.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
|
||||
await Expect(input).ToHaveValueAsync("0");
|
||||
await Expect(decrementBtn).ToBeDisabledAsync();
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Popover: explicit open/close mechanics
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Popover_Opens_On_Trigger_Click()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Date input trigger opens a calendar popover
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
// The popover panel scoped to this trigger should be visible
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
await Expect(panel).ToBeVisibleAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Popover_Closes_On_Backdrop_Click()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open the time input popover
|
||||
await Trigger("trigger-preferredtime").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-preferredtime");
|
||||
await Expect(panel).ToBeVisibleAsync();
|
||||
|
||||
// Click the backdrop overlay to close
|
||||
var backdrop = PopoverBackdropFor("trigger-preferredtime");
|
||||
await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
// Popover should no longer be visible
|
||||
await Expect(panel).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Popover_Stays_Open_On_Content_Click()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open the date input popover
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
await Expect(panel).ToBeVisibleAsync();
|
||||
|
||||
// Click inside the popover content (e.g. the month header button) — should NOT close
|
||||
var monthButton = panel.Locator("[data-calendar-month]");
|
||||
await monthButton.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
// Popover should still be visible (month picker is now showing)
|
||||
await Expect(panel).ToBeVisibleAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Popover_Toggle_Opens_Then_Closes_Via_Backdrop()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var trigger = Trigger("trigger-birthdate");
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
|
||||
// Open
|
||||
await trigger.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
await Expect(panel).ToBeVisibleAsync();
|
||||
|
||||
// Close via backdrop
|
||||
var backdrop = PopoverBackdropFor("trigger-birthdate");
|
||||
await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
await Expect(panel).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Calendar: Previous / Next arrow buttons
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Calendar_Next_Arrow_Advances_Month()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open calendar
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
|
||||
// Read the current displayed month
|
||||
var monthLabel = panel.Locator("[data-calendar-month]");
|
||||
var initialMonth = await monthLabel.InnerTextAsync();
|
||||
|
||||
// Click the next arrow
|
||||
await panel.Locator("button[aria-label='Next month']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
|
||||
// Month should have changed
|
||||
var newMonth = await monthLabel.InnerTextAsync();
|
||||
Assert.That(newMonth, Is.Not.EqualTo(initialMonth), "Month label should change after clicking Next");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Calendar_Previous_Arrow_Goes_Back_Month()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open calendar
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
|
||||
var monthLabel = panel.Locator("[data-calendar-month]");
|
||||
var initialMonth = await monthLabel.InnerTextAsync();
|
||||
|
||||
// Click the previous arrow
|
||||
await panel.Locator("button[aria-label='Previous month']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
|
||||
var newMonth = await monthLabel.InnerTextAsync();
|
||||
Assert.That(newMonth, Is.Not.EqualTo(initialMonth), "Month label should change after clicking Previous");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Calendar_Next_Arrow_Wraps_Year()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open calendar
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
|
||||
// Navigate to Dec of current year
|
||||
var target = new DateOnly(DateTime.Today.Year, 12, 1);
|
||||
await NavigateCalendarToDate(panel, target);
|
||||
|
||||
var yearLabel = panel.Locator("[data-calendar-year]");
|
||||
var initialYear = await yearLabel.InnerTextAsync();
|
||||
|
||||
// Click next — should go to Jan of next year
|
||||
await panel.Locator("button[aria-label='Next month']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
|
||||
var monthLabel = panel.Locator("[data-calendar-month]");
|
||||
var newMonth = await monthLabel.InnerTextAsync();
|
||||
var newYear = await yearLabel.InnerTextAsync();
|
||||
|
||||
Assert.That(newMonth.Trim(), Is.EqualTo("Jan"), "Should wrap to January");
|
||||
Assert.That(int.Parse(newYear.Trim()), Is.EqualTo(int.Parse(initialYear.Trim()) + 1), "Year should increment");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Calendar_Previous_Arrow_Wraps_Year()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open calendar
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
|
||||
var target = new DateOnly(DateTime.Today.Year, 1, 1);
|
||||
await NavigateCalendarToDate(panel, target);
|
||||
|
||||
var yearLabel = panel.Locator("[data-calendar-year]");
|
||||
var initialYear = await yearLabel.InnerTextAsync();
|
||||
|
||||
// Click previous — should go to Dec of previous year
|
||||
await panel.Locator("button[aria-label='Previous month']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
|
||||
var monthLabel = panel.Locator("[data-calendar-month]");
|
||||
var newMonth = await monthLabel.InnerTextAsync();
|
||||
var newYear = await yearLabel.InnerTextAsync();
|
||||
|
||||
Assert.That(newMonth.Trim(), Is.EqualTo("Dec"), "Should wrap to December");
|
||||
Assert.That(int.Parse(newYear.Trim()), Is.EqualTo(int.Parse(initialYear.Trim()) - 1), "Year should decrement");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Calendar_Selecting_Day_Via_Arrow_Navigation()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open calendar
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
|
||||
// Navigate forward one month using arrow
|
||||
await panel.Locator("button[aria-label='Next month']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
|
||||
// Read the new month/year
|
||||
var monthText = (await panel.Locator("[data-calendar-month]").InnerTextAsync()).Trim();
|
||||
var yearText = (await panel.Locator("[data-calendar-year]").InnerTextAsync()).Trim();
|
||||
var month = DateTime.ParseExact(monthText, "MMM", null).Month;
|
||||
var year = int.Parse(yearText);
|
||||
|
||||
// Click day 15
|
||||
var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
|
||||
await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
// Verify the hidden input has the correct value
|
||||
var expected = new DateOnly(year, month, 15).ToString("yyyy-MM-dd");
|
||||
await Expect(Input("input-birthdate")).ToHaveValueAsync(expected);
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// DateInput: Trigger text updates after selection
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task DateInput_Trigger_Shows_Placeholder_Initially()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var triggerSpan = Trigger("trigger-birthdate").Locator("span");
|
||||
var text = await triggerSpan.InnerTextAsync();
|
||||
Assert.That(text.Trim(), Is.EqualTo("Select date"), "Should show placeholder before a date is selected");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task DateInput_Trigger_Shows_Formatted_Date_After_Selection()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open and select June 15, 2000
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
await NavigateCalendarToDate(panel, new DateOnly(2000, 6, 15));
|
||||
|
||||
var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
|
||||
await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
// Trigger button text should now show the formatted date
|
||||
var triggerSpan = Trigger("trigger-birthdate").Locator("span");
|
||||
var text = (await triggerSpan.InnerTextAsync()).Trim();
|
||||
Assert.That(text, Is.EqualTo("June 15, 2000"), "Trigger should display the formatted selected date");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task DateInput_Trigger_Text_Loses_Placeholder_Class_After_Selection()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var triggerSpan = Trigger("trigger-birthdate").Locator("span");
|
||||
|
||||
// Before selection — should have muted style
|
||||
var classBefore = await triggerSpan.GetAttributeAsync("class");
|
||||
Assert.That(classBefore, Does.Contain("text-muted-foreground"), "Placeholder text should have muted class");
|
||||
|
||||
// Select a date
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
await NavigateCalendarToDate(panel, new DateOnly(2000, 6, 15));
|
||||
var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
|
||||
await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
// After selection — should NOT have muted class
|
||||
var classAfter = await triggerSpan.GetAttributeAsync("class");
|
||||
Assert.That(classAfter, Does.Not.Contain("text-muted-foreground"), "Selected date text should not have muted class");
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// TimeInput: Trigger text updates after selection
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task TimeInput_Trigger_Shows_Placeholder_Initially()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var triggerSpan = Trigger("trigger-preferredtime").Locator("span");
|
||||
var text = await triggerSpan.InnerTextAsync();
|
||||
Assert.That(text.Trim(), Is.EqualTo("Select time"), "Should show placeholder before a time is selected");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task TimeInput_Trigger_Shows_Formatted_Time_After_Selection()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open time picker and select 2:30 PM
|
||||
await Trigger("trigger-preferredtime").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-preferredtime");
|
||||
await PickTimeInOpenPopover(panel, 14, 30);
|
||||
|
||||
// Close by clicking backdrop
|
||||
var backdrop = PopoverBackdropFor("trigger-preferredtime");
|
||||
await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var triggerSpan = Trigger("trigger-preferredtime").Locator("span");
|
||||
var text = (await triggerSpan.InnerTextAsync()).Trim();
|
||||
Assert.That(text, Is.EqualTo("02:30 PM"), "Trigger should display the formatted selected time");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task TimeInput_Trigger_Text_Loses_Placeholder_Class_After_Selection()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var triggerSpan = Trigger("trigger-preferredtime").Locator("span");
|
||||
|
||||
// Before selection
|
||||
var classBefore = await triggerSpan.GetAttributeAsync("class");
|
||||
Assert.That(classBefore, Does.Contain("text-muted-foreground"), "Placeholder should have muted class");
|
||||
|
||||
// Select a time
|
||||
await Trigger("trigger-preferredtime").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
var panel = PopoverPanelFor("trigger-preferredtime");
|
||||
await PickTimeInOpenPopover(panel, 14, 30);
|
||||
var backdrop = PopoverBackdropFor("trigger-preferredtime");
|
||||
await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
// After selection
|
||||
var classAfter = await triggerSpan.GetAttributeAsync("class");
|
||||
Assert.That(classAfter, Does.Not.Contain("text-muted-foreground"), "Selected time text should not have muted class");
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// DateTimeInput: Trigger text updates after selection
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task DateTimeInput_Date_Trigger_Shows_Placeholder_Initially()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var triggerSpan = Trigger("trigger-appointment-date").Locator("span");
|
||||
var text = await triggerSpan.InnerTextAsync();
|
||||
Assert.That(text.Trim(), Is.EqualTo("Select date"), "Date trigger should show placeholder initially");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task DateTimeInput_Time_Trigger_Shows_Placeholder_Initially()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
var triggerSpan = Trigger("trigger-appointment-time").Locator("span");
|
||||
var text = await triggerSpan.InnerTextAsync();
|
||||
Assert.That(text.Trim(), Is.EqualTo("Select time"), "Time trigger should show placeholder initially");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task DateTimeInput_Date_Trigger_Shows_Formatted_Date_After_Selection()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open and select Dec 25, 2025
|
||||
await Trigger("trigger-appointment-date").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-appointment-date");
|
||||
await NavigateCalendarToDate(panel, new DateOnly(2025, 12, 25));
|
||||
var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
|
||||
await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "25" }).First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var triggerSpan = Trigger("trigger-appointment-date").Locator("span");
|
||||
var text = (await triggerSpan.InnerTextAsync()).Trim();
|
||||
Assert.That(text, Is.EqualTo("Dec 25, 2025"), "Date trigger should display the formatted selected date");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task DateTimeInput_Time_Trigger_Shows_Formatted_Time_After_Selection()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Must select a date first so the component has a value
|
||||
await Trigger("trigger-appointment-date").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
var datePanel = PopoverPanelFor("trigger-appointment-date");
|
||||
await NavigateCalendarToDate(datePanel, new DateOnly(2025, 12, 25));
|
||||
var dayGrid = datePanel.Locator(".grid.grid-cols-7").Last;
|
||||
await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "25" }).First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
// Now select time 10:00 AM
|
||||
await Trigger("trigger-appointment-time").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
var timePanel = PopoverPanelFor("trigger-appointment-time");
|
||||
await PickTimeInOpenPopover(timePanel, 10, 0);
|
||||
var backdrop = PopoverBackdropFor("trigger-appointment-time");
|
||||
await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var triggerSpan = Trigger("trigger-appointment-time").Locator("span");
|
||||
var text = (await triggerSpan.InnerTextAsync()).Trim();
|
||||
Assert.That(text, Is.EqualTo("10:00 AM"), "Time trigger should display the formatted selected time");
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Calendar: day selection highlights correctly
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Calendar_Selected_Day_Has_Primary_Styling()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Open and select a date
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
|
||||
var day15 = dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First;
|
||||
await day15.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
// Re-open the calendar to verify the selected day is highlighted
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
panel = PopoverPanelFor("trigger-birthdate");
|
||||
var selectedDay = panel.Locator(".grid.grid-cols-7").Last
|
||||
.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "15" }).First;
|
||||
var cls = await selectedDay.GetAttributeAsync("class");
|
||||
Assert.That(cls, Does.Contain("bg-primary"), "Selected day should have primary background styling");
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Popover: Date selection auto-closes popover
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task DateInput_Popover_Closes_After_Day_Selection()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await Trigger("trigger-birthdate").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor("trigger-birthdate");
|
||||
await Expect(panel).ToBeVisibleAsync();
|
||||
|
||||
// Select a day
|
||||
var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
|
||||
await dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = "10" }).First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(400);
|
||||
|
||||
// Popover should auto-close after date selection
|
||||
await Expect(panel).ToBeHiddenAsync();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,648 @@
|
||||
using Microsoft.Playwright;
|
||||
|
||||
namespace Enciphered.Blazor.UIComponents.Tests;
|
||||
|
||||
/// <summary>
|
||||
/// Tests for htmx-powered server-side validation on the Forms Demo page.
|
||||
/// Covers: inline field validation on blur, full-form submission validation,
|
||||
/// success message display, error styling, and form reset clearing errors.
|
||||
/// </summary>
|
||||
[TestFixture]
|
||||
public class ValidationTests : PlaywrightTestBase
|
||||
{
|
||||
// ── Helpers ──────────────────────────────────────────────────────────────
|
||||
|
||||
private async Task GoToFormsAsync()
|
||||
{
|
||||
await Page.GotoAsync($"{BaseUrl}/forms", new PageGotoOptions { WaitUntil = WaitUntilState.NetworkIdle });
|
||||
await Page.WaitForSelectorAsync("[data-testid='btn-submit']", new PageWaitForSelectorOptions { Timeout = 10_000 });
|
||||
}
|
||||
|
||||
private ILocator Input(string testId) => Page.Locator($"[data-testid='{testId}']");
|
||||
private ILocator Btn(string testId) => Page.Locator($"[data-testid='{testId}']");
|
||||
|
||||
private ILocator FieldError(string fieldName) =>
|
||||
Page.Locator($"[data-field-error='{fieldName}']");
|
||||
|
||||
/// <summary>
|
||||
/// Focus an input, clear it, then blur to trigger htmx validation.
|
||||
/// </summary>
|
||||
private async Task BlurEmptyField(string testId)
|
||||
{
|
||||
var input = Input(testId);
|
||||
await input.ClickAsync();
|
||||
await input.FillAsync("");
|
||||
await input.BlurAsync();
|
||||
// Wait for htmx round-trip
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Fill a field and blur it.
|
||||
/// </summary>
|
||||
private async Task FillAndBlur(string testId, string value)
|
||||
{
|
||||
var input = Input(testId);
|
||||
await input.ClickAsync();
|
||||
await input.FillAsync(value);
|
||||
await input.BlurAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// Fill all required fields with valid data.
|
||||
/// </summary>
|
||||
private async Task FillAllValidFields()
|
||||
{
|
||||
await Input("input-name").FillAsync("Alice Johnson");
|
||||
await Input("input-email").FillAsync("alice@example.com");
|
||||
await Input("input-password").FillAsync("secure123");
|
||||
await Input("input-confirmation").FillAsync("CONFIRM");
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Inline field validation — blur triggers
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Name_Blank_Shows_Required_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await BlurEmptyField("input-name");
|
||||
|
||||
var error = FieldError("name");
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
await Expect(error).ToHaveTextAsync("Name is required.");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Name_Too_Short_Shows_Length_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await FillAndBlur("input-name", "A");
|
||||
|
||||
var error = FieldError("name");
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
await Expect(error).ToHaveTextAsync("Name must be at least 2 characters.");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Name_Valid_Clears_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Trigger an error first
|
||||
await BlurEmptyField("input-name");
|
||||
await Expect(FieldError("name")).ToBeVisibleAsync();
|
||||
|
||||
// Now fix it
|
||||
await FillAndBlur("input-name", "Alice");
|
||||
|
||||
var error = FieldError("name");
|
||||
await Expect(error).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Email_Blank_Shows_Required_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await BlurEmptyField("input-email");
|
||||
|
||||
var error = FieldError("email");
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
await Expect(error).ToHaveTextAsync("Email is required.");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Email_Invalid_Shows_Format_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await FillAndBlur("input-email", "notanemail");
|
||||
|
||||
var error = FieldError("email");
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
await Expect(error).ToHaveTextAsync("Please enter a valid email address.");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Email_Valid_Clears_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await BlurEmptyField("input-email");
|
||||
await Expect(FieldError("email")).ToBeVisibleAsync();
|
||||
|
||||
await FillAndBlur("input-email", "alice@example.com");
|
||||
await Expect(FieldError("email")).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Password_Blank_Shows_Required_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await BlurEmptyField("input-password");
|
||||
|
||||
var error = FieldError("password");
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
await Expect(error).ToHaveTextAsync("Password is required.");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Password_Too_Short_Shows_Length_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await FillAndBlur("input-password", "abc");
|
||||
|
||||
var error = FieldError("password");
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
await Expect(error).ToHaveTextAsync("Password must be at least 6 characters.");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Password_Valid_Clears_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await BlurEmptyField("input-password");
|
||||
await Expect(FieldError("password")).ToBeVisibleAsync();
|
||||
|
||||
await FillAndBlur("input-password", "secure123");
|
||||
await Expect(FieldError("password")).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Input gets destructive border styling on error
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Input_Gets_Destructive_Border_On_Error()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await BlurEmptyField("input-name");
|
||||
|
||||
var cls = await Input("input-name").GetAttributeAsync("class");
|
||||
Assert.That(cls, Does.Contain("border-destructive"), "Input should have destructive border on error");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Input_Loses_Destructive_Border_When_Valid()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await BlurEmptyField("input-name");
|
||||
|
||||
// Verify error styling is present
|
||||
var clsBefore = await Input("input-name").GetAttributeAsync("class");
|
||||
Assert.That(clsBefore, Does.Contain("border-destructive"));
|
||||
|
||||
// Fix the field
|
||||
await FillAndBlur("input-name", "Alice");
|
||||
|
||||
var clsAfter = await Input("input-name").GetAttributeAsync("class");
|
||||
Assert.That(clsAfter, Does.Not.Contain("border-destructive"), "Input should lose destructive border when valid");
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Full form submission validation
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Empty_Submit_Shows_All_Required_Errors()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
// Name, email, and password should show errors
|
||||
await Expect(FieldError("name")).ToBeVisibleAsync();
|
||||
await Expect(FieldError("email")).ToBeVisibleAsync();
|
||||
await Expect(FieldError("password")).ToBeVisibleAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Valid_Submit_Shows_Success_Message()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await FillAllValidFields();
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeVisibleAsync();
|
||||
await Expect(success).ToContainTextAsync("Form submitted successfully");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Valid_Submit_Clears_All_Errors()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// First trigger errors
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
await Expect(FieldError("name")).ToBeVisibleAsync();
|
||||
|
||||
// Now fill valid data and resubmit
|
||||
await FillAllValidFields();
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
await Expect(FieldError("name")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("email")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("password")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("confirmation")).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Partial_Submit_Shows_Only_Invalid_Errors()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Fill name only
|
||||
await Input("input-name").FillAsync("Alice");
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
// Name should be clear, email and password should show errors
|
||||
await Expect(FieldError("name")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("email")).ToBeVisibleAsync();
|
||||
await Expect(FieldError("password")).ToBeVisibleAsync();
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Reset clears validation state
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Reset_Clears_Validation_Errors()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Trigger errors
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
await Expect(FieldError("name")).ToBeVisibleAsync();
|
||||
|
||||
// Reset the form
|
||||
await Btn("btn-reset").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
await Expect(FieldError("name")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("email")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("password")).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Reset_Clears_Success_Message()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Submit valid form
|
||||
await FillAllValidFields();
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
await Expect(Page.Locator("[data-testid='success-message']")).ToBeVisibleAsync();
|
||||
|
||||
// Reset
|
||||
await Btn("btn-reset").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var result = Page.Locator("#form-result");
|
||||
await Expect(result).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Reset_Removes_Destructive_Border_Styling()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Trigger error on name
|
||||
await BlurEmptyField("input-name");
|
||||
var clsBefore = await Input("input-name").GetAttributeAsync("class");
|
||||
Assert.That(clsBefore, Does.Contain("border-destructive"));
|
||||
|
||||
// Reset
|
||||
await Btn("btn-reset").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var clsAfter = await Input("input-name").GetAttributeAsync("class");
|
||||
Assert.That(clsAfter, Does.Not.Contain("border-destructive"));
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Error elements exist for htmx targeting
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task FormField_Renders_Hidden_Error_Placeholder()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Each form field should have a hidden [data-field-error] element
|
||||
var nameError = FieldError("name");
|
||||
await Expect(nameError).ToHaveCountAsync(1);
|
||||
await Expect(nameError).ToBeHiddenAsync();
|
||||
|
||||
var emailError = FieldError("email");
|
||||
await Expect(emailError).ToHaveCountAsync(1);
|
||||
await Expect(emailError).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Custom validator — confirmation field must equal "CONFIRM"
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
[Test]
|
||||
public async Task Confirmation_Blank_Shows_Required_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await BlurEmptyField("input-confirmation");
|
||||
|
||||
var error = FieldError("confirmation");
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
await Expect(error).ToHaveTextAsync("Confirmation is required.");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Confirmation_Wrong_Value_Shows_Custom_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
await FillAndBlur("input-confirmation", "nope");
|
||||
|
||||
var error = FieldError("confirmation");
|
||||
await Expect(error).ToBeVisibleAsync();
|
||||
await Expect(error).ToHaveTextAsync("You must type CONFIRM to proceed.");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Confirmation_Correct_Value_Clears_Error_On_Blur()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Trigger error first
|
||||
await FillAndBlur("input-confirmation", "wrong");
|
||||
await Expect(FieldError("confirmation")).ToBeVisibleAsync();
|
||||
|
||||
// Now fix it
|
||||
await FillAndBlur("input-confirmation", "CONFIRM");
|
||||
await Expect(FieldError("confirmation")).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Confirmation_Error_Shows_On_Submit()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
// Fill everything except confirmation
|
||||
await Input("input-name").FillAsync("Alice Johnson");
|
||||
await Input("input-email").FillAsync("alice@example.com");
|
||||
await Input("input-password").FillAsync("secure123");
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
await Expect(FieldError("confirmation")).ToBeVisibleAsync();
|
||||
await Expect(FieldError("confirmation")).ToHaveTextAsync("Confirmation is required.");
|
||||
}
|
||||
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
// Date/Time/DateTime validation
|
||||
// ════════════════════════════════════════════════════════════════════════
|
||||
|
||||
private async Task SetHiddenInputValue(string inputId, string value)
|
||||
{
|
||||
await Page.EvaluateAsync($@"
|
||||
const el = document.getElementById('{inputId}');
|
||||
if (el) {{
|
||||
el.value = '{value}';
|
||||
el.dispatchEvent(new Event('change', {{ bubbles: true }}));
|
||||
}}
|
||||
");
|
||||
}
|
||||
|
||||
private ILocator PopoverPanelFor(string triggerId) =>
|
||||
Page.Locator($"[data-testid='{triggerId}']")
|
||||
.Locator("xpath=ancestor::*[@data-popover]")
|
||||
.Locator("[data-popover-panel]");
|
||||
|
||||
private ILocator PopoverBackdropFor(string triggerId) =>
|
||||
Page.Locator($"[data-testid='{triggerId}']")
|
||||
.Locator("xpath=ancestor::*[@data-popover]")
|
||||
.Locator("[data-popover-backdrop]");
|
||||
|
||||
private async Task SelectDateAsync(string triggerId, DateOnly target)
|
||||
{
|
||||
await Page.Locator($"[data-testid='{triggerId}']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor(triggerId);
|
||||
|
||||
var yearButton = panel.Locator("[data-calendar-year]");
|
||||
await yearButton.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
|
||||
var yearGrid = panel.Locator(".grid.grid-cols-4");
|
||||
var targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
|
||||
var attempts = 0;
|
||||
while (await targetYearBtn.CountAsync() == 0 && attempts < 10)
|
||||
{
|
||||
var firstYearText = await yearGrid.Locator("button").First.InnerTextAsync();
|
||||
var firstYear = int.Parse(firstYearText.Trim());
|
||||
if (target.Year < firstYear)
|
||||
await panel.Locator("button[aria-label='Previous month']").ClickAsync();
|
||||
else
|
||||
await panel.Locator("button[aria-label='Next month']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(100);
|
||||
yearGrid = panel.Locator(".grid.grid-cols-4");
|
||||
targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
|
||||
attempts++;
|
||||
}
|
||||
await targetYearBtn.First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
|
||||
var monthButton = panel.Locator("[data-calendar-month]");
|
||||
await monthButton.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
var monthGrid = panel.Locator(".grid.grid-cols-3");
|
||||
var targetMonthText = new DateOnly(2000, target.Month, 1).ToString("MMM");
|
||||
await monthGrid.Locator($"button:has-text('{targetMonthText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(150);
|
||||
|
||||
var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
|
||||
var dayButton = dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = target.Day.ToString() }).First;
|
||||
await dayButton.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
}
|
||||
|
||||
private async Task SelectTimeAsync(string triggerId, int hour, int minute)
|
||||
{
|
||||
await Page.Locator($"[data-testid='{triggerId}']").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
var panel = PopoverPanelFor(triggerId);
|
||||
|
||||
var isPm = hour >= 12;
|
||||
var hour12 = hour % 12;
|
||||
if (hour12 == 0) hour12 = 12;
|
||||
|
||||
var hourColumn = panel.Locator(".scrollbar-thin").First;
|
||||
await hourColumn.Locator($"button:has-text('{hour12:D2}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
|
||||
var minuteColumn = panel.Locator(".scrollbar-thin").Nth(1);
|
||||
await minuteColumn.Locator($"button:has-text('{minute:D2}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
|
||||
var periodText = isPm ? "PM" : "AM";
|
||||
await panel.Locator($"button:has-text('{periodText}')").First.ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(50);
|
||||
|
||||
var backdrop = PopoverBackdropFor(triggerId);
|
||||
await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
|
||||
await Page.WaitForTimeoutAsync(200);
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task BirthDate_Selected_Via_Popover_Submits_Successfully()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await FillAllValidFields();
|
||||
await SelectDateAsync("trigger-birthdate", new DateOnly(2000, 6, 15));
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeVisibleAsync();
|
||||
await Expect(FieldError("birthdate")).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task PreferredTime_Selected_Via_Popover_Submits_Successfully()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await FillAllValidFields();
|
||||
await SelectTimeAsync("trigger-preferredtime", 14, 30);
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeVisibleAsync();
|
||||
await Expect(FieldError("preferredtime")).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Appointment_Date_And_Time_Selected_Via_Popover_Submits_Successfully()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await FillAllValidFields();
|
||||
await SelectDateAsync("trigger-appointment-date", new DateOnly(2025, 12, 25));
|
||||
await SelectTimeAsync("trigger-appointment-time", 10, 30);
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeVisibleAsync();
|
||||
await Expect(FieldError("appointment")).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task BirthDate_Hidden_Input_Gets_Correct_Value_After_Selection()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await SelectDateAsync("trigger-birthdate", new DateOnly(1995, 3, 20));
|
||||
|
||||
var value = await Page.Locator("#birthdate").InputValueAsync();
|
||||
Assert.That(value, Is.EqualTo("1995-03-20"));
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task PreferredTime_Hidden_Input_Gets_Correct_Value_After_Selection()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await SelectTimeAsync("trigger-preferredtime", 9, 15);
|
||||
|
||||
var value = await Page.Locator("#preferredtime").InputValueAsync();
|
||||
Assert.That(value, Is.EqualTo("09:15"));
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Submit_With_Valid_Date_Time_DateTime_Via_Hidden_Input_Succeeds()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await FillAllValidFields();
|
||||
await SetHiddenInputValue("birthdate", "2000-06-15");
|
||||
await SetHiddenInputValue("preferredtime", "14:30");
|
||||
await SetHiddenInputValue("appointment", "2025-12-25T10:30");
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeVisibleAsync();
|
||||
await Expect(success).ToContainTextAsync("Form submitted successfully");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Submit_With_Empty_Optional_DateTime_Fields_Succeeds()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await FillAllValidFields();
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeVisibleAsync();
|
||||
|
||||
await Expect(FieldError("birthdate")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("preferredtime")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("appointment")).ToBeHiddenAsync();
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Submit_All_Fields_Including_DateTime_Shows_Success()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await FillAllValidFields();
|
||||
await SelectDateAsync("trigger-birthdate", new DateOnly(1990, 1, 15));
|
||||
await SelectTimeAsync("trigger-preferredtime", 16, 0);
|
||||
await SelectDateAsync("trigger-appointment-date", new DateOnly(2026, 6, 1));
|
||||
await SelectTimeAsync("trigger-appointment-time", 9, 0);
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
var success = Page.Locator("[data-testid='success-message']");
|
||||
await Expect(success).ToBeVisibleAsync();
|
||||
await Expect(success).ToContainTextAsync("Form submitted successfully");
|
||||
}
|
||||
|
||||
[Test]
|
||||
public async Task Reset_Clears_DateTime_Error_Placeholders()
|
||||
{
|
||||
await GoToFormsAsync();
|
||||
|
||||
await Btn("btn-submit").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(500);
|
||||
|
||||
await Btn("btn-reset").ClickAsync();
|
||||
await Page.WaitForTimeoutAsync(300);
|
||||
|
||||
await Expect(FieldError("birthdate")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("preferredtime")).ToBeHiddenAsync();
|
||||
await Expect(FieldError("appointment")).ToBeHiddenAsync();
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,22 @@
|
||||
<Project Sdk="Microsoft.NET.Sdk.Razor">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net9.0</TargetFramework>
|
||||
<TargetFramework>net10.0</TargetFramework>
|
||||
<Nullable>enable</Nullable>
|
||||
<ImplicitUsings>enable</ImplicitUsings>
|
||||
<PublishAot>true</PublishAot>
|
||||
|
||||
<IsPackable>true</IsPackable>
|
||||
<PackageId>Enciphered.Blazor.UIComponents</PackageId>
|
||||
<Version>0.0.1</Version>
|
||||
<Authors>shaamilahmed</Authors>
|
||||
<Company>nciphered</Company>
|
||||
<Description>Pure static SSR Blazor component library styled with Tailwind CSS v4 and shadcn/ui. All interactivity powered by vanilla JS. htmx-powered form validation.</Description>
|
||||
<PackageTags>blazor;ui;components;tailwind;htmx;ssr;static</PackageTags>
|
||||
<RepositoryUrl>https://git.nciphered.com/shaamilahmed/Enciphered.Blazor.UIComponents</RepositoryUrl>
|
||||
<PackageLicenseExpression></PackageLicenseExpression>
|
||||
<PackageProjectUrl>https://git.nciphered.com/shaamilahmed/Enciphered.Blazor.UIComponents</PackageProjectUrl>
|
||||
<PackageIcon>enci_white.png</PackageIcon>
|
||||
</PropertyGroup>
|
||||
|
||||
<Target Name="TailwindBuild" BeforeTargets="Build">
|
||||
@@ -12,10 +25,11 @@
|
||||
|
||||
<ItemGroup>
|
||||
<SupportedPlatform Include="browser" />
|
||||
<FrameworkReference Include="Microsoft.AspNetCore.App" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.14" />
|
||||
<None Include="./Logo/enci_white.png" Pack="true" PackagePath="\" />
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<button type="@Type"
|
||||
disabled="@Disabled"
|
||||
class="@ComputedClass"
|
||||
@onclick="OnClick"
|
||||
@attributes="AdditionalAttributes">
|
||||
@if (Icon is not null)
|
||||
{
|
||||
@@ -18,19 +17,9 @@
|
||||
[Parameter] public string Type { get; set; } = "button";
|
||||
[Parameter] public bool Disabled { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Visual variant — accepts any <see cref="ButtonVariant"/> constant
|
||||
/// or a custom Tailwind class string.
|
||||
/// </summary>
|
||||
[Parameter] public string Variant { get; set; } = ButtonVariant.Default;
|
||||
|
||||
/// <summary>
|
||||
/// Size preset — accepts any <see cref="ButtonSize"/> constant
|
||||
/// or a custom Tailwind class string.
|
||||
/// </summary>
|
||||
[Parameter] public string Size { get; set; } = ButtonSize.Default;
|
||||
|
||||
[Parameter] public EventCallback<Microsoft.AspNetCore.Components.Web.MouseEventArgs> OnClick { get; set; }
|
||||
[Parameter] public string? Class { get; set; }
|
||||
|
||||
[Parameter(CaptureUnmatchedValues = true)]
|
||||
|
||||
@@ -1,7 +1,26 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
|
||||
@* ── shadcn/ui-style calendar grid ────────────────────────────────────── *@
|
||||
<div class="p-4" @attributes="AdditionalAttributes">
|
||||
@* ── shadcn/ui-style calendar grid (JS-driven) ───────────────────────── *@
|
||||
@{
|
||||
var displayDate = SelectedDate ?? DateOnly.FromDateTime(DateTime.Today);
|
||||
var yearRangeStart = displayDate.Year - 10;
|
||||
var yearRangeEnd = displayDate.Year + 10;
|
||||
var selectedStr = SelectedDate.HasValue
|
||||
? SelectedDate.Value.ToString("yyyy-MM-dd")
|
||||
: "";
|
||||
}
|
||||
|
||||
<div class="p-4"
|
||||
data-calendar
|
||||
data-display-year="@displayDate.Year"
|
||||
data-display-month="@displayDate.Month"
|
||||
data-selected-date="@selectedStr"
|
||||
data-view="days"
|
||||
data-year-range-start="@yearRangeStart"
|
||||
data-year-range-end="@yearRangeEnd"
|
||||
data-linked-input="@LinkedInputId"
|
||||
@attributes="AdditionalAttributes">
|
||||
|
||||
@* ── Month / Year navigation ── *@
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<button type="button"
|
||||
@@ -9,7 +28,7 @@
|
||||
text-muted-foreground hover:bg-accent hover:text-accent-foreground
|
||||
transition-colors cursor-pointer"
|
||||
aria-label="Previous month"
|
||||
@onclick="Previous">
|
||||
data-calendar-prev>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m15 18-6-6 6-6"/>
|
||||
@@ -19,15 +38,13 @@
|
||||
<div class="flex items-center gap-1.5 text-sm font-medium">
|
||||
<button type="button"
|
||||
data-calendar-month
|
||||
class="px-2 py-0.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
|
||||
@onclick="ToggleMonthPicker">
|
||||
@_displayDate.ToString("MMM")
|
||||
class="px-2 py-0.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer">
|
||||
@displayDate.ToString("MMM")
|
||||
</button>
|
||||
<button type="button"
|
||||
data-calendar-year
|
||||
class="px-2 py-0.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer"
|
||||
@onclick="ToggleYearPicker">
|
||||
@_displayDate.Year
|
||||
class="px-2 py-0.5 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer">
|
||||
@displayDate.Year
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -36,7 +53,7 @@
|
||||
text-muted-foreground hover:bg-accent hover:text-accent-foreground
|
||||
transition-colors cursor-pointer"
|
||||
aria-label="Next month"
|
||||
@onclick="Next">
|
||||
data-calendar-next>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m9 18 6-6-6-6"/>
|
||||
@@ -44,215 +61,51 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (_showMonthPicker)
|
||||
{
|
||||
@* ── Month picker grid ── *@
|
||||
<div class="grid grid-cols-3 gap-2 py-2">
|
||||
@for (int m = 1; m <= 12; m++)
|
||||
{
|
||||
var month = m;
|
||||
var isCurrentMonth = _displayDate.Month == month;
|
||||
<button type="button"
|
||||
class="@($"h-9 rounded-md text-sm transition-colors cursor-pointer {(isCurrentMonth ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground")}")"
|
||||
@onclick="() => SelectMonth(month)">
|
||||
@(new DateOnly(2000, month, 1).ToString("MMM"))
|
||||
</button>
|
||||
@* ── Dynamic content area (rendered by JS) ── *@
|
||||
<div data-calendar-content>
|
||||
@* Server-rendered initial day grid for SSR — JS will take over *@
|
||||
@{
|
||||
var dayHeaders = new[] { "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" };
|
||||
var firstOfMonth = new DateOnly(displayDate.Year, displayDate.Month, 1);
|
||||
var startOffset = (int)firstOfMonth.DayOfWeek;
|
||||
var start = firstOfMonth.AddDays(-startOffset);
|
||||
var today = DateOnly.FromDateTime(DateTime.Today);
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else if (_showYearPicker)
|
||||
{
|
||||
@* ── Year picker grid ── *@
|
||||
<div class="grid grid-cols-4 gap-2 py-2 max-h-52 overflow-y-auto scrollbar-thin pr-1">
|
||||
@for (int y = _yearRangeStart; y <= _yearRangeEnd; y++)
|
||||
{
|
||||
var year = y;
|
||||
var isCurrentYear = _displayDate.Year == year;
|
||||
<button type="button"
|
||||
class="@($"h-9 rounded-md text-sm transition-colors cursor-pointer {(isCurrentYear ? "bg-primary text-primary-foreground" : "hover:bg-accent hover:text-accent-foreground")}")"
|
||||
@onclick="() => SelectYear(year)">
|
||||
@year
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
@* ── Day-of-week headers ── *@
|
||||
<div class="grid grid-cols-7 gap-1 mb-1">
|
||||
@foreach (var dow in _dayHeaders)
|
||||
@foreach (var dow in dayHeaders)
|
||||
{
|
||||
<div class="h-9 w-9 flex items-center justify-center text-[0.8rem] text-muted-foreground font-medium">
|
||||
@dow
|
||||
</div>
|
||||
<div class="h-9 w-9 flex items-center justify-center text-[0.8rem] text-muted-foreground font-medium">@dow</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@* ── Day grid ── *@
|
||||
<div class="grid grid-cols-7 gap-1">
|
||||
@foreach (var day in GetCalendarDays())
|
||||
@for (int i = 0; i < 42; i++)
|
||||
{
|
||||
var d = day;
|
||||
var d = start.AddDays(i);
|
||||
var isOutside = d.Month != displayDate.Month;
|
||||
var isSelected = SelectedDate.HasValue && d == SelectedDate.Value;
|
||||
var isToday = d == DateOnly.FromDateTime(DateTime.Today);
|
||||
var isOutside = d.Month != _displayDate.Month;
|
||||
var isToday = d == today;
|
||||
var dateStr = d.ToString("yyyy-MM-dd");
|
||||
|
||||
<button type="button"
|
||||
class="@DayCellClass(isSelected, isToday, isOutside)"
|
||||
disabled="@isOutside"
|
||||
@onclick="() => SelectDay(d)">
|
||||
@d.Day
|
||||
</button>
|
||||
var cls = "h-9 w-9 inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer";
|
||||
if (isSelected) { cls += " bg-primary text-primary-foreground font-semibold"; }
|
||||
else if (isOutside) { cls += " text-muted-foreground/40 cursor-default"; }
|
||||
else if (isToday) { cls += " bg-accent text-accent-foreground font-medium"; }
|
||||
else { cls += " hover:bg-accent hover:text-accent-foreground"; }
|
||||
|
||||
<button type="button" class="@cls" disabled="@isOutside" data-calendar-day="@dateStr">@d.Day</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
/// <summary>The currently selected date (two-way bindable).</summary>
|
||||
/// <summary>The currently selected date.</summary>
|
||||
[Parameter] public DateOnly? SelectedDate { get; set; }
|
||||
[Parameter] public EventCallback<DateOnly?> SelectedDateChanged { get; set; }
|
||||
|
||||
/// <summary>The id of the linked hidden input to update when a day is selected.</summary>
|
||||
[Parameter] public string? LinkedInputId { get; set; }
|
||||
|
||||
/// <summary>Any extra HTML attributes (data-testid, etc.).</summary>
|
||||
[Parameter(CaptureUnmatchedValues = true)]
|
||||
public Dictionary<string, object>? AdditionalAttributes { get; set; }
|
||||
|
||||
private DateOnly _displayDate;
|
||||
private bool _showMonthPicker;
|
||||
private bool _showYearPicker;
|
||||
private int _yearRangeStart;
|
||||
private int _yearRangeEnd;
|
||||
|
||||
private static readonly string[] _dayHeaders = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
_displayDate = SelectedDate ?? DateOnly.FromDateTime(DateTime.Today);
|
||||
UpdateYearRange();
|
||||
}
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
// If the selected date changes externally, navigate to that month
|
||||
if (SelectedDate.HasValue && (SelectedDate.Value.Year != _displayDate.Year || SelectedDate.Value.Month != _displayDate.Month))
|
||||
{
|
||||
_displayDate = new DateOnly(SelectedDate.Value.Year, SelectedDate.Value.Month, 1);
|
||||
UpdateYearRange();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Navigation ───────────────────────────────────────────────────────
|
||||
|
||||
private void Previous()
|
||||
{
|
||||
if (_showYearPicker)
|
||||
{
|
||||
// Shift year range back by 20
|
||||
_yearRangeStart -= 20;
|
||||
_yearRangeEnd -= 20;
|
||||
}
|
||||
else if (_showMonthPicker)
|
||||
{
|
||||
_displayDate = new DateOnly(_displayDate.Year - 1, _displayDate.Month, 1);
|
||||
UpdateYearRange();
|
||||
}
|
||||
else
|
||||
{
|
||||
_displayDate = _displayDate.AddMonths(-1);
|
||||
UpdateYearRange();
|
||||
}
|
||||
}
|
||||
|
||||
private void Next()
|
||||
{
|
||||
if (_showYearPicker)
|
||||
{
|
||||
// Shift year range forward by 20
|
||||
_yearRangeStart += 20;
|
||||
_yearRangeEnd += 20;
|
||||
}
|
||||
else if (_showMonthPicker)
|
||||
{
|
||||
_displayDate = new DateOnly(_displayDate.Year + 1, _displayDate.Month, 1);
|
||||
UpdateYearRange();
|
||||
}
|
||||
else
|
||||
{
|
||||
_displayDate = _displayDate.AddMonths(1);
|
||||
UpdateYearRange();
|
||||
}
|
||||
}
|
||||
|
||||
private void ToggleMonthPicker()
|
||||
{
|
||||
_showMonthPicker = !_showMonthPicker;
|
||||
_showYearPicker = false;
|
||||
}
|
||||
|
||||
private void ToggleYearPicker()
|
||||
{
|
||||
_showYearPicker = !_showYearPicker;
|
||||
_showMonthPicker = false;
|
||||
}
|
||||
|
||||
private void SelectMonth(int month)
|
||||
{
|
||||
_displayDate = new DateOnly(_displayDate.Year, month, 1);
|
||||
_showMonthPicker = false;
|
||||
}
|
||||
|
||||
private void SelectYear(int year)
|
||||
{
|
||||
_displayDate = new DateOnly(year, _displayDate.Month, 1);
|
||||
_showYearPicker = false;
|
||||
UpdateYearRange();
|
||||
}
|
||||
|
||||
private void UpdateYearRange()
|
||||
{
|
||||
_yearRangeStart = _displayDate.Year - 10;
|
||||
_yearRangeEnd = _displayDate.Year + 10;
|
||||
}
|
||||
|
||||
// ── Day selection ────────────────────────────────────────────────────
|
||||
|
||||
private async Task SelectDay(DateOnly date)
|
||||
{
|
||||
SelectedDate = date;
|
||||
_displayDate = new DateOnly(date.Year, date.Month, 1);
|
||||
await SelectedDateChanged.InvokeAsync(date);
|
||||
}
|
||||
|
||||
// ── Calendar generation ──────────────────────────────────────────────
|
||||
|
||||
private List<DateOnly> GetCalendarDays()
|
||||
{
|
||||
var days = new List<DateOnly>();
|
||||
var firstOfMonth = new DateOnly(_displayDate.Year, _displayDate.Month, 1);
|
||||
var startOffset = (int)firstOfMonth.DayOfWeek; // Sunday = 0
|
||||
|
||||
// Previous month's trailing days
|
||||
var start = firstOfMonth.AddDays(-startOffset);
|
||||
// Always show 6 rows (42 cells) for consistent height
|
||||
for (int i = 0; i < 42; i++)
|
||||
days.Add(start.AddDays(i));
|
||||
|
||||
return days;
|
||||
}
|
||||
|
||||
// ── CSS ──────────────────────────────────────────────────────────────
|
||||
|
||||
private static string DayCellClass(bool isSelected, bool isToday, bool isOutside)
|
||||
{
|
||||
const string baseClass = "h-9 w-9 inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer";
|
||||
|
||||
if (isSelected)
|
||||
return $"{baseClass} bg-primary text-primary-foreground font-semibold";
|
||||
if (isOutside)
|
||||
return $"{baseClass} text-muted-foreground/40 cursor-default";
|
||||
if (isToday)
|
||||
return $"{baseClass} bg-accent text-accent-foreground font-medium";
|
||||
|
||||
return $"{baseClass} hover:bg-accent hover:text-accent-foreground";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,24 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
@inherits InputBase<DateOnly?>
|
||||
|
||||
@* Hidden native input preserves form semantics, name, id, and data-testid for tests *@
|
||||
<input type="date"
|
||||
id="@Id"
|
||||
name="@Name"
|
||||
value="@FormatValue()"
|
||||
data-trigger-id="@($"trigger-{Id}")"
|
||||
data-placeholder="@(Placeholder ?? "Select date")"
|
||||
class="sr-only"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
disabled="@Disabled"
|
||||
@attributes="AdditionalAttributes" />
|
||||
@attributes="MergedAttributes" />
|
||||
|
||||
<Popover @ref="_popover">
|
||||
<Popover>
|
||||
<Trigger>
|
||||
<button type="button"
|
||||
disabled="@Disabled"
|
||||
data-testid="@($"trigger-{Id}")"
|
||||
class="@TriggerClass"
|
||||
@onclick="() => _popover?.Toggle()">
|
||||
@* Lucide calendar icon *@
|
||||
class="@TriggerClass">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mr-2 shrink-0 text-muted-foreground">
|
||||
@@ -33,7 +32,7 @@
|
||||
</button>
|
||||
</Trigger>
|
||||
<Content>
|
||||
<Calendar SelectedDate="@Value" SelectedDateChanged="OnCalendarDateChanged" />
|
||||
<Calendar SelectedDate="@Value" LinkedInputId="@Id" />
|
||||
</Content>
|
||||
</Popover>
|
||||
|
||||
@@ -41,8 +40,6 @@
|
||||
[Parameter] public string? Min { get; set; }
|
||||
[Parameter] public string? Max { get; set; }
|
||||
|
||||
private Popover? _popover;
|
||||
|
||||
private string? FormatValue() =>
|
||||
Value?.ToString("yyyy-MM-dd");
|
||||
|
||||
@@ -56,26 +53,9 @@
|
||||
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
|
||||
"disabled:cursor-not-allowed disabled:opacity-50";
|
||||
|
||||
var validation = GetTriggerValidationClass();
|
||||
return string.IsNullOrEmpty(Class)
|
||||
? $"{baseClass} {validation}"
|
||||
: $"{baseClass} {validation} {Class}";
|
||||
? $"{baseClass} border-input"
|
||||
: $"{baseClass} border-input {Class}";
|
||||
}
|
||||
}
|
||||
|
||||
[CascadingParameter] private EditContext? _cascadedEditContext { get; set; }
|
||||
|
||||
private string GetTriggerValidationClass()
|
||||
{
|
||||
if (_cascadedEditContext is null || FieldId is not { } fi) return "border-input";
|
||||
return _cascadedEditContext.GetValidationMessages(fi).Any()
|
||||
? "border-destructive focus-visible:ring-destructive"
|
||||
: "border-input";
|
||||
}
|
||||
|
||||
private async Task OnCalendarDateChanged(DateOnly? date)
|
||||
{
|
||||
await SetValueAsync(date);
|
||||
_popover?.Close();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
@inherits InputBase<DateTime?>
|
||||
|
||||
@* Hidden native input preserves form semantics, name, id, and data-testid for tests *@
|
||||
<input type="datetime-local"
|
||||
id="@Id"
|
||||
name="@Name"
|
||||
@@ -10,19 +9,28 @@
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
disabled="@Disabled"
|
||||
@attributes="AdditionalAttributes" />
|
||||
@attributes="MergedAttributes" />
|
||||
|
||||
<input type="hidden" id="@($"{Id}-date-part")"
|
||||
value="@(SelectedDateOnly?.ToString("yyyy-MM-dd") ?? "")"
|
||||
data-trigger-id="@($"trigger-{Id}-date")"
|
||||
data-placeholder="@(Placeholder ?? "Select date")"
|
||||
data-datetime-part="date"
|
||||
data-datetime-input-id="@Id" />
|
||||
<input type="hidden" id="@($"{Id}-time-part")"
|
||||
value="@(SelectedTimeOnly.HasValue ? SelectedTimeOnly.Value.ToString("HH:mm") : "")"
|
||||
data-trigger-id="@($"trigger-{Id}-time")"
|
||||
data-placeholder="Select time"
|
||||
data-datetime-part="time"
|
||||
data-datetime-input-id="@Id" />
|
||||
|
||||
@* ── Two side-by-side triggers: date field + time field ── *@
|
||||
<div class="flex gap-2">
|
||||
@* ── Date portion ── *@
|
||||
<Popover @ref="_datePopover">
|
||||
<Popover>
|
||||
<Trigger>
|
||||
<button type="button"
|
||||
disabled="@Disabled"
|
||||
data-testid="@($"trigger-{Id}-date")"
|
||||
class="@TriggerClass"
|
||||
@onclick="() => _datePopover?.Toggle()">
|
||||
@* Lucide calendar icon *@
|
||||
class="@TriggerClass">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mr-2 shrink-0 text-muted-foreground">
|
||||
@@ -36,19 +44,16 @@
|
||||
</button>
|
||||
</Trigger>
|
||||
<Content>
|
||||
<Calendar SelectedDate="@SelectedDateOnly" SelectedDateChanged="OnDatePartChanged" />
|
||||
<Calendar SelectedDate="@SelectedDateOnly" LinkedInputId="@($"{Id}-date-part")" />
|
||||
</Content>
|
||||
</Popover>
|
||||
|
||||
@* ── Time portion ── *@
|
||||
<Popover @ref="_timePopover">
|
||||
<Popover>
|
||||
<Trigger>
|
||||
<button type="button"
|
||||
disabled="@Disabled"
|
||||
data-testid="@($"trigger-{Id}-time")"
|
||||
class="@TriggerClass"
|
||||
@onclick="() => _timePopover?.Toggle()">
|
||||
@* Lucide clock icon *@
|
||||
class="@TriggerClass">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mr-2 shrink-0 text-muted-foreground">
|
||||
@@ -61,7 +66,7 @@
|
||||
</button>
|
||||
</Trigger>
|
||||
<Content>
|
||||
<TimePicker SelectedTime="@SelectedTimeOnly" SelectedTimeChanged="OnTimePartChanged" Use12Hour="true" />
|
||||
<TimePicker SelectedTime="@SelectedTimeOnly" Use12Hour="true" LinkedInputId="@($"{Id}-time-part")" />
|
||||
</Content>
|
||||
</Popover>
|
||||
</div>
|
||||
@@ -70,14 +75,8 @@
|
||||
[Parameter] public string? Min { get; set; }
|
||||
[Parameter] public string? Max { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Step in seconds. Use "1" for second precision, "60" (default) for minutes only.
|
||||
/// </summary>
|
||||
[Parameter] public string? Step { get; set; }
|
||||
|
||||
private Popover? _datePopover;
|
||||
private Popover? _timePopover;
|
||||
|
||||
private DateOnly? SelectedDateOnly =>
|
||||
Value.HasValue ? DateOnly.FromDateTime(Value.Value) : null;
|
||||
|
||||
@@ -97,35 +96,9 @@
|
||||
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
|
||||
"disabled:cursor-not-allowed disabled:opacity-50";
|
||||
|
||||
var validation = GetTriggerValidationClass();
|
||||
return string.IsNullOrEmpty(Class)
|
||||
? $"{baseClass} {validation}"
|
||||
: $"{baseClass} {validation} {Class}";
|
||||
? $"{baseClass} border-input"
|
||||
: $"{baseClass} border-input {Class}";
|
||||
}
|
||||
}
|
||||
|
||||
[CascadingParameter] private EditContext? _cascadedEditContext { get; set; }
|
||||
|
||||
private string GetTriggerValidationClass()
|
||||
{
|
||||
if (_cascadedEditContext is null || FieldId is not { } fi) return "border-input";
|
||||
return _cascadedEditContext.GetValidationMessages(fi).Any()
|
||||
? "border-destructive focus-visible:ring-destructive"
|
||||
: "border-input";
|
||||
}
|
||||
|
||||
private async Task OnDatePartChanged(DateOnly? date)
|
||||
{
|
||||
if (date is null) return;
|
||||
var timePart = SelectedTimeOnly ?? new TimeOnly(0, 0);
|
||||
await SetValueAsync(date.Value.ToDateTime(timePart));
|
||||
_datePopover?.Close();
|
||||
}
|
||||
|
||||
private async Task OnTimePartChanged(TimeOnly? time)
|
||||
{
|
||||
if (time is null) return;
|
||||
var datePart = SelectedDateOnly ?? DateOnly.FromDateTime(DateTime.Today);
|
||||
await SetValueAsync(datePart.ToDateTime(time.Value));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
|
||||
<div class="@ComputedClass">
|
||||
<div class="@ComputedClass" data-form-field="@For">
|
||||
@if (!string.IsNullOrEmpty(Label))
|
||||
{
|
||||
<label for="@For"
|
||||
@@ -9,7 +9,9 @@
|
||||
</label>
|
||||
}
|
||||
|
||||
<CascadingValue Value="@For" Name="FieldName">
|
||||
@ChildContent
|
||||
</CascadingValue>
|
||||
|
||||
@if (!string.IsNullOrEmpty(Description))
|
||||
{
|
||||
@@ -18,33 +20,23 @@
|
||||
|
||||
@if (!string.IsNullOrEmpty(Error))
|
||||
{
|
||||
<p class="text-[0.8rem] font-medium text-destructive">@Error</p>
|
||||
<p data-field-error="@For" class="text-[0.8rem] font-medium text-destructive">@Error</p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<p data-field-error="@For" class="text-[0.8rem] font-medium text-destructive hidden"></p>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
/// <summary>Label text displayed above the input.</summary>
|
||||
[Parameter] public string? Label { get; set; }
|
||||
|
||||
/// <summary>The id of the associated input (for the label's "for" attribute).</summary>
|
||||
[Parameter] public string? For { get; set; }
|
||||
|
||||
/// <summary>Help text displayed below the input.</summary>
|
||||
[Parameter] public string? Description { get; set; }
|
||||
|
||||
/// <summary>Validation error message displayed below the input.</summary>
|
||||
[Parameter] public string? Error { get; set; }
|
||||
|
||||
/// <summary>The input component(s) to render inside the field.</summary>
|
||||
[Parameter] public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
/// <summary>Additional CSS classes for the wrapper div.</summary>
|
||||
[Parameter] public string? Class { get; set; }
|
||||
|
||||
/// <summary>Additional CSS classes for the label element.</summary>
|
||||
[Parameter] public string? LabelClass { get; set; }
|
||||
|
||||
private const string BaseClass = "space-y-2";
|
||||
|
||||
private string ComputedClass => string.IsNullOrEmpty(Class) ? BaseClass : $"{BaseClass} {Class}";
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
|
||||
<CascadingValue Value="@ValidationEndpoint" Name="ValidationEndpoint">
|
||||
<form hx-post="@SubmitUrl"
|
||||
hx-target="@ResultSelector"
|
||||
hx-swap="outerHTML"
|
||||
data-enhance="false"
|
||||
class="@ComputedClass"
|
||||
@attributes="AdditionalAttributes">
|
||||
|
||||
<div class="space-y-4">
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<div id="@ResultId" class="hidden"></div>
|
||||
</form>
|
||||
</CascadingValue>
|
||||
|
||||
@code {
|
||||
[Parameter, EditorRequired] public string Endpoint { get; set; } = "";
|
||||
[Parameter] public RenderFragment? ChildContent { get; set; }
|
||||
[Parameter] public string? Class { get; set; }
|
||||
[Parameter] public string ResultId { get; set; } = "form-result";
|
||||
[Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
|
||||
|
||||
private string ValidationEndpoint => $"{Endpoint.TrimEnd('/')}/validate";
|
||||
private string SubmitUrl => $"{Endpoint.TrimEnd('/')}/submit";
|
||||
private string ResultSelector => $"#{ResultId}";
|
||||
private string ComputedClass => Class ?? "";
|
||||
}
|
||||
@@ -1,25 +1,10 @@
|
||||
using System.Diagnostics.CodeAnalysis;
|
||||
using System.Linq.Expressions;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Forms;
|
||||
|
||||
namespace Enciphered.Blazor.UIComponents;
|
||||
|
||||
/// <summary>
|
||||
/// Abstract base for all form input components. Provides two-way binding
|
||||
/// (<see cref="Value"/>/<see cref="ValueChanged"/>/<see cref="ValueExpression"/>),
|
||||
/// optional <see cref="EditContext"/> integration for validation CSS,
|
||||
/// and attribute splatting via <see cref="AdditionalAttributes"/>.
|
||||
/// </summary>
|
||||
public abstract class InputBase<TValue> : ComponentBase
|
||||
{
|
||||
// ── Two-way binding triad ────────────────────────────────────────────────
|
||||
|
||||
[Parameter] public TValue? Value { get; set; }
|
||||
[Parameter] public EventCallback<TValue> ValueChanged { get; set; }
|
||||
[Parameter] public Expression<Func<TValue>>? ValueExpression { get; set; }
|
||||
|
||||
// ── Common parameters ────────────────────────────────────────────────────
|
||||
|
||||
[Parameter] public string? Id { get; set; }
|
||||
[Parameter] public string? Name { get; set; }
|
||||
@@ -28,46 +13,14 @@ public abstract class InputBase<TValue> : ComponentBase
|
||||
[Parameter] public string? Placeholder { get; set; }
|
||||
[Parameter] public string? Class { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// Arbitrary HTML attributes forwarded to the root element via <c>@attributes</c>.
|
||||
/// Allows consumers to pass <c>required</c>, <c>aria-*</c>, <c>data-*</c>,
|
||||
/// <c>maxlength</c>, etc. without the component needing to declare them.
|
||||
/// </summary>
|
||||
[Parameter(CaptureUnmatchedValues = true)]
|
||||
public Dictionary<string, object>? AdditionalAttributes { get; set; }
|
||||
|
||||
// ── EditContext integration (optional) ────────────────────────────────────
|
||||
[CascadingParameter(Name = "ValidationEndpoint")]
|
||||
public string? ValidationEndpoint { get; set; }
|
||||
|
||||
[CascadingParameter] private EditContext? EditContext { get; set; }
|
||||
|
||||
private FieldIdentifier? _fieldIdentifier;
|
||||
|
||||
protected FieldIdentifier? FieldId => _fieldIdentifier;
|
||||
|
||||
// ── Lifecycle ────────────────────────────────────────────────────────────
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
if (ValueExpression is not null)
|
||||
_fieldIdentifier = FieldIdentifier.Create(ValueExpression);
|
||||
}
|
||||
|
||||
// ── Value helpers ────────────────────────────────────────────────────────
|
||||
|
||||
/// <summary>
|
||||
/// Called by derived components when the user changes the value.
|
||||
/// Fires <see cref="ValueChanged"/> and notifies the <see cref="EditContext"/>.
|
||||
/// </summary>
|
||||
protected async Task SetValueAsync(TValue? value)
|
||||
{
|
||||
Value = value;
|
||||
await ValueChanged.InvokeAsync(value);
|
||||
|
||||
if (EditContext is not null && _fieldIdentifier is FieldIdentifier fi)
|
||||
EditContext.NotifyFieldChanged(fi);
|
||||
}
|
||||
|
||||
// ── CSS helpers ──────────────────────────────────────────────────────────
|
||||
[CascadingParameter(Name = "FieldName")]
|
||||
public string? FieldName { get; set; }
|
||||
|
||||
private const string BaseInputClass =
|
||||
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm " +
|
||||
@@ -75,26 +28,31 @@ public abstract class InputBase<TValue> : ComponentBase
|
||||
"placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
|
||||
"disabled:cursor-not-allowed disabled:opacity-50";
|
||||
|
||||
/// <summary>
|
||||
/// Computes the full CSS class string: base + validation state + consumer override.
|
||||
/// </summary>
|
||||
protected string ComputedClass
|
||||
protected string ComputedClass =>
|
||||
string.IsNullOrEmpty(Class) ? BaseInputClass : $"{BaseInputClass} {Class}";
|
||||
|
||||
protected Dictionary<string, object> MergedAttributes
|
||||
{
|
||||
get
|
||||
{
|
||||
var validation = GetValidationClass();
|
||||
return string.IsNullOrEmpty(Class)
|
||||
? string.IsNullOrEmpty(validation) ? BaseInputClass : $"{BaseInputClass} {validation}"
|
||||
: string.IsNullOrEmpty(validation) ? $"{BaseInputClass} {Class}" : $"{BaseInputClass} {validation} {Class}";
|
||||
}
|
||||
}
|
||||
var attrs = AdditionalAttributes is not null
|
||||
? new Dictionary<string, object>(AdditionalAttributes)
|
||||
: new Dictionary<string, object>();
|
||||
|
||||
private string? GetValidationClass()
|
||||
if (!string.IsNullOrEmpty(ValidationEndpoint) &&
|
||||
!string.IsNullOrEmpty(FieldName) &&
|
||||
!attrs.ContainsKey("hx-post"))
|
||||
{
|
||||
if (EditContext is null || _fieldIdentifier is not FieldIdentifier fi)
|
||||
return null;
|
||||
attrs["hx-post"] = ValidationEndpoint;
|
||||
attrs["hx-trigger"] = "blur";
|
||||
attrs["hx-target"] = "next [data-field-error]";
|
||||
attrs["hx-swap"] = "outerHTML";
|
||||
attrs["hx-include"] = "this";
|
||||
attrs["hx-vals"] = $"{{\"_field\": \"{FieldName}\"}}";
|
||||
}
|
||||
|
||||
var isValid = !EditContext.GetValidationMessages(fi).Any();
|
||||
return isValid ? "border-input" : "border-destructive focus-visible:ring-destructive";
|
||||
return attrs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
@inherits InputBase<double?>
|
||||
|
||||
<div class="relative flex items-center">
|
||||
<div class="relative flex items-center" data-number-input>
|
||||
<input id="@Id"
|
||||
name="@Name"
|
||||
type="number"
|
||||
@@ -13,8 +13,7 @@
|
||||
min="@Min"
|
||||
max="@Max"
|
||||
class="@ComputedClass [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none pr-8"
|
||||
@oninput="OnInput"
|
||||
@attributes="AdditionalAttributes" />
|
||||
@attributes="MergedAttributes" />
|
||||
|
||||
@if (!Disabled && !ReadOnly)
|
||||
{
|
||||
@@ -26,7 +25,7 @@
|
||||
hover:text-foreground hover:bg-accent transition-colors
|
||||
rounded-tr-md cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled="@IsAtMax"
|
||||
@onclick="Increment">
|
||||
data-number-increment>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m18 15-6-6-6 6"/>
|
||||
@@ -40,7 +39,7 @@
|
||||
hover:text-foreground hover:bg-accent transition-colors
|
||||
rounded-br-md cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
|
||||
disabled="@IsAtMin"
|
||||
@onclick="Decrement">
|
||||
data-number-decrement>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m6 9 6 6 6-6"/>
|
||||
@@ -55,38 +54,9 @@
|
||||
[Parameter] public string? Min { get; set; }
|
||||
[Parameter] public string? Max { get; set; }
|
||||
|
||||
private double StepValue => double.TryParse(Step, out var s) ? s : 1;
|
||||
private double? MinValue => double.TryParse(Min, out var m) ? m : null;
|
||||
private double? MaxValue => double.TryParse(Max, out var m) ? m : null;
|
||||
private double? MinValue => double.TryParse(Min, out var m) ? m : null;
|
||||
|
||||
private bool IsAtMax => Value.HasValue && MaxValue.HasValue && Value.Value >= MaxValue.Value;
|
||||
private bool IsAtMin => Value.HasValue && MinValue.HasValue && Value.Value <= MinValue.Value;
|
||||
|
||||
private async Task OnInput(ChangeEventArgs e)
|
||||
{
|
||||
var raw = e.Value?.ToString();
|
||||
if (double.TryParse(raw, out var parsed))
|
||||
await SetValueAsync(Clamp(parsed));
|
||||
else if (string.IsNullOrWhiteSpace(raw))
|
||||
await SetValueAsync(null);
|
||||
}
|
||||
|
||||
private async Task Increment()
|
||||
{
|
||||
var current = Value ?? 0;
|
||||
await SetValueAsync(Clamp(current + StepValue));
|
||||
}
|
||||
|
||||
private async Task Decrement()
|
||||
{
|
||||
var current = Value ?? 0;
|
||||
await SetValueAsync(Clamp(current - StepValue));
|
||||
}
|
||||
|
||||
private double Clamp(double value)
|
||||
{
|
||||
if (MinValue.HasValue && value < MinValue.Value) return MinValue.Value;
|
||||
if (MaxValue.HasValue && value > MaxValue.Value) return MaxValue.Value;
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
|
||||
@* ── Generic popover: trigger + dropdown panel ───────────────────────── *@
|
||||
<div class="relative inline-block w-full" @attributes="AdditionalAttributes">
|
||||
@* ── Generic popover: trigger + dropdown panel (JS-driven) ──────────── *@
|
||||
<div class="relative inline-block w-full" data-popover data-popover-open="false" @attributes="AdditionalAttributes">
|
||||
<div data-popover-trigger>
|
||||
@Trigger
|
||||
</div>
|
||||
|
||||
@if (_open)
|
||||
{
|
||||
@* Backdrop to close on outside click *@
|
||||
<div class="fixed inset-0 z-40" @onclick="Close" @onclick:stopPropagation></div>
|
||||
<div class="fixed inset-0 z-40" data-popover-backdrop style="display:none"></div>
|
||||
|
||||
<div class="absolute left-0 z-50 mt-1.5 rounded-lg border border-input bg-popover text-popover-foreground shadow-md
|
||||
animate-in fade-in-0 zoom-in-95 origin-top-left"
|
||||
@onclick:stopPropagation>
|
||||
data-popover-panel style="display:none">
|
||||
@Content
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@code {
|
||||
@@ -24,35 +23,7 @@
|
||||
/// <summary>The popover content.</summary>
|
||||
[Parameter] public RenderFragment? Content { get; set; }
|
||||
|
||||
/// <summary>Any extra HTML attributes.</summary>
|
||||
/// <summary>Any extra HTML attributes (data-testid, etc.).</summary>
|
||||
[Parameter(CaptureUnmatchedValues = true)]
|
||||
public Dictionary<string, object>? AdditionalAttributes { get; set; }
|
||||
|
||||
private bool _open;
|
||||
|
||||
/// <summary>Toggle the popover open/closed. Call from the trigger button.</summary>
|
||||
public void Toggle()
|
||||
{
|
||||
_open = !_open;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
/// <summary>Close the popover.</summary>
|
||||
public void Close()
|
||||
{
|
||||
if (!_open) return;
|
||||
_open = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
/// <summary>Open the popover.</summary>
|
||||
public void Open()
|
||||
{
|
||||
if (_open) return;
|
||||
_open = true;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
/// <summary>Whether the popover is currently open.</summary>
|
||||
public bool IsOpen => _open;
|
||||
}
|
||||
|
||||
@@ -9,18 +9,8 @@
|
||||
disabled="@Disabled"
|
||||
readonly="@ReadOnly"
|
||||
class="@ComputedClass"
|
||||
@oninput="OnInput"
|
||||
@attributes="AdditionalAttributes" />
|
||||
@attributes="MergedAttributes" />
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// HTML input type. Defaults to "text".
|
||||
/// Supports: text, email, password, url, tel, search.
|
||||
/// </summary>
|
||||
[Parameter] public string Type { get; set; } = "text";
|
||||
|
||||
private async Task OnInput(ChangeEventArgs e)
|
||||
{
|
||||
await SetValueAsync(e.Value?.ToString());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,25 +1,24 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
@inherits InputBase<TimeOnly?>
|
||||
|
||||
@* Hidden native input preserves form semantics, name, id, and data-testid for tests *@
|
||||
<input type="time"
|
||||
id="@Id"
|
||||
name="@Name"
|
||||
value="@FormatValue()"
|
||||
data-trigger-id="@($"trigger-{Id}")"
|
||||
data-placeholder="@(Placeholder ?? "Select time")"
|
||||
class="sr-only"
|
||||
tabindex="-1"
|
||||
aria-hidden="true"
|
||||
disabled="@Disabled"
|
||||
@attributes="AdditionalAttributes" />
|
||||
@attributes="MergedAttributes" />
|
||||
|
||||
<Popover @ref="_popover">
|
||||
<Popover>
|
||||
<Trigger>
|
||||
<button type="button"
|
||||
disabled="@Disabled"
|
||||
data-testid="@($"trigger-{Id}")"
|
||||
class="@TriggerClass"
|
||||
@onclick="() => _popover?.Toggle()">
|
||||
@* Lucide clock icon *@
|
||||
class="@TriggerClass">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
class="mr-2 shrink-0 text-muted-foreground">
|
||||
@@ -32,21 +31,14 @@
|
||||
</button>
|
||||
</Trigger>
|
||||
<Content>
|
||||
<TimePicker SelectedTime="@Value" SelectedTimeChanged="OnTimeChanged" Use12Hour="true" MinuteStep="@ParsedMinuteStep" />
|
||||
<TimePicker SelectedTime="@Value" Use12Hour="true" MinuteStep="@ParsedMinuteStep" LinkedInputId="@Id" />
|
||||
</Content>
|
||||
</Popover>
|
||||
|
||||
@code {
|
||||
/// <summary>
|
||||
/// Step in seconds. Use "1" for second precision, "60" (default) for minutes only.
|
||||
/// </summary>
|
||||
[Parameter] public string? Step { get; set; }
|
||||
|
||||
/// <summary>Use 12-hour format with AM/PM. Default is true.</summary>
|
||||
[Parameter] public bool Use12Hour { get; set; } = true;
|
||||
|
||||
private Popover? _popover;
|
||||
|
||||
private int ParsedMinuteStep => int.TryParse(Step, out var s) && s >= 60 ? s / 60 : 1;
|
||||
|
||||
private string? FormatValue() =>
|
||||
@@ -62,25 +54,9 @@
|
||||
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
|
||||
"disabled:cursor-not-allowed disabled:opacity-50";
|
||||
|
||||
var validation = GetTriggerValidationClass();
|
||||
return string.IsNullOrEmpty(Class)
|
||||
? $"{baseClass} {validation}"
|
||||
: $"{baseClass} {validation} {Class}";
|
||||
? $"{baseClass} border-input"
|
||||
: $"{baseClass} border-input {Class}";
|
||||
}
|
||||
}
|
||||
|
||||
[CascadingParameter] private EditContext? _cascadedEditContext { get; set; }
|
||||
|
||||
private string GetTriggerValidationClass()
|
||||
{
|
||||
if (_cascadedEditContext is null || FieldId is not { } fi) return "border-input";
|
||||
return _cascadedEditContext.GetValidationMessages(fi).Any()
|
||||
? "border-destructive focus-visible:ring-destructive"
|
||||
: "border-input";
|
||||
}
|
||||
|
||||
private async Task OnTimeChanged(TimeOnly? time)
|
||||
{
|
||||
await SetValueAsync(time);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,19 +1,50 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
|
||||
@* ── shadcn/ui-style time picker with scrollable columns ─────────────── *@
|
||||
<div class="flex items-stretch gap-1 p-4" @attributes="AdditionalAttributes">
|
||||
@* ── shadcn/ui-style time picker with scrollable columns (JS-driven) ── *@
|
||||
@{
|
||||
var use12 = Use12Hour;
|
||||
var minStep = MinuteStep < 1 ? 1 : MinuteStep;
|
||||
var selHour = 0;
|
||||
var selMinute = 0;
|
||||
var isPm = false;
|
||||
|
||||
if (SelectedTime is { } t)
|
||||
{
|
||||
if (use12)
|
||||
{
|
||||
isPm = t.Hour >= 12;
|
||||
selHour = t.Hour % 12;
|
||||
selMinute = t.Minute;
|
||||
}
|
||||
else
|
||||
{
|
||||
selHour = t.Hour;
|
||||
selMinute = t.Minute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<div class="flex items-stretch gap-1 p-4"
|
||||
data-timepicker
|
||||
data-selected-hour="@selHour"
|
||||
data-selected-minute="@selMinute"
|
||||
data-selected-pm="@(isPm ? "true" : "false")"
|
||||
data-use-12-hour="@(use12 ? "true" : "false")"
|
||||
data-linked-input="@LinkedInputId"
|
||||
@attributes="AdditionalAttributes">
|
||||
|
||||
@* ── Hour column ── *@
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-xs font-medium text-muted-foreground mb-2">Hr</span>
|
||||
<div class="h-52 w-16 overflow-y-auto flex flex-col gap-1 scrollbar-thin pr-1">
|
||||
@for (int h = 0; h < (_use12Hour ? 12 : 24); h++)
|
||||
@for (int h = 0; h < (use12 ? 12 : 24); h++)
|
||||
{
|
||||
var hour = _use12Hour ? (h == 0 ? 12 : h) : h;
|
||||
var hour = use12 ? (h == 0 ? 12 : h) : h;
|
||||
var hourValue = h;
|
||||
var isSelected = _selectedHour == hourValue;
|
||||
var isSelected = selHour == hourValue;
|
||||
<button type="button"
|
||||
class="@TimeItemClass(isSelected)"
|
||||
@onclick="() => SelectHour(hourValue)">
|
||||
data-tp-hour="@hourValue">
|
||||
@hour.ToString("D2")
|
||||
</button>
|
||||
}
|
||||
@@ -26,20 +57,20 @@
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-xs font-medium text-muted-foreground mb-2">Min</span>
|
||||
<div class="h-52 w-16 overflow-y-auto flex flex-col gap-1 scrollbar-thin pr-1">
|
||||
@for (int m = 0; m < 60; m += _minuteStep)
|
||||
@for (int m = 0; m < 60; m += minStep)
|
||||
{
|
||||
var minute = m;
|
||||
var isSelected = _selectedMinute == minute;
|
||||
var isSel = selMinute == minute;
|
||||
<button type="button"
|
||||
class="@TimeItemClass(isSelected)"
|
||||
@onclick="() => SelectMinute(minute)">
|
||||
class="@TimeItemClass(isSel)"
|
||||
data-tp-minute="@minute">
|
||||
@minute.ToString("D2")
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (_use12Hour)
|
||||
@if (use12)
|
||||
{
|
||||
<div class="flex items-center px-1"></div>
|
||||
|
||||
@@ -48,13 +79,13 @@
|
||||
<span class="text-xs font-medium text-muted-foreground mb-2"> </span>
|
||||
<div class="flex flex-col gap-1">
|
||||
<button type="button"
|
||||
class="@TimeItemClass(!_isPm)"
|
||||
@onclick='() => SelectPeriod(false)'>
|
||||
class="@TimeItemClass(!isPm)"
|
||||
data-tp-period="am">
|
||||
AM
|
||||
</button>
|
||||
<button type="button"
|
||||
class="@TimeItemClass(_isPm)"
|
||||
@onclick='() => SelectPeriod(true)'>
|
||||
class="@TimeItemClass(isPm)"
|
||||
data-tp-period="pm">
|
||||
PM
|
||||
</button>
|
||||
</div>
|
||||
@@ -63,9 +94,8 @@
|
||||
</div>
|
||||
|
||||
@code {
|
||||
/// <summary>The currently selected time (two-way bindable).</summary>
|
||||
/// <summary>The currently selected time (for initial render).</summary>
|
||||
[Parameter] public TimeOnly? SelectedTime { get; set; }
|
||||
[Parameter] public EventCallback<TimeOnly?> SelectedTimeChanged { get; set; }
|
||||
|
||||
/// <summary>Use 12-hour format with AM/PM. Default is false (24-hour).</summary>
|
||||
[Parameter] public bool Use12Hour { get; set; }
|
||||
@@ -73,74 +103,13 @@
|
||||
/// <summary>Minute step interval. Default is 1.</summary>
|
||||
[Parameter] public int MinuteStep { get; set; } = 1;
|
||||
|
||||
/// <summary>The id of the linked hidden input to sync time value to.</summary>
|
||||
[Parameter] public string? LinkedInputId { get; set; }
|
||||
|
||||
/// <summary>Any extra HTML attributes.</summary>
|
||||
[Parameter(CaptureUnmatchedValues = true)]
|
||||
public Dictionary<string, object>? AdditionalAttributes { get; set; }
|
||||
|
||||
private int _selectedHour;
|
||||
private int _selectedMinute;
|
||||
private bool _isPm;
|
||||
private bool _use12Hour;
|
||||
private int _minuteStep = 1;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
_use12Hour = Use12Hour;
|
||||
_minuteStep = MinuteStep < 1 ? 1 : MinuteStep;
|
||||
ApplyFromValue();
|
||||
}
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
_use12Hour = Use12Hour;
|
||||
_minuteStep = MinuteStep < 1 ? 1 : MinuteStep;
|
||||
ApplyFromValue();
|
||||
}
|
||||
|
||||
private void ApplyFromValue()
|
||||
{
|
||||
if (SelectedTime is { } t)
|
||||
{
|
||||
if (_use12Hour)
|
||||
{
|
||||
_isPm = t.Hour >= 12;
|
||||
_selectedHour = t.Hour % 12;
|
||||
_selectedMinute = t.Minute;
|
||||
}
|
||||
else
|
||||
{
|
||||
_selectedHour = t.Hour;
|
||||
_selectedMinute = t.Minute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async Task SelectHour(int hour)
|
||||
{
|
||||
_selectedHour = hour;
|
||||
await EmitValue();
|
||||
}
|
||||
|
||||
private async Task SelectMinute(int minute)
|
||||
{
|
||||
_selectedMinute = minute;
|
||||
await EmitValue();
|
||||
}
|
||||
|
||||
private async Task SelectPeriod(bool isPm)
|
||||
{
|
||||
_isPm = isPm;
|
||||
await EmitValue();
|
||||
}
|
||||
|
||||
private async Task EmitValue()
|
||||
{
|
||||
var hour = _use12Hour ? (_selectedHour % 12) + (_isPm ? 12 : 0) : _selectedHour;
|
||||
var time = new TimeOnly(hour, _selectedMinute);
|
||||
SelectedTime = time;
|
||||
await SelectedTimeChanged.InvokeAsync(time);
|
||||
}
|
||||
|
||||
private static string TimeItemClass(bool isSelected)
|
||||
{
|
||||
const string baseClass = "h-9 w-full inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer";
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
|
||||
using System.Globalization;
|
||||
using System.Reflection;
|
||||
using System.Diagnostics.CodeAnalysis;
|
||||
using Microsoft.AspNetCore.Http;
|
||||
|
||||
namespace Enciphered.Blazor.UIComponents.Validation;
|
||||
|
||||
public static class FormModelBinder
|
||||
{
|
||||
public static TModel Bind<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.PublicProperties)] TModel>(IFormCollection form) where TModel : new()
|
||||
{
|
||||
var model = new TModel();
|
||||
PropertyInfo[] props = typeof(TModel).GetProperties(BindingFlags.Public | BindingFlags.Instance);
|
||||
|
||||
foreach (var prop in props)
|
||||
{
|
||||
if (!prop.CanWrite) continue;
|
||||
|
||||
var key = form.Keys.FirstOrDefault(k =>
|
||||
string.Equals(k, prop.Name, StringComparison.OrdinalIgnoreCase));
|
||||
|
||||
if (key is null) continue;
|
||||
|
||||
var raw = form[key].ToString();
|
||||
var value = ConvertValue(raw, prop.PropertyType);
|
||||
if (value is not null)
|
||||
prop.SetValue(model, value);
|
||||
}
|
||||
|
||||
return model;
|
||||
}
|
||||
|
||||
private static object? ConvertValue(string raw, Type target)
|
||||
{
|
||||
var underlying = Nullable.GetUnderlyingType(target);
|
||||
var isNullable = underlying is not null;
|
||||
var type = underlying ?? target;
|
||||
|
||||
if (string.IsNullOrWhiteSpace(raw))
|
||||
return isNullable ? null : (type == typeof(string) ? "" : null);
|
||||
|
||||
if (type == typeof(string)) return raw;
|
||||
if (type == typeof(int)) return int.TryParse(raw, out var i) ? i : null;
|
||||
if (type == typeof(long)) return long.TryParse(raw, out var l) ? l : null;
|
||||
if (type == typeof(double)) return double.TryParse(raw, CultureInfo.InvariantCulture, out var d) ? d : null;
|
||||
if (type == typeof(decimal)) return decimal.TryParse(raw, CultureInfo.InvariantCulture, out var m) ? m : null;
|
||||
if (type == typeof(float)) return float.TryParse(raw, CultureInfo.InvariantCulture, out var f) ? f : null;
|
||||
if (type == typeof(bool)) return bool.TryParse(raw, out var b) ? b : raw == "on" || raw == "1";
|
||||
if (type == typeof(DateTime)) return DateTime.TryParse(raw, CultureInfo.InvariantCulture, DateTimeStyles.None, out var dt) ? dt : null;
|
||||
if (type == typeof(DateOnly)) return DateOnly.TryParse(raw, CultureInfo.InvariantCulture, DateTimeStyles.None, out var d2) ? d2 : null;
|
||||
if (type == typeof(TimeOnly)) return TimeOnly.TryParse(raw, CultureInfo.InvariantCulture, out var t) ? t : null;
|
||||
if (type == typeof(Guid)) return Guid.TryParse(raw, out var g) ? g : null;
|
||||
if (type.IsEnum) return Enum.TryParse(type, raw, ignoreCase: true, out var e) ? e : null;
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
using System.Text.RegularExpressions;
|
||||
|
||||
namespace Enciphered.Blazor.UIComponents.Validation;
|
||||
|
||||
public sealed class FormValidationRule
|
||||
{
|
||||
public required string Field { get; init; }
|
||||
public string? DisplayName { get; init; }
|
||||
public bool Required { get; init; }
|
||||
public int? MinLength { get; init; }
|
||||
public int? MaxLength { get; init; }
|
||||
public string? Pattern { get; init; }
|
||||
public double? Min { get; init; }
|
||||
public double? Max { get; init; }
|
||||
public string? Message { get; init; }
|
||||
public Func<string, string?>? Custom { get; init; }
|
||||
|
||||
public string? Validate(string? value)
|
||||
{
|
||||
var label = DisplayName ?? ToTitleCase(Field);
|
||||
var v = value?.Trim() ?? "";
|
||||
|
||||
if (Required && string.IsNullOrWhiteSpace(v))
|
||||
return $"{label} is required.";
|
||||
|
||||
if (string.IsNullOrWhiteSpace(v))
|
||||
return null;
|
||||
|
||||
if (MinLength.HasValue && v.Length < MinLength.Value)
|
||||
return $"{label} must be at least {MinLength.Value} characters.";
|
||||
|
||||
if (MaxLength.HasValue && v.Length > MaxLength.Value)
|
||||
return $"{label} must be at most {MaxLength.Value} characters.";
|
||||
|
||||
if (Pattern is not null && !Regex.IsMatch(v, Pattern))
|
||||
return Message ?? $"{label} is not in the correct format.";
|
||||
|
||||
if (Min.HasValue || Max.HasValue)
|
||||
{
|
||||
if (!double.TryParse(v, out var num))
|
||||
return $"{label} must be a number.";
|
||||
if (Min.HasValue && num < Min.Value)
|
||||
return $"{label} must be at least {Min.Value}.";
|
||||
if (Max.HasValue && num > Max.Value)
|
||||
return $"{label} must be at most {Max.Value}.";
|
||||
}
|
||||
|
||||
if (Custom is not null)
|
||||
{
|
||||
var customError = Custom(v);
|
||||
if (customError is not null)
|
||||
return customError;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
private static string ToTitleCase(string field)
|
||||
{
|
||||
if (string.IsNullOrEmpty(field)) return field;
|
||||
var sb = new System.Text.StringBuilder();
|
||||
sb.Append(char.ToUpper(field[0]));
|
||||
for (int i = 1; i < field.Length; i++)
|
||||
{
|
||||
if (char.IsUpper(field[i]))
|
||||
sb.Append(' ');
|
||||
sb.Append(field[i]);
|
||||
}
|
||||
return sb.ToString();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
namespace Enciphered.Blazor.UIComponents.Validation;
|
||||
|
||||
public abstract class FormValidator
|
||||
{
|
||||
private readonly List<FormValidationRule> _rules = [];
|
||||
|
||||
public IReadOnlyList<FormValidationRule> Rules => _rules;
|
||||
public IEnumerable<string> Fields => _rules.Select(r => r.Field);
|
||||
|
||||
protected void RuleFor(
|
||||
string field,
|
||||
string? displayName = null,
|
||||
bool required = false,
|
||||
int? minLength = null,
|
||||
int? maxLength = null,
|
||||
string? pattern = null,
|
||||
double? min = null,
|
||||
double? max = null,
|
||||
string? message = null,
|
||||
Func<string, string?>? custom = null)
|
||||
{
|
||||
_rules.Add(new FormValidationRule
|
||||
{
|
||||
Field = field,
|
||||
DisplayName = displayName,
|
||||
Required = required,
|
||||
MinLength = minLength,
|
||||
MaxLength = maxLength,
|
||||
Pattern = pattern,
|
||||
Min = min,
|
||||
Max = max,
|
||||
Message = message,
|
||||
Custom = custom
|
||||
});
|
||||
}
|
||||
|
||||
public string? ValidateField(string field, string? value)
|
||||
{
|
||||
var rule = _rules.FirstOrDefault(r => r.Field == field);
|
||||
return rule?.Validate(value);
|
||||
}
|
||||
|
||||
public Dictionary<string, string> ValidateAll(Func<string, string?> valueAccessor)
|
||||
{
|
||||
var errors = new Dictionary<string, string>();
|
||||
foreach (var rule in _rules)
|
||||
{
|
||||
var value = valueAccessor(rule.Field);
|
||||
var error = rule.Validate(value);
|
||||
if (error is not null)
|
||||
errors[rule.Field] = error;
|
||||
}
|
||||
return errors;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
using System.Diagnostics.CodeAnalysis;
|
||||
using Microsoft.AspNetCore.Builder;
|
||||
using Microsoft.AspNetCore.Http;
|
||||
using Microsoft.AspNetCore.Routing;
|
||||
|
||||
namespace Enciphered.Blazor.UIComponents.Validation;
|
||||
|
||||
public static class HtmxFormValidationExtensions
|
||||
{
|
||||
public static RouteGroupBuilder MapFormValidation<TValidator>(
|
||||
this IEndpointRouteBuilder endpoints,
|
||||
string basePath,
|
||||
string successMessage = "✓ Form submitted successfully!",
|
||||
Func<HttpContext, Task>? onSuccess = null)
|
||||
where TValidator : FormValidator, new()
|
||||
{
|
||||
var validator = new TValidator();
|
||||
return MapEndpoints(endpoints, basePath, validator, successMessage, onSuccess);
|
||||
}
|
||||
|
||||
public static RouteGroupBuilder MapFormValidation<TValidator, [DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.PublicProperties)] TModel>(
|
||||
this IEndpointRouteBuilder endpoints,
|
||||
string basePath,
|
||||
Func<TModel, Task> onSuccess,
|
||||
string successMessage = "✓ Form submitted successfully!")
|
||||
where TValidator : FormValidator, new()
|
||||
where TModel : new()
|
||||
{
|
||||
var validator = new TValidator();
|
||||
return MapEndpoints(endpoints, basePath, validator, successMessage, async ctx =>
|
||||
{
|
||||
var model = FormModelBinder.Bind<TModel>(ctx.Request.Form);
|
||||
await onSuccess(model);
|
||||
});
|
||||
}
|
||||
|
||||
private static RouteGroupBuilder MapEndpoints(
|
||||
IEndpointRouteBuilder endpoints,
|
||||
string basePath,
|
||||
FormValidator validator,
|
||||
string successMessage,
|
||||
Func<HttpContext, Task>? onSuccess)
|
||||
{
|
||||
var group = endpoints.MapGroup(basePath);
|
||||
|
||||
group.MapPost("/validate", (HttpContext ctx) =>
|
||||
{
|
||||
var form = ctx.Request.Form;
|
||||
var field = form["_field"].ToString();
|
||||
var value = form.ContainsKey(field) ? form[field].ToString() : "";
|
||||
|
||||
var error = validator.ValidateField(field, value);
|
||||
var html = HtmxFormValidationRenderer.FieldErrorFragment(field, error);
|
||||
|
||||
return Results.Content(html, "text/html");
|
||||
}).DisableAntiforgery();
|
||||
|
||||
group.MapPost("/submit", async (HttpContext ctx) =>
|
||||
{
|
||||
var form = ctx.Request.Form;
|
||||
var errors = validator.ValidateAll(f => form.ContainsKey(f) ? form[f].ToString() : "");
|
||||
|
||||
ctx.Response.ContentType = "text/html; charset=utf-8";
|
||||
|
||||
if (errors.Count > 0)
|
||||
{
|
||||
var html = HtmxFormValidationRenderer.ErrorResponse(validator.Fields, errors);
|
||||
return Results.Content(html, "text/html");
|
||||
}
|
||||
|
||||
if (onSuccess is not null)
|
||||
await onSuccess(ctx);
|
||||
|
||||
var successHtml = HtmxFormValidationRenderer.SuccessResponse(validator.Fields, successMessage);
|
||||
return Results.Content(successHtml, "text/html");
|
||||
}).DisableAntiforgery();
|
||||
|
||||
return group;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
using System.Net;
|
||||
|
||||
namespace Enciphered.Blazor.UIComponents.Validation;
|
||||
|
||||
public static class HtmxFormValidationRenderer
|
||||
{
|
||||
private const string ErrorClasses = "text-[0.8rem] font-medium text-destructive";
|
||||
private const string HiddenClass = "hidden";
|
||||
private const string SuccessClasses =
|
||||
"rounded-md border border-green-500/30 bg-green-500/10 p-3 text-sm text-green-600 dark:text-green-400";
|
||||
|
||||
public static string FieldErrorFragment(string field, string? error)
|
||||
{
|
||||
var safeField = WebUtility.HtmlEncode(field);
|
||||
if (string.IsNullOrEmpty(error))
|
||||
return $"<p data-field-error=\"{safeField}\" class=\"{ErrorClasses} {HiddenClass}\"></p>";
|
||||
var safeError = WebUtility.HtmlEncode(error);
|
||||
return $"<p data-field-error=\"{safeField}\" class=\"{ErrorClasses}\">{safeError}</p>";
|
||||
}
|
||||
|
||||
public static string OobFieldErrorFragment(string field, string? error)
|
||||
{
|
||||
var safeField = WebUtility.HtmlEncode(field);
|
||||
var oobAttr = $"hx-swap-oob=\"outerHTML:[data-field-error='{safeField}']\"";
|
||||
if (string.IsNullOrEmpty(error))
|
||||
return $"<p data-field-error=\"{safeField}\" {oobAttr} class=\"{ErrorClasses} {HiddenClass}\"></p>";
|
||||
var safeError = WebUtility.HtmlEncode(error);
|
||||
return $"<p data-field-error=\"{safeField}\" {oobAttr} class=\"{ErrorClasses}\">{safeError}</p>";
|
||||
}
|
||||
|
||||
public static string ErrorResponse(
|
||||
IEnumerable<string> allFields,
|
||||
Dictionary<string, string> errors,
|
||||
string resultDivId = "form-result")
|
||||
{
|
||||
var html = "";
|
||||
foreach (var field in allFields)
|
||||
{
|
||||
errors.TryGetValue(field, out var err);
|
||||
html += OobFieldErrorFragment(field, err) + "\n";
|
||||
}
|
||||
html += $"<div id=\"{resultDivId}\" class=\"{HiddenClass}\"></div>";
|
||||
return html;
|
||||
}
|
||||
|
||||
public static string SuccessResponse(
|
||||
IEnumerable<string> allFields,
|
||||
string successMessage,
|
||||
string resultDivId = "form-result",
|
||||
string? testId = "success-message")
|
||||
{
|
||||
var html = "";
|
||||
foreach (var field in allFields)
|
||||
html += OobFieldErrorFragment(field, null) + "\n";
|
||||
var testIdAttr = testId is not null ? $" data-testid=\"{testId}\"" : "";
|
||||
html += $"<div id=\"{resultDivId}\">";
|
||||
html += $"<div{testIdAttr} class=\"{SuccessClasses}\">";
|
||||
html += WebUtility.HtmlEncode(successMessage);
|
||||
html += "</div></div>";
|
||||
return html;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
@@ -0,0 +1,26 @@
|
||||
@namespace Enciphered.Blazor.UIComponents
|
||||
@typeparam TItem
|
||||
|
||||
<div class="w-full overflow-auto rounded-md border border-zinc-800">
|
||||
<table class="w-full caption-bottom text-sm">
|
||||
<thead class="bg-zinc-900/50">
|
||||
<tr class="border-b border-zinc-800 transition-colors">
|
||||
@Columns
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="[&_tr:last-child]:border-0">
|
||||
@foreach (TItem item in Items)
|
||||
{
|
||||
<tr class="border-b border-zinc-800 transition-colors hover:bg-zinc-900/50 text-center">
|
||||
@RowTemplate(item)
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public required IReadOnlyList<TItem> Items { get; set; }
|
||||
[Parameter] public required RenderFragment Columns { get; set; }
|
||||
[Parameter] public required RenderFragment<TItem> RowTemplate { get; set; }
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,619 @@
|
||||
let initialized = false;
|
||||
let bodyObserver = null;
|
||||
|
||||
function openPopover(wrapper) {
|
||||
const panel = wrapper.querySelector('[data-popover-panel]');
|
||||
const backdrop = wrapper.querySelector('[data-popover-backdrop]');
|
||||
if (!panel) return;
|
||||
panel.style.display = '';
|
||||
if (backdrop) backdrop.style.display = '';
|
||||
wrapper.setAttribute('data-popover-open', 'true');
|
||||
}
|
||||
|
||||
function closePopover(wrapper) {
|
||||
const panel = wrapper.querySelector('[data-popover-panel]');
|
||||
const backdrop = wrapper.querySelector('[data-popover-backdrop]');
|
||||
if (!panel) return;
|
||||
panel.style.display = 'none';
|
||||
if (backdrop) backdrop.style.display = 'none';
|
||||
wrapper.setAttribute('data-popover-open', 'false');
|
||||
}
|
||||
|
||||
function togglePopover(wrapper) {
|
||||
const isOpen = wrapper.getAttribute('data-popover-open') === 'true';
|
||||
if (isOpen) closePopover(wrapper);
|
||||
else openPopover(wrapper);
|
||||
}
|
||||
|
||||
const DAY_HEADERS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
||||
const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
function getCalendarState(cal) {
|
||||
return {
|
||||
displayYear: parseInt(cal.getAttribute('data-display-year')),
|
||||
displayMonth: parseInt(cal.getAttribute('data-display-month')),
|
||||
selectedDate: cal.getAttribute('data-selected-date') || '',
|
||||
view: cal.getAttribute('data-view') || 'days', // 'days' | 'months' | 'years'
|
||||
yearRangeStart: parseInt(cal.getAttribute('data-year-range-start') || '0'),
|
||||
yearRangeEnd: parseInt(cal.getAttribute('data-year-range-end') || '0'),
|
||||
};
|
||||
}
|
||||
|
||||
function setCalendarState(cal, state) {
|
||||
cal.setAttribute('data-display-year', state.displayYear);
|
||||
cal.setAttribute('data-display-month', state.displayMonth);
|
||||
if (state.selectedDate !== undefined) cal.setAttribute('data-selected-date', state.selectedDate);
|
||||
cal.setAttribute('data-view', state.view);
|
||||
cal.setAttribute('data-year-range-start', state.yearRangeStart);
|
||||
cal.setAttribute('data-year-range-end', state.yearRangeEnd);
|
||||
renderCalendar(cal);
|
||||
}
|
||||
|
||||
function getCalendarDays(year, month) {
|
||||
const days = [];
|
||||
const firstOfMonth = new Date(year, month - 1, 1);
|
||||
const startOffset = firstOfMonth.getDay(); // Sunday = 0
|
||||
const start = new Date(firstOfMonth);
|
||||
start.setDate(start.getDate() - startOffset);
|
||||
for (let i = 0; i < 42; i++) {
|
||||
const d = new Date(start);
|
||||
d.setDate(d.getDate() + i);
|
||||
days.push(d);
|
||||
}
|
||||
return days;
|
||||
}
|
||||
|
||||
function formatDateISO(d) {
|
||||
const yyyy = d.getFullYear();
|
||||
const mm = String(d.getMonth() + 1).padStart(2, '0');
|
||||
const dd = String(d.getDate()).padStart(2, '0');
|
||||
return `${yyyy}-${mm}-${dd}`;
|
||||
}
|
||||
|
||||
function parseDateISO(str) {
|
||||
if (!str) return null;
|
||||
const [y, m, d] = str.split('-').map(Number);
|
||||
return new Date(y, m - 1, d);
|
||||
}
|
||||
|
||||
function isSameDay(a, b) {
|
||||
return a.getFullYear() === b.getFullYear() &&
|
||||
a.getMonth() === b.getMonth() &&
|
||||
a.getDate() === b.getDate();
|
||||
}
|
||||
|
||||
function renderCalendar(cal) {
|
||||
const state = getCalendarState(cal);
|
||||
const contentEl = cal.querySelector('[data-calendar-content]');
|
||||
if (!contentEl) return;
|
||||
|
||||
const monthLabel = cal.querySelector('[data-calendar-month]');
|
||||
const yearLabel = cal.querySelector('[data-calendar-year]');
|
||||
if (monthLabel) monthLabel.textContent = MONTH_NAMES_SHORT[state.displayMonth - 1];
|
||||
if (yearLabel) yearLabel.textContent = state.displayYear;
|
||||
|
||||
const selectedParsed = parseDateISO(state.selectedDate);
|
||||
const today = new Date();
|
||||
|
||||
if (state.view === 'months') {
|
||||
contentEl.innerHTML = renderMonthPicker(state);
|
||||
} else if (state.view === 'years') {
|
||||
contentEl.innerHTML = renderYearPicker(state);
|
||||
} else {
|
||||
contentEl.innerHTML = renderDayGrid(state, selectedParsed, today);
|
||||
}
|
||||
}
|
||||
|
||||
function renderDayGrid(state, selectedParsed, today) {
|
||||
const baseBtn = 'h-9 w-9 inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer';
|
||||
|
||||
let html = '<div class="grid grid-cols-7 gap-1 mb-1">';
|
||||
for (const dow of DAY_HEADERS) {
|
||||
html += `<div class="h-9 w-9 flex items-center justify-center text-[0.8rem] text-muted-foreground font-medium">${dow}</div>`;
|
||||
}
|
||||
html += '</div><div class="grid grid-cols-7 gap-1">';
|
||||
|
||||
const days = getCalendarDays(state.displayYear, state.displayMonth);
|
||||
for (const d of days) {
|
||||
const isOutside = d.getMonth() !== state.displayMonth - 1;
|
||||
const isSelected = selectedParsed && isSameDay(d, selectedParsed);
|
||||
const isToday = isSameDay(d, today);
|
||||
const dateStr = formatDateISO(d);
|
||||
|
||||
let cls = baseBtn;
|
||||
if (isSelected) cls += ' bg-primary text-primary-foreground font-semibold';
|
||||
else if (isOutside) cls += ' text-muted-foreground/40 cursor-default';
|
||||
else if (isToday) cls += ' bg-accent text-accent-foreground font-medium';
|
||||
else cls += ' hover:bg-accent hover:text-accent-foreground';
|
||||
|
||||
html += `<button type="button" class="${cls}" ${isOutside ? 'disabled' : ''} data-calendar-day="${dateStr}">${d.getDate()}</button>`;
|
||||
}
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderMonthPicker(state) {
|
||||
let html = '<div class="grid grid-cols-3 gap-2 py-2">';
|
||||
for (let m = 0; m < 12; m++) {
|
||||
const isCurrent = state.displayMonth === m + 1;
|
||||
const cls = isCurrent
|
||||
? 'h-9 rounded-md text-sm transition-colors cursor-pointer bg-primary text-primary-foreground'
|
||||
: 'h-9 rounded-md text-sm transition-colors cursor-pointer hover:bg-accent hover:text-accent-foreground';
|
||||
html += `<button type="button" class="${cls}" data-calendar-select-month="${m + 1}">${MONTH_NAMES_SHORT[m]}</button>`;
|
||||
}
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderYearPicker(state) {
|
||||
let html = '<div class="grid grid-cols-4 gap-2 py-2 max-h-52 overflow-y-auto scrollbar-thin pr-1">';
|
||||
for (let y = state.yearRangeStart; y <= state.yearRangeEnd; y++) {
|
||||
const isCurrent = state.displayYear === y;
|
||||
const cls = isCurrent
|
||||
? 'h-9 rounded-md text-sm transition-colors cursor-pointer bg-primary text-primary-foreground'
|
||||
: 'h-9 rounded-md text-sm transition-colors cursor-pointer hover:bg-accent hover:text-accent-foreground';
|
||||
html += `<button type="button" class="${cls}" data-calendar-select-year="${y}">${y}</button>`;
|
||||
}
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function calendarPrev(cal) {
|
||||
const state = getCalendarState(cal);
|
||||
if (state.view === 'years') {
|
||||
state.yearRangeStart -= 20;
|
||||
state.yearRangeEnd -= 20;
|
||||
} else if (state.view === 'months') {
|
||||
state.displayYear--;
|
||||
state.yearRangeStart = state.displayYear - 10;
|
||||
state.yearRangeEnd = state.displayYear + 10;
|
||||
} else {
|
||||
state.displayMonth--;
|
||||
if (state.displayMonth < 1) { state.displayMonth = 12; state.displayYear--; }
|
||||
state.yearRangeStart = state.displayYear - 10;
|
||||
state.yearRangeEnd = state.displayYear + 10;
|
||||
}
|
||||
setCalendarState(cal, state);
|
||||
}
|
||||
|
||||
function calendarNext(cal) {
|
||||
const state = getCalendarState(cal);
|
||||
if (state.view === 'years') {
|
||||
state.yearRangeStart += 20;
|
||||
state.yearRangeEnd += 20;
|
||||
} else if (state.view === 'months') {
|
||||
state.displayYear++;
|
||||
state.yearRangeStart = state.displayYear - 10;
|
||||
state.yearRangeEnd = state.displayYear + 10;
|
||||
} else {
|
||||
state.displayMonth++;
|
||||
if (state.displayMonth > 12) { state.displayMonth = 1; state.displayYear++; }
|
||||
state.yearRangeStart = state.displayYear - 10;
|
||||
state.yearRangeEnd = state.displayYear + 10;
|
||||
}
|
||||
setCalendarState(cal, state);
|
||||
}
|
||||
|
||||
function getTimePickerState(tp) {
|
||||
return {
|
||||
hour: parseInt(tp.getAttribute('data-selected-hour') || '0'),
|
||||
minute: parseInt(tp.getAttribute('data-selected-minute') || '0'),
|
||||
isPm: tp.getAttribute('data-selected-pm') === 'true',
|
||||
use12Hour: tp.getAttribute('data-use-12-hour') === 'true',
|
||||
};
|
||||
}
|
||||
|
||||
function setTimePickerState(tp, state) {
|
||||
tp.setAttribute('data-selected-hour', state.hour);
|
||||
tp.setAttribute('data-selected-minute', state.minute);
|
||||
tp.setAttribute('data-selected-pm', state.isPm);
|
||||
renderTimePicker(tp);
|
||||
}
|
||||
|
||||
function renderTimePicker(tp) {
|
||||
const state = getTimePickerState(tp);
|
||||
|
||||
tp.querySelectorAll('[data-tp-hour]').forEach(btn => {
|
||||
const val = parseInt(btn.getAttribute('data-tp-hour'));
|
||||
updateTimeItemSelected(btn, val === state.hour);
|
||||
});
|
||||
tp.querySelectorAll('[data-tp-minute]').forEach(btn => {
|
||||
const val = parseInt(btn.getAttribute('data-tp-minute'));
|
||||
updateTimeItemSelected(btn, val === state.minute);
|
||||
});
|
||||
tp.querySelectorAll('[data-tp-period]').forEach(btn => {
|
||||
const isPm = btn.getAttribute('data-tp-period') === 'pm';
|
||||
updateTimeItemSelected(btn, isPm === state.isPm);
|
||||
});
|
||||
}
|
||||
|
||||
function updateTimeItemSelected(btn, isSelected) {
|
||||
const base = 'h-9 w-full inline-flex items-center justify-center rounded-md text-sm transition-colors cursor-pointer';
|
||||
if (isSelected) {
|
||||
btn.className = base + ' bg-primary text-primary-foreground font-semibold';
|
||||
} else {
|
||||
btn.className = base + ' hover:bg-accent hover:text-accent-foreground';
|
||||
}
|
||||
}
|
||||
|
||||
function getTimePickerValue(tp) {
|
||||
const state = getTimePickerState(tp);
|
||||
let hour = state.hour;
|
||||
if (state.use12Hour) {
|
||||
hour = (state.hour % 12) + (state.isPm ? 12 : 0);
|
||||
}
|
||||
return { hour, minute: state.minute };
|
||||
}
|
||||
|
||||
function formatTime24(hour, minute) {
|
||||
return String(hour).padStart(2, '0') + ':' + String(minute).padStart(2, '0');
|
||||
}
|
||||
|
||||
function formatTime12(hour, minute) {
|
||||
const isPm = hour >= 12;
|
||||
let h12 = hour % 12;
|
||||
if (h12 === 0) h12 = 12;
|
||||
return String(h12).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ' ' + (isPm ? 'PM' : 'AM');
|
||||
}
|
||||
|
||||
function handleNumberIncrement(wrapper, direction) {
|
||||
const input = wrapper.querySelector('input[type="number"]');
|
||||
if (!input) return;
|
||||
|
||||
const step = parseFloat(input.getAttribute('step')) || 1;
|
||||
const min = input.hasAttribute('min') ? parseFloat(input.getAttribute('min')) : null;
|
||||
const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max')) : null;
|
||||
|
||||
let current = parseFloat(input.value) || 0;
|
||||
current += step * direction;
|
||||
|
||||
if (min !== null && current < min) current = min;
|
||||
if (max !== null && current > max) current = max;
|
||||
|
||||
input.value = current;
|
||||
input.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
input.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
|
||||
updateStepperDisabledState(wrapper);
|
||||
}
|
||||
|
||||
function updateStepperDisabledState(wrapper) {
|
||||
const input = wrapper.querySelector('input[type="number"]');
|
||||
if (!input) return;
|
||||
|
||||
const min = input.hasAttribute('min') ? parseFloat(input.getAttribute('min')) : null;
|
||||
const max = input.hasAttribute('max') ? parseFloat(input.getAttribute('max')) : null;
|
||||
const val = parseFloat(input.value);
|
||||
|
||||
const incBtn = wrapper.querySelector('[data-number-increment]');
|
||||
const decBtn = wrapper.querySelector('[data-number-decrement]');
|
||||
|
||||
if (incBtn) {
|
||||
incBtn.disabled = (max !== null && !isNaN(val) && val >= max);
|
||||
}
|
||||
if (decBtn) {
|
||||
decBtn.disabled = (min !== null && !isNaN(val) && val <= min);
|
||||
}
|
||||
}
|
||||
|
||||
function syncDateTriggerText(hiddenInput) {
|
||||
const triggerId = hiddenInput.getAttribute('data-trigger-id');
|
||||
if (!triggerId) return;
|
||||
const trigger = document.querySelector(`[data-testid="${triggerId}"]`);
|
||||
if (!trigger) return;
|
||||
const span = trigger.querySelector('span');
|
||||
if (!span) return;
|
||||
|
||||
const val = hiddenInput.value;
|
||||
if (val) {
|
||||
const [y, m, d] = val.split('-').map(Number);
|
||||
const date = new Date(y, m - 1, d);
|
||||
const isDateTimePart = hiddenInput.hasAttribute('data-datetime-part');
|
||||
const options = isDateTimePart
|
||||
? { month: 'short', day: 'numeric', year: 'numeric' }
|
||||
: { month: 'long', day: 'numeric', year: 'numeric' };
|
||||
span.textContent = date.toLocaleDateString('en-US', options);
|
||||
span.classList.remove('text-muted-foreground');
|
||||
} else {
|
||||
span.textContent = hiddenInput.getAttribute('data-placeholder') || 'Select date';
|
||||
span.classList.add('text-muted-foreground');
|
||||
}
|
||||
}
|
||||
|
||||
function syncTimeTriggerText(hiddenInput) {
|
||||
const triggerId = hiddenInput.getAttribute('data-trigger-id');
|
||||
if (!triggerId) return;
|
||||
const trigger = document.querySelector(`[data-testid="${triggerId}"]`);
|
||||
if (!trigger) return;
|
||||
const span = trigger.querySelector('span');
|
||||
if (!span) return;
|
||||
|
||||
const val = hiddenInput.value;
|
||||
if (val) {
|
||||
const [h, m] = val.split(':').map(Number);
|
||||
span.textContent = formatTime12(h, m);
|
||||
span.classList.remove('text-muted-foreground');
|
||||
} else {
|
||||
span.textContent = hiddenInput.getAttribute('data-placeholder') || 'Select time';
|
||||
span.classList.add('text-muted-foreground');
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick(e) {
|
||||
const target = e.target;
|
||||
|
||||
const popoverTrigger = target.closest('[data-popover-trigger]');
|
||||
if (popoverTrigger) {
|
||||
const wrapper = popoverTrigger.closest('[data-popover]');
|
||||
if (wrapper) {
|
||||
e.stopPropagation();
|
||||
togglePopover(wrapper);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const backdrop = target.closest('[data-popover-backdrop]');
|
||||
if (backdrop) {
|
||||
const wrapper = backdrop.closest('[data-popover]');
|
||||
if (wrapper) {
|
||||
e.stopPropagation();
|
||||
closePopover(wrapper);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const prevBtn = target.closest('[data-calendar-prev]');
|
||||
if (prevBtn) {
|
||||
const cal = prevBtn.closest('[data-calendar]');
|
||||
if (cal) { calendarPrev(cal); return; }
|
||||
}
|
||||
|
||||
const nextBtn = target.closest('[data-calendar-next]');
|
||||
if (nextBtn) {
|
||||
const cal = nextBtn.closest('[data-calendar]');
|
||||
if (cal) { calendarNext(cal); return; }
|
||||
}
|
||||
|
||||
const monthHeader = target.closest('[data-calendar-month]');
|
||||
if (monthHeader) {
|
||||
const cal = monthHeader.closest('[data-calendar]');
|
||||
if (cal) {
|
||||
const state = getCalendarState(cal);
|
||||
state.view = state.view === 'months' ? 'days' : 'months';
|
||||
setCalendarState(cal, state);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const yearHeader = target.closest('[data-calendar-year]');
|
||||
if (yearHeader) {
|
||||
const cal = yearHeader.closest('[data-calendar]');
|
||||
if (cal) {
|
||||
const state = getCalendarState(cal);
|
||||
state.view = state.view === 'years' ? 'days' : 'years';
|
||||
setCalendarState(cal, state);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const monthBtn = target.closest('[data-calendar-select-month]');
|
||||
if (monthBtn) {
|
||||
const cal = monthBtn.closest('[data-calendar]');
|
||||
if (cal) {
|
||||
const state = getCalendarState(cal);
|
||||
state.displayMonth = parseInt(monthBtn.getAttribute('data-calendar-select-month'));
|
||||
state.view = 'days';
|
||||
setCalendarState(cal, state);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const yearBtn = target.closest('[data-calendar-select-year]');
|
||||
if (yearBtn) {
|
||||
const cal = yearBtn.closest('[data-calendar]');
|
||||
if (cal) {
|
||||
const state = getCalendarState(cal);
|
||||
state.displayYear = parseInt(yearBtn.getAttribute('data-calendar-select-year'));
|
||||
state.view = 'days';
|
||||
state.yearRangeStart = state.displayYear - 10;
|
||||
state.yearRangeEnd = state.displayYear + 10;
|
||||
setCalendarState(cal, state);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const dayBtn = target.closest('[data-calendar-day]');
|
||||
if (dayBtn && !dayBtn.disabled) {
|
||||
const cal = dayBtn.closest('[data-calendar]');
|
||||
if (cal) {
|
||||
const dateStr = dayBtn.getAttribute('data-calendar-day');
|
||||
const [y, m, d] = dateStr.split('-').map(Number);
|
||||
const state = getCalendarState(cal);
|
||||
state.selectedDate = dateStr;
|
||||
state.displayYear = y;
|
||||
state.displayMonth = m;
|
||||
setCalendarState(cal, state);
|
||||
|
||||
const inputId = cal.getAttribute('data-linked-input');
|
||||
if (inputId) {
|
||||
const hiddenInput = document.getElementById(inputId);
|
||||
if (hiddenInput) {
|
||||
hiddenInput.value = dateStr;
|
||||
hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
syncDateTriggerText(hiddenInput);
|
||||
}
|
||||
}
|
||||
|
||||
const popover = cal.closest('[data-popover]');
|
||||
if (popover) closePopover(popover);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const hourBtn = target.closest('[data-tp-hour]');
|
||||
if (hourBtn) {
|
||||
const tp = hourBtn.closest('[data-timepicker]');
|
||||
if (tp) {
|
||||
const state = getTimePickerState(tp);
|
||||
state.hour = parseInt(hourBtn.getAttribute('data-tp-hour'));
|
||||
setTimePickerState(tp, state);
|
||||
syncTimeToHiddenInput(tp);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const minuteBtn = target.closest('[data-tp-minute]');
|
||||
if (minuteBtn) {
|
||||
const tp = minuteBtn.closest('[data-timepicker]');
|
||||
if (tp) {
|
||||
const state = getTimePickerState(tp);
|
||||
state.minute = parseInt(minuteBtn.getAttribute('data-tp-minute'));
|
||||
setTimePickerState(tp, state);
|
||||
syncTimeToHiddenInput(tp);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const periodBtn = target.closest('[data-tp-period]');
|
||||
if (periodBtn) {
|
||||
const tp = periodBtn.closest('[data-timepicker]');
|
||||
if (tp) {
|
||||
const state = getTimePickerState(tp);
|
||||
state.isPm = periodBtn.getAttribute('data-tp-period') === 'pm';
|
||||
setTimePickerState(tp, state);
|
||||
syncTimeToHiddenInput(tp);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const incBtn = target.closest('[data-number-increment]');
|
||||
if (incBtn) {
|
||||
const wrapper = incBtn.closest('[data-number-input]');
|
||||
if (wrapper) { handleNumberIncrement(wrapper, 1); return; }
|
||||
}
|
||||
|
||||
const decBtn = target.closest('[data-number-decrement]');
|
||||
if (decBtn) {
|
||||
const wrapper = decBtn.closest('[data-number-input]');
|
||||
if (wrapper) { handleNumberIncrement(wrapper, -1); return; }
|
||||
}
|
||||
}
|
||||
|
||||
function syncTimeToHiddenInput(tp) {
|
||||
const inputId = tp.getAttribute('data-linked-input');
|
||||
if (!inputId) return;
|
||||
const hiddenInput = document.getElementById(inputId);
|
||||
if (!hiddenInput) return;
|
||||
|
||||
const { hour, minute } = getTimePickerValue(tp);
|
||||
hiddenInput.value = formatTime24(hour, minute);
|
||||
hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
syncTimeTriggerText(hiddenInput);
|
||||
}
|
||||
|
||||
function handleInput(e) {
|
||||
const target = e.target;
|
||||
if (target.matches('[data-number-input] input[type="number"]')) {
|
||||
const wrapper = target.closest('[data-number-input]');
|
||||
if (wrapper) updateStepperDisabledState(wrapper);
|
||||
}
|
||||
}
|
||||
|
||||
function syncValidationStyling() {
|
||||
document.querySelectorAll('[data-field-error]').forEach(errEl => {
|
||||
const fieldName = errEl.getAttribute('data-field-error');
|
||||
if (!fieldName) return;
|
||||
const field = document.querySelector(`[data-form-field="${fieldName}"]`);
|
||||
if (!field) return;
|
||||
const input = field.querySelector('input, select, textarea');
|
||||
if (!input) return;
|
||||
|
||||
const hasError = !errEl.classList.contains('hidden') && errEl.textContent.trim().length > 0;
|
||||
if (hasError) {
|
||||
input.classList.add('border-destructive');
|
||||
input.classList.remove('border-input');
|
||||
} else {
|
||||
input.classList.remove('border-destructive');
|
||||
input.classList.add('border-input');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleFormReset(e) {
|
||||
if (e.target.tagName !== 'FORM') return;
|
||||
const form = e.target;
|
||||
setTimeout(() => {
|
||||
form.querySelectorAll('[data-field-error]').forEach(errEl => {
|
||||
errEl.classList.add('hidden');
|
||||
errEl.textContent = '';
|
||||
});
|
||||
form.querySelectorAll('.border-destructive').forEach(input => {
|
||||
input.classList.remove('border-destructive');
|
||||
input.classList.add('border-input');
|
||||
});
|
||||
const result = form.querySelector('#form-result');
|
||||
if (result) { result.className = 'hidden'; result.innerHTML = ''; }
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function initComponents() {
|
||||
document.querySelectorAll('[data-calendar]').forEach(cal => {
|
||||
renderCalendar(cal);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-timepicker]').forEach(tp => {
|
||||
renderTimePicker(tp);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-number-input]').forEach(wrapper => {
|
||||
updateStepperDisabledState(wrapper);
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-popover]').forEach(wrapper => {
|
||||
if (wrapper.getAttribute('data-popover-open') !== 'true') {
|
||||
closePopover(wrapper);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function init() {
|
||||
if (initialized) {
|
||||
initComponents();
|
||||
if (typeof htmx !== 'undefined') htmx.process(document.body);
|
||||
return;
|
||||
}
|
||||
initialized = true;
|
||||
|
||||
initComponents();
|
||||
if (typeof htmx !== 'undefined') htmx.process(document.body);
|
||||
|
||||
document.addEventListener('click', handleClick);
|
||||
document.addEventListener('input', handleInput);
|
||||
document.addEventListener('reset', handleFormReset, true);
|
||||
|
||||
document.addEventListener('htmx:afterSwap', () => {
|
||||
syncValidationStyling();
|
||||
});
|
||||
|
||||
window.Blazor.addEventListener('enhancedload', () => {
|
||||
initComponents();
|
||||
if (typeof htmx !== 'undefined') htmx.process(document.body);
|
||||
});
|
||||
|
||||
bodyObserver = new MutationObserver(() => {
|
||||
const uninitCals = document.querySelectorAll('[data-calendar]:not([data-initialized])');
|
||||
uninitCals.forEach(cal => {
|
||||
cal.setAttribute('data-initialized', 'true');
|
||||
renderCalendar(cal);
|
||||
});
|
||||
});
|
||||
bodyObserver.observe(document.body, { childList: true, subtree: true });
|
||||
}
|
||||
|
||||
export function dispose() {
|
||||
document.removeEventListener('click', handleClick);
|
||||
document.removeEventListener('input', handleInput);
|
||||
bodyObserver?.disconnect();
|
||||
bodyObserver = null;
|
||||
initialized = false;
|
||||
}
|
||||
@@ -1 +1,51 @@
|
||||
# Blazor UI Components
|
||||
# Enciphered.Blazor.UIComponents
|
||||
|
||||
A **pure static SSR** Blazor component library styled with **Tailwind CSS v4** and **shadcn/ui** design tokens. All interactivity is powered by vanilla JavaScript — no SignalR, no WebAssembly, no `InteractiveServer` render mode required. Form validation and submission are handled entirely through **htmx**.
|
||||
|
||||
## Features
|
||||
|
||||
- **Zero Blazor interactivity** — components work with `AddRazorComponents()` alone
|
||||
- **Tailwind CSS v4** with oklch color tokens (light + dark mode)
|
||||
- **htmx form validation** — per-field blur validation and full form submission with a fluent `FormValidator` API
|
||||
- **Strongly-typed model binding** — bind submitted form data to POCOs automatically
|
||||
- **Sidebar layout** — collapsible, responsive, cookie-persisted
|
||||
- **Card components** — composable header/content/footer/image/action slots
|
||||
- **Dark mode** — toggle with localStorage persistence, FOUC-free
|
||||
- **Date/Time pickers** — calendar and time picker popovers with hidden native inputs
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
dotnet add package Enciphered.Blazor.UIComponents
|
||||
```
|
||||
|
||||
> See the full [Getting Started guide](docs/getting-started.md) for setup instructions.
|
||||
|
||||
## Documentation
|
||||
|
||||
| Document | Description |
|
||||
|---|---|
|
||||
| [Getting Started](docs/getting-started.md) | Installation, prerequisites, and first-app setup |
|
||||
| [Sidebar](docs/components/sidebar.md) | Collapsible sidebar layout system |
|
||||
| [Card](docs/components/card.md) | Composable card components |
|
||||
| [Button](docs/components/button.md) | Button with variants and sizes |
|
||||
| [Form Inputs](docs/components/form-inputs.md) | TextInput, NumberInput, DateInput, TimeInput, DateTimeInput |
|
||||
| [Form Validation](docs/forms/validation.md) | htmx-powered validation with FormValidator |
|
||||
| [Form Submission](docs/forms/submission.md) | Handling form submit with model binding |
|
||||
| [Theme Toggle](docs/components/theme-toggle.md) | Dark/light mode toggle |
|
||||
|
||||
## Architecture
|
||||
|
||||
All interactive behavior (popovers, sidebar collapse, calendar navigation, number input steppers, form resets) is implemented via three vanilla JS modules that use `data-*` attribute selectors and event delegation:
|
||||
|
||||
| Module | Purpose |
|
||||
|---|---|
|
||||
| `darkmode.js` | Theme toggle, localStorage persistence, SVG icon sync |
|
||||
| `sidebar.js` | Expand/collapse, mobile responsiveness, cookie persistence |
|
||||
| `forms.js` | Popover, calendar, time picker, number stepper, form reset |
|
||||
|
||||
These modules survive Blazor enhanced navigation via `MutationObserver` patterns.
|
||||
|
||||
## License
|
||||
|
||||
ISC
|
||||
@@ -0,0 +1,148 @@
|
||||
# Button
|
||||
|
||||
A styled button component with variant and size presets built from Tailwind utility classes.
|
||||
|
||||
---
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```razor
|
||||
<Button>Default Button</Button>
|
||||
<Button Type="submit">Submit</Button>
|
||||
<Button Disabled="true">Can't Click</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Variants
|
||||
|
||||
Use the `Variant` parameter with constants from `ButtonVariant`:
|
||||
|
||||
```razor
|
||||
<Button Variant="@ButtonVariant.Default">Default</Button>
|
||||
<Button Variant="@ButtonVariant.Secondary">Secondary</Button>
|
||||
<Button Variant="@ButtonVariant.Destructive">Destructive</Button>
|
||||
<Button Variant="@ButtonVariant.Outline">Outline</Button>
|
||||
<Button Variant="@ButtonVariant.Ghost">Ghost</Button>
|
||||
<Button Variant="@ButtonVariant.Link">Link</Button>
|
||||
```
|
||||
|
||||
| Constant | Tailwind Classes |
|
||||
|---|---|
|
||||
| `ButtonVariant.Default` | `bg-primary text-primary-foreground shadow hover:bg-primary/90` |
|
||||
| `ButtonVariant.Destructive` | `bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90` |
|
||||
| `ButtonVariant.Outline` | `border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground` |
|
||||
| `ButtonVariant.Secondary` | `bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80` |
|
||||
| `ButtonVariant.Ghost` | `hover:bg-accent hover:text-accent-foreground` |
|
||||
| `ButtonVariant.Link` | `text-primary underline-offset-4 hover:underline` |
|
||||
|
||||
You can also pass any custom Tailwind class string directly:
|
||||
|
||||
```razor
|
||||
<Button Variant="bg-blue-600 text-white hover:bg-blue-700">Custom</Button>
|
||||
```
|
||||
|
||||
### Creating Custom Variants
|
||||
|
||||
Since `Variant` and `Size` are plain strings (not enums), you can create your own variant constants without modifying the library. Define a static class in your app with any Tailwind utility combinations you need:
|
||||
|
||||
```csharp
|
||||
public static class AppButtonVariant
|
||||
{
|
||||
public const string Success =
|
||||
"bg-green-600 text-white shadow-sm hover:bg-green-700";
|
||||
|
||||
public const string Warning =
|
||||
"bg-amber-500 text-white shadow-sm hover:bg-amber-600";
|
||||
|
||||
public const string Info =
|
||||
"bg-sky-500 text-white shadow-sm hover:bg-sky-600";
|
||||
|
||||
public const string OutlineDestructive =
|
||||
"border border-destructive text-destructive bg-transparent shadow-sm hover:bg-destructive/10";
|
||||
|
||||
public const string Gradient =
|
||||
"bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-sm hover:from-purple-600 hover:to-pink-600";
|
||||
}
|
||||
```
|
||||
|
||||
Then use them exactly like the built-in variants:
|
||||
|
||||
```razor
|
||||
<Button Variant="@AppButtonVariant.Success">Save Changes</Button>
|
||||
<Button Variant="@AppButtonVariant.Warning">Proceed with Caution</Button>
|
||||
<Button Variant="@AppButtonVariant.Gradient">Upgrade Plan</Button>
|
||||
```
|
||||
|
||||
You can do the same for custom sizes:
|
||||
|
||||
```csharp
|
||||
public static class AppButtonSize
|
||||
{
|
||||
public const string Xs = "h-7 rounded-md px-2 text-xs";
|
||||
public const string Xl = "h-12 rounded-lg px-10 text-base";
|
||||
public const string Wide = "h-9 px-12 py-2";
|
||||
}
|
||||
```
|
||||
|
||||
```razor
|
||||
<Button Size="@AppButtonSize.Xl" Variant="@AppButtonVariant.Gradient">
|
||||
Get Started
|
||||
</Button>
|
||||
```
|
||||
|
||||
This approach works because the `Button` component simply concatenates the variant and size strings into the element's `class` attribute — there is no closed set of allowed values.
|
||||
|
||||
---
|
||||
|
||||
## Sizes
|
||||
|
||||
Use the `Size` parameter with constants from `ButtonSize`:
|
||||
|
||||
```razor
|
||||
<Button Size="@ButtonSize.Sm">Small</Button>
|
||||
<Button Size="@ButtonSize.Default">Default</Button>
|
||||
<Button Size="@ButtonSize.Lg">Large</Button>
|
||||
<Button Size="@ButtonSize.Icon">🔔</Button>
|
||||
```
|
||||
|
||||
| Constant | Tailwind Classes |
|
||||
|---|---|
|
||||
| `ButtonSize.Default` | `h-9 px-4 py-2` |
|
||||
| `ButtonSize.Sm` | `h-8 rounded-md px-3 text-xs` |
|
||||
| `ButtonSize.Lg` | `h-10 rounded-md px-8` |
|
||||
| `ButtonSize.Icon` | `h-9 w-9` |
|
||||
|
||||
---
|
||||
|
||||
## Button with Icon
|
||||
|
||||
Use the `Icon` render fragment to prepend an icon:
|
||||
|
||||
```razor
|
||||
<Button>
|
||||
<Icon>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
|
||||
</svg>
|
||||
</Icon>
|
||||
<ChildContent>Continue</ChildContent>
|
||||
</Button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `ChildContent` | `RenderFragment?` | — | Button label content |
|
||||
| `Icon` | `RenderFragment?` | — | Icon slot rendered before the label |
|
||||
| `Type` | `string` | `"button"` | HTML button type (`button`, `submit`, `reset`) |
|
||||
| `Disabled` | `bool` | `false` | Disables the button |
|
||||
| `Variant` | `string` | `ButtonVariant.Default` | Visual style classes |
|
||||
| `Size` | `string` | `ButtonSize.Default` | Size classes |
|
||||
| `Class` | `string?` | — | Additional CSS classes appended |
|
||||
|
||||
All unmatched HTML attributes (`data-testid`, `aria-*`, etc.) are passed through via `@attributes`.
|
||||
@@ -0,0 +1,103 @@
|
||||
# Card
|
||||
|
||||
A composable card component suite for displaying grouped content in a bordered container with optional header, footer, image, and action slots.
|
||||
|
||||
---
|
||||
|
||||
## Components
|
||||
|
||||
| Component | Description |
|
||||
|---|---|
|
||||
| `Card` | Root container with border, shadow, and rounded corners |
|
||||
| `CardHeader` | Top section — contains title, description, and optional action |
|
||||
| `CardTitle` | `<h3>` heading styled for cards |
|
||||
| `CardDescription` | Muted paragraph below the title |
|
||||
| `CardAction` | Trailing action element (button/link) aligned to the header's right edge |
|
||||
| `CardContent` | Main body area |
|
||||
| `CardFooter` | Bottom area for buttons or metadata |
|
||||
| `CardImage` | Full-width image with optional wrapper styling |
|
||||
|
||||
---
|
||||
|
||||
## Basic Card
|
||||
|
||||
```razor
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Notifications</CardTitle>
|
||||
<CardDescription>You have 3 unread messages.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>Here is the main content of the card.</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button>View All</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Card with Action
|
||||
|
||||
The `CardAction` renders at the trailing edge of the header using CSS grid:
|
||||
|
||||
```razor
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Team Members</CardTitle>
|
||||
<CardDescription>Manage your team.</CardDescription>
|
||||
<CardAction>
|
||||
<Button Variant="@ButtonVariant.Outline" Size="@ButtonSize.Sm">
|
||||
Add Member
|
||||
</Button>
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<!-- member list -->
|
||||
</CardContent>
|
||||
</Card>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Card with Image
|
||||
|
||||
```razor
|
||||
<Card Class="max-w-sm">
|
||||
<CardImage Src="/images/hero.jpg" Alt="Hero image" WrapperClass="h-48" />
|
||||
<CardHeader>
|
||||
<CardTitle>Beautiful Scenery</CardTitle>
|
||||
<CardDescription>A mountain landscape at sunset.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>The image fills the card width and crops via object-cover.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Parameters
|
||||
|
||||
### Card
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `ChildContent` | `RenderFragment?` | — | Card inner content |
|
||||
| `Class` | `string?` | — | Additional CSS classes |
|
||||
|
||||
Base classes: `rounded-xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden`
|
||||
|
||||
### CardImage
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Src` | `string` | **required** | Image source URL |
|
||||
| `Alt` | `string` | `""` | Alt text for accessibility |
|
||||
| `Class` | `string?` | — | Additional classes on the `<img>` |
|
||||
| `WrapperClass` | `string?` | — | Additional classes on the wrapper `<div>` |
|
||||
|
||||
### CardTitle, CardDescription, CardContent, CardFooter, CardAction
|
||||
|
||||
All accept `ChildContent` and `Class` parameters. All support unmatched HTML attributes via `@attributes`.
|
||||
@@ -0,0 +1,192 @@
|
||||
# Form Inputs
|
||||
|
||||
All input components extend a shared `InputBase<T>` class that provides consistent styling, htmx validation integration, and parameter unification. When placed inside an `HtmxForm` with a `FormField`, inputs automatically attach `hx-post`, `hx-trigger="blur"`, and `hx-target` attributes for real-time per-field validation.
|
||||
|
||||
---
|
||||
|
||||
## TextInput
|
||||
|
||||
A standard text input for strings. Supports all HTML input types (`text`, `email`, `password`, `search`, etc.).
|
||||
|
||||
```razor
|
||||
<FormField Label="Full Name" For="name">
|
||||
<TextInput Id="name" Name="name" Placeholder="Jane Doe" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Email" For="email">
|
||||
<TextInput Id="email" Name="email" Type="email" Placeholder="jane@example.com" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Password" For="password">
|
||||
<TextInput Id="password" Name="password" Type="password" Placeholder="••••••••" />
|
||||
</FormField>
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Type` | `string` | `"text"` | HTML input type |
|
||||
| `Id` | `string?` | — | Input element ID |
|
||||
| `Name` | `string?` | — | Form field name (submitted to the server) |
|
||||
| `Value` | `string?` | — | Current value |
|
||||
| `Placeholder` | `string?` | — | Placeholder text |
|
||||
| `Disabled` | `bool` | `false` | Disables the input |
|
||||
| `ReadOnly` | `bool` | `false` | Makes the input read-only |
|
||||
| `Class` | `string?` | — | Additional CSS classes |
|
||||
|
||||
---
|
||||
|
||||
## NumberInput
|
||||
|
||||
A numeric input with built-in increment/decrement stepper buttons. Hides the browser's native spinner.
|
||||
|
||||
```razor
|
||||
<FormField Label="Age" For="age">
|
||||
<NumberInput Id="age" Name="age" Placeholder="25" Min="0" Max="150" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Quantity" For="quantity">
|
||||
<NumberInput Id="quantity" Name="quantity" Value="1" Min="1" Max="99" Step="1" />
|
||||
</FormField>
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Min` | `string?` | — | Minimum allowed value |
|
||||
| `Max` | `string?` | — | Maximum allowed value |
|
||||
| `Step` | `string?` | — | Step increment |
|
||||
| `Value` | `double?` | — | Current numeric value |
|
||||
|
||||
Inherits all parameters from `InputBase<double?>` (`Id`, `Name`, `Placeholder`, `Disabled`, `ReadOnly`, `Class`).
|
||||
|
||||
The stepper buttons are disabled when the value reaches `Min` or `Max`. They are hidden when `Disabled` or `ReadOnly` is true.
|
||||
|
||||
---
|
||||
|
||||
## DateInput
|
||||
|
||||
A date picker that combines a hidden `<input type="date">` with a popover calendar. Users select dates through the calendar UI — the native date picker chrome is hidden.
|
||||
|
||||
```razor
|
||||
<FormField Label="Birth Date" For="birthdate">
|
||||
<DateInput Id="birthdate" Name="birthdate" Placeholder="Select your birth date" />
|
||||
</FormField>
|
||||
```
|
||||
|
||||
### How it works
|
||||
|
||||
1. A hidden `<input type="date">` holds the actual form value in `yyyy-MM-dd` format
|
||||
2. A styled button trigger shows the selected date (or placeholder)
|
||||
3. Clicking the trigger opens a `Popover` containing a `Calendar` component
|
||||
4. Selecting a day updates the hidden input and closes the popover
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Value` | `DateOnly?` | — | Currently selected date |
|
||||
| `Min` | `string?` | — | Minimum date |
|
||||
| `Max` | `string?` | — | Maximum date |
|
||||
| `Placeholder` | `string?` | `"Select date"` | Trigger button placeholder |
|
||||
|
||||
Inherits all parameters from `InputBase<DateOnly?>`.
|
||||
|
||||
---
|
||||
|
||||
## TimeInput
|
||||
|
||||
A time picker that combines a hidden `<input type="time">` with a popover time picker. Features scrollable hour/minute columns and AM/PM toggle.
|
||||
|
||||
```razor
|
||||
<FormField Label="Preferred Time" For="preferredtime">
|
||||
<TimeInput Id="preferredtime" Name="preferredtime" />
|
||||
</FormField>
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Value` | `TimeOnly?` | — | Currently selected time |
|
||||
| `Step` | `string?` | — | Minute step interval |
|
||||
| `Use12Hour` | `bool` | `true` | 12-hour format with AM/PM |
|
||||
| `Placeholder` | `string?` | `"Select time"` | Trigger button placeholder |
|
||||
|
||||
Inherits all parameters from `InputBase<TimeOnly?>`.
|
||||
|
||||
---
|
||||
|
||||
## DateTimeInput
|
||||
|
||||
Combines a date picker and time picker side by side for selecting both date and time. Internally manages a hidden `<input type="datetime-local">` plus two helper hidden inputs for the date and time parts.
|
||||
|
||||
```razor
|
||||
<FormField Label="Appointment" For="appointment">
|
||||
<DateTimeInput Id="appointment" Name="appointment" />
|
||||
</FormField>
|
||||
```
|
||||
|
||||
### How it works
|
||||
|
||||
1. A hidden `<input type="datetime-local">` holds the combined value in `yyyy-MM-ddTHH:mm` format
|
||||
2. Two helper hidden inputs hold the date-part and time-part separately
|
||||
3. Two popover triggers (calendar + time picker) are displayed side by side
|
||||
4. The `forms.js` module automatically combines the date-part and time-part values into the main hidden input
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Value` | `DateTime?` | — | Currently selected date and time |
|
||||
| `Min` | `string?` | — | Minimum datetime |
|
||||
| `Max` | `string?` | — | Maximum datetime |
|
||||
| `Step` | `string?` | — | Minute step interval |
|
||||
| `Placeholder` | `string?` | `"Select date"` | Date trigger placeholder |
|
||||
|
||||
Inherits all parameters from `InputBase<DateTime?>`.
|
||||
|
||||
---
|
||||
|
||||
## FormField
|
||||
|
||||
Wraps an input with a label, description, and error placeholder. The error element is used by htmx to display server-side validation messages.
|
||||
|
||||
```razor
|
||||
<FormField Label="Email" For="email" Description="We'll never share your email.">
|
||||
<TextInput Id="email" Name="email" Type="email" />
|
||||
</FormField>
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Label` | `string?` | — | Label text rendered as `<label>` |
|
||||
| `For` | `string?` | — | Links the label to the input, and identifies the field for validation errors |
|
||||
| `Description` | `string?` | — | Helper text below the input |
|
||||
| `Error` | `string?` | — | Pre-set error message (for server-rendered errors) |
|
||||
| `Class` | `string?` | — | Additional CSS classes on the wrapper |
|
||||
| `LabelClass` | `string?` | — | Additional CSS classes on the label |
|
||||
|
||||
### How validation errors are displayed
|
||||
|
||||
`FormField` renders a `<p data-field-error="fieldname">` element. When htmx receives a validation response, it swaps this element with the server's HTML fragment (which includes or hides the error message). This is the core mechanism for per-field validation.
|
||||
|
||||
---
|
||||
|
||||
## InputBase
|
||||
|
||||
All input components inherit from `InputBase<TValue>`, which provides:
|
||||
|
||||
- **Common parameters**: `Id`, `Name`, `Value`, `Placeholder`, `Disabled`, `ReadOnly`, `Class`
|
||||
- **Computed CSS**: A consistent input style using Tailwind classes
|
||||
- **htmx auto-wiring**: When `ValidationEndpoint` and `FieldName` cascading values are present (provided by `HtmxForm` and `FormField`), the input automatically gets:
|
||||
- `hx-post` pointing to the validation endpoint
|
||||
- `hx-trigger="blur"` for on-blur validation
|
||||
- `hx-target="next [data-field-error]"` to update the error element
|
||||
- `hx-swap="outerHTML"` for full element replacement
|
||||
- `hx-include="this"` to send only this input's value
|
||||
- `hx-vals='{"_field": "fieldname"}'` to identify which field is being validated
|
||||
@@ -0,0 +1,139 @@
|
||||
# Sidebar
|
||||
|
||||
A collapsible, responsive sidebar layout system. Persists expand/collapse state via cookies and adapts between desktop (collapsible rail) and mobile (overlay drawer) modes automatically.
|
||||
|
||||
---
|
||||
|
||||
## Components
|
||||
|
||||
| Component | Description |
|
||||
|---|---|
|
||||
| `SidebarProvider` | Root wrapper — provides collapse state context |
|
||||
| `Sidebar` | The sidebar panel itself |
|
||||
| `SidebarHeader` | Top area (logo, app name) — also acts as a collapse trigger |
|
||||
| `SidebarContent` | Scrollable middle area for navigation groups |
|
||||
| `SidebarFooter` | Bottom area (copyright, user info) |
|
||||
| `SidebarGroup` | Groups related menu items |
|
||||
| `SidebarGroupLabel` | Section heading within a group |
|
||||
| `SidebarGroupContent` | Container for menu items within a group |
|
||||
| `SidebarMenuItem` | Navigation link with icon support |
|
||||
| `SidebarInset` | Main content area adjacent to the sidebar |
|
||||
| `SidebarSeparator` | Horizontal divider line |
|
||||
| `SidebarTrigger` | Standalone toggle button (for mobile header bars) |
|
||||
|
||||
---
|
||||
|
||||
## Basic Layout
|
||||
|
||||
```razor
|
||||
<SidebarProvider DefaultOpen="true">
|
||||
<Sidebar>
|
||||
<SidebarHeader>
|
||||
<div class="flex items-center gap-2 px-1 py-1.5">
|
||||
<img src="logo.svg" alt="Logo" class="size-8" />
|
||||
<span class="font-semibold text-sm">My App</span>
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel Label="Navigation" />
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenuItem Href="/" Tooltip="Home" IsActive="true">
|
||||
<Icon>
|
||||
<!-- SVG icon -->
|
||||
</Icon>
|
||||
<ChildContent>Home</ChildContent>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem Href="/about" Tooltip="About">
|
||||
<Icon>
|
||||
<!-- SVG icon -->
|
||||
</Icon>
|
||||
<ChildContent>About</ChildContent>
|
||||
</SidebarMenuItem>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter>
|
||||
<SidebarSeparator />
|
||||
<div class="px-3 py-2 text-xs text-sidebar-foreground/50">
|
||||
© 2026 My Company
|
||||
</div>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
|
||||
<SidebarInset>
|
||||
<header class="flex h-14 items-center gap-2 border-b border-border px-4">
|
||||
<SidebarTrigger Class="md:hidden" />
|
||||
<h1 class="text-sm font-medium">My App</h1>
|
||||
<div class="ml-auto">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex-1 p-4 md:p-6">
|
||||
@Body
|
||||
</div>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Parameters
|
||||
|
||||
### SidebarProvider
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `DefaultOpen` | `bool` | `true` | Initial sidebar state on first visit |
|
||||
| `ChildContent` | `RenderFragment` | — | Must contain `Sidebar` + `SidebarInset` |
|
||||
|
||||
### SidebarMenuItem
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Href` | `string?` | — | Navigation URL |
|
||||
| `Tooltip` | `string?` | — | Tooltip text (shown on hover when collapsed) |
|
||||
| `IsActive` | `bool` | `false` | Highlights the item with accent styling |
|
||||
| `Icon` | `RenderFragment?` | — | Icon slot (typically an SVG) |
|
||||
| `Class` | `string?` | — | Additional CSS classes |
|
||||
|
||||
### SidebarGroupLabel
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Label` | `string?` | — | Label text (alternative to ChildContent) |
|
||||
| `ChildContent` | `RenderFragment?` | — | Custom label markup |
|
||||
| `Class` | `string?` | — | Additional CSS classes |
|
||||
|
||||
### All sidebar components
|
||||
|
||||
Every sidebar component accepts:
|
||||
- `ChildContent` — slot for nested content
|
||||
- `Class` — additional CSS classes to append
|
||||
|
||||
---
|
||||
|
||||
## Behavior
|
||||
|
||||
### Desktop (≥ 768px)
|
||||
- Clicking the **SidebarHeader** or **SidebarTrigger** toggles between expanded and collapsed (icon rail) states
|
||||
- Collapsed state shrinks to `var(--sidebar-width-icon)` (3rem) showing only icons
|
||||
- State persists via a `sidebar:state` cookie (1 year)
|
||||
|
||||
### Mobile (< 768px)
|
||||
- Sidebar renders as an off-screen drawer
|
||||
- Opens with a semi-transparent backdrop overlay
|
||||
- Clicking the overlay or trigger closes it
|
||||
- Navigation link clicks auto-close the sidebar
|
||||
|
||||
### CSS Variables
|
||||
|
||||
| Variable | Default | Description |
|
||||
|---|---|---|
|
||||
| `--sidebar-width` | `16rem` | Expanded sidebar width |
|
||||
| `--sidebar-width-icon` | `3rem` | Collapsed (icon rail) width |
|
||||
|
||||
These can be overridden in your `@theme` block.
|
||||
@@ -0,0 +1,97 @@
|
||||
# Theme Toggle
|
||||
|
||||
A dark/light mode toggle button that persists the user's preference to `localStorage` and applies it instantly without a page reload.
|
||||
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
```razor
|
||||
<ThemeToggle />
|
||||
```
|
||||
|
||||
Place it anywhere in your layout — typically in a header or toolbar:
|
||||
|
||||
```razor
|
||||
<header class="flex h-14 items-center px-4">
|
||||
<h1 class="text-sm font-medium">My App</h1>
|
||||
<div class="ml-auto">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Class` | `string?` | — | Additional CSS classes appended to the button |
|
||||
|
||||
---
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **Toggle button** — renders a `<button>` with moon (light mode) and sun (dark mode) SVG icons
|
||||
2. **Click handler** — `darkmode.js` toggles the `dark` class on `<html>` and persists to `localStorage`
|
||||
3. **Icon sync** — shows the appropriate icon based on the current theme
|
||||
4. **FOUC prevention** — a synchronous inline script in `App.razor` checks `localStorage` before first paint
|
||||
|
||||
### Required Setup in `App.razor`
|
||||
|
||||
Add this script in the `<head>` before any stylesheets:
|
||||
|
||||
```html
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
if (localStorage.getItem('theme') === 'dark')
|
||||
document.documentElement.classList.add('dark');
|
||||
} catch (e) { }
|
||||
})();
|
||||
</script>
|
||||
```
|
||||
|
||||
And initialize the module in the `<body>`:
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import { init as initDarkMode } from '/_content/Enciphered.Blazor.UIComponents/js/darkmode.js';
|
||||
initDarkMode();
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CSS Custom Variant
|
||||
|
||||
The library uses Tailwind CSS v4's custom variant for dark mode:
|
||||
|
||||
```css
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
```
|
||||
|
||||
This means dark mode is class-based (`.dark` on `<html>`) rather than media-query-based, giving users manual control.
|
||||
|
||||
---
|
||||
|
||||
## Design Tokens
|
||||
|
||||
All color tokens have light and dark variants defined in the library's `Styles/app.css`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
/* ... */
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
When the `dark` class is toggled, all components automatically switch to dark colors through these CSS custom properties.
|
||||
@@ -0,0 +1,240 @@
|
||||
# Form Submission & Model Binding
|
||||
|
||||
Handle validated form submissions with strongly-typed models — no manual dictionary access required.
|
||||
|
||||
---
|
||||
|
||||
## Basic Submit (No Model Binding)
|
||||
|
||||
The simplest approach uses an `onSuccess` callback with direct `HttpContext` access:
|
||||
|
||||
```csharp
|
||||
app.MapFormValidation<ContactFormValidator>("/api/forms/contact",
|
||||
onSuccess: async ctx =>
|
||||
{
|
||||
var form = ctx.Request.Form;
|
||||
var name = form["name"].ToString();
|
||||
var email = form["email"].ToString();
|
||||
|
||||
// Save to database, send email, etc.
|
||||
await SaveContactAsync(name, email);
|
||||
});
|
||||
```
|
||||
|
||||
The `onSuccess` callback fires only after all validation rules pass. If validation fails, the callback is never invoked.
|
||||
|
||||
---
|
||||
|
||||
## Strongly-Typed Model Binding
|
||||
|
||||
Define a POCO model and let `FormModelBinder` handle the mapping automatically:
|
||||
|
||||
### Step 1: Create a Model
|
||||
|
||||
```csharp
|
||||
public class ContactFormModel
|
||||
{
|
||||
public string Name { get; set; } = "";
|
||||
public string Email { get; set; } = "";
|
||||
public string Password { get; set; } = "";
|
||||
public int? Age { get; set; }
|
||||
public DateOnly? Birthdate { get; set; }
|
||||
public TimeOnly? Preferredtime { get; set; }
|
||||
public DateTime? Appointment { get; set; }
|
||||
public string Confirmation { get; set; } = "";
|
||||
}
|
||||
```
|
||||
|
||||
### Step 2: Use the Typed Overload
|
||||
|
||||
```csharp
|
||||
app.MapFormValidation<ContactFormValidator, ContactFormModel>("/api/forms/contact",
|
||||
onSuccess: async model =>
|
||||
{
|
||||
Console.WriteLine($"Name: {model.Name}");
|
||||
Console.WriteLine($"Email: {model.Email}");
|
||||
Console.WriteLine($"Age: {model.Age}");
|
||||
Console.WriteLine($"Birth Date: {model.Birthdate}");
|
||||
Console.WriteLine($"Preferred Time: {model.Preferredtime}");
|
||||
Console.WriteLine($"Appointment: {model.Appointment}");
|
||||
|
||||
await SaveToDbAsync(model);
|
||||
});
|
||||
```
|
||||
|
||||
### Step 3: Customize the Success Message (Optional)
|
||||
|
||||
```csharp
|
||||
app.MapFormValidation<ContactFormValidator, ContactFormModel>("/api/forms/contact",
|
||||
onSuccess: async model => { /* ... */ },
|
||||
successMessage: "Thank you! Your form has been submitted.");
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## FormModelBinder
|
||||
|
||||
`FormModelBinder.Bind<T>()` maps form fields to model properties using reflection with these rules:
|
||||
|
||||
- **Case-insensitive matching** — form field `name` matches property `Name`
|
||||
- **Automatic type conversion** for all common types
|
||||
- **Nullable support** — empty values become `null` for nullable types
|
||||
|
||||
### Supported Types
|
||||
|
||||
| Type | Format Expected |
|
||||
|---|---|
|
||||
| `string` | Any text |
|
||||
| `int`, `long` | Integer text |
|
||||
| `float`, `double`, `decimal` | Numeric text (invariant culture) |
|
||||
| `bool` | `true`/`false`, `on`, `1` |
|
||||
| `DateTime` | Parseable datetime (e.g. `2025-12-25T10:30`) |
|
||||
| `DateOnly` | Parseable date (e.g. `2025-12-25`) |
|
||||
| `TimeOnly` | Parseable time (e.g. `14:30`) |
|
||||
| `Guid` | Standard GUID format |
|
||||
| `Enum` | Case-insensitive enum member name |
|
||||
|
||||
All types support their `Nullable<T>` equivalents (`int?`, `DateTime?`, etc.).
|
||||
|
||||
---
|
||||
|
||||
## API Reference
|
||||
|
||||
### MapFormValidation (without model binding)
|
||||
|
||||
```csharp
|
||||
public static RouteGroupBuilder MapFormValidation<TValidator>(
|
||||
this IEndpointRouteBuilder endpoints,
|
||||
string basePath,
|
||||
string successMessage = "✓ Form submitted successfully!",
|
||||
Func<HttpContext, Task>? onSuccess = null)
|
||||
where TValidator : FormValidator, new();
|
||||
```
|
||||
|
||||
### MapFormValidation (with model binding)
|
||||
|
||||
```csharp
|
||||
public static RouteGroupBuilder MapFormValidation<TValidator, TModel>(
|
||||
this IEndpointRouteBuilder endpoints,
|
||||
string basePath,
|
||||
Func<TModel, Task> onSuccess,
|
||||
string successMessage = "✓ Form submitted successfully!")
|
||||
where TValidator : FormValidator, new()
|
||||
where TModel : new();
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
| Parameter | Type | Description |
|
||||
|---|---|---|
|
||||
| `basePath` | `string` | URL prefix (e.g. `/api/forms/contact`) |
|
||||
| `successMessage` | `string` | HTML text shown on successful submission |
|
||||
| `onSuccess` | `Func<HttpContext, Task>?` or `Func<TModel, Task>` | Callback invoked after validation passes |
|
||||
|
||||
### Return Value
|
||||
|
||||
Returns a `RouteGroupBuilder` for further endpoint configuration if needed.
|
||||
|
||||
---
|
||||
|
||||
## Registered Endpoints
|
||||
|
||||
Both overloads register the same endpoint structure:
|
||||
|
||||
| Method | Path | Purpose |
|
||||
|---|---|---|
|
||||
| `POST` | `{basePath}/validate` | Per-field validation (called on input blur) |
|
||||
| `POST` | `{basePath}/submit` | Full form validation and submission |
|
||||
|
||||
Both endpoints have `.DisableAntiforgery()` applied since htmx sends raw form data.
|
||||
|
||||
---
|
||||
|
||||
## Response Format
|
||||
|
||||
### Validation Error Response
|
||||
|
||||
When validation fails, the `/submit` endpoint returns HTML with OOB (out-of-band) swap fragments:
|
||||
|
||||
```html
|
||||
<p data-field-error="email" hx-swap-oob="outerHTML:[data-field-error='email']"
|
||||
class="text-[0.8rem] font-medium text-destructive">
|
||||
Please enter a valid email address.
|
||||
</p>
|
||||
<p data-field-error="name" hx-swap-oob="outerHTML:[data-field-error='name']"
|
||||
class="text-[0.8rem] font-medium text-destructive hidden"></p>
|
||||
<!-- ... one fragment per field ... -->
|
||||
<div id="form-result" class="hidden"></div>
|
||||
```
|
||||
|
||||
htmx processes each OOB fragment, updating every field's error element in a single response.
|
||||
|
||||
### Success Response
|
||||
|
||||
```html
|
||||
<p data-field-error="email" hx-swap-oob="outerHTML:[data-field-error='email']"
|
||||
class="text-[0.8rem] font-medium text-destructive hidden"></p>
|
||||
<!-- ... clears all error elements ... -->
|
||||
<div id="form-result">
|
||||
<div data-testid="success-message"
|
||||
class="rounded-md border border-green-500/30 bg-green-500/10 p-3 text-sm text-green-600 dark:text-green-400">
|
||||
✓ Form submitted successfully!
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Complete Example
|
||||
|
||||
```csharp
|
||||
// ContactFormValidator.cs
|
||||
using Enciphered.Blazor.UIComponents.Validation;
|
||||
|
||||
public class ContactFormValidator : FormValidator
|
||||
{
|
||||
public ContactFormValidator()
|
||||
{
|
||||
RuleFor("name", required: true, minLength: 2);
|
||||
RuleFor("email", required: true,
|
||||
pattern: @".+@.+\..+",
|
||||
message: "Please enter a valid email address.");
|
||||
}
|
||||
}
|
||||
|
||||
// ContactFormModel.cs
|
||||
public class ContactFormModel
|
||||
{
|
||||
public string Name { get; set; } = "";
|
||||
public string Email { get; set; } = "";
|
||||
}
|
||||
|
||||
// Program.cs
|
||||
app.MapFormValidation<ContactFormValidator, ContactFormModel>("/api/forms/contact",
|
||||
onSuccess: async model =>
|
||||
{
|
||||
await db.Contacts.AddAsync(new Contact
|
||||
{
|
||||
Name = model.Name,
|
||||
Email = model.Email
|
||||
});
|
||||
await db.SaveChangesAsync();
|
||||
});
|
||||
```
|
||||
|
||||
```razor
|
||||
@* ContactForm.razor *@
|
||||
@page "/contact"
|
||||
|
||||
<HtmxForm Endpoint="/api/forms/contact">
|
||||
<FormField Label="Name" For="name">
|
||||
<TextInput Id="name" Name="name" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Email" For="email">
|
||||
<TextInput Id="email" Name="email" Type="email" />
|
||||
</FormField>
|
||||
|
||||
<Button Type="submit">Send</Button>
|
||||
</HtmxForm>
|
||||
```
|
||||
@@ -0,0 +1,242 @@
|
||||
# Form Validation
|
||||
|
||||
htmx-powered server-side validation that provides real-time per-field feedback on blur and full-form validation on submit — all without Blazor interactivity.
|
||||
|
||||
---
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ Browser │
|
||||
│ │
|
||||
│ ┌─────────────┐ blur ┌──────────────────────────┐ │
|
||||
│ │ <TextInput> │ ──────► │ htmx POST /validate │ │
|
||||
│ └─────────────┘ │ { _field: "email", │ │
|
||||
│ │ email: "bad" } │ │
|
||||
│ └──────────┬───────────────┘ │
|
||||
│ │ │
|
||||
│ ┌─────────────────┐ ◄──────────┘ │
|
||||
│ │ <p data-field- │ HTML fragment: │
|
||||
│ │ error="email"> │ <p class="text-destructive"> │
|
||||
│ │ swapped by │ Please enter a valid email. │
|
||||
│ │ htmx │ </p> │
|
||||
│ └─────────────────┘ │
|
||||
└──────────────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌──────────────────────────────────────────────────────────┐
|
||||
│ Server (Minimal API) │
|
||||
│ │
|
||||
│ FormValidator.ValidateField("email", "bad") │
|
||||
│ → "Please enter a valid email address." │
|
||||
│ │
|
||||
│ HtmxFormValidationRenderer.FieldErrorFragment(...) │
|
||||
│ → HTML <p> element with error text │
|
||||
└──────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 1: Create a Validator
|
||||
|
||||
Define your validation rules by extending `FormValidator` and calling `RuleFor()` in the constructor:
|
||||
|
||||
```csharp
|
||||
using Enciphered.Blazor.UIComponents.Validation;
|
||||
|
||||
public class ContactFormValidator : FormValidator
|
||||
{
|
||||
public ContactFormValidator()
|
||||
{
|
||||
RuleFor("name",
|
||||
displayName: "Name",
|
||||
required: true,
|
||||
minLength: 2);
|
||||
|
||||
RuleFor("email",
|
||||
displayName: "Email",
|
||||
required: true,
|
||||
pattern: @".+@.+\..+",
|
||||
message: "Please enter a valid email address.");
|
||||
|
||||
RuleFor("password",
|
||||
displayName: "Password",
|
||||
required: true,
|
||||
minLength: 6);
|
||||
|
||||
RuleFor("age",
|
||||
displayName: "Age",
|
||||
min: 0,
|
||||
max: 150);
|
||||
|
||||
RuleFor("birthdate",
|
||||
displayName: "Birth Date",
|
||||
custom: value => !DateOnly.TryParse(value, out _)
|
||||
? "Please enter a valid date."
|
||||
: null);
|
||||
|
||||
RuleFor("preferredtime",
|
||||
displayName: "Preferred Time",
|
||||
custom: value => !TimeOnly.TryParse(value, out _)
|
||||
? "Please enter a valid time."
|
||||
: null);
|
||||
|
||||
RuleFor("appointment",
|
||||
displayName: "Appointment",
|
||||
custom: value => !DateTime.TryParse(value, out _)
|
||||
? "Please enter a valid date and time."
|
||||
: null);
|
||||
|
||||
RuleFor("confirmation",
|
||||
displayName: "Confirmation",
|
||||
required: true,
|
||||
custom: value => value != "CONFIRM"
|
||||
? "You must type CONFIRM to proceed."
|
||||
: null);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Step 2: Register Validation Endpoints
|
||||
|
||||
In `Program.cs`, call `MapFormValidation<T>()`:
|
||||
|
||||
```csharp
|
||||
app.MapFormValidation<ContactFormValidator>("/api/forms/contact");
|
||||
```
|
||||
|
||||
This registers two endpoints:
|
||||
|
||||
| Endpoint | Method | Purpose |
|
||||
|---|---|---|
|
||||
| `POST /api/forms/contact/validate` | Per-field | Validates a single field on blur |
|
||||
| `POST /api/forms/contact/submit` | Full form | Validates all fields on submit |
|
||||
|
||||
Both endpoints have antiforgery disabled (via `.DisableAntiforgery()`) since htmx sends form data directly.
|
||||
|
||||
---
|
||||
|
||||
## Step 3: Build the Form
|
||||
|
||||
Use `HtmxForm`, `FormField`, and input components:
|
||||
|
||||
```razor
|
||||
<HtmxForm Endpoint="/api/forms/contact">
|
||||
<FormField Label="Full Name" For="name">
|
||||
<TextInput Id="name" Name="name" Placeholder="Jane Doe" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Email" For="email">
|
||||
<TextInput Id="email" Name="email" Type="email" Placeholder="jane@example.com" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Password" For="password">
|
||||
<TextInput Id="password" Name="password" Type="password" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Age" For="age">
|
||||
<NumberInput Id="age" Name="age" Min="0" Max="150" />
|
||||
</FormField>
|
||||
|
||||
<FormField Label="Birth Date" For="birthdate">
|
||||
<DateInput Id="birthdate" Name="birthdate" />
|
||||
</FormField>
|
||||
|
||||
<div class="flex gap-2 pt-2">
|
||||
<Button Type="submit">Submit</Button>
|
||||
<Button Type="reset" Variant="@ButtonVariant.Outline">Reset</Button>
|
||||
</div>
|
||||
</HtmxForm>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## RuleFor API Reference
|
||||
|
||||
```csharp
|
||||
protected void RuleFor(
|
||||
string field, // Form field name (must match the input's Name)
|
||||
string? displayName, // Human-readable label (auto-generated from field if omitted)
|
||||
bool required, // Whether the field is required
|
||||
int? minLength, // Minimum string length
|
||||
int? maxLength, // Maximum string length
|
||||
string? pattern, // Regex pattern for format validation
|
||||
double? min, // Minimum numeric value
|
||||
double? max, // Maximum numeric value
|
||||
string? message, // Custom error message for pattern failures
|
||||
Func<string, string?>? custom // Custom validation function
|
||||
);
|
||||
```
|
||||
|
||||
### Validation Order
|
||||
|
||||
Rules are evaluated in this order — the first failure stops evaluation:
|
||||
|
||||
1. **Required** — empty/whitespace check
|
||||
2. **Empty skip** — if not required and value is empty, the field passes (skips remaining rules)
|
||||
3. **MinLength** — minimum character count
|
||||
4. **MaxLength** — maximum character count
|
||||
5. **Pattern** — regex match (uses `message` if provided, else default format error)
|
||||
6. **Min/Max** — numeric range (attempts to parse as `double`)
|
||||
7. **Custom** — arbitrary validation function returning an error string or `null`
|
||||
|
||||
### Custom Validators
|
||||
|
||||
The `custom` parameter accepts a `Func<string, string?>` — receive the trimmed value, return an error message or `null`:
|
||||
|
||||
```csharp
|
||||
RuleFor("confirmation",
|
||||
required: true,
|
||||
custom: value => value != "CONFIRM"
|
||||
? "You must type CONFIRM to proceed."
|
||||
: null);
|
||||
```
|
||||
|
||||
For date/time/datetime fields, use `TryParse`:
|
||||
|
||||
```csharp
|
||||
RuleFor("birthdate",
|
||||
custom: value => !DateOnly.TryParse(value, out _)
|
||||
? "Please enter a valid date."
|
||||
: null);
|
||||
```
|
||||
|
||||
> **Note**: Custom validators only run when the value is non-empty. If the field is not required and left blank, the custom function is never called.
|
||||
|
||||
---
|
||||
|
||||
## How It Works
|
||||
|
||||
### On Blur (Per-Field)
|
||||
|
||||
1. `InputBase<T>` auto-injects htmx attributes when inside `HtmxForm` + `FormField`
|
||||
2. When the user leaves an input, htmx fires `POST /validate` with the field name and value
|
||||
3. The server calls `FormValidator.ValidateField()` and returns an HTML `<p>` fragment
|
||||
4. htmx replaces the existing `<p data-field-error="...">` element with the response
|
||||
|
||||
### On Submit (Full Form)
|
||||
|
||||
1. `HtmxForm` adds `hx-post="/submit"` to the `<form>` element
|
||||
2. htmx sends all form fields
|
||||
3. The server calls `FormValidator.ValidateAll()` and returns:
|
||||
- **If errors**: OOB (out-of-band) swap fragments for each field's error element
|
||||
- **If valid**: Success message + OOB swaps to clear all errors
|
||||
|
||||
### HtmxForm Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| `Endpoint` | `string` | **required** | Base path (e.g. `/api/forms/contact`) |
|
||||
| `ResultId` | `string` | `"form-result"` | ID of the result div for success/error messages |
|
||||
| `Class` | `string?` | — | Additional CSS classes on the `<form>` |
|
||||
|
||||
### Form Reset
|
||||
|
||||
Clicking a `<Button Type="reset">` triggers the browser's native form reset. The `forms.js` module listens for the `reset` event and:
|
||||
- Clears all visible input values
|
||||
- Hides all `[data-field-error]` elements
|
||||
- Hides the result div
|
||||
- Resets date/time trigger button text to their placeholders
|
||||
@@ -0,0 +1,209 @@
|
||||
# Getting Started
|
||||
|
||||
This guide walks you through adding **Enciphered.Blazor.UIComponents** to a new or existing Blazor Web App and building a fully static SSR application with htmx-powered form validation.
|
||||
|
||||
---
|
||||
|
||||
## Prerequisites
|
||||
|
||||
| Tool | Version |
|
||||
|---|---|
|
||||
| .NET SDK | 9.0+ |
|
||||
| Node.js | 18+ (for Tailwind CSS CLI) |
|
||||
|
||||
---
|
||||
|
||||
## 1. Create a Blazor Web App
|
||||
|
||||
```bash
|
||||
dotnet new blazor -n MyApp --interactivity None
|
||||
cd MyApp
|
||||
```
|
||||
|
||||
> The `--interactivity None` flag creates a pure static SSR app — no SignalR or WebAssembly.
|
||||
|
||||
---
|
||||
|
||||
## 2. Install the Library
|
||||
|
||||
```bash
|
||||
dotnet add reference path/to/Enciphered.Blazor.UIComponents.csproj
|
||||
```
|
||||
|
||||
Or, if published as a NuGet package:
|
||||
|
||||
```bash
|
||||
dotnet add package Enciphered.Blazor.UIComponents
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Install Tailwind CSS v4
|
||||
|
||||
From your solution root, initialize npm and install Tailwind:
|
||||
|
||||
```bash
|
||||
npm init -y
|
||||
npm install tailwindcss @tailwindcss/cli
|
||||
```
|
||||
|
||||
Create `Styles/app.css` in your app project:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
```
|
||||
|
||||
Add the library's design tokens by importing or copying the token definitions from `Enciphered.Blazor.UIComponents/Styles/app.css`. At minimum you need the `:root` and `.dark` token blocks and the `@theme` mapping.
|
||||
|
||||
Add a build step to your `.csproj`:
|
||||
|
||||
```xml
|
||||
<Target Name="TailwindBuild" BeforeTargets="Build">
|
||||
<Exec Command="npx @tailwindcss/cli -i Styles/app.css -o wwwroot/css/app.css --minify" />
|
||||
</Target>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Configure `App.razor`
|
||||
|
||||
Your root `App.razor` needs three things:
|
||||
|
||||
1. **Stylesheet references** — the library CSS and your app CSS
|
||||
2. **htmx CDN** — loaded after `blazor.web.js`
|
||||
3. **JS module imports** — initialize the library's interactive modules
|
||||
|
||||
```razor
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base href="/" />
|
||||
|
||||
<!-- Dark-mode bootstrap: prevents flash of wrong theme -->
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
if (localStorage.getItem('theme') === 'dark')
|
||||
document.documentElement.classList.add('dark');
|
||||
} catch (e) { }
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Library stylesheet (design tokens + component styles) -->
|
||||
<link rel="stylesheet" href="_content/Enciphered.Blazor.UIComponents/css/app.css" />
|
||||
|
||||
<!-- Your app stylesheet -->
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
|
||||
<HeadOutlet />
|
||||
</head>
|
||||
<body class="min-h-svh antialiased bg-background text-foreground">
|
||||
<Routes />
|
||||
|
||||
<!-- Blazor framework script -->
|
||||
<script src="_framework/blazor.web.js"></script>
|
||||
|
||||
<!-- htmx (required for form validation/submission) -->
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"
|
||||
integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Initialize library JS modules -->
|
||||
<script type="module">
|
||||
import { init as initDarkMode } from '/_content/Enciphered.Blazor.UIComponents/js/darkmode.js';
|
||||
import { init as initSidebar } from '/_content/Enciphered.Blazor.UIComponents/js/sidebar.js';
|
||||
import { init as initForms } from '/_content/Enciphered.Blazor.UIComponents/js/forms.js';
|
||||
initDarkMode();
|
||||
initSidebar();
|
||||
initForms();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
> **Note**: Only import the modules you need. If you don't use the sidebar, skip `initSidebar()`. If you don't use forms, skip `initForms()`. If you don't need dark mode, skip `initDarkMode()` and the bootstrap script.
|
||||
|
||||
---
|
||||
|
||||
## 5. Configure `Program.cs`
|
||||
|
||||
Register Razor Components and map the library assembly:
|
||||
|
||||
```csharp
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
builder.Services.AddRazorComponents();
|
||||
builder.Services.AddAntiforgery();
|
||||
|
||||
var app = builder.Build();
|
||||
|
||||
app.UseHttpsRedirection();
|
||||
app.UseAntiforgery();
|
||||
app.MapStaticAssets();
|
||||
|
||||
app.MapRazorComponents<App>()
|
||||
.AddAdditionalAssemblies(
|
||||
typeof(Enciphered.Blazor.UIComponents.SidebarProvider).Assembly);
|
||||
|
||||
app.Run();
|
||||
```
|
||||
|
||||
> The `AddAdditionalAssemblies` call registers the library's components for routing discovery.
|
||||
|
||||
---
|
||||
|
||||
## 6. Add `_Imports.razor`
|
||||
|
||||
In your app's `Components/_Imports.razor`, add:
|
||||
|
||||
```razor
|
||||
@using Enciphered.Blazor.UIComponents
|
||||
```
|
||||
|
||||
This makes all library components available without per-file `@using` directives.
|
||||
|
||||
---
|
||||
|
||||
## 7. Verify the Setup
|
||||
|
||||
Create a simple page to test:
|
||||
|
||||
```razor
|
||||
@page "/test"
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>It Works!</CardTitle>
|
||||
<CardDescription>The library is installed correctly.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>If you can see this styled card, everything is set up.</p>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button>Click Me</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```bash
|
||||
dotnet run
|
||||
```
|
||||
|
||||
You should see a styled card with a button. If the styles aren't applied, verify:
|
||||
- The Tailwind build step ran (check `wwwroot/css/app.css` exists)
|
||||
- The stylesheet links in `App.razor` are correct
|
||||
- The design tokens are present in your `Styles/app.css`
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
- [Set up a sidebar layout →](components/sidebar.md)
|
||||
- [Add form validation with htmx →](forms/validation.md)
|
||||
- [Browse all components →](components/button.md)
|
||||
Reference in New Issue
Block a user