wip updates

src/Pure.Blazor.Components/Layout/FlexModels.cs

@@ -0,0 +1,140 @@
+namespace Pure.Blazor.Components.Layout;
+
+internal class FlexMap
+{
+    internal const string Row = "row";
+    internal const string RowReverse = "row-reverse";
+    internal const string Column = "column";
+    internal const string ColumnReverse = "column-reverse";
+
+    internal static FlexDirection GetFlexDirection(string value)
+    {
+        return value switch
+        {
+            Row => FlexDirection.Row,
+            RowReverse => FlexDirection.RowReverse,
+            Column => FlexDirection.Col,
+            ColumnReverse => FlexDirection.ColReverse,
+            _ => FlexDirection.Row
+        };
+    }
+
+    internal static string GetFlexDirection(FlexDirection value)
+    {
+        return value switch
+        {
+            FlexDirection.Row => Row,
+            FlexDirection.RowReverse => RowReverse,
+            FlexDirection.Col => Column,
+            FlexDirection.ColReverse => ColumnReverse,
+            _ => Row
+        };
+    }
+
+    internal static string GetAlignContent(FlexAlignContent value)
+    {
+        return value switch
+        {
+            FlexAlignContent.Start => "content-start",
+            FlexAlignContent.End => "content-end",
+            FlexAlignContent.Center => "content-center",
+            FlexAlignContent.Between => "content-between",
+            FlexAlignContent.Around => "content-around",
+            FlexAlignContent.Evenly => "content-evenly",
+            _ => "content-stretch"
+        };
+    }
+
+    internal static string GetAlignItems(FlexAlignItems value)
+    {
+        return value switch
+        {
+            FlexAlignItems.Start => "items-start",
+            FlexAlignItems.End => "items-end",
+            FlexAlignItems.Center => "items-center",
+            FlexAlignItems.Baseline => "items-baseline",
+            FlexAlignItems.Stretch => "items-stretch",
+            _ => "items-stretch"
+        };
+    }
+
+    internal static string GetJustifyContent(FlexJustifyContent value)
+    {
+        return value switch
+        {
+            FlexJustifyContent.Start => "justify-start",
+            FlexJustifyContent.End => "justify-end",
+            FlexJustifyContent.Center => "justify-center",
+            FlexJustifyContent.Between => "justify-between",
+            FlexJustifyContent.Around => "justify-around",
+            FlexJustifyContent.Evenly => "justify-evenly",
+            _ => "justify-stretch"
+        };
+    }
+}
+
+public enum FlexDirection
+{
+    Row,
+    RowReverse,
+    Col,
+    ColReverse
+}
+
+public enum FlexWrap
+{
+    Wrap,
+    WrapReverse,
+    NoWrap
+}
+
+public enum FlexAlignItems
+{
+    Start,
+    End,
+    Center,
+    Baseline,
+    Stretch
+}
+
+public enum FlexAlignContent
+{
+    Start,
+    End,
+    Center,
+    Between,
+    Around,
+    Evenly
+}
+
+public enum FlexJustifyContent
+{
+    Start,
+    End,
+    Center,
+    Between,
+    Around,
+    Evenly
+}
+
+public enum FlexAlignSelf
+{
+    Auto,
+    Start,
+    End,
+    Center,
+    Stretch,
+    Baseline
+}
+
+public enum FlexGrow
+{
+    Grow,
+    Grow0
+}
+
+public enum FlexShrink
+{
+    Shrink,
+    Shrink0
+}

src/Pure.Blazor.Components/Layout/FlexRow.razor

@@ -0,0 +1,11 @@
+@inherits PureComponent
+<div class="flex @FlexMap.GetFlexDirection(Direction) @FlexMap.GetAlignContent(AlignContent) @FlexMap.GetJustifyContent(JustifyContent) @FlexMap.GetAlignItems(AlignItems) @ApplyStyle(Styles)">
+    @ChildContent
+</div>
+
+@code {
+    [Parameter] public FlexDirection Direction { get; set; }
+    [Parameter] public FlexAlignContent AlignContent { get; set; }
+    [Parameter] public FlexJustifyContent JustifyContent { get; set; }
+    [Parameter] public FlexAlignItems AlignItems { get; set; }
+}

