Files
romm/frontend/src/components/common/Game/Dialog/NoteDialog.vue
2025-09-01 19:23:43 -04:00

52 lines
1.4 KiB
Vue

<script setup lang="ts">
import { MdPreview } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import type { Events } from "@/types/emitter";
import type { Emitter } from "mitt";
import { inject, ref } from "vue";
import type { SimpleRom } from "@/stores/roms";
import { useTheme } from "vuetify";
import { useI18n } from "vue-i18n";
const theme = useTheme();
const emitter = inject<Emitter<Events>>("emitter");
const { t } = useI18n();
const rom = ref<SimpleRom | null>(null);
const show = ref(false);
emitter?.on("showNoteDialog", (romToShow) => {
rom.value = romToShow;
show.value = true;
});
</script>
<template>
<v-dialog v-model="show" max-width="600">
<v-card>
<v-card-title class="d-flex align-center">
<v-icon class="mr-2">mdi-notebook</v-icon>
{{ t("rom.my-notes") }} - {{ rom?.name }}
<v-spacer />
<v-btn icon @click="show = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-card-title>
<v-card-text class="pa-4">
<MdPreview
no-highlight
no-katex
no-mermaid
v-if="rom?.rom_user?.note_raw_markdown"
:model-value="rom?.rom_user?.note_raw_markdown"
:theme="theme.name.value == 'dark' ? 'dark' : 'light'"
language="en-US"
preview-theme="vuepress"
code-theme="github"
class="py-2"
/>
</v-card-text>
</v-card>
</v-dialog>
</template>