Docs update - Accordion, Alerts, Badge, Breadcrumb, Buttons, Callout, Card

BlazorBootstrap.Demo.RCL/Components/Layout/DocsMainLayout.razor.cs

@@ -75,7 +75,8 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "605", Text = "Scatter Chart", Href = DemoRouteConstants.Docs_URL_ScatterChart, IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All },
 
             new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success },
-            new (){ Id = "700", Text = "Modal Service", Href = DemoRouteConstants.Docs_URL_ModalService, IconName = IconName.WindowStack, ParentId = "7" },
+            new (){ Id = "700", Text = "Breadcrumb Service", Href = DemoRouteConstants.Docs_URL_BreadcrumbService, IconName = IconName.WindowStack, ParentId = "7" },
+            new (){ Id = "701", Text = "Modal Service", Href = DemoRouteConstants.Docs_URL_ModalService, IconName = IconName.WindowStack, ParentId = "7" },
 
             //new(){ Id = "19", Text = "Utilities", IconName = IconName.GearWideConnected, IconColor = IconColor.Info },
             //new (){ Id = "1900", Text = "Color Utility", Href = DemoRouteConstants.Docs_URL_ColorUtils, IconName = IconName.Palette2, ParentId = "19" },

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Accordion/Accordion_Doc_01_Documentation.razor

@@ -26,6 +26,10 @@
     <DocxTable TItem="Accordion" DocType="DocType.Events" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="AccordionEventArgs Properties" PageUrl="@pageUrl" Link="accordion-item-properties">
+    <DocxTable TItem="AccordionEventArgs" DocType="DocType.Properties" />
+</Section>
+
 <Section Class="p-0" Size="HeadingSize.H3" Name="AccordionItem Parameters" PageUrl="@pageUrl" Link="accordion-item-parameters">
     <DocxTable TItem="AccordionItem" DocType="DocType.Parameters" />
 </Section>

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Alerts/Alert_Doc_01_Documentation.razor

@@ -14,18 +14,22 @@
     <img src="@imageUrl" class="img-fluid" alt="@metaTitle" />
 </Section>
 
-<Section Class="p-0" Size="HeadingSize.H3" Name="Parameters" PageUrl="@pageUrl" Link="parameters">
+<Section Class="p-0" Size="HeadingSize.H3" Name="Alert Parameters" PageUrl="@pageUrl" Link="alert-parameters">
     <DocxTable TItem="Alert" DocType="DocType.Parameters" />
 </Section>
 
-<Section Class="p-0" Size="HeadingSize.H3" Name="Methods" PageUrl="@pageUrl" Link="methods">
+<Section Class="p-0" Size="HeadingSize.H3" Name="Alert Methods" PageUrl="@pageUrl" Link="alert-methods">
     <DocxTable TItem="Alert" DocType="DocType.Methods" />
 </Section>
 
-<Section Class="p-0" Size="HeadingSize.H3" Name="Events" PageUrl="@pageUrl" Link="events">
+<Section Class="p-0" Size="HeadingSize.H3" Name="Alert Events" PageUrl="@pageUrl" Link="alert-events">
     <DocxTable TItem="Alert" DocType="DocType.Events" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="AlertColor Enum" PageUrl="@pageUrl" Link="alert-color-enum">