src/Pure.Blazor.Components/Layout/GridColumn.razor

@@ -0,0 +1,35 @@
+@inherits PureComponent
+<div class="@ColumnSpan @ApplyStyle(Styles)">
+    @ChildContent
+</div>
+@code {
+    protected override void OnParametersSet()
+    {
+        if (Span < 1 || Span > 12)
+        {
+            throw new ArgumentOutOfRangeException(nameof(Span), "Span must be between 1 and 12");
+        }
+    }
+
+    /// <summary>
+    /// The number of columns this element should span.
+    /// </summary>
+    [Parameter]
+    public int Span { get; set; }
+
+    public string ColumnSpan => $"col-span-{Span}";
+
+    // TODO: use source generator to generate these constants
+    internal const string ColumnSpan1 = "col-span-1";
+    internal const string ColumnSpan2 = "col-span-2";
+    internal const string ColumnSpan3 = "col-span-3";
+    internal const string ColumnSpan4 = "col-span-4";
+    internal const string ColumnSpan5 = "col-span-5";
+    internal const string ColumnSpan6 = "col-span-6";
+    internal const string ColumnSpan7 = "col-span-7";
+    internal const string ColumnSpan8 = "col-span-8";
+    internal const string ColumnSpan9 = "col-span-9";
+    internal const string ColumnSpan10 = "col-span-10";
+    internal const string ColumnSpan11 = "col-span-11";
+    internal const string ColumnSpan12 = "col-span-12";
+}

src/Pure.Blazor.Components/Layout/GridLayout.razor

@@ -0,0 +1,6 @@
+@inherits PureComponent
+<div class="grid grid-cols-12 @ApplyStyle(Styles)">
+    @ChildContent
+</div>
+@code {
+}

src/Pure.Blazor.Components/Layout/PureTabButton.razor

@@ -1,14 +1,14 @@
 @using System.Text
 @inherits PureComponent
-<button @ref="_elementReference" tabindex="@(IsActive ? 0 : -1)" @onclick="OnClick" class="@ApplyStyle(InternalCss)" @onkeyup="OnKeyUp" role="tab">
+<button @ref="_elementReference" tabindex="@(IsActive ? 0 : -1)" @onclick="@((e) => {  Console.WriteLine("clicked"); OnClick.InvokeAsync(e); })" class="@ApplyStyle(InternalCss)" @onkeyup="OnKeyUp" role="tab">
     <!-- todo: icon -->
     @Title
 </button>
 
 @code {
     private ElementReference? _elementReference;
     private bool prevStateActive = false;
-    private const string BaseCss = "sm:w-auto justify-center sm:justify-start inline-flex items-center font-medium";
+    private const string BaseCss = "sm:w-auto sm:justify-start inline-flex items-center font-medium";
     [Parameter] public string Title { get; set; } = string.Empty;
 
     [Parameter] public bool IsActive { get; set; }

src/Pure.Blazor.Components/Layout/PureTabs.razor

@@ -9,7 +9,7 @@
                     IsActive="@(CurrentTab == tab)"
                     Size="Size"
                     OnKeyboardNavigation="KeyboardNavigation"
-                    OnClick="() => ChangeTab(tab)" Variant="Variant"/>
+                    OnClick="@(async () => await ChangeTab(tab))" Variant="Variant"/>
             }
 
         </div>
@@ -42,7 +42,7 @@
         BuildCss();
     }
 
-    internal void KeyboardNavigation(KeyboardDirection direction)
+    internal async Task KeyboardNavigation(KeyboardDirection direction)
     {
         if (CurrentTab == null)
         {
@@ -60,13 +60,14 @@
             _ => currentIndex
         };
 
-        ChangeTab(Tabs[nextIndex]);
+        await ChangeTab(Tabs[nextIndex]);
     }
 
-    internal void ChangeTab(PureTabContent tab)
+    internal async Task ChangeTab(PureTabContent tab)
     {
-        OnChanging.InvokeAsync();
-        tab.OnChanging.InvokeAsync();
+        Console.WriteLine("Changing tab");
+        await OnChanging.InvokeAsync();
+        await tab.OnChanging.InvokeAsync();
 
         CurrentTab = tab;
     }