From 174abf42fa1a35849c87a7279613378e59533e36 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 6 Oct 2025 10:18:51 +0200 Subject: [PATCH 1/6] Add Drag & Drop component --- .../Components/Drag/FluentDragContainer.razor | 12 + .../Drag/FluentDragContainer.razor.cs | 75 ++++++ .../Components/Drag/FluentDragEventArgs.cs | 31 +++ src/Core/Components/Drag/FluentDropZone.razor | 26 ++ .../Components/Drag/FluentDropZone.razor.cs | 241 ++++++++++++++++++ .../Components/Drag/FluentDropZone.razor.css | 9 + ...soft.FluentUI.AspNetCore.Components.csproj | 2 +- 7 files changed, 395 insertions(+), 1 deletion(-) create mode 100644 src/Core/Components/Drag/FluentDragContainer.razor create mode 100644 src/Core/Components/Drag/FluentDragContainer.razor.cs create mode 100644 src/Core/Components/Drag/FluentDragEventArgs.cs create mode 100644 src/Core/Components/Drag/FluentDropZone.razor create mode 100644 src/Core/Components/Drag/FluentDropZone.razor.cs create mode 100644 src/Core/Components/Drag/FluentDropZone.razor.css diff --git a/src/Core/Components/Drag/FluentDragContainer.razor b/src/Core/Components/Drag/FluentDragContainer.razor new file mode 100644 index 0000000000..9cb4a133ad --- /dev/null +++ b/src/Core/Components/Drag/FluentDragContainer.razor @@ -0,0 +1,12 @@ +@namespace Microsoft.FluentUI.AspNetCore.Components +@inherits FluentComponentBase + +@typeparam TItem +@attribute [CascadingTypeParameter(nameof(TItem))] +
+ + @ChildContent + +
\ No newline at end of file diff --git a/src/Core/Components/Drag/FluentDragContainer.razor.cs b/src/Core/Components/Drag/FluentDragContainer.razor.cs new file mode 100644 index 0000000000..2f9e5aabc4 --- /dev/null +++ b/src/Core/Components/Drag/FluentDragContainer.razor.cs @@ -0,0 +1,75 @@ +// ------------------------------------------------------------------------ +// This file is licensed to you under the MIT License. +// ------------------------------------------------------------------------ + +using Microsoft.AspNetCore.Components; +using Microsoft.FluentUI.AspNetCore.Components.Utilities; + +namespace Microsoft.FluentUI.AspNetCore.Components; + +/// +public partial class FluentDragContainer : FluentComponentBase +{ + /// + public FluentDragContainer(LibraryConfiguration configuration) : base(configuration) { } + + /// + protected virtual string? ClassValue => new CssBuilder(Class).Build(); + + /// + protected virtual string? StyleValue => new StyleBuilder(Style).Build(); + + /// + /// Gets or sets the content to be rendered inside the component. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// This event is fired when the user starts dragging an element. + /// + [Parameter] + public Action>? OnDragStart { get; set; } + + /// + /// This event is fired when the drag operation ends (such as releasing a mouse button or hitting the Esc key). + /// + [Parameter] + public Action>? OnDragEnd { get; set; } + + /// + /// This event is fired when a dragged element enters a valid drop target. + /// + [Parameter] + public Action>? OnDragEnter { get; set; } + + /// + /// This event is fired when an element is being dragged over a valid drop target. + /// + [Parameter] + public Action>? OnDragOver { get; set; } + + /// + /// This event is fired when a dragged element leaves a valid drop target. + /// + [Parameter] + public Action>? OnDragLeave { get; set; } + + /// + /// This event is fired when an element is dropped on a valid drop target. + /// + [Parameter] + public Action>? OnDropEnd { get; set; } + + /// + /// property to keep the zone currently dragged. + /// + internal FluentDropZone? StartedZone { get; private set; } + + /// + internal void SetStartedZone(FluentDropZone? value) + { + StartedZone = value; + StateHasChanged(); + } +} diff --git a/src/Core/Components/Drag/FluentDragEventArgs.cs b/src/Core/Components/Drag/FluentDragEventArgs.cs new file mode 100644 index 0000000000..e6b064b1fc --- /dev/null +++ b/src/Core/Components/Drag/FluentDragEventArgs.cs @@ -0,0 +1,31 @@ +// ------------------------------------------------------------------------ +// This file is licensed to you under the MIT License. +// ------------------------------------------------------------------------ + +namespace Microsoft.FluentUI.AspNetCore.Components; + +/// +public class FluentDragEventArgs : EventArgs +{ + /// + public FluentDragEventArgs() + { + } + + /// + internal FluentDragEventArgs(FluentDropZone source, FluentDropZone target) + { + Source = source; + Target = target; + } + + /// + /// Gets the zone where the drag started. + /// + public FluentDropZone Source { get; } = null!; + + /// + /// Gets the zone where the drag ended. + /// + public FluentDropZone Target { get; } = null!; +} diff --git a/src/Core/Components/Drag/FluentDropZone.razor b/src/Core/Components/Drag/FluentDropZone.razor new file mode 100644 index 0000000000..ff9dc9ba1f --- /dev/null +++ b/src/Core/Components/Drag/FluentDropZone.razor @@ -0,0 +1,26 @@ +@namespace Microsoft.FluentUI.AspNetCore.Components +@inherits FluentComponentBase + +@typeparam TItem +
+ @ChildContent +
diff --git a/src/Core/Components/Drag/FluentDropZone.razor.cs b/src/Core/Components/Drag/FluentDropZone.razor.cs new file mode 100644 index 0000000000..737ccc4dd0 --- /dev/null +++ b/src/Core/Components/Drag/FluentDropZone.razor.cs @@ -0,0 +1,241 @@ +// ------------------------------------------------------------------------ +// This file is licensed to you under the MIT License. +// ------------------------------------------------------------------------ + +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.FluentUI.AspNetCore.Components.Utilities; + +namespace Microsoft.FluentUI.AspNetCore.Components; + +/// +public partial class FluentDropZone : FluentComponentBase +{ + /// + public FluentDropZone(LibraryConfiguration configuration) : base(configuration) { } + + /// + protected virtual string? ClassValue => new CssBuilder(Class).Build(); + + /// + protected virtual string? StyleValue => new StyleBuilder(Style).Build(); + + /// + [CascadingParameter] + private FluentDragContainer Container { get; set; } = default!; + + /// + /// Gets or sets the item to identify a draggable zone. + /// + [Parameter] + public TItem Item { get; set; } = default!; + + /// + /// Gets or sets the content to be rendered inside the component. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + /// Gets or sets a value indicating whether the element can receive a dragged item. + /// + [Parameter] + public bool Droppable { get; set; } + + /// + /// Gets or sets a value indicating whether the element can be dragged. + /// + [Parameter] + public bool Draggable { get; set; } + + /// + /// This event is fired when the user starts dragging an element. + /// + [Parameter] + public Action>? OnDragStart { get; set; } + + /// + /// This event is fired when the drag operation ends (such as releasing a mouse button or hitting the Esc key). + /// + [Parameter] + public Action>? OnDragEnd { get; set; } + + /// + /// This event is fired when a dragged element enters a valid drop target. + /// + [Parameter] + public Action>? OnDragEnter { get; set; } + + /// + /// This event is fired when an element is being dragged over a valid drop target. + /// + [Parameter] + public Action>? OnDragOver { get; set; } + + /// + /// This event is fired when a dragged element leaves a valid drop target. + /// + [Parameter] + public Action>? OnDragLeave { get; set; } + + /// + /// This event is fired when an element is dropped on a valid drop target. + /// + [Parameter] + public Action>? OnDropEnd { get; set; } + + /// + /// Gets or sets a way to prevent further propagation of the current event in the capturing and bubbling phases. + /// + [Parameter] + public bool StopPropagation { get; set; } + + /// + private bool IsOver { get; set; } + + /// + private void OnDragStartHandler(DragEventArgs e) + { + if (!Draggable) + { + return; + } + + Container.SetStartedZone(this); + + if (OnDragStart != null) + { + OnDragStart(new FluentDragEventArgs(this, this)); + } + + if (Container.OnDragStart != null) + { + Container.OnDragStart(new FluentDragEventArgs(this, this)); + } + } + + /// + private void OnDragEndHandler(DragEventArgs e) + { + if (!Draggable) + { + return; + } + + if (OnDragEnd != null) + { + OnDragEnd(new FluentDragEventArgs(this, this)); + } + + if (Container.OnDragEnd != null) + { + Container.OnDragEnd(new FluentDragEventArgs(this, this)); + } + } + + /// + private void OnDragEnterHandler(DragEventArgs e) + { + if (!Droppable) + { + return; + } + + IsOver = true; + + if (Container.StartedZone == null) + { + return; + } + + if (OnDragEnter != null) + { + OnDragEnter(new FluentDragEventArgs(Container.StartedZone, this)); + } + + if (Container.OnDragEnter != null) + { + Container.OnDragEnter(new FluentDragEventArgs(Container.StartedZone, this)); + } + } + + /// + private void OnDragOverHandler(DragEventArgs e) + { + if (!Droppable) + { + return; + } + + if (Container.StartedZone == null) + { + return; + } + + IsOver = true; + + if (OnDragOver != null) + { + OnDragOver(new FluentDragEventArgs(Container.StartedZone, this)); + } + + if (Container.OnDragOver != null) + { + Container.OnDragOver(new FluentDragEventArgs(Container.StartedZone, this)); + } + } + + /// + private void OnDragLeaveHandler(DragEventArgs e) + { + if (!Droppable) + { + return; + } + + IsOver = false; + + if (Container.StartedZone == null) + { + return; + } + + if (OnDragLeave != null) + { + OnDragLeave(new FluentDragEventArgs(Container.StartedZone, this)); + } + + if (Container.OnDragLeave != null) + { + Container.OnDragLeave(new FluentDragEventArgs(Container.StartedZone, this)); + } + } + + /// + private void OnDropHandler(DragEventArgs e) + { + if (!Droppable) + { + return; + } + + IsOver = false; + + if (Container.StartedZone == null) + { + return; + } + + if (OnDropEnd != null) + { + OnDropEnd(new FluentDragEventArgs(Container.StartedZone, this)); + } + + if (Container.OnDropEnd != null) + { + Container.OnDropEnd(new FluentDragEventArgs(Container.StartedZone, this)); + } + + Container.SetStartedZone(null); + } +} diff --git a/src/Core/Components/Drag/FluentDropZone.razor.css b/src/Core/Components/Drag/FluentDropZone.razor.css new file mode 100644 index 0000000000..3e65086859 --- /dev/null +++ b/src/Core/Components/Drag/FluentDropZone.razor.css @@ -0,0 +1,9 @@ +div[draggable='true'] { + cursor: move; +} + +div[dragged-over] { + background-color: lightgray; + opacity: 0.6; + animation: blinker 1s linear infinite; +} diff --git a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj index 7e8d9ecbc3..cb1d25147a 100644 --- a/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj +++ b/src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj @@ -125,7 +125,7 @@ - + From d4b389184bf4c116fcb589e49272e330f9fdd5d3 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 6 Oct 2025 10:30:41 +0200 Subject: [PATCH 2/6] Add Drag & Drop demo --- .../Drag/Examples/DragDropBasic.razor | 18 ++ .../Drag/Examples/DragDropNested.razor | 242 ++++++++++++++++++ .../Components/Drag/FluentDragDrop.md | 33 +++ 3 files changed, 293 insertions(+) create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/Examples/DragDropBasic.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/Examples/DragDropNested.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/FluentDragDrop.md diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/Examples/DragDropBasic.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/Examples/DragDropBasic.razor new file mode 100644 index 0000000000..39b444bfc2 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/Examples/DragDropBasic.razor @@ -0,0 +1,18 @@ + + + +
+ Item 1 +
+ + +
+ Item 2 +
+ + + diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/Examples/DragDropNested.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/Examples/DragDropNested.razor new file mode 100644 index 0000000000..710356ce10 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/Examples/DragDropNested.razor @@ -0,0 +1,242 @@ + +
+ + + + @foreach (var row in _testForm.Rows) + { + + Row: @row.RowId + @if (row.Columns.Count == 0) + { + + } + else + { + @foreach (var column in row.Columns) + { + + Column: @column.ColumnId + @if (column.Elements.Count == 0) + { + + } + else + { + @foreach (var element in column.Elements) + { + + Element: @element.ElementId + + } + } + + } + } + + } + + + +
+ +@code { + private Form _testForm; + + public DragDropNested() + { + _testForm = new Form(); + + var rows = Enumerable.Range(1, 6) + .Select(id => new FormRow { RowId = id }) + .ToList(); + + var columns = Enumerable.Range(1, 9) + .Select(id => new FormColumn { ColumnId = id }) + .ToList(); + + var elementMap = new Dictionary + { + { 1, 2 }, + { 2, 1 }, + { 3, 3 }, + { 4, 0 }, + { 5, 2 }, + { 6, 1 }, + { 7, 0 }, + { 8, 1 }, + { 9, 0 } + }; + + int elementIdCounter = 1; + foreach (var column in columns) + { + if (elementMap.TryGetValue(column.ColumnId, out int count)) + { + for (int i = 0; i < count; i++) + { + column.Elements.Add(new FormElement + { + ElementId = elementIdCounter++ + }); + } + } + } + + rows[0].Columns.AddRange(new[] { columns[0], columns[1] }); + rows[1].Columns.Add(columns[2]); + rows[2].Columns.Add(columns[3]); + rows[3].Columns.AddRange(new[] { columns[4], columns[5] }); + rows[4].Columns.AddRange(new[] { columns[6], columns[7] }); + rows[5].Columns.Add(columns[8]); + + _testForm.Rows.AddRange(rows); + } + + private void OnRowDropEnd(FluentDragEventArgs e) + { + var target = e.Target.Item; + var source = e.Source.Item; + + int targetIndex = _testForm.Rows.IndexOf(target); + + _testForm.Rows.Remove(source); + _testForm.Rows.Insert(targetIndex, source); + } + + private void OnColumnDropEnd(FluentDragEventArgs e) + { + var sourceRow = e.Source.Data as FormRow; + var targetRow = e.Target.Data as FormRow; + + if (sourceRow is null || targetRow is null) + { + return; + } + + var target = e.Target.Item; + var source = e.Source.Item; + int targetIndex = targetRow.Columns.IndexOf(target); + + if (sourceRow == targetRow) + { + sourceRow.Columns.Remove(source); + sourceRow.Columns.Insert(targetIndex, source); + } + else + { + sourceRow.Columns.Remove(source); + if (targetIndex != -1) + { + targetRow.Columns.Insert(targetIndex, source); + } + else + { + targetRow.Columns.Add(source); + } + } + + StateHasChanged(); + } + + private void OnDropElement(FluentDragEventArgs e) + { + var sourceColumn = e.Source.Data as FormColumn; + var targetColumn = e.Target.Data as FormColumn; + + if (sourceColumn is null || targetColumn is null) + { + return; + } + + var source = e.Source.Item; + var target = e.Target.Item; + + + int targetIndex = targetColumn.Elements.IndexOf(target); + + + if (sourceColumn == targetColumn) + { + sourceColumn.Elements.Remove(source); + sourceColumn.Elements.Insert(targetIndex, source); + } + else + { + sourceColumn.Elements.Remove(source); + if (targetIndex != -1) + { + targetColumn.Elements.Insert(targetIndex, source); + } + else + { + targetColumn.Elements.Add(source); + } + } + + StateHasChanged(); + } + + public class Form + { + public int FormId { get; set; } + public List Rows { get; set; } = []; + } + + public class FormRow + { + public int RowId { get; set; } + public List Columns { get; set; } = []; + } + + public class FormColumn + { + public int ColumnId { get; set; } + public List Elements { get; set; } = []; + } + + public class FormElement + { + public int ElementId { get; set; } + } +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/FluentDragDrop.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/FluentDragDrop.md new file mode 100644 index 0000000000..b85177b1c9 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Drag/FluentDragDrop.md @@ -0,0 +1,33 @@ +--- +title: Drag and Drop +route: /Drag +--- + +# Drag and Drop + +A web component implementation of a HTML Drag and Drop API. + +The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation. + +## Basic example + +{{ DragDropBasic }} + +## Nested drag & drop +This example demonstrates how to nest multiple `FluentDragContainer` components to enable drag-and-drop interactions across hierarchical structures such as rows, columns, and elements. + +The key to making this multi-level drag-and-drop system work is the use of the `StopPropagation` property. By enabling it where appropriate, each nested `FluentDragContainer` can handle drag events independently-preventing unintended interference from parent containers. + +Each level supports independent drag behavior: + +* **Rows** can be reordered vertically. +* **Columns** can be moved within the same row or between different rows. +* **Elements** can be rearranged inside a column or moved across columns. + +The yellow area indicates an empty drop zone inside a row. It accepts columns when a row does not contain any yet. Similarly, empty columns behave as drop zones for elements. + +This structure allows fully flexible layout editing with deep nesting and drag-and-drop handling at every level. + +{{ DragDropNested }} + + From 199500a132129a0ab392e83774c9063c935de872 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 6 Oct 2025 10:47:05 +0200 Subject: [PATCH 3/6] Add tests --- ...sts.FluentDrag_Default.verified.razor.html | 9 ++++ ...ntDrag_StopPropagation.verified.razor.html | 9 ++++ .../Components/Drag/FluentDragTests.razor | 48 +++++++++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 tests/Core/Components/Drag/FluentDragTests.FluentDrag_Default.verified.razor.html create mode 100644 tests/Core/Components/Drag/FluentDragTests.FluentDrag_StopPropagation.verified.razor.html create mode 100644 tests/Core/Components/Drag/FluentDragTests.razor diff --git a/tests/Core/Components/Drag/FluentDragTests.FluentDrag_Default.verified.razor.html b/tests/Core/Components/Drag/FluentDragTests.FluentDrag_Default.verified.razor.html new file mode 100644 index 0000000000..c4ee419933 --- /dev/null +++ b/tests/Core/Components/Drag/FluentDragTests.FluentDrag_Default.verified.razor.html @@ -0,0 +1,9 @@ + +
+
+ Item 1 +
+
+ Item 2 +
+
\ No newline at end of file diff --git a/tests/Core/Components/Drag/FluentDragTests.FluentDrag_StopPropagation.verified.razor.html b/tests/Core/Components/Drag/FluentDragTests.FluentDrag_StopPropagation.verified.razor.html new file mode 100644 index 0000000000..0cde19c39d --- /dev/null +++ b/tests/Core/Components/Drag/FluentDragTests.FluentDrag_StopPropagation.verified.razor.html @@ -0,0 +1,9 @@ + +
+
+ Item 1 +
+
+ Item 2 +
+
\ No newline at end of file diff --git a/tests/Core/Components/Drag/FluentDragTests.razor b/tests/Core/Components/Drag/FluentDragTests.razor new file mode 100644 index 0000000000..a3f14ea364 --- /dev/null +++ b/tests/Core/Components/Drag/FluentDragTests.razor @@ -0,0 +1,48 @@ +@using Microsoft.FluentUI.AspNetCore.Components.Tests.Extensions +@using Microsoft.FluentUI.AspNetCore.Components.Utilities +@using Xunit; +@inherits Bunit.TestContext + +@code { + public FluentDragTests() + { + JSInterop.Mode = JSRuntimeMode.Loose; + Services.AddFluentUIComponents(); + } + + [Fact] + public void FluentDrag_Default() + { + // Arrange && Act + var cut = Render(@ + + Item 1 + + + + Item 2 + + ); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentDrag_StopPropagation() + { + // Arrange && Act + var cut = Render(@ + + Item 1 + + + + Item 2 + + ); + + // Assert + cut.Verify(); + } +} From 549d8c7b63eb2d030b6a5c5c3771e5065867eec7 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 6 Oct 2025 13:03:17 +0200 Subject: [PATCH 4/6] Code review fixes --- src/Core/Components/Drag/FluentDragContainer.razor | 5 +++-- src/Core/Components/Drag/FluentDropZone.razor | 1 + src/Core/Components/Drag/FluentDropZone.razor.cs | 7 ++++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/Core/Components/Drag/FluentDragContainer.razor b/src/Core/Components/Drag/FluentDragContainer.razor index 9cb4a133ad..521717797e 100644 --- a/src/Core/Components/Drag/FluentDragContainer.razor +++ b/src/Core/Components/Drag/FluentDragContainer.razor @@ -1,12 +1,13 @@ -@namespace Microsoft.FluentUI.AspNetCore.Components +@namespace Microsoft.FluentUI.AspNetCore.Components @inherits FluentComponentBase @typeparam TItem @attribute [CascadingTypeParameter(nameof(TItem))]
@ChildContent -
\ No newline at end of file + diff --git a/src/Core/Components/Drag/FluentDropZone.razor b/src/Core/Components/Drag/FluentDropZone.razor index ff9dc9ba1f..b853a7821b 100644 --- a/src/Core/Components/Drag/FluentDropZone.razor +++ b/src/Core/Components/Drag/FluentDropZone.razor @@ -7,6 +7,7 @@ class=@ClassValue style=@StyleValue dragged-over=@IsOver + @attributes="@AdditionalAttributes" @ondrop:stopPropagation="@StopPropagation" @ondragenter:stopPropagation="@StopPropagation" @ondragend:stopPropagation="@StopPropagation" diff --git a/src/Core/Components/Drag/FluentDropZone.razor.cs b/src/Core/Components/Drag/FluentDropZone.razor.cs index 737ccc4dd0..95179767b3 100644 --- a/src/Core/Components/Drag/FluentDropZone.razor.cs +++ b/src/Core/Components/Drag/FluentDropZone.razor.cs @@ -4,7 +4,6 @@ using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; -using Microsoft.FluentUI.AspNetCore.Components.Utilities; namespace Microsoft.FluentUI.AspNetCore.Components; @@ -15,10 +14,12 @@ public partial class FluentDropZone : FluentComponentBase public FluentDropZone(LibraryConfiguration configuration) : base(configuration) { } /// - protected virtual string? ClassValue => new CssBuilder(Class).Build(); + protected virtual string? ClassValue => DefaultClassBuilder + .Build(); /// - protected virtual string? StyleValue => new StyleBuilder(Style).Build(); + protected virtual string? StyleValue => DefaultStyleBuilder + .Build(); /// [CascadingParameter] From 8b16973df56571444170d47f4b91f2d005cd5fad Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 6 Oct 2025 13:07:10 +0200 Subject: [PATCH 5/6] Add to ComponentBaseInitializer --- tests/Core/Components/Base/ComponentBaseTests.cs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/Core/Components/Base/ComponentBaseTests.cs b/tests/Core/Components/Base/ComponentBaseTests.cs index 7b09fa3913..ca5aa5c640 100644 --- a/tests/Core/Components/Base/ComponentBaseTests.cs +++ b/tests/Core/Components/Base/ComponentBaseTests.cs @@ -48,6 +48,8 @@ public class ComponentBaseTests : Bunit.TestContext .WithCascadingValue("OwningRow", new FluentDataGridRow(new LibraryConfiguration()) { InternalGridContext = new InternalGridContext(new FluentDataGrid(new LibraryConfiguration())) }) }, { typeof(FluentCalendar<>), Loader.MakeGenericType(typeof(DateTime))}, { typeof(FluentDatePicker<>), Loader.MakeGenericType(typeof(DateTime))}, + { typeof(FluentDragContainer<>), Loader.MakeGenericType(typeof(int))}, + { typeof(FluentDropZone<>), Loader.MakeGenericType(typeof(int))}, }; /// From 4935e6bdeb8d2459095c3eee8b52060e137f3ca3 Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 6 Oct 2025 13:20:28 +0200 Subject: [PATCH 6/6] Code review fixes --- .../Components/Drag/FluentDragContainer.razor | 14 +++++------ .../Drag/FluentDragContainer.razor.cs | 7 +++--- src/Core/Components/Drag/FluentDropZone.razor | 24 +++++++++---------- 3 files changed, 23 insertions(+), 22 deletions(-) diff --git a/src/Core/Components/Drag/FluentDragContainer.razor b/src/Core/Components/Drag/FluentDragContainer.razor index 521717797e..9a35568a86 100644 --- a/src/Core/Components/Drag/FluentDragContainer.razor +++ b/src/Core/Components/Drag/FluentDragContainer.razor @@ -1,13 +1,13 @@ @namespace Microsoft.FluentUI.AspNetCore.Components @inherits FluentComponentBase - @typeparam TItem @attribute [CascadingTypeParameter(nameof(TItem))] -
- - @ChildContent - + class="@ClassValue" + style="@StyleValue"> + + @ChildContent +
diff --git a/src/Core/Components/Drag/FluentDragContainer.razor.cs b/src/Core/Components/Drag/FluentDragContainer.razor.cs index 2f9e5aabc4..af642cfa29 100644 --- a/src/Core/Components/Drag/FluentDragContainer.razor.cs +++ b/src/Core/Components/Drag/FluentDragContainer.razor.cs @@ -3,7 +3,6 @@ // ------------------------------------------------------------------------ using Microsoft.AspNetCore.Components; -using Microsoft.FluentUI.AspNetCore.Components.Utilities; namespace Microsoft.FluentUI.AspNetCore.Components; @@ -14,10 +13,12 @@ public partial class FluentDragContainer : FluentComponentBase public FluentDragContainer(LibraryConfiguration configuration) : base(configuration) { } /// - protected virtual string? ClassValue => new CssBuilder(Class).Build(); + protected virtual string? ClassValue => DefaultClassBuilder + .Build(); /// - protected virtual string? StyleValue => new StyleBuilder(Style).Build(); + protected virtual string? StyleValue => DefaultStyleBuilder + .Build(); /// /// Gets or sets the content to be rendered inside the component. diff --git a/src/Core/Components/Drag/FluentDropZone.razor b/src/Core/Components/Drag/FluentDropZone.razor index b853a7821b..c0b78db2d2 100644 --- a/src/Core/Components/Drag/FluentDropZone.razor +++ b/src/Core/Components/Drag/FluentDropZone.razor @@ -1,12 +1,12 @@ @namespace Microsoft.FluentUI.AspNetCore.Components @inherits FluentComponentBase - @typeparam TItem -
+ @ondragend="@OnDragEndHandler" + @ondrop="@OnDropHandler" @ondrop:preventDefault> @ChildContent