@iqual/nuxt-icms 1.1.0 → 1.2.2

package/assets/css/ckeditor.css

@@ -12,4 +12,8 @@
       @apply list-disc;
     }
   }
+
+  strong {
+    @apply font-bold;
+  }
 }

package/assets/css/components/container.css

@@ -1,6 +1,6 @@
 @layer components {
   .container {
-    @apply w-full px-4;
+    @apply max-w-full px-4;
 
     @screen md {
       @apply px-8;
@@ -11,7 +11,7 @@
     }
 
     @screen xl {
-      @apply mx-auto w-[1380px];
+      @apply mx-auto max-w-[1380px];
     }
   }
 }

package/assets/css/tailwind.css

@@ -2,8 +2,8 @@
 /* @import 'vue3-carousel/dist/carousel.css'; */
 
 /* Components */
-@import './components/container.css';
 @import './components/grid-container.css';
+@import './components/container.css';
 @import './components/ck-content.css';
 @import './components/link.css';
 @import './components/dialog.css';

package/assets/css/typography.css

@@ -48,6 +48,10 @@
   }
 
   .ck-content {
+    strong {
+      @apply font-bold;
+    }
+
     a {
       @apply underline;
     }

package/assets/symbols/download.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.66634 0.666656V3.99999C9.66634 4.44202 9.84194 4.86594 10.1545 5.1785C10.4671 5.49106 10.891 5.66666 11.333 5.66666H14.6663M10.4997 0.666656H2.99967C2.55765 0.666656 2.13372 0.842251 1.82116 1.15481C1.5086 1.46737 1.33301 1.8913 1.33301 2.33332V15.6667C1.33301 16.1087 1.5086 16.5326 1.82116 16.8452C2.13372 17.1577 2.55765 17.3333 2.99967 17.3333H12.9997C13.4417 17.3333 13.8656 17.1577 14.1782 16.8452C14.4907 16.5326 14.6663 16.1087 14.6663 15.6667V4.83332L10.4997 0.666656Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

package/bundles.ts

@@ -12,6 +12,9 @@ const ICMS_BUNDLES = [
   '@iqual/nuxt-icms-news',
   '@iqual/nuxt-icms-pressrelease',
   '@iqual/nuxt-icms-people',
+  '@iqual/nuxt-icms-product',
+  '@iqual/nuxt-icms-project',
+  '@iqual/nuxt-icms-search',
 ] as const
 
 /**
@@ -42,7 +45,7 @@ export function collectProjectDeps(): ProjectDeps {
 /**
  * Return auto-loaded ICMS bundle Nuxt Layers that
  * can be consumed by the Nuxt config of root projects.
- * 
+ *
  */
 export function buildBundleStack(): string[] {
   const deps = collectProjectDeps()

package/components/Blokkli/TextMedia/index.vue

@@ -11,12 +11,11 @@ const blokkliData = defineBlokkli({
   bundle: 'icms_layout_text_media',
   globalOptions: [
     'textWidth',
-    'textAlign',
     'spacingBottom',
     'spacingTop',
     'colorScheme',
     'buttonAlignment',
+    'reverseColumns',
   ],
 })
-
 </script>

package/components/DesignSystem/Atoms/Caption.vue

@@ -0,0 +1,15 @@
+<template>
+  <p :class="captionClass">{{ caption }}</p>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    caption?: string
+    captionClass?: string
+  }>(),
+  {
+    captionClass: 'text-gray-300 text-lg',
+  },
+)
+</script>

package/components/DesignSystem/Atoms/LinkListItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <NuxtLink v-if="link"
+    class="block border-b-1 first:border-t-1 py-4"
+    :to="link"
+    :title="title"
+    :prefetch="true"
+  >
+    <span v-if="title" class="block">{{ title }}</span>
+    <span v-if="description" class="block text-sm font-light mt-2" v-html="description" />
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+  title?: String
+  description?: String
+  link?: string
+}>()
+
+</script>

package/components/DesignSystem/Molecules/MediaLightbox.vue

