fix(category): update category modal to MalioModal component

frontend/modules/catalog/components/CategoryDeleteModal.vue

@@ -1,37 +1,35 @@
 <template>
-    <Teleport to="body">
-        <Transition name="fade">
-            <div
-                v-if="modelValue"
-                class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-                @click.self="cancel"
-            >
-                <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
-                    <h3 class="text-lg font-semibold text-neutral-900">
-                        {{ t('admin.categories.delete.title') }}
-                    </h3>
-                    <p class="mt-3 text-sm text-neutral-600">
-                        {{ t('admin.categories.delete.message', { name: categoryName }) }}
-                    </p>
-                    <div class="mt-6 flex justify-end gap-3">
-                        <MalioButton
-                            :label="t('common.cancel')"
-                            variant="secondary"
-                            @click="cancel"
-                        />
-                        <MalioButton
-                            :label="t('common.delete')"
-                            variant="danger"
-                            icon-name="mdi:delete-outline"
-                            icon-position="left"
-                            :disabled="loading"
-                            @click="confirm"
-                        />
-                    </div>
-                </div>
-            </div>
-        </Transition>
-    </Teleport>
+    <MalioModal
+        :model-value="modelValue"
+        modal-class="max-w-md"
+        @update:model-value="emit('update:modelValue', $event)"
+    >
+        <template #header>
+            <h3 class="text-lg font-semibold text-neutral-900">
+                {{ t('admin.categories.delete.title') }}
+            </h3>
+        </template>
+
+        <p class="text-sm text-neutral-600">
+            {{ t('admin.categories.delete.message', { name: categoryName }) }}
+        </p>
+
+        <template #footer>
+            <MalioButton
+                :label="t('common.cancel')"
+                variant="secondary"
+                @click="emit('update:modelValue', false)"
+            />
+            <MalioButton
+                :label="t('common.delete')"
+                variant="danger"
+                icon-name="mdi:delete-outline"
+                icon-position="left"
+                :disabled="loading"
+                @click="emit('confirm')"
+            />
+        </template>
+    </MalioModal>
 </template>
 
 <script setup lang="ts">
@@ -47,30 +45,4 @@ const emit = defineEmits<{
     'update:modelValue': [value: boolean]
     confirm: []
 }>()
-
-function cancel() {
-    emit('update:modelValue', false)
-}
-
-function confirm() {
-    emit('confirm')
-}
-
-function onKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') cancel()
-}
-
-onMounted(() => document.addEventListener('keydown', onKeydown))
-onUnmounted(() => document.removeEventListener('keydown', onKeydown))
 </script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 0.2s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-    opacity: 0;
-}
-</style>