migrate confirm dialog to composition API and typescript

src/components/desktop/ConfirmDialog.vue

@@ -14,77 +14,78 @@
     </v-dialog>
 </template>
 
-<script>
+<script setup lang="ts">
+import { type Ref, ref, watch } from 'vue';
+
+import { useI18n } from '@/lib/i18n.js';
 import { isString } from '@/lib/common.ts';
 
-export default {
+const props = defineProps<{
-    props: [
+    show?: boolean
-        'show',
+    color?: string
-        'color',
+    title?: string
-        'title',
+    text?: string
-        'text'
+}>();
-    ],
-    emits: [
-        'update:show'
-    ],
-    expose: [
-        'open'
-    ],
-    data() {
-        const self = this;
 
-        return {
+const emit = defineEmits<{
-            showState: self.show,
+    (e: 'update:show', value: boolean): void
-            titleContent: self.title || self.$t('global.app.title'),
+}>();
-            textContent: self.text || '',
-            finalColor: self.color || 'primary',
-            resolve: null,
-            reject: null
-        }
-    },
-    watch: {
-        'showState': function (newValue) {
-            this.$emit('update:show', newValue);
-        }
-    },
-    methods: {
-        open(title, text, options) {
-            this.showState = true;
 
-            if (isString(text)) {
+const { tt } = useI18n();
-                this.titleContent = this.$t(title, options);
-                this.textContent = this.$t(text, options);
-            } else {
-                options = text;
-                this.titleContent = this.$t('global.app.title');
-                this.textContent = this.$t(title, options);
-            }
 
-            if (options && options.color) {
+const showState: Ref<boolean> = ref(false);
-                this.finalColor = options.color || 'primary';
+const titleContent: Ref<string> = ref(props.title || tt('global.app.title'));
-            }
+const textContent: Ref<string> = ref(props.text || '');
+const finalColor: Ref<string> = ref(props.color || 'primary');
 
-            return new Promise((resolve, reject) => {
+let resolveFunc: (value: T | PromiseLike<T>) => void = null;
-                this.resolve = resolve;
+let rejectFunc: (reason?: unknown) => void = null;
-                this.reject = reject;
-            });
-        },
-        confirm() {
-            if (this.resolve) {
-                this.resolve();
-            }
 
-            this.showState = false;
+function open(title: string, text: string, options: Record<string, unknown>) {
-            this.$emit('update:show', false);
+    showState.value = true;
-        },
-        cancel() {
-            if (this.reject) {
-                this.reject();
-            }
 
-            this.showState = false;
+    if (isString(text)) {
-            this.$emit('update:show', false);
+        titleContent.value = tt(title, options);
-        }
+        textContent.value = tt(text, options);
+    } else {
+        options = text;
+        titleContent.value = tt('global.app.title');
+        textContent.value = tt(title, options);
     }
+
+    if (options && options.color) {
+        finalColor.value = options.color || 'primary';
+    }
+
+    return new Promise((resolve, reject) => {
+        resolveFunc = resolve;
+        rejectFunc = reject;
+    });
 }
+
+function confirm(): void {
+    if (resolveFunc) {
+        resolveFunc();
+    }
+
+    showState.value = false;
+    emit('update:show', false);
+}
+
+function cancel(): void {
+    if (rejectFunc) {
+        rejectFunc();
+    }
+
+    showState.value = false;
+    emit('update:show', false);
+}
+
+watch(() => showState, (newValue) => {
+    emit('update:show', newValue);
+});
+
+defineExpose({
+    open
+});
 </script>