Merge branch 'main' of https://github.com/dotnetcore/BootstrapBlazor

Author: actions-user

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -32,6 +32,7 @@
     <PackageReference Include="BootstrapBlazor.Chart" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.ChatBot" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="9.0.3" />
+    <PackageReference Include="BootstrapBlazor.CodeEditor" Version="9.0.1" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="9.0.0" />
     <PackageReference Include="BootstrapBlazor.DockView" Version="9.1.18" />
     <PackageReference Include="BootstrapBlazor.DriverJs" Version="9.0.3" />

src/BootstrapBlazor.Server/Components/Components/QQGroup.razor

@@ -4,14 +4,12 @@
 <div>
     @Localzier["Group"]：BootstrapAdmin & Blazor
     <a class="mx-1" target="_blank" href="@WebsiteOption.Value.QQGroup1Link">
-        <span class="text-success fa-brands fa-qq">
-            <span class="ms-1"><b>795206915</b></span>
-        </span>
+        <span class="text-success fa-brands fa-qq"></span>
+        <span class="text-success"><b>795206915</b></span>
     </a>
     <a class="mx-1" target="_blank" href="@WebsiteOption.Value.QQGroup2Link">
-        <span class="text-success fa-brands fa-qq">
-            <span class="ms-1"><b>675147445</b></span>
-        </span>
+        <span class="text-success fa-brands fa-qq"></span>
+        <span class="text-success"><b>675147445</b></span>
     </a>
     @Localzier["Welcome"]
 </div>

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

@@ -8,7 +8,7 @@
 <DemoBlock Title="@Localizer["BasicTitle"]" Introduction="@Localizer["BasicIntro"]">
     <div class="row form-inline g-3">
         <div class="col-12 col-sm-6">
-            <Select TValue="string" OnSelectedItemChanged="@OnSelectedItemChanged" ShowLabel="true" DisplayText="Language">
+            <Select @bind-Value="_language" OnSelectedItemChanged="OnSelectedItemChanged" ShowLabel="true" DisplayText="Language">
                 <Options>
                     <SelectOption Text="JavaScript" Value="javascript"></SelectOption>
                     <SelectOption Text="CSharp" Value="csharp"></SelectOption>
@@ -18,7 +18,7 @@
             </Select>
         </div>
         <div class="col-12 col-sm-6">
-            <Select TValue="string" OnSelectedItemChanged="@OnThemeSelectedItemChanged" ShowLabel="true" DisplayText="Theme">
+            <Select @bind-Value="@_theme" ShowLabel="true" DisplayText="Theme">
                 <Options>
                     <SelectOption Text="Visual Studio" Value="vs"></SelectOption>
                     <SelectOption Text="Visual Studio Dark" Value="vs-dark"></SelectOption>
@@ -27,7 +27,12 @@
             </Select>
         </div>
         <div class="col-12">
-            <Pre>&lt;CodeEditor Value="@@Code" Language="@@Language" Theme="@@Theme" OnValueChanged="OnValueChanged" /&gt;</Pre>
+            <Pre>&lt;CodeEditor Value="@@_code" Language="@@_language" Theme="@@_theme" /&gt;</Pre>
+        </div>
+        <div class="col-12">
+            <div style="border: 1px solid var(--bs-border-color); height: 200px; width: 100%; overflow: hidden;">
+                <CodeEditor ShowLineNo="true" Value="@_code" Language="@_language" Theme="@_theme"></CodeEditor>
+            </div>
         </div>
     </div>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/CodeEditors.razor.cs

@@ -10,21 +10,24 @@ namespace BootstrapBlazor.Server.Components.Samples;
 /// </summary>
 public partial class CodeEditors
 {
-    [NotNull]
-    private string? Code { get; set; }
+    private string _code { get; set; } = """
+using System;
+
+void Main()
+{
+    Console.WriteLine(""Hello World"");
+}
+""";
 
-    [NotNull]
-    private string? Language { get; set; }
+    private string _language { get; set; } = "CSharp";
 
-    [NotNull]
-    private string? Theme { get; set; }
+    private string _theme { get; set; } = "vs";
 
     private Task OnSelectedItemChanged(SelectedItem item)
     {
         if (item.Text == "JavaScript")
         {
-            Language = "javascript";
-            Code = """
+            _code = """
 function main() {
     console.log('Hello World!')
 }
@@ -33,8 +36,7 @@ function main() {
 
         if (item.Text == "CSharp")
         {
-            Language = "csharp";
-            Code = """
+            _code = """
 using System;
 
 void Main()
@@ -46,8 +48,7 @@ void Main()
 
         if (item.Text == "Json")
         {
-            Language = "json";
-            Code = """
+            _code = """
 {
     "name": "Hello World",
     "age": 25
@@ -57,8 +58,7 @@ void Main()
 
         if (item.Text == "Razor")
         {
-            Language = "razor";
-            Code = """
+            _code = """
 <Select TValue=""string"" OnSelectedItemChanged=""@OnSelectedItemChanged"">
     <Options>
         <SelectOption Text=""JavaScript"" Value=""JavaScript""></ SelectOption>
@@ -69,27 +69,6 @@ void Main()
 </Select>
 """;
         }
-        StateHasChanged();
-        return Task.CompletedTask;
-    }
-
-    private Task OnThemeSelectedItemChanged(SelectedItem item)
-    {
-        if (item.Value == "vs-dark")
-        {
-            Theme = item.Value;
-        }
-
-        if (item.Value == "vs")
-        {
-            Theme = item.Value;
-        }
-
-        if (item.Value == "hc-black")
-        {
-            Theme = item.Value;
-        }
-        StateHasChanged();
         return Task.CompletedTask;
     }
 

src/BootstrapBlazor.Server/Components/Samples/Tutorials/LoginAndRegister/Template5.razor.js

@@ -4,6 +4,11 @@
         const email = el.querySelector('.login-item-email');
         if (email) {
             email.classList.add('show');
+            const input = email.querySelector('.input');
+            if (input) {
+                input.focus();
+                input.select();
+            }
         }
     }
 }
@@ -23,6 +28,11 @@ export function go(id) {
             password.classList.add('show');
             password.classList.add('animate-fade-in')
             password.classList.remove('animate-fade-out')
+            const input = password.querySelector('.input');
+            if (input) {
+                input.focus();
+                input.select();
+            }
         }
     }
 }
@@ -35,6 +45,11 @@ export function back(id) {
             email.classList.add('show');
             email.classList.remove('animate-fade-out');
             email.classList.add('animate-fade-in');
+            const input = email.querySelector('.input');
+            if (input) {
+                input.focus();
+                input.select();
+            }
         }
 
         const password = el.querySelector('.login-item-password');