51 lines
2.5 KiB
Markdown
51 lines
2.5 KiB
Markdown
# 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 |