@for-the-people-initiative/design-system 1.3.2 → 1.3.4

package/src/components/Lightbox/Lightbox.scss

@@ -0,0 +1,264 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: lightbox;
+
+// Overlay
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--lightbox-zIndex-overlay, 2000);
+  background-color: var(--lightbox-overlay-background, rgba(0, 0, 0, 0.92));
+  outline: none;
+}
+
+// Close button
+.#{$c}__close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lightbox-closeButton-size, 40px);
+  height: var(--lightbox-closeButton-size, 40px);
+  padding: 0;
+  border: none;
+  background: var(--lightbox-nav-background-default, rgba(255, 255, 255, 0.1));
+  border-radius: var(--lightbox-nav-radius, 9999px);
+  color: var(--lightbox-nav-color-default, rgba(255, 255, 255, 0.8));
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: var(--lightbox-nav-background-hover, rgba(255, 255, 255, 0.2));
+    color: var(--lightbox-nav-color-hover, #ffffff);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: var(--lightbox-closeButton-iconSize, 20px);
+    height: var(--lightbox-closeButton-iconSize, 20px);
+  }
+}
+
+// Counter
+.#{$c}__counter {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  color: var(--lightbox-counter-color, rgba(255, 255, 255, 0.7));
+  font-size: var(--lightbox-counter-fontSize, 14px);
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+
+// Navigation buttons
+.#{$c}__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lightbox-nav-size, 48px);
+  height: var(--lightbox-nav-size, 48px);
+  padding: 0;
+  border: none;
+  background: var(--lightbox-nav-background-default, rgba(255, 255, 255, 0.1));
+  border-radius: var(--lightbox-nav-radius, 9999px);
+  color: var(--lightbox-nav-color-default, rgba(255, 255, 255, 0.8));
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
+
+  &:hover {
+    background: var(--lightbox-nav-background-hover, rgba(255, 255, 255, 0.2));
+    color: var(--lightbox-nav-color-hover, #ffffff);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: var(--lightbox-nav-iconSize, 24px);
+    height: var(--lightbox-nav-iconSize, 24px);
+  }
+}
+
+.#{$c}__nav--prev {
+  left: 16px;
+}
+
+.#{$c}__nav--next {
+  right: 16px;
+}
+
+// Image container
+.#{$c}__image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 64px 80px;
+  overflow: hidden;
+
+  @media (max-width: 768px) {
+    padding: 64px 16px;
+  }
+}
+
+// Image
+.#{$c}__image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  user-select: none;
+  cursor: default;
+  transition: transform 0.3s ease;
+}
+
+.#{$c}__image--zoomed {
+  cursor: zoom-out;
+}
+
+// Thumbnails
+.#{$c}__thumbnails {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: var(--lightbox-thumbnail-gap, 8px);
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  max-width: calc(100vw - 32px);
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.#{$c}__thumbnail {
+  flex-shrink: 0;
+  width: var(--lightbox-thumbnail-size, 64px);
+  height: var(--lightbox-thumbnail-size, 64px);
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--lightbox-thumbnail-radius, 6px);
+  background: none;
+  cursor: pointer;
+  overflow: hidden;
+  opacity: var(--lightbox-thumbnail-opacity-default, 0.5);
+  transition: opacity 0.15s ease, border-color 0.15s ease;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.#{$c}__thumbnail--active {
+  opacity: var(--lightbox-thumbnail-opacity-active, 1);
+  border-color: var(--lightbox-thumbnail-border-active, #ffffff);
+}
+
+// Transitions
+.lightbox-fade-enter-active,
+.lightbox-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.lightbox-fade-enter-from,
+.lightbox-fade-leave-to {
+  opacity: 0;
+}
+
+// Slide transitions
+.lightbox-slide-left-enter-active,
+.lightbox-slide-left-leave-active,
+.lightbox-slide-right-enter-active,
+.lightbox-slide-right-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+  position: absolute;
+}
+
+.lightbox-slide-left-enter-from {
+  transform: translateX(60px);
+  opacity: 0;
+}
+
+.lightbox-slide-left-leave-to {
+  transform: translateX(-60px);
+  opacity: 0;
+}
+
+.lightbox-slide-right-enter-from {
+  transform: translateX(-60px);
+  opacity: 0;
+}
+
+.lightbox-slide-right-leave-to {
+  transform: translateX(60px);
+  opacity: 0;
+}
+
+// Mobile adjustments
+@media (max-width: 768px) {
+  .#{$c}__nav {
+    width: 40px;
+    height: 40px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .#{$c}__nav--prev {
+    left: 8px;
+  }
+
+  .#{$c}__nav--next {
+    right: 8px;
+  }
+
+  .#{$c}__close {
+    top: 8px;
+    right: 8px;
+  }
+
+  .#{$c}__counter {
+    top: 12px;
+  }
+
+  .#{$c}__thumbnail {
+    width: 48px;
+    height: 48px;
+  }
+}

