srcdev-nuxt-components 2.5.1 → 2.5.3

package/components/deep-expanding-menu/DeepExpandingMenu.vue

@@ -27,11 +27,11 @@
 <script lang="ts">
 const TAGS_ALLOWED = <string[]>['div', 'section', 'nav', 'ul', 'ol'];
 
-interface INavLink {
+interface ResponsiveHeaderNavItem {
   name: string;
   path?: string;
   isExternal?: boolean;
-  childLinks?: INavLink[];
+  childLinks?: ResponsiveHeaderNavItem[];
   childLinksTitle?: string;
 }
 </script>
@@ -46,7 +46,7 @@ const props = defineProps({
     },
   },
   navLinks: {
-    type: Array as PropType<INavLink[]>,
+    type: Array as PropType<ResponsiveHeaderNavItem[]>,
     default: () => [],
   },
   styleClassPassthrough: {

package/components/deep-expanding-menu/DeepExpandingMenuOld.vue

@@ -34,7 +34,7 @@ const props = defineProps({
     },
   },
   navLinks: {
-    type: Array as PropType<INavLink[]>,
+    type: Array as PropType<ResponsiveHeaderNavItem[]>,
     default: () => [],
   },
   styleClassPassthrough: {
@@ -66,12 +66,12 @@ onMounted(() => {
 <script lang="ts">
 const TAGS_ALLOWED = <string[]>['div', 'section', 'nav', 'ul', 'ol'];
 
-interface INavLink {
+interface ResponsiveHeaderNavItem {
   name: string;
   path?: string;
   isExternal?: boolean;
   childLinksTitle?: string;
-  childLinks?: INavLink[];
+  childLinks?: ResponsiveHeaderNavItem[];
 }
 </script>
 

package/components/responsive-header/NavigationItems.vue

@@ -49,37 +49,12 @@
   </div>
 </template>
 
-<script lang="ts">
-  interface NavLinkConfig {
-    left: number;
-    right: number;
-    width?: number;
-    visible: boolean;
-  }
-
-  interface INavLink {
-    name: string;
-    path?: string;
-    isExternal?: boolean;
-    childLinksTitle?: string;
-    childLinks?: INavLink[];
-    config?: NavLinkConfig;
-  }
-
-  interface IResponsiveNavLinks {
-    [key: string]: INavLink[];
-  }
-
-  interface INavigationRefTrackState {
-    navListVisibility: Record<string, boolean>;
-    clonedNavLinks?: IResponsiveNavLinks;
-  }
-</script>
-
 <script setup lang="ts">
+import type { ResponsiveHeaderState } from '@/types/responsiveHeader';
+
 const props = defineProps({
   mainNavigationState: {
-    type: Object as PropType<INavigationRefTrackState>,
+    type: Object as PropType<ResponsiveHeaderState>,
     default: () => [],
   },
   styleClassPassthrough: {
@@ -89,6 +64,7 @@ const props = defineProps({
 });
 
 const detailsAanimationDuration = 200;
+const detailsAanimationDurationString = `${detailsAanimationDuration}ms`;
 
 const widestNavLinkWidthInMainNavigationState = computed(() => {
   return Object.values(props.mainNavigationState.clonedNavLinks || {}).reduce((maxWidth, group) => {
@@ -166,7 +142,7 @@ watch(
                 flex-direction: column;
                 gap: 12px;
                 margin-block-start: var(--_overflow-navigation-sub-nav-list-margin-block-start);
-                transition: margin-block-start v-bind(`${detailsAanimationDuration}ms`) ease;
+                transition: margin-block-start v-bind(detailsAanimationDurationString) ease;
 
                 .overflow-navigation-sub-nav-item {
 

package/components/responsive-header/ResponsiveHeader.vue

@@ -73,51 +73,13 @@
   </LayoutRow>
 </template>
 
-<script lang="ts">
-
-  interface INavLink {
-    name: string;
-    path?: string;
-    isExternal?: boolean;
-    childLinksTitle?: string;
-    childLinks?: INavLink[];
-    config?: NavLinkConfig;
-  }
-
-  interface IResponsiveNavLinks {
-    [key: string]: INavLink[];
-  }
-
-  interface IFlooredRect {
-    left: number;
-    right: number;
-    top: number;
-    bottom: number;
-    width: number;
-    height: number;
-  }
-
-  interface NavLinkConfig {
-    left: number;
-    right: number;
-    width?: number;
-    visible: boolean;
-  }
-
-  interface INavigationRefTrackState {
-    navListVisibility: Record<string, boolean>;
-    clonedNavLinks?: IResponsiveNavLinks;
-  }
-
-
-</script>
-
 <script setup lang="ts">
 import { useResizeObserver, onClickOutside } from '@vueuse/core';
+import type { ResponsiveHeaderProp, ResponsiveHeaderState, IFlooredRect } from '@/types/responsiveHeader';
 
 const props = defineProps({
   responsiveNavLinks: {
-    type: Object as PropType<IResponsiveNavLinks>,
+    type: Object as PropType<ResponsiveHeaderProp>,
     default: () => [],
   },
   gapBetweenFirstAndSecondNav: {
@@ -130,7 +92,6 @@ const props = defineProps({
   },
 });
 
-
 const navLoaded = ref(false);
 const navigationWrapperRef = useTemplateRef('navigationWrapper');
 
@@ -143,9 +104,10 @@ const handleSummaryHover = (event: MouseEvent | FocusEvent) => {
   } else {
     parentDetailsElement.setAttribute('open', '');
   }
+  overflowDetailsRef.value?.removeAttribute('open');
 };
 
-const mainNavigationState = ref<INavigationRefTrackState>({
+const mainNavigationState = ref<ResponsiveHeaderState>({
   navListVisibility: {
     firstNav: false,
     secondNav: false,
@@ -181,7 +143,11 @@ const showOverflowDetails = computed(() => {
 });
 
 const mainNavigationMarginBlockEnd = computed(() => {
-    return secondaryNavRects.value ? secondaryNavRects.value.width + props.gapBetweenFirstAndSecondNav : 0;
+  return secondaryNavRects.value ? secondaryNavRects.value.width + props.gapBetweenFirstAndSecondNav : 0;
+});
+
+const mainNavigationMarginBlockEndStr = computed(() => {
+  return mainNavigationMarginBlockEnd.value + 'px';
 });
 
 const initTemplateRefs = async () => {
@@ -327,7 +293,7 @@ watch(
       gap: 60px;
 
       overflow-x: hidden;
-      margin-inline-end: v-bind(`${mainNavigationMarginBlockEnd}px`);
+      margin-inline-end: v-bind(mainNavigationMarginBlockEndStr);
 
       &.collapsed {
         justify-content: flex-start;
@@ -485,14 +451,13 @@ watch(
         position: relative;
         cursor: pointer;
         width: fit-content;
-        /* overflow: hidden; */
 
         transition: all 0.2s ease-in-out;
 
         &.visually-hidden {
           opacity: 0;
           visibility: hidden;
-          /* width: 0; */
+          width: 0;
         }
 
         .overflow-details-summary {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",

package/types/responsiveHeader.ts

@@ -0,0 +1,38 @@
+export interface ResponsiveHeaderNavItem {
+  name: string;
+  path?: string;
+  iconName?: string;
+  imageSrc?: string;
+  imageAlt?: string;
+  description?: string;
+  isActive?: boolean;
+  isExternal?: boolean;
+  childLinksTitle?: string;
+  childLinks?: ResponsiveHeaderNavItem[];
+  config?: ResponsiveHeaderItemRects;
+}
+
+export interface ResponsiveHeaderProp {
+  [key: string]: ResponsiveHeaderNavItem[];
+}
+
+export interface IFlooredRect {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+export interface ResponsiveHeaderItemRects {
+  left: number;
+  right: number;
+  width?: number;
+  visible: boolean;
+}
+
+export interface ResponsiveHeaderState {
+  navListVisibility: Record<string, boolean>;
+  clonedNavLinks?: ResponsiveHeaderProp;
+}