@iqual/nuxt-icms 1.3.0 → 1.4.0

package/components/DesignSystem/Molecules/IconText.vue

@@ -4,38 +4,55 @@
       <Media
         v-if="icon"
         :media="icon"
-        mediaClass="size-10"
+        :mediaClass="themedClass('mediaClass', 'size-10')"
+        :figcaptionClass="themedClass('figcaptionClass')"
+        :elementClass="themedClass('elementClass')"
       />
     </div>
     <DesignSystemOrganismsContentBlock
       :title="title"
       :titleWeight="titleWeight"
-      titleClass="text-xl lg:text-xl font-semibold mb-2"
+      :titleClass="
+        themedClass('titleClass', 'text-xl lg:text-xl font-semibold mb-2')
+      "
       :text="text"
+      :textClass="themedClass('textClass')"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { tv } from 'tailwind-variants'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme()
 
 defineProps<{
   title?: string
   titleWeight?: string
   text?: string
   icon?: MediaFragment
-  colorScheme?: string
+  colorScheme?: ColorScheme
+  titleClass?: string
+  textClass?: string
 }>()
 
 const iconText = tv({
-  base: 'flex items-center gap-6 rounded-lg py-5 px-6 shadow-custom-small',
+  base: themedClass('iconTextBase', 'flex items-center gap-6 py-5 px-6'),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white',
-      accent: 'bg-primary-700 text-white',
+      none: themedClass('iconTextVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass(
+        'iconTextVariantsColorSchemeDark',
+        'bg-gray-900 text-white',
+      ),
+      light: themedClass('iconTextVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass(
+        'iconTextVariantsColorSchemeAccent',
+        'bg-primary-700 text-white',
+      ),
     },
   },
   defaultVariants: {
@@ -44,19 +61,23 @@ const iconText = tv({
 })
 
 const iconTextIcon = tv({
-  base: 'w-20 shrink-0 rounded-full flex justify-center items-center aspect-square',
+  base: themedClass(
+    'iconTextIconBase',
+    'w-20 shrink-0 rounded-full flex justify-center items-center aspect-square',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-gray-50',
-      dark: 'bg-gray-400',
-      light: 'bg-gray-50',
-      accent: 'bg-primary-400',
+      none: themedClass('iconTextIconVariantsColorSchemeNone', 'bg-white'),
+      dark: themedClass('iconTextIconVariantsColorSchemeDark', 'bg-gray-950'),
+      light: themedClass('iconTextIconVariantsColorSchemeLight', 'bg-gray-50'),
+      accent: themedClass(
+        'iconTextIconVariantsColorSchemeAccent',
+        'bg-primary-600',
+      ),
     },
   },
   defaultVariants: {
     colorScheme: 'none',
   },
 })
-
-
 </script>

package/components/DesignSystem/Molecules/MediaLightbox.vue

@@ -1,100 +1,221 @@
 <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"
+      :enter-active-class="
+        themedClass(
+          'transitionEnterActiveClass',
+          'transition-opacity duration-300',
+        )
+      "
+      :enter-from-class="themedClass('transitionEnterFromClass', 'opacity-0')"
+      :enter-to-class="themedClass('transitionEnterToClass', 'opacity-100')"
+      :leave-active-class="
+        themedClass(
+          'transitionLeaveActiveClass',
+          'transition-opacity duration-300',
+        )
+      "
+      :leave-from-class="themedClass('transitionLeaveFromClass', 'opacity-100')"
+      :leave-to-class="themedClass('transitionLeaveToClass', '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')"
+        :class="
+          themedClass(
+            'lightboxContainerClass',
+            'fixed inset-0 z-[103] flex items-center justify-center bg-black/90 backdrop-blur-sm',
+          )
+        "
       >
         <!-- 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"
+          :aria-label="
+            $texts('lightbox.close_button_aria_label', 'Close lightbox')
+          "
           @click="$emit('close')"
+          :class="
+            themedClass(
+              'lightboxCloseButtonClass',
+              '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',
+            )
+          "
         >
-          <X :size="24" />
+          <X :size="24" :class="themedClass('lightboxCloseButtonIconClass')" />
         </button>
 
         <!-- Loading spinner -->
         <div
           v-if="isLoading"
-          class="absolute inset-0 flex items-center justify-center"
           aria-live="polite"
