feat(EyeDropper): remove EyeDropper component (#4545)

* refactor: 移除 EyeDropper 组件

* refactor: 重构服务

* refactor: 更新脚本

* refactor: 更新单元测试

* chore: 移除根元素中组件

* doc: 更新取色服务文档位置

* doc: 更新文档

Author: ArgoZhang

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -596,11 +596,6 @@ void AddData(DemoMenuItem item)
                     Text=Localizer["Empty"],
                     Url = "empty"
                 },
-                new ()
-                {
-                    Text=Localizer["EyeDropper"],
-                    Url = "eye-dropper"
-                },
                 new()
                 {
                     Text = Localizer["FileIcon"],
@@ -1431,6 +1426,11 @@ void AddServices(DemoMenuItem item)
                     Text = Localizer["FullScreen"],
                     Url = "fullscreen"
                 },
+                new ()
+                {
+                    Text=Localizer["EyeDropper"],
+                    Url = "eye-dropper"
+                },
                 new()
                 {
                     Text = Localizer["Festival"],

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4589,7 +4589,7 @@
     "DateTimeRange": "DateTimeRange",
     "Editor": "Editor",
     "EditorForm": "EditorForm",
-    "EyeDropper": "EyeDropper",
+    "EyeDropper": "EyeDropper Service",
     "Input": "Input",
     "InputNumber": "InputNumber",
     "InputGroup": "InputGroup",
@@ -6034,7 +6034,7 @@
     "Numerals": "numeral glyph substitution"
   },
   "BootstrapBlazor.Server.Components.Samples.EyeDroppers": {
-    "EyeDropperTitle": "EyeDropper",
+    "EyeDropperTitle": "EyeDropper Service",
     "EyeDropperDescription": "The <code>EyeDropperService</code> provides a mechanism for creating an eyedropper tool. Using this tool, users can sample colors from their screens, including outside of the browser window.",
     "EyeDropperNormalTitle": "Basic usage",
     "EyeDropperNormalIntro": "Using the <code>EyeDropperService</code> application can start the eyedropper mode. Once started, the cursor changes to indicate to the user that the mode is active. The user can then either select a color from anywhere on the screen, or dismiss the eyedropper mode by pressing <kbd>Escape</kbd>",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4589,7 +4589,7 @@
     "DateTimeRange": "时间范围框 DateTimeRange",
     "Editor": "富文本框 Editor",
     "EditorForm": "表单编辑框 EditorForm",
-    "EyeDropper": "取色服务 EyeDropper",
+    "EyeDropper": "取色服务 EyeDropperService",
     "Input": "输入框 Input",
     "InputNumber": "数字框 InputNumber",
     "InputGroup": "输入组 InputGroup",
@@ -6034,7 +6034,7 @@
     "Numerals": "数字符号集合"
   },
   "BootstrapBlazor.Server.Components.Samples.EyeDroppers": {
-    "EyeDropperTitle": "屏幕取色 EyeDropper",
+    "EyeDropperTitle": "屏幕取色 EyeDropperService",
     "EyeDropperDescription": "用户可以从屏幕上采样颜色，包括在浏览器窗口之外",
     "EyeDropperNormalTitle": "基础用法",
     "EyeDropperNormalIntro": "使用 <code>EyeDropperService</code>，可以启动吸管模式。启动后，光标会发生变化以向用户指示该模式处于活动状态。然后用户可以从屏幕上的任何位置选择一种颜色，通过按 <kbd>Escape</kbd> 关闭吸管模式",

src/BootstrapBlazor/Components/BaseComponents/BootstrapBlazorRoot.razor

@@ -3,7 +3,6 @@
 
 @RenderBody()
 
-<EyeDropper></EyeDropper>
 <Title></Title>
 
 <Message @ref="MessageContainer"></Message>
@@ -14,7 +13,7 @@
 <ConnectionHub></ConnectionHub>
 <Mask></Mask>
 
-@foreach(var com in Generators)
+@foreach (var com in Generators)
 {
     @com.Generator()
 }

src/BootstrapBlazor/Components/EyeDropper/EyeDropper.cs

@@ -8,16 +8,18 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// EyeDropper 服务用于屏幕吸色
 /// </summary>
-public class EyeDropperService : BootstrapServiceBase<EyeDropperOption>
+public class EyeDropperService(IJSRuntime jSRuntime)
 {
+    [NotNull]
+    private JSModule? _module = null;
+
     /// <summary>
     /// 全屏方法，已经全屏时再次调用后退出全屏
     /// </summary>
     /// <returns></returns>
-    public async Task<string?> PickAsync()
+    public async Task<string?> PickAsync(CancellationToken token = default)
     {
-        var op = new EyeDropperOption();
-        await Invoke(op);
-        return op.Value;
+        _module ??= await jSRuntime.LoadModule("./_content/BootstrapBlazor/modules/eye-dropper.js");
+        return await _module.InvokeAsync<string?>("open", token);
     }
 }

src/BootstrapBlazor/Components/EyeDropper/EyeDropperOption.cs

@@ -1,7 +1,7 @@
 export async function open() {
     if (!window.EyeDropper) {
         console.error("Your browser does not support the EyeDropper API")
-        return
+        return null;
     }
 
     const eyeDropper = new EyeDropper();

src/BootstrapBlazor/Components/EyeDropper/EyeDropperService.cs renamed to src/BootstrapBlazor/Services/EyeDropperService.cs

@@ -5,15 +5,14 @@
 
 namespace UnitTest.Services;
 
-public class EyeDropperTest : BootstrapBlazorTestBase
+public class EyeDropperServiceTest : BootstrapBlazorTestBase
 {
     [Fact]
     public async Task EyeDropperService_Ok()
     {
-        Context.JSInterop.Setup<string?>("open").SetResult("Ok");
+        Context.JSInterop.Setup<string?>("open").SetResult("#FFFFFF");
         var service = Context.Services.GetRequiredService<EyeDropperService>();
-        var cut = Context.RenderComponent<EyeDropper>();
         var expected = await service.PickAsync();
-        Assert.Equal("Ok", expected);
+        Assert.Equal("#FFFFFF", expected);
     }
 }