Add Ok Breakpoint Column

change/@ni-ok-blazor-39bf770b-9e85-4d46-ba51-c915ecd4c543.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add breakpoint column",
+  "packageName": "@ni/ok-blazor",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@ni-ok-components-744c8788-8d43-48b6-9bff-7f72757113b5.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add breakpoint column",
+  "packageName": "@ni/ok-components",
+  "email": "5265744+hellovolcano@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/blazor-workspace/CodeAnalysisDictionary.xml

@@ -4,8 +4,8 @@
         <Recognized>
             <Word>args</Word>
             <Word>blazor</Word>
-            <Word>breakpoint</Word>
             <Word>bool</Word>
+            <Word>breakpoint</Word>
             <Word>clearable</Word>
             <Word>combobox</Word>
             <Word>dropdown</Word>

packages/blazor-workspace/Examples/Demo.Shared/Pages/ComponentsDemo.razor

@@ -45,5 +45,6 @@
         <RectangleSection />
         <ExSection />
         <FvSection />
+        <TsSection />
     </div>
 </div>

packages/blazor-workspace/Examples/Demo.Shared/Pages/Sections/Ts/TsBreakpointTableSection.razor

@@ -0,0 +1,40 @@
+@namespace Demo.Shared.Pages.Sections
+
+<div>
+    <SubContainer Label="Breakpoint Table Column (Ok)">
+        <NimbleTable TData="BreakpointTableRecord" @ref="_table" IdFieldName="Id" ParentIdFieldName="ParentId" class="breakpoint-table">
+            <NimbleTableColumnText FieldName="Name" FractionalWidth="2">Name</NimbleTableColumnText>
+            <OkTsTableColumnBreakpoint
+                FieldName="BreakpointState"
+                MenuSlot="breakpoint-menu"
+                BreakpointContextMenu="OnBreakpointContextMenu"
+                BreakpointToggle="OnBreakpointToggle">
+            </OkTsTableColumnBreakpoint>
+            <NimbleTableColumnNumberText FieldName="LineNumber">Line</NimbleTableColumnNumberText>
+
+            <NimbleMenu slot="breakpoint-menu">
+                @if (_contextMenuRecordState == OkBlazor.BreakpointState.Off)
+                {
+                    <NimbleMenuItem @onchange="@(_ => OnAddBreakpoint())">Add breakpoint</NimbleMenuItem>
+                    <NimbleMenuItem @onchange="@(_ => OnAddConditionalBreakpoint())">Add conditional breakpoint</NimbleMenuItem>
+                }
+                else
+                {
+                    <NimbleMenuItem @onchange="@(_ => OnRemoveBreakpoint())">Remove breakpoint</NimbleMenuItem>
+                    @if (_contextMenuRecordState == OkBlazor.BreakpointState.Enabled
+                        || _contextMenuRecordState == OkBlazor.BreakpointState.Conditional
+                        || _contextMenuRecordState == OkBlazor.BreakpointState.Hit)
+                    {
+                        <NimbleMenuItem @onchange="@(_ => OnDisableBreakpoint())">Disable breakpoint</NimbleMenuItem>
+                    }
+                    @if (_contextMenuRecordState == OkBlazor.BreakpointState.Disabled
+                        || _contextMenuRecordState == OkBlazor.BreakpointState.HitDisabled)
+                    {
+                        <NimbleMenuItem @onchange="@(_ => OnEnableBreakpoint())">Enable breakpoint</NimbleMenuItem>
+                    }
+                }
+            </NimbleMenu>
+
+        </NimbleTable>
+    </SubContainer>
+</div>

packages/blazor-workspace/Examples/Demo.Shared/Pages/Sections/Ts/TsBreakpointTableSection.razor.cs

