From 2d1d6bd0a1aa5a2edfbce75509eaa258759a219c Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Tue, 17 Dec 2024 00:13:08 +0330 Subject: [PATCH 01/17] fix(blazorui): resolve link item click and navigation issues in BitNav #9504 (#9505) --- .../Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor | 2 +- .../Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor.cs | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor index a8fed5cdd7..4c2cf940fd 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor @@ -118,7 +118,7 @@ { <_BitNavItemContainer Href="@href" Target="@target" - OnClick="HandleOnClick" + OnClick="() => HandleOnClick(renderLink)" RenderLink="renderLink" Disabled="@(isEnabled is false)" AriaLabel="@Nav.GetAriaLabel(Item)" diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor.cs index dbe148bf7d..cd2271d7ab 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/_BitNavChild.razor.cs @@ -18,7 +18,7 @@ public partial class _BitNavChild where TItem : class - private async Task HandleOnClick() + private async Task HandleOnClick(bool renderLink) { if (Nav is null) return; if (Nav.GetIsEnabled(Item) is false) return; @@ -34,6 +34,10 @@ private async Task HandleOnClick() if (Nav.SelectedItem != Item || Nav.Reselectable) { + if (renderLink) + { + await Task.Yield(); // wait for the link to navigate first + } await Nav.OnItemClick.InvokeAsync(Item); } } From 45b0edd0652cc55e532c1fae34521407129e3ede Mon Sep 17 00:00:00 2001 From: Yaser Moradi Date: Tue, 17 Dec 2024 19:24:19 +0100 Subject: [PATCH 02/17] feat(templates): add Blazor WASM Standalone samples to cd pipelines and a bunch of unrelated stuff #9506 (#9507) --- .github/workflows/admin-sample.cd.yml | 50 ++++++++++++ .github/workflows/todo-sample.cd.yml | 47 +++++++++++ README.md | 4 +- .../Components/App.razor | 47 ++++++----- .../Extensions/HttpRequestExtensions.cs | 19 ----- .../wwwroot/service-worker.published.js | 3 +- .../Program.Services.cs | 11 ++- .../ServerApiSettings.cs | 7 ++ .../Components/App.razor | 77 +++++++++---------- .../Extensions/HttpRequestExtensions.cs | 19 ----- .../Extensions/HttpRequestExtensions.cs | 22 ------ .../Extensions/HttpRequestExtensions.cs | 22 ------ .../Components/App.razor | 29 ++++--- .../Extensions/HttpRequestExtensions.cs | 22 ------ 14 files changed, 188 insertions(+), 191 deletions(-) diff --git a/.github/workflows/admin-sample.cd.yml b/.github/workflows/admin-sample.cd.yml index 0e20c83b5a..20c90a0b1e 100644 --- a/.github/workflows/admin-sample.cd.yml +++ b/.github/workflows/admin-sample.cd.yml @@ -69,6 +69,56 @@ jobs: path: ${{env.DOTNET_ROOT}}/server include-hidden-files: true # Required for wwwroot/.well-known folder + deploy_blazor_wasm_standalone: + name: build blazor wasm standalone + runs-on: ubuntu-24.04 + + steps: + + - name: Checkout source code + uses: actions/checkout@v4 + + - name: Setup .NET + uses: actions/setup-dotnet@v4 + with: + global-json-file: src/global.json + + - name: Create project from Boilerplate + run: | + cd src/Templates/Boilerplate && dotnet build -c Release + dotnet pack -c Release -o . -p:ReleaseVersion=0.0.0 -p:PackageVersion=0.0.0 + dotnet new install Bit.Boilerplate.0.0.0.nupkg + cd ../../../ && dotnet new bit-bp --name AdminPanel --database PostgreSQL --sample Admin --appInsights --sentry --serverUrl ${{ env.SERVER_ADDRESS }} --filesStorage AzureBlobStorage --notification --captcha reCaptcha --signalR --framework net9.0 + + - name: Update core appsettings.json + uses: devops-actions/variable-substitution@v1.2 + with: + files: 'AdminPanel/src/Shared/appsettings.json, AdminPanel/src/Client/AdminPanel.Client.Core/appsettings.json, AdminPanel/src/Client/AdminPanel.Client.Web/appsettings.json, AdminPanel/src/Client/AdminPanel.Client.Web/appsettings.Production.json' + env: + ServerAddress: ${{ env.SERVER_ADDRESS }} + Logging.Sentry.Dsn: ${{ secrets.ADMINPANEL_SENTRY_DSN }} + GoogleRecaptchaSiteKey: ${{ secrets.GOOGLE_RECAPTCHA_SITE_KEY }} + AdsPushVapid.PublicKey: ${{ secrets.ADMINPANEL_PUBLIC_VAPIDKEY }} + ApplicationInsights.ConnectionString: ${{ secrets.APPLICATION_INSIGHTS_CONNECTION_STRING }} + + - uses: actions/setup-node@v4 + with: + node-version: 22 + + - name: Install wasm + run: cd src && dotnet workload install wasm-tools + + - name: Generate CSS/JS files + run: dotnet build AdminPanel/src/Client/AdminPanel.Client.Core/AdminPanel.Client.Core.csproj -t:BeforeBuildTasks -p:Version="${{ vars.APPLICATION_DISPLAY_VERSION}}" --no-restore -c Release + + - name: Publish + run: dotnet publish AdminPanel/src/Client/AdminPanel.Client.Web/AdminPanel.Client.Web.csproj -c Release -p:PwaEnabled=true -o ${{env.DOTNET_ROOT}}/client -p:Version="${{ vars.APPLICATION_DISPLAY_VERSION}}" + + - name: Upload to asw + run: | + npm install -g @azure/static-web-apps-cli + swa deploy --deployment-token ${{ secrets.ADMINPANEL_ASW_TOKEN }} --env production --app-location ${{env.DOTNET_ROOT}}/client/wwwroot + deploy_api_blazor: name: deploy api + blazor needs: build_api_blazor diff --git a/.github/workflows/todo-sample.cd.yml b/.github/workflows/todo-sample.cd.yml index 387e890cd5..b668a00726 100644 --- a/.github/workflows/todo-sample.cd.yml +++ b/.github/workflows/todo-sample.cd.yml @@ -121,6 +121,53 @@ jobs: CLOUDFLARE_ZONE: ${{ secrets.BITPLATFORM_DEV_CLOUDFLARE_ZONE }} CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }} + deploy_blazor_wasm_standalone: + name: build blazor wasm standalone + runs-on: ubuntu-24.04 + + steps: + + - name: Checkout source code + uses: actions/checkout@v4 + + - name: Setup .NET + uses: actions/setup-dotnet@v4 + with: + global-json-file: src/global.json + + - name: Create project from Boilerplate + run: | + cd src/Templates/Boilerplate && dotnet build -c Release + dotnet pack -c Release -o . -p:ReleaseVersion=0.0.0 -p:PackageVersion=0.0.0 + dotnet new install Bit.Boilerplate.0.0.0.nupkg + cd ../../../ && dotnet new bit-bp --name TodoSample --database PostgreSQL --sample Todo --serverUrl ${{ env.SERVER_ADDRESS }} --filesStorage AzureBlobStorage --notification --captcha reCaptcha --framework net9.0 + + - name: Update core appsettings.json + uses: devops-actions/variable-substitution@v1.2 + with: + files: 'TodoSample/src/Shared/appsettings.json, TodoSample/src/Client/TodoSample.Client.Core/appsettings.json, TodoSample/src/Client/TodoSample.Client.Web/appsettings.json, TodoSample/src/Client/TodoSample.Client.Web/appsettings.Production.json' + env: + ServerAddress: ${{ env.SERVER_ADDRESS }} + GoogleRecaptchaSiteKey: ${{ secrets.GOOGLE_RECAPTCHA_SITE_KEY }} + + - uses: actions/setup-node@v4 + with: + node-version: 22 + + - name: Install wasm + run: cd src && dotnet workload install wasm-tools + + - name: Generate CSS/JS files + run: dotnet build TodoSample/src/Client/TodoSample.Client.Core/TodoSample.Client.Core.csproj -t:BeforeBuildTasks -p:Version="${{ vars.APPLICATION_DISPLAY_VERSION}}" --no-restore -c Release + + - name: Publish + run: dotnet publish TodoSample/src/Client/TodoSample.Client.Web/TodoSample.Client.Web.csproj -c Release -p:PwaEnabled=true -o ${{env.DOTNET_ROOT}}/client -p:Version="${{ vars.APPLICATION_DISPLAY_VERSION}}" -p:RunAOTCompilation=true -p:MultilingualEnabled=false + + - name: Upload to asw + run: | + npm install -g @azure/static-web-apps-cli + swa deploy --deployment-token ${{ secrets.TODO_ASW_TOKEN }} --env production --app-location ${{env.DOTNET_ROOT}}/client/wwwroot + build_blazor_hybrid_windows: name: build blazor hybrid (windows) runs-on: windows-2022 diff --git a/README.md b/README.md index d189ce9e8f..d0ffb560b2 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,9 @@ The following apps are our open-source projects powered by the bit platform show 1. [bitplatform.dev](https://bitplatform.dev): .NET 9 Pre-rendered SPA with Blazor WebAssembly 2. [blazorui.bitplatform.dev](https://blazorui.bitplatform.dev): .NET 9 Pre-rendered PWA with Blazor WebAssembly 3. [todo.bitplatform.dev](https://todo.bitplatform.dev): .NET 8 Pre-rendered PWA with Blazor WebAssembly -5. [adminpanel.bitplatform.dev](https://adminpanel.bitplatform.dev): .NET 9 PWA with Blazor WebAssembly Standalone (Hosted on Cloudflare Pages) +5. [adminpanel.bitplatform.dev](https://adminpanel.bitplatform.dev): .NET 9 PWA with Blazor WebAssembly +6. [adminpanel.bitplatform.cc](https://adminpanel.bitplatform.cc): .NET 9 PWA with Blazor WebAssembly Standalone (Free Azure static web app) +7. [todo.bitplatform.cc](https://todo.bitplatform.cc): AOT Compiled .NET 9 PWA with Blazor WebAssembly Standalone (Free Azure static web app) [Todo](https://todo.bitplatform.dev) & [Adminpanel](https://adminpanel.bitplatform.dev) web apps will launch their respective Android and iOS applications if you have already installed them, mirroring the behavior of apps like YouTube and Instagram. diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Components/App.razor b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Components/App.razor index 8d494028ae..97d974449b 100644 --- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Components/App.razor +++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Components/App.razor @@ -60,34 +60,31 @@ } - @if (HttpContext.Request.IsCrawlerClient() is false) + + @if (AppRenderMode.PwaEnabled) + { + + + + } + else { - - @if (AppRenderMode.PwaEnabled) - { - - - - } - else - { - - } - - - - + } + }); + } + + + + diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Extensions/HttpRequestExtensions.cs b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Extensions/HttpRequestExtensions.cs index 6b0aa99f04..345f142315 100644 --- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Extensions/HttpRequestExtensions.cs +++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Extensions/HttpRequestExtensions.cs @@ -18,23 +18,4 @@ public static Uri GetBaseUrl(this HttpRequest req) return uriBuilder.Uri; } - - public static bool IsCrawlerClient(this HttpRequest request) - { - if (request.Headers.TryGetValue(HeaderNames.UserAgent, out StringValues userAgentHeaderValue) is false) - return false; - - string? userAgent = userAgentHeaderValue.FirstOrDefault(); - - if (userAgent is null) - return false; - - if (userAgent.Contains("google", StringComparison.InvariantCultureIgnoreCase)) return true; - - if (userAgent.Contains("bing", StringComparison.InvariantCultureIgnoreCase)) return true; - - if (userAgent.Contains("lighthouse", StringComparison.InvariantCultureIgnoreCase)) return true; - - return false; - } } diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.published.js b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.published.js index ce34c6bc0c..463978c2b4 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.published.js +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.published.js @@ -27,8 +27,7 @@ self.assetsExclude = [ /bit\.blazorui\.fluent-light\.css$/, // If a PDF viewer is needed in the PWA, remove these two lines: /pdfjs-4\.7\.76\.js$/, - /pdfjs-4\.7\.76-worker\.js$/, - /Boilerplate\.Client\.Web\.styles\.css$/ + /pdfjs-4\.7\.76-worker\.js$/ ]; self.externalAssets = [ { diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Program.Services.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Program.Services.cs index 1bfd6afd87..b777853cb8 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Program.Services.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Program.Services.cs @@ -124,10 +124,15 @@ public static void AddServerApiProjectServices(this WebApplicationBuilder builde configuration.Bind(settings); var webClientUrl = settings.WebClientUrl; + var allowedOrigins = settings.Cors?.AllowedOrigins?.ToList() ?? []; - policy.SetIsOriginAllowed(origin => - AllowedOriginsRegex().IsMatch(origin) || - (string.IsNullOrEmpty(webClientUrl) is false && string.Equals(origin, webClientUrl, StringComparison.InvariantCultureIgnoreCase))) + if (string.IsNullOrEmpty(webClientUrl) is false) + { + allowedOrigins.Add(webClientUrl); + } + + policy.SetIsOriginAllowed(origin => AllowedOriginsRegex().IsMatch(origin) + || allowedOrigins.Any(o => string.Equals(o, origin, StringComparison.InvariantCultureIgnoreCase))) .AllowAnyHeader() .AllowAnyMethod() .WithExposedHeaders(HeaderNames.RequestId); diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/ServerApiSettings.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/ServerApiSettings.cs index c810c39852..f0f6989863 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/ServerApiSettings.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/ServerApiSettings.cs @@ -39,6 +39,8 @@ public partial class ServerApiSettings : SharedSettings public ForwardedHeadersOptions? ForwardedHeaders { get; set; } + public CorsOptions? Cors { get; set; } + public override IEnumerable Validate(ValidationContext validationContext) { var validationResults = base.Validate(validationContext).ToList(); @@ -157,3 +159,8 @@ public partial class SmsOptions string.IsNullOrEmpty(TwilioAccountSid) is false && string.IsNullOrEmpty(TwilioAutoToken) is false; } + +public class CorsOptions +{ + public string[] AllowedOrigins { get; set; } = []; +} diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor index 0e360e84d5..6608eeb272 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor @@ -68,49 +68,46 @@ - @if (HttpContext.Request.IsCrawlerClient() is false) - { - @*#if (framework == "net9.0")*@ - - @*#else*@ - @*#if (IsInsideProjectTemplate == true)*@ - /* - @*#endif)*@ - - @*#if (IsInsideProjectTemplate == true)*@ - */ - @*#endif)*@ + @*#if (framework == "net9.0")*@ + + @*#else*@ + @*#if (IsInsideProjectTemplate == true)*@ + /* @*#endif)*@ - - @if (serverWebSettings.WebAppRender.PwaEnabled) - { - - - - } - else - { - + @*#if (IsInsideProjectTemplate == true)*@ + */ + @*#endif)*@ + @*#endif)*@ + + @if (serverWebSettings.WebAppRender.PwaEnabled) + { + + + + } + else + { + - } - - @*#if (offlineDb == true)*@ - - @*#endif*@ - - - + } + }); + } + + @*#if (offlineDb == true)*@ + + @*#endif*@ + + + diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Extensions/HttpRequestExtensions.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Extensions/HttpRequestExtensions.cs index dcd8b949b2..da3516f4d6 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Extensions/HttpRequestExtensions.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Extensions/HttpRequestExtensions.cs @@ -18,23 +18,4 @@ internal static Uri GetBaseUrl(this HttpRequest req) return uriBuilder.Uri; } - - public static bool IsCrawlerClient(this HttpRequest request) - { - if (request.Headers.TryGetValue(HeaderNames.UserAgent, out StringValues userAgentHeaderValue) is false) - return false; - - string? userAgent = userAgentHeaderValue.FirstOrDefault(); - - if (userAgent is null) - return false; - - if (userAgent.Contains("google", StringComparison.InvariantCultureIgnoreCase)) return true; - - if (userAgent.Contains("bing", StringComparison.InvariantCultureIgnoreCase)) return true; - - if (userAgent.Contains("lighthouse", StringComparison.InvariantCultureIgnoreCase)) return true; - - return false; - } } diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Server/Extensions/HttpRequestExtensions.cs b/src/Websites/Careers/src/Bit.Websites.Careers.Server/Extensions/HttpRequestExtensions.cs index 12760a7e32..fa1264050d 100644 --- a/src/Websites/Careers/src/Bit.Websites.Careers.Server/Extensions/HttpRequestExtensions.cs +++ b/src/Websites/Careers/src/Bit.Websites.Careers.Server/Extensions/HttpRequestExtensions.cs @@ -17,26 +17,4 @@ public static string GetBaseUrl(this HttpRequest req) return uriBuilder.Uri.AbsoluteUri; } - - public static bool IsCrawlerClient(this HttpRequest request) - { - var agent = GetLoweredUserAgent(request); - - if (agent.Contains("google")) return true; - - if (agent.Contains("bing")) return true; - - if (agent.Contains("lighthouse")) return true; - - return false; - } - - private static string GetLoweredUserAgent(HttpRequest request) - { - var userAgent = request.Headers[HeaderNames.UserAgent].ToString(); - - if (string.IsNullOrEmpty(userAgent)) return string.Empty; - - return userAgent.ToLowerInvariant(); - } } diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Server/Extensions/HttpRequestExtensions.cs b/src/Websites/Platform/src/Bit.Websites.Platform.Server/Extensions/HttpRequestExtensions.cs index 12760a7e32..fa1264050d 100644 --- a/src/Websites/Platform/src/Bit.Websites.Platform.Server/Extensions/HttpRequestExtensions.cs +++ b/src/Websites/Platform/src/Bit.Websites.Platform.Server/Extensions/HttpRequestExtensions.cs @@ -17,26 +17,4 @@ public static string GetBaseUrl(this HttpRequest req) return uriBuilder.Uri.AbsoluteUri; } - - public static bool IsCrawlerClient(this HttpRequest request) - { - var agent = GetLoweredUserAgent(request); - - if (agent.Contains("google")) return true; - - if (agent.Contains("bing")) return true; - - if (agent.Contains("lighthouse")) return true; - - return false; - } - - private static string GetLoweredUserAgent(HttpRequest request) - { - var userAgent = request.Headers[HeaderNames.UserAgent].ToString(); - - if (string.IsNullOrEmpty(userAgent)) return string.Empty; - - return userAgent.ToLowerInvariant(); - } } diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Components/App.razor b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Components/App.razor index 3b99fd9576..8e4350796e 100644 --- a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Components/App.razor +++ b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Components/App.razor @@ -42,23 +42,20 @@ - @if (HttpContext.Request.IsCrawlerClient() is false) - { - - + - - - } + } + }); + + + diff --git a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Extensions/HttpRequestExtensions.cs b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Extensions/HttpRequestExtensions.cs index 12760a7e32..fa1264050d 100644 --- a/src/Websites/Sales/src/Bit.Websites.Sales.Server/Extensions/HttpRequestExtensions.cs +++ b/src/Websites/Sales/src/Bit.Websites.Sales.Server/Extensions/HttpRequestExtensions.cs @@ -17,26 +17,4 @@ public static string GetBaseUrl(this HttpRequest req) return uriBuilder.Uri.AbsoluteUri; } - - public static bool IsCrawlerClient(this HttpRequest request) - { - var agent = GetLoweredUserAgent(request); - - if (agent.Contains("google")) return true; - - if (agent.Contains("bing")) return true; - - if (agent.Contains("lighthouse")) return true; - - return false; - } - - private static string GetLoweredUserAgent(HttpRequest request) - { - var userAgent = request.Headers[HeaderNames.UserAgent].ToString(); - - if (string.IsNullOrEmpty(userAgent)) return string.Empty; - - return userAgent.ToLowerInvariant(); - } } From 75a5ee07e932d50a1188c6b00b0a963e7a0f6b40 Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Wed, 18 Dec 2024 12:56:32 +0330 Subject: [PATCH 03/17] feat(blazorui): improve BitSwipeTrap demo page #9443 (#9458) --- .../SwipeTrap/BitSwipeTrapDemo.razor | 54 ++ .../SwipeTrap/BitSwipeTrapDemo.razor.cs | 345 ++++--------- .../BitSwipeTrapDemo.razor.samples.cs | 487 ++++++++++++++++++ .../SwipeTrap/BitSwipeTrapDemo.razor.scss | 53 ++ 4 files changed, 684 insertions(+), 255 deletions(-) create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.samples.cs diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor index b6d8ad507d..12c131a22b 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor @@ -91,5 +91,59 @@ OnCancel="HandleOnCancelList" /> + + + +
An illustrative example of integrating this component into a straightforward mobile application.
+
+
+
+ +
+ + + + + bit BlazorUI + + + +
+
+ + + + Swipe left or right + + + +
+
+

