refactor(Checkbox): update the state value callback (#4646)

* fix: 修复 Checkbox 回传 state 值始终有值问题

* chore: bump version 9.0.0-rc.2.11.11.0

* doc: 更新示例

* doc: 更新示例文档

* doc: 补充 IsVirtualize 参数文档

Author: ArgoZhang

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

@@ -23,19 +23,6 @@
 <p>@((MarkupString)Localizer["TreeViewsTips11"].Value)</p>
 <p>@((MarkupString)Localizer["TreeViewsTips12"].Value)</p>
 
-<DemoBlock Title="@Localizer["TreeViewVirtualizeTitle"]"
-           Introduction="@Localizer["TreeViewVirtualizeIntro"]"
-           Name="DefaultExpand">
-    <section ignore>
-        @((MarkupString)Localizer["TreeViewVirtualizeDescription"].Value)
-    </section>
-    <div style="height: 400px">
-        <TreeView TItem="TreeFoo" Items="@VirtualizeItems" ShowCheckbox="true" IsVirtualize="true"
-                  AutoCheckChildren="true" AutoCheckParent="true"
-                  OnExpandNodeAsync="OnExpandVirtualNodeAsync"></TreeView>
-    </div>
-</DemoBlock>
-
 <DemoBlock Title="@Localizer["TreeViewNormalTitle"]"
            Introduction="@Localizer["TreeViewNormalIntro"]"
            Name="Normal">
@@ -211,6 +198,19 @@
               EnableKeyboard="true" ClickToggleNode="false" ClickToggleCheck="false" ShowCheckbox="true" />
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["TreeViewVirtualizeTitle"]"
+           Introduction="@Localizer["TreeViewVirtualizeIntro"]"
+           Name="DefaultExpand">
+    <section ignore>
+        @((MarkupString)Localizer["TreeViewVirtualizeDescription"].Value)
+    </section>
+    <div style="height: 400px">
+        <TreeView TItem="TreeFoo" Items="@VirtualizeItems" ShowCheckbox="true" IsVirtualize="true"
+                  AutoCheckChildren="true" AutoCheckParent="true"
+                  OnExpandNodeAsync="OnExpandVirtualNodeAsync"></TreeView>
+    </div>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()"></AttributeTable>
 
 <AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]"></AttributeTable>

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

@@ -354,6 +354,14 @@ private static AttributeItem[] GetAttributes() =>
             DefaultValue = "false"
         },
         new()
