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

Migrating all validation to use HTMX and endpoints instead of WASM/Websocket connections

Browse Source
This commit is contained in:
shaamilahmed
2026-04-13 18:40:17 +05:00
parent d1f0967a0c
commit b323862e03
24 changed files with 1203 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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>