Left Menu

+
Item1
+
Item2
+
Item3
+
+
+
+
+

Right Menu

+
Item1
+
Item2
+
Item3
+
+
+ +
+ +
+
+ + \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.cs index 800b85ba46..7295603970 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.cs @@ -296,275 +296,110 @@ private void ResetList() } - - private readonly string example1RazorCode = @" - - - -
-
StartX: @swipeTrapEventArgs?.StartX
-
StartY: @swipeTrapEventArgs?.StartY
-
DiffX: @swipeTrapEventArgs?.DiffX
-
DiffY: @swipeTrapEventArgs?.DiffY
-
---
-
Triggered? @isTriggered
-
Trigger direction: @swipeTrapTriggerArgs?.Direction
-
Trigger diffX: @swipeTrapTriggerArgs?.DiffX
-
Trigger diffY: @swipeTrapTriggerArgs?.DiffY
-
-"; - private readonly string example1CsharpCode = @" -private bool isTriggeredBasic; -BitSwipeTrapEventArgs? swipeTrapEventArgsBasic; -BitSwipeTrapTriggerArgs? swipeTrapTriggerArgsBasic; -private void HandleOnStartBasic(BitSwipeTrapEventArgs args) -{ - swipeTrapEventArgsBasic = args; -} -private void HandleOnMoveBasic(BitSwipeTrapEventArgs args) -{ - swipeTrapEventArgsBasic = args; -} -private void HandleOnEndBasic(BitSwipeTrapEventArgs args) -{ - swipeTrapEventArgsBasic = args; -} -private void HandleOnTriggerBasic(BitSwipeTrapTriggerArgs args) -{ - isTriggeredBasic = true; - swipeTrapTriggerArgsBasic = args; - _ = Task.Delay(2000).ContinueWith(_ => + private decimal? diffXPanelAdvanced; + private BitSwipeDirection? direction; + private BitSwipeDirection? panelOpen; + private void OpenPanelAdvanced(BitSwipeDirection swipeDirection) { - isTriggeredBasic = false; - swipeTrapEventArgsBasic = null; - swipeTrapTriggerArgsBasic = null; - InvokeAsync(StateHasChanged); - }); -}"; + if (panelOpen == swipeDirection) return; - private readonly string example2RazorCode = @" - - -
- -
- - -
-

Title

