view image files

frontend/components/ImageViewer.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const warrenStore = useWarrenStore();
+
+function onOpenUpdate(state: boolean) {
+    if (!state) {
+        warrenStore.imageViewer.src = null;
+    }
+}
+</script>
+
+<template>
+    <Dialog
+        :open="warrenStore.imageViewer.src != null"
+        @update:open="onOpenUpdate"
+    >
+        <DialogTrigger>
+            <slot />
+        </DialogTrigger>
+        <DialogContent
+            class="w-full overflow-hidden p-0 sm:!max-h-[90vh] sm:!max-w-[90vw]"
+        >
+            <img
+                v-if="warrenStore.imageViewer.src"
+                class="h-full w-full overflow-hidden !object-contain"
+                :src="warrenStore.imageViewer.src"
+            />
+        </DialogContent>
+    </Dialog>
+</template>