@@ -0,0 +1,273 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-300"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-300"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isOpen"
+        ref="lightboxContainer"
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm"
+        @click.self="$emit('close')"
+      >
+        <!-- Close button -->
+        <button
+          type="button"
+          class="absolute right-4 top-4 z-10 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black"
+          aria-label="Close lightbox"
+          @click="$emit('close')"
+        >
+          <X :size="24" />
+        </button>
+
+        <!-- Loading spinner -->
+        <div
+          v-if="isLoading"
+          class="absolute inset-0 flex items-center justify-center"
+          aria-live="polite"
+          aria-label="Loading media"
+        >
+          <div class="h-8 w-8 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
+        </div>
+
+        <!-- Carousel-based media container -->
+        <div class="relative h-full w-full max-h-[90vh] max-w-[90vw] flex items-center justify-center">
+          <Carousel
+            v-if="mediaObjects.length > 0"
+            :opts="carouselOptions"
+            orientation="horizontal"
+            class="w-full h-full flex flex-col"
+            @init-api="onCarouselInit"
+          >
+            <template #default="{ scrollPrev, scrollNext, canScrollPrev, canScrollNext }">
+              <!-- Navigation buttons using carousel methods -->
+              <button
+                v-if="mediaObjects.length > 1"
+                type="button"
+                class="absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-label="Previous media"
+                :disabled="!canScrollPrev"
+                @click="scrollPrev"
+              >
+                <ChevronLeft :size="24" />
+              </button>
+
+              <button
+                v-if="mediaObjects.length > 1"
+                type="button"
+                class="absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-black disabled:opacity-50 disabled:cursor-not-allowed"
+                aria-label="Next media"
+                :disabled="!canScrollNext"
+                @click="scrollNext"
+              >
+                <ChevronRight :size="24" />
+              </button>
+
+              <CarouselContent class="h-full flex-1">
+                <CarouselItem
+                  v-for="(media, index) in mediaObjects"
+                  :key="index"
+                  class="flex h-full w-full items-center justify-center min-h-0"
+                >
+                  <!-- Use Media component directly -->
+                  <Media
+                    :media="media"
+                    :show-caption="false"
+                    :video-autoplay="index === currentIndex && media.type === 'MediaVideo'"
+                    :video-muted="true"
+                    :video-controls="true"
+                    :media-class="getMediaWrapperClass(media)"
+                    :element-class="getMediaElementClass(media)"
+                    class="max-h-full max-w-full"
+                    @load="handleMediaLoad"
+                    @error="handleMediaError"
+                  />
+
+                  <!-- Fallback/error state -->
+                  <div
+                    v-if="!['MediaImage', 'MediaVideo', 'MediaRemoteVideo', 'MediaIcon'].includes(media.type)"
+                    class="flex flex-col items-center text-white"
+                  >
+                    <AlertCircle :size="48" class="mb-4 text-red-400" />
+                    <p class="text-lg">Unable to display this media</p>
+                    <p class="text-sm text-gray-400">Unsupported format: {{ media.type }}</p>
+                  </div>
+                </CarouselItem>
+              </CarouselContent>
+            </template>
+          </Carousel>
+        </div>
+
+        <!-- Caption display -->
+        <div
+          v-if="currentCaption"
+          class="absolute bottom-0 left-4 h-[5vh] right-4 z-10 text-center leading-[5vh]"
+        >
+          <p class="text-white">
+            {{ currentCaption }}
+          </p>
+        </div>
+
+        <!-- Counter -->
+        <div
+          v-if="mediaObjects.length > 1"
+          class="absolute top-2 left-2 z-10 rounded px-3 py-1 text-sm text-white"
+          aria-live="polite"
+        >
+          {{ currentIndex + 1 }} / {{ mediaObjects.length }}
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
+import { ChevronLeft, ChevronRight, X, AlertCircle } from 'lucide-vue-next'
+import { Carousel, CarouselContent, CarouselItem } from '@iqual/nuxt-icms/components/ui/carousel'
+import type { CarouselApi } from '@iqual/nuxt-icms/components/ui/carousel'
+import { Media } from '#components'
+import type { MediaFragment } from '#graphql-operations'
+
+interface Props {
+  mediaObjects: MediaFragment[]
+  isOpen: boolean
+  currentIndex: number
+  captions?: string[]
+}
+
+interface Emits {
+  (e: 'close'): void
+  (e: 'update:currentIndex', index: number): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  captions: () => []
+})
+
+const emit = defineEmits<Emits>()
+
+// Refs
+const lightboxContainer = ref<HTMLElement>()
+const isLoading = ref(false)
+const carouselApi = ref<CarouselApi>()
+
+// Computed properties
+const currentCaption = computed(() => props.captions[props.currentIndex] || '')
+
+// Carousel configuration
+const carouselOptions = computed(() => ({
+  startIndex: props.currentIndex,
+  loop: true,
+  skipSnaps: false,
+  dragFree: false,
+  containScroll: 'trimSnaps' as const
+}))
+
+// Helper to get wrapper classes for media containers
+const getMediaWrapperClass = (media: MediaFragment) => {
+  switch (media.type) {
+    case 'MediaRemoteVideo':
+      return 'w-full h-full flex items-center justify-center'
+    default:
+      return 'w-full h-full flex items-center justify-center'
+  }
+}
+
+// Helper to get element classes for media
+const getMediaElementClass = (media: MediaFragment) => {
+  switch (media.type) {
+    case 'MediaImage':
+      return 'max-h-full max-w-full object-contain'
+    case 'MediaVideo':
+      return 'max-h-full max-w-full'
+    case 'MediaRemoteVideo':
+      return 'w-full h-full max-w-[90vw] max-h-[90vh]'
+    default:
+      return ''
+  }
+}
+
+// Media loading handlers
+const handleMediaLoad = () => {
+  isLoading.value = false
+}
+
+const handleMediaError = () => {
+  isLoading.value = false
+  console.warn('Failed to load media item')
+}
+
+// Carousel event handlers
+const onCarouselInit = (api: CarouselApi) => {
+  carouselApi.value = api
+  
+  if (api) {
+    api.on('select', () => {
+      const selectedIndex = api.selectedScrollSnap()
+      emit('update:currentIndex', selectedIndex)
+    })
+  }
+}
+
+// Update carousel when currentIndex changes externally
+const updateCarousel = async () => {
+  if (carouselApi.value) {
+    await nextTick()
+    carouselApi.value.scrollTo(props.currentIndex, false)
+  }
+}
+
+// Watch for external index changes
+watch(() => props.currentIndex, updateCarousel)
+
+// Keyboard navigation
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!props.isOpen) return
+
+  switch (event.key) {
+    case 'Escape':
+      emit('close')
+      break
+    case 'ArrowLeft':
+      event.preventDefault()
+      carouselApi.value?.scrollPrev()
+      break
+    case 'ArrowRight':
+      event.preventDefault()
+      carouselApi.value?.scrollNext()
+      break
+  }
+}
+
+// Focus management
+const focusLightbox = () => {
+  nextTick(() => {
+    lightboxContainer.value?.focus()
+  })
+}
+
+// Lifecycle
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+  if (props.isOpen) {
+    focusLightbox()
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+})
+
+// Watch for lightbox opening
+watch(() => props.isOpen, (isOpen) => {
+  if (isOpen) {
+    focusLightbox()
+    updateCarousel()
+  }
+})
+</script>

