From 1c9648f86b7581dabca9fb2d20b95a5d69740d39 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 22 Feb 2025 18:14:20 +0800
Subject: [PATCH 1/4] Revert "feat(ListView): use grid layout instead of flex
 (#5409)"

This reverts commit e1a8f5367736f416b20619f85c88e5ec33f6abf5.
---
 .../Components/Samples/ListViews.razor        | 10 +++---
 .../Components/Samples/ListViews.razor.css    |  4 +--
 .../Components/ListView/ListView.razor        | 25 ++++++++------
 .../Components/ListView/ListView.razor.cs     |  2 +-
 .../Components/ListView/ListView.razor.scss   | 33 ++++++++++++++-----
 .../wwwroot/scss/theme/bootstrapblazor.scss   |  6 ++--
 6 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor b/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor
index 8c26331dbc0..7d9ce17613e 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor
@@ -17,7 +17,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img class="lv-demo-img" src="@context.ImageUrl" />
+                    <img src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
@@ -42,7 +42,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img class="lv-demo-img" src="@context.ImageUrl" />
+                    <img src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
@@ -60,7 +60,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img class="lv-demo-img" src="@context.ImageUrl" />
+                    <img src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
@@ -78,7 +78,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img class="lv-demo-img" src="@context.ImageUrl" />
+                    <img src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
@@ -96,7 +96,7 @@
         <BodyTemplate>
             <Card>
                 <BodyTemplate>
-                    <img class="lv-demo-img" src="@context.ImageUrl" />
+                    <img src="@context.ImageUrl" />
                     <div class="lv-demo-desc">@context.Description</div>
                 </BodyTemplate>
             </Card>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor.css b/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor.css
index bdac4ae871d..10afd97d492 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Samples/ListViews.razor.css
@@ -1,5 +1,5 @@
-.lv-demo-img {
-    width: 100%;
+img {
+    margin-bottom: 1rem;
     border-radius: var(--bs-border-radius);
 }
 
diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor b/src/BootstrapBlazor/Components/ListView/ListView.razor
index 10087a7185a..4493a83b7f8 100644
--- a/src/BootstrapBlazor/Components/ListView/ListView.razor
+++ b/src/BootstrapBlazor/Components/ListView/ListView.razor
@@ -16,7 +16,12 @@
             {
                 if (GroupName == null)
                 {
-                    @RenderGroup(Rows)
+                    foreach (var item in Rows)
+                    {
+                        <div class="listview-item" @onclick="@(e => OnClick(item))">
+                            @BodyTemplate(item)
+                        </div>
+                    }
                 }
                 else if (Collapsible)
                 {
@@ -33,7 +38,12 @@
                         <div @key="@key.GroupName" class="accordion-item">
                             <div class="accordion-header">@key.GroupName</div>
                             <div class="accordion-body">
-                                @RenderGroup(key.Items)
+                                @foreach (var item in key.Items)
+                                {
+                                    <div class="listview-item" @onclick="@(e => OnClick(item))">
+                                        @BodyTemplate(item)
+                                    </div>
+                                }
                             </div>
                         </div>
                     }
@@ -67,19 +77,14 @@
 @code {
     RenderFragment RenderItem((object? GroupName, IOrderedEnumerable<TItem> Items) key, int index) =>
     @<CollapseItem Text="@GetGroupName(key.GroupName)" IsCollapsed="IsCollapsed(index, key.GroupName)">
-        @RenderGroup(key.Items)
-    </CollapseItem>;
-
-    RenderFragment<IEnumerable<TItem>> RenderGroup => items =>
-    @<div class="listview-item-group">
-        @foreach (var item in items)
+        @foreach (var item in key.Items)
         {
-            <div @key="item" class="listview-item" @onclick="@(e => OnClick(item))">
+            <div class="listview-item" @onclick="@(e => OnClick(item))">
                 @if(BodyTemplate != null)
                 {
                     @BodyTemplate(item)
                 }
             </div>
         }
-    </div>;
+    </CollapseItem>;
 }
diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor.cs b/src/BootstrapBlazor/Components/ListView/ListView.razor.cs
index 7225e001676..40de42b1de7 100644
--- a/src/BootstrapBlazor/Components/ListView/ListView.razor.cs
+++ b/src/BootstrapBlazor/Components/ListView/ListView.razor.cs
@@ -15,7 +15,7 @@ public partial class ListView<TItem> : BootstrapComponentBase
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? BodyClassString => CssBuilder.Default("listview-body scroll")
+    private string? BodyClassString => CssBuilder.Default("listview-body")
         .AddClass("is-group", GroupName != null)
         .Build();
 
diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor.scss b/src/BootstrapBlazor/Components/ListView/ListView.razor.scss
index f5a4be567be..7d89e69b2d4 100644
--- a/src/BootstrapBlazor/Components/ListView/ListView.razor.scss
+++ b/src/BootstrapBlazor/Components/ListView/ListView.razor.scss
@@ -6,7 +6,7 @@
     --bb-lv-item-border-hover-color: #{$bb-lv-item-border-hover-color};
     --bb-lv-item-shadow: #{$bb-lv-item-shadow};
     --bb-lv-body-padding: #{$bb-lv-body-padding};
-    --bb-lv-body-item-gap: #{$bb-lv-body-item-gap};
+    --bb-lv-body-item-margin: #{$bb-lv-body-item-margin};
     --bb-lv-footer-padding: #{$bb-lv-footer-padding};
     border: 1px solid var(--bb-lv-border-color);
     border-radius: var(--bs-border-radius);
@@ -29,17 +29,24 @@
 .listview .listview-body {
     padding: var(--bb-lv-body-padding);
     position: relative;
+    overflow: auto;
+    display: flex;
+    flex-flow: row wrap;
     flex: 1;
-    min-height: 0;
+    align-content: flex-start;
     height: 1%;
+    min-height: 0;
 }
 
 .listview .listview-body.is-group {
     padding: 0;
 }
 
+.listview .listview-body .listview-item {
+    margin: var(--bb-lv-body-item-margin);
+}
+
 .listview .listview-body .listview-item .card {
-    box-shadow: var(--bb-lv-item-shadow);
     transition: var(--bb-lv-item-trans);
 }
 
@@ -48,11 +55,15 @@
     border: 1px solid var(--bb-lv-item-border-hover-color);
 }
 
-.listview .listview-item-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: var(--bb-lv-body-item-gap);
-    align-items: start;
+.listview .listview-body .listview-item .card {
+    box-shadow: var(--bb-lv-item-shadow);
+}
+
+.listview .listview-body .listview-item-group {
+    flex-basis: 100%;
+    margin: 1rem 0;
+    font-weight: bold;
+    position: relative;
 }
 
 .listview .listview-body .accordion {
@@ -71,9 +82,15 @@
 }
 
 .listview .listview-body .accordion-body {
+    display: flex;
+    flex-wrap: wrap;
     padding: var(--bb-lv-body-padding);
 }
 
+.listview .listview-body .accordion-item {
+    width: 100%;
+}
+
 .listview .listview-body .accordion-item:last-child .accordion-header {
     border-bottom: 1px solid var(--bb-lv-border-color);
 }
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
index 1f442bd661b..fbfb33dbe0b 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -381,9 +381,9 @@ $bb-lv-border-color: var(--bs-border-color);
 $bb-lv-item-trans: border .3s linear;
 $bb-lv-item-border-hover-color: #409eff;
 $bb-lv-item-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-$bb-lv-body-padding: 0.5rem;
-$bb-lv-body-item-gap: 0.5rem;
-$bb-lv-footer-padding: 0.5rem;
+$bb-lv-body-padding: 1rem 0 0 1rem;
+$bb-lv-body-item-margin: 0 1rem 1rem 0;
+$bb-lv-footer-padding: 1rem;
 
 // Logout
 $bb-logout-avatar-width: 42px;

From d4ec920e5fc3e47d9dff683ad4e6908039711caa Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 22 Feb 2025 18:28:33 +0800
Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=94=B9=E6=96=B9?=
 =?UTF-8?q?=E6=B3=95=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/ListView/ListView.razor        | 20 ++++++++-----------
 .../Components/ListView/ListView.razor.cs     |  2 +-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor b/src/BootstrapBlazor/Components/ListView/ListView.razor
index 4493a83b7f8..4c5002d270b 100644
--- a/src/BootstrapBlazor/Components/ListView/ListView.razor
+++ b/src/BootstrapBlazor/Components/ListView/ListView.razor
@@ -75,16 +75,12 @@
 </div>
 
 @code {
-    RenderFragment RenderItem((object? GroupName, IOrderedEnumerable<TItem> Items) key, int index) =>
-    @<CollapseItem Text="@GetGroupName(key.GroupName)" IsCollapsed="IsCollapsed(index, key.GroupName)">
-        @foreach (var item in key.Items)
-        {
-            <div class="listview-item" @onclick="@(e => OnClick(item))">
-                @if(BodyTemplate != null)
-                {
-                    @BodyTemplate(item)
-                }
-            </div>
-        }
-    </CollapseItem>;
+
+    RenderFragment RenderGroupItem((object? GroupName, IOrderedEnumerable<TItem> Items) key, int index) =>
+        @<CollapseItem Text="@GetGroupName(key.GroupName)" IsCollapsed="IsCollapsed(index, key.GroupName)">
+            @foreach (var item in key.Items)
+            {
+                @RenderItem(item)
+            }
+        </CollapseItem>;
 }
diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor.cs b/src/BootstrapBlazor/Components/ListView/ListView.razor.cs
index 40de42b1de7..97ca65e7444 100644
--- a/src/BootstrapBlazor/Components/ListView/ListView.razor.cs
+++ b/src/BootstrapBlazor/Components/ListView/ListView.razor.cs
@@ -232,7 +232,7 @@ private RenderFragment RenderCollapsibleItems(Func<TItem, object?> groupFunc) =>
         foreach (var key in GetGroupItems(groupFunc))
         {
             var i = index++;
-            builder.AddContent(i, RenderItem(key, i));
+            builder.AddContent(i, RenderGroupItem(key, i));
         }
     };
 

From 437cb443cdf224a5e07ba0a861ac1138c43a1220 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 22 Feb 2025 18:29:00 +0800
Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=E4=BB=A3=E7=A0=81=E5=A4=8D?=
 =?UTF-8?q?=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/ListView/ListView.razor           | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor b/src/BootstrapBlazor/Components/ListView/ListView.razor
index 4c5002d270b..af992acab31 100644
--- a/src/BootstrapBlazor/Components/ListView/ListView.razor
+++ b/src/BootstrapBlazor/Components/ListView/ListView.razor
@@ -18,9 +18,7 @@
                 {
                     foreach (var item in Rows)
                     {
-                        <div class="listview-item" @onclick="@(e => OnClick(item))">
-                            @BodyTemplate(item)
-                        </div>
+                        @RenderItem(item)
                     }
                 }
                 else if (Collapsible)
@@ -40,9 +38,7 @@
                             <div class="accordion-body">
                                 @foreach (var item in key.Items)
                                 {
-                                    <div class="listview-item" @onclick="@(e => OnClick(item))">
-                                        @BodyTemplate(item)
-                                    </div>
+                                    @RenderItem(item)
                                 }
                             </div>
                         </div>
@@ -83,4 +79,12 @@
                 @RenderItem(item)
             }
         </CollapseItem>;
