diff --git a/src/Besql/Bit.Besql/wwwroot/bit-besql.js b/src/Besql/Bit.Besql/wwwroot/bit-besql.js index 648c73cafa..650b4e487b 100644 --- a/src/Besql/Bit.Besql/wwwroot/bit-besql.js +++ b/src/Besql/Bit.Besql/wwwroot/bit-besql.js @@ -1,5 +1,5 @@ var BitBesql = window.BitBesql || {}; -BitBesql.version = window['bit-besql version'] = '9.2.1'; +BitBesql.version = window['bit-besql version'] = '9.3.0'; BitBesql.init = async function init(fileName) { const sqliteFilePath = `/${fileName}`; diff --git a/src/Bit.Build.props b/src/Bit.Build.props index a03e83e228..628ca0e02d 100644 --- a/src/Bit.Build.props +++ b/src/Bit.Build.props @@ -27,7 +27,7 @@ https://github.com/bitfoundation/bitplatform - 9.2.1 + 9.3.0 $(ReleaseVersion) https://github.com/bitfoundation/bitplatform/releases/tag/v-$(ReleaseVersion) $([System.String]::Copy($(ReleaseVersion)).Replace('-pre-', '.')) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs index 2b65b7e6cb..6484c8f21e 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// BitAppShell is an advanced container to handle the nuances of a cross-platform layout. +/// public partial class BitAppShell : BitComponentBase { private ElementReference _containerRef = default!; diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BitChart.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BitChart.razor.cs index 064eadb1fa..06ab84604b 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BitChart.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BitChart.razor.cs @@ -5,7 +5,7 @@ namespace Bit.BlazorUI; /// -/// Represents a Chart.js chart. +/// Simple and flexible charting component for data visualization, which supports eight chart types: bar, line, area, pie, bubble, radar, polar, and scatter. /// public partial class BitChart : IAsyncDisposable { diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor.cs index d8a181b483..4e27ec7b85 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor.cs @@ -1,7 +1,7 @@ namespace Bit.BlazorUI; /// -/// A component that displays a grid. +/// BitDataGrid is a robust way to display an information-rich collection of items, and allow people to sort, and filter the content. /// /// The type of data represented by each row in the grid. [CascadingTypeParameter(nameof(TGridItem))] diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ErrorBoundary/BitErrorBoundary.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ErrorBoundary/BitErrorBoundary.razor new file mode 100644 index 0000000000..f639b86d93 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ErrorBoundary/BitErrorBoundary.razor @@ -0,0 +1,48 @@ +@namespace Bit.BlazorUI +@inherits ErrorBoundaryBase + +@if (CurrentException is null) +{ + @(Body ?? ChildContent) +} +else if (ErrorContent is not null) +{ + @ErrorContent(CurrentException) +} +else +{ +
+ + + + + + + @(Title ?? "Oops, Something went wrong...") + + + @if (ShowException) + { +
+ @CurrentException?.ToString() +
+ } + + @if (Footer is not null) + { + @Footer + } + else + { +
+ @(RefreshText ?? "Refresh") + @(HomeText ?? "Home") + @(RecoverText ?? "Recover") + @if (AdditionalButtons is not null) + { + @AdditionalButtons + } +
+ } +
+} \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ErrorBoundary/BitErrorBoundary.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ErrorBoundary/BitErrorBoundary.razor.cs new file mode 100644 index 0000000000..16919ee691 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ErrorBoundary/BitErrorBoundary.razor.cs @@ -0,0 +1,80 @@ +namespace Bit.BlazorUI; + +/// +/// BitErrorBoundary is a simple error boundary to handle exceptions happening in its children. +/// +public partial class BitErrorBoundary : ErrorBoundaryBase +{ + [Inject] private NavigationManager _navigationManager { get; set; } = default!; + + + + /// + /// The footer content of the boundary. + /// + [Parameter] public RenderFragment? AdditionalButtons { get; set; } + + /// + /// Alias of the ChildContent. + /// + [Parameter] public RenderFragment? Body { get; set; } + + /// + /// The footer content of the boundary. + /// + [Parameter] public RenderFragment? Footer { get; set; } + + /// + /// The text of the Home button. + /// + [Parameter] public string? HomeText { get; set; } + + /// + /// The url of the home page for the Home button. + /// + [Parameter] public string? HomeUrl { get; set; } + + /// + /// The callback for when an error get caught by the boundary. + /// + [Parameter] public EventCallback OnError { get; set; } + + /// + /// The text of the Recover button. + /// + [Parameter] public string? RecoverText { get; set; } + + /// + /// The text of the Refresh button. + /// + [Parameter] public string? RefreshText { get; set; } + + /// + /// Whether the actual exception information should be shown or not. + /// + [Parameter] public bool ShowException { get; set; } + + /// + /// The header title of the boundary. + /// + [Parameter] public string? Title { get; set; } + + + + protected override async Task OnErrorAsync(Exception exception) + { + await OnError.InvokeAsync(exception); + } + + + + private void Refresh() + { + _navigationManager.Refresh(forceReload: true); + } + + private void GoHome() + { + _navigationManager.NavigateTo(HomeUrl ?? "/", forceLoad: true); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ErrorBoundary/BitErrorBoundary.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ErrorBoundary/BitErrorBoundary.scss new file mode 100644 index 0000000000..a1cd67f816 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ErrorBoundary/BitErrorBoundary.scss @@ -0,0 +1,30 @@ +@import '../../../Bit.BlazorUI/Styles/functions.scss'; + +.bit-erb { + width: 100%; + height: 100%; + display: flex; + gap: spacing(2); + align-items: center; + box-sizing: border-box; + flex-direction: column; + justify-content: center; + background-color: $clr-bg-pri; +} + +.bit-erb-exp { + width: 90%; + overflow: auto; + white-space: pre; + text-align: start; + margin: spacing(3); +} + +.bit-erb-ftr { + width: 100%; + display: flex; + gap: spacing(2); + align-items: center; + box-sizing: border-box; + justify-content: center; +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor new file mode 100644 index 0000000000..b36adb8b27 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor @@ -0,0 +1,36 @@ +@namespace Bit.BlazorUI + +
+
+
+ + @Title + + + + + +
+ +
+ @Body +
+ +
+ + @(OkText ?? "Ok") + +
+
+
\ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs new file mode 100644 index 0000000000..cb531a1098 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs @@ -0,0 +1,51 @@ +using System.Reflection.Metadata; + +namespace Bit.BlazorUI; + +/// +/// BitMessageBox is a pre-implemented box for showing messages with title and body. +/// +public partial class BitMessageBox +{ + /// + /// The body of the message box. + /// + [Parameter] public string? Body { get; set; } + + /// + /// Custom CSS classes for different parts of the message box. + /// + [Parameter] public BitMessageBoxClassStyles? Classes { get; set; } + + /// + /// The text of the Ok button. + /// + [Parameter] public string? OkText { get; set; } + + /// + /// The event callback for closing the message box. + /// + [Parameter] public EventCallback OnClose { get; set; } + + /// + /// Custom CSS styles for different parts of the message box. + /// + [Parameter] public BitMessageBoxClassStyles? Styles { get; set; } + + /// + /// The title of the message box. + /// + [Parameter] public string? Title { get; set; } + + + + private async Task CloseModal() + { + await OnClose.InvokeAsync(); + } + + private async Task OnOkClick() + { + await OnClose.InvokeAsync(); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.scss new file mode 100644 index 0000000000..234eb685fc --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.scss @@ -0,0 +1,58 @@ +@import "../../Styles/extra-variables.scss"; +@import "../../../Bit.BlazorUI/Styles/functions.scss"; +@import "../../../Bit.BlazorUI/Styles/media-queries.scss"; + +.bit-msb { + padding: spacing(2); + min-width: spacing(40); + max-height: $bit-env-height-available; + + @include lt-md { + min-width: unset; + } +} + +.bit-msb-con { + width: 100%; + height: 100%; + display: flex; + gap: spacing(2); + box-sizing: border-box; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + max-height: calc(#{$bit-env-height-available} - #{spacing(6)}); +} + +.bit-msb-hdr { + width: 100%; + display: flex; + gap: spacing(2); + flex-direction: row; + box-sizing: border-box; + align-items: flex-start; + justify-content: flex-start; +} + +.bit-msb-bdy { + width: 100%; + flex-grow: 1; + display: flex; + overflow: auto; + color: $clr-ter; + line-height: 1.5; + white-space: pre; + font-weight: 400; + font-size: spacing(2); + letter-spacing: 0.01em; +} + +.bit-msb-ftr { + width: 100%; + display: flex; + gap: spacing(2); + align-items: center; + box-sizing: border-box; + flex-direction: column; + justify-content: center; +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs new file mode 100644 index 0000000000..3e13b499e3 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs @@ -0,0 +1,49 @@ +namespace Bit.BlazorUI; + +public class BitMessageBoxClassStyles +{ + /// + /// Custom CSS classes/styles for the root element of the BitMessageBox. + /// + public string? Root { get; set; } + + /// + /// Custom CSS classes/styles for the container of the BitMessageBox. + /// + public string? Container { get; set; } + + /// + /// Custom CSS classes/styles for the header of the BitMessageBox. + /// + public string? Header { get; set; } + + /// + /// Custom CSS classes/styles for the title of the BitMessageBox. + /// + public string? Title { get; set; } + + /// + /// Custom CSS classes/styles for the BitSpacer of the BitMessageBox. + /// + public string? Spacer { get; set; } + + /// + /// Custom CSS classes/styles for the CloseButton of the BitMessageBox. + /// + public BitButtonClassStyles? CloseButton { get; set; } + + /// + /// Custom CSS classes/styles for the body of the BitMessageBox. + /// + public string? Body { get; set; } + + /// + /// Custom CSS classes/styles for the footer of the BitMessageBox. + /// + public string? Footer { get; set; } + + /// + /// Custom CSS classes/styles for the OkButton of the BitMessageBox. + /// + public BitButtonClassStyles? OkButton { get; set; } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxService.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxService.cs new file mode 100644 index 0000000000..7b923dda89 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxService.cs @@ -0,0 +1,23 @@ +namespace Bit.BlazorUI; + +/// +/// A wrapper serive around the to enhance showing message boxes. +/// +public class BitMessageBoxService(BitModalService modalService) +{ + /// + /// Shows a inside a using the . + /// + public async Task Show(string title, string body) + { + BitModalReference modalRef = default!; + Dictionary parameters = new() + { + { nameof(BitMessageBox.Title), title }, + { nameof(BitMessageBox.Body), body }, + { nameof(BitMessageBox.OnClose), EventCallback.Factory.Create(this, () => modalRef.Close()) } + }; + + modalRef = await modalService.Show(parameters); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ModalService/BitModalReference.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ModalService/BitModalReference.cs index e017ad10f3..2f762b3e05 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ModalService/BitModalReference.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ModalService/BitModalReference.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// A reference to the instance that is shown using the . +/// public class BitModalReference { private readonly BitModalService _modalService; diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ModalService/BitModalService.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ModalService/BitModalService.cs index d019966a8e..73fc4c6071 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ModalService/BitModalService.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ModalService/BitModalService.cs @@ -3,6 +3,9 @@ namespace Bit.BlazorUI; +/// +/// A core service to show any content inside a centralized using . +/// public class BitModalService { private BitModalContainer? _container; diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs index 435c226fdb..f5557f64d2 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// BitNavPanel is a navigation component specialized to be rendered in a vertical panel. +/// public partial class BitNavPanel : BitComponentBase, IDisposable where TItem : class { private bool _disposed; @@ -204,7 +207,7 @@ private void HandleOnSwipeMove(BitSwipeTrapEventArgs args) else { var diff = args.DiffY - _oldDiffY; - _js.BitExtrasScrollBy(RootElement, 0, diff > 0 ? -10 : 10); + _js.BitExtrasScrollBy(RootElement, 0, diff > 0 ? -20 : 20); _oldDiffY = args.DiffY; } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/PdfReader/BitPdfReader.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/PdfReader/BitPdfReader.razor.cs index 2b55f44bf8..736a1ac3d7 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/PdfReader/BitPdfReader.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/PdfReader/BitPdfReader.razor.cs @@ -2,16 +2,19 @@ namespace Bit.BlazorUI; +/// +/// BitPdfReader is a simple pdf renderer utilizing the pdfjs library to bring pdf reading feature into Blazor world. +/// public partial class BitPdfReader { - private int _currentPageNumber = 1; private bool _allPageRendered; private int _numberOfPages = 1; + private int _currentPageNumber = 1; private bool _parametersInitialized; - [Inject] private IJSRuntime _js { get; set; } + [Inject] private IJSRuntime _js { get; set; } = default!; diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs index cc7b077732..b580bee36e 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProPanel/BitProPanel.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// ProPanel is an advanced version of normal Panel with additional features that tailored to more usual use-cases. +/// public partial class BitProPanel : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/IServiceCollectionExtensions.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/IServiceCollectionExtensions.cs index a6bc011de1..2382f743ec 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/IServiceCollectionExtensions.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/IServiceCollectionExtensions.cs @@ -16,10 +16,12 @@ public static IServiceCollection AddBitBlazorUIExtrasServices(this IServiceColle if (trySingleton) { services.TryAddSingleton(); + services.TryAddSingleton(); } else { services.TryAddScoped(); + services.TryAddScoped(); } services.TryAddScoped(); diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/JsInterop/BitExtrasJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/JsInterop/ExtrasJsRuntimeExtensions.cs similarity index 57% rename from src/BlazorUI/Bit.BlazorUI.Extras/Extensions/JsInterop/BitExtrasJsRuntimeExtensions.cs rename to src/BlazorUI/Bit.BlazorUI.Extras/Extensions/JsInterop/ExtrasJsRuntimeExtensions.cs index 7a55e2fc1a..3edd15458c 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/JsInterop/BitExtrasJsRuntimeExtensions.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/JsInterop/ExtrasJsRuntimeExtensions.cs @@ -1,19 +1,19 @@ namespace Bit.BlazorUI; -internal static class BitExtrasJsRuntimeExtensions +internal static class ExtrasJsRuntimeExtensions { internal static ValueTask BitExtrasApplyRootClasses(this IJSRuntime jsRuntime, List cssClasses, Dictionary cssVariables) { - return jsRuntime.InvokeVoid("BitBlazorUI.BitExtras.applyRootClasses", cssClasses, cssVariables); + return jsRuntime.InvokeVoid("BitBlazorUI.Extras.applyRootClasses", cssClasses, cssVariables); } internal static ValueTask BitExtrasGoToTop(this IJSRuntime jsRuntime, ElementReference element) { - return jsRuntime.InvokeVoid("BitBlazorUI.BitExtras.goToTop", element); + return jsRuntime.InvokeVoid("BitBlazorUI.Extras.goToTop", element); } internal static ValueTask BitExtrasScrollBy(this IJSRuntime jsRuntime, ElementReference element, decimal x, decimal y) { - return jsRuntime.InvokeVoid("BitBlazorUI.BitExtras.scrollBy", element, x, y); + return jsRuntime.InvokeVoid("BitBlazorUI.Extras.scrollBy", element, x, y); } } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Scripts/BitExtras.ts b/src/BlazorUI/Bit.BlazorUI.Extras/Scripts/Extras.ts similarity index 95% rename from src/BlazorUI/Bit.BlazorUI.Extras/Scripts/BitExtras.ts rename to src/BlazorUI/Bit.BlazorUI.Extras/Scripts/Extras.ts index b2463e681f..546b828fb0 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Scripts/BitExtras.ts +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Scripts/Extras.ts @@ -1,5 +1,5 @@ namespace BitBlazorUI { - export class BitExtras { + export class Extras { public static applyRootClasses(cssClasses: string[], cssVariables: any) { cssClasses?.forEach(c => document.documentElement.classList.add(c)); Object.keys(cssVariables).forEach(key => document.documentElement.style.setProperty(key, cssVariables[key])); diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss index 026cf642cb..bb2a98ece6 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss @@ -1,6 +1,8 @@ @import "../Components/AppShell/BitAppShell.scss"; @import "../Components/DataGrid/BitDataGrid.scss"; @import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss"; +@import "../Components/ErrorBoundary/BitErrorBoundary.scss"; +@import "../Components/MessageBox/BitMessageBox.scss"; @import "../Components/NavPanel/BitNavPanel.scss"; @import "../Components/PdfReader/BitPdfReader.scss"; @import "../Components/ProPanel/BitProPanel.scss"; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor.cs index 783c6859cc..06fa449851 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitActionButton/BitActionButton.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// ActionButton is a special type of button with a specific set of visual styles and properties. +/// public partial class BitActionButton : BitComponentBase { private string? _rel; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs index b0fe05e744..5468d7bc9a 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// Buttons enable users to take actions with a single tap. They're commonly used in forms, dialog panels, and specialized for tasks like navigation or repeated actions. +/// public partial class BitButton : BitComponentBase { private string? _rel; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs index ad846198c6..ea0e1a2186 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// The ButtonGroup component can be used to group related buttons. +/// public partial class BitButtonGroup : BitComponentBase where TItem : class { private TItem? _toggleItem; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitMenuButton/BitMenuButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitMenuButton/BitMenuButton.razor.cs index fafd8262f2..d7ed206098 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitMenuButton/BitMenuButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitMenuButton/BitMenuButton.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// A menu button is a menu item that displays a word or phrase that the user can click to initiate an operation. +/// public partial class BitMenuButton : BitComponentBase, IAsyncDisposable where TItem : class { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs index 515da0a9f9..be2e0f7362 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitToggleButton/BitToggleButton.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// ToggleButton is a type of button that stores and shows a status representing the toggle state of the component. +/// public partial class BitToggleButton : BitComponentBase { private int? _tabIndex; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs index 5246874192..1bd3255917 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.razor.cs @@ -4,6 +4,9 @@ namespace Bit.BlazorUI; +/// +/// The calendar control lets people select and view a single date or a range of dates in their calendar. It’s made up of 3 separate views: the month view, year view, and decade view. +/// public partial class BitCalendar : BitInputBase { private const int DEFAULT_WEEK_COUNT = 6; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.razor.cs index e9e5e00612..ff40382b66 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// BitCheckbox is a component that permits the user to make a binary choice, a choice between one of two possible mutually exclusive options. +/// public partial class BitCheckbox : BitInputBase, IDisposable { private string _inputId = string.Empty; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs index 44691b0e09..949febf0ec 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.razor.cs @@ -3,6 +3,9 @@ namespace Bit.BlazorUI; +/// +/// ChoiceGroup let people select a single option from two or more choices. +/// public partial class BitChoiceGroup : BitInputBase where TItem : class { private List _items = []; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs index e18a8ad2b3..a290b7f571 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs @@ -4,6 +4,9 @@ namespace Bit.BlazorUI; +/// +/// A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button. Dropdowns are typically used for forms. +/// public partial class BitDropdown : BitInputBase, IAsyncDisposable where TItem : class, new() { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs index 4a02682826..93a158179b 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs @@ -4,7 +4,7 @@ namespace Bit.BlazorUI; /// -/// A component that wraps the HTML file input element and uploads them. +/// BitFileUpload component wraps the HTML file input element(s) and uploads them to a given URL. The files can be removed by specifying the URL they have been uploaded. /// public partial class BitFileUpload : BitComponentBase, IAsyncDisposable { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor.cs index 7eaaa3ed12..99ae5f321c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor.cs @@ -4,6 +4,9 @@ namespace Bit.BlazorUI; +/// +/// A NumberField allows you to enter any number type and format you want. It could be a decimal number or integer number with a suffix and so on. +/// public partial class BitNumberField<[DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] TValue> : BitTextInputBase { private bool _hasFocus; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs index bc15b8fae4..8c35c3d564 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs @@ -3,6 +3,9 @@ namespace Bit.BlazorUI; +/// +/// The OTP input is used for MFA procedure of authenticating users by a one-time password. +/// public partial class BitOtpInput : BitInputBase { private string _labelId = default!; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Rating/BitRating.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Rating/BitRating.razor.cs index 0286129cc5..c800be7910 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Rating/BitRating.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Rating/BitRating.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// Ratings show people’s opinions of a product, helping others make more informed purchasing decisions. +/// public partial class BitRating : BitInputBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs index 55adccf395..94464c82ac 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// A search box (SearchBox) provides an input field for searching content within a site or app to find specific items. +/// public partial class BitSearchBox : BitTextInputBase, IAsyncDisposable { private bool _isOpen; @@ -22,6 +25,11 @@ public partial class BitSearchBox : BitTextInputBase, IAsyncDisposable + /// + /// The accent color kind of the search box. + /// + [Parameter] public BitColorKind? Accent { get; set; } + /// /// Custom CSS classes for different parts of the BitSearchBox. /// @@ -77,6 +85,11 @@ public partial class BitSearchBox : BitTextInputBase, IAsyncDisposable /// [Parameter] public int MinSuggestTriggerChars { get; set; } = 3; + /// + /// Removes the default border of the search box. + /// + [Parameter] public bool NoBorder { get; set; } + /// /// Callback executed when the user clears the search box by either clicking 'X' or hitting escape. /// @@ -180,6 +193,17 @@ protected override void RegisterCssClasses() ClassBuilder.Register(() => ShowSearchButton ? "bit-srb-ssb" : string.Empty); ClassBuilder.Register(() => HideIcon ? "bit-srb-hic" : string.Empty); + + ClassBuilder.Register(() => NoBorder ? "bit-srb-nbr" : string.Empty); + + ClassBuilder.Register(() => Accent switch + { + BitColorKind.Primary => "bit-srb-apri", + BitColorKind.Secondary => "bit-srb-asec", + BitColorKind.Tertiary => "bit-srb-ater", + BitColorKind.Transparent => "bit-srb-atra", + _ => string.Empty + }); } protected override void RegisterCssStyles() diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss index 6171cc2cde..94551cccfb 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss @@ -105,19 +105,19 @@ } .bit-srb-cnt { - margin: 0; flex: 1; + margin: 0; display: flex; box-shadow: none; + color: $clr-fg-pri; height: spacing(4); align-items: stretch; flex-flow: row nowrap; box-sizing: border-box; font-size: spacing(1.75); - color: $clr-fg-pri; - border-radius: $shp-border-radius; - background-color: $clr-bg-pri; padding: spacing(0.125) 0; + background-color: $clr-bg-pri; + border-radius: $shp-border-radius; border: $shp-border-width $shp-border-style $clr-brd-pri; @media (hover: hover) { @@ -133,6 +133,30 @@ } } +.bit-srb-apri { + .bit-srb-cnt { + background-color: $clr-bg-pri; + } +} + +.bit-srb-asec { + .bit-srb-cnt { + background-color: $clr-bg-sec; + } +} + +.bit-srb-ater { + .bit-srb-cnt { + background-color: $clr-bg-ter; + } +} + +.bit-srb-atra { + .bit-srb-cnt { + background-color: transparent; + } +} + .bit-srb-hic { .bit-srb-cnt { padding: 0 spacing(1); @@ -349,6 +373,44 @@ } } +.bit-srb-nbr { + .bit-srb-cnt { + border: none; + } + + &.bit-srb-foc { + .bit-srb-cnt, + .bit-srb-sbn { + border: none; + } + + @media (hover: hover) { + &:hover { + border: none; + } + } + } + + .bit-srb-sbn { + border: none; + background-color: transparent; + + i { + color: $clr-sec-text; + } + + @media (hover: hover) { + &:hover { + background-color: $clr-bg-pri-hover; + + i { + color: $clr-fg-pri-hover; + } + } + } + } +} + .bit-srb-hvl { @media (hover: hover) { &:hover { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.razor.cs index 05e80f4ff0..477d03c123 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// A slider provides a visual indication of adjustable content, as well as the current setting in the total range of content. +/// public partial class BitSlider : BitComponentBase { private int _inputHeight; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SpinButton/BitSpinButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SpinButton/BitSpinButton.razor.cs index 8483f7a7b0..aac13b7b34 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SpinButton/BitSpinButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SpinButton/BitSpinButton.razor.cs @@ -4,6 +4,9 @@ namespace Bit.BlazorUI; +/// +/// A spin button (SpinButton) allows someone to incrementally adjust a value in small steps. It’s mainly used for numeric values, but other values are supported too. +/// public partial class BitSpinButton : BitInputBase { private double _min; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs index 6360913b41..d5c5a0448c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// Text fields give people a way to enter and edit text. They’re used in forms, modal dialogs, tables, and other surfaces where text input is required. +/// public partial class BitTextField : BitTextInputBase { private bool _hasFocus; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.razor.cs index 4fff4dd852..fecfab5f22 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.razor.cs @@ -3,6 +3,9 @@ namespace Bit.BlazorUI; +/// +/// A toggle represents a physical switch that allows someone to choose between two mutually exclusive options. For example, “On/Off”, “Show/Hide”. +/// public partial class BitToggle : BitInputBase { private string? _labelId; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs index dbe2bb9769..3388f573cc 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/CircularTimePicker/BitCircularTimePicker.razor.cs @@ -4,6 +4,9 @@ namespace Bit.BlazorUI; +/// +/// A BitCircularTimePicker offers a drop-down control that’s optimized for picking a single time from a clock view where contextual information like the day of the week or fullness of the calendar is important. +/// public partial class BitCircularTimePicker : BitInputBase, IAsyncDisposable { private int? _hour; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/ColorPicker/BitColorPicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/ColorPicker/BitColorPicker.razor.cs index 5ff76edc51..87d24b2baf 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/ColorPicker/BitColorPicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/ColorPicker/BitColorPicker.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// The color picker (ColorPicker) is used to browse through and select colors. By default, it lets people navigate through colors on a color spectrum, or specify a color in either Red-Green-Blue (RGB), or alpha color code; or Hexadecimal textboxes. +/// public partial class BitColorPicker : BitComponentBase, IAsyncDisposable { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs index 1a1fc3bb62..ae99841baa 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DatePicker/BitDatePicker.razor.cs @@ -4,6 +4,9 @@ namespace Bit.BlazorUI; +/// +/// A BitDatePicker offers a drop-down control that’s optimized for picking a single date from a calendar view where contextual information like the day of the week or fullness of the calendar is important. +/// public partial class BitDatePicker : BitInputBase, IAsyncDisposable { private const int MAX_WIDTH = 470; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs index 09b6d848bc..fe19446b68 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/DateRangePicker/BitDateRangePicker.razor.cs @@ -4,6 +4,9 @@ namespace Bit.BlazorUI; +/// +/// A BitDateRangePicker offers a drop-down control that’s optimized for picking two dates from a calendar view where contextual information like the day of the week or fullness of the calendar is important. +/// public partial class BitDateRangePicker : BitInputBase, IAsyncDisposable { private const int MAX_WIDTH = 470; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs index bea8abb564..d2af1b1676 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/_Pickers/TimePicker/BitTimePicker.razor.cs @@ -3,6 +3,9 @@ namespace Bit.BlazorUI; +/// +/// A BitTimePicker offers a drop-down control that’s optimized for picking a single time from a clock view where contextual information like the day of the week or fullness of the calendar is important. +/// public partial class BitTimePicker : BitInputBase, IAsyncDisposable { private bool _hasFocus; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Footer/BitFooter.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Footer/BitFooter.razor.cs index 33a6bb0119..ff72fcd649 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Footer/BitFooter.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Footer/BitFooter.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// The BitFooter component is used to display a colored bar (with text and possibly other components) at the bottom of a site or application. +/// public partial class BitFooter : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.razor.cs index 7c81db3267..e1b518d51c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Grid/BitGrid.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// The BitGrid component is a flexible and customizable grid layout, offering responsive columns and alignment flexibility for structured content presentation. +/// public partial class BitGrid : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Header/BitHeader.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Header/BitHeader.razor.cs index 1878e984ae..53197a3a37 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Header/BitHeader.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Header/BitHeader.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// The BitHeader component is used to display a title (and possibly other components) in a colored bar at the top of a site or application. +/// public partial class BitHeader : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Layout/BitLayout.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Layout/BitLayout.razor.cs index d732083604..e2e6840bc2 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Layout/BitLayout.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Layout/BitLayout.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Layout can be used to create a base UI structure for an application. +/// public partial class BitLayout : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Spacer/BitSpacer.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Spacer/BitSpacer.razor.cs index c44c9557a0..058abfd8ea 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Spacer/BitSpacer.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Spacer/BitSpacer.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// The purpose of the BitSpacer is to generate space between other components. You can either create a space with a set width (in number of pixels) or create a space with a flexible width. +/// public partial class BitSpacer : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Stack/BitStack.cs b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Stack/BitStack.cs index 12be9f1149..fc089046c5 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Stack/BitStack.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Layouts/Stack/BitStack.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components. +/// public partial class BitStack : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/BasicList/BitBasicList.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/BasicList/BitBasicList.razor.cs index 96f010a03d..eb0500e178 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/BasicList/BitBasicList.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/BasicList/BitBasicList.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// BitBasicList provides a base component for rendering large sets of items. It’s agnostic of layout, the tile component used, and selection management. +/// public partial class BitBasicList : BitComponentBase { private _BitBasicListVirtualize? _bitBasicListVirtualizeRef; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs index cb08373268..5ebd0686f1 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Carousel/BitCarousel.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Carousel (Carousel slide-show) let people show their items in seperate slides from two or more items. +/// public partial class BitCarousel : BitComponentBase, IAsyncDisposable { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor.cs index 4afd8825bc..446bc034b5 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Swiper/BitSwiper.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// Swipers (touch slider) let people show their slides in a swiping row. +/// public partial class BitSwiper : BitComponentBase, IAsyncDisposable { private double _lastX; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor.cs index 8cca6556b7..f099106d8d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.razor.cs @@ -3,6 +3,9 @@ namespace Bit.BlazorUI; +/// +/// The Timeline component organizes and displays events or data chronologically in a linear fashion, often featuring points or segments representing individual items with associated details or actions. +/// public partial class BitTimeline : BitComponentBase where TItem : class { private List _items = []; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs index d5011048b5..06b22ad255 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. +/// public partial class BitBreadcrumb : BitComponentBase, IAsyncDisposable where TItem : class { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs index b998c9359d..8ebc5813a8 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// DropMenu component is a versatile dropdown menu used in Blazor applications. It allows you to create a button that, when clicked, opens a callout or dropdown menu. +/// public partial class BitDropMenu : BitComponentBase, IAsyncDisposable { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs index acd1178615..e15c0932a0 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// A navigation pane (Nav) provides links to the main areas of an app or site. +/// public partial class BitNav : BitComponentBase, IDisposable where TItem : class { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor.cs index 3fd80c28b4..86852c0576 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// A tab panel that provides navigation links to the main areas of an app. +/// public partial class BitNavBar : BitComponentBase, IDisposable where TItem : class { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.razor.cs index 2be858bb4d..c0dab66469 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// Pagination component helps users easily navigate through content, allowing swift browsing across multiple pages or sections, commonly used in lists, tables, and content-rich interfaces. +/// public partial class BitPagination : BitComponentBase { private int _count = 1; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs index 4f2b78e2d4..6efbbbe57b 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more contentviews and relies on text headers to articulate the different sections of content. +/// public partial class BitPivot : BitComponentBase { private BitPivotItem? _selectedItem; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.razor.cs index 1f2cd6be14..618caae2e5 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Badge component is a small visual element used to highlight or indicate specific information within a user interface. +/// public partial class BitBadge : BitComponentBase { private string? _content; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Message/BitMessage.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Message/BitMessage.razor.cs index f7c63a9a4d..a7787bd553 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Message/BitMessage.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Message/BitMessage.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// A Message displays errors, warnings, or important information. For example, if a file failed to upload an error message should appear. +/// public partial class BitMessage : BitComponentBase { private bool _isExpanded; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs index a9690a3143..e98ef25d01 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Persona/BitPersona.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// A BitPersona is a visual representation of a person across products, typically showcasing the image that person has chosen to upload themselves. The control can also be used to show that person's online status. +/// public partial class BitPersona : BitComponentBase { private bool _isLoaded; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor.cs index fbfbfb5a90..ac9bc31d91 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// SnackBars provide brief notifications. The component is also known as a toast. +/// public partial class BitSnackBar : BitComponentBase { private List _items = []; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.scss index 1c795a4695..70d2c9a275 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/SnackBar/BitSnackBar.scss @@ -1,6 +1,7 @@ @import "../../../Styles/functions.scss"; .bit-snb { + width: 100%; display: flex; position: fixed; gap: spacing(1.25); @@ -171,6 +172,7 @@ .bit-snb-tcn { left: 50%; top: spacing(1); + align-items: center; transform: translateX(-50%); } @@ -188,6 +190,7 @@ .bit-snb-bcn { left: 50%; bottom: spacing(1); + align-items: center; transform: translateX(-50%); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs index d6ae224223..46da97cba9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Tag component provides a visual representation of an attribute, person, or asset. +/// public partial class BitTag : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Progress/Progress/BitProgress.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Progress/Progress/BitProgress.razor.cs index d7238bcaa1..7c99c4a99d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Progress/Progress/BitProgress.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Progress/Progress/BitProgress.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// BitProgress is used to show the completion status of an operation lasting more than 2 seconds. +/// public partial class BitProgress : BitComponentBase { private string _labelId = string.Empty; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.razor.cs index 9c6118ff54..fbbc770058 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Progress/Shimmer/BitShimmer.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Shimmer is a temporary animation placeholder for when a service call takes time to return data and you don't want to block rendering the rest of the UI. +/// public partial class BitShimmer : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Accordion/BitAccordion.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Accordion/BitAccordion.razor.cs index 81015ac827..aa2792c05d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Accordion/BitAccordion.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Accordion/BitAccordion.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// The Accordion component allows the user to show and hide sections of related content on a page. +/// public partial class BitAccordion : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs index 5ebd497af5..2d877baa01 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Callout/BitCallout.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// A callout is an anchored tip that can be used to teach people or guide them through the app without blocking them. +/// public partial class BitCallout : BitComponentBase, IAsyncDisposable { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.razor.cs index d235190af9..fa2e7703e6 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Card/BitCard.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// A Card provides a container to wrap around a specific content. Keeping a card to a single subject keeps the design clean. +/// public partial class BitCard : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs index 0db768becd..2d3d636de1 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Dialog/BitDialog.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Dialogs are temporary pop-ups that take focus from the page or app and require people to interact with them. +/// public partial class BitDialog : BitComponentBase, IAsyncDisposable { private int _offsetTop; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs index 5726c19c14..452c36545f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Modals are temporary pop-ups that take focus from the page or app and require people to interact with them. +/// public partial class BitModal : BitComponentBase, IAsyncDisposable { private int _offsetTop; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs index 20607a18ae..3f847e0606 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Panel/BitPanel.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Panels are overlays that contain supplementary content and are used for complex creation, edit, or management experiences. +/// public partial class BitPanel : BitComponentBase, IAsyncDisposable { private int _offsetTop; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/ScrollablePane/BitScrollablePane.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/ScrollablePane/BitScrollablePane.razor.cs index c4b3f6efea..410efb4842 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/ScrollablePane/BitScrollablePane.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/ScrollablePane/BitScrollablePane.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// A ScrollablePane is a component for scrolling through content that doesn't fit entirely on the screen. +/// public partial class BitScrollablePane : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs index 4ee326e81c..3643c99df5 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Splitter/BitSplitter.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// The BitSplitter component divides a container into two adjustable sections, either horizontally or vertically. Users can resize these sections by dragging the divider. +/// public partial class BitSplitter : BitComponentBase { private bool _isDragging; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Tooltip/BitTooltip.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Tooltip/BitTooltip.razor.cs index 129c433e65..da42f6f2ee 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Tooltip/BitTooltip.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Tooltip/BitTooltip.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// Tooltip component briefly describes unlabeled controls or provides a bit of additional information about labeled controls. +/// public partial class BitTooltip : BitComponentBase { private CancellationTokenSource? _showDelayTokenSource = new(); diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Element/BitElement.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Element/BitElement.cs index 58b5f4ee5e..b6008aaaae 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Element/BitElement.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Element/BitElement.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// A simple component with a customizable HTML tag, offering full control over styling, attributes, and directional flow, designed to integrate seamlessly into the bit BlazorUI. +/// public partial class BitElement : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs index 44140cd07a..9d9d7846d5 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// An icon represents concept or meaning for the user. It's used to make better user experience (UX) and user-friendly applications. +/// public partial class BitIcon : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.razor.cs index cb37b492e0..2a2d562172 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Image/BitImage.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// An image is a graphic representation of something (e.g photo or illustration). The backgrounds have been added to some of examples in order to help visualize empty space in the image frame. +/// public partial class BitImage : BitComponentBase { private BitImageLoadingState _loadingState; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor.cs index f371c16621..d9af75ef2e 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Label/BitLabel.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Labels give a name or title to a control or group of controls, including text fields, check boxes, combo boxes, radio buttons, and drop-down menus. +/// public partial class BitLabel : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.razor.cs index 4c5c02d762..fa1dedcf10 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// Links lead to another part of an app, other pages, or help articles. They can also be used to initiate commands. +/// public partial class BitLink : BitComponentBase { private string? _rel; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Overlay/BitOverlay.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Overlay/BitOverlay.razor.cs index b8f1fe0b7a..b60962886e 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Overlay/BitOverlay.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Overlay/BitOverlay.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// The Overlay component is used to provide emphasis on a particular element or parts of it. It signals to the user of a state change within the application and can be used for creating loaders, dialogs and more. +/// public partial class BitOverlay : BitComponentBase { private int _offsetTop; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/PullToRefresh/BitPullToRefresh.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/PullToRefresh/BitPullToRefresh.razor.cs index 8504d615a2..4a0a66530e 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/PullToRefresh/BitPullToRefresh.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/PullToRefresh/BitPullToRefresh.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// The PullToRefresh component is used to add the pull down to refresh feature to a page or a specific element. +/// public partial class BitPullToRefresh : BitComponentBase, IAsyncDisposable { private decimal _diff; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs index 1e0c39f227..7f26bfccec 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Separator/BitSeparator.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// A Separator is a component that visually separates content into groups. +/// public partial class BitSeparator : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Sticky/BitSticky.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Sticky/BitSticky.razor.cs index a43cd2133e..7032a1a138 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Sticky/BitSticky.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Sticky/BitSticky.razor.cs @@ -1,5 +1,8 @@ namespace Bit.BlazorUI; +/// +/// A Sticky is a component that enables elements to stick during scrolling. +/// public partial class BitSticky : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.razor.cs index 0d5ab57b97..07acee846f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/SwipeTrap/BitSwipeTrap.razor.cs @@ -2,6 +2,9 @@ namespace Bit.BlazorUI; +/// +/// A SwipeTrap is a component that traps swipe actions and triggers corresponding events. +/// public partial class BitSwipeTrap : BitComponentBase, IAsyncDisposable { private bool _disposed; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.cs b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.cs index dbabd1c3c0..a941fe0a6d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Text/BitText.cs @@ -3,6 +3,9 @@ namespace Bit.BlazorUI; +/// +/// Use text to present your design and content as clearly and efficiently as possible. +/// public partial class BitText : BitComponentBase { /// diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts index 91bb860cf6..948428df0d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts +++ b/src/BlazorUI/Bit.BlazorUI/Scripts/general.ts @@ -1,4 +1,4 @@ -(BitBlazorUI as any).version = (window as any)['bit-blazorui version'] = '9.2.1'; +(BitBlazorUI as any).version = (window as any)['bit-blazorui version'] = '9.3.0'; interface DotNetObject { invokeMethod(methodIdentifier: string, ...args: any[]): T; diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj index 51022de413..7fe8baccfc 100644 --- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj +++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Bit.BlazorUI.Demo.Server.csproj @@ -5,11 +5,11 @@ - + all runtime; build; native; contentfiles; analyzers; buildtransitive - + all runtime; build; native; contentfiles; analyzers; buildtransitive diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj index a3f0ec3e3b..f1be4b6996 100644 --- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj +++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Shared/Bit.BlazorUI.Demo.Shared.csproj @@ -5,11 +5,11 @@ - + all runtime; build; native; contentfiles; analyzers; buildtransitive - + all runtime; build; native; contentfiles; analyzers; buildtransitive diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj index b27f07bb20..d57c1e821f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Bit.BlazorUI.Demo.Client.Core.csproj @@ -16,11 +16,11 @@ - + all runtime; build; native; contentfiles; analyzers; buildtransitive - + all runtime; build; native; contentfiles; analyzers; buildtransitive diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IServiceCollectionExtensions.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IServiceCollectionExtensions.cs index f10c87d4b4..69da5af4f1 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IServiceCollectionExtensions.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IServiceCollectionExtensions.cs @@ -19,7 +19,6 @@ public static IServiceCollection AddClientSharedServices(this IServiceCollection services.TryAddTransient(); services.TryAddTransient(); - services.TryAddTransient(); services.TryAddTransient(); services.AddBitBlazorUIServices(); diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/AppShell/BitAppShellDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/AppShell/BitAppShellDemo.razor index 13f7921925..ec74d0f893 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/AppShell/BitAppShellDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/AppShell/BitAppShellDemo.razor @@ -1,7 +1,5 @@ @page "/components/appshell" -@inherits AppComponentBase - diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor index b659f07f11..0845c53064 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor @@ -1,6 +1,5 @@ @page "/components/chart" -@inherits AppComponentBase diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor.cs index 0a84e9b628..e158f419f9 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/Chart/BitChartDemo.razor.cs @@ -75,7 +75,7 @@ public partial class BitChartDemo private bool isLoadingAssemblies = true; - protected async override Task OnInitAsync() + protected async override Task OnInitializedAsync() { try { @@ -89,6 +89,6 @@ protected async override Task OnInitAsync() isLoadingAssemblies = false; } - await base.OnInitAsync(); + await base.OnInitializedAsync(); } } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor index 1b5f0e72a2..aea53dc9dc 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/DataGrid/BitDataGridDemo.razor @@ -1,8 +1,7 @@ @page "/components/datagrid" @page "/components/data-grid" - -@using Demo.Shared.Dtos.DataGridDemo @inherits AppComponentBase +@using Demo.Shared.Dtos.DataGridDemo componentParameters = [ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ErrorBoundary/BitErrorBoundaryDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ErrorBoundary/BitErrorBoundaryDemo.razor new file mode 100644 index 0000000000..1f4026a88a --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ErrorBoundary/BitErrorBoundaryDemo.razor @@ -0,0 +1,18 @@ +@page "/components/errorboundary" + + + + + + + + Throw an exception + + + + \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ErrorBoundary/BitErrorBoundaryDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ErrorBoundary/BitErrorBoundaryDemo.razor.cs new file mode 100644 index 0000000000..77db2989ae --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ErrorBoundary/BitErrorBoundaryDemo.razor.cs @@ -0,0 +1,96 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.ErrorBoundary; + +public partial class BitErrorBoundaryDemo +{ + private readonly List componentParameters = + [ + new() + { + Name = "AdditionalButtons", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The footer content of the boundary.", + }, + new() + { + Name = "Body", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "Alias of the ChildContent.", + }, + new() + { + Name = "Footer", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The footer content of the boundary.", + }, + new() + { + Name = "HomeText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the Home button.", + }, + new() + { + Name = "HomeUrl", + Type = "string?", + DefaultValue = "null", + Description = "The url of the home page for the Home button.", + }, + new() + { + Name = "OnError", + Type = "EventCallback", + DefaultValue = "", + Description = "The callback for when an error get caught by the boundary.", + }, + new() + { + Name = "RecoverText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the Recover button.", + }, + new() + { + Name = "RefreshText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the Refresh button.", + }, + new() + { + Name = "ShowException", + Type = "bool", + DefaultValue = "false", + Description = "Whether the actual exception information should be shown or not.", + }, + new() + { + Name = "Title", + Type = "string?", + DefaultValue = "null", + Description = "The header title of the boundary.", + }, + ]; + + + private void ThrowException() + { + throw new Exception("This is an exception!"); + } + + + + private readonly string example1RazorCode = @" + + Throw an exception +"; + private readonly string example1CsharpCode = @" +private void ThrowException() +{ + throw new Exception(""This is an exception!""); +}"; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ErrorBoundary/BitErrorBoundaryDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ErrorBoundary/BitErrorBoundaryDemo.razor.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor new file mode 100644 index 0000000000..ce77901e39 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor @@ -0,0 +1,60 @@ +@page "/components/messagebox" + + + + + + + + + + + + + + + Show + + + + + + + + + Show MessageBox + + + + + + Show MessageBox + + + + + +
Customize the appearance of BitActionButton using styles and CSS classes.
+
+
+ + + +
+ + + +
+ + + \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs new file mode 100644 index 0000000000..fe7b10e9c4 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs @@ -0,0 +1,155 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.MessageBox; + +public partial class BitMessageBoxDemo +{ + private readonly List componentParameters = + [ + new() + { + Name = "Body", + Type = "string?", + DefaultValue = "null", + Description = "The body of the message box.", + }, + new() + { + Name = "Classes", + Type = "BitMessageBoxClassStyles?", + DefaultValue = "null", + Description = "Custom CSS classes for different parts of the message box.", + LinkType = LinkType.Link, + Href = "#class-styles", + }, + new() + { + Name = "OkText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the Ok button.", + }, + new() + { + Name = "OnClose", + Type = "EventCallback", + DefaultValue = "", + Description = "The event callback for closing the message box.", + }, + new() + { + Name = "Styles", + Type = "BitMessageBoxClassStyles?", + DefaultValue = "null", + Description = "Custom CSS styles for different parts of the message box.", + LinkType = LinkType.Link, + Href = "#class-styles", + }, + new() + { + Name = "Title", + Type = "string?", + DefaultValue = "null", + Description = "The title of the message box.", + }, + ]; + + private readonly List componentSubClasses = + [ + new() + { + Id = "class-styles", + Title = "BitMessageBoxClassStyles", + Parameters = + [ + new() + { + Name = "Root", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the root element of the BitMessageBox." + }, + new() + { + Name = "Container", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the container of the BitMessageBox." + }, + new() + { + Name = "Header", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the header of the BitMessageBox." + }, + new() + { + Name = "Title", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the title of the BitMessageBox." + }, + new() + { + Name = "Spacer", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the BitSpacer of the BitMessageBox." + }, + new() + { + Name = "CloseButton", + Type = "BitButtonClassStyles?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the CloseButton of the BitMessageBox.", + LinkType = LinkType.Link, + Href = "/components/button/#class-styles" + }, + new() + { + Name = "Body", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the body of the BitMessageBox." + }, + new() + { + Name = "Footer", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the footer of the BitMessageBox." + }, + new() + { + Name = "OkButton", + Type = "BitButtonClassStyles?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the OkButton of the BitMessageBox.", + LinkType = LinkType.Link, + Href = "/components/button/#class-styles" + } + ] + } + ]; + + + private bool isModalOpen; + + [AutoInject] private BitModalService modalService { get; set; } = default!; + private async Task ShowMessageBox() + { + BitModalReference modalRef = default!; + Dictionary parameters = new() + { + { nameof(BitMessageBox.Title), "This is a title" }, + { nameof(BitMessageBox.Body), "This is a body." }, + { nameof(BitMessageBox.OnClose), EventCallback.Factory.Create(this, () => modalRef.Close()) } + }; + modalRef = await modalService.Show(parameters); + } + + [AutoInject] private BitMessageBoxService messageBoxService { get; set; } = default!; + private async Task ShowMessageBoxService() + { + await messageBoxService.Show("TITLE", "BODY"); + } +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.samples.cs new file mode 100644 index 0000000000..99d139bcd3 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.samples.cs @@ -0,0 +1,79 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.MessageBox; + +public partial class BitMessageBoxDemo +{ + private readonly string example1RazorCode = @" + + +"; + + private readonly string example2RazorCode = @" + isModalOpen = true"">Show + + isModalOpen = false"" Title=""This is the Title"" Body=""This is the Body!"" /> +"; + private readonly string example2CsharpCode = @" +private bool isModalOpen;"; + + private readonly string example3RazorCode = @" +Show MessageBox + +"; + private readonly string example3CsharpCode = @" +[AutoInject] private BitModalService modalService { get; set; } = default!; +private async Task ShowMessageBox() +{ + BitModalReference modalRef = default!; + Dictionary parameters = new() + { + { nameof(BitMessageBox.Title), ""This is a title"" }, + { nameof(BitMessageBox.Body), ""This is a body."" }, + { nameof(BitMessageBox.OnClose), EventCallback.Factory.Create(this, () => modalRef.Close()) } + }; + modalRef = await modalService.Show(parameters); +}"; + + private readonly string example4RazorCode = @" +Show MessageBox"; + private readonly string example4CsharpCode = @" +[AutoInject] private BitMessageBoxService messageBoxService { get; set; } = default!; +private async Task ShowMessageBoxService() +{ + await messageBoxService.Show(""TITLE"", ""BODY""); +}"; + + private readonly string example5RazorCode = @" + + + + + + + + +"; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.scss new file mode 100644 index 0000000000..aafd8697ea --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.scss @@ -0,0 +1,21 @@ +::deep { + .custom-msg { + background: linear-gradient(180deg, #3e0f0f, transparent) #000; + } + + .custom-msg-btn { + color: #fff; + font-weight: bold; + border-radius: 1rem; + border-color: #8f0101; + transition: background-color 1s; + background: linear-gradient(90deg, #d10000, transparent) #8f0101; + } + + .custom-msg-btn:hover { + color: #fff; + font-weight: bold; + border-color: #8f0101; + background-color: #8f0101; + } +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ModalService/BitModalServiceDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ModalService/BitModalServiceDemo.razor index dd4b124125..97d1285a2c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ModalService/BitModalServiceDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ModalService/BitModalServiceDemo.razor @@ -1,7 +1,5 @@ @page "/components/modalservice" -@inherits AppComponentBase - @@ -14,7 +12,7 @@ Show - + @* *@ \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor index 2a002c5dc2..d9aa2f9856 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor @@ -1,7 +1,5 @@ @page "/components/navpanel" -@inherits AppComponentBase - diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PdfReader/BitPdfReaderDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PdfReader/BitPdfReaderDemo.razor index cf249bdaef..a94ad63719 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PdfReader/BitPdfReaderDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/PdfReader/BitPdfReaderDemo.razor @@ -1,7 +1,5 @@ @page "/components/pdfreader" -@inherits AppComponentBase - diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor index f47eb7f2f0..550d7e4a1a 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor @@ -7,7 +7,7 @@ Description="circulartimepicker component of the bit BlazorUI components" /> diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor index 15fa1a4fe9..528e0015d1 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor @@ -7,7 +7,7 @@ Description="datepicker component of the bit BlazorUI components" /> diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor index 7360a31023..6062fc50c4 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor @@ -7,7 +7,7 @@ Description="daterangepicker component of the bit BlazorUI components" /> diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor index 4a07b5a7c0..a39a02df2f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor @@ -36,7 +36,35 @@ - + + +
Demonstrating the no-border style of BitSearchBox in both enabled and disabled states.
+

+
+ +

+ +
+ + + + + +
Demonstrating the accent colors of BitSearchBox.
+

+
+ +

+ +

+ +

+ +
+ + + +
Examples of BitSearchBox with various icon configurations such as fixed icon, no animation, custom icon, and no icon.


@@ -52,7 +80,7 @@ - +
Showcasing BitSearchBox with a search button in various configurations, including custom button icon and disabled state.


@@ -61,16 +89,20 @@



- -



+ +

+

+ +

+ - +
Explore styling and class customization for BitSearchBox, including component styles, custom classes, and detailed styles.


@@ -99,7 +131,7 @@ - +
Binding examples for BitSearchBox including two-way binding, OnChange, and OnSearch events.



@@ -131,7 +163,7 @@ - +
Demonstrating validation of BitSearchBox using data annotations.

@@ -147,7 +179,7 @@ - +
Examples of BitSearchBox with suggestion list, including custom filtering, minimum trigger characters, and more.



@@ -207,7 +239,7 @@ - +
Use the BitSearchBox component in right-to-left (RTL).


diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs index 51913864c2..31b7226206 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.cs @@ -8,10 +8,12 @@ public partial class BitSearchBoxDemo [ new() { - Name = "Autocomplete", - Type = "string?", + Name = "Accent", + Type = "BitColorKind?", DefaultValue = "null", - Description = "Specifies the value of the autocomplete attribute of the input component.", + Description = "The accent color kind of the search box.", + LinkType = LinkType.Link, + Href = "#color-kind-enum", }, new() { @@ -88,6 +90,13 @@ public partial class BitSearchBoxDemo Description = "The minimum character requirement for doing a search in suggested items.", }, new() + { + Name = "NoBorder", + Type = "bool", + DefaultValue = "false", + Description = "Removes the default border of the search box.", + }, + new() { Name = "OnClear", Type = "EventCallback", @@ -257,6 +266,39 @@ public partial class BitSearchBoxDemo private readonly List componentSubEnums = [ + new() + { + Id = "color-kind-enum", + Name = "BitColorKind", + Description = "Defines the color kinds available in the bit BlazorUI.", + Items = + [ + new() + { + Name = "Primary", + Description = "The primary color kind.", + Value = "0", + }, + new() + { + Name = "Secondary", + Description = "The secondary color kind.", + Value = "1", + }, + new() + { + Name = "Tertiary", + Description = "The tertiary color kind.", + Value = "2", + }, + new() + { + Name = "Transparent", + Description = "The transparent color kind.", + Value = "3", + }, + ] + }, new() { Id = "input-mode", @@ -411,19 +453,29 @@ private async Task> LoadItems(string? search, int count) "; private readonly string example3RazorCode = @" + +"; + + private readonly string example4RazorCode = @" + + + +"; + + private readonly string example5RazorCode = @" "; - private readonly string example4RazorCode = @" + private readonly string example6RazorCode = @" "; - private readonly string example5RazorCode = @" + private readonly string example7RazorCode = @"