@@ -0,0 +1,99 @@
+using NimbleBlazor;
+using OkBlazor;
+
+namespace Demo.Shared.Pages.Sections;
+
+public partial class TsBreakpointTableSection
+{
+    private NimbleTable<BreakpointTableRecord>? _table;
+    private string? _contextMenuRecordId;
+    private string _contextMenuRecordState = BreakpointState.Off;
+
+    private List<BreakpointTableRecord> _tableData = new()
+    {
+        new("1", null, "Main.cs", 12, BreakpointState.Enabled),
+        new("2", "1", "Helper.cs", 45, BreakpointState.Off),
+        new("3", "1", "Service.cs", 78, BreakpointState.Disabled),
+        new("4", null, "Controller.cs", 23, BreakpointState.Hit),
+        new("5", "4", "Model.cs", 91, BreakpointState.Conditional),
+        new("6", null, "Startup.cs", 5, BreakpointState.HitDisabled),
+        new("7", "6", "Program.cs", 1, BreakpointState.Off),
+    };
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await _table!.SetDataAsync(_tableData);
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private void OnBreakpointToggle(BreakpointColumnToggleEventArgs e)
+    {
+        var record = _tableData.FirstOrDefault(r => r.Id == e.RecordId);
+        if (record != null)
+        {
+            record.BreakpointState = e.NewState;
+        }
+        StateHasChanged();
+    }
+
+    private void OnBreakpointContextMenu(BreakpointColumnContextMenuEventArgs e)
+    {
+        _contextMenuRecordId = e.RecordId;
+        _contextMenuRecordState = e.CurrentState;
+
+        StateHasChanged();
+    }
+
+    private void OnAddBreakpoint()
+    {
+        SetRecordState(BreakpointState.Enabled);
+    }
+
+    private void OnAddConditionalBreakpoint()
+    {
+        SetRecordState(BreakpointState.Conditional);
+    }
+
+    private void OnRemoveBreakpoint()
+    {
+        SetRecordState(BreakpointState.Off);
+    }
+
+    private void OnDisableBreakpoint()
+    {
+        SetRecordState(BreakpointState.Disabled);
+    }
+
+    private void OnEnableBreakpoint()
+    {
+        SetRecordState(BreakpointState.Enabled);
+    }
+
+    private void SetRecordState(string newState)
+    {
+        var record = _tableData.FirstOrDefault(r => r.Id == _contextMenuRecordId);
+        if (record != null)
+        {
+            record.BreakpointState = newState;
+        }
+        StateHasChanged();
+    }
+}
+
+public class BreakpointTableRecord
+{
+    public BreakpointTableRecord(string id, string? parentId, string name, int lineNumber, string breakpointState)
+    {
+        Id = id;
+        ParentId = parentId;
+        Name = name;
+        LineNumber = lineNumber;
+        BreakpointState = breakpointState;
+    }
+
+    public string Id { get; set; }
+    public string? ParentId { get; set; }
+    public string Name { get; set; }
+    public int LineNumber { get; set; }
+    public string BreakpointState { get; set; }
+}

packages/blazor-workspace/Examples/Demo.Shared/Pages/Sections/Ts/TsSection.razor

@@ -0,0 +1,3 @@
+@namespace Demo.Shared.Pages.Sections
+
+<TsBreakpointTableSection />

packages/blazor-workspace/OkBlazor/Source/Patterns/EventHandlers.cs

@@ -2,6 +2,8 @@
 
 namespace OkBlazor;
 
+[EventHandler("onokbreakpointcolumntoggle", typeof(BreakpointColumnToggleEventArgs), enableStopPropagation: true, enablePreventDefault: false)]
+[EventHandler("onokbreakpointcolumncontextmenu", typeof(BreakpointColumnContextMenuEventArgs), enableStopPropagation: true, enablePreventDefault: false)]
 public static class EventHandlers
 {
 }

packages/blazor-workspace/OkBlazor/Source/Ts/TableColumnBreakpoint/BreakpointEventArgs.cs

@@ -0,0 +1,33 @@
+namespace OkBlazor;
+
+/// <summary>
+/// The possible states of a breakpoint indicator.
+/// </summary>
+public static class BreakpointState
+{
+    public const string Off = "off";
+    public const string Enabled = "enabled";
+    public const string Disabled = "disabled";
+    public const string Hit = "hit";
+    public const string Conditional = "conditional";
+    public const string HitDisabled = "hit-disabled";
+}
+
+/// <summary>
+/// Event args for the breakpoint-column-toggle event.
+/// </summary>
+public class BreakpointColumnToggleEventArgs : EventArgs
+{
+    public string RecordId { get; set; } = string.Empty;
+    public string NewState { get; set; } = string.Empty;
+    public string OldState { get; set; } = string.Empty;
+}
+
+/// <summary>
+/// Event args for the breakpoint-column-context-menu event.
+/// </summary>
+public class BreakpointColumnContextMenuEventArgs : EventArgs
+{
+    public string RecordId { get; set; } = string.Empty;
+    public string CurrentState { get; set; } = string.Empty;
+}

