@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.1

package/components/DesignSystem/Organisms/TeamElement.vue

@@ -4,16 +4,16 @@
       <Media
         v-if="image"
         :media="image"
-        imageAspectRatios="1/1"
-        imageSizes="xs:100vw sm:100vw md:420px lg:420px"
-        :mediaClass="
+        image-aspect-ratios="1/1"
+        image-sizes="xs:100vw sm:100vw md:420px lg:420px"
+        :media-class="
           themedClass(
             'mediaClass',
             'min-h-64 w-full @xl:w-[calc(50%-24px)] @xl:shrink-0 @7xl:w-fit',
           )
         "
-        :figcaptionClass="themedClass('figcaptionClass')"
-        :elementClass="
+        :figcaption-class="themedClass('figcaptionClass')"
+        :element-class="
           themedClass('elementClass', 'w-full rounded-full overflow-hidden')
         "
       />
@@ -32,17 +32,17 @@
             (firstname && lastname ? ' ' : '') +
             (lastname ?? '')
           "
-          :titleWeight="titleWeight"
-          :titleClass="
+          :title-weight="titleWeight"
+          :title-class="
             themedClass(
               'titleClass',
               'text-2xl lg:text-2xl font-semibold mb-2 last:mb-0',
             )
           "
           :subtitle="position"
-          :subtitleClass="themedClass('subtitleClass', 'mb-0')"
+          :subtitle-class="themedClass('subtitleClass', 'mb-0')"
           :text="text"
-          :textClass="themedClass('textClass', 'mt-2')"
+          :text-class="themedClass('textClass', 'mt-2')"
         />
 
         <div
@@ -58,12 +58,12 @@
             :title="email"
             :link="'mailto:' + email"
             :target-blank="false"
-            :buttonStyle="'minimal'"
-            :colorScheme="colorScheme"
-            :buttonClass="
+            :button-style="'minimal'"
+            :color-scheme="colorScheme"
+            :button-class="
               themedClass('buttonClass', 'block p-0 font-normal break-all')
             "
-            :labelClass="themedClass('labelClass')"
+            :label-class="themedClass('labelClass')"
           />
 
           <DesignSystemAtomsButton
@@ -71,12 +71,12 @@
             :title="phone"
             :link="'tel:' + phone"
             :target-blank="false"
-            :buttonStyle="'minimal'"
-            :colorScheme="colorScheme"
-            :buttonClass="
+            :button-style="'minimal'"
+            :color-scheme="colorScheme"
+            :button-class="
               themedClass('buttonClass', 'block p-0 font-normal break-all')
             "
-            :labelClass="themedClass('labelClass')"
+            :label-class="themedClass('labelClass')"
           />
         </div>
 
@@ -98,6 +98,7 @@
 <script lang="ts" setup>
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import type { FieldListItem } from '#blokkli/types'
 import { tv } from 'tailwind-variants'
 
 const themedClass = useTheme('DesignSystemOrganismsTeamElement')
