From 816047469120faeacc8903bf6c2a25bfd0cc09fc Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 6 Oct 2023 00:17:21 +0200 Subject: [PATCH 1/2] FluentSelect: Fix ValueChanged fired twice Override Person.ToString() to not return image data --- .../Microsoft.Fast.Components.FluentUI.xml | 2120 +++-------------- .../Demo/Shared/Pages/Lab/IssueTester.razor | 30 +- .../SelectMultipleWithFunctions.razor | 6 +- .../Demo/Shared/Pages/Select/SelectPage.razor | 8 +- examples/Demo/Shared/SampleData/DataSource.cs | 18 +- examples/Demo/Shared/SampleData/Person.cs | 5 +- .../Components/List/FluentOption.razor.cs | 8 +- src/Core/Components/List/ListComponentBase.cs | 23 +- 8 files changed, 429 insertions(+), 1789 deletions(-) diff --git a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml index f4c2fffcbc..b255119c53 100644 --- a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml +++ b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml @@ -209,16 +209,6 @@ Defaults to - - - displayed at the start of anchor content. - - - - - displayed at the end of anchor content. - - Gets or sets the content to be rendered inside the component. @@ -258,37 +248,6 @@ Gets or sets the content to be rendered inside the component. - - - Gets or sets the width of the component. - - - - - Gets or sets the height of the component. - - - - - Gets or sets the tooltip to display when hovering over the icon. - - - - - Gets or sets the icon to be displayed when the badge is cancellable. - By default, a small cross icon is displayed. - - - - - Event callback for when the badge is clicked. - - - - - Event callback for when the badge icon is clicked. - - The associated web component. @@ -639,30 +598,14 @@ Defaults to - - - Background color of this button (overrides the property). - Set the value "rgba(0, 0, 0, 0)" to display a transparent button. - - - - - Color of the font (overrides the property). - - - - - Display a progress ring and disable the button. - - - displayed at the start of button content. + displayed to the left of button content. - displayed at the end of button content. + displayed to the right of button content. @@ -680,11 +623,6 @@ Command executed when the user clicks on the button. - - - Constructs an instance of . - - @@ -704,7 +642,7 @@ - + @@ -848,22 +786,11 @@ for this column. - - - An optional CSS style specification. If specified, this is included in the style attribute of header and grid cells - for this column. - - If specified, controls the justification of header and grid cells for this column. - - - If true, generate a title attribute for the cell contents - - An optional template for this column's header cell. If not specified, the default header template @@ -920,12 +847,6 @@ The current . The data for the row being rendered. - - - Overridden by derived components to provide the raw content for the column's cells. - - The data for the row being rendered. - Gets or sets a that will be rendered for this column's header cell. @@ -1172,16 +1093,6 @@ Optionally defines a class to be applied to a rendered row. - - - Optionally defines a style to be applied to a rendered row. - - - - - If specified, grids render this fragment when there is no content. - - Constructs an instance of . @@ -1215,11 +1126,6 @@ - - - Gets or sets the reference to the item that holds this cell's values - - Gets or sets the cell type. See @@ -1242,20 +1148,14 @@ Gets or sets the owning component - - - Gets or sets the reference to the item that holds this row's values - - Gets or sets the index of this row - When FluentDataGrid is virtualized, this value is not used - String that gets applied to the css gridTemplateColumns attribute for the row + String that gets applied to the the css gridTemplateColumns attribute for the row @@ -1605,7 +1505,7 @@ - Type style for the day (numeric or 2-digits). + Format style for the day (numeric or 2-digits). @@ -1799,20 +1699,6 @@ - - - - - - - - - - - - Prevents scrolling outside of the dialog while it is shown. - - Indicates the element is modal. When modal, user mouse interaction will be limited to the contents of the element by a modal @@ -1824,11 +1710,6 @@ Gets or sets if the dialog is hidden - - - The event callback invoked when change. - - Indicates that the dialog should trap focus. @@ -1856,7 +1737,7 @@ - Used when not calling the to show a dialog. + Used when not calling the to show a dialog @@ -1864,159 +1745,12 @@ The event callback invoked to return the dialog result. - - - - - - - - - Shows the dialog - - - - - Hides the dialog - - - - - Toggle the primary action button - - - - - - Toggle the secondary action button - - - - - - Closes the dialog with a cancel result. - - - - - - Closes the dialog with a cancel result. - - - - - - - Closes the dialog with a OK result. - - - - - - Closes the dialog with a OK result. - - - - Closes the dialog - - - - - - - - - - - - - - - - - - - - - - - - - - - Gets or sets the content to be rendered inside the component. - - - - - - - - - - - - - - When true, the footer is visible. - Default is True. - - - - - Gets or sets the content to be rendered inside the component. - - - - - - - - - - - - - - - - - - - - - - - - - - When true, the header is visible. - Default is True. - - - - - When true, shows the dismiss button in the header. - If defined, this value will replace the one defined in the . - - - - - Gets or sets the content to be rendered inside the component. - - - - - - - - - + Constructs an instance of . @@ -2036,42 +1770,22 @@ Determines if the dialog is modal. Defaults to true. - Obscures the area around the dialog. - - - - - Determines if a modal dialog is dismissible by clicking - outside the dialog. Defaults to false. + When true, clicking outside the dialog will dismiss the dialog. - - - Prevents scrolling outside of the dialog while it is shown. - to use - - Indicates if dialog should trap focus. - Defaults to true. + Indicates that the dialog should trap focus. - Show the title in the header. - Defaults to true. + When true, shows the title in the header. - Show the dismiss button in the header. - Defaults to true. - - - - - Title of the dismiss button, display in a tooltip. - Defaults to "Close". + When true, shows the dismiss button in the header. @@ -2079,21 +1793,11 @@ Text to display for the primary action. - - - When true, primary action's button is enabled. - - Text to display for the secondary action. - - - When true, secondary action's button is enabled. - - Width of the dialog. Must be a valid CSS width value like "600px" or "3em" @@ -2125,11 +1829,6 @@ The value that labels an interactive element. - - - The type of dialog. - - Gets whether the primary button is displayed or not. Depends on PrimaryAction having a value. @@ -2234,50 +1933,35 @@ - - - - - - - - - - - /> - - - - - - - - - - - - - - - - - - - - - - - - + + + A event that will be invoked when showing a dialog with a custom component + - - + + + Shows the standard with the given parameters."/> + + The componente that receives the callback + Name of the callback function + that holds the content to display - - + + + Shows a custom splash screen dialog with the given parameters."/> + + The componente that receives the callback + Name of the callback function + that holds the content to display - - + + + Shows a splash screen of the given type with the given parameters."/> + + The type of the component to show + The componente that receives the callback + Name of the callback function + that holds the content to display @@ -2326,204 +2010,46 @@ Parameters to pass to component being displayed. - + - Shows a success message box. Does not have a callback function. + Shows a panel with the dialog component type as the body, + passing the specified - The message to display. - The title to display on the dialog. + Parameters to pass to component being displayed. - + - Shows a warning message box. Does not have a callback function. + Shows a panel with the dialog component type as the body, + passing the specified - The message to display. - The title to display on the dialog. + Type of component to display. + Parameters to pass to component being displayed. - + - Shows an error message box. Does not have a callback function. + Shows a dialog with the component type as the body, + passing the specified - The message to display. - The title to display on the dialog. + Parameters to pass to component being displayed. - + - Shows an information message box. Does not have a callback function. + Shows a dialog with the component type as the body, + passing the specified - The message to display. - The title to display on the dialog. + Type of component to display. + Content to pass to component being displayed. + Parameters to configure the dialog component. - + - Shows a confirmation message box. Has a callback function which returns boolean - (true=PrimaryAction clicked, false=SecondaryAction clicked). - - The component that receives the callback function. - The callback function. - The message to display. - The text to display on the primary button. - The text to display on the secondary button. - The title to display on the dialog. - - - - Shows a confirmation message box. Has no callback function - (true=PrimaryAction clicked, false=SecondaryAction clicked). - - The message to display. - The text to display on the primary button. - The text to display on the secondary button. - The title to display on the dialog. - - - - Shows a custom message box. Has a callback function which returns boolean - (true=PrimaryAction clicked, false=SecondaryAction clicked). - - Parameters to pass to component being displayed. - - - - Shows the standard with the given parameters. - - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows a custom splash screen dialog with the given parameters. - - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows a splash screen of the given type with the given parameters. - - The type of the component to show - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows the standard with the given parameters. - - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows the standard with the given parameters. - - that holds the content to display - - - - Shows a custom splash screen dialog with the given parameters."/> - - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows a custom splash screen dialog with the given parameters. - - that holds the content to display - - - - Shows a splash screen of the given type with the given parameters. - - The type of the component to show - The component that receives the callback - Name of the callback function - that holds the content to display - - - - Shows a splash screen of the given type with the given parameters. - - The type of the component to show - that holds the content to display - - - - Convenience method to create a for a dialog result. - You can also call EventCallback.Factory.Create directly. + Convenience method to create a for a dialog result. + You can also call EventCallback.Factory.Create directly. - - - A event that will be invoked when showing a dialog with a custom component - - - - - Shows a dialog with the component type as the body, - passing the specified - - Type of content to pass to component being displayed. - Type of component to display. - Content to pass to component being displayed. - Parameters to configure the dialog component. - - - - Shows a dialog with the component type as the body, - passing the specified - - Type of component to display. - Content to pass to component being displayed. - Parameters to configure the dialog component. - - - - Shows a dialog with the component type as the body. - - Type of component to display. - Parameters to configure the dialog component. - - - - Updates a dialog. - - Type of content to pass to component being displayed. - Id of the dialog to update. - Parameters to configure the dialog component. - - - - Shows a panel with the dialog component type as the body - - Type of content to pass to component being displayed. - Type of component to display. - Content to pass to component being displayed. - Parameters to configure the dialog component. - - - - Shows a panel with the dialog component type as the body - - Type of component to display. - Content to pass to component being displayed. - Parameters to configure the dialog component. - - - - Shows a panel with the dialog component type as the body - - Type of component to display. - Parameters to configure the dialog component. - A event that will be invoked when showing a dialog with a custom component @@ -2687,14 +2213,8 @@ - FluentUI Emoji content. - - - - - Please use the constructor including parameters. + FluentUI Icon content. - @@ -2913,11 +2433,6 @@ List of delimiters chars. Example: " ,;". - - - If true, highlights the text until the next regex boundary - - Description: Scroll speed in pixels per second @@ -3015,12 +2530,6 @@ FluentUI Icon content. - - - Please use the constructor including parameters. - - - Initializes a new instance of the class. @@ -3350,128 +2859,6 @@ Gets or sets the content to be rendered inside the component. - - - Initializes a new instance of the class. - - - - - - - - - - - Sets the placeholder value of the element, generally used to provide a hint to the user. - - - - - For , this property must be True. - Set the property to 1 to select just one item. - - - - - Gets or sets the visual appearance. See - - - - - Filter the list of options (items), using the text encoded by the user. - - - - - Gets or sets the style applied to all of the component. - - - - - Gets or sets the css class applied to all of the component. - - - - - Gets or sets the number of maximum options (items) returned by . - Default value is 9. - - - - - Gets or sets the maximum number of options (items) selected. - Exceeding this value, the user must delete some elements in order to select new ones. - See the . - - - - - Gets or sets the message displayed when the is reached. - - - - - Template for the items. - - - - - Template for the items. - - - - - Footer content, placed at the top of the popup panel. - - - - - Footer content, placed at the bottom of the popup panel. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Gets or sets if the element is auto completes. See @@ -3498,14 +2885,21 @@ Gets or sets the visual appearance. See + + + Width style + + + + + Height style + + The maximum number of options that should be visible in the listbox scroll area. - - - Gets or sets if the element is disabled @@ -3539,75 +2933,6 @@ - - - People picker option component. - - - - - - - - - - - Gets or sets the initials to display if no image is provided. - Byt default, the first letters of the is used. - - - - - Gets or sets the name to display. - - - - - Gets or sets the content to display under the . - - - - - Gets or sets the image to display, in replacement of the initials. - - - - - Gets or sets the size of the image. - - - - - / The status to show. See for options. - - - - - The title to show on hover. If not provided, the status will be used. - - - - - Gets or sets the size to use. - Default is ExtraSmall. - - - - - Gets or sets the event raised when the user clicks on the dismiss button. - - - - - Gets or sets the title of the dismiss button. - - - - - - - - The open attribute. @@ -3651,16 +2976,6 @@ - - - Width of the component. - - - - - Height of the component or of the popup panel. - - Text used on aria-label attribute. @@ -3684,8 +2999,7 @@ - Function used to determine which value to return for the selected item. - Only for and components. + Function used to determine which text to return for the selected item. @@ -3763,7 +3077,7 @@ - + @@ -3775,600 +3089,169 @@ - - - - - - - - - uses this event to return the list of items to display. - - - - - - Text to search. - - - - - List of items to display. - - - - - Gets or sets the header content. - - - - - Gets or sets the subheader content. - - - - - Gets or sets the height of the header (in pixels). - - - - - Gets or set the tite of the navigation menu - - - - - Gets or sets the content of the navigation menu - - - - - Gets or sets the content of the body - - - - - Gets or sets the height of the header (in pixels). - - - - - Gets or sets the content to be rendered inside the component. - - - - - - - - - - - - - - Identifier of the source component clickable by the end user. - - - - - Gets or sets the automatic trigger. See - Possible values are None (default), Left, Middle, Right, Back, Forward - - - - - Gets or sets the Menu status. - - - - - Gets or sets the content to be rendered inside the component. - - - - - Menu position (left or right). - - - - - Width of this menu. - - - - - Raised when the property changed. - - - - - Draw the menu below the component clicked (true) or - using the mouse coordinates (false). - - - - - - - - Close the menu. - - - - - - Method called from JavaScript to get the current mouse ccordinates. - - - - - - - - Dispose this menu. - - - - - Gets or sets the owning FluentMenu. - - - - - Gets or sets the menu item label. - - - - - Gets or sets if the element is disabled. - - - - - The expanded state of the element. - - - - - The role of the element. - - - - - Gets or sets if the element is checked. - - - - - Gets or sets the content to be rendered inside the component. - - - - - List of sub-menu items. - - - - - Event raised when the user click on this item. - - - - - - - - - - - - - - - - - The type of message bar. Default is MessageType.MessageBar. See for more details. - - - - - The actual message instance shown in the message bar. - - - - - The message to be shown whennot using the MessageService methods - - - - - Intent of the message bar. Default is MessageIntent.Info. See for more details. - - - - - Icon to show in the message bar based on the intent of the message. See for more details. - - - - - Visibility of the message bar. Default is true. - - - - - Most important info to be shown in the message bar. - - - - - Time on which the message was created. Default is DateTime.Now. Onlu used when MessageType is Notification. - - - - - The color of the icon. Only applied when intent is MessageBarIntent.Custom - Default is Color.Accent - - - - - A link can be shown after the message. - - - - - Button to show as primary action. - - - - - Button to show as secondary action. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Display only messages for this section. - - - - - Displays messages as a single line (with the message only) - or as a card (with the detailed message). - - - - - Maximum number of messages displayed. Rest is stored in memory to be displayed when an shown message is closed. - Default value is 5 - Set a value equal to or less than zero, to display all messages for this (or all categories if not set). - - - - - Display the newest messages on top (true) or on bottom (false). - - - - - Clear all (shown and stored) messages when the user navigates to a new page. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Intent of the message bar. Default is MessageIntent.Info. - See for more details. - - - - - Indication of in which message bar the message needs to be shown. Default is null. - - - - - Most important info to be shown in the message bar. - - - - - Message to be shown in the message bar. - - - - - Link to be shown in the message bar (after the body). - - - - - Close the message bar. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - + - Identification of the the message belongs to. + Gets or sets the header content. - + - The timestamp of the message. + Gets or sets the subheader content. - + - Icon to show in the message bar based on the intent of the message. See for more details. + Gets or sets the height of the header (in pixels). - + - Most important info to be shown in the message bar. + Gets or set the tite of the navigation menu - + - Message to be shown in the message bar after the title. + Gets or sets the content of the navigation menu - + - Link to be shown in the message bar after the title/message. + Gets or sets the content of the body - + - Action to be executed when the message bar is closed. + Gets or sets the height of the header (in pixels). - + - Action to be executed for the primary button. + Gets or sets the content to be rendered inside the component. - + + + + + + + + + + - Action to be executed for the secondary button. + Identifier of the source component clickable by the end user. - + - Intent of the message bar. Default is MessageIntent.Info. + Gets or sets the automatic trigger. See + Possible values are None (default), Left, Middle, Right, Back, Forward - + - Remove the message bar after navigation. + Gets or sets the Menu status. - + - Timeout in seconds after which the message bar is removed. Default is null. + Gets or sets the content to be rendered inside the component. - - - - - - - - - - - - - - - - - - - - - - + - Gets all messages. + Menu position (left or right). - + - Retrieve messages to show in the message bar. + Width of this menu. - Number of messages to get (defaults to 5) - Optional section to retrieve messages for - - + - Show a message based on the provided parameters in a message bar. + Raised when the property changed. - Main info - - + - Show a message based on the provided parameters in a message bar. + Draw the menu below the component clicked (true) or + using the mouse coordinates (false). - Main info - Intent of the message - - + + + + - Show a message based on the provided parameters in a message bar. + Close the menu. - Main info - Intent of the message - Section to show the messagebar in - + - Show a message based on the provided options in a message bar. + Method called from JavaScript to get the current mouse ccordinates. - Message options + + - + - Show a message based on the provided parameters in a message bar. + Dispose this menu. - Main info - - + - Show a message based on the provided parameters in a message bar. + Gets or sets the owning FluentMenu. - Main info - Intent of the message - - + - Show a message based on the provided parameters in a message bar. + Gets or sets the menu item label. - Main info - Intent of the message - Section to show the messagebar in - - + - Show a message based on the provided message options in a message bar. + Gets or sets if the element is disabled. - Message options - - + - Clear all messages (per section, if provided) from the message bar. + The expanded state of the element. - Optional section - + - Remove a message from the message bar. + The role of the element. - Message to remove - - + + + Gets or sets if the element is checked. + - - + + + Gets or sets the content to be rendered inside the component. + - + - Remove all messages (per section, if provided) from the message bar. + List of sub-menu items. - Optional section - + - Count the number of messages (per section, if provided) in the message bar . + Event raised when the user click on this item. - Optional section - int + + + @@ -4746,9 +3629,6 @@ - - - @@ -4888,12 +3768,6 @@ Gets or sets the id of the component the popover is positioned relative to - - - The default horizontal position of the region relative to the anchor element - Default is unset. See - - Gets or sets popover opened state @@ -4935,20 +3809,22 @@ Child content of component, the content that the badge will be applied to. - + - The title to show on hover the component. - If not provided, the will be used. + The status to show. See for options. + Default is Available - + - The status to show. See for options. + Left position of the badge (percentage as number). + Default value is 50. - + - The title to show on hover the status. If not provided, the status will be used. + Bottom position of the badge (percentage as number). + Default value is -10. @@ -4959,7 +3835,7 @@ - Gets or sets the size to use. + Gets or sets the to use. Default is Small. @@ -5096,12 +3972,6 @@ - - - - - - Allows associating a datalist to the element by id. @@ -5162,21 +4032,6 @@ Gets or sets if the skeleton is shimmered - - - Gets or sets the width of the skeleton - - - - - Gets or sets the height of the skeleton - - - - - Gets or sets whether the skeleton is visible - - Gets or sets the content to be rendered inside the component. @@ -5393,11 +4248,6 @@ True to let the user edit the property. - - - Render the tab content only when the tab is selected. - - Customized content of this tab panel. @@ -5415,7 +4265,7 @@ - If this tab is outside of vistible tab panel area. + Gets if this component is out of panel. @@ -5581,12 +4431,6 @@ Gets or sets the content to be rendered inside the component. - - - - - - Gets or sets the text filed type. See @@ -5632,12 +4476,6 @@ Gets or sets the content to be rendered inside the component. - - - Specifies whether a form or an input field should have autocomplete "on" or "off" or another value. - An Id value must be set to use this property. - - Closes the toast @@ -6002,263 +4840,55 @@ - Gets or sets the content to be rendered inside the component. - - - - - Gets or sets a reference to the list of registered services. - - - https://github.com/dotnet/aspnetcore/issues/24193 - - - - - Gets a reference to the tooltip service (if registered). - - - - - Gets the default tooltip options. - - - - - Use ITooltipService to create the tooltip, if this service was injected. - If the is dynamic, set this to false. - Default, true. - - - - - Gets or sets if the tooltip is visible - - - - - Required. Gets or sets the control identifier associated with the tooltip. - - - - - Gets or sets the delay (in milliseconds). Default is 300. - - - - - Gets or sets the tooltip's position. See . - Don't set this if you want the tooltip to use the best position. - - - - - Gets or sets the maximum width of tooltip panel. - - - - - Controls when the tooltip updates its position, default is anchor which only updates when - the anchor is resized. auto will update on scroll/resize events. - Corresponds to anchored-region auto-update-mode. - - - - - Gets or sets whether the horizontal viewport is locked - - - - - Gets or sets whether the vertical viewport is locked - - - - - Gets or sets the content to be rendered inside the component. - - - - - Callback for when the tooltip is dismissed - - - - - - - - - - - - - - - - - - - - Service for managing tooltips. - - - - - Action that is invoked when the tooltip list is updated. - - - - - Gets the list of tooltips currently registered with the service. - - - - - Gets the global options for tooltips. - - - - - Adds a tooltip to the service. - - - - - - clears all tooltips from the service. - - - - - removes a tooltip from the service. - - Identifier of the tooltip - - - - Global options for tooltips. - - - - - Default delay (in milliseconds). - - - - - Gets or sets the delay (in milliseconds). Default is 300. - - - - - Gets or sets the default tooltip's position. - See - - - - - Gets or sets the default maximum width of tooltip panel. - Default is 500px. - - - - - Gets or sets whether the horizontal viewport is locked - - - - - Gets or sets whether the vertical viewport is locked - - - - - Options for a tooltip. - - - - - Gets or sets the unique identifier of the tooltip. - - - - - Gets or sets the anchor identifier of the tooltip. + Gets or sets the content to be rendered inside the component. - + - Gets or sets the tooltip content. + Gets or sets if the tooltip is visible - + - Gets or sets the tooltip panel width. + Gets or sets the anchor - + - Gets or sets the delay (in milliseconds). Default is 300. + Gets or sets the delay (in miliseconds) - + Gets or sets the tooltip's position. See - - - Callback for when the tooltip is dismissed - - - + - Gets or sets if the tooltip is visible + Controls when the tooltip updates its position, default is anchor which only updates when + the anchor is resized. auto will update on scroll/resize events. + Corresponds to anchored-region auto-update-mode. - - - - + - Initializes a new instance of the class. + Gets or sets wether the horizontal viewport is locked - + - Initializes a new instance of the class. + Gets or sets wether the vertical viewport is locked - Default global options - - - - - - - - - - - - - - - - - - - - - - + - Clears all tooltips from the service. + Gets or sets the content to be rendered inside the component. - - + + + Callback for when the tooltip is dismissed + @@ -9385,31 +8015,6 @@ A sticky header row. - - - The type of . - - - - - A normal dialog. - - - - - A dialog shown as a message box. - - - - - A dialog shown as a panel. - - - - - A dialog shown as a splash screen. - - Defines the role of the divider. @@ -9697,32 +8302,27 @@ - No positions set. + The anchored region position is unset. - Position at the start of the anchor. + The anchored region is positioned at the start of the anchor. - Position at the end of the anchor. + The anchored region is positioned at the end of the anchor. - Position on the left of the anchor. + The anchored region is positioned in the left of the anchor. - Position on the right of the anchor. - - - - - Position at the center of the anchor. + The anchored region is positioned in the right of the anchor. @@ -9929,37 +8529,6 @@ Informs about a custom event or operation. - - - - - - - - - - - - - - - - - - - - - - - - To be displayed in a at the top of screen, dialog or card. - - - - - To be displayed in a notification center. - - Defines the possible options for mouse buttons. @@ -10008,18 +8577,12 @@ - - - - - - @@ -10029,24 +8592,15 @@ - - - - - - - - - @@ -10056,9 +8610,6 @@ - - - @@ -10068,9 +8619,6 @@ - - - @@ -10495,22 +9043,17 @@ - No position set. + No positioning set - Position at the top. + Position at the top - Position at the bottom. - - - - - Position at the center. + Position at the bottom @@ -10526,6 +9069,30 @@ true if both sets render the same attributes; otherwise, false. + + + Used to convert a CssBuilder into a null when it is empty. + Usage: class=null causes the attribute to be excluded when rendered. + + + string + + + + Used to convert a StyleBuilder into a null when it is empty. + Usage: style=null causes the attribute to be excluded when rendered. + + + string + + + + Used to convert a string.IsNullOrEmpty into a null when it is empty. + Usage: attribute=null causes the attribute to be excluded when rendered. + + + string + Extension methods for . @@ -10615,36 +9182,6 @@ - - - The text to show for the button - - - - - The function to call when the link is clicked - - - - - The text to show for the link - - - - - The address to navigate to when the link is clicked - - - - - The target window or frame to open the link in - - - - - The function to call when the link is clicked - - Represents an event that you may subscribe to. This differs from normal C# events in that the handlers @@ -10681,12 +9218,6 @@ Defines the global Fluent UI Blazor component library services configuration - - - Gets or sets a value indicating whether the library should use the TooltipServiceProvider. - If set to true, add the FluentTooltipProvider component at end of the MainLayout.razor page. - - A strongly-typed resource class, for looking up localized strings, etc. @@ -10799,16 +9330,32 @@ Looks up a localized string similar to {0} years ago. - + - Initializes a new instance of the class. + Creates a CssBuilder used to define conditional CSS classes used in a component. + Call Build() to return the completed CSS Classes as a string. + + + + + + Creates an Empty CssBuilder used to define conditional CSS classes used in a component. + Call Build() to return the completed CSS Classes as a string. - Initializes a new instance of the class. + Creates a CssBuilder used to define conditional CSS classes used in a component. + Call Build() to return the completed CSS Classes as a string. + + + + + + Adds a raw string to the builder that will be concatenated with the next class or value added to the builder. - The user classes to include at the end. + + CssBuilder @@ -10825,88 +9372,68 @@ Condition in which the CSS Class is added. CssBuilder - + Adds a conditional CSS Class to the builder with space separator. CSS Class to conditionally add. - Condition in which the CSS Class is added. + Nullable condition in which the CSS Class is added. CssBuilder - - - Finalize the completed CSS Classes as a string. - - string - - - - ToString should only and always call Build to finalize the rendered string. - - - - + - Adds a raw string to the builder that will be concatenated with the next classes or value added to the builder. + Adds a conditional CSS Class to the builder with space separator. - - StyleBuilder + CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Initializes a new instance of the class. + Adds a conditional CSS Class to the builder with space separator. + Function that returns a CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Adds a conditional in-line style to the builder with space separator and closing semicolon.. + Adds a conditional CSS Class to the builder with space separator. - - - Style to add - StyleBuilder + Function that returns a CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Adds a conditional in-line style to the builder with space separator and closing semicolon.. + Adds a conditional nested CssBuilder to the builder with space separator. - - - Style to conditionally add. - Condition in which the style is added. - StyleBuilder + CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Adds a conditional in-line style to the builder with space separator and closing semicolon.. + Adds a conditional CSS Class to the builder with space separator. - - - Style to conditionally add. - Condition in which the style is added. - StyleBuilder + CSS Class to conditionally add. + Condition in which the CSS Class is added. + CssBuilder - + - Finalize the completed Style as a string. + Adds a conditional CSS Class when it exists in a dictionary to the builder with space separator. + Null safe operation. - string + Additional Attribute splat parameters + CssBuilder - + - Finalize the completed Style as a string. + Finalize the completed CSS Classes as a string. string - - - Adds a raw string to the builder that will be concatenated with the next style or value added to the builder. - - - - - StyleBuilder - Flags for a member that is JSON (de)serialized. @@ -10933,7 +9460,7 @@ Inspired from https://github.com/MudBlazor - + Splits the text into fragments, according to the text to be highlighted @@ -10942,19 +9469,32 @@ The texts to be highlighted Regex expression that was used to split fragments. Whether it's case sensitive or not - If true, splits until the next regex boundary - + + + Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string. + + + + + + + Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string. + + + + - Initializes a new instance of the class. + Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string. - + - Initializes a new instance of the class. + Creates a StyleBuilder used to define conditional in-line style used in a component. Call Build() to return the completed style as a string. - The user styles to include at the end. + + @@ -10962,6 +9502,13 @@ + + + Adds a raw string to the builder that will be concatenated with the next style or value added to the builder. + + + StyleBuilder + Adds a conditional in-line style to the builder with space separator and closing semicolon.. @@ -10979,6 +9526,15 @@ Condition in which the style is added. StyleBuilder + + + Adds a conditional in-line style to the builder with space separator and closing semicolon.. + + + Style to conditionally add. + Condition in which the style is added. + + Adds a conditional in-line style to the builder with space separator and closing semicolon.. @@ -10988,25 +9544,69 @@ Condition in which the style is added. StyleBuilder - + - Finalize the completed Style as a string. + Adds a conditional in-line style to the builder with space separator and closing semicolon.. - string + + Style to conditionally add. + Condition in which the style is added. + StyleBuilder - + - ToString should only and always call Build to finalize the rendered string. + Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon. - + Style Builder to conditionally add. + StyleBuilder - + - Adds a raw string to the builder that will be concatenated with the next style or value added to the builder. + Adds a conditional nested StyleBuilder to the builder with separator and closing semicolon. - + Style Builder to conditionally add. + Condition in which the style is added. + StyleBuilder + + + + Adds a conditional in-line style to the builder with space separator and closing semicolon.. + + Style Builder to conditionally add. + Condition in which the styles are added. + StyleBuilder + + + + Adds a conditional in-line style to the builder with space separator and closing semicolon.. + A ValueBuilder action defines a complex set of values for the property. + + + + + + + + Adds a conditional in-line style when it exists in a dictionary to the builder with separator. + Null safe operation. + + Additional Attribute splat parameters StyleBuilder + + + Finalize the completed Style as a string. + + string + + + + Adds a space separated conditional value to a property. + + + + + Custom -derived type for the CheckRGBString method. diff --git a/examples/Demo/Shared/Pages/Lab/IssueTester.razor b/examples/Demo/Shared/Pages/Lab/IssueTester.razor index e8853c9642..6742a59492 100644 --- a/examples/Demo/Shared/Pages/Lab/IssueTester.razor +++ b/examples/Demo/Shared/Pages/Lab/IssueTester.razor @@ -1 +1,29 @@ -@page "/IssueTester" \ No newline at end of file +@page "/IssueTester" + + +@inject DataSource Data + + + +

