@iqual/nuxt-icms 1.0.13 → 1.0.14

package/components/Media/Image/index.vue

@@ -46,7 +46,7 @@ const props = withDefaults(
   }>(),
   {
     imageLoading: 'lazy',
-    figcaptionClass: 'pt-1 text-center',
+    figcaptionClass: 'mt-2 italic text-center',
     elementClass: 'size-full object-cover object-center',
   },
 )

package/components/Media/RemoteVideo/index.vue

@@ -18,7 +18,7 @@
       >
         <img
           :src="thumbnailUrl"
-          class="absolute left-0 top-0 size-full object-cover aspect-video"
+          class="absolute left-0 top-0 aspect-video size-full object-cover"
           :class="elementClass"
           :alt="thumbnailAlt"
         />
@@ -26,9 +26,11 @@
         <SpriteSymbol name="play" class="z-10 size-[75px]" />
       </button>
 
-      <figcaption v-if="showCaption && media?.caption" 
-        v-text="media?.caption" 
-        :class="figcaptionClass" />
+      <figcaption
+        v-if="showCaption && media?.caption"
+        v-text="media?.caption"
+        :class="figcaptionClass"
+      />
     </figure>
   </VuepalRemoteVideo>
 </template>
@@ -36,13 +38,18 @@
 <script lang="ts" setup>
 import type { MediaRemoteVideoFragment } from '#graphql-operations'
 
-const props = defineProps<{
-  media: MediaRemoteVideoFragment
-  mediaClass?: string
-  elementClass?: string
-  showCaption?: boolean
-  figcaptionClass?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    media: MediaRemoteVideoFragment
+    mediaClass?: string
+    elementClass?: string
+    showCaption?: boolean
+    figcaptionClass?: string
+  }>(),
+  {
+    figcaptionClass: 'mt-2 italic text-center',
+  },
+)
 
 const isPlaying = ref(false)
 

package/components/Media/Video/index.vue

@@ -12,14 +12,15 @@
       <source v-if="media?.url?.path" :src="media.url.path" type="video/mp4" />
       Your browser does not support the video tag.
     </video>
-    <figcaption v-if="showCaption && media?.caption" 
-    v-text="media?.caption" 
-    :class="figcaptionClass" />
+    <figcaption
+      v-if="showCaption && media?.caption"
+      v-text="media?.caption"
+      :class="figcaptionClass"
+    />
   </figure>
 </template>
 
 <script lang="ts" setup>
-
 import type { MediaVideoFragment } from '#graphql-operations'
 
 withDefaults(
@@ -39,6 +40,7 @@ withDefaults(
     videoMuted: true,
     videoAutoplay: true,
     videoLoop: false,
+    figcaptionClass: 'mt-2 italic text-center',
   },
 )
 </script>

package/components/Paragraph/Media/index.vue

@@ -3,13 +3,20 @@
     <div :class="rowClassList">
       <div :class="columnClassList">
         <DesignSystemMoleculesMediaSlider
-          v-if="media && media.length"
+          v-if="media && media.length > 1"
           :media="media"
           :colorScheme="colorScheme"
-          :showCaption="true"
+          showCaption
           :sliderClass="mediaSliderClassList"
           :elementClass="mediaElementClassList"
-          
+        />
+
+        <Media
+          v-else-if="media && media.length === 1 && media[0]"
+          :media="media[0]"
+          imageSizes="xs:100vw sm:100vw md:100vw lg:1284px"
+          elementClass="rounded-lg"
+          showCaption
         />
       </div>
     </div>
@@ -17,14 +24,14 @@
 </template>
 
 <script lang="ts" setup>
-import type { ParagraphIcmsLayoutTextMediaFragment } from '#graphql-operations'
+import type { ParagraphIcmsLayoutMediaFragment } from '#graphql-operations'
 