+
+    RenderFragment<TItem> RenderItem => item =>
+        @<div @key="item" class="listview-item" @onclick="@(e => OnClick(item))">
+            @if(BodyTemplate != null)
+            {
+                @BodyTemplate(item)
+            }
+        </div>;
 }

From c43f2b89bf5c472322f507c0d2e8de5032b5613c Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sat, 22 Feb 2025 18:32:08 +0800
Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/Components/ListView/ListView.razor    | 2 +-
 src/BootstrapBlazor/Components/ListView/ListView.razor.cs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor b/src/BootstrapBlazor/Components/ListView/ListView.razor
index af992acab31..add35bd6505 100644
--- a/src/BootstrapBlazor/Components/ListView/ListView.razor
+++ b/src/BootstrapBlazor/Components/ListView/ListView.razor
@@ -35,7 +35,7 @@
                     {
                         <div @key="@key.GroupName" class="accordion-item">
                             <div class="accordion-header">@key.GroupName</div>
-                            <div class="accordion-body">
+                            <div class="accordion-body scroll">
                                 @foreach (var item in key.Items)
                                 {
                                     @RenderItem(item)
diff --git a/src/BootstrapBlazor/Components/ListView/ListView.razor.cs b/src/BootstrapBlazor/Components/ListView/ListView.razor.cs
index 97ca65e7444..d8e2441486a 100644
--- a/src/BootstrapBlazor/Components/ListView/ListView.razor.cs
+++ b/src/BootstrapBlazor/Components/ListView/ListView.razor.cs
@@ -15,7 +15,7 @@ public partial class ListView<TItem> : BootstrapComponentBase
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
-    private string? BodyClassString => CssBuilder.Default("listview-body")
+    private string? BodyClassString => CssBuilder.Default("listview-body scroll")
         .AddClass("is-group", GroupName != null)
         .Build();