From 4f51480af9756ac6db592d9b31e8eb0a93e03766 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 5 Jan 2025 17:56:58 +0800
Subject: [PATCH] migrate map sheet to composition API and typescript

---
 src/components/common/MapView.vue             |  4 +-
 src/components/mobile/MapSheet.vue            | 73 +++++++++++--------
 .../transactions/list/dialogs/EditDialog.vue  |  2 +-
 3 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/src/components/common/MapView.vue b/src/components/common/MapView.vue
index dae24af9..58d04501 100644
--- a/src/components/common/MapView.vue
+++ b/src/components/common/MapView.vue
@@ -56,7 +56,7 @@ const finalMapStyle = computed<Record<string, unknown>>(() => {
     return styles;
 });
 
-function init() {
+function initMapView() {
     let isFirstInit = false;
     let centerChanged = false;
 
@@ -112,6 +112,6 @@ function init() {
 }
 
 defineExpose({
-    init
+    initMapView
 });
 </script>
diff --git a/src/components/mobile/MapSheet.vue b/src/components/mobile/MapSheet.vue
index 7d85d2e9..21857e65 100644
--- a/src/components/mobile/MapSheet.vue
+++ b/src/components/mobile/MapSheet.vue
@@ -30,39 +30,48 @@
     </f7-sheet>
 </template>
 
-<script>
-export default {
-    props: [
-        'modelValue',
-        'show'
-    ],
-    emits: [
-        'update:modelValue',
-        'update:show'
-    ],
-    computed: {
-        geoLocation: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (value) {
-                this.$emit('update:modelValue', value);
-            }
-        }
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import type MapView from '@/components/common/MapView.vue';
+
+import type { MapPosition } from '@/lib/map/base.ts';
+
+const props = defineProps<{
+    modelValue?: MapPosition;
+    show: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: MapPosition | undefined): void,
+    (e: 'update:show', value: boolean): void
+}>();
+
+const map = useTemplateRef<MapView>('map');
+
+const geoLocation = computed<MapPosition | undefined>({
+    get: () => {
+        return props.modelValue;
     },
-    methods: {
-        save() {
-            this.$emit('update:show', false);
-        },
-        onSheetOpen() {
-            this.$refs.map.init();
-        },
-        onSheetClosed() {
-            this.close();
-        },
-        close() {
-            this.$emit('update:show', false);
-        }
+    set: value => {
+        emit('update:modelValue', value);
+    }
+});
+
+function save() {
+    emit('update:show', false);
+}
+
+function close() {
+    emit('update:show', false);
+}
+
+function onSheetOpen() {
+    if (map.value) {
+        map.value.initMapView();
     }
 }
+
+function onSheetClosed() {
+    close();
+}
 </script>
diff --git a/src/views/desktop/transactions/list/dialogs/EditDialog.vue b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
index 6b4f7bdf..3c60fcfa 100644
--- a/src/views/desktop/transactions/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
@@ -756,7 +756,7 @@ export default {
             if (newValue === 'map') {
                 this.$nextTick(() => {
                     if (this.$refs.map) {
-                        this.$refs.map.init();
+                        this.$refs.map.initMapView();
                     }
                 });
             }