-defineProps<ParagraphIcmsLayoutTextMediaFragment>()
+defineProps<ParagraphIcmsLayoutMediaFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
 const mediaSliderClassList = computed(() => {
-  const classList = []
+  const classList = ['my-0']
   if (options.value.width !== 'full') {
     classList.push('rounded-lg overflow-hidden')
   }
@@ -58,7 +65,6 @@ const rowClassList = computed(() => {
 })
 
 const imageSizes = computed(() => {
-
   if (options.value.width === 'full') {
     return 'xs:100vw sm:100vw md:100vw lg:100vw'
   }
@@ -79,5 +85,4 @@ const columnClassList = computed(() => {
 
   return classList
 })
-
 </script>

package/package.json

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

package/server/graphqlMiddleware.serverOptions.ts

@@ -1,8 +1,8 @@
 import { defineGraphqlServerOptions } from 'nuxt-graphql-middleware/server-options'
-import { extractCacheability } from '~/packages/nuxt-icms/server/utils/cacheability'
-import type { GraphqlCacheability } from '~/packages/nuxt-icms/server/helpers'
+import { extractCacheability } from '@iqual/nuxt-icms/server/utils/cacheability'
+import type { GraphqlCacheability } from '@iqual/nuxt-icms/server/helpers'
 import { defaultLangcode, langcodes } from '#nuxt-language-negotiation/config'
-import { buildProxyRequestHeaders } from '~/packages/nuxt-icms/server/helpers/request'
+import { buildProxyRequestHeaders } from '@iqual/nuxt-icms/server/helpers/request'
 
 export default defineGraphqlServerOptions<{
   extensions: {

package/tests/pages.spec.ts

@@ -0,0 +1,101 @@
+import path from 'path'
+import { promises as fsp } from 'fs'
+import { describe, it, expect } from 'vitest'
+import * as ts from 'typescript'
+import { parse as parseSfc } from '@vue/compiler-sfc'
+
+// Recursively find all Vue files in a directory
+async function findVueFiles(
+  dir: string,
+  ignorePatterns: string[] = [],
+): Promise<string[]> {
+  const entries = await fsp.readdir(dir, { withFileTypes: true })
+  const files: string[] = []
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name)
+
+    // Skip if path matches any ignore pattern
+    if (ignorePatterns.some((pattern) => fullPath.includes(pattern))) {
+      continue
+    }
+
+    if (entry.isDirectory()) {
+      const subFiles = await findVueFiles(fullPath, ignorePatterns)
+      files.push(...subFiles)
+    } else if (entry.name.endsWith('.vue')) {
+      files.push(fullPath)
+    }
+  }
+
+  return files
+}
+
+// Parse a Vue SFC and check if the component's script calls the given function at least once.
+function functionIsCalledAtLeastOnce(
+  vueFileContents: string,
+  functionName: string,
+): boolean {
+  const result = parseSfc(vueFileContents)
+  const script = result.descriptor.scriptSetup?.content
+  if (!script) {
+    return false
+  }
+  const sourceFile = ts.createSourceFile(
+    'temp.ts',
+    script,
+    ts.ScriptTarget.ES2015,
+    true,
+  )
+
+  let isCalled = false
+
+  function visit(node: ts.Node) {
+    if (
+      ts.isCallExpression(node) &&
+      node.expression.getText(sourceFile) === functionName
+    ) {
+      isCalled = true
+    }
+
+    if (!isCalled) {
+      ts.forEachChild(node, visit)
+    }
+  }
+
+  ts.forEachChild(sourceFile, visit)
+
+  return isCalled
+}
+
+describe('The Nuxt page component', async () => {
+  const rootDir = path.resolve(__dirname, './../app/pages')
+  const ignorePatterns = ['blokkli']
+
+  const pageFilePaths = await findVueFiles(rootDir, ignorePatterns)
+  console.log(pageFilePaths)
+
+  const pageComponentFiles = await Promise.all(
+    pageFilePaths.map((filePath) => {
+      return fsp.readFile(filePath, { encoding: 'utf8' }).then((content) => {
+        return {
+          filePath,
+          content,
+        }
+      })
+    }),
+  )
+
+  pageComponentFiles.forEach(({ filePath, content }) => {
+    it(`"${filePath}" should call useDrupalRouteQuery()`, () => {
+      expect(
+        functionIsCalledAtLeastOnce(content, 'useDrupalRouteQuery'),
+      ).toEqual(true)
+    })
+    it(`"${filePath}" should call renderPageDependencies()`, () => {
+      expect(
+        functionIsCalledAtLeastOnce(content, 'renderPageDependencies'),
+      ).toEqual(true)
+    })
+  })
+})

package/vitest.config.mts

@@ -6,9 +6,9 @@ export default defineVitestConfig({
     globals: true,
     environment: 'nuxt',
     alias: {
-      '~': path.resolve(__dirname, './'),
+      '~': path.resolve(__dirname, './app'),
+      '~~': path.resolve(__dirname, './'),
     },
-    include: ['**/__tests__/*.*'],
     coverage: {
       all: true,
       provider: 'v8',

package/pages/__tests__/index.ts

@@ -1,77 +0,0 @@
-import path from 'path'
-import { promises as fsp } from 'fs'
-import { describe, it, expect } from 'vitest'
-import { glob } from 'glob'
-import * as ts from 'typescript'
-import { parse as parseSfc } from '@vue/compiler-sfc'
-
-// Parse a Vue SFC and check if the component's script calls the given function at least once.
-function functionIsCalledAtLeastOnce(
-  vueFileContents: string,
-  functionName: string,
-): boolean {
-  const result = parseSfc(vueFileContents)
-  const script = result.descriptor.scriptSetup?.content
-  if (!script) {
-    return false
-  }
-  const sourceFile = ts.createSourceFile(
-    'temp.ts',
-    script,
-    ts.ScriptTarget.ES2015,
-    true,
-  )
-
-  let isCalled = false
-
-  function visit(node: ts.Node) {
-    if (
-      ts.isCallExpression(node) &&
-      node.expression.getText(sourceFile) === functionName
-    ) {
-      isCalled = true
-    }
-
-    if (!isCalled) {
-      ts.forEachChild(node, visit)
-    }
-  }
-
-  ts.forEachChild(sourceFile, visit)
-
-  return isCalled
-}
-
-describe('The Nuxt page component', async () => {
-  const pageComponentFiles = await glob(
-    path.resolve(__dirname, './../**/*.vue'),
-    {},
-  ).then((pageFilePaths) => {
-    console.log(pageFilePaths)
-    return Promise.all(
-      pageFilePaths.map((filePath) => {
-        return fsp.readFile(filePath, { encoding: 'utf8' }).then((content) => {
-          return {
-            filePath,
-            content,
-          }
-        })
-      }),
-    )
-  })
-
-  pageComponentFiles.forEach(({ filePath, content }) => {
-    it(`"${filePath}" should call useDrupalRouteQuery()`, () => {
-      expect(functionIsCalledAtLeastOnce(content, 'useDrupalRoute')).toEqual(
-        true,
-      )
-    })
-    it(`"${filePath}" should call setBreadcrumbLinksFromRoute()`, () => {
-      expect(
-        functionIsCalledAtLeastOnce(content, 'setBreadcrumbLinksFromRoute') ||
-          functionIsCalledAtLeastOnce(content, 'setBreadcrumbLinks') ||
-          functionIsCalledAtLeastOnce(content, 'useDrupalRoute'),
-      ).toEqual(true)
-    })
-  })
-})