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

package/components/DesignSystem/README.md

@@ -1,6 +1,8 @@
 # ICMS Design System Documentation
 
-The ICMS Design System is built following Atomic Design principles with Vue 3, Nuxt 3, TypeScript, and Tailwind CSS. It provides a comprehensive set of reusable components organized into Atoms, Molecules, and Organisms.
+The ICMS Design System is built following Atomic Design principles with Vue 3,
+Nuxt 3, TypeScript, and Tailwind CSS. It provides a comprehensive set of
+reusable components organized into Atoms, Molecules, and Organisms.
 
 ## Table of Contents
 
@@ -21,7 +23,8 @@ The design system follows **Atomic Design methodology**:
 
 - **Atoms**: Basic building blocks (buttons, inputs, containers)
 - **Molecules**: Simple combinations of atoms (cards, forms, navigation items)
-- **Organisms**: Complex components combining molecules and atoms (headers, sections, content blocks)
+- **Organisms**: Complex components combining molecules and atoms (headers,
+  sections, content blocks)
 
 ### File Structure
 
@@ -45,49 +48,49 @@ components/DesignSystem/
 ### Key Dependencies
 
 ```typescript
-import { tv } from 'tailwind-variants'  // Component variants
-import cn from '@iqual/nuxt-icms/composables/useCn'  // Class merging
+import { tv } from 'tailwind-variants' // Component variants
+import cn from '@iqual/nuxt-icms/composables/useCn' // Class merging
 ```
 
 ## Component Hierarchy
 
 ### Atoms
 
-| Component | Purpose | Key Features |
-|-----------|---------|--------------|
-| `Button.vue` | Interactive elements | Multiple styles, color schemes, link integration |
-| `Caption.vue` | Text captions | Typography variants |
-| `Container.vue` | Layout wrapper | Responsive containers |
-| `GridRow.vue` | Grid layout | CSS Grid implementation |
-| `LinkListItem.vue` | Navigation items | Styled list items |
+| Component          | Purpose              | Key Features                                     |
+| ------------------ | -------------------- | ------------------------------------------------ |
+| `Button.vue`       | Interactive elements | Multiple styles, color schemes, link integration |
+| `Caption.vue`      | Text captions        | Typography variants                              |
+| `Container.vue`    | Layout wrapper       | Responsive containers                            |
+| `GridRow.vue`      | Grid layout          | CSS Grid implementation                          |
+| `LinkListItem.vue` | Navigation items     | Styled list items                                |
 
 ### Molecules
 
-| Component | Purpose | Key Features |
-|-----------|---------|--------------|
-| `ButtonGroup.vue` | Button collections | Grouped button layout |
-| `Card.vue` | Content cards | Media integration, color schemes |
-| `IconText.vue` | Icon + text combinations | Flexible icon positioning |
-| `MediaLightbox.vue` | Media overlay | Carousel, keyboard navigation |
-| `MediaSlider.vue` | Media carousels | Touch/swipe support |
-| `Partnership.vue` | Partner displays | Logo arrangements |
-| `Table.vue` | Data tables | Responsive table layout |
-| `TitleComposition.vue` | Heading combinations | Semantic heading structure |
-| `iFrame.vue` | Embedded content | Responsive iframe wrapper |
+| Component              | Purpose                  | Key Features                     |
+| ---------------------- | ------------------------ | -------------------------------- |
+| `ButtonGroup.vue`      | Button collections       | Grouped button layout            |
+| `Card.vue`             | Content cards            | Media integration, color schemes |
+| `IconText.vue`         | Icon + text combinations | Flexible icon positioning        |
+| `MediaLightbox.vue`    | Media overlay            | Carousel, keyboard navigation    |
+| `MediaSlider.vue`      | Media carousels          | Touch/swipe support              |
+| `Partnership.vue`      | Partner displays         | Logo arrangements                |
+| `Table.vue`            | Data tables              | Responsive table layout          |
+| `TitleComposition.vue` | Heading combinations     | Semantic heading structure       |
+| `iFrame.vue`           | Embedded content         | Responsive iframe wrapper        |
 
 ### Organisms
 