-
Item1
-
Item2
-
Item3
-
- -
-
"; - private readonly string example2CsharpCode = @" -private decimal diffXPanel; -private bool isPanelOpen; -private void OpenPanel() -{ - isPanelOpen = true; -} -private void ClosePanel() -{ - isPanelOpen = false; -} -private void HandleOnMovePanel(BitSwipeTrapEventArgs args) -{ - diffXPanel = args.DiffX; -} -private void HandleOnEndPanel(BitSwipeTrapEventArgs args) -{ - diffXPanel = 0; -} -private void HandleOnTriggerPanel(BitSwipeTrapTriggerArgs args) -{ - if (args.Direction == BitSwipeDirection.Left) + private void ClosePanelAdvanced() { - diffXPanel = 0; - ClosePanel(); - } -} -private string GetPanelStyle() -{ - return diffXPanel < 0 ? $""transform: translateX({diffXPanel}px)"" : """"; -}"; - - private readonly string example3RazorCode = @" - - -
- @foreach (int idx in itemsList) + private void HandleOnEndPanelAdvanced(BitSwipeTrapEventArgs args) { - var i = idx; -
-
Delete
- HandleOnMoveList(args, i)"" - OnEnd=""args => HandleOnEndList(args, i)"" - OnTrigger=""args => HandleOnTriggerList(args, i)""> -
-
Item@(i + 1)
-
- -
+ if (panelOpen.HasValue) + { + diffXPanelAdvanced = 0; + } + else + { + diffXPanelAdvanced = null; + } } -
-Reset -"; - private readonly string example3CsharpCode = @" -private int deletingIndex = -1; -private bool isListDialogOpen; -private TaskCompletionSource listTcs; -private List itemsList = Enumerable.Range(0, 10).ToList(); -private decimal[] diffXList = Enumerable.Repeat(0m, 10).ToArray(); -private void HandleOnMoveList(BitSwipeTrapEventArgs args, int index) -{ - diffXList[index] = args.DiffX; -} -private void HandleOnEndList(BitSwipeTrapEventArgs args, int index) -{ - if (diffXList[index] < 60) + private void HandleOnTriggerPanelAdvanced(BitSwipeTrapTriggerArgs args) { - diffXList[index] = 0; + if (args.Direction == BitSwipeDirection.Left) + { + if (panelOpen.HasValue is false || panelOpen == BitSwipeDirection.Right) + { + OpenPanelAdvanced(BitSwipeDirection.Right); + } + else if (panelOpen == BitSwipeDirection.Left) + { + ClosePanelAdvanced(); + } + } + else if (args.Direction == BitSwipeDirection.Right) + { + if (panelOpen.HasValue is false || panelOpen == BitSwipeDirection.Left) + { + OpenPanelAdvanced(BitSwipeDirection.Left); + } + else if (panelOpen == BitSwipeDirection.Right) + { + ClosePanelAdvanced(); + } + } } -} -private async Task HandleOnTriggerList(BitSwipeTrapTriggerArgs args, int index) -{ - if (args.Direction == BitSwipeDirection.Right) + private string GetLeftPanelAdvancedStyle() { - deletingIndex = index; - listTcs = new(); - isListDialogOpen = true; - await listTcs.Task; - isListDialogOpen = false; - diffXList[index] = 0; - deletingIndex = -1; + if (panelOpen == BitSwipeDirection.Left && direction != BitSwipeDirection.Left) + { + return "transform: translateX(0px)"; + } + else if((panelOpen.HasValue is false && direction == BitSwipeDirection.Right) || (panelOpen == BitSwipeDirection.Left && direction == BitSwipeDirection.Left)) + { + return diffXPanelAdvanced switch + { + 0 or > 200 => "transform: translateX(0px)", + < 0 and < 200 => $"transform: translateX({diffXPanelAdvanced}px)", + > 0 => $"transform: translateX(calc(-100% + {diffXPanelAdvanced}px))", + _ => string.Empty + }; + } + + return string.Empty; } -} -private string GetRowStyle(int index) -{ - var x = Math.Min(diffXList[index], 60); - return x > 0 ? $""transform: translateX({x}px)"" : """"; -} -private void HandleOnOkList() -{ - if (deletingIndex != -1) + private string GetRightPanelAdvancedStyle() { - itemsList.Remove(deletingIndex); + if (panelOpen == BitSwipeDirection.Right && direction != BitSwipeDirection.Right) + { + return "transform: translateX(0px)"; + } + else if ((panelOpen.HasValue is false && direction == BitSwipeDirection.Left) || (panelOpen == BitSwipeDirection.Right && direction == BitSwipeDirection.Right)) + { + return diffXPanelAdvanced switch + { + 0 or < -200 => "transform: translateX(0px)", + > 0 => $"transform: translateX({diffXPanelAdvanced}px)", + < 0 => $"transform: translateX(calc(100% - {(-1 * diffXPanelAdvanced)}px))", + _ => string.Empty + }; + } + + return string.Empty; } - listTcs.SetResult(); -} -private void HandleOnCancelList() -{ - listTcs.SetResult(); -} -private void ResetList() -{ - itemsList = Enumerable.Range(0, 10).ToList(); -}"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.samples.cs new file mode 100644 index 0000000000..68af948649 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.samples.cs @@ -0,0 +1,487 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Utilities.SwipeTrap; + +public partial class BitSwipeTrapDemo +{ + + private readonly string example1RazorCode = @" + + + +
+
StartX: @swipeTrapEventArgs?.StartX
+
StartY: @swipeTrapEventArgs?.StartY
+
DiffX: @swipeTrapEventArgs?.DiffX
+
DiffY: @swipeTrapEventArgs?.DiffY
+
---
+
Triggered? @isTriggered
+
Trigger direction: @swipeTrapTriggerArgs?.Direction
+
Trigger diffX: @swipeTrapTriggerArgs?.DiffX
+
Trigger diffY: @swipeTrapTriggerArgs?.DiffY
+
+"; + private readonly string example1CsharpCode = @" +private bool isTriggeredBasic; +BitSwipeTrapEventArgs? swipeTrapEventArgsBasic; +BitSwipeTrapTriggerArgs? swipeTrapTriggerArgsBasic; +private void HandleOnStartBasic(BitSwipeTrapEventArgs args) +{ + swipeTrapEventArgsBasic = args; +} +private void HandleOnMoveBasic(BitSwipeTrapEventArgs args) +{ + swipeTrapEventArgsBasic = args; +} +private void HandleOnEndBasic(BitSwipeTrapEventArgs args) +{ + swipeTrapEventArgsBasic = args; +} +private void HandleOnTriggerBasic(BitSwipeTrapTriggerArgs args) +{ + isTriggeredBasic = true; + swipeTrapTriggerArgsBasic = args; + _ = Task.Delay(2000).ContinueWith(_ => + { + isTriggeredBasic = false; + swipeTrapEventArgsBasic = null; + swipeTrapTriggerArgsBasic = null; + InvokeAsync(StateHasChanged); + }); +}"; + + private readonly string example2RazorCode = @" + + +
+ +
+ + +
+

Title

+
Item1
+
Item2
+
Item3
+
+ +
+
"; + private readonly string example2CsharpCode = @" +private decimal diffXPanel; +private bool isPanelOpen; +private void OpenPanel() +{ + isPanelOpen = true; +} +private void ClosePanel() +{ + isPanelOpen = false; +} +private void HandleOnMovePanel(BitSwipeTrapEventArgs args) +{ + diffXPanel = args.DiffX; +} +private void HandleOnEndPanel(BitSwipeTrapEventArgs args) +{ + diffXPanel = 0; +} +private void HandleOnTriggerPanel(BitSwipeTrapTriggerArgs args) +{ + if (args.Direction == BitSwipeDirection.Left) + { + diffXPanel = 0; + ClosePanel(); + } +} +private string GetPanelStyle() +{ + return diffXPanel < 0 ? $""transform: translateX({diffXPanel}px)"" : """"; +}"; + + private readonly string example3RazorCode = @" + + +
+ @foreach (int idx in itemsList) + { + var i = idx; +
+
Delete
+ HandleOnMoveList(args, i)"" + OnEnd=""args => HandleOnEndList(args, i)"" + OnTrigger=""args => HandleOnTriggerList(args, i)""> +
+
Item@(i + 1)
+
+ +
+ } +
+Reset +"; + private readonly string example3CsharpCode = @" +private int deletingIndex = -1; +private bool isListDialogOpen; +private TaskCompletionSource listTcs; +private List itemsList = Enumerable.Range(0, 10).ToList(); +private decimal[] diffXList = Enumerable.Repeat(0m, 10).ToArray(); +private void HandleOnMoveList(BitSwipeTrapEventArgs args, int index) +{ + diffXList[index] = args.DiffX; +} +private void HandleOnEndList(BitSwipeTrapEventArgs args, int index) +{ + if (diffXList[index] < 60) + { + diffXList[index] = 0; + } +} +private async Task HandleOnTriggerList(BitSwipeTrapTriggerArgs args, int index) +{ + if (args.Direction == BitSwipeDirection.Right) + { + deletingIndex = index; + listTcs = new(); + isListDialogOpen = true; + await listTcs.Task; + isListDialogOpen = false; + diffXList[index] = 0; + deletingIndex = -1; + } +} +private string GetRowStyle(int index) +{ + var x = Math.Min(diffXList[index], 60); + return x > 0 ? $""transform: translateX({x}px)"" : """"; +} +private void HandleOnOkList() +{ + if (deletingIndex != -1) + { + itemsList.Remove(deletingIndex); + } + listTcs.SetResult(); +} +private void HandleOnCancelList() +{ + listTcs.SetResult(); +} +private void ResetList() +{ + itemsList = Enumerable.Range(0, 10).ToList(); +}"; + + private readonly string example4RazorCode = @" + + +
+
+ +
+ + + + + bit BlazorUI + + + +
+
+ + + + Swipe left or right + + + +
+
+

Left Menu

+
Item1
+
Item2
+
Item3
+
+
+
+
+

Right Menu

+
Item1
+
Item2
+
Item3
+
+
+ +
+ +
+
"; + private readonly string example4CsharpCode = @" +private decimal? diffXPanelAdvanced; +private BitSwipeDirection? direction; +private BitSwipeDirection? panelOpen; +private void OpenPanelAdvanced(BitSwipeDirection swipeDirection) +{ + if (panelOpen == swipeDirection) return; + + direction = null; + panelOpen = swipeDirection; + diffXPanelAdvanced = 0; +} +private void ClosePanelAdvanced() +{ + panelOpen = null; + diffXPanelAdvanced = null; +} +private void HandleOnMovePanelAdvanced(BitSwipeTrapEventArgs args) +{ + diffXPanelAdvanced = args.DiffX; + + if (Math.Abs(args.DiffX) > 2 || Math.Abs(args.DiffY) > 2) + { + direction = Math.Abs(args.DiffX) > Math.Abs(args.DiffY) + ? args.DiffX > 0 ? BitSwipeDirection.Right : BitSwipeDirection.Left + : args.DiffY > 0 ? BitSwipeDirection.Bottom : BitSwipeDirection.Top; + } + else + { + direction = null; + } +} +private void HandleOnEndPanelAdvanced(BitSwipeTrapEventArgs args) +{ + if (panelOpen.HasValue) + { + diffXPanelAdvanced = 0; + } + else + { + diffXPanelAdvanced = null; + } +} +private void HandleOnTriggerPanelAdvanced(BitSwipeTrapTriggerArgs args) +{ + if (args.Direction == BitSwipeDirection.Left) + { + if (panelOpen.HasValue is false || panelOpen == BitSwipeDirection.Right) + { + OpenPanelAdvanced(BitSwipeDirection.Right); + } + else if (panelOpen == BitSwipeDirection.Left) + { + ClosePanelAdvanced(); + } + } + else if (args.Direction == BitSwipeDirection.Right) + { + if (panelOpen.HasValue is false || panelOpen == BitSwipeDirection.Left) + { + OpenPanelAdvanced(BitSwipeDirection.Left); + } + else if (panelOpen == BitSwipeDirection.Right) + { + ClosePanelAdvanced(); + } + } +} +private string GetLeftPanelAdvancedStyle() +{ + if (panelOpen == BitSwipeDirection.Left && direction != BitSwipeDirection.Left) + { + return ""transform: translateX(0px)""; + } + else if((panelOpen.HasValue is false && direction == BitSwipeDirection.Right) || (panelOpen == BitSwipeDirection.Left && direction == BitSwipeDirection.Left)) + { + return diffXPanelAdvanced switch + { + 0 or > 200 => ""transform: translateX(0px)"", + < 0 and < 200 => $""transform: translateX({diffXPanelAdvanced}px)"", + > 0 => $""transform: translateX(calc(-100% + {diffXPanelAdvanced}px))"", + _ => string.Empty + }; + } + + return string.Empty; +} +private string GetRightPanelAdvancedStyle() +{ + if (panelOpen == BitSwipeDirection.Right && direction != BitSwipeDirection.Right) + { + return ""transform: translateX(0px)""; + } + else if ((panelOpen.HasValue is false && direction == BitSwipeDirection.Left) || (panelOpen == BitSwipeDirection.Right && direction == BitSwipeDirection.Right)) + { + return diffXPanelAdvanced switch + { + 0 or < -200 => ""transform: translateX(0px)"", + > 0 => $""transform: translateX({diffXPanelAdvanced}px)"", + < 0 => $""transform: translateX(calc(100% - {(-1 * diffXPanelAdvanced)}px))"", + _ => string.Empty + }; + } + + return string.Empty; +}"; +} + diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.scss index 5b3a05aedb..77a79b3945 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/SwipeTrap/BitSwipeTrapDemo.razor.scss @@ -83,5 +83,58 @@ } } +.mobile-frame { + width: 375px; + height: 712px; + overflow: hidden; + position: relative; + border-radius: 36px; + border: 16px solid #333; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: var(--bit-clr-fg-sec); + + .screen { + width: 100%; + height: 100%; + overflow: auto; + } +} + ::deep { + .panel-adv-container { + cursor: grab; + overflow: hidden; + position: relative; + + .panel-adv { + color: black; + cursor: grab; + inset-block: 0; + user-select: none; + position: absolute; + background-color: lightgray; + + &.left { + left: 0; + width: 200px; + transform: translateX(-100%); + } + + &.right { + right: 0; + width: 200px; + transform: translateX(100%); + } + + .panel-adv-trap { + gap: 1rem; + height: 100%; + display: flex; + padding-top: 0.2rem; + padding-left: 0.8rem; + flex-direction: column; + background-color: gray; + } + } + } } From 4a4e032bc71e72980d0d28b580dc393d2930cf5a Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Wed, 18 Dec 2024 16:36:36 +0330 Subject: [PATCH 04/17] fix(templates): resolve sentry package reference issue in Boilerplate #9501 (#9508) --- .../Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj index 45c52c0a12..4c515ed303 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Boilerplate.Server.Web.csproj @@ -14,6 +14,7 @@ + From 84d075dad15e6b21f93316553a3f8a8ca0066818 Mon Sep 17 00:00:00 2001 From: Yaser Moradi Date: Wed, 18 Dec 2024 16:40:03 +0100 Subject: [PATCH 05/17] fix(templates): resolve search engines issue with StreamRendering enabled #9510 (#9511) --- .../wwwroot/service-worker.published.js | 10 ------ .../Components/App.razor | 27 ++++++++------- .../Components/App.razor.cs | 34 ++++++++++++++++++- .../Extensions/HttpRequestExtensions.cs | 29 ++++++++++++++-- 4 files changed, 74 insertions(+), 26 deletions(-) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.published.js b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.published.js index 463978c2b4..b1e5efe4d9 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.published.js +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/service-worker.published.js @@ -34,17 +34,7 @@ self.externalAssets = [ "url": "/" }, { - //#if (framework == "net9.0") url: "_framework/blazor.web.js" - //#else - //#if (IsInsideProjectTemplate == true) - /* - //#endif - url: "_framework/blazor.web.js" - //#if (IsInsideProjectTemplate == true) - */ - //#endif - //#endif }, { "url": "Boilerplate.Server.Web.styles.css" diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor index 6608eeb272..715ead4ecc 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor @@ -1,6 +1,5 @@ @using Boilerplate.Client.Web.Components @using Microsoft.AspNetCore.Components.Routing -@attribute [StreamRendering(enabled: true)] @*+:cnd:noEmit*@ @{ @@ -66,19 +65,21 @@ } - + @if (HttpContext.Request.IsCrawlerClient()) + { + // For StreamRenderingDisabledContainer, read comments in App.razor.cs + + + + } + else + { + + + + } - @*#if (framework == "net9.0")*@ - - @*#else*@ - @*#if (IsInsideProjectTemplate == true)*@ - /* - @*#endif)*@ - - @*#if (IsInsideProjectTemplate == true)*@ - */ - @*#endif)*@ - @*#endif)*@ + @if (serverWebSettings.WebAppRender.PwaEnabled) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor.cs index e745ec44e9..9e5be58fdf 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Components/App.razor.cs @@ -1,6 +1,7 @@ using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Localization; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.AspNetCore.Components.Rendering; namespace Boilerplate.Server.Web.Components; @@ -24,3 +25,34 @@ protected override void OnInitialized() } } } + +/// +/// Streaming pre-rendering enhances user experience (UX) and overall application performance. +/// However, it prevents search engines from accessing your pre-rendered dynamic content. +/// To address this, the conditional logic in App.razor, leveraging , +/// disables streaming specifically for search engine crawlers, while maintaining the improved UX and performance for regular users. +/// +[StreamRendering(enabled: true)] +public class StreamRenderingEnabledContainer : ComponentBase +{ + [Parameter] public RenderFragment? ChildContent { get; set; } + + protected override void BuildRenderTree(RenderTreeBuilder builder) + { + builder.AddContent(0, ChildContent); + } +} + +/// +/// +/// +[StreamRendering(enabled: false)] +public class StreamRenderingDisabledContainer : ComponentBase +{ + [Parameter] public RenderFragment? ChildContent { get; set; } + + protected override void BuildRenderTree(RenderTreeBuilder builder) + { + builder.AddContent(0, ChildContent); + } +} diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Extensions/HttpRequestExtensions.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Extensions/HttpRequestExtensions.cs index da3516f4d6..e676136933 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Extensions/HttpRequestExtensions.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Web/Extensions/HttpRequestExtensions.cs @@ -1,5 +1,4 @@ -using Microsoft.Extensions.Primitives; -using Microsoft.Net.Http.Headers; +using Microsoft.Net.Http.Headers; namespace Microsoft.AspNetCore.Http; @@ -18,4 +17,30 @@ internal static Uri GetBaseUrl(this HttpRequest req) return uriBuilder.Uri; } + + public static bool IsCrawlerClient(this HttpRequest request) + { + var agent = GetLoweredUserAgent(request); + + if (agent.Contains("google")) return true; + + if (agent.Contains("bing")) return true; + + if (agent.Contains("yahoo")) return true; + + if (agent.Contains("duckduck")) return true; + + if (agent.Contains("yandex")) return true; + + return false; + } + + private static string GetLoweredUserAgent(HttpRequest request) + { + var userAgent = request.Headers[HeaderNames.UserAgent].ToString(); + + if (string.IsNullOrEmpty(userAgent)) return string.Empty; + + return userAgent.ToLowerInvariant(); + } } From f4382c418e2980ebdc2110cc8f15b389fa6479e1 Mon Sep 17 00:00:00 2001 From: Yaser Moradi Date: Wed, 18 Dec 2024 20:28:58 +0100 Subject: [PATCH 06/17] feat(deps): update project dependencies #9512 (#9513) --- src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj | 2 +- .../Bit.Boilerplate/src/Directory.Packages.props | 6 +++--- .../Bit.Boilerplate/src/Directory.Packages8.props | 6 +++--- .../Controllers/Statistics/StatisticsController.cs | 1 + 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj b/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj index a01542257f..cb16dd5cbb 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj @@ -13,7 +13,7 @@ - + diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Packages.props b/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Packages.props index 7e68a63736..05933d9a24 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Packages.props +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Packages.props @@ -9,7 +9,7 @@ - + @@ -92,7 +92,7 @@ - - + + \ No newline at end of file diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Packages8.props b/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Packages8.props index 08c62affa3..d478f7f991 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Packages8.props +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Directory.Packages8.props @@ -9,7 +9,7 @@ - + @@ -92,7 +92,7 @@ - - + + \ No newline at end of file diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Statistics/StatisticsController.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Statistics/StatisticsController.cs index 09b4d02182..9cbba4b900 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Statistics/StatisticsController.cs +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/Statistics/StatisticsController.cs @@ -11,6 +11,7 @@ public partial class StatisticsController : AppControllerBase, IStatisticsContro [AllowAnonymous] [HttpGet("{packageId}")] + [ResponseCache(Duration = 1 * 24 * 3600, Location = ResponseCacheLocation.Any)] public async Task GetNugetStats(string packageId, CancellationToken cancellationToken) { return await nugetHttpClient.GetPackageStats(packageId, cancellationToken); From 6dc2fcae1cdb0717ee3167edc3fb7ce095111239 Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Fri, 20 Dec 2024 14:04:39 +0330 Subject: [PATCH 07/17] feat(blazorui): improve BitButtonGroup component #9463 (#9517) --- .../BitButtonGroup/BitButtonGroup.razor | 12 +- .../BitButtonGroup/BitButtonGroup.razor.cs | 318 +++++++++++- .../BitButtonGroup/BitButtonGroup.scss | 74 +++ .../BitButtonGroup/BitButtonGroupItem.cs | 40 ++ .../BitButtonGroupNameSelectors.cs | 40 ++ .../BitButtonGroup/BitButtonGroupOption.cs | 40 ++ .../ButtonGroup/BitButtonGroupDemo.razor.cs | 198 ++++++++ .../Buttons/ButtonGroup/Operation.cs | 14 + .../_BitButtonGroupCustomDemo.razor | 132 ++++- .../_BitButtonGroupCustomDemo.razor.cs | 360 +------------- ..._BitButtonGroupCustomDemo.razor.samples.cs | 463 ++++++++++++++++++ .../ButtonGroup/_BitButtonGroupItemDemo.razor | 90 +++- .../_BitButtonGroupItemDemo.razor.cs | 259 +--------- .../_BitButtonGroupItemDemo.razor.samples.cs | 287 +++++++++++ .../_BitButtonGroupOptionDemo.razor | 138 +++++- .../_BitButtonGroupOptionDemo.razor.cs | 352 ------------- ..._BitButtonGroupOptionDemo.razor.samples.cs | 433 ++++++++++++++++ 17 files changed, 2301 insertions(+), 949 deletions(-) create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor index 036addc7c6..34a0df0ad6 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor @@ -21,8 +21,9 @@ tabindex="@(isEnabled ? 0 : -1)" disabled="@(isEnabled is false)" aria-disabled="@(isEnabled is false)" + title="@GetItemTitle(item)" style="@GetStyle(item)" - class="bit-btg-itm @GetClass(item)"> + class="@GetItemClass(item)"> @if (template is not null) { @template(item) @@ -33,12 +34,17 @@ } else { - var iconName = GetIconName(item); + var iconName = GetItemIconName(item); @if (iconName.HasValue()) { } - @GetText(item) + + var text = GetItemText(item); + if (text.HasValue()) + { + @text + } } } 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 9c3229eb85..73b9ff5894 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs @@ -4,11 +4,11 @@ namespace Bit.BlazorUI; public partial class BitButtonGroup : BitComponentBase where TItem : class { + private TItem? _toggleItem; private List _items = []; private IEnumerable _oldItems = default!; - /// /// The EditContext, which is set if the button is inside an /// @@ -27,6 +27,11 @@ public partial class BitButtonGroup : BitComponentBase where TItem : clas [Parameter, ResetClassBuilder] public BitColor? Color { get; set; } + /// + /// Determines that only the icon should be rendered. + /// + [Parameter] public bool IconOnly { get; set; } + /// /// List of Item, each of which can be a button with different action in the ButtonGroup. /// @@ -58,6 +63,11 @@ public partial class BitButtonGroup : BitComponentBase where TItem : clas [Parameter, ResetClassBuilder] public BitSize? Size { get; set; } + /// + /// Display ButtonGroup with toggle mode enabled for each button. + /// + [Parameter] public bool Toggled { get; set; } + /// /// The visual variant of the button group. /// @@ -143,7 +153,7 @@ protected override void OnParametersSet() if (_oldItems is not null && Items.SequenceEqual(_oldItems)) return; _oldItems = Items; - _items = Items.ToList(); + _items = [.. Items]; } @@ -175,6 +185,118 @@ private async Task HandleOnItemClick(TItem item) item.GetValueFromProperty?>(NameSelectors.OnClick.Name)?.Invoke(item); } } + + if (Toggled) + { + if (_toggleItem == item) + { + _toggleItem = null; + } + else + { + _toggleItem = item; + } + } + } + + private string? GetItemClass(TItem? item) + { + List classes = ["bit-btg-itm"]; + + if (GetReversedIcon(item)) + { + classes.Add("bit-btg-rvi"); + } + + if (_toggleItem == item) + { + classes.Add("bit-btg-chk"); + } + + var classItem = GetClass(item); + if (classItem.HasValue()) + { + classes.Add(classItem!); + } + + return string.Join(' ', classes); + } + + private string? GetItemText(TItem? item) + { + if (IconOnly) return null; + + if (Toggled) + { + if (_toggleItem == item) + { + var onText = GetOnText(item); + if (onText.HasValue()) + { + return onText; + } + } + else + { + var offText = GetOffText(item); + if (offText.HasValue()) + { + return offText; + } + } + } + + return GetText(item); + } + + private string? GetItemTitle(TItem? item) + { + if (Toggled) + { + if (_toggleItem == item) + { + var onTitle = GetOnTitle(item); + if (onTitle.HasValue()) + { + return onTitle; + } + } + else + { + var offTitle = GetOffTitle(item); + if (offTitle.HasValue()) + { + return offTitle; + } + } + } + + return GetTitle(item); + } + + private string? GetItemIconName(TItem? item) + { + if (Toggled) + { + if (_toggleItem == item) + { + var onIconName = GetOnIconName(item); + if (onIconName.HasValue()) + { + return onIconName; + } + } + else + { + var offIconName = GetOffIconName(item); + if (offIconName.HasValue()) + { + return offIconName; + } + } + } + + return GetIconName(item); } private string? GetClass(TItem? item) @@ -225,6 +347,54 @@ private async Task HandleOnItemClick(TItem item) return item.GetValueFromProperty(NameSelectors.IconName.Name); } + private string? GetOnIconName(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OnIconName; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OnIconName; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OnIconName.Selector is not null) + { + return NameSelectors.OnIconName.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OnIconName.Name); + } + + private string? GetOffIconName(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OffIconName; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OffIconName; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OffIconName.Selector is not null) + { + return NameSelectors.OffIconName.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OffIconName.Name); + } + private bool GetIsEnabled(TItem? item) { if (item is null) return false; @@ -320,4 +490,148 @@ private bool GetIsEnabled(TItem? item) return item.GetValueFromProperty(NameSelectors.Text.Name); } + + private string? GetOnText(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OnText; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OnText; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OnText.Selector is not null) + { + return NameSelectors.OnText.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OnText.Name); + } + + private string? GetOffText(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OffText; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OffText; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OffText.Selector is not null) + { + return NameSelectors.OffText.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OffText.Name); + } + + private string? GetTitle(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.Title; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.Title; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.Title.Selector is not null) + { + return NameSelectors.Title.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.Title.Name); + } + + private string? GetOnTitle(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OnTitle; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OnTitle; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OnTitle.Selector is not null) + { + return NameSelectors.OnTitle.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OnTitle.Name); + } + + private string? GetOffTitle(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.OffTitle; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.OffTitle; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.OffTitle.Selector is not null) + { + return NameSelectors.OffTitle.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.OffTitle.Name); + } + + private bool GetReversedIcon(TItem? item) + { + if (item is null) return false; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.ReversedIcon; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.ReversedIcon; + } + + if (NameSelectors is null) return false; + + if (NameSelectors.ReversedIcon.Selector is not null) + { + return NameSelectors.ReversedIcon.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.ReversedIcon.Name, false); + } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss index a630e467f4..9a55b86981 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss @@ -34,6 +34,7 @@ line-height: inherit; text-decoration: none; box-sizing: border-box; + justify-content: center; font-family: $tg-font-family; font-weight: $tg-font-weight; border-style: $shp-border-style; @@ -69,6 +70,10 @@ } } +.bit-btg-rvi { + flex-direction: row-reverse; +} + .bit-btg-btx { white-space: nowrap; text-overflow: ellipsis; @@ -131,12 +136,33 @@ } } +.bit-btg-chk { + color: var(--bit-btg-clr-txt); + border-color: var(--bit-btg-clr-dark); + background-color: var(--bit-btg-clr-dark); + + @media (hover: hover) { + &:hover { + border-color: var(--bit-btg-clr-dark-hover); + background-color: var(--bit-btg-clr-dark-hover); + } + } + + &:active { + border-color: var(--bit-btg-clr-dark-active); + background-color: var(--bit-btg-clr-dark-active); + } +} + .bit-btg-pri { --bit-btg-clr: #{$clr-pri}; --bit-btg-clr-txt: #{$clr-pri-text}; --bit-btg-clr-brd: #{$clr-pri-dark}; --bit-btg-clr-hover: #{$clr-pri-hover}; --bit-btg-clr-active: #{$clr-pri-active}; + --bit-btg-clr-dark: #{$clr-pri-dark}; + --bit-btg-clr-dark-hover: #{$clr-pri-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-pri-dark-active}; } .bit-btg-sec { @@ -145,6 +171,9 @@ --bit-btg-clr-brd: #{$clr-sec-dark}; --bit-btg-clr-hover: #{$clr-sec-hover}; --bit-btg-clr-active: #{$clr-sec-active}; + --bit-btg-clr-dark: #{$clr-sec-dark}; + --bit-btg-clr-dark-hover: #{$clr-sec-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-sec-dark-active}; } .bit-btg-ter { @@ -153,6 +182,9 @@ --bit-btg-clr-brd: #{$clr-ter-dark}; --bit-btg-clr-hover: #{$clr-ter-hover}; --bit-btg-clr-active: #{$clr-ter-active}; + --bit-btg-clr-dark: #{$clr-ter-dark}; + --bit-btg-clr-dark-hover: #{$clr-ter-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-ter-dark-active}; } .bit-btg-inf { @@ -161,6 +193,9 @@ --bit-btg-clr-brd: #{$clr-inf-dark}; --bit-btg-clr-hover: #{$clr-inf-hover}; --bit-btg-clr-active: #{$clr-inf-active}; + --bit-btg-clr-dark: #{$clr-inf-dark}; + --bit-btg-clr-dark-hover: #{$clr-inf-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-inf-dark-active}; } .bit-btg-suc { @@ -169,6 +204,9 @@ --bit-btg-clr-brd: #{$clr-suc-dark}; --bit-btg-clr-hover: #{$clr-suc-hover}; --bit-btg-clr-active: #{$clr-suc-active}; + --bit-btg-clr-dark: #{$clr-suc-dark}; + --bit-btg-clr-dark-hover: #{$clr-suc-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-suc-dark-active}; } .bit-btg-wrn { @@ -177,6 +215,9 @@ --bit-btg-clr-brd: #{$clr-wrn-dark}; --bit-btg-clr-hover: #{$clr-wrn-hover}; --bit-btg-clr-active: #{$clr-wrn-active}; + --bit-btg-clr-dark: #{$clr-wrn-dark}; + --bit-btg-clr-dark-hover: #{$clr-wrn-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-wrn-dark-active}; } .bit-btg-swr { @@ -185,6 +226,9 @@ --bit-btg-clr-brd: #{$clr-swr-dark}; --bit-btg-clr-hover: #{$clr-swr-hover}; --bit-btg-clr-active: #{$clr-swr-active}; + --bit-btg-clr-dark: #{$clr-swr-dark}; + --bit-btg-clr-dark-hover: #{$clr-swr-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-swr-dark-active}; } .bit-btg-err { @@ -193,6 +237,9 @@ --bit-btg-clr-brd: #{$clr-err-dark}; --bit-btg-clr-hover: #{$clr-err-hover}; --bit-btg-clr-active: #{$clr-err-active}; + --bit-btg-clr-dark: #{$clr-err-dark}; + --bit-btg-clr-dark-hover: #{$clr-err-dark-hover}; + --bit-btg-clr-dark-active: #{$clr-err-dark-active}; } @@ -202,6 +249,9 @@ --bit-btg-clr-brd: #{$clr-bg-pri}; --bit-btg-clr-hover: #{$clr-bg-pri-hover}; --bit-btg-clr-active: #{$clr-bg-pri-active}; + --bit-btg-clr-dark: #{$clr-bg-pri}; + --bit-btg-clr-dark-hover: #{$clr-bg-pri-hover}; + --bit-btg-clr-dark-active: #{$clr-bg-pri-active}; } .bit-btg-sbg { @@ -210,6 +260,9 @@ --bit-btg-clr-brd: #{$clr-bg-sec}; --bit-btg-clr-hover: #{$clr-bg-sec-hover}; --bit-btg-clr-active: #{$clr-bg-sec-active}; + --bit-btg-clr-dark: #{$clr-bg-sec}; + --bit-btg-clr-dark-hover: #{$clr-bg-sec-hover}; + --bit-btg-clr-dark-active: #{$clr-bg-sec-active}; } .bit-btg-tbg { @@ -218,6 +271,9 @@ --bit-btg-clr-brd: #{$clr-bg-ter}; --bit-btg-clr-hover: #{$clr-bg-ter-hover}; --bit-btg-clr-active: #{$clr-bg-ter-active}; + --bit-btg-clr-dark: #{$clr-bg-ter}; + --bit-btg-clr-dark-hover: #{$clr-bg-ter-hover}; + --bit-btg-clr-dark-active: #{$clr-bg-ter-active}; } .bit-btg-pfg { @@ -226,6 +282,9 @@ --bit-btg-clr-brd: #{$clr-fg-pri}; --bit-btg-clr-hover: #{$clr-fg-pri-hover}; --bit-btg-clr-active: #{$clr-fg-pri-active}; + --bit-btg-clr-dark: #{$clr-fg-pri}; + --bit-btg-clr-dark-hover: #{$clr-fg-pri-hover}; + --bit-btg-clr-dark-active: #{$clr-fg-pri-active}; } .bit-btg-sfg { @@ -234,6 +293,9 @@ --bit-btg-clr-brd: #{$clr-fg-sec}; --bit-btg-clr-hover: #{$clr-fg-sec-hover}; --bit-btg-clr-active: #{$clr-fg-sec-active}; + --bit-btg-clr-dark: #{$clr-fg-sec}; + --bit-btg-clr-dark-hover: #{$clr-fg-sec-hover}; + --bit-btg-clr-dark-active: #{$clr-fg-sec-active}; } .bit-btg-tfg { @@ -242,6 +304,9 @@ --bit-btg-clr-brd: #{$clr-fg-ter}; --bit-btg-clr-hover: #{$clr-fg-ter-hover}; --bit-btg-clr-active: #{$clr-fg-ter-active}; + --bit-btg-clr-dark: #{$clr-fg-ter}; + --bit-btg-clr-dark-hover: #{$clr-fg-ter-hover}; + --bit-btg-clr-dark-active: #{$clr-fg-ter-active}; } .bit-btg-pbr { @@ -250,6 +315,9 @@ --bit-btg-clr-brd: #{$clr-brd-pri}; --bit-btg-clr-hover: #{$clr-brd-pri-hover}; --bit-btg-clr-active: #{$clr-brd-pri-active}; + --bit-btg-clr-dark: #{$clr-brd-pri}; + --bit-btg-clr-dark-hover: #{$clr-brd-pri-hover}; + --bit-btg-clr-dark-active: #{$clr-brd-pri-active}; } .bit-btg-sbr { @@ -258,6 +326,9 @@ --bit-btg-clr-brd: #{$clr-brd-sec}; --bit-btg-clr-hover: #{$clr-brd-sec-hover}; --bit-btg-clr-active: #{$clr-brd-sec-active}; + --bit-btg-clr-dark: #{$clr-brd-sec}; + --bit-btg-clr-dark-hover: #{$clr-brd-sec-hover}; + --bit-btg-clr-dark-active: #{$clr-brd-sec-active}; } .bit-btg-tbr { @@ -266,6 +337,9 @@ --bit-btg-clr-brd: #{$clr-brd-ter}; --bit-btg-clr-hover: #{$clr-brd-ter-hover}; --bit-btg-clr-active: #{$clr-brd-ter-active}; + --bit-btg-clr-dark: #{$clr-brd-ter}; + --bit-btg-clr-dark-hover: #{$clr-brd-ter-hover}; + --bit-btg-clr-dark-active: #{$clr-brd-ter-active}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs index afa3ee18bd..0311d50980 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs @@ -23,11 +23,46 @@ public class BitButtonGroupItem /// public string? Key { get; set; } + /// + /// The icon of the item when it is not checked in toggle mode. + /// + [Parameter] public string? OffIconName { get; set; } + + /// + /// The text of the item when it is not checked in toggle mode. + /// + [Parameter] public string? OffText { get; set; } + + /// + /// The title of the item when it is not checked in toggle mode. + /// + [Parameter] public string? OffTitle { get; set; } + + /// + /// The icon of the item when it is checked in toggle mode. + /// + [Parameter] public string? OnIconName { get; set; } + + /// + /// The text of the item when it is checked in toggle mode. + /// + [Parameter] public string? OnText { get; set; } + + /// + /// The title of the item when it is checked in toggle mode. + /// + [Parameter] public string? OnTitle { get; set; } + /// /// Click event handler of the item. /// public Action? OnClick { get; set; } + /// + /// Reverses the positions of the icon and the main content of the item. + /// + [Parameter] public bool ReversedIcon { get; set; } + /// /// The custom value for the style attribute of the item. /// @@ -42,4 +77,9 @@ public class BitButtonGroupItem /// Text to render in the item. /// public string? Text { get; set; } + + /// + /// Title to render in the item. + /// + public string? Title { get; set; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs index fe1caf82d6..75cd27bc93 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs @@ -22,11 +22,46 @@ public class BitButtonGroupNameSelectors /// public BitNameSelectorPair Key { get; set; } = new(nameof(BitButtonGroupItem.Key)); + /// + /// OffIconName field name and selector of the custom input class. + /// + public BitNameSelectorPair OffIconName { get; set; } = new(nameof(BitButtonGroupItem.OffIconName)); + + /// + /// OffText field name and selector of the custom input class. + /// + public BitNameSelectorPair OffText { get; set; } = new(nameof(BitButtonGroupItem.OffText)); + + /// + /// OffTitle field name and selector of the custom input class. + /// + public BitNameSelectorPair OffTitle { get; set; } = new(nameof(BitButtonGroupItem.OffTitle)); + + /// + /// OnIconName field name and selector of the custom input class. + /// + public BitNameSelectorPair OnIconName { get; set; } = new(nameof(BitButtonGroupItem.OnIconName)); + + /// + /// OnText field name and selector of the custom input class. + /// + public BitNameSelectorPair OnText { get; set; } = new(nameof(BitButtonGroupItem.OnText)); + + /// + /// OnTitle field name and selector of the custom input class. + /// + public BitNameSelectorPair OnTitle { get; set; } = new(nameof(BitButtonGroupItem.OnTitle)); + /// /// OnClick field name and selector of the custom input class. /// public BitNameSelectorPair?> OnClick { get; set; } = new(nameof(BitButtonGroupItem.OnClick)); + /// + /// ReversedIcon field name and selector of the custom input class. + /// + public BitNameSelectorPair ReversedIcon { get; set; } = new(nameof(BitButtonGroupItem.ReversedIcon)); + /// /// The CSS Style field name and selector of the custom input class. /// @@ -41,4 +76,9 @@ public class BitButtonGroupNameSelectors /// Text field name and selector of the custom input class. /// public BitNameSelectorPair Text { get; set; } = new(nameof(BitButtonGroupItem.Text)); + + /// + /// Title field name and selector of the custom input class. + /// + public BitNameSelectorPair Title { get; set; } = new(nameof(BitButtonGroupItem.Title)); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs index ce48fed62f..2380942365 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs @@ -28,11 +28,46 @@ public partial class BitButtonGroupOption : ComponentBase, IDisposable /// [Parameter] public string? Key { get; set; } + /// + /// The icon of the option when it is not checked in toggle mode. + /// + [Parameter] public string? OffIconName { get; set; } + + /// + /// The text of the option when it is not checked in toggle mode. + /// + [Parameter] public string? OffText { get; set; } + + /// + /// The title of the option when it is not checked in toggle mode. + /// + [Parameter] public string? OffTitle { get; set; } + + /// + /// The icon of the option when it is checked in toggle mode. + /// + [Parameter] public string? OnIconName { get; set; } + + /// + /// The text of the option when it is checked in toggle mode. + /// + [Parameter] public string? OnText { get; set; } + + /// + /// The title of the option when it is checked in toggle mode. + /// + [Parameter] public string? OnTitle { get; set; } + /// /// Click event handler of the option. /// [Parameter] public EventCallback OnClick { get; set; } + /// + /// Reverses the positions of the icon and the main content of the option. + /// + [Parameter] public bool ReversedIcon { get; set; } + /// /// The custom value for the style attribute of the option. /// @@ -48,6 +83,11 @@ public partial class BitButtonGroupOption : ComponentBase, IDisposable /// [Parameter] public string? Text { get; set; } + /// + /// Title to render in the option + /// + [Parameter] public string? Title { get; set; } + protected override async Task OnInitializedAsync() diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs index dd5317259f..c4b9b4d2d7 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.cs @@ -12,6 +12,13 @@ public partial class BitButtonGroupDemo Description = "The content of the BitButtonGroup, that are BitButtonGroupOption components.", }, new() + { + Name = "IconOnly", + Type = "bool", + DefaultValue = "false", + Description = "Determines that only the icon should be rendered.", + }, + new() { Name = "Color", Type = "BitColor?", @@ -59,6 +66,13 @@ public partial class BitButtonGroupDemo Description = "Alias of ChildContent.", }, new() + { + Name = "Toggled", + Type = "bool", + DefaultValue = "false", + Description = "Display ButtonGroup with toggle mode enabled for each button.", + }, + new() { Name = "Size", Type = "BitSize", @@ -122,6 +136,48 @@ public partial class BitButtonGroupDemo Description = "A unique value to use as a Key of the item.", }, new() + { + Name = "OffIconName", + Type = "string?", + DefaultValue = "null", + Description = "The icon of the item when it is not checked in toggle mode.", + }, + new() + { + Name = "OffText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the item when it is not checked in toggle mode.", + }, + new() + { + Name = "OffTitle", + Type = "string?", + DefaultValue = "null", + Description = "The title of the item when it is not checked in toggle mode.", + }, + new() + { + Name = "OnIconName", + Type = "string?", + DefaultValue = "null", + Description = "The icon of the item when it is checked in toggle mode.", + }, + new() + { + Name = "OnText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the item when it is checked in toggle mode.", + }, + new() + { + Name = "OnTitle", + Type = "string?", + DefaultValue = "null", + Description = "The title of the item when it is checked in toggle mode.", + }, + new() { Name = "OnClick", Type = "EventCallback", @@ -129,6 +185,13 @@ public partial class BitButtonGroupDemo Description = "Click event handler of the item.", }, new() + { + Name = "ReversedIcon", + Type = "bool", + DefaultValue = "false", + Description = "Reverses the positions of the icon and the main content of the item.", + }, + new() { Name = "Style", Type = "string?", @@ -148,6 +211,13 @@ public partial class BitButtonGroupDemo Type = "string?", DefaultValue = "null", Description = "Text to render in the item.", + }, + new() + { + Name = "Title", + Type = "string?", + DefaultValue = "null", + Description = "Title to render in the item.", } ] }, @@ -186,6 +256,48 @@ public partial class BitButtonGroupDemo Description = "A unique value to use as a key of the option.", }, new() + { + Name = "OffIconName", + Type = "string?", + DefaultValue = "null", + Description = "The icon of the option when it is not checked in toggle mode.", + }, + new() + { + Name = "OffText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the option when it is not checked in toggle mode.", + }, + new() + { + Name = "OffTitle", + Type = "string?", + DefaultValue = "null", + Description = "The title of the option when it is not checked in toggle mode.", + }, + new() + { + Name = "OnIconName", + Type = "string?", + DefaultValue = "null", + Description = "The icon of the option when it is checked in toggle mode.", + }, + new() + { + Name = "OnText", + Type = "string?", + DefaultValue = "null", + Description = "The text of the option when it is checked in toggle mode.", + }, + new() + { + Name = "OnTitle", + Type = "string?", + DefaultValue = "null", + Description = "The title of the option when it is checked in toggle mode.", + }, + new() { Name = "OnClick", Type = "EventCallback", @@ -193,6 +305,13 @@ public partial class BitButtonGroupDemo Description = "Click event handler of the option.", }, new() + { + Name = "ReversedIcon", + Type = "bool", + DefaultValue = "false", + Description = "Reverses the positions of the icon and the main content of the option.", + }, + new() { Name = "Style", Type = "string?", @@ -212,6 +331,13 @@ public partial class BitButtonGroupDemo Type = "string?", DefaultValue = "null", Description = "Text to render in the option.", + }, + new() + { + Name = "Title", + Type = "string?", + DefaultValue = "null", + Description = "Title to render in the option.", } ] }, @@ -258,6 +384,60 @@ public partial class BitButtonGroupDemo LinkType = LinkType.Link, }, new() + { + Name = "OffIconName", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OffIconName))", + Description = "OffIconName field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OffText", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OffText))", + Description = "OffText field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OffTitle", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OffTitle))", + Description = "OffTitle field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OnIconName", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OnIconName))", + Description = "OnIconName field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OnText", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OnText))", + Description = "OnText field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() + { + Name = "OnTitle", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.OnTitle))", + Description = "OnTitle field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() { Name = "OnClick", Type = "BitNameSelectorPair?>", @@ -267,6 +447,15 @@ public partial class BitButtonGroupDemo LinkType = LinkType.Link, }, new() + { + Name = "ReversedIcon", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.ReversedIcon))", + Description = "ReversedIcon field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + }, + new() { Name = "Style", Type = "BitNameSelectorPair", @@ -293,6 +482,15 @@ public partial class BitButtonGroupDemo Href = "#name-selector-pair", LinkType = LinkType.Link, }, + new() + { + Name = "Title", + Type = "BitNameSelectorPair", + DefaultValue = "new(nameof(BitButtonGroupItem.Title))", + Description = "Title field name and selector of the custom input class.", + Href = "#name-selector-pair", + LinkType = LinkType.Link, + } ] }, new() diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/Operation.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/Operation.cs index 688e918c52..4b61989ffe 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/Operation.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/Operation.cs @@ -8,6 +8,8 @@ public class Operation public string? Icon { get; set; } + public bool ReversedIcon { get; set; } + public bool IsEnabled { get; set; } = true; public string? Class { get; set; } @@ -15,4 +17,16 @@ public class Operation public string? Style { get; set; } public Action? Clicked { get; set; } + + public string? OnIcon { get; set; } + + public string? OffIcon { get; set; } + + public string? OnName { get; set; } + + public string? OffName { get; set; } + + public string? OnTitle { get; set; } + + public string? OffTitle { get; set; } } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor index b1fa55899b..8552384e10 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor @@ -187,7 +187,129 @@ - + + +
The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+