+ Selected value: @SelectedValue
+

+ + +@code { + string? SelectedValue = "4"; + + async Task ValueChangedHandler(string? value) + { + Console.WriteLine($"Value: {value}"); + SelectedValue = value; + } +} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Select/Examples/SelectMultipleWithFunctions.razor b/examples/Demo/Shared/Pages/Select/Examples/SelectMultipleWithFunctions.razor index 027eef572b..4250bffd57 100644 --- a/examples/Demo/Shared/Pages/Select/Examples/SelectMultipleWithFunctions.razor +++ b/examples/Demo/Shared/Pages/Select/Examples/SelectMultipleWithFunctions.razor @@ -1,5 +1,4 @@ @inject DataSource Data -
!!Experimental!!

All people whose first name starts with a "J" are initialy selected through the OptionSelected (Func delegate) parameter.

All people with a birth year greater than 1990 are disabled through the OptionDisabled (Func delegate) parameter.

@@ -21,6 +20,11 @@

Selected value: @SelectedValue
Reflects the value of the first selected option
+ + This value is not always accurate as a user can potentially deselect all enabled options. A browser will not return the value + of a disabled item so the last selected non-disabled value will be returned even if it is not selected anymore! + +

Selected options: @(SelectedOptions != null ? String.Join(", ", SelectedOptions.Select(i => i.FirstName)) : "")
diff --git a/examples/Demo/Shared/Pages/Select/SelectPage.razor b/examples/Demo/Shared/Pages/Select/SelectPage.razor index 31dbc08141..10bef06bf2 100644 --- a/examples/Demo/Shared/Pages/Select/SelectPage.razor +++ b/examples/Demo/Shared/Pages/Select/SelectPage.razor @@ -11,9 +11,6 @@ Fluent UI design system.

