feat(Swal): upgrade swal v2 style (#5026)

* chore: bump version 9.2.3-beta01

Co-Authored-By: Alex chow <[email protected]>

* chore: 更新最新版样式

* feat: 根据最新样式更新 dom 结构

* doc: 更新文档

---------

Co-authored-by: Alex chow <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/SweetAlerts.razor

@@ -63,7 +63,7 @@ await SwalService.Show(op);</Pre>
             <div class="text-warning">@Localizer["SweetAlertsNormalWarn"]</div>
         </div>
         <div class="col-4">
-            <div class="swal2-icon swal2-warning"></div>
+            <div class="swal2-icon swal2-warning"><div class="swal2-icon-content">!</div></div>
         </div>
         <div class="col-4 align-self-center text-center">
             <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Warning" OnClick="@(e => OnSwal(SwalCategory.Warning))" />
@@ -74,7 +74,7 @@ await SwalService.Show(op);</Pre>
             <div class="text-info">@Localizer["SweetAlertsNormalHint"]</div>
         </div>
         <div class="col-4">
-            <div class="swal2-icon swal2-info"></div>
+            <div class="swal2-icon swal2-info"><div class="swal2-icon-content">i</div></div>
         </div>
         <div class="col-4 align-self-center text-center">
             <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Info" OnClick="@(e => OnSwal(SwalCategory.Information))" />
@@ -85,7 +85,7 @@ await SwalService.Show(op);</Pre>
             <div class="text-secondary">@Localizer["SweetAlertsNormalDoubt"]</div>
         </div>
         <div class="col-4">
-            <div class="swal2-icon swal2-question"></div>
+            <div class="swal2-icon swal2-question"><div class="swal2-icon-content">?</div></div>
         </div>
         <div class="col-4 align-self-center text-center">
             <Button Icon="fa-solid fa-font-awesome" Text="@Localizer["SweetAlertsPopups"]" Color="Color.Secondary" OnClick="@(e => OnSwal(SwalCategory.Question))" />

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.2.2</Version>
+    <Version>9.2.3-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/SweetAlert/SweetAlert.razor.scss

@@ -4,6 +4,70 @@
     z-index: var(--bb-swal-zindex);
 }
 
+.swal2-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.swal2-icon {
+    position: relative;
+    box-sizing: content-box;
+    justify-content: center;
+    width: 5em;
+    height: 5em;
+    margin: 1.25em auto 1.875em;
+    zoom: normal;
+    border: .25em solid transparent;
+    border-radius: 50%;
+    line-height: 5em;
+    cursor: default;
+    user-select: none;
+}
+
+.swal2-title {
+    position: relative;
+    max-width: 100%;
+    margin: 0 0 .4em;
+    padding: 0;
+    color: #595959;
+    font-size: 1.875em;
+    font-weight: 600;
+    text-align: center;
+    text-transform: none;
+    word-wrap: break-word;
+}
+
+.swal2-content {
+    z-index: 1;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    color: #545454;
+    font-size: 1.125em;
+    font-weight: 300;
+    line-height: normal;
+    word-wrap: break-word;
+}
+
+.swal2-actions {
+    z-index: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 1.25em auto 0;
+}
+
+.swal2-footer {
+    justify-content: center;
+    margin: 1.25em 0 0;
+    padding: 1em 0 0;
+    border-top: 1px solid #eee;
+    color: #545454;
+    font-size: 1em;
+}
+
 .swal2-icon,
 .swal2-actions {
     display: flex;

src/BootstrapBlazor/Components/SweetAlert/SweetAlertBody.razor

@@ -20,9 +20,23 @@
             </span>
         </div>
     }
-    else
+    else if (Category == SwalCategory.Warning)
     {
-        <div class="@IconClassString"></div>
+        <div class="@IconClassString">
+            <div class="swal2-icon-content">!</div>
+        </div>
+    }
+    else if (Category == SwalCategory.Question)
+    {
+        <div class="@IconClassString">
+            <div class="swal2-icon-content">?</div>
+        </div>
+    }
+    else if (Category == SwalCategory.Information)
+    {
+        <div class="@IconClassString">
+            <div class="swal2-icon-content">i</div>
+        </div>
     }
     @if (!string.IsNullOrEmpty(Title))
     {

src/BootstrapBlazor/Components/SweetAlert/SweetAlertBody.razor.cs

@@ -126,9 +126,9 @@ public partial class SweetAlertBody
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
 
-    private string? IconClassString => CssBuilder.Default("swal2-icon")
-        .AddClass("swal2-success swal2-animate-success-icon", Category == SwalCategory.Success)
-        .AddClass("swal2-error swal2-animate-error-icon", Category == SwalCategory.Error)
+    private string? IconClassString => CssBuilder.Default("swal2-icon swal2-icon-show")
+        .AddClass("swal2-success", Category == SwalCategory.Success)
+        .AddClass("swal2-error", Category == SwalCategory.Error)
         .AddClass("swal2-info", Category == SwalCategory.Information)
         .AddClass("swal2-question", Category == SwalCategory.Question)
         .AddClass("swal2-warning", Category == SwalCategory.Warning)