+
Alternatively, each button can be set to IconOnly by simply leaving the text field empty.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + + + +
Reverses the positions of the icon and the main content of the button.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + + + +
The Toggled in BitButtonGroup allows you to control the active or inactive state of each button, providing clear visual feedback to users about which buttons are selected or currently in use.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


@@ -210,7 +332,7 @@ - +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.


@@ -237,7 +359,7 @@ - +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -257,7 +379,7 @@ - +
Managing button click events.


@@ -280,7 +402,7 @@ - +
Use BitButtonGroup in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs index 92a70d4085..0369b8eb8c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.cs @@ -24,6 +24,27 @@ public partial class _BitButtonGroupCustomDemo new() { Name = "Delete", Icon = BitIconName.Delete } ]; + private List onlyIconCustoms = + [ + new() { Name = "Add", Icon = BitIconName.Add }, + new() { Icon = BitIconName.Edit }, + new() { Name = "Delete", Icon = BitIconName.Delete } + ]; + + private List reversedIconCustoms = + [ + new() { Name = "Add", Icon = BitIconName.Add, ReversedIcon = true }, + new() { Name = "Edit", Icon = BitIconName.Edit, ReversedIcon = true }, + new() { Name = "Delete", Icon = BitIconName.Delete, ReversedIcon = true } + ]; + + private List toggledCustoms = + [ + new() { OnName = "Back (2X)", OffName = "Back", OnIcon = BitIconName.RewindTwoX, OffIcon = BitIconName.Rewind }, + new() { OnTitle = "Resume", OffTitle = "Play", OnIcon = BitIconName.PlayResume, OffIcon = BitIconName.Play }, + new() { OnName = "Forward (2X)", OffName = "Forward", OnIcon = BitIconName.FastForwardTwoX, OffIcon = BitIconName.FastForward, ReversedIcon = true } + ]; + private List eventsCustoms = [ new() { Name = "Increase", Icon = BitIconName.Add }, @@ -60,343 +81,4 @@ protected override void OnInitialized() eventsCustoms[1].Clicked = _ => { clickCounter = 0; StateHasChanged(); }; eventsCustoms[2].Clicked = _ => { clickCounter--; StateHasChanged(); }; } - - - - private readonly string example1RazorCode = @" -"; - private readonly string example1CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -};"; - - private readonly string example2RazorCode = @" - - - - - - - - - - -"; - private readonly string example2CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } - public bool IsEnabled { get; set; } = true; -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -}; - -private List disabledCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"", IsEnabled = false }, new() { Name = ""Delete"" } -};"; - - private readonly string example3RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - private readonly string example3CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -};"; - - private readonly string example4RazorCode = @" - i.Name }, - IconName = { Selector = i => i.Icon } })"" /> - - i.Name }, - IconName = { Selector = i => i.Icon } })"" /> - - i.Name }, - IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example4CsharpCode = @" -public class Operation -{ - public string? Name { get; set; } - public string? Icon { get; set; } -} - -private List iconCustoms = new() -{ - new() { Name = ""Add"", Icon = BitIconName.Add }, - new() { Name = ""Edit"", Icon = BitIconName.Edit }, - new() { Name = ""Delete"", Icon = BitIconName.Delete } -};"; - - private readonly string example5RazorCode = @" - - -"; - private readonly string example5CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -};"; - - private readonly string example6RazorCode = @" - - - - - - - - - - -"; - private readonly string example6CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -};"; - - private readonly string example7RazorCode = @" - - - - - - - i.Name }, - IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example7CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } - public string? Icon { get; set; } - public string? Class { get; set; } - public string? Style { get; set; } -} - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -}; - -private List styleClassCustoms = new() -{ - new() - { - Name = ""Styled"", - Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", - Icon = BitIconName.Brush, - }, - new() - { - Name = ""Classed"", - Class = ""custom-item"", - Icon = BitIconName.FormatPainter, - } -};"; - - private readonly string example8RazorCode = @" - clickedCustom = item.Name"" /> -
Clicked item: @clickedCustom
- - i.Name }, - IconName = { Selector = i => i.Icon }, - OnClick = { Selector = i => i.Clicked } })"" /> -
Click count: @clickCounter
"; - private readonly string example8CsharpCode = @" -private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; - -public class Operation -{ - public string? Name { get; set; } - public string? Icon { get; set; } - public Action? Clicked { get; set; } -} - -private int clickCounter; - -private List basicCustoms = new() -{ - new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } -}; - -private List eventsCustoms = new() -{ - new() { Name = ""Increase"", Icon = BitIconName.Add }, - new() { Name = ""Reset"", Icon = BitIconName.Reset }, - new() { Name = ""Decrease"", Icon = BitIconName.Remove } -}; - -protected override void OnInitialized() -{ - eventsCustoms[0].Clicked = _ => { clickCounter++; StateHasChanged(); }; - eventsCustoms[1].Clicked = _ => { clickCounter = 0; StateHasChanged(); }; - eventsCustoms[2].Clicked = _ => { clickCounter--; StateHasChanged(); }; -}"; - - private readonly string example9RazorCode = @" - i.Name }, - IconName = { Selector = i => i.Icon } })"" /> - - i.Name }, - IconName = { Selector = i => i.Icon } })"" /> - - i.Name }, - IconName = { Selector = i => i.Icon } })"" />"; - private readonly string example9CsharpCode = @" -public class Operation -{ - public string? Name { get; set; } - public string? Icon { get; set; } -} - -private List rtlCustoms = new() -{ - new() { Name = ""اضافه کردن"", Icon = BitIconName.Add }, - new() { Name = ""ویرایش"", Icon = BitIconName.Edit }, - new() { Name = ""حذف"", Icon = BitIconName.Delete } -};"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs new file mode 100644 index 0000000000..76886dd07e --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs @@ -0,0 +1,463 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.ButtonGroup; + +public partial class _BitButtonGroupCustomDemo +{ + private readonly string example1RazorCode = @" +"; + private readonly string example1CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } +} + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +];"; + + private readonly string example2RazorCode = @" + + + + + + + + + + +"; + private readonly string example2CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } + public bool IsEnabled { get; set; } = true; +} + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +]; + +private List disabledCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"", IsEnabled = false }, new() { Name = ""Delete"" } +];"; + + private readonly string example3RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + private readonly string example3CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } +} + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +];"; + + private readonly string example4RazorCode = @" + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" />"; + private readonly string example4CsharpCode = @" +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } +} + +private List iconCustoms = +[ + new() { Name = ""Add"", Icon = BitIconName.Add }, + new() { Name = ""Edit"", Icon = BitIconName.Edit }, + new() { Name = ""Delete"", Icon = BitIconName.Delete } +];"; + + private readonly string example5RazorCode = @" + i.Name }, + IconName = { Selector = i => i.Icon } })"" IconOnly /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" IconOnly /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" IconOnly /> + + + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" />"; + private readonly string example5CsharpCode = @" +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } +} + +private List iconCustoms = +[ + new() { Name = ""Add"", Icon = BitIconName.Add }, + new() { Name = ""Edit"", Icon = BitIconName.Edit }, + new() { Name = ""Delete"", Icon = BitIconName.Delete } +]; + +private List onlyIconCustoms = +[ + new() { Name = ""Add"", Icon = BitIconName.Add }, + new() { Icon = BitIconName.Edit }, + new() { Name = ""Delete"", Icon = BitIconName.Delete } +];"; + + private readonly string example6RazorCode = @" + i.Name }, + IconName = { Selector = i => i.Icon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" />"; + private readonly string example6CsharpCode = @" +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } + public bool ReversedIcon { get; set; } +} + +private List reversedIconCustoms = +[ + new() { Name = ""Add"", Icon = BitIconName.Add, ReversedIcon = true }, + new() { Name = ""Edit"", Icon = BitIconName.Edit, ReversedIcon = true }, + new() { Name = ""Delete"", Icon = BitIconName.Delete, ReversedIcon = true } +];"; + + private readonly string example7RazorCode = @" + i.OnName }, + OffText = { Selector = i => i.OffName }, + OnTitle = { Selector = i => i.OnTitle }, + OffTitle = { Selector = i => i.OffTitle }, + OnIconName = { Selector = i => i.OnIcon }, + OffIconName = { Selector = i => i.OffIcon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" Toggled /> + + i.OnName }, + OffText = { Selector = i => i.OffName }, + OnTitle = { Selector = i => i.OnTitle }, + OffTitle = { Selector = i => i.OffTitle }, + OnIconName = { Selector = i => i.OnIcon }, + OffIconName = { Selector = i => i.OffIcon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" Toggled /> + + i.OnName }, + OffText = { Selector = i => i.OffName }, + OnTitle = { Selector = i => i.OnTitle }, + OffTitle = { Selector = i => i.OffTitle }, + OnIconName = { Selector = i => i.OnIcon }, + OffIconName = { Selector = i => i.OffIcon }, + ReversedIcon = { Selector = i => i.ReversedIcon } })"" Toggled />"; + private readonly string example7CsharpCode = @" +public class Operation +{ + public string? OnIcon { get; set; } + public string? OffIcon { get; set; } + public string? OnName { get; set; } + public string? OffName { get; set; } + public string? OnTitle { get; set; } + public string? OffTitle { get; set; } + public bool ReversedIcon { get; set; } +} + +private List toggledCustoms = +[ + new() { OnName = ""Back (2X)"", OffName = ""Back"", OnIcon = BitIconName.RewindTwoX, OffIcon = BitIconName.Rewind }, + new() { OnTitle = ""Resume"", OffTitle = ""Play"", OnIcon = BitIconName.PlayResume, OffIcon = BitIconName.Play }, + new() { OnName = ""Forward (2X)"", OffName = ""Forward"", OnIcon = BitIconName.FastForwardTwoX, OffIcon = BitIconName.FastForward, ReversedIcon = true } +];"; + + private readonly string example8RazorCode = @" + + +"; + private readonly string example8CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } +} + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +];"; + + private readonly string example9RazorCode = @" + + + + + + + + + + +"; + private readonly string example9CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } +} + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +];"; + + private readonly string example10RazorCode = @" + + + + + + + i.Name }, + IconName = { Selector = i => i.Icon } })"" />"; + private readonly string example10CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } + public string? Class { get; set; } + public string? Style { get; set; } +} + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +]; + +private List styleClassCustoms = +[ + new() + { + Name = ""Styled"", + Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", + Icon = BitIconName.Brush, + }, + new() + { + Name = ""Classed"", + Class = ""custom-item"", + Icon = BitIconName.FormatPainter, + } +];"; + + private readonly string example11RazorCode = @" + clickedCustom = item.Name"" /> +
Clicked item: @clickedCustom
+ + i.Name }, + IconName = { Selector = i => i.Icon }, + OnClick = { Selector = i => i.Clicked } })"" /> +
Click count: @clickCounter
"; + private readonly string example11CsharpCode = @" +private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; + +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } + public Action? Clicked { get; set; } +} + +private int clickCounter; + +private List basicCustoms = +[ + new() { Name = ""Add"" }, new() { Name = ""Edit"" }, new() { Name = ""Delete"" } +]; + +private List eventsCustoms = +[ + new() { Name = ""Increase"", Icon = BitIconName.Add }, + new() { Name = ""Reset"", Icon = BitIconName.Reset }, + new() { Name = ""Decrease"", Icon = BitIconName.Remove } +]; + +protected override void OnInitialized() +{ + eventsCustoms[0].Clicked = _ => { clickCounter++; StateHasChanged(); }; + eventsCustoms[1].Clicked = _ => { clickCounter = 0; StateHasChanged(); }; + eventsCustoms[2].Clicked = _ => { clickCounter--; StateHasChanged(); }; +}"; + + private readonly string example12RazorCode = @" + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" /> + + i.Name }, + IconName = { Selector = i => i.Icon } })"" />"; + private readonly string example12CsharpCode = @" +public class Operation +{ + public string? Name { get; set; } + public string? Icon { get; set; } +} + +private List rtlCustoms = +[ + new() { Name = ""اضافه کردن"", Icon = BitIconName.Add }, + new() { Name = ""ویرایش"", Icon = BitIconName.Edit }, + new() { Name = ""حذف"", Icon = BitIconName.Delete } +];"; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor index 4bdd3a2b85..f8988ea109 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor @@ -181,7 +181,87 @@ - + + +
The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+

