feat: add Confirm component

src/components/common/Confirm.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { ref } from 'vue';
+import { useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+const $props = defineProps({
+    question: {
+        type: String,
+        default: '',
+    },
+    message: {
+        type: String,
+        default: '',
+    },
+});
+
+defineEmits(['confirm', ...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogOK } = useDialogPluginComponent();
+const { t } = useI18n();
+
+const question = ref($props.question);
+const message = ref($props.question);
+const isLoading = ref(false);
+</script>
+<template>
+    <q-dialog ref="dialogRef" persistent>
+        <q-card class="q-pa-sm">
+            <q-card-section class="row items-center q-pb-none">
+                <span class="text-h6 text-grey">{{ message }}</span>
+                <q-space />
+                <q-btn icon="close" flat round dense v-close-popup />
+            </q-card-section>
+            <q-card-section class="row items-center">
+                {{ question }}
+            </q-card-section>
+            <q-card-actions align="right">
+                <q-btn :label="t('globals.cancel')" color="primary" flat v-close-popup />
+                <q-btn :label="t('globals.confirm')" color="primary" :loading="isLoading" @click="onDialogOK" />
+            </q-card-actions>
+        </q-card>
+    </q-dialog>
+</template>
+
+<style lang="scss" scoped>
+.q-card {
+    min-width: 350px;
+}
+</style>