@iqual/nuxt-icms 1.0.2

package/components/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>

package/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectSeparator } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-gray-100 dark:bg-gray-800', props.class)" />
+</template>

package/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-10 w-full items-center justify-between rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white data-[placeholder]:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start dark:border-gray-800 dark:bg-gray-950 dark:ring-offset-gray-950 dark:data-[placeholder]:text-gray-400 dark:focus:ring-gray-300',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/components/ui/select/SelectValue.vue

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

package/components/ui/select/index.ts

@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'

package/components/ui/tabs/Tabs.vue

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

package/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  TabsContentProps & { class?: HTMLAttributes['class'] }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="
+      cn(
+        'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300',
+        props.class,
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/components/ui/tabs/TabsList.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500 dark:bg-gray-800 dark:text-gray-400',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

package/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  TabsTriggerProps & { class?: HTMLAttributes['class'] }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all 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 data-[state=active]:bg-white data-[state=active]:text-gray-950 data-[state=active]:shadow-sm dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300 dark:data-[state=active]:bg-gray-950 dark:data-[state=active]:text-gray-50',
+        props.class,
+      )
+    "
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>

package/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

package/components/ui/textarea/Textarea.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:bg-gray-950 dark:ring-offset-gray-950 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300', props.class)" />
+</template>

package/components/ui/textarea/index.ts

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

package/components.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "./assets/css/tailwind.css",
+    "baseColor": "gray",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package/composables/breadcrumb.ts

@@ -0,0 +1,42 @@
+import type { BreadcrumbFragment, RouteQuery } from '#graphql-operations'
+
+/**
+ * Extract the breadcrumb from a route query.
+ *
+ * @see ~/pages/[language]/[...slug]/query.route.graphql
+ */
+function getBreadcrumbFromRouteQuery(
+  routeQuery: RouteQuery | undefined | null,
+): BreadcrumbFragment[] {
+  if (routeQuery && routeQuery.route && 'breadcrumb' in routeQuery.route) {
+    return routeQuery.route.breadcrumb || []
+  }
+  return []
+}
+
+/**
+ * Returns the current breadcrumb links.
+ */
+export function useBreadcrumbLinks() {
+  return useState<BreadcrumbFragment[]>('breadcrumbLinks', () => [])
+}
+
+/**
+ * Set the breadcrumb links for the current page.
+ */
+export function setBreadcrumbLinksFromRoute(
+  routeQuery: RouteQuery | undefined | null,
+) {
+  const links = useBreadcrumbLinks()
+  links.value = getBreadcrumbFromRouteQuery(routeQuery)
+}
+
+/**
+ * Set the breadcrumb links directly.
+ */
+export function setBreadcrumbLinks(
+  newLinks?: BreadcrumbFragment[] | null | undefined,
+) {
+  const links = useBreadcrumbLinks()
+  links.value = newLinks || []
+}

package/composables/languageLinks.ts

@@ -0,0 +1,31 @@
+import type {
+  LanguageSwitchLinkFragment,
+  RouteQuery,
+} from '#graphql-operations'
+
+export function setLanguageLinksFromFragment(
+  links: LanguageSwitchLinkFragment[],
+) {
+  const route = useRoute()
+
+  definePageLanguageLinks(
+    route.path,
+    links.reduce<Record<string, string>>((acc, v) => {
+      if (v.language.id && v.url.path) {
+        acc[v.language.id] = v.url.path
+      }
+      return acc
+    }, {}),
+  )
+}
+
+export function setLanguageLinksFromRoute(
+  query?: RouteQuery | undefined | null,
+) {
+  if (query && query.route && 'languageSwitchLinks' in query.route) {
+    setLanguageLinksFromFragment(query.route.languageSwitchLinks)
+    return
+  }
+  const route = useRoute()
+  definePageLanguageLinks(route.path, {})
+}

package/composables/query.initData.graphql

