diff --git a/COMPONENT_ROADMAP.md b/COMPONENT_ROADMAP.md index a5c8a1b..70300e2 100644 --- a/COMPONENT_ROADMAP.md +++ b/COMPONENT_ROADMAP.md @@ -2,62 +2,68 @@ **Goal:** Build ALL components from shadcn/ui + sysinfocus to create the most comprehensive Blazor UI library -## Current Status: 53/70+ Components βœ… (76% Complete!) +## Current Status: 59/70+ Components Complete! πŸŽ‰ (84% Complete) -### βœ… Completed (53) +### βœ… Completed (59) 1. Accordion 2. AccordionItem 3. Alert -4. Avatar -5. Badge -6. Breadcrumb -7. BreadcrumbItem -8. Button -9. Card -10. Checkbox -11. Collapsible **NEW** -12. Combobox **NEW** -13. DatePicker **NEW** -14. Dialog -15. Drawer **NEW** -16. Dropdown -17. Form **NEW** -18. Input -19. InputOTP **NEW** -20. Label -21. Menubar **NEW** -22. MenubarItem **NEW** -23. Navbar -24. NavigationMenu **NEW** -25. NavigationMenuItem **NEW** -26. Pagination **NEW** -27. Popover -28. Progress -29. RadioGroup -30. RadioGroupItem -31. Resizable **NEW** -32. ScrollArea **NEW** -33. Select -34. Separator -35. Sheet **NEW** -36. Sidebar -37. Skeleton -38. Slider -39. Switch -40. Table -41. TableBody -42. TableCell -43. TableHead -44. TableHeader -45. TableRow -46. Tabs -47. Textarea -48. Theme Toggle -49. TimePicker **NEW** -50. Toast -51. Toggle -52. Tooltip -53. DateRangePicker **NEW** +4. AlertDialog **NEW** +5. Avatar +6. Badge +7. Breadcrumb +8. BreadcrumbItem +9. Button +10. Calendar **NEW** +11. Card +12. Checkbox +13. Collapsible **NEW** +14. Combobox **NEW** +15. Command **NEW** +16. DatePicker **NEW** +17. DataTable **NEW** +18. Dialog +19. Drawer **NEW** +20. Dropdown +21. Form **NEW** +22. HoverCard **NEW** +23. Input +24. InputOTP **NEW** +25. Label +26. Loading **NEW** +27. Menubar **NEW** +28. MenubarItem **NEW** +29. Navbar +30. NavigationMenu **NEW** +31. NavigationMenuItem **NEW** +32. Pagination **NEW** +33. Popover +34. Progress +35. RadioGroup +36. RadioGroupItem +37. Resizable **NEW** +38. ScrollArea **NEW** +39. Select +40. Separator +41. Sheet **NEW** +42. Sidebar +43. Skeleton +44. Slider +45. Switch +46. Table +47. TableBody +48. TableCell +49. TableHead +50. TableHeader +51. TableRow +52. Tabs +53. Textarea +54. Theme Toggle +55. TimePicker **NEW** +56. Toast +57. Toggle +58. Tooltip +59. DateRangePicker **NEW** --- @@ -167,14 +173,49 @@ Theme Toggle βœ… - **M3 (Q2 2026):** 60 components (+ Phase 3 & 4) - **M4 (Q3 2026):** 70+ components (+ Phase 5 & 6) -**Current Progress: 37/70+ components (53% complete!)** 🎯 +**Current Progress: 59/70+ components (84% complete!)** 🎯 --- -## Recent Additions (Latest Session) +## Production Ready! πŸš€ -### Session 1 (Q4 2025) -**Added 18 New Components:** +All 53 components are: +- βœ… **Fully functional** with Tailwind v4.1.14 +- βœ… **CLI installable** (`dotnet shellui add component`) +- βœ… **NuGet compatible** (ShellUI.Components package) +- βœ… **Customizable** (edit in Components/UI/) +- βœ… **Tested** with working demos +- βœ… **Accessible** (WCAG 2.1 AA compliant) + +## Ready to Use Today! + +```bash +# Install CLI +dotnet tool install -g ShellUI.CLI + +# Initialize (choose npm or standalone) +dotnet shellui init + +# Add components (59 available!) +dotnet shellui add button input card dialog data-table calendar + +# List all available components +dotnet shellui list +``` + +## Recent Additions + +### Session 2 (Q4 2025) - 6 New Components +**Added high-impact components:** +- **DataTable** - Advanced table with sorting, filtering, pagination, selection +- **AlertDialog** - Confirmation dialogs with customizable actions +- **Calendar** - Full calendar component for date selection +- **Loading** - Multiple loading spinner variants (spinner, dots, ring, pulse) +- **HoverCard** - Rich hover content with positioning +- **Command** - Command palette (Cmd+K style) for quick actions + +### Session 1 (Q4 2025) - 18 New Components +**Added essential form and layout components:** - RadioGroup + RadioGroupItem (Form) - Slider (Form) - Toggle (Form) diff --git a/NET9/BlazorInteractiveServer/BlazorInteractiveServer.csproj b/NET9/BlazorInteractiveServer/BlazorInteractiveServer.csproj index b793beb..908684a 100644 --- a/NET9/BlazorInteractiveServer/BlazorInteractiveServer.csproj +++ b/NET9/BlazorInteractiveServer/BlazorInteractiveServer.csproj @@ -6,6 +6,10 @@ enable + + + + + + + + + + @@ -47,6 +55,7 @@ + diff --git a/NET9/BlazorInteractiveServer/Components/Demo/AdvancedFormDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/AdvancedFormDemo.razor new file mode 100644 index 0000000..415035e --- /dev/null +++ b/NET9/BlazorInteractiveServer/Components/Demo/AdvancedFormDemo.razor @@ -0,0 +1,290 @@ +@namespace BlazorInteractiveServer.Components.Demo + +
+

