@apptegy/nuxt-navigation 0.1.17 → 0.1.19

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "builder": {
-    "@nuxt/module-builder": "0.8.3",
+    "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"
   }
 }

package/dist/runtime/components/Nav/Header.vue

@@ -22,6 +22,7 @@ interface IHeaderProps {
 interface IUserDropdown {
   user: {
     name: string;
+    email: string;
     avatar?: string;
   };
   userDropdownOptions: Array<unknown>;
@@ -33,6 +34,7 @@ defineEmits(['selected-option']);
 
 <style scoped>
 header.header {
+  position: relative;
   grid-area: navheader;
   display: grid;
   grid-auto-flow: column;
@@ -44,7 +46,7 @@ header.header {
   background-color: var(--primary-white);
   font: var(--font-regular);
 }
-@media only screen and (max-width: 960px) {
+@media only screen and (width <= 960px) {
   header.header {
     padding-left: 32px;
     padding-right: 32px;

package/dist/runtime/components/Nav/ImpersonateInfoPanel.vue

@@ -32,13 +32,16 @@
 <script setup lang="ts">
 import { ref, onMounted, useSidebar } from '#imports';
 
+interface ImpersonatedUser {
+  admin_email: string;
+  client: string;
+  email: string;
+  phone_number: string;
+  show: boolean;
+}
+
 interface IPanelProps {
-  impersonatedUser: {
-    name: string,
-    email: string,
-    admin_email: string,
-    client: string,
-  }
+  impersonatedUser: ImpersonatedUser;
 }
 
 defineProps<IPanelProps>();

package/dist/runtime/components/Nav/Sidebar.vue

@@ -8,7 +8,6 @@
     @mouseleave="onHoverLeave"
   >
     <a
-      ref="skip-to-content"
       href="#main-content-section"
       class="skip-to-content"
       data-testid="skip-to-content"
@@ -42,10 +41,10 @@
         :impersonated-user="impersonatedUser"
       />
 
-      <slot name="logo">
+      <slot name="logo" v-bind="expanded">
         <NuxtLink v-if="expanded ?  logo.src : logo.iconSrc" :to="homepageUrl">
           <div class="navbar--logo">
-            <img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt">
+            <img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt || $t('navigation.logoAlt')">
           </div>
         </NuxtLink>
       </slot>
@@ -55,24 +54,11 @@
 
 <script setup lang="ts">
 import { useNuxtApp, useSidebar } from '#imports';
+import type { IApplication, IUser } from "../../types";
+
 const { $t } = useNuxtApp();
 const { state: expanded } = useSidebar();
 
-interface IApplications {
-  id: number;
-  text: string;
-  url: string;
-  img_src: string;
-}
-
-interface IUser {
-  show: boolean;
-  email: string;
-  phone_number: string;
-  client: string;
-  admin_email: string;
-}
-
 interface ILogo {
   alt: string;
   src: string;
@@ -80,13 +66,14 @@ interface ILogo {
 }
 
 interface ISidebarProps {
-  applications: Array<IApplications>;
-  currentApplication?: IApplications['text'];
+  applications: Array<IApplication>;
+  currentApplication?: IApplication['text'];
   homepageUrl?: string;
   showHelpArticles?: boolean;
   helpArticleOptions?: Array<unknown>;
   impersonatedUser?: IUser;
   logo?: ILogo;
+  skipToContent: string;
 }
 
 withDefaults(defineProps<ISidebarProps>(), {
@@ -103,14 +90,15 @@ withDefaults(defineProps<ISidebarProps>(), {
     admin_email: '',
   }),
   logo: () => ({
-    alt: 'Thrillshare',
+    alt: '',
     src: 'logo.svg',
     iconSrc: 'icon.svg',
-  })
+  }),
+  skipToContent: '#main-content-section',
 })
 
 // Debounced Expand on Hover
-let expandedTimer;
+let expandedTimer = null;
 function onHover() {
   if(!expanded.value) {
     expandedTimer = setTimeout(() => {

package/dist/runtime/components/Nav/SidebarSection.vue

@@ -13,6 +13,7 @@
 
 <script setup lang="ts">
 import { useSidebar } from "#imports";
+import type { IApplication } from "../../types";
 
 defineProps<{
   application: IApplication;
@@ -21,7 +22,7 @@ defineProps<{
 
 const { state: expanded } = useSidebar();
 
-function getActiveIcon(src){
+function getActiveIcon(src: string){
   return src.replace(".svg", "_active.svg");
 };
 </script>
@@ -29,7 +30,6 @@ function getActiveIcon(src){
 <style scoped>
 .a-nav-section {
   box-shadow: inset 0px -1px 0px 0px var(--dscl-nav-section-border-bottom-color, var(--purple-65));
-  cursor: pointer;
   min-height: 48px;
 }
 .a-nav-section.active {
@@ -52,6 +52,9 @@ function getActiveIcon(src){
   padding: 0px 16px;
   width: 100%;
 }
+.a-nav-section--link:not([href]) {
+  cursor: default;
+}
 .a-nav-section--link:focus-visible {
   outline: var(--orange) auto 2px;
   outline-offset: 0px;

package/dist/runtime/components/Nav/UserDropdown.vue

@@ -44,9 +44,9 @@ function handleSelectedClick(index: number) {
 function handleKeydownAction($event: KeyboardEvent, index: number) {
   if ($event.key === "Enter" || $event.key === " ") {
     emit("select-option", index);
-  } else {
-    handleKeydown($event, index);
+    $event?.target?.children[0]?.click();
   }
+  handleKeydown($event, index);
 }
 </script>
 

package/dist/runtime/composables/useDropdown.d.ts

@@ -3,8 +3,8 @@ export declare function useDropdown(options: Array<unknown>, dropdownOptionsRef:
     searchable: boolean;
     trackBy?: string;
 }): {
-    active: Ref<boolean, boolean>;
-    searchQuery: Ref<string, string>;
+    active: Ref<boolean>;
+    searchQuery: Ref<string>;
     toggleDropdown: ($event: KeyboardEvent | MouseEvent) => Promise<void>;
     openDropdown: () => void;
     closeDropdown: () => void;

package/dist/runtime/composables/useDropdown.js

@@ -18,20 +18,17 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
     active.value = false;
   }
   function onClickOutsideHandler() {
-    if (!active.value)
-      return;
+    if (!active.value) return;
     closeDropdown();
   }
   function keydownActionsOnTrigger(event) {
-    if (event.ctrlKey || event.metaKey || event.shiftKey)
-      return;
+    if (event.ctrlKey || event.metaKey || event.shiftKey) return;
     if (event.key !== "Tab") {
       event.preventDefault();
     }
     switch (event.key) {
       case "Tab":
-        if (!active.value)
-          return;
+        if (!active.value) return;
         closeDropdown();
         break;
       case "ArrowDown":
@@ -96,8 +93,7 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
     }
   }
   function handleKeydown(event, index) {
-    if (event.ctrlKey || event.metaKey || event.shiftKey)
-      return;
+    if (event.ctrlKey || event.metaKey || event.shiftKey) return;
     if (event.altKey && event.key === "ArrowUp") {
       closeDropdown();
       dropdownTriggerRef.value.focus();
@@ -131,15 +127,13 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
         });
         break;
       case "ArrowDown":
-        if (index === options.length - 1)
-          break;
+        if (index === options.length - 1) break;
         nextTick(() => {
           dropdownOptionsRef.value[index + 1].focus();
         });
         return index;
       case "ArrowUp":
-        if (index === 0)
-          break;
+        if (index === 0) break;
         nextTick(() => {
           dropdownOptionsRef.value[index - 1].focus();
         });
@@ -176,8 +170,7 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
     dropdownOptionsRef.value[idx].focus();
   }, 500);
   function handleDropdownSearch(inputValue) {
-    if (!config.searchable)
-      return;
+    if (!config.searchable) return;
     if (inputValue.key == "Backspace") {
       searchQuery.value = searchQuery.value.slice(0, -1);
       return;

package/dist/runtime/composables/useSidebar.d.ts

@@ -1,5 +1,5 @@
 export declare function useSidebar(): {
-    state: any;
+    state: import("vue").Ref<boolean>;
     toggleSidebar: () => void;
-    sidebarWidth: any;
+    sidebarWidth: import("vue").ComputedRef<"256px" | "0px">;
 };

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,13 @@
+export interface IApplication {
+    id: number;
+    text: string;
+    url: string;
+    img_src: string;
+}
+export interface IUser {
+    show: boolean;
+    email: string;
+    phone_number: string;
+    client: string;
+    admin_email: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "exports": {
     ".": {
@@ -26,24 +26,24 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.1",
-    "@vueuse/components": "11.0.3",
+    "@nuxt/kit": "^3.13.2",
+    "@vueuse/components": "11.1.0",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.4.1",
-    "@nuxt/eslint-config": "^0.5.6",
-    "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/schema": "^3.13.1",
-    "@nuxt/test-utils": "^3.14.1",
-    "@types/node": "^20.16.5",
-    "changelogen": "^0.5.5",
-    "eslint": "^9.9.1",
-    "nuxt": "^3.13.1",
-    "sass": "^1.78.0",
-    "typescript": "^5.5.4",
+    "@nuxt/devtools": "^1.5.1",
+    "@nuxt/eslint-config": "^0.5.7",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.13.2",
+    "@nuxt/test-utils": "^3.14.2",
+    "@types/node": "^20.16.6",
+    "changelogen": "^0.5.7",
+    "eslint": "^9.11.1",
+    "nuxt": "^3.13.2",
+    "sass": "^1.79.3",
+    "typescript": "^5.6.2",
     "vitest": "^1.6.0",
-    "vue": "^3.5.2",
+    "vue": "^3.5.8",
     "vue-tsc": "^2.1.6"
   }
 }