Remember uploaded images

2025-08-04 19:34:50 +02:00
parent 464791d9f5
commit 8aa8be7e9f
21 changed files with 573 additions and 241 deletions
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    src: string;
+    class?: string;
+  }>(),
+  {
+    class: 'h-32'
+  }
+);
+
+const isOpen = ref(false);
+</script>
+
+<template>
+  <VaImage
+    :src="src"
+    class="cursor-pointer"
+    :class="props.class"
+    :title="title || ''"
+    fit="cover"
+    lazy
+    @click.prevent="isOpen = true"
+  >
+    <template #loader>
+      <VaProgressCircle indeterminate />
+    </template>
+  </VaImage>
+  <VaModal v-model="isOpen" hide-default-actions close-button size="large">
+    <h1 class="mb-4 text-3xl">{{ title }}</h1>
+    <VaImage
+      :src="src"
+      :title="title || ''"
+      fit="contain"
+      lazy
+      class="h-screen"
+    >
+      <template #loader>
+        <VaProgressCircle indeterminate />
+      </template>
+    </VaImage>
+    <template #footer>
+      <VaButton @click="isOpen = false">Close</VaButton>
+    </template>
+  </VaModal>
+</template>
+
+<style scoped></style>