@iqual/nuxt-icms 1.3.1 → 1.4.1

package/components/Drupal/Breadcrumb/index.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="container mb-[30px] h-6 pt-20">
-    <section v-if="links.length" class="relative mobile-only:overflow-hidden">
-      <nav class="breadcrumb" aria-label="breadcrumbs">
+  <div :class="themedClass('containerClass', 'container mb-[30px] h-6 pt-20')">
+    <section v-if="links.length" class="relative mobile-only:overflow-hidden" :class="themedClass('sectionClass')">
+      <nav class="breadcrumb" aria-label="breadcrumbs" :class="themedClass('navClass')">
         <ol
           ref="list"
           itemscope
           itemtype="http://schema.org/BreadcrumbList"
           class="flex items-center whitespace-nowrap"
+          :class="themedClass('listClass')"
         >
           <li
             v-for="(link, index) in linksComputed"
@@ -14,9 +15,10 @@
             itemprop="itemListElement"
             itemscope
             itemtype="http://schema.org/ListItem"
+            :class="themedClass('listItemClass')"
           >
-            <component :is="link.tag" v-bind="link.props" itemprop="item">
-              <span itemprop="name">
+            <component :is="link.tag" v-bind="link.props" itemprop="item" :class="themedClass('linkClass')">
+              <span itemprop="name" :class="themedClass('linkLabelClass')">
                 {{ link.title }}
               </span>
             </component>
@@ -32,10 +34,19 @@
 import type { BreadcrumbFragment } from '#graphql-operations'
 import type { Langcode } from '#nuxt-language-negotiation/config'
 import { NuxtLink } from '#components'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const themedClass = useTheme('DesignSystemAtomsButton')
 
 const props = defineProps<{
   links: BreadcrumbFragment[]
   language?: Langcode
+  containerClass?: string
+  sectionClass?: string
+  navClass?: string
+  listClass?: string
+  listItemClass?: string
+  linkClass?: string
+  linkLabelClass?: string
 }>()
 
 const list = ref<HTMLOListElement | null>(null)

package/components/Drupal/Messages/index.vue

@@ -1,23 +1,34 @@
 <template>
   <div
     v-if="messages.length"
-    class="fixed bottom-0 left-0 z-[9999999] w-full text-white"
+    class="fixed bottom-0 left-0 z-[9999999] w-full"
+    :class="themedClass('wrapperClass', 'text-white')"
   >
     <div
       v-for="(message, i) in messages"
       :key="i"
-      class="flex items-center justify-between rounded p-6 font-medium"
-      :class="classes[message.type]"
+      class="flex items-center justify-between "
+      :class="cn(themedClass('innerClass', 'rounded p-6 font-medium'), classes[message.type])"
       @click="removeMessage(i)"
     >
-      <div v-html="message.message" />
-      <SpriteSymbol name="close" class="size-6" />
+      <div v-html="message.message" :class="themedClass('messageClass')"/>
+      <SpriteSymbol name="close" :class="themedClass('iconClass', 'size-6')" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { DrupalMessageType } from '@iqual/nuxt-icms/composables/useDrupalMessages'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const themedClass = useTheme('DrupalMessages')
+
+const props = defineProps<{
+  wrapperClass?: string
+  innerClass?: string
+  messageClass?: string
+  iconClass?: string
+}>()
 
 const { messages, removeMessage } = useDrupalMessages()
 

package/components/Drupal/Webform/fragment.graphql

