index-main/site/plugins/beforeafter/src/components/BeforeAfterBlock.vue

<template>
  <div @click="$emit('open')" class="imagetext-preview">
    <div class="imagetext-preview__container">
      <!-- Zone image / slider -->
      <div class="imagetext-preview__media">
        <!-- Mode avant/après -->
        <div v-if="isBeforeAfter && (imageBeforeUrl || imageAfterUrl)" class="imagetext-preview__slider">
          <img
            v-if="imageAfterUrl"
            :src="imageAfterUrl"
            class="imagetext-preview__image imagetext-preview__image--after"
            alt="Après"
          />
          <img
            v-if="imageBeforeUrl"
            :src="imageBeforeUrl"
            class="imagetext-preview__image imagetext-preview__image--before"
            alt="Avant"
          />
          <div v-if="imageBeforeUrl && imageAfterUrl" class="imagetext-preview__divider"></div>
        </div>

        <!-- Mode simple -->
        <img
          v-else-if="!isBeforeAfter && imageUrl"
          :src="imageUrl"
          class="imagetext-preview__single-image"
          alt="Image"
        />

        <!-- Placeholder si pas d'image -->
        <div v-else class="imagetext-preview__empty-media">
          Aucune image
        </div>

        <!-- Légende -->
        <p v-if="content.caption" class="imagetext-preview__caption">
          {{ content.caption }}
        </p>
      </div>

      <!-- Zone texte -->
      <div class="imagetext-preview__text">
        <div v-if="content.text" v-html="content.text"></div>
        <div v-else class="imagetext-preview__empty-text">
          Aucun texte
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  content: Object
});

// Attention: les clés sont en minuscules dans Kirby
const isBeforeAfter = computed(() => {
  return props.content?.isbeforeafter === true || props.content?.isbeforeafter === "true";
});

// Mode simple : une seule image
const imageUrl = computed(() => {
  if (!props.content?.image || !props.content.image.length) {
    return null;
  }
  const file = props.content.image[0];
  return file?.url || null;
});

// Mode avant/après : deux images
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>
.imagetext-preview {
  cursor: pointer;
  border-radius: var(--rounded);
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-gray-300);
}

.imagetext-preview__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
}

/* Zone média (image ou slider) */
.imagetext-preview__media {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.imagetext-preview__slider {
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--color-gray-200);
  border-radius: var(--rounded-sm);
  overflow: hidden;
}

.imagetext-preview__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imagetext-preview__image--before {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.imagetext-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);
}

.imagetext-preview__single-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--rounded-sm);
  background: var(--color-gray-200);
}

.imagetext-preview__empty-media {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-200);
  border-radius: var(--rounded-sm);
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}

.imagetext-preview__caption {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  font-style: italic;
  margin: 0;
  padding: 0 0.25rem;
}

/* Zone texte */
.imagetext-preview__text {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  line-height: 1.5;
}

.imagetext-preview__empty-text {
  color: var(--color-gray-500);
  font-style: italic;
}

.imagetext-preview:hover {
  border-color: var(--color-gray-400);
}
</style>