package/components/DesignSystem/Molecules/MediaSlider.vue

@@ -1,15 +1,14 @@
 <template>
   <div :class="cn('@container', 'my-6', sliderClass)">
-    <Carousel
-      :active="media && media?.length > 1"
-    >
+    <Carousel :active="media && media?.length > 1">
       <CarouselContent>
         <CarouselItem
           v-for="(element, index) in media"
           :key="index"
-          class="flex flex-col justify-center pl-4"
+          class="flex cursor-pointer flex-col justify-center pl-4"
+          @click="openLightbox(index)"
         >
-          <Media 
+          <Media
             v-if="element"
             :media="element"
             :showCaption="showCaption"
@@ -21,52 +20,64 @@
       </CarouselContent>
       <CarouselPrevious
         v-if="media && media?.length > 1"
-        class="left-4 @3xs:left-8 @2xs:left-10 @md:left-16"
+        class="@3xs:left-8 @2xs:left-10 @md:left-16 left-4"
         :class="carouselButton({ colorScheme })"
       >
         <ChevronLeft :size="24" :stroke-width="1" />
       </CarouselPrevious>
       <CarouselNext
         v-if="media && media?.length > 1"
-        class="right-4 @3xs:right-8 @2xs:right-10 @md:right-16"
+        class="@3xs:right-8 @2xs:right-10 @md:right-16 right-4"
         :class="carouselButton({ colorScheme })"
       >
         <ChevronRight :size="24" :stroke-width="1" />
       </CarouselNext>
     </Carousel>