@@ -1,12 +1,11 @@
-fragment webformElementMetadata on WebformElement {
+fragment metadata on WebformElementMetadata {
   key
   type
   title
   description
   multiple
-  required {
-    message
-  }
+  required
+  requiredError
 }
 
 fragment webformElementActions on WebformElementWebformActions {
@@ -72,7 +71,11 @@ fragment webformElementCheckboxes on WebformElementCheckboxes {
 fragment webformElementWebformFlexbox on WebformElementWebformFlexbox {
   elements {
     __typename
-    ...webformElementMetadata
+    ... on WebformElement {
+      metadata {
+        ...metadata
+      }
+    }
     ...webformElementActions
     ...webformElementTextBase
     ...webformElementMarkupBase

package/components/Drupal/Webform/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div :class="themedClass('wrapperClass')">
     <Transition name="fade">
-      <div v-if="!submitted && !showThankYou && !showError">
+      <div v-if="!submitted && !showThankYou && !showError" :class="themedClass('formWrapperClass')">
         <FormKit
           type="form"
           :actions="false"
-          :messages-class="'mt-2'"
+          :messages-class="themedClass('messagesClass', 'mt-2')"
           :incomplete-message="$texts(
             'webform.submission_validation_incomplete',
             'Please fill in all required fields.',
@@ -15,17 +15,20 @@
         >
           <div
             v-for="formElement in formDefinition?.elements"
-            :key="formElement.key"
+            :key="formElement?.metadata?.key"
+            :class="themedClass('elementWrapperClass')"
           >
 
             <NuxtTurnstile
               v-model="token"
-              v-if="formElement.key === 'actions'"
+              v-if="formElement?.metadata?.key === 'actions'"
             />
 
             <component
-              :is="getComponent(formElement.type)"
+              v-if="formElement?.metadata?.type"
+              :is="getComponent(formElement?.metadata?.type)"
               :formElement="formElement"
+              :class="themedClass('elementClass')"
             />
           </div>
         </FormKit>
@@ -35,7 +38,7 @@
     <Transition name="fade">
       <div
         v-if="showThankYou"
-        class="mb-4 rounded-lg border border-success-500 px-6 py-4 text-success-500"
+        :class="themedClass('successMessageClass', 'mb-4 rounded-lg border border-success-500 px-6 py-4 text-success-500')"
       >
         <p>
           {{
@@ -51,7 +54,7 @@
     <Transition name="fade">
       <div
         v-if="showError"
-        class="mb-4 rounded-lg border border-error-500 px-6 py-4 text-error-500"
+        :class="themedClass('errorMessageClass', 'mb-4 rounded-lg border border-error-500 px-6 py-4 text-error-500')"
       >
         <p>
           {{
@@ -78,6 +81,7 @@ import TextEmailInput from '@iqual/nuxt-icms/components/Form/TextEmailInput.vue'
 import TextPhoneInput from '@iqual/nuxt-icms/components/Form/TextPhoneInput.vue'
 import WebformMarkup from '@iqual/nuxt-icms/components/Form/WebformMarkup.vue'
 import SubmitButton from '@iqual/nuxt-icms/components/Form/SubmitButton.vue'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 interface FormData {
   [fieldName: string]:
@@ -90,8 +94,15 @@ interface FormData {
     | undefined
 }
 
+const themedClass = useTheme('DrupalWebform')
+
 const props = defineProps<{
   formId: string
+  wrapperClass: string
+  formWrapperClass: string
+  messagesClass: string
+  elementWrapperClass: string
+  elementClass: string
 }>()
 
 const { $texts } = useNuxtApp()
@@ -103,7 +114,7 @@ const showError = ref(false)
 const queryKey = `drupalWebform-${props?.formId || '0'}`;
 const { data: formDefinition } = await useAsyncData(queryKey, async () => {
     return await useGraphqlQuery('webformById', { id: props?.formId }).then(
-      (v) => v?.data?.entityById || { elements: [] }
+      (v) => v?.data?.webformById || { elements: [] }
     )
   })
 

package/components/Drupal/Webform/query.graphql

@@ -1,21 +1,23 @@
 query webformById($id: ID!) {
-  entityById(id: $id, entityType: WEBFORM) {
-    ... on Webform {
-      label
-      id
-      elements {
-        ...webformElementMetadata
-        ...webformElementActions
-        ...webformElementTextBase
-        ...webformElementMarkupBase
-        ...webformElementTextarea
-        ...webformElementSelect
-        ...webformElementManagedFile
-        ...webformElementTermSelect
-        ...webformElementWebformFlexbox
-        ...webformElementRadions
-        ...webformElementCheckboxes
+  webformById(id: "contact") {
+    label
+    id
+    elements {
+      ... on WebformElement {
+        metadata {
+          ...metadata
+        }
       }
+      ...webformElementActions
+      ...webformElementTextBase
+      ...webformElementMarkupBase
+      ...webformElementTextarea
+      ...webformElementSelect
+      ...webformElementManagedFile
+      ...webformElementTermSelect
+      ...webformElementWebformFlexbox
+      ...webformElementRadions
+      ...webformElementCheckboxes
     }
   }
 }

package/components/Form/CheckboxInput.vue

@@ -12,8 +12,8 @@ const { cleanDescription, getValidationData } = useFormElement(
 <template>
   <FormKit
     type="checkbox"
-    :name="formElement.key"
-    :label="formElement.title"
+    :name="formElement?.metadata?.key"
+    :label="formElement?.metadata?.title"
     :help="cleanDescription"
     :validation="getValidationData.rules || ''"
     :validationMessages="getValidationData.messages || {}"
@@ -21,13 +21,13 @@ const { cleanDescription, getValidationData } = useFormElement(
     <template #wrapper="{ node, value }">
       <div class="flex items-center gap-2">
         <Checkbox
-          :id="formElement.key"
+          :id="formElement?.metadata?.key"
           :checked="value"
           @update:checked="node.input($event)"
-          class="border-1 shadow-custom-small focus-visible:ring-primary-500 data-[state=checked]:text-primary-500 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:text-primary-500 size-5 border-gray-200 focus-visible:ring-offset-0 data-[state=checked]:bg-white dark:border-gray-200 dark:data-[state=checked]:bg-white"
+          class="border-1 focus-visible:ring-primary data-[state=checked]:text-primary dark:focus-visible:ring-primary dark:data-[state=checked]:text-primary size-5 border-gray-200 bg-white focus-visible:ring-offset-0 data-[state=checked]:bg-white dark:border-gray-200 dark:bg-white dark:data-[state=checked]:bg-white"
         />
-        <Label :for="formElement.key" class="text-base font-normal">
-          {{ `${formElement.title}${formElement.required ? '*' : ''}` }}
+        <Label :for="formElement?.metadata?.key" class="text-base font-normal">
+          {{ `${formElement?.metadata?.title}${formElement?.metadata?.required ? '*' : ''}` }}
         </Label>
       </div>
     </template>

package/components/Form/CheckboxInputs.vue

@@ -11,14 +11,14 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
 <template>
   <FormKit
     type="checkbox"
-    :name="formElement.key"
+    :name="formElement?.metadata?.key"
     :help="cleanDescription"
     :validation="getValidationData.rules || ''"
     :validationMessages="getValidationData.messages || {}"
   >
     <template #wrapper>
       <Label class="mb-2 block text-base font-normal">
-        {{ `${formElement.title}${formElement.required ? '*' : ''}` }}
+        {{ `${formElement?.metadata?.title}${formElement?.metadata?.required ? '*' : ''}` }}
       </Label>
       <div class="flex flex-col gap-2">
         <div
@@ -28,11 +28,11 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
         >
           <Checkbox
             :value="option.value"
-            :id="`${formElement.key}-${index}`"
-            class="border-1 shadow-custom-small focus-visible:ring-primary-500 data-[state=checked]:text-primary-500 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:text-primary-500 size-5 border-gray-200 focus-visible:ring-offset-0 data-[state=checked]:bg-white dark:border-gray-200 dark:data-[state=checked]:bg-white"
+            :id="`${formElement?.metadata?.key}-${index}`"
+            class="border-1 focus-visible:ring-primary data-[state=checked]:text-primary dark:focus-visible:ring-primary dark:data-[state=checked]:text-primary size-5 border-gray-200 bg-white focus-visible:ring-offset-0 data-[state=checked]:bg-white dark:border-gray-200 dark:bg-white dark:data-[state=checked]:bg-white"
           />
           <Label
-            :for="`${formElement.key}-${index}`"
+            :for="`${formElement?.metadata?.key}-${index}`"
             class="text-base font-normal"
           >
             {{ option.label }}

package/components/Form/FileUploadInput.vue

@@ -11,22 +11,22 @@ const { cleanDescription, getValidationData, getFormattedFileExtensions } =
 <template>
   <FormKit
     type="file"
-    :name="formElement?.key"
+    :name="formElement?.metadata?.key"
     :accept="getFormattedFileExtensions"
     :help="cleanDescription"
-    :multiple="Boolean(formElement.multiple)"
+    :multiple="Boolean(formElement?.metadata?.multiple)"
     :validation="getValidationData.rules || ''"
     :validationMessages="getValidationData.messages || {}"
   >
     <template #wrapper>
       <div class="grid w-full items-center">
-        <Label :for="formElement?.key" class="mb-2 block text-base font-normal">
-          {{ `${formElement.title}${formElement.required ? '*' : ''}` }}
+        <Label :for="formElement?.metadata?.key" class="mb-2 block text-base font-normal">
+          {{ `${formElement?.metadata?.title}${formElement?.metadata?.required ? '*' : ''}` }}
         </Label>
         <Input
-          :id="formElement?.key"
+          :id="formElement?.metadata?.key"
           type="file"
-          class="shadow-custom-small file:bg-primary focus-visible:ring-primary-500 dark:focus-visible:ring-primary-500 h-auto cursor-pointer rounded-lg border-gray-200 bg-white px-6 py-4 text-base font-normal !ring-offset-0 transition-all file:mr-6 file:cursor-pointer file:rounded file:px-4 file:py-2 file:text-base file:font-bold file:text-white placeholder:text-gray-300 dark:border-gray-200 dark:bg-white dark:placeholder:text-gray-300"
+          class="file:bg-primary focus-visible:ring-primary dark:focus-visible:ring-primary h-auto cursor-pointer rounded-none border-gray-200 bg-white px-6 py-4 text-base font-normal !ring-offset-0 transition-all file:mr-6 file:cursor-pointer file:px-4 file:py-2 file:text-base file:font-bold file:text-white placeholder:text-gray-300 dark:border-gray-200 dark:bg-white dark:placeholder:text-gray-300"
         />
       </div>
     </template>

package/components/Form/RadioButtonsInput.vue

@@ -11,14 +11,14 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
 <template>
   <FormKit
     type="radio"
-    :name="formElement.key"
+    :name="formElement?.metadata?.key"
     :help="cleanDescription"
     :validation="getValidationData.rules || ''"
     :validationMessages="getValidationData.messages || {}"
   >
     <template #wrapper>
       <Label class="mb-2 block text-base font-normal">
-        {{ `${formElement.title}${formElement.required ? '*' : ''}` }}
+        {{ `${formElement?.metadata?.title}${formElement?.metadata?.required ? '*' : ''}` }}
       </Label>
       <RadioGroup>
         <div
@@ -27,12 +27,12 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
           class="flex items-center gap-2"
         >
           <RadioGroupItem
-            :id="`${formElement.key}-${index}`"
+            :id="`${formElement?.metadata?.key}-${index}`"
             :value="option.value"
-            class="border-1 shadow-custom-small focus-visible:ring-primary-500 data-[state=checked]:text-primary-500 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:text-primary-500 size-5 border-gray-200 focus-visible:ring-offset-0 data-[state=checked]:bg-white dark:border-gray-200 dark:data-[state=checked]:bg-white"
+            class="border-1 focus-visible:ring-primary data-[state=checked]:text-primary dark:focus-visible:ring-primary dark:data-[state=checked]:text-primary size-5 border-gray-200 bg-white focus-visible:ring-offset-0 data-[state=checked]:bg-white dark:border-gray-200 dark:bg-white dark:data-[state=checked]:bg-white"
           />
           <Label
-            :for="`${formElement.key}-${index}`"
+            :for="`${formElement?.metadata?.key}-${index}`"
             class="text-base font-normal"
           >
             {{ option.label }}

package/components/Form/SelectInput.vue

@@ -11,12 +11,12 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
 <template>
   <FormKit
     type="select"
-    :name="formElement.key"
-    :label="formElement.title"
+    :name="formElement?.metadata?.key"
+    :label="formElement?.metadata?.title"
     :help="cleanDescription"
     :validation="getValidationData.rules"
     :validationMessages="getValidationData.messages"
-    :multiple="Boolean(formElement.multiple)"
+    :multiple="Boolean(formElement?.metadata?.multiple)"
   >
     <template #wrapper="{ value, node }">
       <Select
@@ -24,19 +24,19 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
         @update:model-value="node.input"
       >
         <SelectTrigger
-          class="[&[data-state=open]>svg]:transition-200 border-1 shadow-custom-small focus:ring-primary-500 dark:focus:ring-primary-500 h-auto border-gray-200 bg-white px-6 py-4 focus:outline-none focus:ring-offset-0 dark:border-gray-200 dark:bg-white dark:focus:outline-none dark:focus:ring-offset-0 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg]:transition-all"
+          class="[&[data-state=open]>svg]:transition-200 border-1 focus:ring-primary dark:focus:ring-primary h-auto rounded-none border-gray-200 bg-white px-6 py-4 focus:outline-none focus:ring-offset-0 dark:border-gray-200 dark:bg-white dark:focus:outline-none dark:focus:ring-offset-0 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg]:transition-all"
         >
           <SelectValue
-            :placeholder="`${formElement.title}${formElement.required ? '*' : ''}`"
+            :placeholder="`${formElement?.metadata?.title}${formElement?.metadata?.required ? '*' : ''}`"
             class="text-medium text-base text-black"
           >
             {{
-              value || `${formElement.title}${formElement.required ? '*' : ''}`
+              value || `${formElement?.metadata?.title}${formElement?.metadata?.required ? '*' : ''}`
             }}
           </SelectValue>
         </SelectTrigger>
         <SelectContent
-          class="border-1 !shadow-custom-small border-gray-200 bg-white dark:border-gray-200 dark:bg-white [&>div]:!px-0 [&>div]:!py-1"
+          class="border-1 rounded-none border-gray-200 bg-white dark:border-gray-200 dark:bg-white [&>div]:!px-0 [&>div]:!py-1"
         >
           <SelectItem
             v-for="(option, index) in getFormattedOptions"

package/components/Form/SubmitButton.vue

@@ -7,6 +7,6 @@ defineProps<{ formElement: SubmitButton }>()
 <template>
   <FormKit
     type="submit"
-    :label="formElement?.submitLabel || formElement?.title"
+    :label="formElement?.submitLabel || formElement?.metadata?.title"
   />
 </template>

package/components/Form/TextAreaInput.vue

@@ -15,8 +15,8 @@ const isFocused = ref<boolean>(false)
   <FormKit
     type="textarea"
     v-model="inputValue"
-    :name="formElement?.key"
-    :label="formElement?.title"
+    :name="formElement?.metadata?.key"
+    :label="formElement?.metadata?.title"
     :help="cleanDescription"
     :placeholder="isFocused && !inputValue ? formElement?.placeholder : ''"
     :validation="getValidationData.rules"

package/components/Form/TextEmailInput.vue

@@ -16,8 +16,8 @@ const isFocused = ref<boolean>(false)
   <FormKit
     type="email"
     v-model="inputValue"
-    :name="formElement?.key"
-    :label="formElement?.title"
+    :name="formElement?.metadata?.key"
+    :label="formElement?.metadata?.title"
     :help="cleanDescription"
     :placeholder="isFocused && !inputValue ? formElement?.placeholder : ''"
     :validation="getValidationData.rules"

package/components/Form/TextInput.vue

@@ -16,8 +16,8 @@ const isFocused = ref<boolean>(false)
   <FormKit
     type="text"
     v-model="inputValue"
-    :name="formElement?.key"
-    :label="formElement?.title"
+    :name="formElement?.metadata?.key"
+    :label="formElement?.metadata?.title"
     :help="cleanDescription"
     :placeholder="isFocused && !inputValue ? formElement?.placeholder : ''"
     :validation="getValidationData.rules"

package/components/Form/TextPhoneInput.vue

@@ -16,8 +16,8 @@ const isFocused = ref<boolean>(false)
   <FormKit
     type="tel"
     v-model="inputValue"
-    :name="formElement?.key"
-    :label="formElement?.title"
+    :name="formElement?.metadata?.key"
+    :label="formElement?.metadata?.title"
     :help="cleanDescription"
     :placeholder="isFocused && !inputValue ? formElement?.placeholder : ''"
     :validation="getValidationData.rules"

package/components/Form/composables/useFormElement.ts

@@ -3,25 +3,25 @@ import type { FormElement, TextInput, SelectInput, InputOption, CheckboxInputs,
 export function useFormElement(formElement: FormElement) {
   const { $texts } = useNuxtApp()
   const cleanDescription = computed(() => {
-    if (!formElement.description) return ''
+    if (!formElement?.metadata?.description) return ''
 
-    return formElement.description.replace(/<[^>]*>/g, '')
+    return formElement?.metadata?.description.replace(/<[^>]*>/g, '')
   });
 
   const getValidationData = computed(() => {
     const rules: string[] = []
     const messages: Record<string, string> = {}
 
-    if (formElement?.required) {
+    if (formElement?.metadata?.required) {
       rules.push('required')
-      messages['required'] = formElement.required.message || $texts(
+      messages['required'] = formElement?.metadata?.requiredError || $texts(
         'webform.required_field_error',
         'This field is required.',
       )
     }
 
     const checkboxInput = formElement as CheckboxInput;
-    if (checkboxInput?.type === 'checkbox' && checkboxInput?.required) {
+    if (checkboxInput?.metadata?.type === 'checkbox' && checkboxInput?.metadata?.required) {
       rules.push('accepted')
     }
 

package/components/Form/utils/types.ts

@@ -1,13 +1,14 @@
 export type FormKitTypes = 'text' | 'number' | 'meta' | 'url' | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'form' | 'group' | 'hidden' | 'list' | 'month' | 'password'
 
 export interface FormElement {
-  key: string
-  type: string
-  title: string
-  description?: string
-  multiple?: number
-  required?: {
-    message?: string
+  metadata: {
+    key: string
+    type: string
+    title: string
+    description?: string
+    multiple?: number
+    required?: boolean
+    requiredError?: string
   }
 }
 

package/components/Media/Icon/index.vue

@@ -1,15 +1,19 @@
 <template>
-  <img 
-    :src="media?.url?.path" 
-    :alt="media?.alt?.alt" 
-    :title="media?.title" 
-    :class="mediaClass"
+  <img
+    :src="media?.url?.path"
+    :alt="media?.alt?.alt"
+    :title="media?.title"
+    :class="themedClass('mediaClass')"
   />
 </template>
 
 <script lang="ts" setup>
 import type { MediaIconFragment } from '#graphql-operations'
-const props = defineProps<{
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('MediaIcon')
+
+defineProps<{
   media: MediaIconFragment
   mediaClass?: string
 }>()

package/components/Media/Image/index.vue

@@ -1,33 +1,43 @@
 <template>
-  <picture :class="mediaClass">
-    <img v-if="imageSources.length === 1" 
-      :class="elementClass"
-      :srcset="imageSources[0].srcset" 
-      :sizes="imageSources[0].sizes" 
-      :alt="media?.alt?.alt" 
+  <picture :class="themedClass('mediaClass')">
+    <img
+      v-if="imageSources.length === 1"
+      :srcset="imageSources[0].srcset"
+      :sizes="imageSources[0].sizes"
+      :alt="media?.alt?.alt"
       :title="media?.title"
       :src="placeHolderImage"
       :loading="imageLoading"
+      :class="themedClass('elementClass', 'w-full')"
     />
-    <source v-if="imageSources.length > 1" v-for="(source, key) in imageSources" :key="key"
+    <source
+      v-if="imageSources.length > 1"
+      v-for="(source, key) in imageSources"
+      :key="key"
       :srcset="source.srcset"
-      :media="source.media" 
+      :media="source.media"
     />
-    <img v-if="imageSources.length > 1"
-      :src="placeHolderImage" 
-      :alt="media?.alt?.alt" 
+    <img
+      v-if="imageSources.length > 1"
+      :src="placeHolderImage"
+      :alt="media?.alt?.alt"
       :title="media?.title"
-      :class="elementClass"
       :loading="imageLoading"
+      :class="themedClass('elementClass', 'w-full')"
+    />
+    <figcaption
+      v-if="showCaption && media?.caption"
+      v-text="media?.caption"
+      :class="themedClass('figcaptionClass', 'mt-2 text-center italic')"
     />
-    <figcaption v-if="showCaption && media?.caption" 
-      v-text="media?.caption" 
-      :class="figcaptionClass" />
   </picture>
 </template>
 
 <script lang="ts" setup>
 import type { MediaImageFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('MediaImage')
 
 const props = withDefaults(
   defineProps<{
@@ -35,15 +45,13 @@ const props = withDefaults(
     mediaClass?: string
     imageAspectRatios?: string
     imageSizes?: string
-    imageLoading?: "lazy" | "eager" | undefined
+    imageLoading?: 'lazy' | 'eager' | undefined
     showCaption?: boolean
     figcaptionClass?: string
     elementClass?: string
   }>(),
   {
     imageLoading: 'lazy',
-    figcaptionClass: 'mt-2 italic text-center',
-    elementClass: 'size-full object-cover object-center',
   },
 )
 
@@ -52,6 +60,4 @@ const { placeHolderImage, imageSources } = useImageSources({
   imageAspectRatios: toRef(props, 'imageAspectRatios'),
   imageSizes: toRef(props, 'imageSizes'),
 })
-
 </script>
-