@iqual/nuxt-icms 1.1.0 → 1.2.1

package/components/Section/Header/LanguageDropdown.vue

@@ -1,92 +1,79 @@
 <template>
-  <div v-if="languageLinks.length">
-    <ClientOnly>
-      <div
-        class="group relative z-40 mb-6 flex h-full items-center lg:mb-0 lg:p-0 lg:pl-8"
-        @mouseenter="!isMobile && (langSwitchDropdownOpen = true)"
-        @mouseleave="!isMobile && (langSwitchDropdownOpen = false)"
-        @click="isMobile && (langSwitchDropdownOpen = !langSwitchDropdownOpen)"
+  <ClientOnly>
+    <div
+      class="group relative z-40 mb-6 flex h-full items-center lg:mb-0 lg:p-0 lg:pl-8"
+      @mouseenter="!isMobile && (langSwitchDropdownOpen = true)"
+      @mouseleave="!isMobile && (langSwitchDropdownOpen = false)"
+      @click="isMobile && (langSwitchDropdownOpen = !langSwitchDropdownOpen)"
+    >
+      <button
+        class="flex items-center gap-1"
+        aria-haspopup="true"
+        :aria-expanded="langSwitchDropdownOpen"
+        aria-controls="language-dropdown"
       >
-        <button
-          class="flex items-center gap-1"
-          aria-haspopup="true"
-          :aria-expanded="langSwitchDropdownOpen"
-          aria-controls="language-dropdown"
+        <span
+          class="font-medium group-hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-250 motion-safe:ease-in-out"
+          :class="{
+            'text-primary-500': langSwitchDropdownOpen,
+          }"
         >
-          <span
-            class="font-medium group-hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-250 motion-safe:ease-in-out"
-            :class="{
-              'text-primary-500': langSwitchDropdownOpen,
-            }"
-          >
-            {{ currentLanguage.toUpperCase() }}
-          </span>
-          <SpriteSymbol
-            name="chevron-down"
-            class="size-4 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
-            :class="{
-              'rotate-180': langSwitchDropdownOpen,
-            }"
-          />
-        </button>
-        <div
-          v-show="langSwitchDropdownOpen"
-          class="absolute left-0 top-full pt-2 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out lg:left-auto lg:right-0 lg:pt-4"
+          {{ currentLanguage.toUpperCase() }}
+        </span>
+        <SpriteSymbol
+          name="chevron-down"
+          class="size-4 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
+          :class="{
+            'rotate-180': langSwitchDropdownOpen,
+          }"
+        />
+      </button>
+      <div
+        v-show="langSwitchDropdownOpen"
+        class="absolute left-0 top-full pt-2 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out lg:left-auto lg:right-0 lg:pt-4"
+      >
+        <ul
+          role="menu"
+          id="language-dropdown"
+          class="border border-gray-100 bg-white"
         >
-          <ul
-            role="menu"
-            id="language-dropdown"
-            class="border border-gray-100 bg-white"
-          >
-            <li v-for="(lang, i) in languageLinks" :key="`lang_${i}`">
-              <NuxtLink
-                role="menuitem"
-                :to="lang.to"
-                :title="getLanguageName(lang.code)"
-                class="flex items-center px-4 py-3 text-sm font-medium hover:text-primary-500 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
-                @click="onLangDropdownLinkClick"
-              >
-                {{ getLanguageName(lang.code) }}
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-        <transition name="fade"> </transition>
+          <li v-for="(lang, i) in links" :key="`lang_${i}`">
+            <NuxtLink
+              v-if="lang.enabled"
+              role="menuitem"
+              :to="lang.to"
+              :title="lang.label"
+              class="flex items-center px-4 py-3 text-sm font-medium whitespace-nowrap hover:text-primary-500 motion-safe:transition-all motion-safe:duration-250 motion-safe:ease-in-out"
+              @click="onLangDropdownLinkClick"
+            >
+              {{ lang.label }}
+            </NuxtLink>
+            <span
+              v-else
+              class="flex items-center px-4 py-3 text-sm font-medium whitespace-nowrap text-gray-100"
+            >
+              {{ lang.label }}
+            </span>
+          </li>
+        </ul>
       </div>
-    </ClientOnly>
-  </div>
+      <transition name="fade"> </transition>
+    </div>
+  </ClientOnly>
+
 </template>
 
 <script lang="ts" setup>
-type LanguageLink = {
-  code: string
-  active: boolean
-  to: string
-}
+
+const links = useLanguageLinks()
 
 const emit = defineEmits(['lang-dropdown:change'])
 
-const languages: ComputedRef<LanguageLink[]> = useLanguageLinks()
 const currentLanguage = useCurrentLanguage()
 const { isMobile } = useIsMobile()
 
-const languageLinks = computed(() => {
-  return languages.value.filter((l) => l.code !== currentLanguage.value)
-})
-
 const langSwitchDropdownOpen = ref(false)
 
