Upgrade to vue3 (#16)

* upgrade to vue 3.x and framework7 8.x
* change calendar plugin to vue-datepicker
* disable export button when user does not hava any transaction
* implement new pin code input
* append thousands separator in amount in exchange rates page

src/components/mobile/PasscodeInputSheet.vue

@@ -1,23 +1,26 @@
 <template>
-    <f7-sheet style="height:auto" :opened="show"
-              @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
-        <f7-page-content>
+    <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
+              :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <div class="swipe-handler"></div>
+        <f7-page-content class="margin-top no-padding-top">
             <div class="display-flex padding justify-content-space-between align-items-center">
                 <div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
             </div>
             <div class="padding-horizontal padding-bottom">
-                <p class="no-margin-top margin-bottom-half" v-if="hint">{{ hint }}</p>
+                <p class="no-margin" v-if="hint">{{ hint }}</p>
                 <slot></slot>
-                <f7-list no-hairlines class="no-margin-top margin-bottom">
+                <f7-list no-hairlines strong class="no-margin">
                     <f7-list-input
                         type="number"
                         autocomplete="one-time-code"
                         outline
+                        floating-label
                         clear-button
+                        class="no-margin no-padding-bottom"
+                        :label="$t('Password')"
                         :placeholder="$t('Passcode')"
-                        :value="currentPasscode"
-                        @input="currentPasscode = $event.target.value"
-                        @keyup.enter.native="confirm()"
+                        v-model:value="currentPasscode"
+                        @keyup.enter="confirm()"
                     ></f7-list-input>
                 </f7-list>
                 <f7-button large fill
@@ -36,13 +39,18 @@
 <script>
 export default {
     props: [
-        'value',
+        'modelValue',
         'title',
         'hint',
         'confirmDisabled',
         'cancelDisabled',
         'show'
     ],
+    emits: [
+        'update:modelValue',
+        'update:show',
+        'passcode:confirm'
+    ],
     data() {
         return {
             currentPasscode: ''
@@ -53,17 +61,20 @@ export default {
             this.currentPasscode = '';
         },
         onSheetClosed() {
-            this.$emit('update:show', false);
+            this.close();
         },
         confirm() {
             if (!this.currentPasscode || this.confirmDisabled) {
                 return;
             }
 
-            this.$emit('input', this.currentPasscode);
+            this.$emit('update:modelValue', this.currentPasscode);
             this.$emit('passcode:confirm', this.currentPasscode);
         },
         cancel() {
+            this.close();
+        },
+        close() {
             this.$emit('update:show', false);
         }
     }