@iqual/nuxt-icms 1.1.0 → 1.2.2

package/components/Paragraph/Teasers/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-4">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
@@ -11,7 +11,7 @@
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 md:col-span-6 md:col-start-7">
+      <div class="col-span-12 md:col-span-9">
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
           :text="text"
@@ -23,18 +23,7 @@
     </DesignSystemAtomsGridRow>
 
     <DesignSystemAtomsGridRow class="grid-4-col mt-10 md:mt-20">
-      <DesignSystemOrganismsTeaserCard
-        v-for="teaser in teasers"
-        :image="teaser?.image || teaser?.mainImage"
-        :pretitle="teaser?.pretitle"
-        :title="teaser?.title || teaser?.mainTitle"
-        :titleWeight="childTitleWeight"
-        :subtitle="teaser?.subtitle"
-        :text="teaser?.text || teaser?.mainText"
-        :link="teaser?.link?.path"
-        :link-label="teaser?.linkLabel"
-        :colorScheme="colorScheme"
-      />
+      <component v-for="teaser in teasers" :is="teaserComponent(teaser?.bundle)"  v-bind="teaser" />
     </DesignSystemAtomsGridRow>
   </DesignSystemAtomsContainer>
 </template>
@@ -44,7 +33,7 @@ import type { ParagraphIcmsLayoutTeasersFragment } from '#graphql-operations'
 
 const props = defineProps<ParagraphIcmsLayoutTeasersFragment>()
 
