66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
src?: string
|
|
alt?: string
|
|
shape?: 'rect' | 'rounded'
|
|
}>(),
|
|
{
|
|
shape: 'rounded',
|
|
alt: '',
|
|
},
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="nych-image-slot"
|
|
:class="[`nych-image-slot--${shape}`, { 'nych-image-slot--filled': src }]"
|
|
>
|
|
<img v-if="src" :src="src" :alt="alt" class="nych-image-slot-img" />
|
|
<div v-else class="nych-image-slot-placeholder">
|
|
<i class="pi pi-image" aria-hidden="true" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.nych-image-slot {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background-color: var(--surface-2);
|
|
border: 1px dashed var(--border);
|
|
}
|
|
|
|
.nych-image-slot--rounded {
|
|
border-radius: var(--radius-xl);
|
|
}
|
|
|
|
.nych-image-slot--rect {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.nych-image-slot--filled {
|
|
border-style: solid;
|
|
}
|
|
|
|
.nych-image-slot-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.nych-image-slot-placeholder {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: var(--text-dim);
|
|
font-size: 1.5rem;
|
|
}
|
|
</style>
|