fluentui-blazor icon indicating copy to clipboard operation
fluentui-blazor copied to clipboard
verified publisher icon microsoft

[dev-v5] fluent-text-suggestion Web Component

Open dvoituron opened this issue 11 months ago • 4 comments

[dev-v5] fluent-text-suggestion Web Component

Add an HTML Web Component to prepare a future FluentUI-Blazor component. This web component is inspired by the Smart Components created by Steve Sanderson.

This web component contains:

  1. An anchor attribute to reference the text field where the suggestion should be displayed.
  2. A value attribute containing the suggestion text to display or to update.
  3. A minlength and delay attribute to configure the suggestion process directly from the JS client.
  4. A shadowQuerySelector attribute to locate the field within another Fluent web component.

Example where the suggestion is updated every 2 seconds, by a JS script. peek_2

<textarea id="my-area" spellcheck="false" />
<fluent-text-suggestion anchor="my-area" value="abc" minlength="3" delay="10" />

<fluent-textarea id="my-field-area" />
<fluent-text-suggestion anchor="my-field-area" shadowQuerySelector="textarea[id='control']" value="abc" />

dvoituron avatar Jan 06 '25 11:01 dvoituron

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

github-actions[bot] avatar Jan 06 '25 11:01 github-actions[bot]

Summary - Unit Tests Code Coverage

Summary
Generated on: 03/10/2025 - 13:26:41
Coverage date: 03/10/2025 - 13:26:34
Parser: Cobertura
Assemblies: 1
Classes: 80
Files: 100
Line coverage: 99.3% (1857 of 1870)
Covered lines: 1857
Uncovered lines: 13
Coverable lines: 1870
Total lines: 8032
Branch coverage: 93.1% (1122 of 1204)
Covered branches: 1122
Total branches: 1204
Method coverage: Feature is only available for sponsors
Tag: 2942_13765803035

Coverage

Microsoft.FluentUI.AspNetCore.Components - 99.3%
Name Line Branch
Microsoft.FluentUI.AspNetCore.Components 99.3% 93.1%
Microsoft.FluentUI.AspNetCore.Components.AdditionalAttributesExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DefaultStyles 100%
Microsoft.FluentUI.AspNetCore.Components.Dialog.MessageBox.FluentMessageBox 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs 100% 92.8%
Microsoft.FluentUI.AspNetCore.Components.DialogInstance 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptions 100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooter 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooterAction 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsHeader 100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult 100% 100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult`1 100%
Microsoft.FluentUI.AspNetCore.Components.DialogService 98.9% 81.4%
Microsoft.FluentUI.AspNetCore.Components.DialogToggleEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FieldSizeExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentAnchorButton 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentAvatar 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentBadge 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentButton 100% 93.1%
Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCounterBadge 100% 96.1%
Microsoft.FluentUI.AspNetCore.Components.FluentDialog 97.4% 89.7%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody 100% 91.6%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogInstance 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider 100% 79.1%
Microsoft.FluentUI.AspNetCore.Components.FluentDivider 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentField 100% 96.5%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldCondition 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionItem 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldConditionOptions 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldExtensions 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFieldParameterSelector 100% 98.7%
Microsoft.FluentUI.AspNetCore.Components.FluentGrid 100% 90%
Microsoft.FluentUI.AspNetCore.Components.FluentGridItem 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1 93.3% 25%
Microsoft.FluentUI.AspNetCore.Components.FluentInputImmediateBase`1 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentJSModule 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentLabel 100%
Microsoft.FluentUI.AspNetCore.Components.FluentLayout 100% 71.4%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutHamburger 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutItem 100% 89.2%
Microsoft.FluentUI.AspNetCore.Components.FluentLink 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentListBase`1 93.7% 94.7%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerExtensions 100%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerInternal 100%
Microsoft.FluentUI.AspNetCore.Components.FluentOption 91.6% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentProgressBar 100% 95.4%
Microsoft.FluentUI.AspNetCore.Components.FluentRatingDisplay 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1 100%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceBase`1 100%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceProviderException`1 100%
Microsoft.FluentUI.AspNetCore.Components.FluentSpinner 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentStack 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentStatus 100%
Microsoft.FluentUI.AspNetCore.Components.FluentText 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentTextArea 100% 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentTextInput 100% 78.5%
Microsoft.FluentUI.AspNetCore.Components.Icon 100% 89.4%
Microsoft.FluentUI.AspNetCore.Components.IconFromImage 100%
Microsoft.FluentUI.AspNetCore.Components.IconInfo 100%
Microsoft.FluentUI.AspNetCore.Components.IFluentLocalizer 100% 100%
Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1 60%
Microsoft.FluentUI.AspNetCore.Components.Localization.LanguageResource 100% 100%
Microsoft.FluentUI.AspNetCore.Components.MessageBoxOptions 100%
Microsoft.FluentUI.AspNetCore.Components.Migration.AppearanceExtensions 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Migration.FluentInputAppearanceExt
ensions		 100% 100%
Microsoft.FluentUI.AspNetCore.Components.ServiceProviderExtensions 100%
Microsoft.FluentUI.AspNetCore.Components.SpacingExtensions 100% 97.2%
Microsoft.FluentUI.AspNetCore.Components.Utilities.AddTag 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Debounce 100% 83.3%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Identifier 100% 100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.IdentifierContext 100% 75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder 100% 92.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InternalDebounce.Dispatc
herTimerExtensions		 95.7% 75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder 100% 100%
Microsoft.FluentUI.AspNetCore.Components.ZIndex 100%

github-actions[bot] avatar Jan 06 '25 11:01 github-actions[bot]

Damn. This dude is putting in some work. Somebody get this man a raise.

osmanm786 avatar Jan 23 '25 13:01 osmanm786

Damn. This dude is putting in some work. Somebody get this man a raise.

And this work is done outside my normal working hours 😁 Thanks for the compliment.

This PR is certainly not finished yet

dvoituron avatar Jan 23 '25 14:01 dvoituron