+        {
+            Name = nameof(TreeView<string>.IsVirtualize),
+            Description = "Virtualize",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
         {
             Name = nameof(TreeView<string>.CanExpandWhenDisabled),
             Description = "Whether to expand when the control node is disabled",

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

@@ -709,7 +709,10 @@
     "TreeViewMaxSelectedCountIntro": "Control the maximum number of selectable items by setting the <code>MaxSelectedCount</code> property, and handle the logic through the <code>OnMaxSelectedCountExceed</code> callback",
     "TreeViewMaxSelectedCountDesc": "When more than 2 nodes are selected, a <code>Toast</code> prompt bar will pop up",
     "TreeViewEnableKeyboardArrowUpDownTitle": "Keyboard",
-    "TreeViewEnableKeyboardArrowUpDownIntro": "Support keyboard up and down arrow operations by setting <code>EnableKeyboardArrowUpDown=\"true\"</code>. <kbd>ArrowLeft</kbd> collapse the node, <kbd>ArrowRight</kbd> expand the node, <kbd>ArrowUp</kbd> move the node up, <kbd>ArrowDown</kbd> move the node down, <kbd>Space</kbd> select the node,"
+    "TreeViewEnableKeyboardArrowUpDownIntro": "Support keyboard up and down arrow operations by setting <code>EnableKeyboardArrowUpDown=\"true\"</code>. <kbd>ArrowLeft</kbd> collapse the node, <kbd>ArrowRight</kbd> expand the node, <kbd>ArrowUp</kbd> move the node up, <kbd>ArrowDown</kbd> move the node down, <kbd>Space</kbd> select the node,",
+    "TreeViewVirtualizeTitle": "Virtualize",
+    "TreeViewVirtualizeIntro": "Enable virtual scrolling by setting <code>IsVirtualize=\"true\"</code> to support big data",
+    "TreeViewVirtualizeDescription": "The component uses <code>Virtualize</code> to implement virtual scrolling logic, which reduces the pressure on the browser. However, if there is a lot of tree structure data, such as <b>Select All</b>, all data must be marked, resulting in large data in the memory. This problem has not been solved yet. Currently, this component still puts a lot of pressure on the <b>CPU</b> due to large data."
   },
   "BootstrapBlazor.Server.Components.Samples.Trees": {
     "TreeIntro": "<p>Obsolete，The <a href=\"treeviews\" alt=\"treeview\">TreeView</a> provides more functions",

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

@@ -709,7 +709,10 @@
     "TreeViewMaxSelectedCountIntro": "通过设置 <code>MaxSelectedCount</code> 属性控制最大可选数量，通过 <code>OnMaxSelectedCountExceed</code> 回调处理逻辑",
     "TreeViewMaxSelectedCountDesc": "选中节点超过 2 个时，弹出 <code>Toast</code> 提示栏",
     "TreeViewEnableKeyboardArrowUpDownTitle": "键盘支持",
-    "TreeViewEnableKeyboardArrowUpDownIntro": "通过设置 <code>EnableKeyboardArrowUpDown=\"true\"</code> 支持键盘上下箭头操作。<kbd>左箭头</kbd> 收起节点，<kbd>右箭头</kbd> 展开节点，<kbd>上箭头</kbd> 向上移动节点，<kbd>下箭头</kbd> 向下移动节点，<kbd>空格</kbd> 选中节点"
+    "TreeViewEnableKeyboardArrowUpDownIntro": "通过设置 <code>EnableKeyboardArrowUpDown=\"true\"</code> 支持键盘上下箭头操作。<kbd>左箭头</kbd> 收起节点，<kbd>右箭头</kbd> 展开节点，<kbd>上箭头</kbd> 向上移动节点，<kbd>下箭头</kbd> 向下移动节点，<kbd>空格</kbd> 选中节点",
+    "TreeViewVirtualizeTitle": "虚拟滚动",
+    "TreeViewVirtualizeIntro": "通过设置 <code>IsVirtualize=\"true\"</code> 开启虚拟滚动，支持大数据",
+    "TreeViewVirtualizeDescription": "组件内部使用 <code>Virtualize</code> 来实现虚拟滚动逻辑，对浏览器压力会减少很多；但是如果树状结构数据比较多，比如 <b>全选</b> 等操作必须对所有数据进行标记，导致内存中确实有大数据存在，目前还没有解决这个问题，目前此组件由于大数据对 <b>CPU</b> 压力还是比较大的"
   },
   "BootstrapBlazor.Server.Components.Samples.Trees": {
     "TreeIntro": "<p>本组件已弃用，请使用新组件 <a href=\"treeviews\" alt=\"treeview\">TreeView</a> 提供更多功能",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.0.0-rc.2.11.10.2</Version>
+    <Version>9.0.0-rc.2.11.11.0</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Checkbox/Checkbox.razor.js

@@ -14,7 +14,9 @@ export function init(id, invoke, method) {
         }
 
         const state = el.getAttribute("data-bb-state");
+        let val = null;
         if (state) {
+            val = state == "1" ? 0 : 1;
             el.removeAttribute('data-bb-state');
 
             if (state === "1") {
@@ -24,7 +26,7 @@ export function init(id, invoke, method) {
                 el.parentElement.classList.add('is-checked');
             }
         }
-        const result = await invoke.invokeMethodAsync(method, state == "1" ? 0 : 1);
+        const result = await invoke.invokeMethodAsync(method, val);
         if (result === false) {
             e.preventDefault();
         }