-const { options, parentType } = useAttrs().blokkliData
+const { options, parentType } = useAttrs().blokkliData as any
 
 const colorScheme = computed(() => {
   return options.value.colorScheme
@@ -55,4 +44,12 @@ const spacing = computed(() => {
 })
 
 const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+const { $resolveDynamicEntityComponent } = useNuxtApp()
+const teaserComponent = (bundle) => {
+  return $resolveDynamicEntityComponent(`${bundle}Teaser`)
+}
+
+provide('colorScheme', colorScheme)
+provide('titleWeight', childTitleWeight)
 </script>

package/components/Paragraph/TextMedia/index.vue

@@ -1,7 +1,6 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-
       <div :class="textColumnClassList">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -42,30 +41,38 @@ defineProps<ParagraphIcmsLayoutTextMediaFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const reverseColumns = ref(false)
+
+watch(
+  () => options.value.reverseColumns,
+  (newVal) => {
+    reverseColumns.value = Boolean(Number(newVal))
+  },
+  { immediate: true },
+)
+
 const textColumnClassList = computed(() => {
   const classList = ['col-span-12']
+  const width = options.value.textWidth
 
-  if (options.value.textWidth === 'medium') {
+  if (width === 'medium') {
     classList.push('md:col-span-6')
-  } else if (options.value.textWidth === 'narrow') {
-    classList.push('md:col-span-4')
+  } else if (width === 'narrow') {
+    classList.push('md:col-span-5')
   } else {
-    classList.push('md:col-span-8')
+    classList.push('md:col-span-7')
   }
 
-  if (options.value.textAlign === 'right') {
-    classList.push(
-      'md:order-last',
-      options.value.textWidth === 'medium'
-        ? 'md:col-start-7 md:pl-6'
-        : options.value.textWidth === 'narrow'
-          ? 'md:col-start-8'
-          : 'md:col-start-5',
-    )
-  }
-  
-  if (options.value.textAlign === 'left' && options.value.textWidth === 'medium') {
-    classList.push('md:pr-6')
+  if (reverseColumns.value) {
+    classList.push('md:order-last')
+
+    if (width === 'medium') {
+      classList.push('md:col-start-7')
+    } else if (width === 'narrow') {
+      classList.push('md:col-start-8')
+    } else {
+      classList.push('md:col-start-6')
+    }
   }
 
   return classList
@@ -73,28 +80,28 @@ const textColumnClassList = computed(() => {
 
 const imageColumnClassList = computed(() => {
   const classList = ['col-span-12']
+  const width = options.value.textWidth
 
-  if (options.value.textWidth === 'medium') {
+  if (width === 'medium') {
     classList.push('md:col-span-6')
-  } else if (options.value.textWidth === 'narrow') {
+  } else if (width === 'narrow') {
     classList.push('md:col-span-7')
   } else {
-    classList.push('md:col-span-3')
+    classList.push('md:col-span-5')
   }
 
-  if (options.value.textAlign === 'left') {
-    classList.push(
-      'md:order-last',
-      options.value.textWidth === 'medium'
-        ? 'md:col-start-7 md:pl-6'
-        : options.value.textWidth === 'narrow'
-          ? 'md:col-start-6'
-          : 'md:col-start-10',
-    )
-  }
-
-  if (options.value.textAlign === 'right' && options.value.textWidth === 'medium') {
+  if (reverseColumns.value) {
     classList.push('md:pr-6')
+  } else {
+    classList.push('md:order-last', 'md:pl-6')
+
+    if (width === 'medium') {
+      classList.push('md:col-start-7')
+    } else if (width === 'narrow') {
+      classList.push('md:col-start-6')
+    } else {
+      classList.push('md:col-start-8')
+    }
   }
 
   return classList

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

@@ -23,7 +23,7 @@ defineProps<ParagraphIcmsTimelineElementFragment>()
 const { options, isEditing } = useAttrs().blokkliData
 
 const reverseColumns = computed(() => {
-  return options.value.reverseColumns
+  return Boolean(Number(options.value.reverseColumns))
 })
 
 const colorScheme = inject<string>('colorScheme')

package/components/Paragraph/Timeline/Layout/fragment.graphql

@@ -1,4 +1,5 @@
 fragment paragraphIcmsLayoutTimeline on ParagraphIcmsLayoutTimeline {
+  id
   pretitle: fieldIcmsPretitle
   title: fieldIcmsTitle
   titleStyle: fieldIcmsTitleStyle

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

@@ -1,16 +1,19 @@
 <template>
-  <DesignSystemAtomsContainer :color-scheme="colorScheme" :spacing="spacing">
+  <DesignSystemAtomsContainer :color-scheme="colorScheme" :spacing="spacing" :data-timeline="id">
     <DesignSystemAtomsGridRow v-if="pretitle || title || subtitle || text">
-      <div class="col-span-12">
+      <div class="col-span-12 md:col-span-12">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
           :titleStyle="titleStyle"
           :titleWeight="titleWeight"
           :subtitle="subtitle"
-          :text="text"
           :colorScheme="colorScheme"
-          :hasDecorativeLine="Boolean(subtitle || text)"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-9">
+        <DesignSystemOrganismsContentBlock
+          :text="text"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -172,8 +175,8 @@ const scrollToElement = (element: HTMLElement) => {
   })
 }
 
-const getTimelineElements = () =>
-  document.querySelectorAll('[data-timeline-element]')
+const getTimelineElements = () => 
+  document.querySelectorAll(`[data-timeline="${props.id}"] [data-timeline-element]`)
 
 const handleAnchorLinkClick = (index: number) => {
   if (isMobile.value) {

package/components/Paragraph/iFrame/index.vue

@@ -1,11 +1,16 @@
 <template>
   <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
     <DesignSystemAtomsGridRow>
-      <div :class="textWrapperClassList">
+      <div :class="titleWrapperClassList">
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
           :title="title"
           :titleWeight="titleWeight"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div :class="textWrapperClassList">
+        <DesignSystemOrganismsContentBlock
           :text="text"
           :colorScheme="colorScheme"
         />
@@ -28,7 +33,7 @@ const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
-const textWrapperClassList = computed(() => {
+const titleWrapperClassList = computed(() => {
   if (options.value.textWidth === 'medium') {
     return ['col-span-8', 'col-start-3']
   } else if (options.value.textWidth === 'narrow') {
@@ -37,6 +42,15 @@ const textWrapperClassList = computed(() => {
   return ['col-span-12']
 })
 
+const textWrapperClassList = computed(() => {
+  if (options.value.textWidth === 'medium') {
+    return ['col-span-8', 'col-start-3']
+  } else if (options.value.textWidth === 'narrow') {
+    return ['col-span-8', 'col-start-3', 'md:col-span-6', 'md:col-start-4']
+  }
+  return ['col-span-9']
+})
+
 const colorScheme = computed(() => {
   return options.value.colorScheme
 })

package/components/Search/Facets/FacetDropdownUI.vue

@@ -0,0 +1,222 @@
+<script setup lang="ts">
+
+import Popover from '@/components/ui/popover/Popover.vue'
+import PopoverContent from '@/components/ui/popover/PopoverContent.vue'
+import PopoverTrigger from '@/components/ui/popover/PopoverTrigger.vue'
+
+// Incoming facet shape from GraphQL API.
+export interface GraphQLFacetItem {
+  field: string
+  label: string
+  filter: {
+    id: string
+    label: string
+  }
+  count: number
+}
+
+// Internal normalized option shape (label == filter by default; could be mapped later)
+interface NormalizedFacetOption { value: string; label: string; count: number }
+
+type FacetSelections = Record<string, string[]>
+
+const props = defineProps<{
+  facets?: GraphQLFacetItem[]
+  /** grouped selections keyed by facet field */
+  modelValue?: FacetSelections
+  placeholder?: string
+  label?: string
+  /** Total count of results for display */
+  totalCount?: number
+  /** Currently displayed count for display */
+  displayedCount?: number
+  /** Loading state */
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [FacetSelections]
+  /** Emitted whenever a selection changes so parent can notify siblings */
+  'facets-change': [FacetSelections]
+}>()
+
+// Simple deep clone utility (data is plain: Record<string, string[]>)
+function cloneSelections(val?: FacetSelections | null): FacetSelections {
+  try {
+    return val ? JSON.parse(JSON.stringify(val)) : {}
+  } catch {
+    // Fallback shallow copy in worst case.
+    return Object.assign({}, val || {}) as FacetSelections
+  }
+}
+
+// Reactive selections
+const selections = ref<FacetSelections>(cloneSelections(props.modelValue))
+
+// Track open state for each popover to handle chevron rotation
+const openPopovers = ref<Record<string, boolean>>({})
+
+// Group facets by field.
+const grouped = computed(() => {
+  // Map key: { field, label } (label is fieldLabel if present, else field)
+  const map = new Map<{ field: string, label: string }, NormalizedFacetOption[]>()
+  const source = props.facets || []
+  for (const item of source) {
+    const field = item.field
+    const key = Array.from(map.keys()).find(k => k.field === field) || { field, label: item.label }
+    if (!map.has(key)) map.set(key, [])
+    map.get(key)!.push({ 
+      "value": item.filter.id, 
+      "label": item.filter.label, 
+      "count": item.count ,
+    })
+  }
+  // Sort each group alphabetically by label for stable UI.
+  for (const [, arr] of map) arr.sort((a, b) => a.label.localeCompare(b.label))
+  return map
+})
+
+// Flatten for utility lookups.
+const optionMap = computed(() => {
+  // Map key: filter string -> NormalizedFacetOption
+  const map = new Map<string, NormalizedFacetOption>()
+  for (const [, arr] of grouped.value) {
+    for (const opt of arr) {
+      map.set(opt.value, opt)
+    }
+  }
+  return map
+})
+
+// Stable array of [field, options[]] to simplify template & avoid calling entries() on undefined.
+// Array of [{ filter, label }, options[]] for template
+const groupEntries = computed(() => Array.from(grouped.value?.entries?.() || []))
+
+// Per-field trigger labels
+function fieldTriggerLabel(fieldData: { field: string, label: string }) {
+  let field: string = fieldData.field
+  let label: string = fieldData.label
+  const arr = selections.value[field] || []
+  if (!arr.length) return props.placeholder || `Select ${label}`
+  if (arr.length === 1) return optionMap.value.get(arr[0])?.label || arr[0]
+  return `${arr.length} selected`
+}
+
+function toggle(field: string, value: string) {
+  if (!selections.value[field]) selections.value[field] = []
+  const arr = selections.value[field]
+  const idx = arr.indexOf(value)
+  if (idx === -1) arr.push(value)
+  else arr.splice(idx, 1)
+  // Remove empty arrays to keep payload small.
+  if (!arr.length) delete selections.value[field]
+  emitAll()
+}
+
+function clearField(field: string) {
+  if (selections.value[field]) {
+    delete selections.value[field]
+    emitAll()
+  }
+}
+
+function clearAll() {
+  if (Object.keys(selections.value || {}).length) {
+    selections.value = {}
+    emitAll()
+  }
+}
+
+function emitAll() {
+  // Clone to avoid mutation issues in parent watchers.
+  const base = selections.value && typeof selections.value === 'object' ? selections.value : {}
+  const payload: FacetSelections = JSON.parse(JSON.stringify(base))
+  emit('update:modelValue', payload)
+  emit('facets-change', payload)
+}
+
+// Keep internal selections in sync if modelValue changes externally.
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) selections.value = cloneSelections(val)
+  },
+  { deep: true }
+)
+</script>
+
+<template>
+  <div class="facets-ui space-y-4" v-if="groupEntries.length">
+    <!-- Clear Filters Button -->
+    <div class="flex">
+      <Button
+        variant="ghost"
+        size="sm"
+        :disabled="!(selections && Object.keys(selections || {}).length)"
+        @click="clearAll"
+        class="flex items-center gap-2"
+      >
+        {{ $texts('listing.clear_filters', 'Clear all filters') }}
+      </Button>
+    </div>
+
+    <!-- Facet Groups -->
+    <div class="flex flex-wrap gap-4">
+      <template v-for="([key, opts]) in groupEntries" :key="key.field + '-' + key.label">
+        <div class="w-72">
+          <Label class="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ key.label }}</Label>
+          <Popover @update:open="(open: boolean) => openPopovers[key.field] = open">
+            <PopoverTrigger as-child>
+              <Button variant="outline" class="w-full justify-between" :aria-label="`Facet ${key.label}`">
+                <span>{{ fieldTriggerLabel(key) }}</span>
+                <SpriteSymbol
+                  name="chevron-down"
+                  aria-hidden="true"
+                  :class="[
+                    'size-7 cursor-pointer text-black transition-all duration-300 group-hover/main:text-primary-500',
+                    openPopovers[key.field] ? 'rotate-180' : 'rotate-0'
+                  ]"
+                />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent class="p-0 w-72 bg-white" align="start">
+              <div class="max-h-72 overflow-y-auto py-1">
+                <template v-for="opt in opts" :key="opt.value">
+                  <button
+                    type="button"
+                    class="flex w-full items-center gap-3 px-3 py-2 text-left text-sm hover:bg-muted/60 focus:bg-muted/70 focus:outline-none"
+                    @click="toggle(key.field, opt.value)"
+                  >
+                    <Checkbox
+                      :checked="selections[key.field]?.includes(opt.value)"
+                      @update:checked="toggle(key.field, opt.value)"
+                      class="pointer-events-none"
+                    />
+                    <span class="flex-1 truncate">{{ opt.label }}</span>
+                    <span class="tabular-nums text-muted-foreground text-xs">{{ opt.count }}</span>
+                  </button>
+                </template>
+              </div>
+              <div class="flex items-center justify-between border-t px-2 py-1.5 gap-2">
+                <Button size="sm" variant="ghost" :disabled="!(selections[key.field] && selections[key.field].length)" @click="clearField(key.field)">Clear</Button>
+              </div>
+            </PopoverContent>
+            </Popover>
+        </div>
+      </template>
+    </div>
+
+    <!-- Results Counter -->
+    <div v-if="totalCount !== undefined" class="mb-4">
+      <div class="text-lg font-medium text-gray-900">
+        <span v-if="loading">Loading...</span>
+        <span v-else>
+          {{ totalCount }} {{ totalCount === 1 ? $texts('listing.result', 'result') : $texts('listing.results', 'results') }}
+          <span v-if="displayedCount && displayedCount < totalCount" class="text-sm font-normal text-gray-600">
+            ({{ $texts('listing.showing', 'result') }} {{ displayedCount }})
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>