feat(IpAddress): trigger ValueChanged on paste event (#7280)

* refactor: 增加 JSInvoke 能力

* refactor: 更改样式

* refactor: 增加客户端更改 IP 回调方法

* test: 更新单元测试

* chore: bump version 10.1.3

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

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

src/BootstrapBlazor/Components/IpAddress/IpAddress.razor

@@ -1,6 +1,6 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @inherits ValidateBase<string>
-@attribute [BootstrapModuleAutoLoader]
+@attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
 @if (IsShowLabel)
 {

src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -21,7 +21,7 @@ public partial class IpAddress
     /// <summary>
     /// 获得 class 样式集合
     /// </summary>
-    protected string? ClassName => CssBuilder.Default("ipaddress form-control")
+    protected string? ClassName => CssBuilder.Default("bb-ip form-control")
         .AddClass("disabled", IsDisabled)
         .AddClass(CssClass).AddClass(ValidCss)
         .Build();
@@ -62,7 +62,6 @@ private void ValueChanged1(ChangeEventArgs args)
         {
             Value1 = Value1[0..3];
         }
-
         UpdateValue();
     }
 
@@ -112,4 +111,22 @@ private void UpdateValue()
     {
         CurrentValueAsString = $"{Value1}.{Value2}.{Value3}.{Value4}";
     }
+
+    /// <summary>
+    /// 更新 值方法供 JS 调用
+    /// </summary>
+    /// <param name="v1"></param>
+    /// <param name="v2"></param>
+    /// <param name="v3"></param>
+    /// <param name="v4"></param>
+    [JSInvokable]
+    public void TriggerUpdate(int v1, int v2, int v3, int v4)
+    {
+        Value1 = v1.ToString();
+        Value2 = v2.ToString();
+        Value3 = v3.ToString();
+        Value4 = v4.ToString();
+
+        UpdateValue();
+    }
 }

src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.js

@@ -12,7 +12,7 @@ const selectCell = (el, index) => {
     cell.focus();
 }
 
-export function init(id) {
+export function init(id, invoke) {
     const el = document.getElementById(id)
     if (el === null) {
         return
@@ -33,7 +33,6 @@ export function init(id) {
         EventHandler.on(c, 'keydown', e => {
             const current = e.target;
             if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
-                // numbers, backup last status
                 ip.prevValues[index] = c.value
                 if (c.value === "0") {
                     c.value = ""
@@ -99,15 +98,19 @@ export function init(id) {
             const parts = raw.replace(/[^\d.]/g, '').split('.').filter(p => p.length);
             const cells = el.querySelectorAll(".ipv4-cell");
             let pos = 0;
+            const args = [];
             parts.forEach(p => {
                 if (pos > 3) {
                     return;
                 }
                 const num = Math.max(0, Math.min(255, parseInt(p, 10) || 0));
+                args.push(num);
                 cells[pos].value = num.toString();
                 ip.prevValues[pos] = cells[pos].value;
                 pos++;
             });
+
+            invoke.invokeMethodAsync("TriggerUpdate", ...args);
         });
     })
 }

src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.scss

@@ -1,6 +1,6 @@
-@use "../../wwwroot/scss/variables" as *;
+@use "../../wwwroot/scss/variables" as *;
 
-.ipaddress {
+.bb-ip {
     --bb-ip-cell-max-width: #{$bb-ip-cell-max-width};
     display: flex;
     flex-wrap: nowrap;

test/UnitTest/Components/IpAddressTest.cs

@@ -11,7 +11,7 @@ public class IpAddressTest : BootstrapBlazorTestBase
     public async Task IpAddress_Ok()
     {
         var cut = Context.Render<IpAddress>();
-        cut.Contains("ipaddress form-control");
+        cut.Contains("bb-ip form-control");
         Assert.Equal("0.0.0.0", cut.Instance.Value);
 
         var inputs = cut.FindAll(".ipv4-cell");
@@ -46,6 +46,14 @@ public async Task IpAddress_Value()
         Assert.Equal("123.123.123.123", cut.Instance.Value);
     }
 
+    [Fact]
+    public async Task TriggerUpdate_Ok()
+    {
+        var cut = Context.Render<IpAddress>();
+        await cut.InvokeAsync(() => cut.Instance.TriggerUpdate(192, 0, 1, 10));
+        Assert.Equal("192.0.1.10", cut.Instance.Value);
+    }
+
     [Fact]
     public void ValidateForm_Ok()
     {