@iqual/nuxt-icms 1.0.13 → 1.1.0

package/components/Paragraph/iFrame/Layout/index.vue

@@ -1,161 +0,0 @@
-<template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow class="pb-14 md:pb-0">
-      <div class="col-span-12 md:col-span-6" v-if="title">
-        <DesignSystemOrganismsContentBlock
-          :pretitle="pretitle"
-          :title="title"
-          :titleWeight="titleWeight"
-          :text="text"
-          :colorScheme="colorScheme"
-        />
-      </div>
-
-      <div v-if="isEditing" class="col-span-12">
-        <BlokkliField
-          name="field_icms_iframe_elements"
-          :list="iFrameElements"
-          :class="{ droptarget: isEditing }"
-        />
-      </div>
-
-      <div v-else class="col-span-12">
-        <template v-if="iFrameElements && iFrameElements.length === 1">
-          <DesignSystemMoleculesIFrame
-            :title="iFrameElements[0].props?.title"
-            :link="iFrameElements[0].props?.link?.uri?.path"
-            :height="iFrameElements[0].props?.height"
-          />
-        </template>
-
-        <Tabs
-          v-if="!isMobile && iFrameElements && iFrameElements.length > 1"
-          default-value="tab-1"
-          class="rounded-lg shadow-custom"
-        >
-          <TabsList
-            class="flex flex-col items-center justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent"
-          >
-            <TabsTrigger
-              v-for="(iFrameElement, key) in iFrameElements"
-              :key="key"
-              :value="`tab-${key + 1}`"
-              :class="tabTrigger({ colorScheme })"
-            >
-              {{ iFrameElement?.props?.title }}
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent
-            forceMount
-            v-for="(iFrameElement, key) in iFrameElements"
-            :key="key"
-            :value="`tab-${key + 1}`"
-            :class="tabContent({ colorScheme })"
-          >
-            <DesignSystemMoleculesIFrame
-              :title="iFrameElement.props?.title"
-              :link="iFrameElement.props?.link?.uri?.path"
-              :height="iFrameElement.props?.height"
-            />
-          </TabsContent>
-        </Tabs>
-
-        <Accordion
-          v-if="isMobile && iFrameElements && iFrameElements.length > 1"
-          type="single"
-          class="w-full"
-          collapsible
-          default-value="accordion-1"
-        >
-          <AccordionItem
-            v-for="(iFrameElement, key) in iFrameElements"
-            :key="key"
-            :value="`accordion-${key + 1}`"
-            class="mb-1 border-none [&>h3]:mb-0"
-          >
-            <AccordionTrigger
-              :ref="(el: any) => (triggerRefs[key] = el)"
-              :class="accordionTrigger({ colorScheme })"
-              @click="handleClick(key)"
-            >
-              {{ iFrameElement?.props?.title }}
-            </AccordionTrigger>
-            <AccordionContent class="p-4 pb-6 text-base">
-              <DesignSystemMoleculesIFrame
-                :title="iFrameElement.props?.title"
-                :link="iFrameElement.props?.link?.uri?.path"
-                :height="iFrameElement.props?.height"
-              />
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </div>
-    </DesignSystemAtomsGridRow>
-  </DesignSystemAtomsContainer>
-</template>
-
-<script lang="ts" setup>
-import type { ParagraphIcmsLayoutIframeFragment } from '#graphql-operations'
-import { tv } from 'tailwind-variants'
-
-defineProps<ParagraphIcmsLayoutIframeFragment>()
-
-const { isMobile } = useIsMobile()
-
-const { options, isEditing } = useAttrs().blokkliData
-
-const tabTrigger = tv({
-  base: 'inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none rounded-t-lg py-4 text-base shadow-custom-inner transition-all disabled:pointer-events-none lg:w-fit data-[state=active]:shadow-none',
-  variants: {
-    colorScheme: {
-      none: 'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
-      dark: 'bg-gray-700 dark:bg-gray-700 text-white dark:text-white data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-white',
-      light:
-        'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
-      accent:
-        'bg-primary-600 dark:bg-primary-600 text-white dark:text-white data-[state=active]:bg-primary-700 dark:data-[state=active]:bg-primary-700 data-[state=active]:text-white',
-    },
-  },
-})
-
-const tabContent = tv({
-  base: 'm-0 rounded-b-lg p-8 text-black md:p-16',
-  variants: {
-    colorScheme: {
-      none: 'bg-white text-black',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white text-black',
-      accent: 'bg-primary-700 text-white',
-    },
-  },
-})
-
-const accordionTrigger = tv({
-  base: 'items-center rounded-lg px-6 py-4 shadow-custom-small hover:no-underline gap-4 text-left text-base',
-  variants: {
-    colorScheme: {
-      none: 'bg-white text-black',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white text-black',
-      accent: 'bg-primary-700 text-white',
-    },
-  },
-})
-
-const triggerRefs = ref<Array<ComponentPublicInstance>>([])
-
-const handleClick = (index: number): void => {
-  const { handleAccordionOpen } = useAccordionScroll(triggerRefs.value[index])
-  handleAccordionOpen()
-}
-
-const colorScheme = computed(() => {
-  return options.value.colorScheme
-})
-
-const spacing = computed(() => {
-  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
-})
-
-provide('isEditing', isEditing)
-</script>

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)
-    })
-  })
-})