diff --git a/.gitignore b/.gitignore index 81afb0e16e..62dae6c823 100644 --- a/.gitignore +++ b/.gitignore @@ -45,3 +45,4 @@ UpgradeLog.htm *.svclog /src/CustomElementsParser/GeneratedClasses /examples/FluentUI.Demo.Client/Properties +/publish diff --git a/examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml index 3f5514e5e9..f9af302f44 100644 --- a/examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml +++ b/examples/FluentUI.Demo.Shared/Microsoft.Fast.Components.FluentUI.xml @@ -15,6 +15,16 @@ Gets or sets the id of the active accordion item + + + Gets or sets a callback that updates the bound value. + + + + + Gets or sets a callback when a accordion item is changed . + + Gets or sets the owning FluentTreeView diff --git a/examples/FluentUI.Demo.Shared/Pages/Accordion/Examples/AccordionDefault.razor b/examples/FluentUI.Demo.Shared/Pages/Accordion/Examples/AccordionDefault.razor index 25faec1785..060f9d699f 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Accordion/Examples/AccordionDefault.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Accordion/Examples/AccordionDefault.razor @@ -1,5 +1,5 @@  - @*OnAccordionItemChange="HandleOnAccordionItemChange"*@ + Panel one content, using the 'start' slot for extra header content (in this case an icon) diff --git a/examples/FluentUI.Demo.Shared/Pages/Dialog/Examples/DialogFromObject.razor b/examples/FluentUI.Demo.Shared/Pages/Dialog/Examples/DialogFromObject.razor index dd23ac1474..6490856e63 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Dialog/Examples/DialogFromObject.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Dialog/Examples/DialogFromObject.razor @@ -1,4 +1,4 @@ - +