-          aria-label="Loading media"
+          :aria-label="
+            $texts('lightbox.loading_spinner_aria_label', 'Loading media...')
+          "
+          :class="
+            themedClass(
+              'lightboxLoadingSpinnerContainerClass',
+              'absolute inset-0 flex items-center justify-center',
+            )
+          "
         >
-          <div class="h-8 w-8 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
+          <div
+            :class="
+              themedClass(
+                'lightboxLoadingSpinnerClass',
+                '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">
+        <div
+          :class="
+            themedClass(
+              'carouselContainerClass',
+              'relative flex h-full max-h-[90vh] w-full max-w-[90vw] items-center justify-center',
+            )
+          "
+        >
           <Carousel
             v-if="mediaObjects.length > 0"
+            @init-api="onCarouselInit"
             :opts="carouselOptions"
             orientation="horizontal"
-            class="w-full h-full flex flex-col"
-            @init-api="onCarouselInit"
+            :class="themedClass('carouselClass', 'flex h-full w-full flex-col')"
           >
-            <template #default="{ scrollPrev, scrollNext, canScrollPrev, canScrollNext }">
+            <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"
+                :aria-label="
+                  $texts('carousel.prev_button_aria_label', 'Previous media')
+                "
+                :class="
+                  themedClass(
+                    'carouselPrevButtonClass',
+                    '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:cursor-not-allowed disabled:opacity-50',
+                  )
+                "
               >
-                <ChevronLeft :size="24" />
+                <ChevronLeft
+                  :size="24"
+                  :class="themedClass('carouselPrevButtonIconClass')"
+                />
               </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"
+                :aria-label="
+                  $texts('carousel.next_button_aria_label', 'Next media')
+                "
+                :class="
+                  themedClass(
+                    'carouselNextButtonClass',
+                    '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:cursor-not-allowed disabled:opacity-50',
+                  )
+                "
               >
-                <ChevronRight :size="24" />
+                <ChevronRight
+                  :size="24"
+                  :class="themedClass('carouselNextButtonIconClass')"
+                />
               </button>
 
-              <CarouselContent class="h-full flex-1">
+              <CarouselContent
+                :class="themedClass('carouselContentClass', '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"
+                  :class="
+                    themedClass(
+                      'carouselItemClass',
+                      'flex h-full min-h-0 w-full items-center justify-center',
+                    )
+                  "
                 >
                   <!-- Use Media component directly -->
                   <Media
                     :media="media"
                     :show-caption="false"
-                    :video-autoplay="index === currentIndex && media.type === 'MediaVideo'"
+                    :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"
+                    :mediaClass="getMediaWrapperClass(media)"
+                    :elementClass="getMediaElementClass(media)"
                   />
 
                   <!-- Fallback/error state -->
                   <div
-                    v-if="!['MediaImage', 'MediaVideo', 'MediaRemoteVideo', 'MediaIcon'].includes(media.type)"
-                    class="flex flex-col items-center text-white"
+                    v-if="
+                      ![
+                        'MediaImage',
+                        'MediaVideo',
+                        'MediaRemoteVideo',
+                        'MediaIcon',
+                      ].includes(media.type)
+                    "
+                    :class="
+                      themedClass(
+                        'mediaErrorContainerClass',
+                        '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>
+                    <AlertCircle
+                      :size="48"
+                      :class="
+                        themedClass(
+                          'mediaErrorAlertCircleClass',
+                          'mb-4 text-red-400',
+                        )
+                      "
+                    />
+                    <p
+                      :class="themedClass('mediaErrorMessageClass', 'text-lg')"
+                    >
+                      {{
+                        $texts(
+                          'carousel.media_error_message',
+                          'Unable to display this media',
+                        )
+                      }}
+                    </p>
+                    <p
+                      :class="
+                        themedClass(
+                          'mediaErrorDescriptionClass',
+                          'text-sm text-gray-400',
+                        )
+                      "
+                    >
+                      {{
+                        $texts(
+                          'carousel.media_unsupported_format',
+                          'Unsupported format',
+                        )
+                      }}: {{ media.type }}
+                    </p>
                   </div>
                 </CarouselItem>
               </CarouselContent>
@@ -105,9 +226,14 @@
         <!-- Caption display -->
         <div
           v-if="currentCaption"
-          class="absolute bottom-0 left-4 h-[5vh] right-4 z-10 text-center leading-[5vh]"
+          :class="
+            themedClass(
+              'captionContainerClass',
+              'absolute bottom-0 left-4 right-4 z-10 h-[5vh] text-center leading-[5vh]',
+            )
+          "
         >
-          <p class="text-white">
+          <p :class="themedClass('captionClass', 'text-white')">
             {{ currentCaption }}
           </p>
         </div>
@@ -115,10 +241,17 @@
         <!-- Counter -->
         <div
           v-if="mediaObjects.length > 1"
-          class="absolute top-2 left-2 z-10 rounded px-3 py-1 text-sm text-white"
+          :class="
+            themedClass(
+              'counterContainerClass',
+              'absolute left-2 top-2 z-10 px-3 py-1 text-sm text-white',
+            )
+          "
           aria-live="polite"
         >
-          {{ currentIndex + 1 }} / {{ mediaObjects.length }}
+          <span :class="themedClass('counterClass')">
+            {{ currentIndex + 1 }} / {{ mediaObjects.length }}
+          </span>
         </div>
       </div>
     </Transition>
@@ -126,12 +259,16 @@
 </template>
 
 <script lang="ts" setup>
+import type { MediaFragment } from '#graphql-operations'
+import type { CarouselApi } from '@iqual/nuxt-icms/components/ui/carousel'
 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'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from '@iqual/nuxt-icms/components/ui/carousel'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 interface Props {
   mediaObjects: MediaFragment[]
@@ -146,11 +283,14 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  captions: () => []
+  captions: () => [],
 })
 
 const emit = defineEmits<Emits>()
 