+    <DocxTable TItem="AlertColor" DocType="DocType.Enum" />
+</Section>
+
 @code {
     private const string componentName = nameof(Alert);
     private const string pageUrl = DemoRouteConstants.Docs_URL_Alerts;

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Badge/Badge_Doc_01_Documentation.razor

@@ -14,10 +14,26 @@
     <img src="@imageUrl" class="img-fluid" alt="@metaTitle" />
 </Section>
 
-<Section Class="p-0" Size="HeadingSize.H3" Name="Parameters" PageUrl="@pageUrl" Link="parameters">
+<Section Class="p-0" Size="HeadingSize.H3" Name="Badge Parameters" PageUrl="@pageUrl" Link="badge-parameters">
     <DocxTable TItem="Badge" DocType="DocType.Parameters" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="BadgeColor Enum" PageUrl="@pageUrl" Link="badge-color-enum">
+    <DocxTable TItem="BadgeColor" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="BadgeIndicatorType Enum" PageUrl="@pageUrl" Link="badge-indicator-type-enum">
+    <DocxTable TItem="BadgeIndicatorType" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="BadgePlacement Enum" PageUrl="@pageUrl" Link="badge-placement-enum">
+    <DocxTable TItem="BadgePlacement" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Position Enum" PageUrl="@pageUrl" Link="position-enum">
+    <DocxTable TItem="Position" DocType="DocType.Enum" />
+</Section>
+
 @code {
     private const string componentName = nameof(Badge);
     private const string pageUrl = DemoRouteConstants.Docs_URL_Badge;

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Breadcrumb/Breadcrumb_Doc_01_Documentation.razor

@@ -18,6 +18,14 @@
     <DocxTable TItem="Breadcrumb" DocType="DocType.Parameters" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="BreadcrumbItem Properties" PageUrl="@pageUrl" Link="breadcrumb-item-properties">
+    <DocxTable TItem="BreadcrumbItem" DocType="DocType.Properties" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="BreadcrumbService Methods" PageUrl="@pageUrl" Link="breadcrumb-service-methods">
+    <DocxTable TItem="BreadcrumbService" DocType="DocType.Methods" />
+</Section>
+
 @code {
     private const string componentName = nameof(Breadcrumb);
     private const string pageUrl = DemoRouteConstants.Docs_URL_Breadcrumb;

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Buttons/Buttons_Doc_01_Documentation.razor

@@ -14,16 +14,40 @@
     <img src="@imageUrl" class="img-fluid" alt="@metaTitle" />
 </Section>
 
-<Section Class="p-0" Size="HeadingSize.H3" Name="Parameters" PageUrl="@pageUrl" Link="parameters">
+<Section Class="p-0" Size="HeadingSize.H3" Name="Button Parameters" PageUrl="@pageUrl" Link="button-parameters">
     <DocxTable TItem="Button" DocType="DocType.Parameters" />
 </Section>
 
-<Section Class="p-0" Size="HeadingSize.H3" Name="Methods" PageUrl="@pageUrl" Link="methods">
+<Section Class="p-0" Size="HeadingSize.H3" Name="Button Methods" PageUrl="@pageUrl" Link="button-methods">
     <DocxTable TItem="Button" DocType="DocType.Methods" />
 </Section>
 
-<Section Class="p-0" Size="HeadingSize.H3" Name="Events" PageUrl="@pageUrl" Link="events">
-    <DocxTable TItem="Button" DocType="DocType.Events" />
+<Section Class="p-0" Size="HeadingSize.H3" Name="ButtonColor Enum" PageUrl="@pageUrl" Link="button-color-enum">
+    <DocxTable TItem="ButtonColor" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="ButtonSize Enum" PageUrl="@pageUrl" Link="button-size-enum">
+    <DocxTable TItem="ButtonSize" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="ButtonType Enum" PageUrl="@pageUrl" Link="button-type-enum">
+    <DocxTable TItem="ButtonType" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Position Enum" PageUrl="@pageUrl" Link="position-enum">
+    <DocxTable TItem="Position" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Target Enum" PageUrl="@pageUrl" Link="target-enum">
+    <DocxTable TItem="Target" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="TooltipColor Enum" PageUrl="@pageUrl" Link="tooltip-color-enum">
+    <DocxTable TItem="TooltipColor" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="TooltipPlacement Enum" PageUrl="@pageUrl" Link="tooltip-placement-enum">
+    <DocxTable TItem="TooltipPlacement" DocType="DocType.Enum" />
 </Section>
 
 @code {

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Callout/Callout_Doc_01_Documentation.razor

@@ -14,10 +14,14 @@
     <img src="@imageUrl" class="img-fluid" alt="@metaTitle" />
 </Section>
 
-<Section Class="p-0" Size="HeadingSize.H3" Name="Parameters" PageUrl="@pageUrl" Link="parameters">
+<Section Class="p-0" Size="HeadingSize.H3" Name="Callout Parameters" PageUrl="@pageUrl" Link="callout-parameters">
     <DocxTable TItem="Callout" DocType="DocType.Parameters" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="CalloutColor Enum" PageUrl="@pageUrl" Link="callout-color-enum">
+    <DocxTable TItem="CalloutColor" DocType="DocType.Enum" />
+</Section>
+
 @code {
     private const string componentName = nameof(Callout);
     private const string pageUrl = DemoRouteConstants.Docs_URL_Callout;

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Card/Card_Doc_01_Documentation.razor

@@ -50,6 +50,22 @@
     <DocxTable TItem="CardTitle" DocType="DocType.Parameters" />
 </Section>
 
+<Section Class="p-0" Size="HeadingSize.H3" Name="CardColor Enum" PageUrl="@pageUrl" Link="card-color-enum">
+    <DocxTable TItem="CardColor" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Alignment Enum" PageUrl="@pageUrl" Link="alignment-enum">
+    <DocxTable TItem="Alignment" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Target Enum" PageUrl="@pageUrl" Link="target-enum">
+    <DocxTable TItem="Target" DocType="DocType.Enum" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="HeadingSize Enum" PageUrl="@pageUrl" Link="heading-size-enum">
+    <DocxTable TItem="HeadingSize" DocType="DocType.Enum" />
+</Section>
+
 @code {
     private const string componentName = nameof(Card);
     private const string pageUrl = DemoRouteConstants.Docs_URL_Card;

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Services/BreadcrumbService/BreadcrumbService_Doc_01_Documentation.razor

@@ -0,0 +1,29 @@
+@attribute [Route(pageUrl)]
+@layout DocsMainLayout
+
+<DocsPageHeadSection PageUrl="@pageUrl"
+                     PageTitle="@pageTitle"
+                     PageDescription="@pageDescription"
+                     MetaTitle="@metaTitle"
+                     MetaDescription="@metaDescription"
+                     ImageUrl="@imageUrl" />
+
+<DemoLink Href="@DemoRouteConstants.Demos_URL_ModalService" />
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="Screenshot" PageUrl="@pageUrl" Link="screenshot">
+    <img src="@imageUrl" class="img-fluid" alt="@metaTitle" />
+</Section>
+
+<Section Class="p-0" Size="HeadingSize.H3" Name="BreadcrumbService Methods" PageUrl="@pageUrl" Link="breadcrumb-service-methods">
+    <DocxTable TItem="BreadcrumbService" DocType="DocType.Methods" />
+</Section>
+
+@code {
+    private const string componentName = nameof(BreadcrumbService);
+    private const string pageUrl = DemoRouteConstants.Docs_URL_BreadcrumbService;
+    private const string pageTitle = componentName;
+    private const string pageDescription = $"This documentation provides a comprehensive reference for the <code>{componentName}</code> component, guiding you through its configuration options.";
+    private const string metaTitle = $"Blazor {componentName} Component";
+    private const string metaDescription = $"This documentation provides a comprehensive reference for the {componentName} component, guiding you through its configuration options.";
+    private const string imageUrl = DemoScreenshotSrcConstants.Demos_URL_Breadcrumb;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Docs/Services/ModalService/ModalService_Doc_01_Documentation.razor

@@ -18,8 +18,8 @@
     <DocxTable TItem="ModalService" DocType="DocType.Methods" />
 </Section>
 
-<Section Class="p-0" Size="HeadingSize.H3" Name="ModalOption Members" PageUrl="@pageUrl" Link="modal-option-members">
-    <DocxTable TItem="ModalOption" DocType="DocType.Parameters" />
+<Section Class="p-0" Size="HeadingSize.H3" Name="ModalOption Properties" PageUrl="@pageUrl" Link="modal-option-properties">
+    <DocxTable TItem="ModalOption" DocType="DocType.Properties" />
 </Section>
 
 @code {

BlazorBootstrap.Demo.RCL/Components/Shared/DocxTable/DocxEnumRow.razor

@@ -0,0 +1,10 @@
+@namespace BlazorBootstrap.Demo.RCL
+@inherits BlazorBootstrapComponentBase
+@typeparam TItem
+
+<tr>
+    <td>@Name</td>
+    <td>@Value</td>
+    <td>@((MarkupString)Description)</td>
+    <td>@AddedVersion</td>
+</tr>

BlazorBootstrap.Demo.RCL/Components/Shared/DocxTable/DocxEnumRow.razor.cs

@@ -0,0 +1,21 @@
+namespace BlazorBootstrap.Demo.RCL;
+
+public partial class DocxEnumRow<TItem> : BlazorBootstrapComponentBase
+{
+    private string Name => EnumValue.ToString();
+
+    private string Value => Convert.ToInt64(EnumValue).ToString();
+
+    private string Description => EnumFieldInfo?
+        .GetCustomAttribute<DescriptionAttribute>(inherit: false)?
+        .Description ?? Name;
+
+    private string AddedVersion => EnumFieldInfo?
+        .GetCustomAttribute<AddedVersionAttribute>(inherit: false)?
+        .Version ?? string.Empty;
+
+    private FieldInfo? EnumFieldInfo => EnumValue.GetType().GetField(Name);
+
+    [Parameter]
+    public Enum EnumValue { get; set; } = default!;
+}

BlazorBootstrap.Demo.RCL/Components/Shared/DocxTable/DocxMethodRow.razor.cs

@@ -11,7 +11,7 @@ public partial class DocxMethodRow<TItem> : BlazorBootstrapComponentBase
 
     public string ReturnType => MethodInfo.GetMethodReturnTypeName() ?? MethodInfo.GetMethodReturnType();
 
-    public string MethodNameWithParameters => $"{MethodInfo.Name}({MethodParameters})";
+    public string MethodNameWithParameters => MethodInfo.GetMethodName() ?? $"{MethodInfo.Name}({MethodParameters})";
 
     public string MethodParameters => MethodInfo.GetMethodParameters();
 

BlazorBootstrap.Demo.RCL/Components/Shared/DocxTable/DocxTable.razor

@@ -91,4 +91,28 @@
             </table>
         </div>
     }
+    else if (DocType == DocType.Enum)
+    {
+        <div class="table-container">
+            <table class="table table-bordered table-hover">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Value</th>
+                        <th>Description</th>
+                        <th class="text-nowrap">Added Version</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @if (typeof(TItem).IsEnum)
+                    {
+                        @foreach (var enumValue in Enum.GetValues(typeof(TItem)))
+                        {
+                            <DocxEnumRow TItem="TItem" EnumValue="@(enumValue as Enum)" />
+                        }
+                    }
+                </tbody>
+            </table>
+        </div>
+    }
 </CascadingValue>

BlazorBootstrap.Demo.RCL/Constants/DemoRouteConstants.cs

@@ -195,6 +195,7 @@ public static class DemoRouteConstants
 
     // Services
     public const string Docs_URL_Services_Prefix = Docs_URL_Prefix + "/services";
+    public const string Docs_URL_BreadcrumbService = Docs_URL_Services_Prefix + "/breadcrumb-service";
     public const string Docs_URL_ModalService = Docs_URL_Services_Prefix + "/modal-service";
 
     // Utilities

BlazorBootstrap.Demo.RCL/Extensions/MethodInfoExtensions.cs

@@ -32,6 +32,17 @@ public static string GetMethodDescription(this MethodInfo methodInfo)
         return descriptionAttribute?.Description ?? string.Empty;
     }
 
+    /// <summary>
+    /// Get method name.
+    /// </summary>
+    /// <param name="methodInfo"></param>
+    /// <returns>string</returns>
+    public static string GetMethodName(this MethodInfo methodInfo)
+    {
+        var methodNameAttribute = methodInfo.GetCustomAttributes(typeof(MethodNameAttribute), false).FirstOrDefault() as MethodNameAttribute;
+        return methodNameAttribute?.MethodName ?? null!;
+    }
+
     public static string GetMethodParameters(this MethodInfo methodInfo)
     {
         var parameters = methodInfo.GetParameters();

BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html

@@ -48,22 +48,19 @@
             </div>
         </div>
     </div>
-    <script src="_framework/blazor.webassembly#[.{fingerprint}].js" autostart="false"></script>
+    <script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
     <!-- Add chart.js reference if chart components are used in your application. -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <!-- Add sortable.js reference if SortableList component is used in your application. -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
-    <script src="_content/Blazor.Bootstrap/blazor.bootstrap#[.{fingerprint}].js"></script>
+    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/custom-class/prism-custom-class.min.js" integrity="sha512-7uKPAecn+SrAT5xVovlVdFCkXTM9LzNzjaK3yzb3ht22SwjnUTjWHNAp7dq3OPFmPb+DCAFjWnDT8Qrf256GeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
-    <script>
-        Blazor.start();
-    </script>
 </body>
 
 </html>

blazorbootstrap/Attributes/MethodNameAttribute.cs

@@ -0,0 +1,22 @@
+namespace BlazorBootstrap;
+
+/// <summary>
+/// Attribute to specify the method name with parameters.
+/// </summary>
+public class MethodNameAttribute : Attribute
+{
+    #region Constructors
+
+    public MethodNameAttribute(string methodName)
+    {
+        MethodName = methodName;
+    }
+
+    #endregion
+
+    #region Properties, Indexers
+
+    public string MethodName { get; }
+
+    #endregion
+}