package/src/components/Lightbox/Lightbox.vue

@@ -0,0 +1,274 @@
+<template>
+  <Teleport to="body">
+    <Transition name="lightbox-fade">
+      <div
+        v-if="visible"
+        class="lightbox__overlay"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Image lightbox"
+        tabindex="-1"
+        @click="onOverlayClick"
+        @keydown.escape="close"
+        @keydown.left="prev"
+        @keydown.right="next"
+      >
+        <!-- Close button -->
+        <button
+          type="button"
+          class="lightbox__close"
+          aria-label="Close lightbox"
+          @click.stop="close"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+
+        <!-- Counter -->
+        <div v-if="showCounter && images.length > 1" class="lightbox__counter">
+          {{ currentIndex + 1 }} / {{ images.length }}
+        </div>
+
+        <!-- Previous button -->
+        <button
+          v-if="images.length > 1"
+          type="button"
+          class="lightbox__nav lightbox__nav--prev"
+          aria-label="Previous image"
+          @click.stop="prev"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+
+        <!-- Image -->
+        <div
+          class="lightbox__image-container"
+          @click.stop
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+        >
+          <Transition :name="slideDirection">
+            <img
+              :key="currentIndex"
+              :src="currentImage"
+              :alt="`Image ${currentIndex + 1} of ${images.length}`"
+              class="lightbox__image"
+              :class="{ 'lightbox__image--zoomed': isZoomed }"
+              :style="zoomStyle"
+              draggable="false"
+              @click.stop="toggleZoom"
+              @load="onImageLoad"
+            />
+          </Transition>
+        </div>
+
+        <!-- Next button -->
+        <button
+          v-if="images.length > 1"
+          type="button"
+          class="lightbox__nav lightbox__nav--next"
+          aria-label="Next image"
+          @click.stop="next"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+
+        <!-- Thumbnails -->
+        <div v-if="showThumbnails && images.length > 1" class="lightbox__thumbnails" @click.stop>
+          <button
+            v-for="(image, index) in images"
+            :key="index"
+            type="button"
+            class="lightbox__thumbnail"
+            :class="{ 'lightbox__thumbnail--active': index === currentIndex }"
+            :aria-label="`View image ${index + 1}`"
+            @click="goTo(index)"
+          >
+            <img :src="typeof image === 'string' ? image : image.src || image.thumbnail" :alt="`Thumbnail ${index + 1}`" />
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style src="./Lightbox.scss"></style>
+
+<script setup lang="ts">
+import type { LightboxProps } from '../../types';
+import { computed, ref, watch, onUnmounted, nextTick } from "vue";
+
+defineOptions({ name: 'FtpLightbox' });
+
+const props = withDefaults(defineProps<LightboxProps>(), {
+  images: () => [],
+  visible: false,
+  activeIndex: 0,
+  showThumbnails: false,
+  showCounter: true,
+  closeOnClickOutside: true,
+  zoom: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'update:activeIndex', value: number): void
+  (e: 'show'): void
+  (e: 'hide'): void
+}>();
+
+const internalIndex = ref(props.activeIndex);
+const isZoomed = ref(false);
+const slideDirection = ref('lightbox-slide-left');
+
+// Touch/swipe state
+const touchStartX = ref(0);
+const touchStartY = ref(0);
+const touchDeltaX = ref(0);
+const isSwiping = ref(false);
+
+const currentIndex = computed({
+  get: () => internalIndex.value,
+  set: (val) => {
+    internalIndex.value = val;
+    emit('update:activeIndex', val);
+  },
+});
+
+const currentImage = computed(() => {
+  const img = props.images[currentIndex.value];
+  if (!img) return '';
+  return typeof img === 'string' ? img : (img as any).src || '';
+});
+
+const zoomStyle = computed(() => {
+  if (!isZoomed.value) return {};
+  return { cursor: 'zoom-out', transform: 'scale(2)' };
+});
+
+watch(() => props.activeIndex, (val) => {
+  internalIndex.value = val;
+});
+
+// Body scroll lock
+let didLockScroll = false;
+
+watch(() => props.visible, async (newValue) => {
+  if (newValue) {
+    document.body.style.overflow = 'hidden';
+    didLockScroll = true;
+    emit('show');
+    await nextTick();
+    // Focus the overlay for keyboard events
+    const overlay = document.querySelector('.lightbox__overlay') as HTMLElement;
+    overlay?.focus();
+  } else {
+    if (didLockScroll) {
+      document.body.style.overflow = '';
+      didLockScroll = false;
+    }
+    isZoomed.value = false;
+    emit('hide');
+  }
+});
+
+const close = () => {
+  emit('update:visible', false);
+};
+
+const onOverlayClick = () => {
+  if (props.closeOnClickOutside) {
+    close();
+  }
+};
+
+const prev = () => {
+  if (isZoomed.value) return;
+  slideDirection.value = 'lightbox-slide-right';
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+  } else {
+    currentIndex.value = props.images.length - 1;
+  }
+};
+
+const next = () => {
+  if (isZoomed.value) return;
+  slideDirection.value = 'lightbox-slide-left';
+  if (currentIndex.value < props.images.length - 1) {
+    currentIndex.value++;
+  } else {
+    currentIndex.value = 0;
+  }
+};
+
+const goTo = (index: number) => {
+  slideDirection.value = index > currentIndex.value ? 'lightbox-slide-left' : 'lightbox-slide-right';
+  isZoomed.value = false;
+  currentIndex.value = index;
+};
+
+const toggleZoom = () => {
+  if (!props.zoom) return;
+  isZoomed.value = !isZoomed.value;
+};
+
+const onImageLoad = () => {
+  // Could emit event or handle loading state
+};
+
+// Touch/swipe support
+const onTouchStart = (e: TouchEvent) => {
+  if (isZoomed.value) return;
+  touchStartX.value = e.touches[0].clientX;
+  touchStartY.value = e.touches[0].clientY;
+  touchDeltaX.value = 0;
+  isSwiping.value = false;
+};
+
+const onTouchMove = (e: TouchEvent) => {
+  if (isZoomed.value) return;
+  const deltaX = e.touches[0].clientX - touchStartX.value;
+  const deltaY = e.touches[0].clientY - touchStartY.value;
+
+  // Only swipe horizontally
+  if (Math.abs(deltaX) > Math.abs(deltaY)) {
+    isSwiping.value = true;
+    touchDeltaX.value = deltaX;
+    e.preventDefault();
+  }
+};
+
+const onTouchEnd = () => {
+  if (!isSwiping.value || isZoomed.value) return;
+  const threshold = 50;
+  if (touchDeltaX.value > threshold) {
+    prev();
+  } else if (touchDeltaX.value < -threshold) {
+    next();
+  }
+  isSwiping.value = false;
+  touchDeltaX.value = 0;
+};
+
+onUnmounted(() => {
+  if (didLockScroll) {
+    document.body.style.overflow = '';
+    didLockScroll = false;
+  }
+});
+
+defineExpose({
+  prev,
+  next,
+  goTo,
+  close,
+});
+</script>