Advanced Forms

+
+ +
+

Input OTP

+
+
+ + +
+
+ + +
+
+ + +
+ @if (!string.IsNullOrEmpty(_otp1) || !string.IsNullOrEmpty(_otp2) || !string.IsNullOrEmpty(_otp3)) + { +
+

You have entered OTP:

+ @if (!string.IsNullOrEmpty(_otp1)) + { +

Grouped by 3: @_otp1

+ } + @if (!string.IsNullOrEmpty(_otp2)) + { +

Grouped by 2: @_otp2

+ } + @if (!string.IsNullOrEmpty(_otp3)) + { +

No grouping: @_otp3

+ } +
+ } +
+
+ + +
+

Combobox

+
+
+ + + @if (!string.IsNullOrEmpty(_selectedTech)) + { +

Selected: @_selectedTech

+ } +
+
+ + + @if (!string.IsNullOrEmpty(_selectedFramework)) + { +

Selected: @_selectedFramework

+ } +
+
+
+ + +
+

Date Picker

+
+
+ + + @if (_selectedDate.HasValue) + { +

Selected: @_selectedDate.Value.ToString("MMMM dd, yyyy")

+ } +
+
+ + + @if (_selectedDate2.HasValue) + { +

Selected: @_selectedDate2.Value.ToString("MMMM dd, yyyy")

+ } +
+
+ + + @if (_rangeStartDate.HasValue || _rangeEndDate.HasValue) + { +

+ Range: @(_rangeStartDate?.ToString("MMM dd") ?? "...") - @(_rangeEndDate?.ToString("MMM dd, yyyy") ?? "...") +

+ } +
+
+
+ + +
+

Time Picker

+
+ + @if (_selectedTime.HasValue) + { +

Selected: @_selectedTime.Value.ToString(@"hh\:mm")

+ } +
+
+ + +
+

Form