-const getLanguageName = (code: string): string => {
-  const languageNames: Record<string, string> = {
-    en: 'English',
-    de: 'Deutsch',
-    fr: 'Français',
-    it: 'Italiano',
-  }
-
-  return languageNames[code] || code
-}
-
 const onLangDropdownLinkClick = () => {
   emit('lang-dropdown:change')
   langSwitchDropdownOpen.value = false

package/components/Section/Header/LanguageSwitcher.vue

@@ -0,0 +1,37 @@
+<template>
+  <ClientOnly>
+    <div class="flex items-center">
+      <ul class="flex uppercase gap-4">
+        <li v-for="(lang, i) in links" :key="i">
+          <NuxtLink
+            v-if="lang.enabled"
+            :to="lang.to"
+            class="hover:text-primary-500 block"
+            :class="{
+              'font-bold': lang.active,
+            }"
+            @click="onLangDropdownLinkClick"
+          >
+            {{ lang.code }}
+          </NuxtLink>
+          <div v-else class="cursor-not-allowed text-gray-300">
+            {{ lang.code }}
+          </div>
+        </li>
+      </ul>
+    </div>
+  </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(['lang-dropdown:change'])
+const links = useLanguageLinks()
+
+const langSwitchDropdownOpen = ref(false)
+
+const onLangDropdownLinkClick = () => {
+  emit('lang-dropdown:change')
+  langSwitchDropdownOpen.value = false
+}
+</script>
+

package/components/Section/Header/MetaMenu.vue

@@ -18,6 +18,7 @@
               ? 'text-primary-500'
               : 'text-black'
           "
+          @click="onLangDropdownLinkClick"
         >
           {{ link.link.label }}
         </VuepalLink>
@@ -36,6 +37,7 @@
       :target-blank="link?.props?.targetBlank"
       :style="link?.props?.buttonStyle"
       buttonClass="no-underline"
+      @click="onLangDropdownLinkClick"
     />
   </div>
 </template>
@@ -49,9 +51,16 @@ const props = defineProps<{
   links: Array<ParagraphIcmsButtonElementFragment>
 }>()
 
-const emit = defineEmits(['meta:empty'])
+const emit = defineEmits(['meta:empty', 'lang-dropdown:change'])
 
 if (links.value?.length === 0) {
   emit('meta:empty')
 }
+
+const langSwitchDropdownOpen = ref(false)
+
+const onLangDropdownLinkClick = () => {
+  emit('lang-dropdown:change')
+  langSwitchDropdownOpen.value = false
+}
 </script>

package/components/Section/Header/index.vue

@@ -15,81 +15,94 @@
     <!-- Hidden on mobile -->
     <div class="hidden border-b-1 border-b-gray-100 lg:block">
       <!-- Meta menu container -->
-      <div
-        ref="metaRef"
-        class="container flex max-w-full items-center justify-end py-4"
+      <DesignSystemAtomsGridRow
+        :class="'w-full max-w-full 2xl:max-w-screen-2xl'"
       >
-        <!-- Meta menu -->
-        <SectionHeaderMetaMenu :links="metaLinks" />
-
-        <!-- Desktop Language dropdown -->
-        <SectionHeaderLanguageDropdown
-          class="hidden h-full lg:block"
-          @lang-dropdown:change="closeMenu"
-        />
-      </div>
+        <div class="col-span-12">
+          <div
+            ref="metaRef"
+            class="flex max-w-full items-center justify-end py-4"
+          >
+            <!-- Meta menu -->
+            <SectionHeaderMetaMenu :links="metaLinks" />
+
+            <!-- Desktop Language dropdown -->
+            <SectionHeaderLanguageDropdown
+              class="hidden h-full lg:block"
+              @lang-dropdown:change="closeMenu"
+            />
+          </div>
+        </div>
+      </DesignSystemAtomsGridRow>
     </div>
 
     <!-- Main menu full-width container -->
     <div class="h-[70px] shrink-0 border-b-1 border-b-gray-100 lg:h-[110px]">
       <!-- Main menu container -->
       <div
-        class="container flex h-full max-w-full items-center justify-between lg:justify-start"
+        class="flex h-full max-w-full items-center justify-between lg:justify-start"
       >
-        <!-- Logo -->
-        <NuxtLink
-          :to="`/${currentLanguage}`"
-          :title="globalConfig.companyName"
-          prefetch
-        >
-          <Media
-            v-if="companyLogo"
-            :media="companyLogo"
-            mediaClass="h-10 lg:h-16"
-          />
-        </NuxtLink>
-
-        <!-- Desktop Main navigation menu -->
-        <!-- Hidden on mobile -->
-        <SectionHeaderGlobalMenu
-          class="ml-auto hidden lg:block"
-          @menu:link-click="closeMenu"
-        />
-
-        <!-- Desktop Contact button -->
-        <!-- Hidden on mobile -->
-        <div
-          v-if="contactButtons?.length"
-          class="ml-8 hidden items-center justify-center gap-8 lg:flex"
-        >
-          <DesignSystemAtomsButton
-            v-for="contactButton in contactButtons"
-            :key="contactButton.uuid"
-            :label="contactButton?.props?.label"
-            :subline="contactButton?.props?.subline"
-            :title="contactButton?.props?.title"
-            :link="contactButton?.props?.link?.uri?.path"
-            :params="contactButton?.props?.params"
-            :targetBlank="contactButton?.props?.targetBlank"
-            :style="contactButton?.props?.buttonStyle"
-          />
-        </div>
-
-        <!-- Hamburger menu -->
-        <!-- Hidden on desktop -->
-        <button
-          class="flex items-center gap-3 leading-none lg:hidden"
-          aria-label="Hamburger Menu"
-          @click="toggleNav"
+        <DesignSystemAtomsGridRow
+          :class="'w-full max-w-full 2xl:max-w-screen-2xl'"
         >
