upgrade framework7 to 9.0

src/components/mobile/ListItemSelectionPopup.vue

@@ -2,7 +2,6 @@
     <f7-popup push :opened="show" @popup:open="onPopupOpen" @popup:closed="onPopupClosed">
         <f7-page>
             <f7-navbar :outline="false">
-                <f7-nav-left></f7-nav-left>
                 <f7-nav-title :title="title" v-if="title"></f7-nav-title>
                 <f7-nav-right>
                     <f7-link popup-close :text="tt('Done')"></f7-link>

src/components/mobile/ListItemSelectionSheet.vue

@@ -4,7 +4,6 @@
               @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
             <div class="right">
                 <f7-link sheet-close :text="tt('Done')"></f7-link>
             </div>

src/components/mobile/MapSheet.vue

@@ -11,7 +11,7 @@
                 <f7-link :text="tt('Done')" @click="save"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-page-content class="no-margin-vertical no-padding-vertical">
+        <f7-page-content>
             <map-view ref="map" height="400px" :geo-location="geoLocation" @click="updateSpecifiedGeoLocation">
                 <template #error-title="{ mapSupported, mapDependencyLoaded }">
                     <div class="display-flex padding justify-content-space-between align-items-center">

src/components/mobile/PasscodeInputSheet.vue

@@ -9,15 +9,13 @@
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin" v-if="hint">{{ hint }}</p>
                 <slot></slot>
-                <f7-list strong class="no-margin">
+                <f7-list class="no-margin">
                     <f7-list-input
                         type="number"
                         autocomplete="one-time-code"
                         outline
-                        floating-label
                         clear-button
                         class="no-margin no-padding-bottom"
-                        :label="tt('Passcode')"
                         :placeholder="tt('Passcode')"
                         v-model:value="currentPasscode"
                         @keyup.enter="confirm()"

src/components/mobile/PasswordInputSheet.vue

@@ -8,16 +8,14 @@
             </div>
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin" v-if="hint">{{ hint }}</p>
-                <f7-list strong class="no-margin">
+                <f7-list class="no-margin">
                     <f7-list-input
                         type="password"
                         autocomplete="current-password"
                         outline
-                        floating-label
                         clear-button
                         class="no-margin no-padding-bottom"
                         :class="color ? 'color-' + color : ''"
-                        :label="tt('Current Password')"
                         :placeholder="tt('Current Password')"
                         v-model:value="currentPassword"
                         @keyup.enter="confirm()"

src/components/mobile/TransactionTagSelectionSheet.vue

@@ -13,15 +13,15 @@
                          :text="tt('Add')" v-if="!allTags || !allTags.length || noAvailableTag" @click="addNewTag"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-searchbar ref="searchbar" custom-searchs
-                      :value="filterContent"
-                      :placeholder="tt('Find tag')"
-                      :disable-button="false"
-                      v-if="enableFilter"
-                      @input="filterContent = $event.target.value"
-                      @focus="onSearchBarFocus">
-        </f7-searchbar>
-        <f7-page-content :class="'no-padding-top ' + heightClass">
+        <f7-page-content :class="heightClass">
+            <f7-searchbar ref="searchbar" custom-searchs
+                          :value="filterContent"
+                          :placeholder="tt('Find tag')"
+                          :disable-button="false"
+                          v-if="enableFilter"
+                          @input="filterContent = $event.target.value"
+                          @focus="onSearchBarFocus">
+            </f7-searchbar>
             <f7-list class="no-margin-top no-margin-bottom" v-if="(!allTags || !allTags.length || noAvailableTag) && !newTag">
                 <f7-list-item :title="tt('No available tag')"></f7-list-item>
             </f7-list>
@@ -49,7 +49,7 @@
                               v-if="allowAddNewTag && !newTag"
                               @click="addNewTag()">
                 </f7-list-item>
-                <f7-list-item checkbox indeterminate disabled v-if="allowAddNewTag && newTag">
+                <f7-list-item class="editing-list-item" checkbox indeterminate disabled v-if="allowAddNewTag && newTag">
                     <template #media>
                         <f7-icon class="transaction-tag-icon" f7="number"></f7-icon>
                     </template>
