@iqual/nuxt-icms 1.4.10 → 1.5.1

package/components/DesignSystem/Molecules/Table.vue

@@ -4,7 +4,7 @@
       :class="
         themedClass(
           'tableClass',
-          'w-full min-w-[600px] table-auto border-collapse text-left text-sm',
+          'w-full min-w-150 table-auto border-collapse text-left text-sm',
         )
       "
     >
@@ -26,11 +26,38 @@
           :class="tr({ colorScheme })"
         >
           <td
-            v-for="(value, colIndex) in row"
+            v-for="(cell, colIndex) in row"
             :key="colIndex"
             :class="td({ colorScheme })"
-            v-html="value"
-          />
+          >
+            <template v-if="Array.isArray(cell)">
+              <template v-for="(part, partIndex) in cell" :key="partIndex">
+                <span v-if="part.type === 'text'">{{ part.content }}</span>
+                <span v-else-if="part.type === 'html'" v-html="part.content" />
+                <component
+                  v-else-if="part.type === 'icon'"
+                  :is="part.component"
+                  :size="part.size || 24"
+                  :stroke-width="part.strokeWidth || 2"
+                  class="inline-block"
+                />
+              </template>
+            </template>
+            <template v-else-if="cell.type === 'html'">
+              <span v-html="cell.content" />
+            </template>
+            <template v-else-if="cell.type === 'icon'">
+              <component
+                :is="cell.component"
+                :size="cell.size || 24"
+                :stroke-width="cell.strokeWidth || 2"
+                class="inline-block"
+              />
+            </template>
+            <template v-else>
+              {{ cell.content }}
+            </template>
+          </td>
         </tr>
       </tbody>
       <caption
@@ -49,6 +76,7 @@
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { tv } from 'tailwind-variants'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import * as LucideIcons from 'lucide-vue-next'
 
 const themedClass = useTheme('DesignSystemMoleculesTable')
 
@@ -158,10 +186,55 @@ const caption = tv({
   },
 })
 
