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/InformationSheet.vue

@@ -1,18 +1,21 @@
 <template>
-    <f7-sheet style="height:auto" :opened="show" @sheet:closed="onSheetClosed">
-        <f7-page-content>
+    <f7-sheet swipe-to-close swipe-handler=".swipe-handler" style="height:auto"
+              :opened="show" @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">
                     <span>{{ hint }}</span>
-                    <f7-link class="icon-after-text"
+                    <f7-link id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
+                             class="icon-after-text"
                              icon-only icon-f7="doc_on_doc" icon-size="16px"
                              v-if="enableCopy"
-                             v-clipboard:copy="information" v-clipboard:success="onCopied"></f7-link>
+                    ></f7-link>
                 </p>
-                <textarea class="information-content full-line" :rows="rowCount" readonly="readonly" v-model="information"></textarea>
+                <textarea class="information-content full-line" :rows="rowCount" :value="information"></textarea>
                 <div class="margin-top text-align-center">
                     <f7-link @click="cancel" :text="$t('Close')"></f7-link>
                 </div>
@@ -31,14 +34,53 @@ export default {
         'enableCopy',
         'show'
     ],
+    emits: [
+        'update:show',
+        'info:copied'
+    ],
+    data() {
+        return {
+            clipboardHolder: null
+        }
+    },
+    mounted() {
+        this.makeCopyToClipboardClickable();
+    },
+    updated() {
+        this.makeCopyToClipboardClickable();
+    },
+    watch: {
+        'information': function (newValue) {
+            if (this.clipboardHolder) {
+                this.$utilities.changeClipboardObjectText(this.clipboardHolder, newValue);
+            }
+        }
+    },
     methods: {
         onSheetClosed() {
-            this.$emit('update:show', false);
-        },
-        onCopied() {
-            this.$emit('info:copied');
+            this.close();
         },
         cancel() {
+            this.close();
+        },
+        makeCopyToClipboardClickable() {
+            const self = this;
+
+            if (self.clipboardHolder) {
+                return;
+            }
+
+            if (self.$refs.copyToClipboardIcon) {
+                self.clipboardHolder = self.$utilities.makeButtonCopyToClipboard({
+                    el: '#copy-to-clipboard-icon',
+                    text: self.information,
+                    successCallback: function () {
+                        self.$emit('info:copied');
+                    }
+                });
+            }
+        },
+        close() {
             this.$emit('update:show', false);
         }
     }