Upgrade modal component to .NET 9

README.md

@@ -19,18 +19,18 @@ Or via the dotnet CLI.
 
 ### 1. Add Imports
 
-Add line to your \_Imports.razor
+Add line to your \_Imports.razor if you're not already using implicit global usings.
 
 ```
-@using Tailblazor.Modal.src 
+@using TailBlazor.Modal
 ```
 
 ### 2. Create Modal Component
 
 Simply open up a component and add your content. Sizes include Small, Medium, Large, Larger, Largest
 
 ```
-<TailblazorModals IsOpen="@IsModalOpenXl" ModelWidth="TailblazorModals.Size.Largest">
+<TailBlazorModals IsOpen="@IsModalOpenXl" ModelWidth="TailBlazorModals.Size.Largest">
     <Header>
         ...
     </Header>
@@ -41,4 +41,7 @@ Simply open up a component and add your content. Sizes include Small, Medium, La
         ...
     </Footer>
 </TailBlazorModals>
-```
+
+```
+
+The component targets .NET 9 and is compatible with Blazor's new Auto render mode, so it can light up interactivity whether your app prerenders on the server or runs entirely on WebAssembly.

src/TailBlazor.Modal.csproj

@@ -1,7 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
     <PackageId>TailBlazor.Modal</PackageId>
     <Version>0.0.1</Version>
     <Authors>Jack Hinkley</Authors>
@@ -20,13 +22,8 @@
     <EmbedUntrackedSources>true</EmbedUntrackedSources>
   </PropertyGroup>
 
-
   <ItemGroup>
     <SupportedPlatform Include="browser" />
   </ItemGroup>
 
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="5.0.1" />
-  </ItemGroup>
-
 </Project>

src/TailBlazorModal.razor

@@ -1,18 +1,20 @@
-<div class="overlay h-screen w-full bg-black bg-opacity-50 fixed top-0 z-10 flex items-center justify-center @(IsOpen ? "" : "hidden")">
+<div class="overlay h-screen w-full bg-black bg-opacity-50 fixed top-0 z-10 flex items-center justify-center @(IsOpen ? "" : "hidden")">
     <div class="modal z-20 bg-white m-4 w-screen rounded-md shadow-lg absolute top-2 md:top-8 overflow-y-auto @ModelSize @ModalClass">
-        @if(Header != null)
+        @if (Header is not null)
         {
             <div class="modal-header p-4 md:p-6 lg:p-10 text-2xl bg-gray-800 text-white rounded-t-md font-bold @HeaderClass">
                 @Header
             </div>
         }
-        @if(Body != null)
+
+        @if (Body is not null)
         {
-            <div class="modal-body py-4 md:py-6 lg:py-10 px-4 md:px-8 lg:px-16 overfly-y-scroll  @BodyClass">
+            <div class="modal-body py-4 md:py-6 lg:py-10 px-4 md:px-8 lg:px-16 overflow-y-scroll @BodyClass">
                 @Body
             </div>
         }
-        @if(Footer != null)
+
+        @if (Footer is not null)
         {
             <div class="modal-footer @FooterClass">
                 <div class="flex flex-row">
@@ -44,18 +46,25 @@
         max-height: calc(5/6 * 100%);
     }
 </style>
-@code {
 
-    public enum Size { Small, Medium, Large, Larger, Largest };
+@code {
+    public enum Size
+    {
+        Small,
+        Medium,
+        Large,
+        Larger,
+        Largest
+    }
 
     [Parameter]
-    public RenderFragment Header { get; set; }
+    public RenderFragment? Header { get; set; }
 
     [Parameter]
-    public RenderFragment Body { get; set; }
+    public RenderFragment? Body { get; set; }
 
     [Parameter]
-    public RenderFragment Footer { get; set; }
+    public RenderFragment? Footer { get; set; }
 
     [Parameter]
     public Size ModelWidth { get; set; } = Size.Large;
@@ -64,40 +73,24 @@
     public bool IsOpen { get; set; } = true;
 
     [Parameter]
-    public string ModalClass { get; set; }
+    public string ModalClass { get; set; } = string.Empty;
 
     [Parameter]
-    public string HeaderClass { get; set; }
+    public string HeaderClass { get; set; } = string.Empty;
 
     [Parameter]
-    public string BodyClass { get; set; }
+    public string BodyClass { get; set; } = string.Empty;
 
     [Parameter]
-    public string FooterClass { get; set; }
-
-    public string ModelSize { get; set; }
+    public string FooterClass { get; set; } = string.Empty;
 
-    protected override void OnInitialized()
+    private string ModelSize => ModelWidth switch
     {
-        switch (ModelWidth)
-        {
-            case Size.Small:
-                ModelSize = "max-w-sm";
-                break;
-            case Size.Medium:
-                ModelSize = "max-w-lg";
-                break;
-            case Size.Large:
-                ModelSize = "max-w-2xl";
-                break;
-            case Size.Larger:
-                ModelSize = "max-w-4xl";
-                break;
-            case Size.Largest:
-                ModelSize = "max-w-7xl";
-                break;
-            default:
-                break;
-        }
-    }
+        Size.Small => "max-w-sm",
+        Size.Medium => "max-w-lg",
+        Size.Large => "max-w-2xl",
+        Size.Larger => "max-w-4xl",
+        Size.Largest => "max-w-7xl",
+        _ => string.Empty
+    };
 }

src/_Imports.razor

@@ -1 +1,2 @@
-@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components
+@using Microsoft.AspNetCore.Components.Web