Dialog referenced from object

 diff --git a/examples/FluentUI.Demo.Shared/Pages/Menu/Examples/MenuDefault.razor b/examples/FluentUI.Demo.Shared/Pages/Menu/Examples/MenuDefault.razor index 41b0c7809e..575fec9ae7 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Menu/Examples/MenuDefault.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Menu/Examples/MenuDefault.razor @@ -9,8 +9,8 @@ @code{ private string status = ""; - private void OnMenuChange() - { - status = "Menu item selected"; + private void OnMenuChange(MenuChangeEventArgs args) { + if (args is not null && args.Value is not null) + status = $"{args.Value} selected"; } } \ No newline at end of file diff --git a/examples/FluentUI.Demo.Shared/Pages/Tooltip/Examples/TooltipDefault.razor b/examples/FluentUI.Demo.Shared/Pages/Tooltip/Examples/TooltipDefault.razor index 5f3a1e9c8b..20f54a6020 100644 --- a/examples/FluentUI.Demo.Shared/Pages/Tooltip/Examples/TooltipDefault.razor +++ b/examples/FluentUI.Demo.Shared/Pages/Tooltip/Examples/TooltipDefault.razor @@ -1,6 +1,6 @@ 
Tooltip at the bottom - I'm helping! + I'm helping!
Tooltip at the top diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor index 6ff8879c71..5e614a448c 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor @@ -1,11 +1,9 @@ @inherits FluentComponentBase - @ChildContent -@*Below needs to be added to the above once the necessary changes are in the Web Components script*@ -@*@onaccordionchange="HandleOnAccordionChanged"*@ \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor.cs b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor.cs index 70fcd1146c..261e22626a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentAccordion.razor.cs @@ -1,3 +1,4 @@ +using System.Diagnostics.CodeAnalysis; using Microsoft.AspNetCore.Components; namespace Microsoft.Fast.Components.FluentUI; @@ -19,30 +20,37 @@ public partial class FluentAccordion : FluentComponentBase [Parameter] public string? ActiveId { get; set; } - //Commented code below is waiting for changes in the Web Components script - - - ///// - ///// Gets or sets a callback that updates the bound value. - ///// - //[Parameter] - //public EventCallback ActiveIdChanged { get; set; } - - ///// - ///// Gets or sets a callback when a accordion item is changed . - ///// - //[Parameter] - //public EventCallback OnAccordionItemChange { get; set; } - - //private async Task HandleOnAccordionChanged(AccordionChangeEventArgs args) - //{ - // string? Id = args.AffectedId; - // if (items.TryGetValue(Id!, out FluentAccordionItem? item)) - // { - // await OnAccordionItemChange.InvokeAsync(item); - // await ActiveIdChanged.InvokeAsync(args.ActiveId); - // } - //} + /// + /// Gets or sets a callback that updates the bound value. + /// + [Parameter] + public EventCallback ActiveIdChanged { get; set; } + + /// + /// Gets or sets a callback when a accordion item is changed . + /// + [Parameter] + public EventCallback OnAccordionItemChange { get; set; } + + [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(AccordionChangeEventArgs))] + + public FluentAccordion() + { + + } + + private async Task HandleOnAccordionChanged(AccordionChangeEventArgs args) + { + if (args is not null) + { + string? Id = args.ActiveId; + if (Id is not null && items.TryGetValue(Id!, out FluentAccordionItem? item)) + { + await OnAccordionItemChange.InvokeAsync(item); + await ActiveIdChanged.InvokeAsync(Id); + } + } + } internal void Register(FluentAccordionItem item) { diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor index 711ddfcda6..c0f03df3ee 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentCheckbox.razor @@ -7,8 +7,8 @@ disabled=@Disabled name=@Name required="@Required" - current-checked="@BindConverter.FormatValue(CurrentValue)" - @oncheckedchange="(__value) => CurrentValue = __value.Checked" + current-checked="@CurrentValue" + @oncheckedchange="@((e) => CurrentValue = e.Checked)" @attributes="AdditionalAttributes"> @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor index 42228db678..ee1661bba6 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentNumberField.razor @@ -21,7 +21,7 @@ name=@Name required="@Required" appearance="@Appearance.ToAttributeValue()" - @onchange="@(EventCallback.Factory.CreateBinder(this, __value => CurrentValueAsString = __value, CurrentValueAsString))" + @oncustomclick="@((e) => CurrentValueAsString = e.Value?.ToString())" @attributes="AdditionalAttributes"> @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadioGroup.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadioGroup.razor index d061ed5e95..9acf72ed33 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadioGroup.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentRadioGroup.razor @@ -7,7 +7,7 @@ orientation="@Orientation.ToAttributeValue()" required="@Required" current-value="@CurrentValue" - @onchange="@(EventCallback.Factory.CreateBinder(this, __value => CurrentValue = __value, CurrentValue))" + @oncustomclick="@((e) => CurrentValueAsString = e.Value?.ToString())" @attributes="AdditionalAttributes"> @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSlider.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSlider.razor index 854cddfba0..5b8c4c797a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSlider.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSlider.razor @@ -12,7 +12,7 @@ disabled="@Disabled" name=@Name required=@Required - @onchange="@(EventCallback.Factory.CreateBinder(this, __value => CurrentValueAsString = __value, CurrentValueAsString))" + @oncustomclick="@((e) => CurrentValueAsString = e.Value?.ToString())" @attributes="AdditionalAttributes"> @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSwitch.razor b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSwitch.razor index feb35ea8b4..7ee49d8dad 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Components/FluentSwitch.razor +++ b/src/Microsoft.Fast.Components.FluentUI/Components/FluentSwitch.razor @@ -8,7 +8,7 @@ name=@Name required=@Required current-checked="@CurrentValue" - @oncheckedchange="(__value) => CurrentValue = __value.Checked" + @oncheckedchange="@((e) => CurrentValue = e.Checked)" @attributes="AdditionalAttributes"> @ChildContent diff --git a/src/Microsoft.Fast.Components.FluentUI/Events/AccordionChangeEventArgs.cs b/src/Microsoft.Fast.Components.FluentUI/Events/AccordionChangeEventArgs.cs index 2ea5160c01..f6cb025c61 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Events/AccordionChangeEventArgs.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Events/AccordionChangeEventArgs.cs @@ -3,5 +3,4 @@ public class AccordionChangeEventArgs : EventArgs { public string? ActiveId { get; set; } - public string? AffectedId { get; set; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/Events/DialogEventArgs.cs b/src/Microsoft.Fast.Components.FluentUI/Events/DialogEventArgs.cs new file mode 100644 index 0000000000..3f9323f050 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/Events/DialogEventArgs.cs @@ -0,0 +1,6 @@ +namespace Microsoft.Fast.Components.FluentUI; + +public class DialogEventArgs : EventArgs +{ + public string? Reason { get; set; } +} diff --git a/src/Microsoft.Fast.Components.FluentUI/Events/EventHandlers.cs b/src/Microsoft.Fast.Components.FluentUI/Events/EventHandlers.cs index 4677dc2d46..f94d281abb 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Events/EventHandlers.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Events/EventHandlers.cs @@ -4,18 +4,20 @@ namespace Microsoft.Fast.Components.FluentUI; [EventHandler("oncheckedchange", typeof(CheckboxChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)] +[EventHandler("oncustomclick", typeof(ChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)] [EventHandler("ontabchange", typeof(TabChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)] [EventHandler("onselectedchange", typeof(TreeChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)] [EventHandler("onexpandedchange", typeof(TreeChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)] [EventHandler("ondateselected", typeof(CalendarSelectEventArgs), enableStopPropagation: true, enablePreventDefault: true)] -// This accordion event needs to wait until necessary changes are merged in the web components script -//[EventHandler("onaccordionchange", typeof(AccordionChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)] -[EventHandler("ondismiss", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)] -[EventHandler("onmenuchange", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)] +[EventHandler("onaccordionchange", typeof(AccordionChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)] +[EventHandler("ondialogdismiss", typeof(DialogEventArgs), enableStopPropagation: true, enablePreventDefault: true)] +[EventHandler("onmenuchange", typeof(MenuChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)] [EventHandler("onscrollstart", typeof(HorizontalScrollEventArgs), enableStopPropagation: true, enablePreventDefault: true)] [EventHandler("onscrollend", typeof(HorizontalScrollEventArgs), enableStopPropagation: true, enablePreventDefault: true)] [EventHandler("oncellfocus", typeof(DataGridCellFocusEventArgs), enableStopPropagation: true, enablePreventDefault: true)] [EventHandler("onrowfocus", typeof(DataGridRowFocusEventArgs), enableStopPropagation: true, enablePreventDefault: true)] +[EventHandler("ontooltipdismiss", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)] + public static class EventHandlers { diff --git a/src/Microsoft.Fast.Components.FluentUI/Events/MenuChangeEventArgs.cs b/src/Microsoft.Fast.Components.FluentUI/Events/MenuChangeEventArgs.cs new file mode 100644 index 0000000000..5efba442d2 --- /dev/null +++ b/src/Microsoft.Fast.Components.FluentUI/Events/MenuChangeEventArgs.cs @@ -0,0 +1,7 @@ +namespace Microsoft.Fast.Components.FluentUI; + +public class MenuChangeEventArgs : EventArgs +{ + public string? Id { get; set; } + public string? Value { get; set; } +} \ No newline at end of file diff --git a/src/Microsoft.Fast.Components.FluentUI/Events/TreeChangeEventArgs.cs b/src/Microsoft.Fast.Components.FluentUI/Events/TreeChangeEventArgs.cs index 169973da98..82a58a5d3a 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Events/TreeChangeEventArgs.cs +++ b/src/Microsoft.Fast.Components.FluentUI/Events/TreeChangeEventArgs.cs @@ -3,4 +3,8 @@ public class TreeChangeEventArgs : EventArgs { public string? AffectedId { get; set; } + + public bool? Selected { get; set; } + + public bool? Expanded { get; set; } } diff --git a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj index a77920a44f..900000bf22 100644 --- a/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj +++ b/src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj @@ -13,7 +13,7 @@ Microsoft Fluent UI Web Components for Blazor A set of Blazor components wrapping Microsoft’s official Fluent UI Web Components. They implement the latest state of the Fluent design language, are built on FAST and work in every major browser. true - 1.6.0 + 1.6.1 false enable diff --git a/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js b/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js index 93781b7afb..33af31b662 100644 --- a/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js +++ b/src/Microsoft.Fast.Components.FluentUI/wwwroot/Microsoft.Fast.Components.FluentUI.lib.module.js @@ -1,26 +1,50 @@ export function afterStarted(Blazor) { + Blazor.registerCustomEventType('customclick', { + browserEventName: 'click', + createEventArgs: event => { + return { + value: event.target.value + }; + } + }); Blazor.registerCustomEventType('checkedchange', { - browserEventName: 'change', + browserEventName: 'click', createEventArgs: event => { return { checked: event.target.currentChecked }; } }); + Blazor.registerCustomEventType('accordionchange', { + browserEventName: 'change', + createEventArgs: event => { + if (event.target.localName == 'fluent-accordion-item') { + return { + activeId: event.target.id, + } + }; + return null; + } + }); Blazor.registerCustomEventType('tabchange', { browserEventName: 'change', createEventArgs: event => { - return { - activeId: event.detail.id, - affectedId: event.detail.attributes['tab-id'].value + if (event.target.localName == 'fluent-tabs') { + return { + activeId: event.detail.id, + affectedId: event.detail.attributes['tab-id']?.value + } }; + return null; } }); Blazor.registerCustomEventType('selectedchange', { browserEventName: 'selected-change', createEventArgs: event => { return { - affectedId: event.detail.attributes['tree-item-id'].value + affectedId: event.detail.attributes['tree-item-id'].value, + selected: event.detail._selected, + expanded: event.detail._expanded }; } }); @@ -40,28 +64,35 @@ }; } }); - //Blazor.registerCustomEventType('accordionchange', { - // browserEventName: 'change', - // createEventArgs: event => { - // return { - // activeId: event.detail.id, - // affectedId: event.detail.attributes['accordion-item-id'].value - // }; - // } - //}); - Blazor.registerCustomEventType('dismiss', { + Blazor.registerCustomEventType('tooltipdismiss', { browserEventName: 'dismiss', createEventArgs: event => { - return { - event: event + if (event.target.localName == 'fluent-tooltip') { + return { + reason: event.type + }; + }; + return null; + } + }); + Blazor.registerCustomEventType('dialogdismiss', { + browserEventName: 'dismiss', + createEventArgs: event => { + if (event.target.localName == 'fluent-dialog') { + return { + reason: event.type + }; }; + return null; } }); + Blazor.registerCustomEventType('menuchange', { browserEventName: 'change', createEventArgs: event => { return { - event: event + id: event.target.id, + value: event.target.innerHTML }; } });