@iqual/nuxt-icms 1.3.1 → 1.4.1

package/layouts/default.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <SectionHeader
-      @menu:open="menuOpen"
-      @menu:close:start="menuCloseStart"
-      @menu:close:finished="menuCloseFinish"
-    />
+    <SectionHeader />
 
     <!-- <NuxtPageDependency>
       <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
@@ -25,16 +21,6 @@
 const route = useRoute()
 const drupalUser = useDrupalUser()
 const language = useCurrentLanguage()
-const breadcrumb = useBreadcrumbLinks()
-const viewport = useViewport()
-
-const isEditing = computed(
-  () =>
-    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
-    drupalUser.value.accessToolbar,
-)
-
-const showBreadcrumb = computed(() => !route.meta.hideBreadcrumb)
 
 useHead({
   htmlAttrs: {
@@ -42,25 +28,11 @@ useHead({
   },
 })
 
-const isMenuOpen = ref(false)
-const hasMenuFinishedClosing = ref(true)
-
-function menuOpen() {
-  window.document.body.classList.add('overflow-y-hidden')
-  isMenuOpen.value = true
-}
-
-function menuCloseStart() {
-  if (viewport.isLessThan('2xl')) {
-    isMenuOpen.value = false
-    hasMenuFinishedClosing.value = false
-  }
-}
+const isEditing = computed(
+  () =>
+    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
+    drupalUser.value.accessToolbar,
+)
 
-function menuCloseFinish() {
-  if (viewport.isLessThan('2xl')) {
-    window.document.body.classList.remove('overflow-y-hidden')
-    hasMenuFinishedClosing.value = true
-  }
-}
+const showBreadcrumb = computed(() => !route.meta.hideBreadcrumb)
 </script>

package/layouts/error.vue

@@ -1,10 +1,6 @@
 <template>
   <div>
-    <SectionHeader
-      @menu:open="menuOpen"
-      @menu:close:start="menuCloseStart"
-      @menu:close:finished="menuCloseFinish"
-    />
+    <SectionHeader />
 
     <!-- <NuxtPageDependency>
       <DrupalBreadcrumb v-if="showBreadcrumb" :links="breadcrumb" />
@@ -33,14 +29,15 @@
 </template>
 
 <script setup lang="ts">
-import { useError } from '#app'
-import { useHead } from '#imports'
-
 const route = useRoute()
 const drupalUser = useDrupalUser()
 const language = useCurrentLanguage()
-const breadcrumb = useBreadcrumbLinks()
-const viewport = useViewport()
+
+useHead({
+  htmlAttrs: {
+    lang: language.value,
+  },
+})
 
 const isEditing = computed(
   () =>
@@ -71,26 +68,4 @@ const errorMessage = computed(() => {
 useHead({
   title: errorMessage,
 })
-
-const isMenuOpen = ref(false)
-const hasMenuFinishedClosing = ref(true)
-
-function menuOpen() {
-  window.document.body.classList.add('overflow-y-hidden')
-  isMenuOpen.value = true
-}
-
-function menuCloseStart() {
-  if (viewport.isLessThan('2xl')) {
-    isMenuOpen.value = false
-    hasMenuFinishedClosing.value = false
-  }
-}
-
-function menuCloseFinish() {
-  if (viewport.isLessThan('2xl')) {
-    window.document.body.classList.remove('overflow-y-hidden')
-    hasMenuFinishedClosing.value = true
-  }
-}
 </script>

package/nuxt.config.ts

@@ -249,6 +249,9 @@ export default defineNuxtConfig({
       allowedHosts: true,
     },
     plugins: [],
+    optimizeDeps: {
+      include: ['maplibre-gl'],
+    },
   },
 
   /*
@@ -496,6 +499,16 @@ export default defineNuxtConfig({
         label: 'Reverse columns',
         default: false,
       },
+      imageAlignment: {
+        type: 'radios',
+        label: 'Image Alingment',
+        default: 'center',
+        options: {
+          top: 'Top',
+          center: 'Center',
+          bottom: 'Bottom',
+        },
+      },
     },
     translations: {
       en: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "ICMS Base",
   "type": "module",
   "private": false,

package/plugins/initData.ts

@@ -11,6 +11,9 @@ export type MappedMenuLink = {
   id: string
   label: string
   href?: string
+  target?: string
+  rel?: string
+  additionalClass?: string
   children?: MappedMenuLink[]
 }
 export interface InitData {
@@ -32,9 +35,6 @@ export function mapMenuLinkTree(
   }
   return menuLinks.map((menuLink) => {
     const id = `menu-item-${context.count++}`
-    // Extract the basic properties
-    const label = menuLink.link.label
-    const href = menuLink.link.url?.path
     // Process children if they exist
     const children =
       'subtree' in menuLink && menuLink.subtree && menuLink.subtree.length > 0
@@ -43,8 +43,11 @@ export function mapMenuLinkTree(
     // Return the mapped menu link
     return {
       id,
-      label,
-      href,
+      label: menuLink.link.label,
+      href: menuLink.link.url?.path,
+      target: menuLink.link?.target,
+      rel: menuLink.link?.rel,
+      additionalClass: menuLink.link?.additionalClass,
       children,
     }
   })

package/queries/query.initData.graphql

@@ -56,11 +56,13 @@ fragment menuLinkTreeElementFirst on MenuLinkTreeElement {
 
 fragment menuLinkTree on MenuLinkTreeElement {
   link {
+    label
     url {
       path
     }
-    attribute(name: "target")
-    label
+    target: attribute(name: "target")
+    rel: attribute(name: "rel")
+    additionalClass: attribute(name: "class")
   }
 }
 

package/tailwind.config.ts

@@ -39,18 +39,18 @@ const colors = {
     '950': 'rgb(11, 45, 70)',
   },
   gray: {
-    DEFAULT: 'rgb(61, 61, 61)',
+    DEFAULT: 'rgb(116, 116, 116)',
     '50': 'rgb(246, 246, 246)',
-    '100': 'rgb(231, 231, 231)',
-    '200': 'rgb(209, 209, 209)',
-    '300': 'rgb(176, 176, 176)',
-    '400': 'rgb(136, 136, 136)',
-    '500': 'rgb(109, 109, 109)',
-    '600': 'rgb(93, 93, 93)',
-    '700': 'rgb(79, 79, 79)',
-    '800': 'rgb(69, 69, 69)',
-    '900': 'rgb(61, 61, 61)',
-    '950': 'rgb(17, 17, 17)',
+    '100': 'rgb(235, 235, 235)',
+    '200': 'rgb(218, 218, 218)',
+    '300': 'rgb(182, 182, 182)',
+    '400': 'rgb(150, 150, 150)',
+    '500': 'rgb(116, 116, 116)',
+    '600': 'rgb(94, 94, 94)',
+    '700': 'rgb(73, 73, 73)',
+    '800': 'rgb(57, 57, 57)',
+    '900': 'rgb(44, 44, 44)',
+    '950': 'rgb(36, 36, 36)',
   },
   error: {
     DEFAULT: 'rgb(229, 62, 62)',

package/types/global.ts

@@ -0,0 +1 @@
+export type ColorScheme = 'none' | 'dark' | 'light' | 'accent' | undefined

package/components/Section/Header/GlobalMenu.vue

@@ -1,335 +0,0 @@
-<template>
-  <nav
-    ref="globalMenu"
-    class="border-b-1 z-30 mb-8 border-b-gray-100 py-8 2xl:mb-0 2xl:h-full 2xl:border-0 2xl:py-0 2xl:pl-12"
-    v-on="!isMobile ? { mouseleave: onNavbarMouseLeave } : {}"
-  >
-    <ul
-      role="menu"
-      class="flex flex-col flex-wrap justify-end text-base 2xl:h-full 2xl:flex-row 2xl:items-center 2xl:gap-8 2xl:border-0 2xl:font-medium"
-    >
-      <li
-        v-for="(link, mainIndex) in menuItems"
-        :key="`global_${mainIndex}`"
-        role="menuitem"
-        class="group/main relative flex flex-col items-stretch 2xl:h-full 2xl:flex-row"
-      >
-        <VuepalLink
-          :to="link?.href"
-          :aria-controls="'firstLevel-' + mainIndex"
-          :aria-expanded="hoverMain === mainIndex"
-          :aria-haspopup="!!link.children?.length"
-          class="group-hover/main:text-primary-500 flex w-full items-center justify-between whitespace-nowrap motion-safe:transition-colors motion-safe:duration-200 2xl:size-auto 2xl:py-0"
-          :class="
-            link?.href === menuItemActive?.href
-              ? 'text-primary-500'
-              : 'text-black'
-          "
-          @mouseenter="!isMobile && onMenuInteraction('main', mainIndex)"
-          @mouseleave="!isMobile && onMouseLeave()"
-          @click="onLinkClick"
-        >
-          {{ link.label }}
-          <div
-            class="grid size-10 place-content-center 2xl:size-auto"
-            @click.prevent.stop="
-              isMobile && onMenuInteraction('main', mainIndex)
-            "
-          >
-            <SpriteSymbol
-              v-show="link?.children?.length"
-              name="chevron-down"
-              :aria-label="
-                isMobile
-                  ? $texts('header.submenu_toggle', 'Toggle submenu')
-                  : undefined
-              "
-              :aria-hidden="!isMobile"
-              class="size-5 cursor-pointer text-black transition-transform duration-300 2xl:ml-2"
-              :class="{
-                'rotate-180': isMobile ? hoverMain === mainIndex : false,
-                '2xl:rotate-180': !isMobile && hoverMain === mainIndex,
-              }"
-            />
-          </div>
-        </VuepalLink>
-
-        <!-- First level menu -->
-        <transition :name="isMobile ? 'slideDown' : 'fade'">
-          <div
-            v-show="link.children?.length && hoverMain === mainIndex"
-            :id="'firstLevel-' + mainIndex"
-            class="w-max min-w-full 2xl:absolute 2xl:left-0 2xl:top-full 2xl:border 2xl:border-gray-100 2xl:bg-white 2xl:text-sm"
-          >
-            <ul role="menu" class="ml-4 2xl:ml-0">
-              <li
-                v-for="(firstLevelLink, firstLevelIndex) in link.children"
-                :key="`firstLevel_${firstLevelIndex}`"
-                role="menuitem"
-                class="group/first relative"
-                @mouseleave="!isMobile && onMouseLeave()"
-              >
-                <VuepalLink
-                  :to="firstLevelLink.href"
-                  :aria-controls="'secondLevel-' + firstLevelIndex"
-                  :aria-expanded="hoverFirst === firstLevelIndex"
-                  :aria-haspopup="!!firstLevelLink?.children?.length"
-                  class="group-hover/first:text-primary-500 flex w-full items-center justify-between whitespace-nowrap no-underline motion-safe:transition-colors motion-safe:duration-200 2xl:px-4 2xl:py-3"
-                  :class="
-                    firstLevelLink?.href === menuItemActiveLevel1?.href
-                      ? 'text-primary-500'
-                      : 'text-black'
-                  "
-                  @mouseenter="
-                    !isMobile && onMenuInteraction('first', firstLevelIndex)
-                  "
-                  @mouseleave="!isMobile && onMouseLeave()"
-                  @click="onLinkClick"
-                >
-                  {{ firstLevelLink.label }}
-                  <div
-                    class="grid size-10 place-content-center 2xl:size-auto"
-                    @click.prevent.stop="
-                      isMobile && onMenuInteraction('first', firstLevelIndex)
-                    "
-                  >
-                    <SpriteSymbol
-                      v-show="firstLevelLink?.children?.length"
-                      name="chevron-down"
-                      :aria-label="
-                        isMobile
-                          ? $texts('header.submenu_toggle', 'Toggle submenu')
-                          : undefined
-                      "
-                      :aria-hidden="!isMobile"
-                      class="size-5 cursor-pointer text-black transition-transform duration-300 2xl:ml-2 2xl:size-4 2xl:-rotate-90"
-                      :class="{
-                        'rotate-180': isMobile
-                          ? hoverFirst === firstLevelIndex
-                          : false,
-                      }"
-                    />
-                  </div>
-                </VuepalLink>
-
-                <!-- Second level menu -->
-                <transition :name="isMobile ? 'slideDown' : 'fade'">
-                  <div
-                    v-show="
-                      firstLevelLink.children?.length &&
-                      hoverFirst === firstLevelIndex
-                    "
-                    :id="'secondLevel-' + firstLevelIndex"
-                    class="min-w-full 2xl:absolute 2xl:-top-px 2xl:left-full 2xl:border 2xl:border-gray-100 2xl:bg-white 2xl:text-sm"
-                  >
-                    <ul role="menu" class="ml-4 2xl:ml-0">
-                      <li
-                        v-for="(
-                          secondLevelLink, secondLevelIndex
-                        ) in firstLevelLink.children"
-                        :key="`secondLevel_${secondLevelIndex}`"
-                        role="menuitem"
-                        class="group/second relative"
-                      >
-                        <VuepalLink
-                          :to="secondLevelLink.href"
-                          :aria-controls="'thirdLevel-' + secondLevelIndex"
-                          :aria-expanded="hoverSecond === secondLevelIndex"
-                          :aria-haspopup="!!secondLevelLink?.children?.length"
-                          class="group-hover/second:text-primary-500 flex w-full items-center justify-between whitespace-nowrap no-underline motion-safe:transition-colors motion-safe:duration-200 2xl:px-4 2xl:py-3"
-                          :class="
-                            secondLevelLink?.href === menuItemActiveLevel2?.href
-                              ? 'text-primary-500'
-                              : 'text-black'
-                          "
-                          @mouseenter="
-                            !isMobile &&
-                            onMenuInteraction('second', secondLevelIndex)
-                          "
-                          @mouseleave="!isMobile && onMouseLeave()"
-                          @click="onLinkClick"
-                        >
-                          {{ secondLevelLink.label }}
-                          <div
-                            class="grid size-10 place-content-center 2xl:size-auto"
-                            @click.prevent.stop="
-                              isMobile &&
-                              onMenuInteraction('first', firstLevelIndex)
-                            "
-                          >
-                            <SpriteSymbol
-                              v-show="secondLevelLink?.children?.length"
-                              name="chevron-down"
-                              :aria-label="
-                                isMobile
-                                  ? $texts(
-                                      'header.submenu_toggle',
-                                      'Toggle submenu',
-                                    )
-                                  : undefined
-                              "
-                              :aria-hidden="!isMobile"
-                              class="size-5 cursor-pointer text-black transition-transform duration-300 2xl:ml-2 2xl:size-4 2xl:-rotate-90"
-                              :class="{
-                                'rotate-180': isMobile
-                                  ? hoverSecond === secondLevelIndex
-                                  : false,
-                              }"
-                            />
-                          </div>
-                        </VuepalLink>
-
-                        <!-- Third level menu -->
-                        <transition :name="isMobile ? 'slideDown' : 'fade'">
-                          <div
-                            v-show="
-                              secondLevelLink.children?.length &&
-                              hoverSecond === secondLevelIndex
-                            "
-                            :id="'thirdLevel-' + secondLevelIndex"
-                            class="min-w-full 2xl:absolute 2xl:-top-px 2xl:left-full 2xl:border 2xl:border-gray-100 2xl:bg-white 2xl:text-sm"
-                          >
-                            <ul role="menu" class="ml-4 2xl:ml-0">
-                              <li
-                                v-for="(
-                                  thirdLevelLink, thirdLevelIndex
-                                ) in secondLevelLink.children"
-                                :key="`thirdLevel_${thirdLevelIndex}`"
-                                role="menuitem"
-                                class="group/third relative"
-                              >
-                                <VuepalLink
-                                  :to="thirdLevelLink.href"
-                                  class="group-hover/third:text-primary-500 flex h-10 w-full items-center whitespace-nowrap no-underline motion-safe:transition-colors motion-safe:duration-200 2xl:h-auto 2xl:px-4 2xl:py-3"
-                                  :class="
-                                    thirdLevelLink?.href ===
-                                    menuTiemActiveLevel3?.href
-                                      ? 'text-primary-500'
-                                      : 'text-black'
-                                  "
-                                  @mouseenter="
-                                    onMenuInteraction('third', thirdLevelIndex)
-                                  "
-                                  @click="onLinkClick"
-                                >
-                                  {{ thirdLevelLink.label }}
-                                </VuepalLink>
-                              </li>
-                            </ul>
-                          </div>
-                        </transition>
-                      </li>
-                    </ul>
-                  </div>
-                </transition>
-              </li>
-            </ul>
-          </div>
-        </transition>
-      </li>
-    </ul>
-  </nav>
-</template>
-
-<script lang="ts" setup>
-type menuLevel = 'main' | 'first' | 'second' | 'third'
-
-const globalMenu = ref<HTMLElement | null>(null)
-const { isMobile } = useIsMobile()
-const {
-  menuItems,
-  menuItemActive,
-  menuItemActiveLevel1,
-  menuItemActiveLevel2,
-  menuTiemActiveLevel3,
-} = await useMenu('mainMenu')
-const hoverMain = ref(-1)
-const hoverFirst = ref(-1)
-const hoverSecond = ref(-1)
-const hoverThird = ref(-1)
-let timeout: any = null
-
-const emit = defineEmits(['menu:link-click'])
-
-const { $texts } = useNuxtApp()
-
-defineExpose({
-  element: globalMenu,
-})
-
-function setActive(level: menuLevel, index: number) {
-  const hoverStates = {
-    main: hoverMain,
-    first: hoverFirst,
-    second: hoverSecond,
-    third: hoverThird,
-  }
-
-  if (level === 'main') {
-    hoverFirst.value = -1
-    hoverSecond.value = -1
-    hoverThird.value = -1
-  } else if (level === 'first') {
-    hoverSecond.value = -1
-    hoverThird.value = -1
-  } else if (level === 'second') {
-    hoverThird.value = -1
-  }
-
-  const state = hoverStates[level]
-  if (isMobile.value) {
-    state.value = state.value === index ? -1 : index
-  } else {
-    state.value = index
-  }
-}
-
-function onMenuInteraction(level: menuLevel, index: number) {
-  clearTimeout(timeout)
-  timeout = setTimeout(() => {
-    setActive(level, index)
-  }, 100)
-}
-
-function onMouseLeave() {
-  clearTimeout(timeout)
-}
-
-function onNavbarMouseLeave() {
-  hoverMain.value = -1
-  hoverFirst.value = -1
-  hoverSecond.value = -1
-}
-
-function onLinkClick() {
-  emit('menu:link-click')
-}
-</script>
-
-<style lang="postcss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-  @apply transition-opacity duration-200 ease-out;
-}
-.fade-enter,
-.fade-leave-active {
-  @apply opacity-0;
-}
-
-.slideDown-enter-active,
-.slideDown-leave-active {
-  transition: max-height 1s ease-in-out;
-}
-
-.slideDown-enter-to,
-.slideDown-leave-from {
-  overflow: hidden;
-  max-height: 400px;
-}
-
-.slideDown-enter-from,
-.slideDown-leave-to {
-  overflow: hidden;
-  max-height: 0;
-}
-</style>

package/components/Section/Header/LanguageSwitcher.vue

@@ -1,37 +0,0 @@
-<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>
-