@iqual/nuxt-icms 1.0.2

package/components/Section/Header/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <header
+    ref="container"
+    class="z-30 flex flex-col bg-white"
+    :class="{
+      'max-h-[70px] !overflow-y-hidden lg:max-h-screen lg:!overflow-y-visible':
+        !isMenuOpen,
+      'max-h-screen overflow-y-auto': isMenuOpen,
+      'fixed size-full max-h-dvh': isGlobalSticky,
+      sticky: !isGlobalSticky,
+    }"
+    :style="computedStyle"
+  >
+    <!-- Meta menu full-width container -->
+    <!-- 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"
+      >
+        <!-- Meta menu -->
+        <SectionHeaderMetaMenu :links="metaLinks" />
+
+        <!-- Desktop Language dropdown -->
+        <SectionHeaderLanguageDropdown
+          class="hidden h-full lg:block"
+          @lang-dropdown:change="closeMenu"
+        />
+      </div>
+    </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"
+      >
+        <!-- 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>
+    </div>
+
+    <!-- Mobile Main/Meta menu container -->
+    <!-- Hidden on desktop -->
+    <!-- Initially hidden by overflow when menu closed -->
+    <div class="container max-w-full lg:hidden">
+      <!-- Mobile Main navigation menu -->
+      <SectionHeaderGlobalMenu @menu:link-click="closeMenu" />
+
+      <!-- Mobile Language dropdown -->
+      <SectionHeaderLanguageDropdown @lang-dropdown:change="closeMenu" />
+
+      <!-- Mobile Meta menu -->
+      <SectionHeaderMetaMenu
+        :links="metaLinks"
+        @lang-dropdown:change="closeMenu"
+      />
+
+      <!-- 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"
+        />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script lang="ts" setup>
+const initData: Ref<InitData> = await useInitData()
+const { globalConfig } = initData.value
+const { companyLogo, contactButtons, metaLinks } = globalConfig
+
+const container = ref<HTMLElement | null>(null)
+const metaRef = useTemplateRef('metaRef')
+const metaHeight = ref<number | null>()
+const isGlobalSticky = ref(false)
+const isMenuOpen = ref(false)
+const isMetaHidden = ref(false)
+const viewport = useViewport()
+const { isMobile } = useIsMobile()
+const currentLanguage = useCurrentLanguage()
+const drupalUser = useDrupalUser()
+const isUserLoggedIn = drupalUser.value.accessToolbar
+
+onMounted(() => {
+  if (metaRef.value) {
+    metaHeight.value = metaRef.value.getBoundingClientRect().height
+  }
+})
+
+const computedStyle = computed(() => {
+  let style = null
+  if (!isMobile.value && isUserLoggedIn) {
+    style = { top: `-${metaHeight.value}px` }
+  } else {
+    style = { top: 0 }
+  }
+  return style
+})
+
+const emit = defineEmits([
+  'menu:open',
+  'menu:close:start',
+  'menu:close:finished',
+])
+
+function toggleNav() {
+  if (!isMenuOpen.value) {
+    openMenu()
+  } else {
+    closeMenu()
+  }
+}
+
+function openMenu() {
+  emit('menu:open')
+  isMenuOpen.value = true
+  isGlobalSticky.value = true
+}
+
+function closeMenu() {
+  emit('menu:close:start')
+  isMenuOpen.value = false
+  if (container.value) {
+    container.value.scrollTop = 0
+  }
+
+  setTimeout(() => {
+    emit('menu:close:finished')
+    isGlobalSticky.value = false
+  }, 250)
+}
+
+function hideMeta() {
+  isMetaHidden.value = true
+}
+
+watch(viewport.breakpoint, (newValue: string) => {
+  if (newValue === 'md' || newValue === 'lg' || newValue === 'xl') {
+    isMenuOpen.value = false
+  }
+})
+</script>

package/components/ui/accordion/Accordion.vue

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

package/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  AccordionContentProps & { class?: HTMLAttributes['class'] }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/components/ui/accordion/AccordionItem.vue

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

package/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+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'
+
+const props = defineProps<
+  AccordionTriggerProps & { class?: HTMLAttributes['class'] }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

package/components/ui/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type ButtonVariants, buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/components/ui/button/index.ts

