migrate map sheet to composition API and typescript

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>

src/components/mobile/MapSheet.vue

@@ -30,39 +30,48 @@
     </f7-sheet>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { computed, useTemplateRef } from 'vue';
-    props: [
+import type MapView from '@/components/common/MapView.vue';
-        'modelValue',
+
-        'show'
+import type { MapPosition } from '@/lib/map/base.ts';
-    ],
+
-    emits: [
+const props = defineProps<{
-        'update:modelValue',
+    modelValue?: MapPosition;
-        'update:show'
+    show: boolean;
-    ],
+}>();
-    computed: {
+
-        geoLocation: {
+const emit = defineEmits<{
-            get: function () {
+    (e: 'update:modelValue', value: MapPosition | undefined): void,
-                return this.modelValue;
+    (e: 'update:show', value: boolean): void
-            },
+}>();
-            set: function (value) {
+
-                this.$emit('update:modelValue', value);
+const map = useTemplateRef<MapView>('map');
-            }
+
-        }
+const geoLocation = computed<MapPosition | undefined>({
+    get: () => {
+        return props.modelValue;
     },
-    methods: {
+    set: value => {
-        save() {
+        emit('update:modelValue', value);
-            this.$emit('update:show', false);
+    }
-        },
+});
-        onSheetOpen() {
+
-            this.$refs.map.init();
+function save() {
-        },
+    emit('update:show', false);
-        onSheetClosed() {
+}
-            this.close();
+
-        },
+function close() {
-        close() {
+    emit('update:show', false);
-            this.$emit('update:show', false);
+}
-        }
+
+function onSheetOpen() {
+    if (map.value) {
+        map.value.initMapView();
     }
 }
+
+function onSheetClosed() {
+    close();
+}
 </script>

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();
                     }
                 });
             }