-const xIcon =
-  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 0 auto"><path d="M18 6L6 18M6 6L18 18" stroke="#D9D9D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
-const checkIcon =
-  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 0 auto;"><path d="M20.5 6L9.5 17L4.5 12" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+// Custom SVG icons registry
+const crossIcon =
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 0 auto"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+
+const customSvgIcons: Record<string, string> = {
+  cross: crossIcon,
+}
+
+// Helper to resolve icon from lucide or custom registry
+const resolveIcon = (iconName: string) => {
+  // Check if it's a custom SVG icon first
+  if (customSvgIcons[iconName]) {
+    return { type: 'custom', svg: customSvgIcons[iconName] }
+  }
+
+  // Convert kebab-case to PascalCase for Lucide icon lookup
+  const words = iconName.split('-')
+  const pascalWords = words.map(
+    (word) => word.charAt(0).toUpperCase() + word.slice(1),
+  )
+  const directPattern = pascalWords.join('')
+
+  // Try different naming patterns to find the icon
+  const patterns = [
+    directPattern, // arrow-left -> ArrowLeft
+    [...pascalWords].reverse().join(''), // arrow-left -> LeftArrow
+    directPattern.slice(0, -1), // Remove trailing 's' for singular
+    directPattern + '2', // Try with '2' suffix
+  ]
+
+  // Search through patterns
+  for (const pattern of patterns) {
+    const lucideComponent = (LucideIcons as any)[pattern]
+    if (lucideComponent) {
+      return { type: 'lucide', component: lucideComponent }
+    }
+  }
+
+  // Fallback: case-insensitive search
+  const targetLower = iconName.toLowerCase().replace(/-/g, '')
+  const allIconNames = Object.keys(LucideIcons)
+  const match = allIconNames.find((name) => name.toLowerCase() === targetLower)
+
+  if (match) {
+    return { type: 'lucide', component: (LucideIcons as any)[match] }
+  }
+
+  return null
+}
 
 const parseWeight = (weight: any) => {
   const num = parseFloat(weight)
@@ -223,13 +296,80 @@ const tableRows = computed(() => {
     .map(({ data }) => {
       const { weight, ...rowWithoutWeight } = data
       return Object.values(rowWithoutWeight).map((item) => {
-        if (item === 'check') {
-          return checkIcon
-        } else if (item === 'x') {
-          return xIcon
+        if (typeof item !== 'string') {
+          return { type: 'text', content: item }
         }
-        return item
+
+        // Find all icon patterns: :icon-name (must be at start or after space)
+        const iconPattern = /(?:^|\s):([a-zA-Z0-9-]+)(?=\s|$)/g
+        const matches = [...item.matchAll(iconPattern)]
+
+        // If no icons found, return as plain text
+        if (matches.length === 0) {
+          return { type: 'text', content: item }
+        }
+
+        // Build array of parts (text and icons mixed)
+        const parts: any[] = []
+        let lastIndex = 0
+
+        for (const match of matches) {
+          const iconName = match[1]
+          const matchStart = match.index! + (match[0].startsWith(' ') ? 1 : 0)
+          const matchEnd = match.index! + match[0].length
+
+          // Add text before icon (if any)
+          if (matchStart > lastIndex) {
+            const textBefore = item.substring(lastIndex, matchStart)
+            if (textBefore) {
+              parts.push({ type: 'text', content: textBefore })
+            }
+          }
+
+          // Try to resolve and add icon
+          const icon = resolveIcon(iconName)
+          if (icon?.type === 'custom') {
+            parts.push({ type: 'html', content: icon.svg })
+          } else if (icon?.type === 'lucide') {
+            parts.push({
+              type: 'icon',
+              component: icon.component,
+              size: 24,
+              strokeWidth: 2,
+            })
+          } else {
+            // Icon not found, keep original text
+            parts.push({ type: 'text', content: match[0] })
+          }
+
+          lastIndex = matchEnd
+        }
+
+        // Add remaining text after last icon
+        if (lastIndex < item.length) {
+          const textAfter = item.substring(lastIndex)
+          if (textAfter) {
+            parts.push({ type: 'text', content: textAfter })
+          }
+        }
+
+        return parts
       })
     })
+    .filter((row) =>
+      row.some((cell) => {
+        if (Array.isArray(cell)) {
+          return cell.some(
+            (part) =>
+              part.type === 'icon' ||
+              (part.content && String(part.content).trim() !== ''),
+          )
+        }
+        return (
+          cell.type === 'icon' ||
+          (cell.content && String(cell.content).trim() !== '')
+        )
+      }),
+    )
 })
 </script>

package/components/DesignSystem/Organisms/CallToAction.vue

@@ -0,0 +1,147 @@
+<template>
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="row({ colorScheme })">
+      <div
+        :class="
+          themedClass(
+            'firstColumnClass',
+            'col-span-12 flex items-center lg:col-span-8 lg:pr-8',
+          )
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :pretitleClass="cn(themedClass('pretitleClass'), alignmentClassList)"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :titleClass="cn(themedClass('titleClass'), alignmentClassList)"
+          :text="text"
+          :textClass="
+            cn(
+              themedClass('textClass', 'text-lg xl:text-2xl [&>p]:mb-0!'),
+              alignmentClassList,
+            )
+          "
+        />
+      </div>
+      <div
+        :class="
+          themedClass(
+            'secondColumnClass',
+            'col-span-12 flex items-center lg:col-span-3 lg:col-start-10',
+          )
+        "
+      >
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          :class="
+            cn(
+              themedClass(
+                'buttonsContainerClass',
+                'mt-6 flex min-h-6 w-full flex-wrap items-center gap-4 lg:mt-0',
+              ),
+              { droptarget: isEditing },
+              buttonAlignmentClassList,
+            )
+          "
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script setup lang="ts">
+import type { MediaFragment } from '#graphql-operations'
+import type {
+  ColorScheme,
+  AlignHorizontalFull,
+} from '@iqual/nuxt-icms/types/global'
+import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemOrganismsCallToAction')
+
+defineProps<{
+  pretitle?: string
+  title?: string
+  titleWeight?: string
+  titleClass?: string
+  subtitle?: string
+  text?: string
+  image?: MediaFragment
+  buttons?: Array<object>
+  containerClass?: string
+  rowClass?: string
+  firstColumnClass?: string
+  secondColumnClass?: string
+  thirdColumnClass?: string
+  titleStyle?: string
+  pretitleClass?: string
+  subtitleClass?: string
+  textClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
+  buttonsContainerClass?: string
+}>()
+
+const colorScheme = inject<Ref<ColorScheme>>('colorScheme')
+const spacing = inject<Ref<Record<string, string>>>('spacing')
+const isEditing = inject<Ref<boolean>>('isEditing')
+const alignHorizontalFull = inject<Ref<AlignHorizontalFull>>(
+  'alignHorizontalFull',
+)
+
+const row = tv({
+  base: themedClass('rowBase', 'px-6 py-4 md:px-10 md:py-8 lg:px-16 lg:py-12'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'rowVariantsColorSchemeNone',
+        'bg-gray-50 text-gray-950',
+      ),
+      dark: themedClass('rowVariantsColorSchemeDark', 'bg-gray-900 text-white'),
+      light: themedClass(
+        'rowVariantsColorSchemeLight',
+        'bg-white text-gray-950',
+      ),
+      accent: themedClass(
+        'rowVariantsColorSchemeAccent',
+        'bg-primary-700 text-white',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const alignmentClassList = computed(() => {
+  const classList = []
+  if (alignHorizontalFull?.value === 'center') {
+    classList.push('text-center')
+  }
+  if (alignHorizontalFull?.value === 'right') {
+    classList.push('text-right')
+  }
+  return classList.join(' ')
+})
+
+const buttonAlignmentClassList = computed(() => {
+  const classList = []
+  if (alignHorizontalFull?.value === 'center') {
+    classList.push('justify-center')
+  }
+  if (alignHorizontalFull?.value === 'right') {
+    classList.push('justify-end')
+  }
+  return classList.join(' ')
+})
+</script>

package/components/DesignSystem/Organisms/CallToActionFeature.vue

@@ -0,0 +1,129 @@
+<template>
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass', 'relative z-1')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass', 'pb-14 md:pb-0')">
+      <div
+        v-if="image"
+        :class="
+          themedClass(
+            'firstColumnClass',
+            'col-span-12 flex justify-center md:col-span-12 xl:col-span-3',
+          )
+        "
+      >
+        <Media
+          :media="image"
+          imageSizes="xs:175px xl:350px"
+          imageAspectRatios="1/1"
+          :mediaClass="themedClass('mediaClass', '-mt-12 xl:w-full')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+          :elementClass="themedClass('elementClass')"
+        />
+      </div>
+      <div
+        :class="
+          themedClass(
+            'secondColumnClass',
+            `col-span-12 flex items-center md:col-span-9 ${image ? 'xl:col-span-6' : ''}`,
+          )
+        "
+      >
+        <div
+          v-if="text"
+          :class="
+            cn(
+              themedClass(
+                'textClass',
+                `ck-content w-full py-8 text-lg md:pr-8 xl:p-8 xl:text-2xl [&>p]:mb-0! ${image ? '' : 'xl:pl-0'}`,
+              ),
+              alignmentClassList,
+            )
+          "
+          v-html="text"
+        />
+      </div>
+      <div
+        :class="
+          themedClass(
+            'thirdColumnClass',
+            'col-span-12 flex items-center justify-center md:col-span-3',
+          )
+        "
+      >
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          :class="
+            cn(
+              themedClass(
+                'buttonsContainerClass',
+                'flex min-h-6 w-full flex-wrap items-center gap-4',
+              ),
+              buttonAlignmentClassList,
+              { droptarget: isEditing },
+            )
+          "
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script setup lang="ts">
+import type { MediaFragment } from '#graphql-operations'
+import type {
+  ColorScheme,
+  AlignHorizontalFull,
+} from '@iqual/nuxt-icms/types/global'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+const themedClass = useTheme('DesignSystemOrganismsCallToActionFeature')
+
+defineProps<{
+  text?: string
+  image?: MediaFragment
+  buttons?: Array<object>
+  containerClass?: string
+  rowClass?: string
+  firstColumnClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
+  secondColumnClass?: string
+  textClass?: string
+  thirdColumnClass?: string
+  buttonsContainerClass?: string
+}>()
+
+const colorScheme = inject<Ref<ColorScheme>>('colorScheme')
+const spacing = inject<Ref<Record<string, string>>>('spacing')
+const isEditing = inject<Ref<boolean>>('isEditing')
+const alignHorizontalFull = inject<Ref<AlignHorizontalFull>>(
+  'alignHorizontalFull',
+)
+
+const alignmentClassList = computed(() => {
+  const classList = []
+  if (alignHorizontalFull?.value === 'center') {
+    classList.push('text-center')
+  }
+  if (alignHorizontalFull?.value === 'right') {
+    classList.push('text-right')
+  }
+  return classList.join(' ')
+})
+
+const buttonAlignmentClassList = computed(() => {
+  const classList = []
+  if (alignHorizontalFull?.value === 'center') {
+    classList.push('justify-center')
+  }
+  if (alignHorizontalFull?.value === 'right') {
+    classList.push('justify-end')
+  }
+  return classList.join(' ')
+})
+</script>

package/components/DesignSystem/Organisms/CallToActionFullwidth.vue

@@ -0,0 +1,132 @@
+<template>
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass', 'call-to-action relative')"
+  >
+    <DesignSystemAtomsGridRow
+      :class="
+        themedClass(
+          'rowClass',
+          'call-to-action-grid-item relative z-30 mx-auto max-w-200! grid-cols-none',
+        )
+      "
+    >
+      <div
+        :class="
+          themedClass(
+            'secondColumnClass',
+            'flex flex-col items-center justify-center',
+          )
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          containerClass="w-full"
+          :pretitle="pretitle"
+          :pretitleClass="cn(themedClass('pretitleClass'), alignmentClassList)"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :titleClass="cn(themedClass('titleClass'), alignmentClassList)"
+          :text="text"
+          :textClass="
+            cn(
+              themedClass('textClass', 'text-lg xl:text-2xl'),
+              alignmentClassList,
+            )
+          "
+        />
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          :class="
+            cn(
+              themedClass(
+                'buttonsContainerClass',
+                'mt-6 flex min-h-6 w-full flex-wrap items-center gap-4',
+              ),
+              { droptarget: isEditing },
+              buttonAlignmentClassList,
+            )
+          "
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script setup lang="ts">
+import type { MediaFragment } from '#graphql-operations'
+import type {
+  ColorScheme,
+  AlignHorizontalFull,
+} from '@iqual/nuxt-icms/types/global'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemOrganismsCallToActionFullwidth')
+
+defineProps<{
+  pretitle?: string
+  title?: string
+  titleWeight?: string
+  titleClass?: string
+  subtitle?: string
+  text?: string
+  image?: MediaFragment
+  buttons?: Array<object>
+  containerClass?: string
+  rowClass?: string
+  firstColumnClass?: string
+  secondColumnClass?: string
+  thirdColumnClass?: string
+  titleStyle?: string
+  pretitleClass?: string
+  subtitleClass?: string
+  textClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
+  buttonsContainerClass?: string
+}>()
+
+const colorScheme = inject<Ref<ColorScheme>>('colorScheme')
+const spacing = inject<Ref<Record<string, string>>>('spacing')
+const isEditing = inject<Ref<boolean>>('isEditing')
+const alignHorizontalFull = inject<Ref<AlignHorizontalFull>>(
+  'alignHorizontalFull',
+)
+
+const alignmentClassList = computed(() => {
+  const classList = []
+  if (alignHorizontalFull?.value === 'center') {
+    classList.push('text-center')
+  }
+  if (alignHorizontalFull?.value === 'right') {
+    classList.push('text-right')
+  }
+  return classList.join(' ')
+})
+
+const buttonAlignmentClassList = computed(() => {
+  const classList = []
+  if (alignHorizontalFull?.value === 'center') {
+    classList.push('justify-center')
+  }
+  if (alignHorizontalFull?.value === 'right') {
+    classList.push('justify-end')
+  }
+  return classList.join(' ')
+})
+</script>
+
+<style lang="css" scoped>
+.call-to-action {
+  display: grid;
+  grid-template-areas: 'content';
+}
+
+.call-to-action-grid-item {
+  grid-area: content;
+}
+</style>

package/components/DesignSystem/Organisms/ContentBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="themedClass('containerClass')">
+  <div :class="themedClass('containerClass', 'w-full')">
     <DesignSystemMoleculesTitleComposition
       :pretitle="pretitle"
       :pretitleClass="themedClass('pretitleClass')"
@@ -14,7 +14,7 @@
     <DesignSystemMoleculesMediaSlider
       v-if="media && media.length"
       :media="media"
-      :imageAspectRatios="imageAspectRatios"
+      :imageFormat="imageFormat"
       :imageSizes="imageSizes"
       :colorScheme="colorScheme"
       :mediaClass="themedClass('mediaClass')"
@@ -28,7 +28,7 @@
         cn(
           themedClass(
             'textClass',
-            'ck-content hyphens-auto text-base lg:hyphens-none',
+            'ck-content text-base hyphens-auto lg:hyphens-none',
           ),
           textColumnClass,
         )
@@ -43,13 +43,12 @@
       :buttonAlignment="buttonAlignment"
       :buttonClass="themedClass('buttonClass')"
       :labelClass="themedClass('labelClass')"
-      :sublineClass="themedClass('sublineClass')"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { ColorScheme, ImageFormat } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
@@ -59,14 +58,12 @@ const themedClass = useTheme('DesignSystemOrganismsContentBlock')
 type Link = {
   props: {
     label?: string
-    subline?: string
     link?: {
       uri: {
         path: string
       }
     }
     params?: string
-    buttonStyle?: string
     targetBlank?: boolean
     title?: string
   }
@@ -91,6 +88,7 @@ const props = defineProps<{
   imageAspectRatios?: string
   imageSizes?: string
   imageLoading?: 'lazy' | 'eager' | undefined
+  imageFormat?: ImageFormat
   mediaClass?: string
   elementClass?: string
   figcaptionClass?: string
@@ -105,7 +103,6 @@ const props = defineProps<{
   containerClass?: string
   buttonClass?: string
   labelClass?: string
-  sublineClass?: string
 }>()
 
 const textColumnClass = computed(() => {