@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-gray-900 text-gray-50 shadow hover:bg-gray-900/90 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90',
+        destructive:
+          'bg-red-500 text-gray-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90',
+        outline:
+          'border border-gray-200 bg-white shadow-sm hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50',
+        secondary:
+          'bg-gray-100 text-gray-900 shadow-sm hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80',
+        ghost:
+          'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50',
+        link: 'text-gray-900 underline-offset-4 hover:underline dark:text-gray-50',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/components/ui/carousel/Carousel.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type {
+  CarouselEmits,
+  CarouselProps,
+  WithClassAsProps,
+} from './interface'
+import { cn } from '@/lib/utils'
+import { useProvideCarousel } from './useCarousel'
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: 'horizontal',
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const {
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+} = useProvideCarousel(props, emits)
+
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+})
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    scrollNext()
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot
+      :can-scroll-next
+      :can-scroll-prev
+      :carousel-api
+      :carousel-ref
+      :orientation
+      :scroll-next
+      :scroll-prev
+    />
+  </div>
+</template>

package/components/ui/carousel/CarouselContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden">
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )
+      "
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/components/ui/carousel/CarouselItem.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-roledescription="slide"
+    :class="
+      cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/components/ui/carousel/CarouselNext.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { Button } from '@iqual/nuxt-icms/components/ui/button'
+import { cn } from '@/lib/utils'
+import { ArrowRight } from 'lucide-vue-next'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollNext"
+    :class="
+      cn(
+        'absolute h-8 w-8 touch-manipulation rounded-full p-0',
+        orientation === 'horizontal'
+          ? '-right-12 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        props.class,
+      )
+    "
+    variant="outline"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRight class="h-4 w-4 text-current" />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>

package/components/ui/carousel/CarouselPrevious.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { Button } from '@iqual/nuxt-icms/components/ui/button'
+import { cn } from '@/lib/utils'
+import { ArrowLeft } from 'lucide-vue-next'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollPrev"
+    :class="
+      cn(
+        'absolute h-8 w-8 touch-manipulation rounded-full p-0',
+        orientation === 'horizontal'
+          ? '-left-12 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        props.class,
+      )
+    "
+    variant="outline"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ArrowLeft class="h-4 w-4 text-current" />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>

package/components/ui/carousel/index.ts

@@ -0,0 +1,8 @@
+export { default as Carousel } from './Carousel.vue'
+export { default as CarouselContent } from './CarouselContent.vue'
+export { default as CarouselItem } from './CarouselItem.vue'
+export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
+export type { UnwrapRefCarouselApi as CarouselApi } from './interface'
+
+export { useCarousel } from './useCarousel'

package/components/ui/carousel/interface.ts

@@ -0,0 +1,24 @@
+import type useEmblaCarousel from 'embla-carousel-vue'
+import type { EmblaCarouselVueType } from 'embla-carousel-vue'
+import type { HTMLAttributes, UnwrapRef } from 'vue'
+
+type CarouselApi = EmblaCarouselVueType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export interface CarouselEmits {
+  (e: 'init-api', payload: UnwrapRefCarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}

package/components/ui/carousel/useCarousel.ts

@@ -0,0 +1,66 @@
+import type {
+  UnwrapRefCarouselApi as CarouselApi,
+  CarouselEmits,
+  CarouselProps,
+} from './interface'
+import { createInjectionState } from '@vueuse/core'
+import emblaCarouselVue from 'embla-carousel-vue'
+import { onMounted, ref } from 'vue'
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({ opts, orientation, plugins }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins,
+    )
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(false)
+    const canScrollPrev = ref(false)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api?.canScrollNext() || false
+      canScrollPrev.value = api?.canScrollPrev() || false
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value) return
+
+      emblaApi.value?.on('init', onSelect)
+      emblaApi.value?.on('reInit', onSelect)
+      emblaApi.value?.on('select', onSelect)
+
+      emits('init-api', emblaApi.value)
+    })
+
+    return {
+      carouselRef: emblaNode,
+      carouselApi: emblaApi,
+      canScrollPrev,
+      canScrollNext,
+      scrollPrev,
+      scrollNext,
+      orientation,
+    }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+    throw new Error('useCarousel must be used within a <Carousel />')
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }