@iqual/nuxt-icms 1.1.0 → 1.2.2

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="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, key) in contactButtons"
+                :key="key"
+                :label="contactButton?.label"
+                :subline="contactButton?.subline"
+                :title="contactButton?.title"
+                :link="contactButton?.link?.uri?.path"
+                :params="contactButton?.params"
+                :targetBlank="contactButton?.targetBlank"
+                :style="contactButton?.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
@@ -112,15 +125,15 @@
       <!-- Mobile Contact button -->
       <div v-if="contactButtons?.length" class="flex gap-8 lg:ml-8">
         <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"
+          v-for="(contactButton, key) in contactButtons"
+          :key="key"
+          :label="contactButton?.label"
+          :subline="contactButton?.subline"
+          :title="contactButton?.title"
+          :link="contactButton?.link?.uri?.path"
+          :params="contactButton?.params"
+          :targetBlank="contactButton?.targetBlank"
+          :style="contactButton?.buttonStyle"
         />
       </div>
     </div>
@@ -128,9 +141,8 @@
 </template>
 
 <script lang="ts" setup>
-const initData: Ref<InitData> = await useInitData()
-const { globalConfig } = initData.value
-const { companyLogo, contactButtons, metaLinks } = globalConfig
+
+const { companyLogo, companyName, contactButtons, metaLinks } = await useGlobalConfig()
 
 const container = ref<HTMLElement | null>(null)
 const metaRef = useTemplateRef('metaRef')

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>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogContent,
+
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogDescription,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>

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

@@ -0,0 +1,21 @@
+<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(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+<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('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AlertDialogTitle } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from 'radix-vue'
+import { AlertDialogTrigger } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>

package/components/ui/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'

package/components/ui/aspect-ratio/AspectRatio.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AspectRatioProps } from 'radix-vue'
+import { AspectRatio } from 'radix-vue'
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio v-bind="props">
+    <slot />
+  </AspectRatio>
+</template>

package/components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'