+
+    <!-- MediaLightbox with Media component integration -->
+    <DesignSystemMoleculesMediaLightbox
+      :media-objects="media?.filter((item): item is MediaFragment => Boolean(item)) || []"
+      :is-open="isOpen"
+      :current-index="currentIndex"
+      :captions="captions"
+      @close="closeLightbox"
+      @update:current-index="setCurrentIndex"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
 import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useMediaLightbox } from '@iqual/nuxt-icms/composables/useMediaLightbox'
 import { tv } from 'tailwind-variants'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import type { MediaFragment } from '#graphql-operations'
 
-defineProps<{
+const props = defineProps<{
   media?: (MediaFragment | null)[] | undefined
   sliderClass?: string
   mediaClass?: string
-  colorScheme?: string
+  colorScheme?: 'white'
   showCaption?: boolean
   figcaptionClass?: string
   elementClass?: string
 }>()
 
+const {
+  isOpen,
+  currentIndex,
+  openLightbox,
+  closeLightbox,
+  setCurrentIndex,
+  captions,
+} = useMediaLightbox(props.media)
+
 const carouselButton = tv({
-  base: 'size-10 border-none disabled:opacity-40 @sm:size:12 @md:size:16 [&_svg]:size-auto',
+  base: 'bg-white text-black ring-black',
   variants: {
     colorScheme: {
-      none: 'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
-      dark: 'bg-black text-white hover:bg-gray-50 hover:text-black dark:bg-black dark:text-white hover:dark:bg-gray-50 hover:dark:text-black',
-      light:
-        'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
-      accent:
-        'bg-primary-600 text-white hover:bg-primary-800 hover:text-white dark:bg-primary-600 dark:text-white hover:dark:bg-primary-800 hover:dark:text-white',
-    },
-  },
-  defaultVariants: {
-    colorScheme: 'none',
-  },
+      white: 'bg-black text-white ring-white'
+    }
+  }
 })
-</script>
+</script>

package/components/DesignSystem/Organisms/Map.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="relative"
+    :style="{ height: props.height }"
+    :class="{ 'flex items-center justify-center': props.isEditing }"
+  >
+    <ClientOnly>
+      <MglMap
+        :map-style="props.style"
+        :center="props.center"
+        :zoom="props.zoom"
+        :height="props.height"
+        >
+        <MglNavigationControl />
+
+        <mgl-marker
+          v-for="(location, index) in (locations || [])"
+          :key="index"
+          :coordinates="[location.coordinates?.lng || 0, location.coordinates?.lat || 0]"
+          :color="location.color || props.markerColor"
+        >
+          <mgl-popup>
+            <h6>{{ location.label }}</h6>
+            <div v-html="location.description"></div>
+          </mgl-popup>
+        </mgl-marker>
+      </MglMap>
+    </ClientOnly>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Location {
+  label?: string
+  coordinates?: {
+    lat: number
+    lng: number
+  }
+  description?: string
+  color?: string
+}
+
+interface Props {
+  style?: string
+  zoom?: number
+  center?: [number, number]
+  height?: string
+  locations?: Location[]
+  colorScheme?: string
+  isEditing?: boolean
+  markerColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  style: 'https://tiles.openfreemap.org/styles/liberty',
+  center: () => [8.2267, 46.8011],
+  zoom: 12,
+  height: '500px',
+  markerColor: '#e95e27'
+})
+</script>