@@ -111,7 +112,7 @@ defineProps<{
   phone?: string
   text?: string
   image?: MediaFragment
-  buttons?: Array<object>
+  buttons?: Array<FieldListItem | null>
   colorScheme?: ColorScheme
   containerClass?: string
   mediaClass?: string

package/components/DesignSystem/Organisms/TeaserCard.vue

@@ -11,11 +11,11 @@
         <Media
           v-if="image"
           :media="image"
-          imageSizes="xs:100vw sm:100vw md:420px lg:420px"
-          imageAspectRatios="16/9"
-          :mediaClass="themedClass('mediaClass', 'w-full')"
-          :figcaptionClass="themedClass('figcaptionClass')"
-          :elementClass="themedClass('elementClass', 'w-full')"
+          image-sizes="xs:100vw sm:100vw md:420px lg:420px"
+          image-aspect-ratios="16/9"
+          :media-class="themedClass('mediaClass', 'w-full')"
+          :figcaption-class="themedClass('figcaptionClass')"
+          :element-class="themedClass('elementClass', 'w-full')"
         />
       </div>
 
@@ -30,32 +30,32 @@
         <slot name="content">
           <DesignSystemOrganismsContentBlock
             :pretitle="pretitle"
-            :pretitleClass="
+            :pretitle-class="
               themedClass(
                 'pretitleClass',
                 'mb-1 text-base lg:text-base font-medium',
               )
             "
             :title="title"
-            :titleWeight="titleWeight"
-            :titleClass="
+            :title-weight="titleWeight"
+            :title-class="
               themedClass(
                 'titleClass',
                 'mb-2 text-xl lg:text-xl @sm:!text-2xl font-semibold line-clamp-4',
               )
             "
             :subtitle="subtitle"
-            :subtitleClass="
+            :subtitle-class="
               themedClass(
                 'subtitleClass',
                 'mb-2 text-base lg:text-base font-semibold',
               )
             "
             :text="text"
-            :textClass="themedClass('textClass', 'text-sm line-clamp-4')"
+            :text-class="themedClass('textClass', 'text-sm line-clamp-4')"
           />
         </slot>
-        <slot name="extra"></slot>
+        <slot name="extra" />
         <slot name="buttongroup">
           <div
             v-if="link?.path"
@@ -75,10 +75,10 @@
                 linkLabel ?? $texts('teaser_card.link_label', 'Read more')
               "
               :target-blank="false"
-              :buttonStyle="'focus'"
-              :colorScheme="colorScheme"
-              :buttonClass="themedClass('buttonClass')"
-              :labelClass="themedClass('labelClass')"
+              :button-style="'focus'"
+              :color-scheme="colorScheme"
+              :button-class="themedClass('buttonClass')"
+              :label-class="themedClass('labelClass')"
             />
           </div>
         </slot>
@@ -91,11 +91,10 @@
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
-import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const themedClass = useTheme('DesignSystemOrganismsTeaserCard')
 
-const props = defineProps<{
+defineProps<{
   image?: MediaFragment
   pretitle?: string
   title?: string

package/components/DesignSystem/Organisms/TeaserSimple.vue

@@ -10,12 +10,12 @@
       <slot name="content">
         <DesignSystemOrganismsContentBlock
           :title="title"
-          :titleWeight="titleWeight"
-          :titleStyle="'heading-5'"
-          :titleClass="themedClass('titleClass', 'mb-0 font-semibold')"
+          :title-weight="titleWeight"
+          :title-style="'heading-5'"
+          :title-class="themedClass('titleClass', 'mb-0 font-semibold')"
         />
       </slot>
-      <slot name="links"></slot>
+      <slot name="links" />
       <div
         v-if="link?.path"
         :class="
@@ -67,33 +67,6 @@ const teaser = tv({
   },
 })
 
-const teaserIconWrapper = tv({
-  base: themedClass(
-    'teaserIconWrapperBase',
-    'shrink-0 flex size-16 items-center justify-center p-2 aspect-square mb-6 lg:mb-8',
-  ),
-  variants: {
-    colorScheme: {
-      none: themedClass('teaserIconWrapperVariantsColorSchemeNone', 'bg-white'),
-      dark: themedClass(
-        'teaserIconWrapperVariantsColorSchemeDark',
-        'bg-gray-900',
-      ),
-      light: themedClass(
-        'teaserIconWrapperVariantsColorSchemeLight',
-        'bg-gray-50',
-      ),
-      accent: themedClass(
-        'teaserIconWrapperVariantsColorSchemeAccent',
-        'bg-primary-600',
-      ),
-    },
-  },
-  defaultVariants: {
-    colorScheme: 'none',
-  },
-})
-
 const arrow = tv({
   base: themedClass('bulletPointBase', 'size-6 shrink-0 transition-transform'),
   variants: {

package/components/DesignSystem/Organisms/Testimonial.vue

@@ -2,13 +2,13 @@
   <div :class="themedClass('containerClass')">
     <DesignSystemOrganismsContentBlock
       :title="title"
-      :titleWeight="titleWeight"
-      :titleClass="
+      :title-weight="titleWeight"
+      :title-class="
         themedClass('titleClass', 'text-xl font-semibold lg:text-2xl mb-1')
       "
       :text="text"
-      :textClass="themedClass('textClass')"
-      :colorScheme="colorScheme"
+      :text-class="themedClass('textClass')"
+      :color-scheme="colorScheme"
     />
     <div
       :class="themedClass('authorContainerClass', 'mt-10 flex items-center')"
@@ -16,16 +16,16 @@
       <Media
         v-if="image"
         :media="image"
-        imageAspectRatios="1/1"
-        imageSizes="xs:60px"
-        :mediaClass="
+        image-aspect-ratios="1/1"
+        image-sizes="xs:60px"
+        :media-class="
           themedClass(
             'mediaClass',
             'mr-6 size-16 rounded-full overflow-hidden shrink-0',
           )
         "
-        :figcaptionClass="themedClass('figcaptionClass')"
-        :elementClass="themedClass('elementClass')"
+        :figcaption-class="themedClass('figcaptionClass')"
+        :element-class="themedClass('elementClass')"
       />
       <div
         :class="[
@@ -53,15 +53,15 @@
       <Media
         v-if="logo"
         :media="logo"
-        imageSizes="xs:100px"
-        :mediaClass="
+        image-sizes="xs:100px"
+        :media-class="
           themedClass(
             'logoMediaClass',
             'hidden max-w-24 max-h-12 lg:block shrink-0',
           )
         "
-        :figcaptionClass="themedClass('logoFigcaptionClass')"
-        :elementClass="themedClass('logoElementClass')"
+        :figcaption-class="themedClass('logoFigcaptionClass')"
+        :element-class="themedClass('logoElementClass')"
       />
     </div>
   </div>

package/components/DesignSystem/Organisms/TextCard.vue

@@ -10,7 +10,7 @@
       <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
         <Media
           :media="icon"
-          :mediaClass="
+          :media-class="
             themedClass(
               'mediaClass',
               'w-full h-full object-scale-down object-center',
@@ -21,18 +21,18 @@
       <slot name="content">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
-          :pretitleClass="
+          :pretitle-class="
             themedClass(
               'pretitleClass',
               '[&>p:last-of-type]:mb-0 text-base lg:text-base font-medium',
             )
           "
           :title="title"
-          :titleWeight="titleWeight"
-          :titleStyle="'heading-5'"
-          :titleClass="themedClass('titleClass', 'mb-2 font-semibold')"
+          :title-weight="titleWeight"
+          :title-style="'heading-5'"
+          :title-class="themedClass('titleClass', 'mb-2 font-semibold')"
           :text="text"
-          :textClass="themedClass('textClass', '[&>p:last-of-type]:mb-0')"
+          :text-class="themedClass('textClass', '[&>p:last-of-type]:mb-0')"
         />
       </slot>
       <slot name="links">
@@ -50,10 +50,10 @@
             :title="$texts('teaser_card.link_label', 'Read more')"
             :link="link?.path"
             :target-blank="false"
-            :buttonStyle="'minimal'"
-            :colorScheme="colorScheme"
-            :buttonClass="themedClass('buttonClass')"
-            :labelClass="themedClass('labelClass')"
+            :button-style="'minimal'"
+            :color-scheme="colorScheme"
+            :button-class="themedClass('buttonClass')"
+            :label-class="themedClass('labelClass')"
           />
         </div>
       </slot>

package/components/DesignSystem/Organisms/TimelineElement.vue

@@ -12,16 +12,16 @@
     <div :class="themedClass('firstColumnClass', textColumnClasses)">
       <DesignSystemOrganismsContentBlock
         :pretitle="pretitle"
-        :pretitleClass="themedClass('pretitleClass')"
+        :pretitle-class="themedClass('pretitleClass')"
         :title="title"
-        :titleStyle="titleStyle"
-        :titleWeight="titleWeight"
-        :titleClass="themedClass('titleClass', 'mb-2')"
+        :title-style="titleStyle"
+        :title-weight="titleWeight"
+        :title-class="themedClass('titleClass', 'mb-2')"
         :subtitle="subtitle"
-        :subtitleClass="themedClass('subtitleClass', 'font-semibold')"
+        :subtitle-class="themedClass('subtitleClass', 'font-semibold')"
         :text="text"
-        :textClass="themedClass('textClass')"
-        :colorScheme="colorScheme"
+        :text-class="themedClass('textClass')"
+        :color-scheme="colorScheme"
       />
       <BlokkliField
         name="field_icms_buttons"
@@ -41,13 +41,13 @@
       <DesignSystemMoleculesMediaSlider
         v-if="media"
         :media="media"
-        colorScheme="none"
-        :containerClass="themedClass('mediaContainerClass', 'my-0')"
-        imageSizes="xs:750px"
-        :imageFormat="imageFormat"
-        :mediaClass="themedClass('mediaClass', 'my-0')"
-        :figcaptionClass="themedClass('figcaptionClass')"
-        :elementClass="themedClass('elementClass')"
+        color-scheme="none"
+        :container-class="themedClass('mediaContainerClass', 'my-0')"
+        image-sizes="xs:750px"
+        :image-format="imageFormat"
+        :media-class="themedClass('mediaClass', 'my-0')"
+        :figcaption-class="themedClass('figcaptionClass')"
+        :element-class="themedClass('elementClass')"
       />
     </div>
   </DesignSystemAtomsGridRow>
@@ -56,6 +56,7 @@
 <script lang="ts" setup>
 import type { ColorScheme, ImageFormat } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import type { FieldListItem } from '#blokkli/types'
 
 const themedClass = useTheme('DesignSystemOrganismsTimelineElement')
 
@@ -67,7 +68,7 @@ const props = defineProps<{
   subtitle?: string
   text?: string
   media?: (MediaFragment | null)[] | undefined
-  buttons?: Array<object>
+  buttons?: Array<FieldListItem | null>
   colorScheme?: ColorScheme
   hasDecorativeLine?: boolean
   reverseColumns?: boolean
@@ -87,12 +88,12 @@ const props = defineProps<{
   imageFormat?: ImageFormat
 }>()
 
-const reverseColumns = ref(false)
+const isReversed = ref(false)
 
 watch(
   () => props.reverseColumns,
   (newVal) => {
-    reverseColumns.value = Boolean(Number(newVal))
+    isReversed.value = Boolean(Number(newVal))
   },
   { immediate: true },
 )
@@ -100,7 +101,7 @@ watch(
 const textColumnClasses = computed(() => {
   const classList = ['col-span-12', 'lg:col-span-5']
 
-  if (reverseColumns.value) {
+  if (isReversed.value) {
     classList.push('lg:order-last', 'lg:col-start-8')
   } else {
     classList.push('lg:order-first', 'lg:col-start-1')
@@ -112,7 +113,7 @@ const textColumnClasses = computed(() => {
 const mediaColumnClasses = computed(() => {
   const classList = ['col-span-12', 'lg:col-span-5']
 
-  if (reverseColumns.value) {
+  if (isReversed.value) {
     classList.push('lg:order-first', 'lg:col-start-1')
   } else {
     classList.push('lg:order-last', 'lg:col-start-8')

package/components/DesignSystem/Organisms/TwoColumnTextElement.vue

@@ -12,11 +12,11 @@
       "
     >
       <DesignSystemMoleculesTitleComposition
-        :containerClass="themedClass('titleCompositionFirstContainerClass')"
+        :container-class="themedClass('titleCompositionFirstContainerClass')"
         :pretitle="pretitle"
-        :pretitleClass="themedClass('pretitleClass')"
+        :pretitle-class="themedClass('pretitleClass')"
         :title="title"
-        :titleClass="themedClass('titleClass')"
+        :title-class="themedClass('titleClass')"
         :weight="titleWeight"
         :style="titleStyle"
       />
@@ -33,11 +33,11 @@
       "
     >
       <DesignSystemMoleculesTitleComposition
-        :containerClass="
+        :container-class="
           themedClass('titleCompositionSecondContainerClass', 'mb-2 text-base')
         "
         :subtitle="subtitle"
-        :subtitleClass="themedClass('subtitleClass')"
+        :subtitle-class="themedClass('subtitleClass')"
       />
       <div
         v-if="text"