-| Component | Purpose | Key Features |
-|-----------|---------|--------------|
-| `ContentBlock.vue` | Rich content | Flexible content layout |
-| `FlipTeaser.vue` | Interactive cards | Hover/click animations |
-| `LogoElement.vue` | Brand display | Logo arrangements |
-| `Map.vue` | Geographic content | Map integration |
-| `TeamElement.vue` | People showcase | Team member cards |
-| `TeaserCard.vue` | Content previews | Image + text teasers |
-| `Testimonial.vue` | User feedback | Quote formatting |
-| `TimelineElement.vue` | Chronological content | Timeline layout |
-| `TwoColumnTextElement.vue` | Text layout | Multi-column text |
+| Component                  | Purpose               | Key Features            |
+| -------------------------- | --------------------- | ----------------------- |
+| `ContentBlock.vue`         | Rich content          | Flexible content layout |
+| `FlipTeaser.vue`           | Interactive cards     | Hover/click animations  |
+| `LogoElement.vue`          | Brand display         | Logo arrangements       |
+| `Map.vue`                  | Geographic content    | Map integration         |
+| `TeamElement.vue`          | People showcase       | Team member cards       |
+| `TeaserCard.vue`           | Content previews      | Image + text teasers    |
+| `Testimonial.vue`          | User feedback         | Quote formatting        |
+| `TimelineElement.vue`      | Chronological content | Timeline layout         |
+| `TwoColumnTextElement.vue` | Text layout           | Multi-column text       |
 
 ## Atoms
 
@@ -108,6 +111,7 @@ The foundational interactive component with comprehensive styling options.
 ```
 
 **Props:**
+
 - `label` (string): Button text
 - `subline` (string): Optional subtitle
 - `link` (string): Navigation target
@@ -117,6 +121,7 @@ The foundational interactive component with comprehensive styling options.
 - `textAlignment` (string): `left`, `center`, `right`
 
 **Variants:**
+
 - **Normal**: Standard button appearance
 - **Focus**: Emphasized styling
 - **Minimal**: Text-only, underlined
@@ -132,6 +137,7 @@ Responsive layout wrapper with consistent spacing.
 ```
 
 **Features:**
+
 - Responsive max-width
 - Consistent horizontal padding
 - Container query support
@@ -166,6 +172,7 @@ Versatile content container with media support.
 ```
 
 **Props:**
+
 - `title` (string): Card heading
 - `titleWeight` (string): Font weight
 - `text` (string): Description
@@ -174,6 +181,7 @@ Versatile content container with media support.
 - `colorScheme` (string): Color variant
 
 **Color Schemes:**
+
 - `none`: Default background
 - `dark`: Dark theme
 - `light`: Light theme
@@ -194,6 +202,7 @@ Advanced media overlay with carousel functionality.
 ```
 
 **Features:**
+
 - Multi-media support (images, videos, remote videos)
 - Keyboard navigation (arrow keys, escape)
 - Touch/swipe gestures
@@ -202,11 +211,13 @@ Advanced media overlay with carousel functionality.
 - Error handling
 
 **Props:**
+
 - `mediaObjects` (MediaFragment[]): Media array
 - `currentIndex` (number): Starting position
 - `isOpen` (boolean): Visibility state
 
 **Events:**
+
 - `close`: Lightbox closed
 - `navigate`: Index changed
 
@@ -223,6 +234,7 @@ Touch-enabled media carousel for galleries.
 ```
 
 **Features:**
+
 - Touch/swipe support
 - Responsive image sizing
 - Automatic thumbnail generation
@@ -248,6 +260,7 @@ Content preview component with image and text.
 ```
 
 **Props:**
+
 - `image` (MediaFragment): Preview image
 - `pretitle` (string): Category/tag
 - `title` (string): Main heading
@@ -273,6 +286,7 @@ Flexible content container for rich text and media.
 ```
 
 **Features:**
+
 - Semantic heading hierarchy
 - Rich text support
 - Flexible typography scaling
@@ -297,7 +311,11 @@ Utility for merging Tailwind classes.
 ```typescript
 import cn from '@iqual/nuxt-icms/composables/useCn'
 
