@eox/pages-theme-eox 1.7.0 → 1.9.0

package/src/components/ImageGallery.vue

@@ -0,0 +1,622 @@
+<template>
+  <div class="image-gallery-container">
+    <!-- 1. Grid Layout (Legacy GalleryGrid) -->
+    <div v-if="layoutMode === 'grid'" class="grid-container" :class="colsClass">
+      <div v-for="(img, idx) in normalizedImages" :key="idx" class="grid-item">
+        <figure class="grid-figure">
+          <!-- Wrap in Link if present -->
+          <a v-if="img.link" :href="img.link" class="grid-link">
+            <img
+              :src="img.src"
+              :alt="img.alt || 'Gallery image'"
+              :style="{ maxWidth: img.width || '100%' }"
+              class="grid-img"
+            />
+            <figcaption
+              v-if="img.caption"
+              class="grid-caption"
+              v-html="img.caption"
+            ></figcaption>
+          </a>
+          <!-- No Link -->
+          <template v-else>
+            <img
+              :src="img.src"
+              :alt="img.alt || 'Gallery image'"
+              :style="{ maxWidth: img.width || '100%' }"
+              class="grid-img"
+              :class="{ clickable: lightbox }"
+              @click="lightbox ? openLightbox(idx) : null"
+            />
+            <figcaption
+              v-if="img.caption"
+              class="grid-caption"
+              v-html="img.caption"
+            ></figcaption>
+          </template>
+        </figure>
+      </div>
+    </div>
+
+    <!-- 2. Gallery Layout with Featured/Thumbnails (eoxcloudless style) -->
+    <div v-else class="gallery-layout-wrapper">
+      <!-- Main Featured Image -->
+      <div
+        v-if="normalizedImages.length > 0"
+        class="featured-wrapper clickable"
+        @click="openLightbox(0)"
+      >
+        <img
+          :src="normalizedImages[0].src"
+          :alt="normalizedImages[0].alt || 'Featured gallery image'"
+          class="featured-img"
+        />
+      </div>
+
+      <!-- Thumbnail Grid -->
+      <div
+        v-if="normalizedImages.length > 1"
+        class="grid-container cols-thumbnail mt-4"
+      >
+        <div
+          v-for="(img, idx) in normalizedImages.slice(1)"
+          :key="idx"
+          class="thumbnail-item clickable"
+          @click="openLightbox(idx + 1)"
+        >
+          <img
+            :src="img.src"
+            :alt="img.alt || 'Gallery thumbnail'"
+            class="thumbnail-img"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Fullscreen Lightbox Modal -->
+    <Transition name="fade">
+      <div
+        v-if="lightboxIndex !== null"
+        class="lightbox-overlay"
+        @click.self="closeLightbox"
+      >
+        <!-- Header (Close + Counter) -->
+        <div class="lightbox-header">
+          <span class="lightbox-counter">
+            {{ lightboxIndex + 1 }} / {{ normalizedImages.length }}
+          </span>
+          <button
+            @click="closeLightbox"
+            class="lightbox-btn lightbox-close"
+            aria-label="Close Lightbox"
+          >
+            <svg
+              class="lightbox-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Previous Button -->
+        <button
+          v-if="normalizedImages.length > 1"
+          @click="prevImage"
+          class="lightbox-btn lightbox-nav lightbox-prev"
+          aria-label="Previous Image"
+        >
+          <svg
+            class="lightbox-nav-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+        </button>
+
+        <!-- Next Button -->
+        <button
+          v-if="normalizedImages.length > 1"
+          @click="nextImage"
+          class="lightbox-btn lightbox-nav lightbox-next"
+          aria-label="Next Image"
+        >
+          <svg
+            class="lightbox-nav-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+        </button>
+
+        <!-- Lightbox Content -->
+        <div class="lightbox-content" @click.self="closeLightbox">
+          <img
+            :src="normalizedImages[lightboxIndex].src"
+            class="lightbox-image"
+            :alt="normalizedImages[lightboxIndex].alt || 'Expanded view'"
+          />
+          <p
+            v-if="normalizedImages[lightboxIndex].caption"
+            class="lightbox-caption"
+            v-html="normalizedImages[lightboxIndex].caption"
+          ></p>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, onMounted, onUnmounted } from "vue";
+
+const props = defineProps({
+  images: {
+    type: [String, Array],
+    required: true,
+  },
+  columns: {
+    type: Number,
+    default: 2,
+  },
+  layout: {
+    type: String,
+    default: "gallery", // 'gallery' (lightbox) or 'grid' (GalleryGrid)
+  },
+  lightbox: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const lightboxIndex = ref(null);
+
+const layoutMode = computed(() => {
+  // If explicitly 'grid', or if we detect link in image objects, default to grid
+  if (props.layout === "grid") return "grid";
+  if (
+    Array.isArray(props.images) &&
+    props.images.some(
+      (img) => typeof img === "object" && (img.link || img.caption),
+    )
+  ) {
+    return "grid";
+  }
+  return "gallery";
+});
+
+const normalizedImages = computed(() => {
+  if (!props.images) return [];
+  if (Array.isArray(props.images)) {
+    return props.images.map((img) => {
+      if (typeof img === "string") {
+        return { src: img, alt: "", caption: "", link: "", width: "" };
+      }
+      return {
+        src: img.src || "",
+        alt: img.alt || "",
+        caption: img.caption || "",
+        link: img.link || "",
+        width: img.width || "",
+      };
+    });
+  }
+  if (typeof props.images === "string") {
+    return props.images
+      .split(",")
+      .map((img) => img.trim())
+      .filter(Boolean)
+      .map((src) => ({ src, alt: "", caption: "", link: "", width: "" }));
+  }
+  return [];
+});
+
+const colsClass = computed(() => {
+  const cols = props.columns;
+  if (cols === 1) return "cols-1";
+  if (cols === 3) return "cols-3";
+  if (cols === 4) return "cols-4";
+  if (cols === 5) return "cols-5";
+  return "cols-2"; // default
+});
+
+const openLightbox = (index) => {
+  if (!props.lightbox) return;
+  lightboxIndex.value = index;
+  if (typeof document !== "undefined") {
+    document.body.style.overflow = "hidden";
+  }
+};
+
+const closeLightbox = () => {
+  lightboxIndex.value = null;
+  if (typeof document !== "undefined") {
+    document.body.style.overflow = "";
+  }
+};
+
+const prevImage = () => {
+  if (normalizedImages.value.length <= 1) return;
+  lightboxIndex.value =
+    (lightboxIndex.value - 1 + normalizedImages.value.length) %
+    normalizedImages.value.length;
+};
+
+const nextImage = () => {
+  if (normalizedImages.value.length <= 1) return;
+  lightboxIndex.value =
+    (lightboxIndex.value + 1) % normalizedImages.value.length;
+};
+
+const handleKeydown = (e) => {
+  if (lightboxIndex.value === null) return;
+  if (e.key === "ArrowRight" || e.key === "Right") {
+    nextImage();
+  } else if (e.key === "ArrowLeft" || e.key === "Left") {
+    prevImage();
+  } else if (e.key === "Escape" || e.key === "Esc") {
+    closeLightbox();
+  }
+};
+
+onMounted(() => {
+  window.addEventListener("keydown", handleKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleKeydown);
+  if (typeof document !== "undefined") {
+    document.body.style.overflow = "";
+  }
+});
+</script>
+
+<style scoped>
+.image-gallery-container {
+  width: 100%;
+  margin: 1.5rem 0;
+}
+
+.grid-container {
+  display: grid;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.cols-2 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.cols-3 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.cols-4 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.cols-5 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  .cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .cols-3 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .cols-4 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .cols-5 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 768px) {
+  .cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+.cols-thumbnail {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .cols-thumbnail {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .cols-thumbnail {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .cols-thumbnail {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.grid-figure {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+.grid-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+  width: 100%;
+}
+
+.grid-link:hover {
+  opacity: 0.9;
+}
+
+.grid-img {
+  max-width: 100% !important;
+  box-sizing: border-box;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  display: block;
+  height: auto;
+  margin: 0 auto;
+}
+
+.clickable {
+  cursor: pointer !important;
+}
+
+.grid-img.clickable:hover {
+  transform: scale(1.01);
+  transition: transform 0.2s ease-in-out;
+}
+
+.grid-caption {
+  font-size: 0.85rem;
+  margin-top: 0.5rem;
+  text-align: center;
+  color: #64748b;
+  font-weight: 500;
+}
+
+/* Gallery layout style */
+.gallery-layout-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.featured-wrapper {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #f1f5f9;
+}
+
+.featured-wrapper:hover {
+  opacity: 0.95;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.featured-img {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+}
+
+.thumbnail-item {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid #f1f5f9;
+  background-color: #f8fafc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumbnail-item:hover {
+  transform: scale(1.02);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease-in-out;
+}
+
+.thumbnail-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Lightbox backdrop overlay */
+.lightbox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+.lightbox-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1.5rem;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
+  z-index: 100001;
+  color: #ffffff;
+  font-family: sans-serif;
+}
+
+.lightbox-counter {
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+}
+
+.lightbox-btn {
+  background-color: rgba(0, 0, 0, 0.3);
+  border: none;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.2s ease-in-out;
+}
+
+.lightbox-btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+
+.lightbox-close {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+}
+
+.lightbox-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.lightbox-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 48px !important;
+  height: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+  min-height: 48px !important;
+  max-height: 48px !important;
+  flex-shrink: 0 !important;
+  box-sizing: border-box !important;
+  border-radius: 50% !important;
+  z-index: 100002;
+}
+
+.lightbox-prev {
+  left: 1.5rem;
+}
+
+.lightbox-next {
+  right: 1.5rem;
+}
+
+.lightbox-nav-icon {
+  width: 28px;
+  height: 28px;
+}
+
+.lightbox-content {
+  max-width: 90%;
+  max-height: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 100000;
+}
+
+.lightbox-image {
+  max-width: 100%;
+  max-height: 75vh;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.lightbox-caption {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 0.875rem;
+  margin-top: 1rem;
+  text-align: center;
+  max-width: 36rem;
+  padding: 0 1rem;
+}
+
+/* Transition Animations */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+</style>

package/src/components/PricingTable.vue

@@ -97,7 +97,7 @@
             {{ t(plan.basePrice, theme.i18n) }}
           </h6>
           <h4 v-else class="primary-text bold" :style="dynamicPriceStyleH4">
-            € {{ calculatePrice(plan) }},-
+            {{ formatPrice(calculatePrice(plan)) }}
           </h4>
           <span
             v-if="
@@ -236,7 +236,7 @@
             class="primary-text bold"
             :style="dynamicPriceStyleH6"
           >
-            + € {{ plan.additionalPrice }},-
+            + {{ formatPrice(plan.additionalPrice) }}
           </h6>
         </div>
         <template
@@ -285,14 +285,14 @@
 </template>
 
 <script>
-import { t } from "../helpers.js";
+import { t, formatPrice } from "../helpers.js";
 import { useData } from "vitepress";
 
 export default {
   name: "PricingTable",
   setup() {
-    const { theme } = useData();
-    return { theme, t };
+    const { theme, lang } = useData();
+    return { theme, lang, t };
   },
   props: {
     config: {
@@ -346,7 +346,7 @@ export default {
         if (typeof plan.basePrice === "string") {
           text = this.t(plan.basePrice, this.theme.i18n) || "";
         } else {
-          text = `€ ${this.calculatePrice(plan)},-`;
+          text = this.formatPrice(this.calculatePrice(plan));
         }
         if (text.length > maxLen) maxLen = text.length;
       });
@@ -354,7 +354,7 @@ export default {
         if (detail.plans) {
           detail.plans.forEach((plan) => {
             if (plan.additionalPrice) {
-              const text = `+ € ${plan.additionalPrice},-`;
+              const text = `+ ${this.formatPrice(plan.additionalPrice)}`;
               if (text.length > maxLen) maxLen = text.length;
             }
           });
@@ -433,6 +433,9 @@ export default {
       }
       return basePrice + additionalOptionPrice + additionalPlanModifier;
     },
+    formatPrice(price) {
+      return formatPrice(price, this.lang);
+    },
     getRowKeys(plansArray) {
       const keys = new Set();
       plansArray.forEach((plan) => {

package/src/components/SingleTweet.cy.js

@@ -0,0 +1,27 @@
+import SingleTweet from "./SingleTweet.vue";
+
+describe("<SingleTweet />", () => {
+  it("renders consent fallback if cookies are not allowed", () => {
+    cy.mount(SingleTweet, {
+      props: {
+        id: "12345",
+        mockConsent: false,
+      },
+    });
+
+    cy.contains("Cookie Consent Required").should("be.visible");
+    cy.get("blockquote").should("not.exist");
+  });
+
+  it("renders tweet blockquote if cookies are allowed", () => {
+    cy.mount(SingleTweet, {
+      props: {
+        id: "12345",
+        mockConsent: true,
+      },
+    });
+
+    cy.get("blockquote.twitter-tweet").should("exist");
+    cy.contains("Cookie Consent Required").should("not.exist");
+  });
+});