packages/blazor-workspace/OkBlazor/Source/Ts/TableColumnBreakpoint/OkTsTableColumnBreakpoint.razor

@@ -0,0 +1,11 @@
+@namespace OkBlazor
+
+<ok-ts-table-column-breakpoint
+    column-id="@ColumnId"
+    field-name="@FieldName"
+    column-hidden="@ColumnHidden"
+    menu-slot="@MenuSlot"
+    @onokbreakpointcolumntoggle="BreakpointToggle"
+    @onokbreakpointcolumncontextmenu="BreakpointContextMenu"
+    @attributes="AdditionalAttributes">
+</ok-ts-table-column-breakpoint>

packages/blazor-workspace/OkBlazor/Source/Ts/TableColumnBreakpoint/OkTsTableColumnBreakpoint.razor.cs

@@ -0,0 +1,50 @@
+using System.Diagnostics.CodeAnalysis;
+using Microsoft.AspNetCore.Components;
+
+namespace OkBlazor;
+
+public partial class OkTsTableColumnBreakpoint : ComponentBase
+{
+    /// <summary>
+    /// The ID of the column.
+    /// </summary>
+    [Parameter]
+    public string? ColumnId { get; set; }
+
+    /// <summary>
+    /// Gets or sets the field in the data record that contains the breakpoint state value.
+    /// </summary>
+    [Parameter]
+    [DisallowNull]
+    public string FieldName { get; set; } = null!;
+
+    /// <summary>
+    /// The name of the slot in which to render the context menu for this breakpoint column. If not provided, no context menu will be rendered.
+    /// </summary>
+    [Parameter]
+    public string? MenuSlot { get; set; }
+
+    /// <summary>
+    /// Whether or not the column should be hidden.
+    /// </summary>
+    [Parameter]
+    public bool? ColumnHidden { get; set; }
+
+    /// <summary>
+    /// Gets or sets a callback invoked when a breakpoint is toggled (clicked).
+    /// </summary>
+    [Parameter]
+    public EventCallback<BreakpointColumnToggleEventArgs> BreakpointToggle { get; set; }
+
+    /// <summary>
+    /// Gets or sets a callback invoked when a context menu is requested on a breakpoint.
+    /// </summary>
+    [Parameter]
+    public EventCallback<BreakpointColumnContextMenuEventArgs> BreakpointContextMenu { get; set; }
+
+    /// <summary>
+    /// Any additional attributes that did not match known properties.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IDictionary<string, object>? AdditionalAttributes { get; set; }
+}

packages/blazor-workspace/OkBlazor/wwwroot/OkBlazor.lib.module.js

@@ -23,17 +23,26 @@ function registerEvents(Blazor) {
 
     hasRegisteredEvents = true;
 
-    /* Register any custom events here
-    Blazor.registerCustomEventType('okeventname', {
-        browserEventName: 'foo',
+    Blazor.registerCustomEventType('okbreakpointcolumntoggle', {
+        browserEventName: 'breakpoint-column-toggle',
         createEventArgs: event => {
             return {
+                recordId: event.detail.recordId,
                 newState: event.detail.newState,
                 oldState: event.detail.oldState
             };
         }
     });
-    */
+
+    Blazor.registerCustomEventType('okbreakpointcolumncontextmenu', {
+        browserEventName: 'breakpoint-column-context-menu',
+        createEventArgs: event => {
+            return {
+                recordId: event.detail.recordId,
+                currentState: event.detail.currentState
+            };
+        }
+    });
 }
 
 function handleRuntimeStarted() {

packages/ok-components/src/ts/all-ts.ts

@@ -1 +1,2 @@
 import './icon-dynamic';
+import './table-column/breakpoint';