30 lines
699 B
Vue
30 lines
699 B
Vue
<template>
|
|
<figure v-if="caption" :class="size">
|
|
<img :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
|
|
<figcaption :class="captionClass">{{ caption }}</figcaption>
|
|
</figure>
|
|
<img v-else :src="src" :alt="alt" :class="[size, alignment, imgClass]" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface ImageProps {
|
|
caption?: string
|
|
src?: string
|
|
size?: string
|
|
alt?: string
|
|
imgClass?: string
|
|
alignment?: string
|
|
captionClass?: string
|
|
}
|
|
|
|
withDefaults(defineProps<ImageProps>(), {
|
|
caption: '',
|
|
src: '',
|
|
size: 'max-w-full',
|
|
alt: '',
|
|
imgClass: 'h-auto',
|
|
alignment: '',
|
|
captionClass: 'mt-2 text-sm text-center text-gray-500 dark:text-gray-400',
|
|
})
|
|
</script>
|