+
Alternatively, each button can be set to IconOnly by simply leaving the text field empty.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + + + +
Reverses the positions of the icon and the main content of the button.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + + + +
The Toggled in BitButtonGroup allows you to control the active or inactive state of each button, providing clear visual feedback to users about which buttons are selected or currently in use.
+

+
+
Fill (default)
+ +
+

+
+
Outline
+ +
+

+
+
Text
+ +
+ + + +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


@@ -204,7 +284,7 @@ - +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.


@@ -231,7 +311,7 @@ - +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -248,7 +328,7 @@ - +
Managing button click events.


@@ -266,7 +346,7 @@ - +
Use BitButtonGroup in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs index 1f27935f6f..15b29a29c7 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.cs @@ -22,6 +22,27 @@ public partial class _BitButtonGroupItemDemo new() { Text = "Delete", IconName = BitIconName.Delete } ]; + private List onlyIconItems = + [ + new() { Text = "Add", IconName = BitIconName.Add }, + new() { IconName = BitIconName.Edit }, + new() { Text = "Delete", IconName = BitIconName.Delete } + ]; + + private List reversedIconItems = + [ + new() { Text = "Add", IconName = BitIconName.Add, ReversedIcon = true }, + new() { Text = "Edit", IconName = BitIconName.Edit, ReversedIcon = true }, + new() { Text = "Delete", IconName = BitIconName.Delete, ReversedIcon = true } + ]; + + private List toggledItems = + [ + new() { OnText = "Back (2X)", OffText = "Back", OnIconName = BitIconName.RewindTwoX, OffIconName = BitIconName.Rewind }, + new() { OnTitle = "Resume", OffTitle = "Play", OnIconName = BitIconName.PlayResume, OffIconName = BitIconName.Play }, + new() { OnText = "Forward (2X)", OffText = "Forward", OnIconName = BitIconName.FastForwardTwoX, OffIconName = BitIconName.FastForward, ReversedIcon = true } + ]; + private List eventsItems = [ new() { Text = "Increase", IconName = BitIconName.Add }, @@ -58,242 +79,4 @@ protected override void OnInitialized() eventsItems[1].OnClick = _ => { clickCounter = 0; StateHasChanged(); }; eventsItems[2].OnClick = _ => { clickCounter--; StateHasChanged(); }; } - - - - private readonly string example1RazorCode = @" -"; - private readonly string example1CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -};"; - - private readonly string example2RazorCode = @" - - - - - - - - - - -"; - private readonly string example2CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -}; - -private List disabledItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"", IsEnabled = false }, new() { Text = ""Delete"" } -};"; - - private readonly string example3RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - private readonly string example3CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -};"; - - private readonly string example4RazorCode = @" - - -"; - private readonly string example4CsharpCode = @" -private List iconItems = new() -{ - new() { Text = ""Add"", IconName = BitIconName.Add }, - new() { Text = ""Edit"", IconName = BitIconName.Edit }, - new() { Text = ""Delete"", IconName = BitIconName.Delete } -};"; - - private readonly string example5RazorCode = @" - - -"; - private readonly string example5CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -};"; - - private readonly string example6RazorCode = @" - - - - - - - - - - -"; - private readonly string example6CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -};"; - - private readonly string example7RazorCode = @" - - - - - - -"; - private readonly string example7CsharpCode = @" -private List basicItems = new() -{ - new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } -}; - -private List styleClassItems = new() -{ - new() - { - Text = ""Styled"", - Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", - IconName = BitIconName.Brush, - }, - new() - { - Text = ""Classed"", - Class = ""custom-item"", - IconName = BitIconName.FormatPainter, - } -};"; - - private readonly string example8RazorCode = @" - clickedItem = item.Text"" /> -
Clicked item: @clickedItem
- - -
Click count: @clickCounter
"; - private readonly string example8CsharpCode = @" -private int clickCounter; -private string? clickedItem; - -private List eventsItems = new() -{ - new() { Text = ""Increase"", IconName = BitIconName.Add }, - new() { Text = ""Reset"", IconName = BitIconName.Reset }, - new() { Text = ""Decrease"", IconName = BitIconName.Remove } -}; - -protected override void OnInitialized() -{ - eventsItems[0].OnClick = _ => { clickCounter++; StateHasChanged(); }; - eventsItems[1].OnClick = _ => { clickCounter = 0; StateHasChanged(); }; - eventsItems[2].OnClick = _ => { clickCounter--; StateHasChanged(); }; -}"; - - private readonly string example9RazorCode = @" - - -"; - private readonly string example9CsharpCode = @" -private List rtlItems = new() -{ - new() { Text = ""اضافه کردن"", IconName = BitIconName.Add }, - new() { Text = ""ویرایش"", IconName = BitIconName.Edit }, - new() { Text = ""حذف"", IconName = BitIconName.Delete } -};"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs new file mode 100644 index 0000000000..e41be97a4f --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs @@ -0,0 +1,287 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.ButtonGroup; + +public partial class _BitButtonGroupItemDemo +{ + private readonly string example1RazorCode = @" +"; + private readonly string example1CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +];"; + + private readonly string example2RazorCode = @" + + + + + + + + + + +"; + private readonly string example2CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +]; + +private List disabledItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"", IsEnabled = false }, new() { Text = ""Delete"" } +];"; + + private readonly string example3RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + private readonly string example3CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +];"; + + private readonly string example4RazorCode = @" + + +"; + private readonly string example4CsharpCode = @" +private List iconItems = +[ + new() { Text = ""Add"", IconName = BitIconName.Add }, + new() { Text = ""Edit"", IconName = BitIconName.Edit }, + new() { Text = ""Delete"", IconName = BitIconName.Delete } +];"; + + private readonly string example5RazorCode = @" + + + + + + +"; + private readonly string example5CsharpCode = @" +private List iconItems = +[ + new() { Text = ""Add"", IconName = BitIconName.Add }, + new() { Text = ""Edit"", IconName = BitIconName.Edit }, + new() { Text = ""Delete"", IconName = BitIconName.Delete } +]; + +private List onlyIconItems = +[ + new() { Text = ""Add"", IconName = BitIconName.Add }, + new() { IconName = BitIconName.Edit }, + new() { Text = ""Delete"", IconName = BitIconName.Delete } +];"; + + private readonly string example6RazorCode = @" + + +"; + private readonly string example6CsharpCode = @" +private List reversedIconItems = +[ + new() { Text = ""Add"", IconName = BitIconName.Add, ReversedIcon = true }, + new() { Text = ""Edit"", IconName = BitIconName.Edit, ReversedIcon = true }, + new() { Text = ""Delete"", IconName = BitIconName.Delete, ReversedIcon = true } +];"; + + private readonly string example7RazorCode = @" + + +"; + private readonly string example7CsharpCode = @" +private List toggledItems = +[ + new() { OnText = ""Back (2X)"", OffText = ""Back"", OnIconName = BitIconName.RewindTwoX, OffIconName = BitIconName.Rewind }, + new() { OnTitle = ""Resume"", OffTitle = ""Play"", OnIconName = BitIconName.PlayResume, OffIconName = BitIconName.Play }, + new() { OnText = ""Forward (2X)"", OffText = ""Forward"", OnIconName = BitIconName.FastForwardTwoX, OffIconName = BitIconName.FastForward, ReversedIcon = true } +];"; + + private readonly string example8RazorCode = @" + + +"; + private readonly string example8CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +];"; + + private readonly string example9RazorCode = @" + + + + + + + + + + +"; + private readonly string example9CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +];"; + + private readonly string example10RazorCode = @" + + + + + + +"; + private readonly string example10CsharpCode = @" +private List basicItems = +[ + new() { Text = ""Add"" }, new() { Text = ""Edit"" }, new() { Text = ""Delete"" } +]; + +private List styleClassItems = +[ + new() + { + Text = ""Styled"", + Style = ""color: tomato; border-color: brown; background-color: peachpuff;"", + IconName = BitIconName.Brush, + }, + new() + { + Text = ""Classed"", + Class = ""custom-item"", + IconName = BitIconName.FormatPainter, + } +];"; + + private readonly string example11RazorCode = @" + clickedItem = item.Text"" /> +
Clicked item: @clickedItem
+ + +
Click count: @clickCounter
"; + private readonly string example11CsharpCode = @" +private int clickCounter; +private string? clickedItem; + +private List eventsItems = +[ + new() { Text = ""Increase"", IconName = BitIconName.Add }, + new() { Text = ""Reset"", IconName = BitIconName.Reset }, + new() { Text = ""Decrease"", IconName = BitIconName.Remove } +]; + +protected override void OnInitialized() +{ + eventsItems[0].OnClick = _ => { clickCounter++; StateHasChanged(); }; + eventsItems[1].OnClick = _ => { clickCounter = 0; StateHasChanged(); }; + eventsItems[2].OnClick = _ => { clickCounter--; StateHasChanged(); }; +}"; + + private readonly string example12RazorCode = @" + + +"; + private readonly string example12CsharpCode = @" +private List rtlItems = +[ + new() { Text = ""اضافه کردن"", IconName = BitIconName.Add }, + new() { Text = ""ویرایش"", IconName = BitIconName.Edit }, + new() { Text = ""حذف"", IconName = BitIconName.Delete } +];"; +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor index 78a2bcee32..6828f69be3 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor @@ -317,7 +317,135 @@ - + + +
The IconOnly allows buttons to display only icons without any text, ideal for minimalistic designs or limited space.
+

