srcdev-nuxt-components 6.1.7 → 6.1.9

package/app/components/layout-row/LayoutRow.vue

@@ -1,5 +1,12 @@
 <template>
-  <component :is="tag" class="layout-row" :class="elementClasses" :id :tab-index="isLandmark ? 0 : null" :aria-label="isLandmark ? 'Layout Row Landmark' : undefined">
+  <component
+    :is="tag"
+    class="layout-row"
+    :class="elementClasses"
+    :id
+    :tab-index="isLandmark ? 0 : null"
+    :aria-label="isLandmark ? 'Layout Row Landmark' : undefined"
+  >
     <div :data-testid="dataTestid" class="layout-row-inner" :class="variant">
       <div>
         <slot name="default"></slot>
@@ -9,46 +16,57 @@
 </template>
 
 <script lang="ts">
-const TAGS_ALLOWED = <string[]>['div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
+export const TAGS_ALLOWED = <string[]>[
+  "div",
+  "section",
+  "article",
+  "aside",
+  "header",
+  "footer",
+  "main",
+  "nav",
+  "ul",
+  "ol",
+]
 
-const VARIANT_CLASSES = <string[]>[
-  'full',
-  'full-start',
-  'full-end',
-  'popout',
-  'popout-start',
-  'popout-end',
-  'content',
-  'content-start',
-  'content-end',
-  'inset-content',
-  'inset-content-start',
-  'inset-content-end',
-  'full-width',
-  'full-content',
-  'full-content-nopad',
-  'full-content',
-];
+export const VARIANT_CLASSES = <string[]>[
+  "full",
+  "full-start",
+  "full-end",
+  "popout",
+  "popout-start",
+  "popout-end",
+  "content",
+  "content-start",
+  "content-end",
+  "inset-content",
+  "inset-content-start",
+  "inset-content-end",
+  "full-width",
+  "full-content",
+  "full-content-nopad",
+  "full-content",
+]
 </script>
 
 <script setup lang="ts">
 const props = defineProps({
   dataTestid: {
     type: String,
-    default: 'layout-row',
+    default: "layout-row",
   },
   tag: {
     type: String,
-    default: 'div',
+    default: "div",
     validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
+      return TAGS_ALLOWED.includes(value)
     },
   },
   variant: {
     type: String,
     required: true,
     validator(value: string) {
-      return VARIANT_CLASSES.includes(value);
+      return VARIANT_CLASSES.includes(value)
     },
   },
   id: {
@@ -63,9 +81,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

package/app/components/responsive-header/ResponsiveHeader.vue

@@ -384,17 +384,8 @@ const initMainNavigationState = () => {
   })
 }
 
-onMounted(async () => {
-  // If navigation is already initialized and loaded, skip the setup
-  if (navigationInitialized.value && navLoaded.value) {
-    return
-  }
-
-  await initTemplateRefs().then(() => {
-    navLoaded.value = true
-    navigationInitialized.value = true
-  })
-
+// Function to set up click outside listeners
+const setupClickOutsideListeners = () => {
   navigationDetailsRefs.value?.forEach((element, index) => {
     onClickOutside(element, () => {
       navigationDetailsRefs.value?.[index]?.removeAttribute("open")
@@ -405,6 +396,23 @@ onMounted(async () => {
     onClickOutside(overflowDetailsRef.value, () => {
       overflowDetailsRef.value?.removeAttribute("open")
     })
+}
+
+onMounted(async () => {
+  // If navigation is already initialized and loaded, skip the template refs setup
+  if (navigationInitialized.value && navLoaded.value) {
+    // But still set up click outside listeners as DOM elements may have changed
+    await nextTick()
+    setupClickOutsideListeners()
+    return
+  }
+
+  await initTemplateRefs().then(() => {
+    navLoaded.value = true
+    navigationInitialized.value = true
+  })
+
+  setupClickOutsideListeners()
 })
 
 useResizeObserver(navigationWrapperRef, async () => {

package/nuxt.config.ts

@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   // css: ["modern-normalize", "./app/assets/styles/main.css"],
-  modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/image"],
+  modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/image", "@nuxtjs/i18n"],
   app: {
     head: {
       htmlAttrs: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.7",
+  "version": "6.1.9",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -36,6 +36,7 @@
     "typescript": "5.9.2"
   },
   "dependencies": {
+    "@nuxtjs/i18n": "^10.0.6",
     "focus-trap-vue": "4.0.3"
   },
   "release-it": {