561932724b
- Restore "1/2, 1/2" layout for flexible column combinations - Simplify beforeafter block: remove toggle and text field, keep only image comparison - Create new video block with URL support (YouTube/Vimeo/direct files) - Create horizontal-gallery block for scrollable image galleries - Add H4 heading level support - All blocks now modular: combine with text blocks in 2-column layouts Blocks available: - Text, Heading (h2-h4), Image, Video - Before/After comparison (no text) - Horizontal gallery (with text below) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
113 lines
2.5 KiB
Vue
113 lines
2.5 KiB
Vue
<template>
|
|
<div @click="$emit('open')" class="beforeafter-preview">
|
|
<div v-if="imageBeforeUrl || imageAfterUrl" class="beforeafter-preview__slider">
|
|
<img
|
|
v-if="imageAfterUrl"
|
|
:src="imageAfterUrl"
|
|
class="beforeafter-preview__image beforeafter-preview__image--after"
|
|
alt="Après"
|
|
/>
|
|
<img
|
|
v-if="imageBeforeUrl"
|
|
:src="imageBeforeUrl"
|
|
class="beforeafter-preview__image beforeafter-preview__image--before"
|
|
alt="Avant"
|
|
/>
|
|
<div v-if="imageBeforeUrl && imageAfterUrl" class="beforeafter-preview__divider"></div>
|
|
</div>
|
|
|
|
<p v-if="content.caption" class="beforeafter-preview__caption">
|
|
{{ content.caption }}
|
|
</p>
|
|
|
|
<div v-if="!imageBeforeUrl && !imageAfterUrl" class="beforeafter-preview__empty">
|
|
Cliquer pour ajouter des images
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
content: Object
|
|
});
|
|
|
|
const imageBeforeUrl = computed(() => {
|
|
if (!props.content?.imagebefore || !props.content.imagebefore.length) {
|
|
return null;
|
|
}
|
|
const file = props.content.imagebefore[0];
|
|
return file?.url || null;
|
|
});
|
|
|
|
const imageAfterUrl = computed(() => {
|
|
if (!props.content?.imageafter || !props.content.imageafter.length) {
|
|
return null;
|
|
}
|
|
const file = props.content.imageafter[0];
|
|
return file?.url || null;
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.beforeafter-preview {
|
|
cursor: pointer;
|
|
border-radius: var(--rounded);
|
|
overflow: hidden;
|
|
background: var(--color-background);
|
|
border: 1px solid var(--color-gray-300);
|
|
}
|
|
|
|
.beforeafter-preview__slider {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 200px;
|
|
background: var(--color-gray-200);
|
|
}
|
|
|
|
.beforeafter-preview__image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.beforeafter-preview__image--before {
|
|
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
|
|
}
|
|
|
|
.beforeafter-preview__divider {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: white;
|
|
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
|
transform: translateX(-1px);
|
|
}
|
|
|
|
.beforeafter-preview__caption {
|
|
padding: 0.75rem;
|
|
font-size: var(--text-sm);
|
|
color: var(--color-gray-600);
|
|
font-style: italic;
|
|
background: var(--color-background);
|
|
margin: 0;
|
|
}
|
|
|
|
.beforeafter-preview__empty {
|
|
padding: 3rem 1rem;
|
|
text-align: center;
|
|
color: var(--color-gray-500);
|
|
font-size: var(--text-sm);
|
|
background: var(--color-gray-100);
|
|
}
|
|
|
|
.beforeafter-preview:hover {
|
|
border-color: var(--color-gray-400);
|
|
}
|
|
</style>
|