+
+
Fill (default)
+ + + + + +
+

+
+
Outline
+ + + + + +
+

+
+
Text
+ + + + + +
+

+
Alternatively, each button can be set to IconOnly by simply leaving the text field empty.
+

+
+
Fill (default)
+ + + + + +
+

+
+
Outline
+ + + + + +
+

+
+
Text
+ + + + + +
+ + + + + +
Reverses the positions of the icon and the main content of the button.
+

+
+
Fill (default)
+ + + + + +
+

+
+
Outline
+ + + + + +
+

+
+
Text
+ + + + + +
+ + + + + +
The Toggled in BitButtonGroup allows you to control the active or inactive state of each button, providing clear visual feedback to users about which buttons are selected or currently in use.
+

+
+
Fill (default)
+ + + + + +
+

+
+
Outline
+ + + + + +
+

+
+
Text
+ + + + + +
+ + + +
By default the BitButtonGroup component is horizontal, but can be turned vertical by adding the Vertical property.


@@ -346,7 +474,7 @@ - +
Different sizes for buttons to meet design needs, ensuring flexibility within your application.


@@ -391,7 +519,7 @@ - +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -416,7 +544,7 @@ - +
Managing button click events.


@@ -442,7 +570,7 @@ - +
Use BitButtonGroup in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.cs index 3512afd078..998174d625 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.cs @@ -4,356 +4,4 @@ public partial class _BitButtonGroupOptionDemo { private int clickCounter; private string? clickedOption; - - private readonly string example1RazorCode = @" - - - - -"; - - private readonly string example2RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - - private readonly string example3RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - - private readonly string example4RazorCode = @" - - - - - - - - - - - - - - - - -"; - - private readonly string example5RazorCode = @" - - - - - - - - - - -"; - - private readonly string example6RazorCode = @" - - - - - - - - - - - - - - - - - - - - - - - - - - - - -"; - - private readonly string example7RazorCode = @" - - - - - - - - - - - - - - - -"; - - private readonly string example8RazorCode = @" - clickedOption = item.Text"" TItem=""BitButtonGroupOption""> - - - - -
Clicked item: @clickedOption
- - - { clickCounter++; StateHasChanged(); }"" /> - { clickCounter=0; StateHasChanged(); }"" /> - { clickCounter--; StateHasChanged(); }"" /> - -
Click count: @clickCounter
"; - private readonly string example8CsharpCode = @" -private int clickCounter; -private string? clickedOption;"; - - private readonly string example9RazorCode = @" - - - - - - - - - - - - - - - - -"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs new file mode 100644 index 0000000000..796c28abae --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs @@ -0,0 +1,433 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.ButtonGroup; + +public partial class _BitButtonGroupOptionDemo +{ + private readonly string example1RazorCode = @" + + + + +"; + + private readonly string example2RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + + private readonly string example3RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + + private readonly string example4RazorCode = @" + + + + + + + + + + + + + + + + +"; + + private readonly string example5RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + + private readonly string example6RazorCode = @" + + + + + + + + + + + + + + + + +"; + + private readonly string example7RazorCode = @" + + + + + + + + + + + + + + + + +"; + + private readonly string example8RazorCode = @" + + + + + + + + + + +"; + + private readonly string example9RazorCode = @" + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; + + private readonly string example10RazorCode = @" + + + + + + + + + + + + + + + +"; + + private readonly string example11RazorCode = @" + clickedOption = item.Text"" TItem=""BitButtonGroupOption""> + + + + +
Clicked item: @clickedOption
+ + + { clickCounter++; StateHasChanged(); }"" /> + { clickCounter=0; StateHasChanged(); }"" /> + { clickCounter--; StateHasChanged(); }"" /> + +
Click count: @clickCounter
"; + private readonly string example11CsharpCode = @" +private int clickCounter; +private string? clickedOption;"; + + private readonly string example12RazorCode = @" + + + + + + + + + + + + + + + + +"; +} From cf3eda1a865a421b30c003f7ec518a9ebf51cb03 Mon Sep 17 00:00:00 2001 From: Yaser Moradi Date: Fri, 20 Dec 2024 16:24:52 +0100 Subject: [PATCH 08/17] feat(templates): improve data loading and caching in Boilerplate #9515 (#9516) --- .../Components/Layout/UserMenu.razor | 31 +++++----- .../Components/Layout/UserMenu.razor.cs | 7 +-- .../Authorized/Settings/ProfileSection.razor | 6 +- .../Settings/ProfileSection.razor.cs | 12 ++-- .../Authorized/Settings/SettingsPage.razor | 4 -- .../Authorized/Settings/SettingsPage.razor.cs | 6 +- .../Components/Pages/HomePage.razor | 58 +++++++++---------- .../Components/Pages/HomePage.razor.cs | 24 +++++--- .../OfflineDbContextModelBuilder.cs | 2 +- .../Data/CompiledModel/UserDtoEntityType.cs | 9 ++- ...241220023903_InitialMigration.Designer.cs} | 8 ++- ....cs => 20241220023903_InitialMigration.cs} | 7 ++- .../OfflineDbContextModelSnapshot.cs | 6 ++ .../Controllers/AttachmentController.cs | 10 ++-- .../Statistics/StatisticsController.cs | 2 +- .../src/Shared/Dtos/Identity/UserDto.cs | 9 +++ .../Extensions/ByteArrayExtensions.cs | 2 + 17 files changed, 113 insertions(+), 90 deletions(-) rename src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Data/Migrations/{20241030140343_InitialMigration.Designer.cs => 20241220023903_InitialMigration.Designer.cs} (89%) rename src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Data/Migrations/{20241030140343_InitialMigration.cs => 20241220023903_InitialMigration.cs} (80%) rename src/Templates/Boilerplate/Bit.Boilerplate/src/{Client/Boilerplate.Client.Core => Shared}/Extensions/ByteArrayExtensions.cs (94%) diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/UserMenu.razor b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/UserMenu.razor index d6c56d0648..75c0aacf01 100644 --- a/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/UserMenu.razor +++ b/src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/UserMenu.razor @@ -1,8 +1,4 @@ -@inherits AppComponentBase - -@{ - var imageUrl = user.ProfileImageName is null ? null : $"{profileImageUrl}&file={user.ProfileImageName}"; -} +@inherits AppComponentBase