-          <span
-            class="h-auto leading-none opacity-100"
-            :class="{
-              'opacity-0 transition-all duration-250 ease-in-out': isMenuOpen,
-            }"
-          />
-          <SectionHeaderMenuIcon :is-in-closable-state="isMenuOpen" />
-        </button>
+          <div class="col-span-12 flex flex-nowrap justify-between">
+            <!-- Logo -->
+            <NuxtLink
+              :to="`/${currentLanguage}`"
+              :title="globalConfig.companyName"
+              prefetch
+            >
+              <Media
+                v-if="companyLogo"
+                :media="companyLogo"
+                mediaClass="h-10 lg:h-16"
+              />
+            </NuxtLink>
+
+            <!-- Desktop Main navigation menu -->
+            <!-- Hidden on mobile -->
+            <SectionHeaderGlobalMenu
+              class="ml-auto hidden lg:block"
+              @menu:link-click="closeMenu"
+            />
+
+            <!-- Desktop Contact button -->
+            <!-- Hidden on mobile -->
+            <div
+              v-if="contactButtons?.length"
+              class="ml-8 hidden items-center justify-center gap-8 lg:flex"
+            >
+              <DesignSystemAtomsButton
+                v-for="contactButton in contactButtons"
+                :key="contactButton.uuid"
+                :label="contactButton?.props?.label"
+                :subline="contactButton?.props?.subline"
+                :title="contactButton?.props?.title"
+                :link="contactButton?.props?.link?.uri?.path"
+                :params="contactButton?.props?.params"
+                :targetBlank="contactButton?.props?.targetBlank"
+                :style="contactButton?.props?.buttonStyle"
+              />
+            </div>
+
+            <!-- Hamburger menu -->
+            <!-- Hidden on desktop -->
+            <button
+              class="flex items-center gap-3 leading-none lg:hidden"
+              aria-label="Hamburger Menu"
+              @click="toggleNav"
+            >
+              <span
+                class="h-auto leading-none opacity-100"
+                :class="{
+                  'opacity-0 transition-all duration-250 ease-in-out':
+                    isMenuOpen,
+                }"
+              />
+              <SectionHeaderMenuIcon :is-in-closable-state="isMenuOpen" />
+            </button>
+          </div>
+        </DesignSystemAtomsGridRow>
       </div>
     </div>
 
@@ -101,7 +114,7 @@
       <SectionHeaderGlobalMenu @menu:link-click="closeMenu" />
 
       <!-- Mobile Language dropdown -->
-      <SectionHeaderLanguageDropdown @lang-dropdown:change="closeMenu" />
+      <SectionHeaderLanguageSwitcher @lang-dropdown:change="closeMenu" />
 
       <!-- Mobile Meta menu -->
       <SectionHeaderMetaMenu

package/components/ui/accordion/Accordion.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue'
 import {
   AccordionRoot,
-  type AccordionRootEmits,
-  type AccordionRootProps,
+
   useForwardPropsEmits,
 } from 'radix-vue'
 

package/components/ui/accordion/AccordionContent.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import type { AccordionContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import { AccordionContent, type AccordionContentProps } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { AccordionContent } from 'radix-vue'
+import { computed } from 'vue'
 
-const props = defineProps<
-  AccordionContentProps & { class?: HTMLAttributes['class'] }
->()
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

package/components/ui/accordion/AccordionItem.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
+import type { AccordionItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
-import {
-  AccordionItem,
-  type AccordionItemProps,
-  useForwardProps,
-} from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { AccordionItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
 
-const props = defineProps<
-  AccordionItemProps & { class?: HTMLAttributes['class'] }
->()
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -21,7 +17,10 @@ const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
-  <AccordionItem v-bind="forwardedProps" :class="cn('border-b', props.class)">
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
     <slot />
   </AccordionItem>
 </template>

package/components/ui/accordion/AccordionTrigger.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import type { AccordionTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 import { ChevronDown } from 'lucide-vue-next'
 import {
   AccordionHeader,
   AccordionTrigger,
-  type AccordionTriggerProps,
+
 } from 'radix-vue'
-import { computed, type HTMLAttributes } from 'vue'
+import { computed } from 'vue'
 
-const props = defineProps<
-  AccordionTriggerProps & { class?: HTMLAttributes['class'] }
->()
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props

package/components/ui/alert/Alert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AlertVariants } from '.'
+import { cn } from '@/lib/utils'
+import { alertVariants } from '.'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

package/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

package/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

package/components/ui/alert/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

package/components/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from 'radix-vue'
+import { AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>

package/components/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogAction } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>

package/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogCancel } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>