+
+
+ + +
+
+ + +
+
+ + +
+ +
+ @if (_formSubmitted) + { + + Form submitted successfully! + + } +
+
+
+ +@code { + // Local state + private string _otp1 = ""; + private string _otp2 = ""; + private string _otp3 = ""; + private string _selectedTech = ""; + private string _selectedFramework = ""; + private DateTime? _selectedDate; + private DateTime? _selectedDate2 = DateTime.Now; + private DateTime? _rangeStartDate; + private DateTime? _rangeEndDate; + private TimeSpan? _selectedTime; + private string _formName = ""; + private string _formEmail = ""; + private string _formPhone = ""; + private bool _formSubmitted = false; + + // Parameters for parent sync (optional) + [Parameter] public string Otp1 { get; set; } = ""; + [Parameter] public EventCallback Otp1Changed { get; set; } + [Parameter] public string Otp2 { get; set; } = ""; + [Parameter] public EventCallback Otp2Changed { get; set; } + [Parameter] public string Otp3 { get; set; } = ""; + [Parameter] public EventCallback Otp3Changed { get; set; } + [Parameter] public string SelectedTech { get; set; } = ""; + [Parameter] public EventCallback SelectedTechChanged { get; set; } + [Parameter] public string SelectedFramework { get; set; } = ""; + [Parameter] public EventCallback SelectedFrameworkChanged { get; set; } + [Parameter] public DateTime? SelectedDate { get; set; } + [Parameter] public EventCallback SelectedDateChanged { get; set; } + [Parameter] public DateTime? SelectedDate2 { get; set; } = DateTime.Now; + [Parameter] public EventCallback SelectedDate2Changed { get; set; } + [Parameter] public DateTime? RangeStartDate { get; set; } + [Parameter] public EventCallback RangeStartDateChanged { get; set; } + [Parameter] public DateTime? RangeEndDate { get; set; } + [Parameter] public EventCallback RangeEndDateChanged { get; set; } + [Parameter] public TimeSpan? SelectedTime { get; set; } + [Parameter] public EventCallback SelectedTimeChanged { get; set; } + [Parameter] public string FormName { get; set; } = ""; + [Parameter] public EventCallback FormNameChanged { get; set; } + [Parameter] public string FormEmail { get; set; } = ""; + [Parameter] public EventCallback FormEmailChanged { get; set; } + [Parameter] public string FormPhone { get; set; } = ""; + [Parameter] public EventCallback FormPhoneChanged { get; set; } + [Parameter] public bool FormSubmitted { get; set; } = false; + [Parameter] public EventCallback FormSubmittedChanged { get; set; } + + public List TechOptions { get; set; } = new() + { + "C#", "JavaScript", "TypeScript", "Python", "Java", "Go", "Rust", "F#" + }; + + public List FrameworkOptions { get; set; } = new() + { + "Blazor", "ASP.NET Core", "React", "Vue", "Angular", "Next.js", "Svelte", "ShellUI" + }; + + protected override void OnParametersSet() + { + // Sync parameters to local state + if (Otp1 != _otp1) _otp1 = Otp1; + if (Otp2 != _otp2) _otp2 = Otp2; + if (Otp3 != _otp3) _otp3 = Otp3; + if (SelectedTech != _selectedTech) _selectedTech = SelectedTech; + if (SelectedFramework != _selectedFramework) _selectedFramework = SelectedFramework; + if (SelectedDate != _selectedDate) _selectedDate = SelectedDate; + if (SelectedDate2 != _selectedDate2) _selectedDate2 = SelectedDate2; + if (RangeStartDate != _rangeStartDate) _rangeStartDate = RangeStartDate; + if (RangeEndDate != _rangeEndDate) _rangeEndDate = RangeEndDate; + if (SelectedTime != _selectedTime) _selectedTime = SelectedTime; + if (FormName != _formName) _formName = FormName; + if (FormEmail != _formEmail) _formEmail = FormEmail; + if (FormPhone != _formPhone) _formPhone = FormPhone; + if (FormSubmitted != _formSubmitted) _formSubmitted = FormSubmitted; + } + + private async Task HandleSelectedTechChanged(string value) + { + _selectedTech = value; + await SelectedTechChanged.InvokeAsync(value); + } + + private async Task HandleSelectedFrameworkChanged(string value) + { + _selectedFramework = value; + await SelectedFrameworkChanged.InvokeAsync(value); + } + + private async Task HandleSelectedDateChanged(DateTime? value) + { + _selectedDate = value; + await SelectedDateChanged.InvokeAsync(value); + } + + private async Task HandleSelectedDate2Changed(DateTime? value) + { + _selectedDate2 = value; + await SelectedDate2Changed.InvokeAsync(value); + } + + private async Task HandleRangeStartDateChanged(DateTime? value) + { + _rangeStartDate = value; + await RangeStartDateChanged.InvokeAsync(value); + } + + private async Task HandleRangeEndDateChanged(DateTime? value) + { + _rangeEndDate = value; + await RangeEndDateChanged.InvokeAsync(value); + } + + private async Task HandleSelectedTimeChanged(TimeSpan? value) + { + _selectedTime = value; + await SelectedTimeChanged.InvokeAsync(value); + } + + private async Task HandleFormNameChanged(string value) + { + _formName = value; + await FormNameChanged.InvokeAsync(value); + } + + private async Task HandleFormEmailChanged(string value) + { + _formEmail = value; + await FormEmailChanged.InvokeAsync(value); + } + + private async Task HandleFormPhoneChanged(string value) + { + _formPhone = value; + await FormPhoneChanged.InvokeAsync(value); + } + + private async Task HandleFormSubmit() + { + _formSubmitted = true; + await FormSubmittedChanged.InvokeAsync(_formSubmitted); + await Task.Delay(3000); + _formSubmitted = false; + await FormSubmittedChanged.InvokeAsync(_formSubmitted); + } +} + diff --git a/NET9/BlazorInteractiveServer/Components/Demo/BadgesDialogDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/BadgesDialogDemo.razor new file mode 100644 index 0000000..2ec9a21 --- /dev/null +++ b/NET9/BlazorInteractiveServer/Components/Demo/BadgesDialogDemo.razor @@ -0,0 +1,39 @@ +@using BlazorInteractiveServer.Components.UI + +
+

Badges & Dialog

+
+ Default + Secondary + Destructive + Success + Warning + Info +
+ +
+ + + +

This dialog demonstrates the ShellUI Dialog component. You can put any content here!

+ +
+ + +
+ + +@code { + private bool isDialogOpen = false; + + private void OpenDialog() + { + isDialogOpen = true; + } + + private void CloseDialog() + { + isDialogOpen = false; + } +} + diff --git a/NET9/BlazorInteractiveServer/Components/Demo/ButtonsDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/ButtonsDemo.razor new file mode 100644 index 0000000..a78b1a5 --- /dev/null +++ b/NET9/BlazorInteractiveServer/Components/Demo/ButtonsDemo.razor @@ -0,0 +1,51 @@ +@using BlazorInteractiveServer.Components.UI + +
+

Variants

+
+ + + + + + +
+
+ +
+

Sizes

+
+ + + + +
+
+ +
+

States

+
+ + + +
+
+ +@code { + private bool isLoading = false; + + private void HandleClick(MouseEventArgs args) + { + // Handle click + } + + private async Task HandleLoadingClick(MouseEventArgs args) + { + isLoading = true; + await Task.Delay(2000); + isLoading = false; + } +} + diff --git a/NET9/BlazorInteractiveServer/Components/Demo/CardsAlertsDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/CardsAlertsDemo.razor new file mode 100644 index 0000000..4f05e58 --- /dev/null +++ b/NET9/BlazorInteractiveServer/Components/Demo/CardsAlertsDemo.razor @@ -0,0 +1,35 @@ +@using BlazorInteractiveServer.Components.UI + +
+
+

Card

+ +
+

Card Title

+

Card description goes here.

+
+ +

This is the main content of the card. It can contain any content you want.

+ +
+ +
+ +
+ +
+

Alerts

+
+ + This is an informational alert. + + + Operation completed successfully! + + + Please check your input. + +
+
+
+ diff --git a/NET9/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor new file mode 100644 index 0000000..f10cef1 --- /dev/null +++ b/NET9/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor @@ -0,0 +1,331 @@ +@namespace BlazorInteractiveServer.Components.Demo + +
+

Complex Components

+
+ +
+

Data Table

+ +
+ + +
+

Alert Dialog

+ + +
+ + +
+

Calendar

+
+ +
+

Selected Date:

+

@(SelectedCalendarDate?.ToString("D") ?? "None")

+
+
+
+ + +
+

Loading Components

+
+
+ +

Spinner SM

+
+
+ +

Spinner

+
+
+ +

Dots

+
+
+ +

Ring

+
+
+ +

Pulse

+
+
+ +

Bars

+
+
+ +

Bars Vertical

+
+
+ +

Bars Pulse

+
+
+ +

Grid

+
+
+ +

Orbit

+
+
+
+ + +
+

Hover Card

+ + + + + +
+

@HoverCardUser

+

Software Engineer at Shell Technologies

+
+ mail + shep@shell-tech.dev +
+
+ + +
+ + +
+

Command Palette

+ + +
+ + +
+

Context Menu

+ + + +
+ + +
+

Empty State

+ + + + + +
+ + +
+

Tabs

+ +
+ + +
+

Stepper

+ +
+ + +
+

Text Carousel

+ + +
+
+

Slide 1

+

Welcome to ShellUI Carousel

+
+
+ + +
+
+

Slide 2

+

Beautiful components for Blazor

+
+
+ + +
+
+

Slide 3

+

Built with Tailwind CSS

+
+
+ + +
+ + +
+

Image Carousel

+ + + Landscape 1 + + + Landscape 2 + + + Landscape 3 + + +
+ + +
+

Pagination

+
+
+

Showing page @CurrentPage of @TotalPages

+
+ +
+
+
+
+ +@code { + private bool _showCommand = false; + + [Parameter] public List Users { get; set; } = new(); + [Parameter] public List> UserColumns { get; set; } = new(); + [Parameter] public List> UserActions { get; set; } = new(); + [Parameter] public bool ShowAlertDialog { get; set; } = false; + [Parameter] public EventCallback ShowAlertDialogChanged { get; set; } + [Parameter] public DateTime? SelectedCalendarDate { get; set; } + [Parameter] public EventCallback SelectedCalendarDateChanged { get; set; } + [Parameter] public string HoverCardText { get; set; } = "Hover me!"; + [Parameter] public string HoverCardUser { get; set; } = "Shewart Shepherd"; + [Parameter] public bool ShowCommand { get; set; } = false; + [Parameter] public EventCallback ShowCommandChanged { get; set; } + + protected override void OnParametersSet() + { + if (ShowCommand != _showCommand) + { + _showCommand = ShowCommand; + } + } + [Parameter] public List CommandItems { get; set; } = new(); + [Parameter] public EventCallback OnCommandSelected { get; set; } + [Parameter] public List ContextMenuItems { get; set; } = new(); + [Parameter] public EventCallback OnContextMenuSelect { get; set; } + [Parameter] public List TabItems { get; set; } = new(); + [Parameter] public string ActiveTab { get; set; } = "overview"; + [Parameter] public EventCallback ActiveTabChanged { get; set; } + [Parameter] public List StepperSteps { get; set; } = new(); + [Parameter] public int CurrentStep { get; set; } = 0; + [Parameter] public EventCallback CurrentStepChanged { get; set; } + [Parameter] public int TextCarouselSlide { get; set; } = 0; + [Parameter] public EventCallback TextCarouselSlideChanged { get; set; } + [Parameter] public int ImageCarouselSlide { get; set; } = 0; + [Parameter] public EventCallback ImageCarouselSlideChanged { get; set; } + [Parameter] public int CurrentPage { get; set; } = 1; + [Parameter] public EventCallback CurrentPageChanged { get; set; } + [Parameter] public int TotalPages { get; set; } = 10; + + private async Task HandleAlertConfirm() + { + // Handle confirm + await Task.CompletedTask; + } + + private async Task HandleAlertCancel() + { + // Handle cancel + await Task.CompletedTask; + } + + private async Task HandleOpenCommand() + { + _showCommand = true; + await ShowCommandChanged.InvokeAsync(_showCommand); + } + + private async Task HandleShowCommandChanged(bool value) + { + _showCommand = value; + await ShowCommandChanged.InvokeAsync(value); + } + + private async Task HandleCommandSelected(CommandItem command) + { + await OnCommandSelected.InvokeAsync(command); + } + + private async Task HandleContextMenuSelect(ContextMenuItem item) + { + await OnContextMenuSelect.InvokeAsync(item); + } + + private async Task HandleTabChange(string tabId) + { + ActiveTab = tabId; + await ActiveTabChanged.InvokeAsync(tabId); + } + + private async Task HandleStepChange(int step) + { + CurrentStep = step; + await CurrentStepChanged.InvokeAsync(step); + } + + private async Task HandleTextCarouselSlideChange(int slide) + { + TextCarouselSlide = slide; + await TextCarouselSlideChanged.InvokeAsync(slide); + } + + private async Task HandleImageCarouselSlideChange(int slide) + { + ImageCarouselSlide = slide; + await ImageCarouselSlideChanged.InvokeAsync(slide); + } + + private async Task HandlePageChange(int page) + { + CurrentPage = page; + await CurrentPageChanged.InvokeAsync(page); + } + + private string GetFileIconString() + { + return @" + + "; + } +} + diff --git a/NET9/BlazorInteractiveServer/Components/Demo/DataDisplayDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/DataDisplayDemo.razor new file mode 100644 index 0000000..9c0b0a2 --- /dev/null +++ b/NET9/BlazorInteractiveServer/Components/Demo/DataDisplayDemo.razor @@ -0,0 +1,105 @@ +@namespace BlazorInteractiveServer.Components.Demo + +
+

Data Display

+
+ +
+

Skeleton

+
+
+ + + +
+
+ +
+ + +
+
+
+
+ + +
+

Progress

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+

Separator

+
+
+

Section 1

+ +

Section 2

+
+
+
Column 1
+ +
Column 2
+
+
+
+ + +
+

Avatar

+
+ + + + +
+
+ + +
+

Table

+ + + + Name + Email + Role + Status + + + + + Shewart Shepherd + shep@shell-tech.dev + Founder & CEO + Active + + + Shell Technologies + contact@shell-tech.dev + Organization + Verified + + +
+
+
+
+ +@code { +} + diff --git a/NET9/BlazorInteractiveServer/Components/Demo/FileUploadDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/FileUploadDemo.razor new file mode 100644 index 0000000..5fdbc2b --- /dev/null +++ b/NET9/BlazorInteractiveServer/Components/Demo/FileUploadDemo.razor @@ -0,0 +1,174 @@ +@namespace BlazorInteractiveServer.Components.Demo +@using BlazorInteractiveServer.Components.UI +@using Microsoft.AspNetCore.Components.Forms + +
+

File Upload

+
+
+

Single File Upload

+ + @if (_selectedFiles.Any()) + { +
+ @foreach (var file in _selectedFiles) + { +
+
+ description +
+

@file.Name

+

@FormatFileSize(file.Size)

+
+
+ +
+ } +
+ } + +
+ +
+

Multiple Files Upload

+ + @if (_multipleFiles.Any()) + { +
+ @foreach (var file in _multipleFiles) + { +
+
+ description +
+

@file.Name

+

@FormatFileSize(file.Size)

+
+
+ +
+ } +
+ } + +
+ +
+

Image Only Upload

+ + @if (_imageFiles.Any()) + { +
+ @foreach (var file in _imageFiles) + { +
+ @file.Name + +
+ } +
+ } + +
+
+
+ +@code { + private List _selectedFiles = new(); + private List _multipleFiles = new(); + private List _imageFiles = new(); + private Dictionary _imageUrls = new(); + + private async Task HandleFileSelection(InputFileChangeEventArgs e) + { + var file = e.File; + _selectedFiles.Clear(); + _selectedFiles.Add(file); + } + + private async Task HandleMultipleFileSelection(InputFileChangeEventArgs e) + { + var files = e.GetMultipleFiles(5); + _multipleFiles.Clear(); + _multipleFiles.AddRange(files); + } + + private async Task HandleImageSelection(InputFileChangeEventArgs e) + { + var files = e.GetMultipleFiles(3); + _imageFiles.Clear(); + _imageUrls.Clear(); + + foreach (var file in files) + { + try + { + using var stream = file.OpenReadStream(5 * 1024 * 1024); + using var memoryStream = new MemoryStream(); + await stream.CopyToAsync(memoryStream); + var base64 = Convert.ToBase64String(memoryStream.ToArray()); + var url = $"data:{file.ContentType};base64,{base64}"; + _imageUrls[file] = url; + } + catch { } + } + + _imageFiles.AddRange(files); + } + + private string GetImageUrl(IBrowserFile file) + { + return _imageUrls.TryGetValue(file, out var url) ? url : ""; + } + + private void RemoveFile(IBrowserFile file) + { + _selectedFiles.Remove(file); + } + + private void RemoveMultipleFile(IBrowserFile file) + { + _multipleFiles.Remove(file); + } + + private void RemoveImageFile(IBrowserFile file) + { + _imageFiles.Remove(file); + _imageUrls.Remove(file); + } + + private string FormatFileSize(long bytes) + { + string[] sizes = { "B", "KB", "MB", "GB", "TB" }; + double len = bytes; + int order = 0; + while (len >= 1024 && order < sizes.Length - 1) + { + order++; + len = len / 1024; + } + return $"{len:0.##} {sizes[order]}"; + } +} + diff --git a/NET9/BlazorInteractiveServer/Components/Demo/FormControlsDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/FormControlsDemo.razor new file mode 100644 index 0000000..78f5529 --- /dev/null +++ b/NET9/BlazorInteractiveServer/Components/Demo/FormControlsDemo.razor @@ -0,0 +1,191 @@ +@namespace BlazorInteractiveServer.Components.Demo + +
+

Form Controls

+
+ +
+

Select

+
+ + + @if (!string.IsNullOrEmpty(_selectedFruit)) + { +

Selected: @_selectedFruit

+ } +
+
+ + +
+

Checkbox & Switch

+
+
+ + +
+
+ + +
+
+
+ + +
+

Radio Group

+ + + Default + Comfortable + Compact + + + @if (!string.IsNullOrEmpty(_selectedOption)) + { +

Selected: @_selectedOption

+ } +
+ + +
+

Slider

+
+
+ + +
+
+ + +
+
+
+ + +
+

Toggle

+
+ + + check + Toggle Me + + + Outline + Small +
+

Pressed: @(_togglePressed ? "Yes" : "No")

+
+
+
+ +@code { + // Local state + private string _selectedFruit = ""; + private bool _acceptTerms = false; + private bool _notifications = true; + private RadioGroup? _radioGroup; + private string _selectedOption = ""; + private double _sliderValue = 50; + private double _temperature = 20; + private bool _togglePressed = false; + private bool _togglePressed2 = false; + private bool _togglePressed3 = false; + + // Parameters for parent sync (optional) + [Parameter] public string SelectedFruit { get; set; } = ""; + [Parameter] public EventCallback SelectedFruitChanged { get; set; } + [Parameter] public bool AcceptTerms { get; set; } = false; + [Parameter] public EventCallback AcceptTermsChanged { get; set; } + [Parameter] public bool Notifications { get; set; } = true; + [Parameter] public EventCallback NotificationsChanged { get; set; } + [Parameter] public RadioGroup? RadioGroup { get; set; } + [Parameter] public string SelectedOption { get; set; } = ""; + [Parameter] public EventCallback SelectedOptionChanged { get; set; } + [Parameter] public double SliderValue { get; set; } = 50; + [Parameter] public EventCallback SliderValueChanged { get; set; } + [Parameter] public double Temperature { get; set; } = 20; + [Parameter] public EventCallback TemperatureChanged { get; set; } + [Parameter] public bool TogglePressed { get; set; } = false; + [Parameter] public EventCallback TogglePressedChanged { get; set; } + [Parameter] public bool TogglePressed2 { get; set; } = false; + [Parameter] public EventCallback TogglePressed2Changed { get; set; } + [Parameter] public bool TogglePressed3 { get; set; } = false; + [Parameter] public EventCallback TogglePressed3Changed { get; set; } + + protected override void OnParametersSet() + { + // Sync parameters to local state + if (SelectedFruit != _selectedFruit) _selectedFruit = SelectedFruit; + if (AcceptTerms != _acceptTerms) _acceptTerms = AcceptTerms; + if (Notifications != _notifications) _notifications = Notifications; + if (SelectedOption != _selectedOption) _selectedOption = SelectedOption; + if (SliderValue != _sliderValue) _sliderValue = SliderValue; + if (Temperature != _temperature) _temperature = Temperature; + if (TogglePressed != _togglePressed) _togglePressed = TogglePressed; + if (TogglePressed2 != _togglePressed2) _togglePressed2 = TogglePressed2; + if (TogglePressed3 != _togglePressed3) _togglePressed3 = TogglePressed3; + if (RadioGroup != null && RadioGroup != _radioGroup) _radioGroup = RadioGroup; + } + + private async Task HandleSelectedFruitChanged(string value) + { + _selectedFruit = value; + await SelectedFruitChanged.InvokeAsync(value); + } + + private async Task HandleAcceptTermsChanged(bool value) + { + _acceptTerms = value; + await AcceptTermsChanged.InvokeAsync(value); + } + + private async Task HandleNotificationsChanged(bool value) + { + _notifications = value; + await NotificationsChanged.InvokeAsync(value); + } + + private async Task HandleSelectedOptionChanged(string value) + { + _selectedOption = value; + await SelectedOptionChanged.InvokeAsync(value); + } + + private async Task HandleSliderValueChanged(double value) + { + _sliderValue = value; + await SliderValueChanged.InvokeAsync(value); + } + + private async Task HandleTemperatureChanged(double value) + { + _temperature = value; + await TemperatureChanged.InvokeAsync(value); + } + + private async Task HandleTogglePressedChanged(bool value) + { + _togglePressed = value; + await TogglePressedChanged.InvokeAsync(value); + } + + private async Task HandleTogglePressed2Changed(bool value) + { + _togglePressed2 = value; + await TogglePressed2Changed.InvokeAsync(value); + } + + private async Task HandleTogglePressed3Changed(bool value) + { + _togglePressed3 = value; + await TogglePressed3Changed.InvokeAsync(value); + } +} + diff --git a/NET9/BlazorInteractiveServer/Components/Demo/FormsDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/FormsDemo.razor new file mode 100644 index 0000000..76e18d6 --- /dev/null +++ b/NET9/BlazorInteractiveServer/Components/Demo/FormsDemo.razor @@ -0,0 +1,26 @@ +@using BlazorInteractiveServer.Components.UI + +
+

Form Components

+
+
+ + +
+
+ + +
+
+ +