Unify BlazorUI enums (#13041)

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BitChart.razor

@@ -7,22 +7,22 @@
         @((MarkupString)ReducedMotionStyles)
     }
 
-    @if (_scene.Title is { Position: not BitChartPosition.Bottom } title)
+    @if (_scene.Title is { Placement: not BitPlacement.Bottom } title)
     {
         @RenderTitle(title, "bc-title")
     }
-    @if (_scene.Subtitle is { Position: not BitChartPosition.Bottom } sub)
+    @if (_scene.Subtitle is { Placement: not BitPlacement.Bottom } sub)
     {
         @RenderTitle(sub, "bc-subtitle")
     }
 
-    @if (_scene.Legend is { Position: BitChartPosition.Top })
+    @if (_scene.Legend is { Placement: not (BitPlacement.Bottom or BitPlacement.Left or BitPlacement.Right) })
     {
         @RenderLegend(_scene.Legend)
     }
 
     <div class="bc-mid">
-        @if (_scene.Legend is { Position: BitChartPosition.Left })
+        @if (_scene.Legend is { Placement: BitPlacement.Left })
         {
             @RenderLegend(_scene.Legend)
         }
@@ -167,22 +167,22 @@
             }
         </div>
 
-        @if (_scene.Legend is { Position: BitChartPosition.Right })
+        @if (_scene.Legend is { Placement: BitPlacement.Right })
         {
             @RenderLegend(_scene.Legend)
         }
     </div>
 
-    @if (_scene.Legend is { Position: BitChartPosition.Bottom })
+    @if (_scene.Legend is { Placement: BitPlacement.Bottom })
     {
         @RenderLegend(_scene.Legend)
     }
 
-    @if (_scene.Subtitle is { Position: BitChartPosition.Bottom } subBottom)
+    @if (_scene.Subtitle is { Placement: BitPlacement.Bottom } subBottom)
     {
         @RenderTitle(subBottom, "bc-subtitle")
     }
-    @if (_scene.Title is { Position: BitChartPosition.Bottom } titleBottom)
+    @if (_scene.Title is { Placement: BitPlacement.Bottom } titleBottom)
     {
         @RenderTitle(titleBottom, "bc-title")
     }
