From 9b15f888e67ea5e26dc9b4074e5c647e9a1f990d Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Wed, 14 Jun 2023 01:36:27 +0800
Subject: [PATCH] improve tree view selection sheet style

---
 .../mobile/TreeViewSelectionSheet.vue         | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
index be1560dd..e4adab95 100644
--- a/src/components/mobile/TreeViewSelectionSheet.vue
+++ b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -1,6 +1,6 @@
 <template>
     <f7-sheet swipe-to-close swipe-handler=".swipe-handler"
-              :class="{ 'tree-view-selection-huge-sheet': hugeTreeViewItems }"
+              :class="heightClass"
               :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
@@ -74,9 +74,11 @@ export default {
         }
     },
     computed: {
-        hugeTreeViewItems() {
+        heightClass() {
+            let count = 0;
+
             if (isArray(this.items)) {
-                return this.items.length > 10;
+                count = this.items.length;
             } else {
                 let count = 0;
 
@@ -87,8 +89,14 @@ export default {
 
                     count++;
                 }
+            }
 
-                return count > 10;
+            if (count > 6) {
+                return 'tree-view-selection-huge-sheet';
+            } else if (count > 2) {
+                return 'tree-view-selection-large-sheet';
+            } else {
+                return '';
             }
         }
     },
@@ -157,6 +165,10 @@ export default {
 
 <style>
 @media (min-height: 630px) {
+    .tree-view-selection-large-sheet {
+        height: 310px;
+    }
+
     .tree-view-selection-huge-sheet {
         height: 400px;
     }