migrate information / password input / passcode input sheet to composition API and typescript

src/components/mobile/InformationSheet.vue

@@ -17,74 +17,71 @@
                 </p>
                 <textarea class="information-content full-line" readonly="readonly" :rows="rowCount" :value="information"></textarea>
                 <div class="margin-top text-align-center">
-                    <f7-link @click="cancel" :text="$t('Close')"></f7-link>
+                    <f7-link @click="close" :text="$t('Close')"></f7-link>
                 </div>
             </div>
         </f7-page-content>
     </f7-sheet>
 </template>
 
-<script>
+<script setup lang="ts">
+import { useTemplateRef, watch, onMounted, onUpdated } from 'vue';
+
 import { ClipboardHolder } from '@/lib/clipboard.ts';
 
-export default {
+const props = defineProps<{
-    props: [
+    title?: string
-        'title',
+    hint?: string
-        'hint',
+    information: string
-        'information',
+    rowCount: number
-        'rowCount',
+    enableCopy?: boolean
-        'enableCopy',
+    show: boolean
-        'show'
+}>();
-    ],
-    emits: [
-        'update:show',
-        'info:copied'
-    ],
-    data() {
-        return {
-            clipboardHolder: null
-        }
-    },
-    mounted() {
-        this.makeCopyToClipboardClickable();
-    },
-    updated() {
-        this.makeCopyToClipboardClickable();
-    },
-    watch: {
-        'information': function (newValue) {
-            if (this.clipboardHolder) {
-                this.clipboardHolder.setClipboardText(newValue);
-            }
-        }
-    },
-    methods: {
-        onSheetClosed() {
-            this.close();
-        },
-        cancel() {
-            this.close();
-        },
-        makeCopyToClipboardClickable() {
-            const self = this;
 
-            if (self.clipboardHolder) {
+const emit = defineEmits<{
+    (e: 'update:show', value: boolean): void
+    (e: 'info:copied'): void
+}>();
+
+const iconCopyToClipboard = useTemplateRef('copyToClipboardIcon');
+
+let clipboardHolder: ClipboardHolder = null;
+
+function makeCopyToClipboardClickable() {
+    if (clipboardHolder) {
         return;
     }
 
-            if (self.$refs.copyToClipboardIcon) {
+    if (iconCopyToClipboard.value) {
-                self.clipboardHolder = ClipboardHolder.create({
+        clipboardHolder = ClipboardHolder.create({
             el: '#copy-to-clipboard-icon',
-                    text: self.information,
+            text: props.information,
             successCallback: function () {
-                        self.$emit('info:copied');
+                emit('info:copied');
             }
         });
     }
-        },
-        close() {
-            this.$emit('update:show', false);
 }
+
+function close() {
+    emit('update:show', false);
 }
+
+function onSheetClosed() {
+    close();
 }
+
+onMounted(() => {
+    makeCopyToClipboardClickable();
+});
+
+onUpdated(() => {
+    makeCopyToClipboardClickable();
+});
+
+watch(() => props.information, (newValue) => {
+    if (clipboardHolder) {
+        clipboardHolder.setClipboardText(newValue);
+    }
+});
 </script>

src/components/mobile/PasscodeInputSheet.vue

@@ -36,47 +36,48 @@
     </f7-sheet>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { type Ref, ref } from 'vue';
-    props: [
+
-        'modelValue',
+const props = defineProps<{
-        'title',
+    modelValue: string
-        'hint',
+    title?: string
-        'confirmDisabled',
+    hint?: string
-        'cancelDisabled',
+    confirmDisabled?: boolean
-        'show'
+    cancelDisabled?: boolean
-    ],
+    show: boolean
-    emits: [
+}>();
-        'update:modelValue',
+
-        'update:show',
+const emit = defineEmits<{
-        'passcode:confirm'
+    (e: 'update:modelValue', value: string): void
-    ],
+    (e: 'update:show', value: boolean): void
-    data() {
+    (e: 'passcode:confirm', value: string): void
-        return {
+}>();
-            currentPasscode: ''
+
-        }
+const currentPasscode: Ref<string> = ref('');
-    },
+
-    methods: {
+function confirm() {
-        onSheetOpen() {
+    if (!currentPasscode.value || props.confirmDisabled) {
-            this.currentPasscode = '';
-        },
-        onSheetClosed() {
-            this.close();
-        },
-        confirm() {
-            if (!this.currentPasscode || this.confirmDisabled) {
         return;
     }
 
-            this.$emit('update:modelValue', this.currentPasscode);
+    emit('update:modelValue', currentPasscode.value);
-            this.$emit('passcode:confirm', this.currentPasscode);
+    emit('passcode:confirm', currentPasscode.value);
-        },
-        cancel() {
-            this.close();
-        },
-        close() {
-            this.$emit('update:show', false);
 }
+
+function cancel() {
+    close();
 }
+
+function close() {
+    emit('update:show', false);
+}
+
+function onSheetOpen() {
+    currentPasscode.value = '';
+}
+
+function onSheetClosed() {
+    close();
 }
 </script>

src/components/mobile/PasswordInputSheet.vue

@@ -37,48 +37,49 @@
     </f7-sheet>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { type Ref, ref } from 'vue';
-    props: [
+
-        'modelValue',
+const props = defineProps<{
-        'title',
+    modelValue: string
-        'hint',
+    title?: string
-        'color',
+    hint?: string
-        'confirmDisabled',
+    color?: string
-        'cancelDisabled',
+    confirmDisabled?: boolean
-        'show'
+    cancelDisabled?: boolean
-    ],
+    show: boolean
-    emits: [
+}>();
-        'update:modelValue',
+
-        'update:show',
+const emit = defineEmits<{
-        'password:confirm'
+    (e: 'update:modelValue', value: string): void
-    ],
+    (e: 'update:show', value: boolean): void
-    data() {
+    (e: 'password:confirm', value: string): void
-        return {
+}>();
-            currentPassword: ''
+
-        }
+const currentPassword: Ref<string> = ref('');
-    },
+
-    methods: {
+function confirm() {
-        onSheetOpen() {
+    if (!currentPassword.value || props.confirmDisabled) {
-            this.currentPassword = '';
-        },
-        onSheetClosed() {
-            this.close();
-        },
-        confirm() {
-            if (!this.currentPassword || this.confirmDisabled) {
         return;
     }
 
-            this.$emit('update:modelValue', this.currentPassword);
+    emit('update:modelValue', currentPassword.value);
-            this.$emit('password:confirm', this.currentPassword);
+    emit('password:confirm', currentPassword.value);
-        },
-        cancel() {
-            this.close();
-        },
-        close() {
-            this.$emit('update:show', false);
 }
+
+function cancel() {
+    close();
 }
+
+function close() {
+    emit('update:show', false);
+}
+
+function onSheetOpen() {
+    currentPassword.value = '';
+}
+
+function onSheetClosed() {
+    close();
 }
 </script>