+const themedClass = useTheme()
+const { $texts } = useNuxtApp()
+
 // Refs
 const lightboxContainer = ref<HTMLElement>()
 const isLoading = ref(false)
@@ -165,16 +305,22 @@ const carouselOptions = computed(() => ({
   loop: true,
   skipSnaps: false,
   dragFree: false,
-  containScroll: 'trimSnaps' as const
+  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'
+      return themedClass(
+        'mediaClassMediaRemoteVideo',
+        'max-w-full max-h-full w-full h-full flex items-center justify-center',
+      )
     default:
-      return 'w-full h-full flex items-center justify-center'
+      return themedClass(
+        'mediaClassDefault',
+        'max-w-full max-h-full w-full h-full flex items-center justify-center',
+      )
   }
 }
 
@@ -182,13 +328,19 @@ const getMediaWrapperClass = (media: MediaFragment) => {
 const getMediaElementClass = (media: MediaFragment) => {
   switch (media.type) {
     case 'MediaImage':
-      return 'max-h-full max-w-full object-contain'
+      return themedClass(
+        'elementClassMediaImage',
+        'max-h-full max-w-full object-contain',
+      )
     case 'MediaVideo':
-      return 'max-h-full max-w-full'
+      return themedClass('elementClassMediaVideo', 'max-h-full max-w-full')
     case 'MediaRemoteVideo':
-      return 'w-full h-full max-w-[90vw] max-h-[90vh]'
+      return themedClass(
+        'elementClassMediaRemoteVideo',
+        'w-full h-full max-w-[90vw] max-h-[90vh]',
+      )
     default:
-      return ''
+      return themedClass('elementClassMediaRemoteVideo')
   }
 }
 
@@ -205,7 +357,7 @@ const handleMediaError = () => {
 // Carousel event handlers
 const onCarouselInit = (api: CarouselApi) => {
   carouselApi.value = api
-  
+
   if (api) {
     api.on('select', () => {
       const selectedIndex = api.selectedScrollSnap()
@@ -264,10 +416,13 @@ onUnmounted(() => {
 })
 
 // Watch for lightbox opening
-watch(() => props.isOpen, (isOpen) => {
-  if (isOpen) {
-    focusLightbox()
-    updateCarousel()
-  }
-})
-</script>
+watch(
+  () => props.isOpen,
+  (isOpen) => {
+    if (isOpen) {
+      focusLightbox()
+      updateCarousel()
+    }
+  },
+)
+</script>

package/components/DesignSystem/Molecules/MediaSlider.vue

@@ -1,42 +1,76 @@
 <template>
-  <div :class="cn('@container', 'my-6', sliderClass)">
-    <Carousel :active="media && media?.length > 1">
-      <CarouselContent>
+  <div :class="themedClass('containerClass', '@container my-6')">
+    <Carousel
+      :active="media && media?.length > 1"
+      :class="themedClass('carouselClass')"
+    >
+      <CarouselContent :class="themedClass('carouselContentClass')">
         <CarouselItem
           v-for="(element, index) in media"
           :key="index"
-          class="flex cursor-pointer flex-col justify-center pl-4"
+          :class="
+            themedClass(
+              'carouselItemClass',
+              'flex cursor-pointer flex-col justify-center pl-4',
+            )
+          "
           @click="openLightbox(index)"
         >
           <Media
             v-if="element"
             :media="element"
             :showCaption="showCaption"
-            :mediaClass="mediaClass"
-            :elementClass="elementClass"
-            :figcaptionClass="figcaptionClass"
+            :mediaClass="themedClass('mediaClass')"
+            :figcaptionClass="
+              themedClass('figcaptionClass', 'mt-2 italic text-center')
+            "
+            :elementClass="themedClass('elementClass', 'w-full')"
           />
         </CarouselItem>
       </CarouselContent>
       <CarouselPrevious
         v-if="media && media?.length > 1"
-        class="@3xs:left-8 @2xs:left-10 @md:left-16 left-4"
-        :class="carouselButton({ colorScheme })"
+        :class="
+          cn(
+            carouselButton({ colorScheme }),
+            themedClass(
+              'carouselButtonPrevClass',
+              '@3xs:left-8 @2xs:left-10 @md:left-16 left-4',
+            ),
+          )
+        "
       >
-        <ChevronLeft :size="24" :stroke-width="1" />
+        <ChevronLeft
+          :size="24"
+          :stroke-width="1"
+          :class="themedClass('chevronLeftClass')"
+        />
       </CarouselPrevious>
       <CarouselNext
         v-if="media && media?.length > 1"
-        class="@3xs:right-8 @2xs:right-10 @md:right-16 right-4"
-        :class="carouselButton({ colorScheme })"
+        :class="
+          cn(
+            carouselButton({ colorScheme }),
+            themedClass(
+              'carouselButtonNextClass',
+              '@3xs:right-8 @2xs:right-10 @md:right-16 right-4',
+            ),
+          )
+        "
       >
-        <ChevronRight :size="24" :stroke-width="1" />
+        <ChevronRight
+          :size="12"
+          :stroke-width="1"
+          :class="themedClass('chevronRightClass')"
+        />
       </CarouselNext>
     </Carousel>
 
     <!-- MediaLightbox with Media component integration -->
     <DesignSystemMoleculesMediaLightbox
-      :media-objects="media?.filter((item): item is MediaFragment => Boolean(item)) || []"
+      :media-objects="
+        media?.filter((item): item is MediaFragment => Boolean(item)) || []
+      "
       :is-open="isOpen"
       :current-index="currentIndex"
       :captions="captions"
@@ -47,20 +81,34 @@
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { MediaFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
 import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 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'
+
+const themedClass = useTheme()
 
 const props = defineProps<{
   media?: (MediaFragment | null)[] | undefined
-  sliderClass?: string
-  mediaClass?: string
-  colorScheme?: 'white'
+  imageAspectRatios?: string
+  imageSizes?: string
+  imageLoading?: 'lazy' | 'eager' | undefined
+  colorScheme?: ColorScheme
   showCaption?: boolean
-  figcaptionClass?: string
+  containerClass?: string
+  mediaClass?: string
   elementClass?: string
+  figcaptionClass?: string
+  carouselClass?: string
+  carouselContentClass?: string
+  carouselItemClass?: string
+  carouselButtonPrevClass?: string
+  carouselButtonPrevIconClass?: string
+  carouselButtonNextClass?: string
+  carouselButtonNextIconClass?: string
 }>()
 
 const {
@@ -73,11 +121,26 @@ const {
 } = useMediaLightbox(props.media)
 
 const carouselButton = tv({
-  base: 'bg-white text-black ring-black',
+  base: themedClass('carouselButtonBase', 'border-0 shadow-none'),
   variants: {
     colorScheme: {
-      white: 'bg-black text-white ring-white'
-    }
-  }
+      none: themedClass(
+        'carouselButtonVariantsColorSchemeNone',
+        'bg-gray-50 text-black hover:bg-gray-200',
+      ),
+      dark: themedClass(
+        'carouselButtonVariantsColorSchemeDark',
+        'bg-gray-900 text-white hover:bg-black',
+      ),
+      light: themedClass(
+        'carouselButtonVariantsColorSchemeLight',
+        'bg-white text-black hover:bg-gray-200',
+      ),
+      accent: themedClass(
+        'carouselButtonVariantsColorSchemeAccent',
+        'bg-primary text-white hover:bg-primary-600',
+      ),
+    },
+  },
 })
-</script>
+</script>