@eox/pages-theme-eox 1.8.0 → 2.0.0-alpha.1

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/SectionHeader.cy.js

@@ -0,0 +1,54 @@
+import SectionHeader from "./SectionHeader.vue";
+
+describe("<SectionHeader />", () => {
+  it("renders standard props correctly", () => {
+    const tag = "Viewing Ready & Basic";
+    const icon = "mdi-star-check-outline";
+    const title = "What our users say about Viewing Products";
+    const subtitle =
+      "Optional paragraph providing context and detail for this section.";
+
+    cy.mount(SectionHeader, {
+      props: {
+        tag,
+        icon,
+        title,
+        subtitle,
+      },
+    });
+
+    // Check that tag badge exists and contains correct icon and text classes
+    cy.get(".section-badge-tag").should("exist");
+    cy.get(".section-badge-icon").should("have.class", icon);
+    cy.get(".section-badge-text").should("contain", tag);
+
+    // Check title
+    cy.get(".section-display-title").should("contain", title);
+
+    // Check subtitle
+    cy.get(".section-subtitle").should("contain", subtitle);
+  });
+
+  it("renders with title slot and default slot", () => {
+    cy.mount(SectionHeader, {
+      slots: {
+        title: "Slot-based Title",
+        default: "Slot-based Subtitle",
+      },
+    });
+
+    cy.get(".section-display-title").should("contain", "Slot-based Title");
+    cy.get(".section-subtitle").should("contain", "Slot-based Subtitle");
+  });
+
+  it("hides badge if no tag or icon is provided", () => {
+    cy.mount(SectionHeader, {
+      props: {
+        title: "Just Title",
+      },
+    });
+
+    cy.get(".section-badge-tag").should("not.exist");
+    cy.get(".section-subtitle").should("not.exist");
+  });
+});