@iqual/nuxt-icms 1.2.3 → 1.3.0

package/app.vue

@@ -3,7 +3,7 @@
     <ClientOnly>
       <div
         v-if="drupalUser.accessToolbar && !isEditing"
-        class="hidden border-b border-b-gray-100 bg-white lg:block"
+        class="hidden border-b border-b-gray-100 bg-white 2xl:block"
       >
         <VuepalAdminToolbar :key="language" />
         <div class="flex">
@@ -45,6 +45,6 @@ useHead({
 .page-enter-from,
 .page-leave-to {
   opacity: 0;
-  filter: blur(2px)
+  filter: blur(2px);
 }
-</style>
+</style>

package/components/DesignSystem/Atoms/LinkListItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink v-if="link"
+  <NuxtLink v-if="link && (title || description)"
     class="block border-b-1 first:border-t-1 py-4"
     :to="link"
     :title="title"

package/components/Form/CheckboxInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CheckboxInput } from './utils/types'
-import { useFormElement } from './composables/useFormElement'
+import type { CheckboxInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
 
 const props = defineProps<{ formElement: CheckboxInput }>()
 
@@ -24,7 +24,7 @@ const { cleanDescription, getValidationData } = useFormElement(
           :id="formElement.key"
           :checked="value"
           @update:checked="node.input($event)"
-          class="size-5 border-1 border-gray-200 shadow-custom-small focus-visible:ring-primary-500 focus-visible:ring-offset-0 data-[state=checked]:bg-white data-[state=checked]:text-primary-500 dark:border-gray-200 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-primary-500"
+          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"
         />
         <Label :for="formElement.key" class="text-base font-normal">
           {{ `${formElement.title}${formElement.required ? '*' : ''}` }}

package/components/Form/CheckboxInputs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { CheckboxInputs } from './utils/types'
-import { useFormElement } from './composables/useFormElement'
+import type { CheckboxInputs } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
 
 const props = defineProps<{ formElement: CheckboxInputs }>()
 
@@ -29,7 +29,7 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
           <Checkbox
             :value="option.value"
             :id="`${formElement.key}-${index}`"
-            class="size-5 border-1 border-gray-200 shadow-custom-small focus-visible:ring-primary-500 focus-visible:ring-offset-0 data-[state=checked]:bg-white data-[state=checked]:text-primary-500 dark:border-gray-200 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-primary-500"
+            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"
           />
           <Label
             :for="`${formElement.key}-${index}`"

package/components/Form/FileUploadInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { FileUploadInput } from './utils/types'
-import { useFormElement } from './composables/useFormElement'
+import type { FileUploadInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
 
 const props = defineProps<{ formElement: FileUploadInput }>()
 
@@ -26,7 +26,7 @@ const { cleanDescription, getValidationData, getFormattedFileExtensions } =
         <Input
           :id="formElement?.key"
           type="file"
-          class="h-auto cursor-pointer rounded-lg border-gray-200 bg-white px-6 py-4 text-base font-normal shadow-custom-small !ring-offset-0 transition-all file:mr-6 file:cursor-pointer file:rounded file:bg-primary file:px-4 file:py-2 file:text-base file:font-bold file:text-white placeholder:text-gray-300 focus-visible:ring-primary-500 dark:border-gray-200 dark:bg-white dark:placeholder:text-gray-300 dark:focus-visible:ring-primary-500"
+          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"
         />
       </div>
     </template>

package/components/Form/RadioButtonsInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { RadioButtonsInput } from './utils/types'
-import { useFormElement } from './composables/useFormElement'
+import type { RadioButtonsInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
 
 const props = defineProps<{ formElement: RadioButtonsInput }>()
 
@@ -29,7 +29,7 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
           <RadioGroupItem
             :id="`${formElement.key}-${index}`"
             :value="option.value"
-            class="size-5 border-1 border-gray-200 shadow-custom-small focus-visible:ring-primary-500 focus-visible:ring-offset-0 data-[state=checked]:bg-white data-[state=checked]:text-primary-500 dark:border-gray-200 dark:focus-visible:ring-primary-500 dark:data-[state=checked]:bg-white dark:data-[state=checked]:text-primary-500"
+            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"
           />
           <Label
             :for="`${formElement.key}-${index}`"

package/components/Form/SelectInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SelectInput } from './utils/types'
-import { useFormElement } from './composables/useFormElement'
+import type { SelectInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
 
 const props = defineProps<{ formElement: SelectInput }>()
 
@@ -24,7 +24,7 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
         @update:model-value="node.input"
       >
         <SelectTrigger
-          class="[&[data-state=open]>svg]:transition-200 h-auto border-1 border-gray-200 bg-white px-6 py-4 shadow-custom-small focus:outline-none focus:ring-primary-500 focus:ring-offset-0 dark:border-gray-200 dark:bg-white dark:focus:outline-none dark:focus:ring-primary-500 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 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"
         >
           <SelectValue
             :placeholder="`${formElement.title}${formElement.required ? '*' : ''}`"
@@ -36,7 +36,7 @@ const { cleanDescription, getValidationData, getFormattedOptions } =
           </SelectValue>
         </SelectTrigger>
         <SelectContent
-          class="border-1 border-gray-200 bg-white !shadow-custom-small dark:border-gray-200 dark:bg-white [&>div]:!px-0 [&>div]:!py-1"
+          class="border-1 !shadow-custom-small 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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SubmitButton } from './utils/types'
+import type { SubmitButton } from '@iqual/nuxt-icms/components/Form/utils/types'
 
 defineProps<{ formElement: SubmitButton }>()
 </script>

package/components/Form/TextAreaInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { TextAreaInput } from './utils/types'
-import { useFormElement } from './composables/useFormElement'
+import type { TextAreaInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
 
 const props = defineProps<{ formElement: TextAreaInput }>()
 

package/components/Form/TextEmailInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { TextEmailInput } from './utils/types'
-import { useFormElement } from './composables/useFormElement'
+import type { TextEmailInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
 
 const props = defineProps<{ formElement: TextEmailInput }>()
 

package/components/Form/TextInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { TextInput } from './utils/types'
-import { useFormElement } from './composables/useFormElement'
+import type { TextInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
 
 const props = defineProps<{ formElement: TextInput }>()
 

package/components/Form/TextPhoneInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { TextPhoneInput } from './utils/types'
-import { useFormElement } from './composables/useFormElement'
+import type { TextPhoneInput } from '@iqual/nuxt-icms/components/Form/utils/types'
+import { useFormElement } from '@iqual/nuxt-icms/components/Form/composables/useFormElement'
 
 const props = defineProps<{ formElement: TextPhoneInput }>()
 

package/components/Form/WebformMarkup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { WebformMarkup } from './utils/types'
+import type { WebformMarkup } from '@iqual/nuxt-icms/components/Form/utils/types'
 
 defineProps<{ formElement: WebformMarkup }>()
 </script>

package/components/Form/composables/useFormElement.ts

@@ -1,4 +1,4 @@
-import type { FormElement, TextInput, SelectInput, InputOption, CheckboxInputs, CheckboxInput, FileUploadInput } from '../utils/types'
+import type { FormElement, TextInput, SelectInput, InputOption, CheckboxInputs, CheckboxInput, FileUploadInput } from '@iqual/nuxt-icms/components/Form/utils/types'
 
 export function useFormElement(formElement: FormElement) {
   const { $texts } = useNuxtApp()

package/components/Media/Image/fragment.graphql

@@ -8,4 +8,10 @@ fragment mediaImage on MediaImage {
     path
   }
   caption: fieldCaption
+  focalPoint: fieldMediaImage {
+    focalPoint {
+      x: xNormalized
+      y: yNormalized
+    }
+  }
 }

package/components/Node/Icms/Page/SearchResult/fragment.graphql

@@ -1,7 +1,9 @@
 fragment nodeIcmsPageSearchResult on NodeIcmsPage {
   id
-  title: label
-  description: body
+  title: fieldIcmsTeaserTitle
+  mainTitle: label
+  text: fieldIcmsTeaserText
+  mainText: body
   link: url {
     path
   }

package/components/Node/Icms/Page/SearchResult/index.vue

@@ -1,8 +1,8 @@
 <template>
   <DesignSystemAtomsLinkListItem
     :link="link?.path"
-    :title="title"
-    :description="description"
+    :title="title || mainTitle"
+    :description="text || mainText"
   />
 </template>
 

package/components/Node/Icms/Page/fragment.graphql

@@ -15,21 +15,3 @@ fragment nodeIcmsPage on NodeIcmsPage {
     }
   }
 }
-
-fragment nodeIcmsPageTeaser on NodeIcmsPage {
-  pretitle: fieldIcmsTeaserPretitle
-  title: fieldIcmsTeaserTitle
-  mainTitle: label
-  text: fieldIcmsTeaserText
-  mainText: body
-  image: fieldIcmsTeaserImage {
-    ...media
-  }
-  mainImage: fieldIcmsImage {
-    ...media
-  }
-  link: url {
-    path
-  }
-  linkLabel: fieldIcmsTeaserLinkLabel
-}

package/components/Paragraph/Downloads/fragment.graphql

@@ -2,6 +2,7 @@ fragment paragraphIcmsLayoutDownloads on ParagraphIcmsLayoutDownloads {
   pretitle: fieldIcmsPretitle
   title: fieldIcmsTitle
   titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
   text: fieldIcmsText
   media: fieldIcmsMediaElements {
     ...media
@@ -9,7 +10,7 @@ fragment paragraphIcmsLayoutDownloads on ParagraphIcmsLayoutDownloads {
   documents: fieldIcmsDocuments {
     name
     mediaFileUrl {
-    path
+      path
     }
   }
-}
+}

package/components/Paragraph/Downloads/index.vue

@@ -6,6 +6,7 @@
           :pretitle="pretitle"
           :title="title"
           :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
           titleClass="mb-0"
           :colorScheme="colorScheme"
         />
@@ -29,10 +30,7 @@
               :class="download({ colorScheme })"
             >
               <div :class="downloadIcon({ colorScheme })">
-                <SpriteSymbol
-                  name="download"
-                  class="size-5"
-                />
+                <SpriteSymbol name="download" class="size-5" />
               </div>
               <DesignSystemOrganismsContentBlock :text="document.name" />
             </a>

package/components/Paragraph/Tabs/Element/index.vue

@@ -29,23 +29,7 @@ import type { ParagraphIcmsTabElementFragment } from '#graphql-operations'
 
 defineProps<ParagraphIcmsTabElementFragment>()
 
-const { options, isEditing } = defineBlokkli({
-  bundle: 'icms_tab_element',
-})
-
-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 { isEditing } = useAttrs().blokkliData as any
 
 const tabContent = tv({
   base: 'm-0 rounded-b-lg p-8 text-black md:p-16',

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

@@ -12,7 +12,7 @@
     </DesignSystemAtomsGridRow>
     <DesignSystemAtomsGridRow>
       <div class="relative col-span-12" v-if="isEditing">
-        <Tabs class="rounded-lg shadow-custom">
+        <Tabs class="shadow-custom rounded-lg">
           <BlokkliField
             name="field_icms_tab_elements"
             :list="tabElements"
@@ -25,7 +25,7 @@
         <Tabs
           v-if="!isMobile"
           default-value="tab-1"
-          class="rounded-lg shadow-custom"
+          class="shadow-custom rounded-lg"
         >
           <TabsList
             class="flex flex-col items-center justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent"
@@ -107,21 +107,13 @@
 
 <script lang="ts" setup>
 import { tv } from 'tailwind-variants'
-import { useAccordionScroll } from '@/composables/useAccordionScroll'
+import { useAccordionScroll } from '@iqual/nuxt-icms/composables/useAccordionScroll'
 
 import type { ParagraphIcmsLayoutTabsFragment } from '#graphql-operations'
 
 const props = defineProps<ParagraphIcmsLayoutTabsFragment>()
 
-const { options, isEditing } = defineBlokkli({
-  bundle: 'icms_layout_tabs',
-  globalOptions: [
-    'spacingBottom',
-    'spacingTop',
-    'colorScheme',
-    'buttonAlignment',
-  ],
-})
+const { options, isEditing } = useAttrs().blokkliData as any
 
 const { isMobile } = useIsMobile()
 
@@ -188,4 +180,3 @@ provide('colorScheme', colorScheme)
 provide('buttonAlignment', buttonAlignment)
 provide('childTitleWeight', childTitleWeight)
 </script>
-