-const classes = cn('base-class', conditionalClass && 'conditional', props.className)
+const classes = cn(
+  'base-class',
+  conditionalClass && 'conditional',
+  props.className,
+)
 ```
 
 ### useIsMobile
@@ -316,7 +334,7 @@ The system supports four primary color schemes:
 
 1. **None**: Default/transparent backgrounds
 2. **Dark**: Dark theme with light text
-3. **Light**: Light backgrounds with dark text  
+3. **Light**: Light backgrounds with dark text
 4. **Accent**: Brand colors and highlights
 
 ### Responsive Design
@@ -397,7 +415,7 @@ Consistent spacing using Tailwind's spacing scale:
       title-style="heading-1"
       text="<p>Page content...</p>"
     />
-    
+
     <DesignSystemAtomsGridRow :columns="3">
       <DesignSystemMoleculesCard
         v-for="item in items"
@@ -420,7 +438,7 @@ Consistent spacing using Tailwind's spacing scale:
     :media-objects="galleryImages"
     @click="openLightbox"
   />
-  
+
   <DesignSystemMoleculesMediaLightbox
     :media-objects="galleryImages"
     :current-index="currentIndex"
@@ -454,14 +472,14 @@ const handleImageClick = (index: number) => {
       color-scheme="accent"
       text-alignment="center"
     />
-    
+
     <!-- Secondary action -->
     <DesignSystemAtomsButton
       label="Learn More"
       style="normal"
       color-scheme="light"
     />
-    
+
     <!-- Minimal link -->
     <DesignSystemAtomsButton
       label="Skip this step"
@@ -486,4 +504,5 @@ When adding new components:
 6. Test across different screen sizes
 7. Ensure accessibility compliance
 
-For questions or contributions, refer to the project's main documentation or contact the development team.
+For questions or contributions, refer to the project's main documentation or
+contact the development team.

package/components/Drupal/Breadcrumb/index.vue

@@ -1,7 +1,15 @@
 <template>
   <div :class="themedClass('containerClass', 'container mb-[30px] h-6 pt-20')">
-    <section v-if="links.length" class="relative mobile-only:overflow-hidden" :class="themedClass('sectionClass')">
-      <nav class="breadcrumb" aria-label="breadcrumbs" :class="themedClass('navClass')">
+    <section
+      v-if="links.length"
+      class="mobile-only:overflow-hidden relative"
+      :class="themedClass('sectionClass')"
+    >
+      <nav
+        class="breadcrumb"
+        aria-label="breadcrumbs"
+        :class="themedClass('navClass')"
+      >
         <ol
           ref="list"
           itemscope
@@ -17,7 +25,12 @@
             itemtype="http://schema.org/ListItem"
             :class="themedClass('listItemClass')"
           >
-            <component :is="link.tag" v-bind="link.props" itemprop="item" :class="themedClass('linkClass')">
+            <component
+              :is="link.tag"
+              v-bind="link.props"
+              itemprop="item"
+              :class="themedClass('linkClass')"
+            >
               <span itemprop="name" :class="themedClass('linkLabelClass')">
                 {{ link.title }}
               </span>
@@ -31,13 +44,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { BreadcrumbFragment } from '#graphql-operations'
+import type { BreadcrumbLink } from '@iqual/nuxt-icms/types/breadcrumb'
 import type { Langcode } from '#nuxt-language-negotiation/config'
 import { NuxtLink } from '#components'
 const themedClass = useTheme('DrupalBreadcrumb')
 
 const props = defineProps<{
-  links: BreadcrumbFragment[]
+  links: BreadcrumbLink[]
   language?: Langcode
   containerClass?: string
   sectionClass?: string
@@ -74,21 +87,21 @@ watch(linksComputed, () => {
 <style lang="postcss">
 .breadcrumb {
   li {
-    height: calc(var(--spacing)*6);
-    color: color-mix(in srgb, oklch(21% .034 264.665) 60%, transparent);
+    height: calc(var(--spacing) * 6);
+    color: color-mix(in srgb, oklch(21% 0.034 264.665) 60%, transparent);
     &:not(:first-child):before {
       content: '›';
       font-size: var(--text-2xl);
-      margin-inline-end: calc(var(--spacing)*4);
-      margin-inline-start: calc(var(--spacing)*4);
+      margin-inline-end: calc(var(--spacing) * 4);
+      margin-inline-start: calc(var(--spacing) * 4);
       line-height: 0;
     }
   }
 
   a {
-    color: color-mix(in srgb, oklch(21% .034 264.665) 60%, transparent);
-    &:hover{
-      color: var(--color-gray-700)
+    color: color-mix(in srgb, oklch(21% 0.034 264.665) 60%, transparent);
+    &:hover {
+      color: var(--color-gray-700);
     }
   }
 }

package/components/Drupal/Messages/index.vue

@@ -7,11 +7,16 @@
     <div
       v-for="(message, i) in messages"
       :key="i"
-      class="flex items-center justify-between "
-      :class="cn(themedClass('innerClass', 'rounded-sm p-6 font-medium'), classes[message.type])"
+      class="flex items-center justify-between"
+      :class="
+        cn(
+          themedClass('innerClass', 'rounded-sm p-6 font-medium'),
+          classes[message.type],
+        )
+      "
       @click="removeMessage(i)"
     >
-      <div v-html="message.message" :class="themedClass('messageClass')"/>
+      <div :class="themedClass('messageClass')" v-html="message.message" />
       <SpriteSymbol name="close" :class="themedClass('iconClass', 'size-6')" />
     </div>
   </div>
@@ -23,7 +28,7 @@ import cn from '@iqual/nuxt-icms/composables/useCn'
 
 const themedClass = useTheme('DrupalMessages')
 
-const props = defineProps<{
+defineProps<{
   wrapperClass?: string
   innerClass?: string
   messageClass?: string