50 lines
959 B
Vue
50 lines
959 B
Vue
<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>
|