@@ -154,9 +154,9 @@ const noAvailableTag = computed<boolean>(() => {
 });
 
 function getHeightClass(): string {
-    if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 8) {
+    if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 6) {
         return 'tag-selection-huge-sheet';
-    } else if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 4) {
+    } else if (transactionTagsStore.allTransactionTags && transactionTagsStore.allVisibleTagsCount > 3) {
         return 'tag-selection-large-sheet';
     } else {
         return 'tag-selection-default-sheet';
@@ -240,23 +240,23 @@ function onSheetClosed(): void {
 
 <style>
 .tag-selection-default-sheet {
-    height: 200px;
+    height: 310px;
 }
 
 @media (min-height: 630px) {
     .tag-selection-large-sheet {
-        height: 260px;
+        height: 370px;
     }
 
     .tag-selection-huge-sheet {
-        height: 380px;
+        height: 500px;
     }
 }
 
 @media (max-height: 629px) {
     .tag-selection-large-sheet,
     .tag-selection-huge-sheet {
-        height: 240px;
+        height: 360px;
     }
 }
 

src/components/mobile/TreeViewSelectionSheet.vue

@@ -3,20 +3,19 @@
               style="height: auto" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="swipe-handler"></div>
-            <div class="left"></div>
             <div class="right">
                 <f7-link sheet-close :text="tt('Done')"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-searchbar ref="searchbar" custom-searchs
-                      :value="filterContent"
-                      :placeholder="filterPlaceholder"
-                      :disable-button="false"
-                      v-if="enableFilter"
-                      @input="filterContent = $event.target.value"
-                      @focus="onSearchBarFocus">
-        </f7-searchbar>
-        <f7-page-content :class="'no-padding-top ' + heightClass">
+        <f7-page-content :class="heightClass">
+            <f7-searchbar ref="searchbar" custom-searchs
+                          :value="filterContent"
+                          :placeholder="filterPlaceholder"
+                          :disable-button="false"
+                          v-if="enableFilter"
+                          @input="filterContent = $event.target.value"
+                          @focus="onSearchBarFocus">
+            </f7-searchbar>
             <f7-list class="no-margin-top no-margin-bottom" v-if="!filteredItems || !filteredItems.length">
                 <f7-list-item :title="filterNoItemsText"></f7-list-item>
             </f7-list>
@@ -150,23 +149,23 @@ function onSheetClosed(): void {
 
 <style>
 .tree-view-selection-default-sheet {
-    height: 200px;
+    height: 310px;
 }
 
 @media (min-height: 630px) {
     .tree-view-selection-large-sheet {
-        height: 260px;
+        height: 370px;
     }
 
     .tree-view-selection-huge-sheet {
-        height: 380px;
+        height: 500px;
     }
 }
 
 @media (max-height: 629px) {
     .tree-view-selection-large-sheet,
     .tree-view-selection-huge-sheet {
-        height: 240px;
+        height: 360px;
     }
 }
 </style>

src/components/mobile/TwoColumnListItemSelectionSheet.vue

@@ -8,15 +8,15 @@
                 <f7-link sheet-close :text="tt('Done')"></f7-link>
             </div>
         </f7-toolbar>
-        <f7-searchbar ref="searchbar" custom-searchs
-                      :value="filterContent"
-                      :placeholder="filterPlaceholder"
-                      :disable-button="false"
-                      v-if="enableFilter"
-                      @input="filterContent = $event.target.value"
-                      @focus="onSearchBarFocus">
-        </f7-searchbar>
-        <f7-page-content class="no-padding-top">
+        <f7-page-content>
+            <f7-searchbar ref="searchbar" custom-searchs
+                          :value="filterContent"
+                          :placeholder="filterPlaceholder"
+                          :disable-button="false"
+                          v-if="enableFilter"
+                          @input="filterContent = $event.target.value"
+                          @focus="onSearchBarFocus">
+            </f7-searchbar>
             <div class="grid grid-gap" :class="{ 'grid-cols-2': filteredItems && filteredItems.length }">
                 <div>
                     <div class="primary-list-container">
@@ -149,13 +149,13 @@ function onSheetClosed(): void {
 
 <style>
 .primary-list-container, .secondary-list-container {
-    height: 260px;
+    height: 310px;
     overflow-y: auto;
 }
 
 @media (max-height: 629px) {
     .primary-list-container, .secondary-list-container {
-        height: 240px;
+        height: 290px;
     }
 }