shaamilahmed/Enciphered.Blazor.UIComponents
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

changing-to-js-from-interactivity #1

Merged
shaamilahmed merged 3 commits from changing-to-js-from-interactivity into main 2026-04-13 18:59:36 +05:00
Conversation 0 Commits 3 Files Changed 40
+1203 -188
24 changed files with 1203 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b323862e03 - Show all commits
Enciphered.Blazor.UIComponents.Demo/Components/App.razor
+3
View File
@@ -26,6 +26,9 @@
<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';
Enciphered.Blazor.UIComponents.Demo/Components/Pages/FormsDemo.razor
+31 -30
View File
@@ -5,45 +5,46 @@
<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 — fully static SSR with JS interactivity.</p>
<p class="text-muted-foreground">All input components — fully static SSR with htmx validation.</p>
</div>
<form>
<HtmxForm Endpoint="/api/forms/contact">
<FormField Label="Full Name" For="name">
<TextInput Id="name" Name="name" Placeholder="Jane Doe" data-testid="input-name" />
</FormField>
<div class="space-y-4">
<FormField Label="Full Name" For="name">
<TextInput Id="name" Name="name" Placeholder="Jane Doe" data-testid="input-name" />
</FormField>
<FormField Label="Email" For="email">
<TextInput Id="email" Name="email" Type="email" Placeholder="jane@example.com" data-testid="input-email" />
</FormField>
<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">
<TextInput Id="password" Name="password" Type="password" Placeholder="••••••••" data-testid="input-password" />
</FormField>
<FormField Label="Password" For="password">
<TextInput Id="password" Name="password" Type="password" Placeholder="••••••••" data-testid="input-password" />
</FormField>
<FormField Label="Age" For="age">
<NumberInput Id="age" Name="age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
</FormField>
<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">
<DateInput Id="birthdate" Name="birthdate" data-testid="input-birthdate" />
</FormField>
<FormField Label="Birth Date" For="birthdate">
<DateInput Id="birthdate" Name="birthdate" data-testid="input-birthdate" />
</FormField>
<FormField Label="Preferred Time" For="preferredtime">
<TimeInput Id="preferredtime" Name="preferredtime" data-testid="input-time" />
</FormField>
<FormField Label="Preferred Time" For="preferredtime">
<TimeInput Id="preferredtime" Name="preferredtime" data-testid="input-time" />
</FormField>
<FormField Label="Appointment" For="appointment">
<DateTimeInput Id="appointment" Name="appointment" data-testid="input-appointment" />
</FormField>
<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 Type="reset" Variant="@ButtonVariant.Outline" data-testid="btn-reset">Reset</Button>
<Button Variant="@ButtonVariant.Destructive" Disabled="true" data-testid="btn-disabled">Disabled</Button>
</div>
<div class="flex gap-2 pt-2">
<Button Type="submit" data-testid="btn-submit">Submit</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>
</form>
</HtmxForm>
</div>
Enciphered.Blazor.UIComponents.Demo/ContactFormModel.cs
+13
View File
@@ -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; } = "";
}
Enciphered.Blazor.UIComponents.Demo/ContactFormValidator.cs
+47
View File
@@ -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);
}
}
Enciphered.Blazor.UIComponents.Demo/Program.cs
+18 -4
View File
@@ -1,27 +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();
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>()
.AddAdditionalAssemblies(typeof(Enciphered.Blazor.UIComponents.SidebarProvider).Assembly);
app.MapFormValidation<ContactFormValidator, ContactFormModel>("/api/forms/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();
Enciphered.Blazor.UIComponents.Tests/FormsTests.cs
+1 -1
View File
@@ -266,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]
Enciphered.Blazor.UIComponents.Tests/ValidationTests.cs
+648
View File
@@ -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();
}
}
Enciphered.Blazor.UIComponents/Enciphered.Blazor.UIComponents.csproj
+1
View File
@@ -15,6 +15,7 @@
</ItemGroup>
<ItemGroup>
<FrameworkReference Include="Microsoft.AspNetCore.App" />
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.14" />
</ItemGroup>
Enciphered.Blazor.UIComponents/Forms/Button.razor
-9
View File
@@ -17,16 +17,7 @@
[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 string? Class { get; set; }
Enciphered.Blazor.UIComponents/Forms/DateInput.razor
+1 -3
View File
@@ -1,7 +1,6 @@
@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"
@@ -12,7 +11,7 @@
tabindex="-1"
aria-hidden="true"
disabled="@Disabled"
@attributes="AdditionalAttributes" />
@attributes="MergedAttributes" />
<Popover>
<Trigger>
@@ -20,7 +19,6 @@
disabled="@Disabled"
data-testid="@($"trigger-{Id}")"
class="@TriggerClass">
@* Lucide calendar 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"
class="mr-2 shrink-0 text-muted-foreground">
Enciphered.Blazor.UIComponents/Forms/DateTimeInput.razor
+1 -11
View File
@@ -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,9 +9,8 @@
tabindex="-1"
aria-hidden="true"
disabled="@Disabled"
@attributes="AdditionalAttributes" />
@attributes="MergedAttributes" />
@* Hidden helper inputs for JS to write date/time portions separately *@
<input type="hidden" id="@($"{Id}-date-part")"
value="@(SelectedDateOnly?.ToString("yyyy-MM-dd") ?? "")"
data-trigger-id="@($"trigger-{Id}-date")"
@@ -26,16 +24,13 @@
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>
<Trigger>
<button type="button"
disabled="@Disabled"
data-testid="@($"trigger-{Id}-date")"
class="@TriggerClass">
@* Lucide calendar 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"
class="mr-2 shrink-0 text-muted-foreground">
@@ -53,14 +48,12 @@
</Content>
</Popover>
@* ── Time portion ── *@
<Popover>
<Trigger>
<button type="button"
disabled="@Disabled"
data-testid="@($"trigger-{Id}-time")"
class="@TriggerClass">
@* Lucide clock 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"
class="mr-2 shrink-0 text-muted-foreground">
@@ -82,9 +75,6 @@
[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 DateOnly? SelectedDateOnly =>
Enciphered.Blazor.UIComponents/Forms/FormField.razor
+9 -17
View File
@@ -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>
}
@ChildContent
<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}";
}
Enciphered.Blazor.UIComponents/Forms/HtmxForm.razor
+30
View File
@@ -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 ?? "";
}
Enciphered.Blazor.UIComponents/Forms/InputBase.cs
+27 -22
View File
@@ -2,19 +2,10 @@ using Microsoft.AspNetCore.Components;
namespace Enciphered.Blazor.UIComponents;
/// <summary>
/// Abstract base for all form input components. Provides parameter declarations
/// for value, id, name, disabled state, and CSS class computation.
/// All interactivity is handled by the forms.js module.
/// </summary>
public abstract class InputBase<TValue> : ComponentBase
{
// ── Value (for initial SSR render) ───────────────────────────────────────
[Parameter] public TValue? Value { get; set; }
// ── Common parameters ────────────────────────────────────────────────────
[Parameter] public string? Id { get; set; }
[Parameter] public string? Name { get; set; }
[Parameter] public bool Disabled { get; set; }
@@ -22,15 +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; }
// ── CSS helpers ──────────────────────────────────────────────────────────
[CascadingParameter(Name = "ValidationEndpoint")]
public string? ValidationEndpoint { get; set; }
[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 " +
@@ -38,16 +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 + consumer override.
/// </summary>
protected string ComputedClass
protected string ComputedClass =>
string.IsNullOrEmpty(Class) ? BaseInputClass : $"{BaseInputClass} {Class}";
protected Dictionary<string, object> MergedAttributes
{
get
{
return string.IsNullOrEmpty(Class)
? BaseInputClass
: $"{BaseInputClass} {Class}";
var attrs = AdditionalAttributes is not null
? new Dictionary<string, object>(AdditionalAttributes)
: new Dictionary<string, object>();
if (!string.IsNullOrEmpty(ValidationEndpoint) &&
!string.IsNullOrEmpty(FieldName) &&
!attrs.ContainsKey("hx-post"))
{
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}\"}}";
}
return attrs;
}
}
}
Enciphered.Blazor.UIComponents/Forms/NumberInput.razor
+1 -1
View File
@@ -13,7 +13,7 @@
min="@Min"
max="@Max"
class="@ComputedClass [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none pr-8"
@attributes="AdditionalAttributes" />
@attributes="MergedAttributes" />
@if (!Disabled && !ReadOnly)
{
Enciphered.Blazor.UIComponents/Forms/TextInput.razor
+1 -5
View File
@@ -9,12 +9,8 @@
disabled="@Disabled"
readonly="@ReadOnly"
class="@ComputedClass"
@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";
}
Enciphered.Blazor.UIComponents/Forms/TimeInput.razor
+1 -8
View File
@@ -1,7 +1,6 @@
@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"
@@ -12,7 +11,7 @@
tabindex="-1"
aria-hidden="true"
disabled="@Disabled"
@attributes="AdditionalAttributes" />
@attributes="MergedAttributes" />
<Popover>
<Trigger>
@@ -20,7 +19,6 @@
disabled="@Disabled"
data-testid="@($"trigger-{Id}")"
class="@TriggerClass">
@* Lucide clock 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"
class="mr-2 shrink-0 text-muted-foreground">
@@ -38,12 +36,7 @@
</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 int ParsedMinuteStep => int.TryParse(Step, out var s) && s >= 60 ? s / 60 : 1;
Enciphered.Blazor.UIComponents/Forms/Validation/FormModelBinder.cs
+55
View File
@@ -0,0 +1,55 @@
using System.Globalization;
using System.Reflection;
using Microsoft.AspNetCore.Http;
namespace Enciphered.Blazor.UIComponents.Validation;
public static class FormModelBinder
{
public static TModel Bind<TModel>(IFormCollection form) where TModel : new()
{
var model = new TModel();
var props = typeof(TModel).GetProperties(BindingFlags.Public | BindingFlags.Instance)
.Where(p => p.CanWrite);
foreach (var prop in props)
{
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;
}
}
Enciphered.Blazor.UIComponents/Forms/Validation/FormValidationRule.cs
+71
View File
@@ -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();
}
}
Enciphered.Blazor.UIComponents/Forms/Validation/FormValidator.cs
+55
View File
@@ -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;
}
}
Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationExtensions.cs
+79
View File
@@ -0,0 +1,79 @@
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, 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;
}
}
Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationRenderer.cs
+62
View File
@@ -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;
}
}
Enciphered.Blazor.UIComponents/wwwroot/css/app.css
+1 -1
View File
File diff suppressed because one or more lines are too long
Enciphered.Blazor.UIComponents/wwwroot/js/forms.js
+47 -76
View File
@@ -1,17 +1,6 @@
/* ═══════════════════════════════════════════════════════════════════════════
* Forms Module — handles all interactive form behaviour via vanilla JS.
* Manages: Popover open/close, Calendar navigation & day selection,
* TimePicker hour/minute/period selection, NumberInput +/- stepping.
* Survives Blazor enhanced-navigation via MutationObserver.
* ═══════════════════════════════════════════════════════════════════════════ */
let initialized = false;
let bodyObserver = null;
// ─────────────────────────────────────────────────────────────────────────────
// ── Popover ──────────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────────
function openPopover(wrapper) {
const panel = wrapper.querySelector('[data-popover-panel]');
const backdrop = wrapper.querySelector('[data-popover-backdrop]');
@@ -36,13 +25,8 @@ function togglePopover(wrapper) {
else openPopover(wrapper);
}
// ─────────────────────────────────────────────────────────────────────────────
// ── Calendar ─────────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────────
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'];
const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function getCalendarState(cal) {
return {
@@ -103,7 +87,6 @@ function renderCalendar(cal) {
const contentEl = cal.querySelector('[data-calendar-content]');
if (!contentEl) return;
// Update header labels
const monthLabel = cal.querySelector('[data-calendar-month]');
const yearLabel = cal.querySelector('[data-calendar-year]');
if (monthLabel) monthLabel.textContent = MONTH_NAMES_SHORT[state.displayMonth - 1];
@@ -211,10 +194,6 @@ function calendarNext(cal) {
setCalendarState(cal, state);
}
// ─────────────────────────────────────────────────────────────────────────────
// ── TimePicker ───────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────────
function getTimePickerState(tp) {
return {
hour: parseInt(tp.getAttribute('data-selected-hour') || '0'),
@@ -234,7 +213,6 @@ function setTimePickerState(tp, state) {
function renderTimePicker(tp) {
const state = getTimePickerState(tp);
// Update selected states on buttons
tp.querySelectorAll('[data-tp-hour]').forEach(btn => {
const val = parseInt(btn.getAttribute('data-tp-hour'));
updateTimeItemSelected(btn, val === state.hour);
@@ -278,10 +256,6 @@ function formatTime12(hour, minute) {
return String(h12).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ' ' + (isPm ? 'PM' : 'AM');
}
// ─────────────────────────────────────────────────────────────────────────────
// ── NumberInput ──────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────────
function handleNumberIncrement(wrapper, direction) {
const input = wrapper.querySelector('input[type="number"]');
if (!input) return;
@@ -293,16 +267,13 @@ function handleNumberIncrement(wrapper, direction) {
let current = parseFloat(input.value) || 0;
current += step * direction;
// Clamp
if (min !== null && current < min) current = min;
if (max !== null && current > max) current = max;
input.value = current;
// Fire native input event so forms pick it up
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));
// Update disabled state on buttons
updateStepperDisabledState(wrapper);
}
@@ -325,10 +296,6 @@ function updateStepperDisabledState(wrapper) {
}
}
// ─────────────────────────────────────────────────────────────────────────────
// ── Trigger text sync (DateInput / TimeInput / DateTimeInput) ────────────────
// ─────────────────────────────────────────────────────────────────────────────
function syncDateTriggerText(hiddenInput) {
const triggerId = hiddenInput.getAttribute('data-trigger-id');
if (!triggerId) return;
@@ -341,8 +308,6 @@ function syncDateTriggerText(hiddenInput) {
if (val) {
const [y, m, d] = val.split('-').map(Number);
const date = new Date(y, m - 1, d);
// DateTime date-parts use short month ("Dec 25, 2025"),
// standalone DateInput uses long month ("December 25, 2025")
const isDateTimePart = hiddenInput.hasAttribute('data-datetime-part');
const options = isDateTimePart
? { month: 'short', day: 'numeric', year: 'numeric' }
@@ -374,14 +339,9 @@ function syncTimeTriggerText(hiddenInput) {
}
}
// ─────────────────────────────────────────────────────────────────────────────
// ── Global click handler ─────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────────
function handleClick(e) {
const target = e.target;
// ── Popover trigger ──
const popoverTrigger = target.closest('[data-popover-trigger]');
if (popoverTrigger) {
const wrapper = popoverTrigger.closest('[data-popover]');
@@ -392,7 +352,6 @@ function handleClick(e) {
}
}
// ── Popover backdrop (close on outside click) ──
const backdrop = target.closest('[data-popover-backdrop]');
if (backdrop) {
const wrapper = backdrop.closest('[data-popover]');
@@ -403,21 +362,18 @@ function handleClick(e) {
}
}
// ── Calendar: Previous button ──
const prevBtn = target.closest('[data-calendar-prev]');
if (prevBtn) {
const cal = prevBtn.closest('[data-calendar]');
if (cal) { calendarPrev(cal); return; }
}
// ── Calendar: Next button ──
const nextBtn = target.closest('[data-calendar-next]');
if (nextBtn) {
const cal = nextBtn.closest('[data-calendar]');
if (cal) { calendarNext(cal); return; }
}
// ── Calendar: Month header toggle ──
const monthHeader = target.closest('[data-calendar-month]');
if (monthHeader) {
const cal = monthHeader.closest('[data-calendar]');
@@ -429,7 +385,6 @@ function handleClick(e) {
}
}
// ── Calendar: Year header toggle ──
const yearHeader = target.closest('[data-calendar-year]');
if (yearHeader) {
const cal = yearHeader.closest('[data-calendar]');
@@ -441,7 +396,6 @@ function handleClick(e) {
}
}
// ── Calendar: Select month ──
const monthBtn = target.closest('[data-calendar-select-month]');
if (monthBtn) {
const cal = monthBtn.closest('[data-calendar]');
@@ -454,7 +408,6 @@ function handleClick(e) {
}
}
// ── Calendar: Select year ──
const yearBtn = target.closest('[data-calendar-select-year]');
if (yearBtn) {
const cal = yearBtn.closest('[data-calendar]');
@@ -469,7 +422,6 @@ function handleClick(e) {
}
}
// ── Calendar: Select day ──
const dayBtn = target.closest('[data-calendar-day]');
if (dayBtn && !dayBtn.disabled) {
const cal = dayBtn.closest('[data-calendar]');
@@ -482,7 +434,6 @@ function handleClick(e) {
state.displayMonth = m;
setCalendarState(cal, state);
// Update the linked hidden input
const inputId = cal.getAttribute('data-linked-input');
if (inputId) {
const hiddenInput = document.getElementById(inputId);
@@ -493,14 +444,12 @@ function handleClick(e) {
}
}
// Auto-close popover parent
const popover = cal.closest('[data-popover]');
if (popover) closePopover(popover);
return;
}
}
// ── TimePicker: Select hour ──
const hourBtn = target.closest('[data-tp-hour]');
if (hourBtn) {
const tp = hourBtn.closest('[data-timepicker]');
@@ -513,7 +462,6 @@ function handleClick(e) {
}
}
// ── TimePicker: Select minute ──
const minuteBtn = target.closest('[data-tp-minute]');
if (minuteBtn) {
const tp = minuteBtn.closest('[data-timepicker]');
@@ -526,7 +474,6 @@ function handleClick(e) {
}
}
// ── TimePicker: Select AM/PM ──
const periodBtn = target.closest('[data-tp-period]');
if (periodBtn) {
const tp = periodBtn.closest('[data-timepicker]');
@@ -539,14 +486,12 @@ function handleClick(e) {
}
}
// ── NumberInput: Increment ──
const incBtn = target.closest('[data-number-increment]');
if (incBtn) {
const wrapper = incBtn.closest('[data-number-input]');
if (wrapper) { handleNumberIncrement(wrapper, 1); return; }
}
// ── NumberInput: Decrement ──
const decBtn = target.closest('[data-number-decrement]');
if (decBtn) {
const wrapper = decBtn.closest('[data-number-input]');
@@ -566,10 +511,6 @@ function syncTimeToHiddenInput(tp) {
syncTimeTriggerText(hiddenInput);
}
// ─────────────────────────────────────────────────────────────────────────────
// ── Global input handler (for NumberInput stepper disabled state) ─────────────
// ─────────────────────────────────────────────────────────────────────────────
function handleInput(e) {
const target = e.target;
if (target.matches('[data-number-input] input[type="number"]')) {
@@ -578,27 +519,56 @@ function handleInput(e) {
}
}
// ─────────────────────────────────────────────────────────────────────────────
// ── Init all static calendars/timepickers on the page ────────────────────────
// ─────────────────────────────────────────────────────────────────────────────
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() {
// Render all calendars
document.querySelectorAll('[data-calendar]').forEach(cal => {
renderCalendar(cal);
});
// Render all timepickers
document.querySelectorAll('[data-timepicker]').forEach(tp => {
renderTimePicker(tp);
});
// Init all number input stepper states
document.querySelectorAll('[data-number-input]').forEach(wrapper => {
updateStepperDisabledState(wrapper);
});
// Ensure all popovers start closed
document.querySelectorAll('[data-popover]').forEach(wrapper => {
if (wrapper.getAttribute('data-popover-open') !== 'true') {
closePopover(wrapper);
@@ -606,30 +576,31 @@ function initComponents() {
});
}
// ─────────────────────────────────────────────────────────────────────────────
// ── Lifecycle ────────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────────
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);
// Watch for Blazor enhanced-nav replacing content
document.addEventListener('blazor:enhanced-load', () => {
initComponents();
document.addEventListener('htmx:afterSwap', () => {
syncValidationStyling();
});
document.addEventListener('blazor:enhanced-load', () => {
initComponents();
if (typeof htmx !== 'undefined') htmx.process(document.body);
});
// Body observer for dynamic content
bodyObserver = new MutationObserver(() => {
// If new calendars/timepickers/popovers appeared, init them
const uninitCals = document.querySelectorAll('[data-calendar]:not([data-initialized])');
uninitCals.forEach(cal => {
cal.setAttribute('data-initialized', 'true');