index-main/site/plugins/beforeafter/src/components/BeforeAfterBlock.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>