@@ -0,0 +1,102 @@
+query initData {
+  ...metaMenuQuery
+  ...mainMenuQuery
+  ...footerQuery
+  ...footerMetaQuery
+  ...globalConfigQuery
+  translations: textsLoader {
+    ...easyTexts
+  }
+}
+
+fragment metaMenuQuery on Query {
+  metaMenu: menuByName(name: META) {
+    links {
+      ...menuLinkTreeElementFirst
+    }
+  }
+}
+
+fragment mainMenuQuery on Query {
+  mainMenu: menuByName(name: MAIN) {
+    links {
+      ...menuLinkTreeElementFirst
+    }
+  }
+}
+
+fragment footerQuery on Query {
+  footerMenu: menuByName(name: FOOTER) {
+    links {
+      ...menuLinkTreeElementFirst
+    }
+  }
+}
+
+fragment footerMetaQuery on Query {
+  footerMetaMenu: menuByName(name: FOOTER_META) {
+    links {
+      ...menuLinkTreeElementFirst
+    }
+  }
+}
+
+fragment menuLinkTreeElementFirst on MenuLinkTreeElement {
+  ...menuLinkTree
+  subtree {
+    ...menuLinkTree
+    subtree {
+      ...menuLinkTree
+      subtree {
+        ...menuLinkTree
+      }
+    }
+  }
+}
+
+fragment menuLinkTree on MenuLinkTreeElement {
+  link {
+    url {
+      path
+    }
+    attribute(name: "target")
+    label
+  }
+}
+
+fragment globalConfigQuery on Query {
+  globalConfig {
+    ...globalConfig
+  }
+}
+
+fragment globalConfig on TranslatableConfigPagesGlobal {
+  companyLogo: fieldIcmsCompanyLogo {
+    ...media
+  }
+  companyLogoAlt: fieldIcmsCompanyLogoAlt {
+    ...media
+  }
+  companyName: fieldIcmsCompanyName
+  companyDescription: fieldIcmsCompanyDescription
+  address: fieldIcmsCompanyAddress
+  phoneNumber: fieldIcmsPhoneNumber
+  emailAddress: fieldIcmsEmailAddress
+  contactButtons: fieldIcmsContactButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  metaLinks: fieldIcmsMetaLinks {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  socialMediaLinks: fieldIcmsSocialMediaLinks {
+    uri {
+      path
+    }
+  }
+}

package/composables/useAccordionScroll.ts

@@ -0,0 +1,30 @@
+import { useNavigationOffset } from '@/composables/useNavigationOffset'
+
+export function useAccordionScroll(el: ComponentPublicInstance | undefined): { handleAccordionOpen: () => void } {
+  if (!el) return { handleAccordionOpen: () => { } }
+
+  const triggerRef = el
+
+  const { navigationOffset } = useNavigationOffset()
+
+  const handleAccordionOpen = (): void => {
+    nextTick(() => {
+      setTimeout(() => {
+        if (
+          triggerRef.$el &&
+          triggerRef.$el.getAttribute('data-state') === 'open'
+        ) {
+          const triggerRect = triggerRef.$el.getBoundingClientRect()
+          const scrollY = window.scrollY + triggerRect.top - navigationOffset.value
+
+          window.scrollTo({
+            top: scrollY,
+            behavior: 'smooth',
+          })
+        }
+      }, 250)
+    })
+  }
+
+  return { handleAccordionOpen }
+}

package/composables/useChildTitleWeight.ts

@@ -0,0 +1,13 @@
+export function useChildTitleWeight(titleWeight: string) {
+  if (!titleWeight) return
+
+  if (titleWeight === 'h1') {
+    return 'h2'
+  } else if (titleWeight === 'h2') {
+    return 'h3'
+  } else if (titleWeight === 'h3') {
+    return 'h4'
+  } else {
+    return 'p'
+  }
+}

package/composables/useCn.ts

@@ -0,0 +1,7 @@
+import { twMerge } from 'tailwind-merge'
+import { clsx } from 'clsx'
+import type { ClassValue } from 'clsx'
+
+export default function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/composables/useCurrentLangcodeEnum.ts

@@ -0,0 +1,18 @@
+import { Langcode } from '#graphql-operations'
+
+/**
+ * Return the current langcode enum for GraphQL requests.
+ */
+export default function (): ComputedRef<Langcode> {
+  const language = useCurrentLanguage()
+
+  return computed(() => {
+    if (language.value === 'fr') {
+      return Langcode.FR
+    } else if (language.value === 'en') {
+      return Langcode.EN
+    }
+
+    return Langcode.DE
+  })
+}

package/composables/useDrupalMessages.ts

@@ -0,0 +1,41 @@
+export type DrupalMessageType = 'status' | 'warning' | 'error'
+
+export type DrupalMessage = {
+  /**
+   * Possible message types.
+   */
+  type: DrupalMessageType
+
+  /**
+   * The message. May contain HTML.
+   */
+  message: string
+}
+
+export type DrupalMessageComposable = {
+  /**
+   * The reactive messages from Drupal.
+   */
+  messages: Ref<DrupalMessage[]>
+
+  /**
+   * Remove the message with the given index.
+   */
+  removeMessage: (index: number) => void
+
+  /**
+   * Clear all messages.
+   */
+  clearMessages: () => void
+}
+
+export function useDrupalMessages(): DrupalMessageComposable {
+  const messages = useState<DrupalMessage[]>('drupalMessages', () => [])
+
+  const removeMessage = (index: number) =>
+    (messages.value = messages.value.filter((_v, i) => i !== index))
+
+  const clearMessages = () => (messages.value = [])
+
+  return { messages, removeMessage, clearMessages }
+}

package/composables/useDrupalUser.ts

@@ -0,0 +1,11 @@
+export interface DrupalUser {
+  fetched: boolean
+  accessToolbar: boolean
+}
+
+export default function () {
+  return useState<DrupalUser>('drupalUser', () => ({
+    fetched: false,
+    accessToolbar: false,
+  }))
+}