- - -

Examples

@@ -32,4 +29,7 @@ - \ No newline at end of file + + +

API Documentation

+ \ No newline at end of file diff --git a/examples/Demo/Shared/SampleData/DataSource.cs b/examples/Demo/Shared/SampleData/DataSource.cs index 8f6c46067d..4c8a004a7d 100644 --- a/examples/Demo/Shared/SampleData/DataSource.cs +++ b/examples/Demo/Shared/SampleData/DataSource.cs @@ -71,15 +71,15 @@ public Task GetCountriesAsync() private readonly static Person[] _people = new[] { - new Person ( PersonId: 1, FirstName : "Jean", LastName : "Martin", CountryCode : "fr", BirthDate : new DateOnly(1985, 3, 16), Picture: ImageFaces[0] ), - new Person ( PersonId : 2, FirstName : "António", LastName : "Langa", CountryCode : "mz", BirthDate : new DateOnly(1991, 12, 1), Picture: ImageFaces[1] ), - new Person ( PersonId : 3, FirstName : "Julie", LastName : "Smith", CountryCode : "au", BirthDate : new DateOnly(1958, 10, 10), Picture: ImageFaces[2] ), - new Person ( PersonId : 4, FirstName : "Nur", LastName : "Sari", CountryCode : "id", BirthDate : new DateOnly(1922, 4, 27), Picture: ImageFaces[3] ), - new Person ( PersonId : 5, FirstName : "Jose", LastName : "Hernandez", CountryCode : "mx", BirthDate : new DateOnly(2011, 5, 3), Picture: ImageFaces[4] ), - new Person ( PersonId : 6, FirstName : "Bert", LastName : "de Vries", CountryCode : "nl", BirthDate : new DateOnly(1999, 6, 9), Picture: ImageFaces[5] ), - new Person ( PersonId : 7, FirstName : "Jaques", LastName : "Martin", CountryCode : "fr", BirthDate : new DateOnly(2002, 10, 20), Picture: ImageFaces[6] ), - new Person ( PersonId : 8, FirstName : "Elizabeth", LastName : "Johnson", CountryCode : "gb", BirthDate : new DateOnly(1971, 11, 24), Picture: ImageFaces[7] ), - new Person ( PersonId : 9, FirstName : "Jakob", LastName : "Berger", CountryCode : "de", BirthDate : new DateOnly(1971, 4, 21), Picture: string.Empty ) + new Person ( PersonId: 1, FirstName : "Jean", LastName : "Martin", CountryCode : "FR", BirthDate : new DateOnly(1985, 3, 16), Picture: ImageFaces[0] ), + new Person ( PersonId : 2, FirstName : "António", LastName : "Langa", CountryCode : "MZ", BirthDate : new DateOnly(1991, 12, 1), Picture: ImageFaces[1] ), + new Person ( PersonId : 3, FirstName : "Julie", LastName : "Smith", CountryCode : "AU", BirthDate : new DateOnly(1958, 10, 10), Picture: ImageFaces[2] ), + new Person ( PersonId : 4, FirstName : "Nur", LastName : "Sari", CountryCode : "ID", BirthDate : new DateOnly(1922, 4, 27), Picture: ImageFaces[3] ), + new Person ( PersonId : 5, FirstName : "Jose", LastName : "Hernandez", CountryCode : "MX", BirthDate : new DateOnly(2011, 5, 3), Picture: ImageFaces[4] ), + new Person ( PersonId : 6, FirstName : "Bert", LastName : "de Vries", CountryCode : "NL", BirthDate : new DateOnly(1999, 6, 9), Picture: ImageFaces[5] ), + new Person ( PersonId : 7, FirstName : "Jaques", LastName : "Martin", CountryCode : "BE", BirthDate : new DateOnly(2002, 10, 20), Picture: ImageFaces[6] ), + new Person ( PersonId : 8, FirstName : "Elizabeth", LastName : "Johnson", CountryCode : "GB", BirthDate : new DateOnly(1971, 11, 24), Picture: ImageFaces[7] ), + new Person ( PersonId : 9, FirstName : "Jakob", LastName : "Berger", CountryCode : "D", BirthDate : new DateOnly(1971, 4, 21), Picture: string.Empty ) }; public class MonthItem diff --git a/examples/Demo/Shared/SampleData/Person.cs b/examples/Demo/Shared/SampleData/Person.cs index 16cc827fe4..3fc98eba15 100644 --- a/examples/Demo/Shared/SampleData/Person.cs +++ b/examples/Demo/Shared/SampleData/Person.cs @@ -1,6 +1,9 @@ namespace FluentUI.Demo.Shared.SampleData; -public record Person(int PersonId, string CountryCode, string FirstName, string LastName, DateOnly BirthDate, string Picture); +public record Person(int PersonId, string CountryCode, string FirstName, string LastName, DateOnly BirthDate, string Picture) +{ + public override string ToString() => $"{FirstName} {LastName} ({BirthDate}, {CountryCode})"; +} public class SimplePerson { diff --git a/src/Core/Components/List/FluentOption.razor.cs b/src/Core/Components/List/FluentOption.razor.cs index b44620394a..806f34d6d1 100644 --- a/src/Core/Components/List/FluentOption.razor.cs +++ b/src/Core/Components/List/FluentOption.razor.cs @@ -55,7 +55,10 @@ protected override Task OnInitializedAsync() protected override async Task OnAfterRenderAsync(bool firstRender) { - if (firstRender && Selected && InternalListContext != null && InternalListContext.ValueChanged.HasDelegate) + if (firstRender && Selected && + InternalListContext != null && + InternalListContext.ValueChanged.HasDelegate && + InternalListContext.ListComponent.Multiple) { await InternalListContext.ValueChanged.InvokeAsync(Value); } @@ -82,7 +85,8 @@ protected async Task OnSelectHandler() else { if (InternalListContext != null && - InternalListContext.ValueChanged.HasDelegate) + InternalListContext.ValueChanged.HasDelegate && + InternalListContext.ListComponent.Items is null) { await InternalListContext.ValueChanged.InvokeAsync(Value); } diff --git a/src/Core/Components/List/ListComponentBase.cs b/src/Core/Components/List/ListComponentBase.cs index 53416db353..88d52c797a 100644 --- a/src/Core/Components/List/ListComponentBase.cs +++ b/src/Core/Components/List/ListComponentBase.cs @@ -43,7 +43,7 @@ protected string? InternalValue Value = value; // Raise Changed events in another thread - Task.Run(() => RaiseChangedEventsAsync()); + RaiseChangedEventsAsync().ConfigureAwait(false); } } } @@ -252,7 +252,7 @@ protected virtual bool GetOptionSelected(TOption item) { return false; } - else if (OptionSelected != null) + else if (OptionSelected != null && _selectedOptions.Contains(item)) { return OptionSelected.Invoke(item); } @@ -343,7 +343,10 @@ protected virtual async Task OnSelectedItemChangedHandlerAsync(TOption? item) AddSelectedItem(item); await RaiseChangedEventsAsync(); } - + if (!Equals(item, SelectedOption)) + { + SelectedOption = item; + } } else { @@ -371,14 +374,12 @@ protected virtual async Task RaiseChangedEventsAsync() { await SelectedOptionChanged.InvokeAsync(SelectedOption); } - - if (ValueChanged.HasDelegate) - { - await ValueChanged.InvokeAsync(InternalValue); - } } - - StateHasChanged(); + if (ValueChanged.HasDelegate) + { + await ValueChanged.InvokeAsync(InternalValue); + StateHasChanged(); + } } /// @@ -421,7 +422,7 @@ protected virtual async Task RaiseChangedEventsAsync() })); // Needed in fluent-listbox and fluent-select with mutliple select enabled - if (this is FluentListbox || + if (this is FluentListbox || (this is FluentSelect && Multiple) || (this is FluentAutocomplete && Multiple)) { From f337247021fd4a8f9301fde1720900ff459a334f Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Fri, 6 Oct 2023 09:19:26 +0200 Subject: [PATCH 2/2] Clear out IssueTester Process review remarks --- .../Demo/Shared/Pages/Lab/IssueTester.razor | 28 ------------------- examples/Demo/Shared/SampleData/DataSource.cs | 18 ++++++------ src/Core/Components/List/ListComponentBase.cs | 4 +-- 3 files changed, 11 insertions(+), 39 deletions(-) diff --git a/examples/Demo/Shared/Pages/Lab/IssueTester.razor b/examples/Demo/Shared/Pages/Lab/IssueTester.razor index 6742a59492..d9401fe94d 100644 --- a/examples/Demo/Shared/Pages/Lab/IssueTester.razor +++ b/examples/Demo/Shared/Pages/Lab/IssueTester.razor @@ -1,29 +1 @@ @page "/IssueTester" - - -@inject DataSource Data - - - -

- Selected value: @SelectedValue
-

- - -@code { - string? SelectedValue = "4"; - - async Task ValueChangedHandler(string? value) - { - Console.WriteLine($"Value: {value}"); - SelectedValue = value; - } -} \ No newline at end of file diff --git a/examples/Demo/Shared/SampleData/DataSource.cs b/examples/Demo/Shared/SampleData/DataSource.cs index 4c8a004a7d..acc3f68497 100644 --- a/examples/Demo/Shared/SampleData/DataSource.cs +++ b/examples/Demo/Shared/SampleData/DataSource.cs @@ -71,15 +71,15 @@ public Task GetCountriesAsync() private readonly static Person[] _people = new[] { - new Person ( PersonId: 1, FirstName : "Jean", LastName : "Martin", CountryCode : "FR", BirthDate : new DateOnly(1985, 3, 16), Picture: ImageFaces[0] ), - new Person ( PersonId : 2, FirstName : "António", LastName : "Langa", CountryCode : "MZ", BirthDate : new DateOnly(1991, 12, 1), Picture: ImageFaces[1] ), - new Person ( PersonId : 3, FirstName : "Julie", LastName : "Smith", CountryCode : "AU", BirthDate : new DateOnly(1958, 10, 10), Picture: ImageFaces[2] ), - new Person ( PersonId : 4, FirstName : "Nur", LastName : "Sari", CountryCode : "ID", BirthDate : new DateOnly(1922, 4, 27), Picture: ImageFaces[3] ), - new Person ( PersonId : 5, FirstName : "Jose", LastName : "Hernandez", CountryCode : "MX", BirthDate : new DateOnly(2011, 5, 3), Picture: ImageFaces[4] ), - new Person ( PersonId : 6, FirstName : "Bert", LastName : "de Vries", CountryCode : "NL", BirthDate : new DateOnly(1999, 6, 9), Picture: ImageFaces[5] ), - new Person ( PersonId : 7, FirstName : "Jaques", LastName : "Martin", CountryCode : "BE", BirthDate : new DateOnly(2002, 10, 20), Picture: ImageFaces[6] ), - new Person ( PersonId : 8, FirstName : "Elizabeth", LastName : "Johnson", CountryCode : "GB", BirthDate : new DateOnly(1971, 11, 24), Picture: ImageFaces[7] ), - new Person ( PersonId : 9, FirstName : "Jakob", LastName : "Berger", CountryCode : "D", BirthDate : new DateOnly(1971, 4, 21), Picture: string.Empty ) + new Person ( PersonId: 1, FirstName: "Jean", LastName: "Martin", CountryCode: "FR", BirthDate: new DateOnly(1985, 3, 16), Picture: ImageFaces[0] ), + new Person ( PersonId: 2, FirstName: "António", LastName: "Langa", CountryCode: "MZ", BirthDate: new DateOnly(1991, 12, 1), Picture: ImageFaces[1] ), + new Person ( PersonId: 3, FirstName: "Julie", LastName: "Smith", CountryCode: "AU", BirthDate: new DateOnly(1958, 10, 10), Picture: ImageFaces[2] ), + new Person ( PersonId: 4, FirstName: "Nur", LastName: "Sari", CountryCode: "ID", BirthDate: new DateOnly(1922, 4, 27), Picture: ImageFaces[3] ), + new Person ( PersonId: 5, FirstName: "Jose", LastName: "Hernandez", CountryCode: "MX", BirthDate: new DateOnly(2011, 5, 3), Picture: ImageFaces[4] ), + new Person ( PersonId: 6, FirstName: "Bert", LastName: "de Vries", CountryCode: "NL", BirthDate: new DateOnly(1999, 6, 9), Picture: ImageFaces[5] ), + new Person ( PersonId: 7, FirstName: "Jaques", LastName: "Martin", CountryCode: "BE", BirthDate: new DateOnly(2002, 10, 20), Picture: ImageFaces[6] ), + new Person ( PersonId: 8, FirstName: "Elizabeth", LastName: "Johnson", CountryCode: "GB", BirthDate: new DateOnly(1971, 11, 24), Picture: ImageFaces[7] ), + new Person ( PersonId: 9, FirstName: "Jakob", LastName: "Berger", CountryCode: "D", BirthDate: new DateOnly(1971, 4, 21), Picture: string.Empty ) }; public class MonthItem diff --git a/src/Core/Components/List/ListComponentBase.cs b/src/Core/Components/List/ListComponentBase.cs index 88d52c797a..483d41f34c 100644 --- a/src/Core/Components/List/ListComponentBase.cs +++ b/src/Core/Components/List/ListComponentBase.cs @@ -377,9 +377,9 @@ protected virtual async Task RaiseChangedEventsAsync() } if (ValueChanged.HasDelegate) { - await ValueChanged.InvokeAsync(InternalValue); - StateHasChanged(); + await ValueChanged.InvokeAsync(InternalValue); } + StateHasChanged(); } ///