shaamilahmed
d1f0967a0c
- Replace server interactivity with vanilla JS (forms.js) for Popover, Calendar, TimePicker, NumberInput, and Counter components - Rewrite all Razor components to static SSR using data-* attributes for JS hooks - Simplify InputBase.cs (remove EventCallback, EditContext, SetValueAsync) - Remove AddInteractiveServerComponents/AddInteractiveServerRenderMode from Program.cs - Update demo pages: remove @rendermode, replace EditForm with native form - Add InteractivityGapTests.cs with 30 scoped E2E tests - Update FormsTests.cs selectors for new static SSR structure - Fix year picker navigation bug and date format mismatch in forms.js - All 126 tests passing
50 lines
2.0 KiB
Plaintext
50 lines
2.0 KiB
Plaintext
@page "/forms"
|
|
|
|
<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 — fully static SSR with JS interactivity.</p>
|
|
</div>
|
|
|
|
<form>
|
|
|
|
<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="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="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="Appointment" For="appointment">
|
|
<DateTimeInput Id="appointment" Name="appointment" data-testid="input-appointment" />
|
|
</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>
|
|
</form>
|
|
</div>
|