@iqual/nuxt-icms 1.5.15 → 1.5.17

package/components/Blokkli/Media/index.vue

@@ -13,6 +13,7 @@ const blokkliData = defineBlokkli({
     'spacingTop',
     'spacingBottom',
     'width',
+    'imageFormat',
     'colorScheme',
   ],
   options: {
@@ -20,7 +21,7 @@ const blokkliData = defineBlokkli({
       type: 'checkbox',
       label: 'Show captions',
       default: false,
-    }
-  }
+    },
+  },
 })
 </script>

package/components/Blokkli/TextMedia/index.vue

@@ -13,6 +13,7 @@ const blokkliData = defineBlokkli({
     'spacingTop',
     'spacingBottom',
     'width',
+    'imageFormat',
     'alignHorizontalReduced',
     'colorScheme',
   ],

package/components/Paragraph/Media/index.vue

@@ -10,11 +10,14 @@
           v-if="media && media.length > 1"
           :media="media"
           :imageSizes="imageSizes"
-          :imageAspectRatios="imageAspectRatios"
+          :imageFormat="imageFormat"
           :containerClass="themedClass('mediaSliderContainerClass')"
           :mediaClass="themedClass('mediaSliderMediaClass')"
           :elementClass="
-            themedClass('mediaSliderElementClass', 'block w-full h-auto')
+            themedClass(
+              'mediaSliderElementClass',
+              'block w-full h-auto max-h-dvh object-cover object-center',
+            )
           "
           :figcaptionClass="themedClass('mediaSliderFigcaptionClass')"
           :carouselClass="themedClass('mediaSliderCarouselClass')"
@@ -34,9 +37,14 @@
           v-else-if="media && media.length === 1 && media[0]"
           :media="media[0]"
           :imageSizes="imageSizes"
-          :imageAspectRatios="imageAspectRatios"
+          :imageFormat="imageFormat"
           :mediaClass="themedClass('mediaMediaClass')"
-          :elementClass="themedClass('mediaElementClass')"
+          :elementClass="
+            themedClass(
+              'mediaElementClass',
+              'block w-full h-auto max-h-dvh object-cover object-center',
+            )
+          "
           :figcaptionClass="themedClass('mediaFigcaptionClass')"
           :showCaption="showCaptions"
         />
@@ -73,6 +81,10 @@ const showCaptions = computed(() => {
   return options.value.showCaptions
 })
 
+const imageFormat = computed(() => {
+  return options.value.imageFormat
+})
+
 const rowClassList = computed(() => {
   const classList = ['grid grid-cols-12 gap-6']
   if (options.value.width === 'wide') {
@@ -95,18 +107,6 @@ const imageSizes = computed(() => {
   return 'xs:100vw sm:100vw md:50vw lg:640px'
 })
 
-const imageAspectRatios = computed(() => {
-  if (options.value.width === 'wide') {
-    return '3/1'
-  }
-
-  if (options.value.width === 'medium') {
-    return '16/9'
-  }
-
-  return '4/3'
-})
-
 const columnClassList = computed(() => {
   const classList = ['col-span-12']
 

package/components/Paragraph/TextMedia/index.vue

@@ -38,7 +38,7 @@
           v-if="media && media.length"
           :media="media"
           imageSizes="xs:100vw sm:100vw md:50vw lg:640px"
-          :imageAspectRatios="imageAspectRatios"
+          :imageFormat="imageFormat"
           :containerClass="themedClass('containerClass', 'my-0')"
           :mediaClass="themedClass('mediaClass')"
           :elementClass="themedClass('elementClass')"
@@ -63,7 +63,7 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextMediaFragment } from '#graphql-operations'
-import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { ColorScheme, ImageFormat } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
@@ -130,19 +130,6 @@ const imageColumnClassList = computed(() => {
   return classList.join(' ')
 })
 
-const imageAspectRatios = computed(() => {
-  const width = options.value.textWidth
-
-  switch (width) {
-    case 'narrow':
-      return '2/1'
-    case 'medium':
-      return '16/9'
-    default:
-      return '3/2'
-  }
-})
-
 const parentColorScheme = inject<ColorScheme>('colorScheme', 'none')
 const colorScheme = computed(() => {
   if (options.value.colorScheme !== undefined) {
@@ -156,5 +143,9 @@ const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })
 
+const imageFormat = computed(() => {
+  return options.value.imageFormat
+})
+
 provide('colorScheme', colorScheme)
 </script>

package/config/svgIconSprite.ts

@@ -7,7 +7,7 @@ export default defineNuxtConfigProperty<'svgIconSprite'>(() => {
       default: {
         importPatterns: [
           join(currentLayerDir, './assets/symbols/**/*.svg'),
-          'assets/symbols/**/*.svg',
+          'app/assets/symbols/**/*.svg',
         ]
       },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.5.15",
+  "version": "1.5.17",
   "description": "ICMS Base",
   "type": "module",
   "private": false,