@@ -200,7 +200,7 @@
     {
         var lines = title.Text.Split('\n');
         <div class="@cls" style="color:@title.Color;font-family:@title.Font.Family;font-size:@(BitChartSvg.N(title.Font.Size))px;font-weight:@title.Font.Weight;justify-content:@AlignToFlex(title.Align)">
-            <div style="text-align:@(title.Align == BitChartAlign.Start ? "left" : title.Align == BitChartAlign.End ? "right" : "center")">
+            <div style="text-align:@TextAlign(title.Align)">
                 @for (int i = 0; i < lines.Length; i++)
                 {
                     @lines[i]
@@ -251,7 +251,7 @@
 
     private RenderFragment RenderLegend(BitChartLegendModel legend) => __builder =>
     {
-        bool vertical = legend.Position is BitChartPosition.Left or BitChartPosition.Right;
+        bool vertical = legend.Placement is BitPlacement.Left or BitPlacement.Right;
         <div class="bc-legend @(vertical ? "bc-legend-v" : "bc-legend-h")"
              style="justify-content:@AlignToFlex(legend.Align)">
             @if (!string.IsNullOrEmpty(legend.Title))

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/BitChart.razor.cs

@@ -749,17 +749,25 @@ private string ChartAriaLabel
 
     private bool HasPointData => _config.Data.Datasets.Any(d => d.Points is { Count: > 0 });
 
-    private static string AlignToFlex(BitChartAlign a) => a switch
-    {
-        BitChartAlign.Start => "flex-start",
-        BitChartAlign.End => "flex-end",
+    // Each value is written as the CSS keyword that means what it says: the logical pair as the flex and text keywords
+    // that follow the reading direction, the physical pair as the ones that never move. The physical justify-content
+    // keywords are the newer ones in a flex box, so each is preceded by the logical keyword naming the same edge in a
+    // left-to-right layout, which a browser that drops it falls back to. Every value without an edge centers.
+    private static string AlignToFlex(BitPlacement a) => a switch
+    {
+        BitPlacement.Start => "flex-start",
+        BitPlacement.End => "flex-end",
+        BitPlacement.Left => "flex-start;justify-content:left",
+        BitPlacement.Right => "flex-end;justify-content:right",
         _ => "center"
     };
 
-    private static string TextAlign(BitChartAlign a) => a switch
+    private static string TextAlign(BitPlacement a) => a switch
     {
-        BitChartAlign.Start => "left",
-        BitChartAlign.End => "right",
+        BitPlacement.Start => "start",
+        BitPlacement.End => "end",
+        BitPlacement.Left => "left",
+        BitPlacement.Right => "right",
         _ => "center"
     };
 

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Models/BitChartDataLabelOptions.cs

@@ -13,7 +13,11 @@ public sealed class BitChartDataLabelOptions
     /// <summary>Per-element display predicate (value, datasetIndex, dataIndex) => show.</summary>
     public Func<double, int, int, bool>? DisplayFn { get; set; }
     /// <summary>Anchor of the label relative to the element (start = baseline, center, end = tip).</summary>
-    public BitChartAlign Anchor { get; set; } = BitChartAlign.Center;
+    /// <remarks>
+    /// Only Start, Center and End are meaningful here, as the baseline and the tip of the element whichever way it
+    /// grows; every other value anchors the label at its center.
+    /// </remarks>
+    public BitPlacement Anchor { get; set; } = BitPlacement.Center;
     /// <summary>Optional background color drawn behind the label.</summary>
     public string? BackgroundColor { get; set; }
     /// <summary>Corner radius of the label background.</summary>

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Models/BitChartLegendOptions.cs

@@ -1,11 +1,27 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 /// <summary>Legend plugin options.</summary>
 public sealed class BitChartLegendOptions
 {
     public bool Display { get; set; } = true;
-    public BitChartPosition Position { get; set; } = BitChartPosition.Top;
-    public BitChartAlign Align { get; set; } = BitChartAlign.Center;
+    /// <summary>
+    /// Which edge of the chart the legend is drawn against (default is the top).
+    /// </summary>
+    /// <remarks>
+    /// A chart is laid out physically, so only Top, Bottom, Left and Right are meaningful here; any other side
+    /// leaves the legend at the top.
+    /// </remarks>
+    public BitPlacement Placement { get; set; } = BitPlacement.Top;
+    /// <summary>
+    /// Where the legend items line up along the edge the legend is drawn against (default is the center).
+    /// </summary>
+    /// <remarks>
+    /// Start, Center and End are meaningful here, and Left and Right for a legend above or below the chart. Start
+    /// and End follow the reading direction, while Left and Right stay on the same side of the screen in both; along
+    /// a legend beside the chart, which runs top to bottom, Start and End are its top and its bottom. Every other value
+    /// centers the items.
+    /// </remarks>
+    public BitPlacement Align { get; set; } = BitPlacement.Center;
     public bool Reverse { get; set; }
     /// <summary>Allow clicking a legend item to toggle dataset/data visibility.</summary>
     public bool OnClickToggle { get; set; } = true;

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Models/BitChartScaleOptions.cs

@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 /// <summary>
 /// A scale/axis definition, mirroring Chart.js cartesian and radial scale options.
@@ -8,7 +8,15 @@ public sealed class BitChartScaleOptions
     public string Id { get; set; } = "";
     public BitChartScaleType Type { get; set; } = BitChartScaleType.Linear;
     public bool Display { get; set; } = true;
-    public BitChartPosition? Position { get; set; }
+    /// <summary>
+    /// Which edge of the chart the axis is drawn against. Unset leaves an x axis at the bottom and a y axis
+    /// at the left.
+    /// </summary>
+    /// <remarks>
+    /// A chart is laid out physically, so only Top, Bottom, Left and Right are meaningful here; any other side
+    /// is read as the default for the axis.
+    /// </remarks>
+    public BitPlacement? Placement { get; set; }
 
     public double? Min { get; set; }
     public double? Max { get; set; }

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Models/BitChartTickOptions.cs

@@ -17,7 +17,11 @@ public sealed class BitChartTickOptions
     /// <summary>Minimum auto-rotation (degrees) for tick labels.</summary>
     public double MinRotation { get; set; }
     /// <summary>Tick label alignment relative to the tick (start/center/end).</summary>
-    public BitChartAlign Align { get; set; } = BitChartAlign.Center;
+    /// <remarks>
+    /// Only Start, Center and End are meaningful here, as the two ends of the tick along its own axis; every other
+    /// value centers the label.
+    /// </remarks>
+    public BitPlacement Align { get; set; } = BitPlacement.Center;
     /// <summary>Render value-axis tick labels inside the chart area.</summary>
     public bool Mirror { get; set; }
     public bool AutoSkip { get; set; } = true;

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Models/BitChartTitleOptions.cs

@@ -1,13 +1,28 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 /// <summary>Title / subtitle plugin options.</summary>
 public sealed class BitChartTitleOptions
 {
     public bool Display { get; set; }
     public string Text { get; set; } = "";
     public string Color { get; set; } = "var(--bit-clr-fg-pri, #1A1A1A)";
-    public BitChartPosition Position { get; set; } = BitChartPosition.Top;
-    public BitChartAlign Align { get; set; } = BitChartAlign.Center;
+    /// <summary>
+    /// Which edge of the chart the title is drawn against (default is the top).
+    /// </summary>
+    /// <remarks>
+    /// A title is a band across the chart rather than a column beside it, so only Top and Bottom are meaningful
+    /// here; every other side, the physical pair included, leaves the title at the top. Use <see cref="Align"/>
+    /// to move it along the edge it is drawn against.
+    /// </remarks>
+    public BitPlacement Placement { get; set; } = BitPlacement.Top;
+    /// <summary>
+    /// Where the title lines up along the edge it is drawn against (default is the center).
+    /// </summary>
+    /// <remarks>
+    /// Only Start, Center, End, Left and Right are meaningful here. Start and End follow the reading direction, while
+    /// Left and Right stay on the same side of the screen in both; every other value centers the title.
+    /// </remarks>
+    public BitPlacement Align { get; set; } = BitPlacement.Center;
     public BitChartFont Font { get; set; } = new() { Size = 16, Weight = "bold" };
     public BitChartPadding Padding { get; set; } = 10;
 }

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Models/BitChartTooltipOptions.cs

@@ -24,10 +24,18 @@ public sealed class BitChartTooltipOptions
     public string? BorderColor { get; set; }
     /// <summary>Border width of the tooltip box.</summary>
     public double BorderWidth { get; set; }
-    /// <summary>Text alignment of the title (left/center/right).</summary>
-    public BitChartAlign TitleAlign { get; set; } = BitChartAlign.Start;
-    /// <summary>Text alignment of the body (left/center/right).</summary>
-    public BitChartAlign BodyAlign { get; set; } = BitChartAlign.Start;
+    /// <summary>Text alignment of the title (default is the start).</summary>
+    /// <remarks>
+    /// Only Start, Center, End, Left and Right are meaningful here. Start and End follow the reading direction, while
+    /// Left and Right stay on the same side of the screen in both; every other value centers the text.
+    /// </remarks>
+    public BitPlacement TitleAlign { get; set; } = BitPlacement.Start;
+    /// <summary>Text alignment of the body (default is the start).</summary>
+    /// <remarks>
+    /// Only Start, Center, End, Left and Right are meaningful here. Start and End follow the reading direction, while
+    /// Left and Right stay on the same side of the screen in both; every other value centers the text.
+    /// </remarks>
+    public BitPlacement BodyAlign { get; set; } = BitPlacement.Start;
     /// <summary>Rich text/styling callbacks.</summary>
     public BitChartTooltipCallbacks Callbacks { get; set; } = new();
     /// <summary>Optional label formatter: (datasetLabel, value) => text. Shorthand for <c>Callbacks.Label</c>.</summary>

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Rendering/BitChartLegendModel.cs

@@ -4,8 +4,8 @@ namespace Bit.BlazorUI;
 public sealed class BitChartLegendModel
 {
     public List<BitChartLegendItemModel> Items { get; set; } = new();
-    public BitChartPosition Position { get; set; } = BitChartPosition.Top;
-    public BitChartAlign Align { get; set; } = BitChartAlign.Center;
+    public BitPlacement Placement { get; set; } = BitPlacement.Top;
+    public BitPlacement Align { get; set; } = BitPlacement.Center;
     public BitChartLegendLabelOptions Labels { get; set; } = new();
     public string? Title { get; set; }
     public bool OnClickToggle { get; set; } = true;

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Rendering/BitChartRenderer.Cartesian.cs

@@ -32,7 +32,7 @@ private void RenderCartesian(BitChartScene scene)
             valueScales[id] = scale;
             if (so.Type != BitChartScaleType.Category) scene.ZoomableAxes.Add(id);
             if (!so.Display) continue;
-            if ((so.Position ?? BitChartPosition.Left) == BitChartPosition.Right) rightAxes.Add(scale);
+            if ((so.Placement ?? BitPlacement.Left) == BitPlacement.Right) rightAxes.Add(scale);
             else leftAxes.Add(scale);
         }
 
@@ -65,7 +65,7 @@ private void RenderCartesian(BitChartScene scene)
             if (id == "x") indexScale = xs;
             if (so.Display)
             {
-                if ((so.Position ?? BitChartPosition.Bottom) == BitChartPosition.Top) topXAxes.Add(xs);
+                if ((so.Placement ?? BitPlacement.Bottom) == BitPlacement.Top) topXAxes.Add(xs);
                 else bottomXAxes.Add(xs);
             }
         }

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Rendering/BitChartRenderer.cs

@@ -182,27 +182,27 @@ private void EnsureScales()
         // Cartesian: ensure x and y exist with sensible defaults.
         var x = _options.GetOrAddScale("x", _config.Type is BitChartType.Scatter or BitChartType.Bubble
             ? BitChartScaleType.Linear : BitChartScaleType.Category);
-        x.Position ??= BitChartPosition.Bottom;
+        x.Placement ??= BitPlacement.Bottom;
 
         // Additional x axes referenced by datasets (default linear, bottom).
         foreach (var id in _data.Datasets.Select(d => d.XAxisID).Distinct())
         {
             if (id == "x" || string.IsNullOrEmpty(id)) continue;
             var x2 = _options.GetOrAddScale(id, BitChartScaleType.Linear);
-            x2.Position ??= BitChartPosition.Bottom;
+            x2.Placement ??= BitPlacement.Bottom;
         }
 
         // Gather y axis ids referenced by datasets.
         var yIds = _data.Datasets.Select(d => d.YAxisID).Distinct().ToList();
         foreach (var id in yIds)
         {
             var y = _options.GetOrAddScale(id, BitChartScaleType.Linear);
-            y.Position ??= BitChartPosition.Left;
+            y.Placement ??= BitPlacement.Left;
         }
         if (!_options.Scales.ContainsKey("y"))
         {
             var y = _options.GetOrAddScale("y", BitChartScaleType.Linear);
-            y.Position ??= BitChartPosition.Left;
+            y.Placement ??= BitPlacement.Left;
         }
     }
 
@@ -213,7 +213,7 @@ private void BuildLegend(BitChartScene scene)
 
         var legend = new BitChartLegendModel
         {
-            Position = lo.Position,
+            Placement = lo.Placement,
             Align = lo.Align,
             Labels = lo.Labels,
             Title = lo.Title,
@@ -268,7 +268,7 @@ private void BuildLegend(BitChartScene scene)
         {
             Text = o.Text,
             Color = o.Color,
-            Position = o.Position,
+            Placement = o.Placement,
             Align = o.Align,
             Font = o.Font
         };

src/BlazorUI/Bit.BlazorUI.Extras/Components/Chart/Rendering/BitChartTitleModel.cs

@@ -5,7 +5,7 @@ public sealed class BitChartTitleModel
 {
     public string Text { get; set; } = "";
     public string Color { get; set; } = "#333";
-    public BitChartPosition Position { get; set; } = BitChartPosition.Top;
-    public BitChartAlign Align { get; set; } = BitChartAlign.Center;
+    public BitPlacement Placement { get; set; } = BitPlacement.Top;
+    public BitPlacement Align { get; set; } = BitPlacement.Center;
     public BitChartFont Font { get; set; } = new();
 }

src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.razor

@@ -63,7 +63,7 @@
         </div>
     }
 
-    @if (PagingActive && (PagerPosition is BitDataGridPagerPosition.Top or BitDataGridPagerPosition.TopAndBottom))
+    @if (PagingActive && (PagerPlacement is BitPlacement.Top or BitPlacement.TopAndBottom))
     {
         @RenderPager
     }
@@ -434,7 +434,7 @@
         </div>
     </div>
 
-    @if (PagingActive && (PagerPosition is BitDataGridPagerPosition.Bottom or BitDataGridPagerPosition.TopAndBottom))
+    @if (PagingActive && (PagerPlacement is not BitPlacement.Top))
     {
         @RenderPager
     }