migrate pin code input sheet to composition API and typescript

src/components/mobile/PinCodeInputSheet.vue

@@ -26,50 +26,49 @@
     </f7-sheet>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { type Ref, ref, computed } 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<{
-        'pincode:confirm'
+    (e: 'update:modelValue', value: string): void
-    ],
+    (e: 'update:show', value: boolean): void
-    data() {
+    (e: 'pincode:confirm', value: string): void
-        return {
+}>();
-            currentPinCode: ''
+
-        }
+const currentPinCode: Ref<string> = ref('');
-    },
+
-    computed: {
+const currentPinCodeValid = computed<boolean>(() => {
-        currentPinCodeValid() {
+    return currentPinCode.value?.length === 6 || false;
-            return this.currentPinCode && this.currentPinCode.length === 6;
+});
-        },
+
-    },
+function confirm() {
-    methods: {
+    if (!currentPinCodeValid.value || props.confirmDisabled) {
-        onSheetOpen() {
-            this.currentPinCode = '';
-        },
-        onSheetClosed() {
-            this.$emit('update:show', false);
-        },
-        confirm() {
-            if (!this.currentPinCodeValid || this.confirmDisabled) {
         return;
     }
 
-            this.$emit('update:modelValue', this.currentPinCode);
+    emit('update:modelValue', currentPinCode.value);
-            this.$emit('pincode:confirm', this.currentPinCode);
+    emit('pincode:confirm', currentPinCode.value);
-        },
+}
-        cancel() {
+
-            this.$emit('update:show', false);
+function cancel() {
-        }
+    emit('update:show', false);
-    }
+}
+
+function onSheetOpen() {
+    currentPinCode.value = '';
+}
+
+function onSheetClosed() {
+    cancel();
 }
 </script>