@apptegy/nuxt-navigation 0.1.79 → 0.1.81

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.79",
+  "version": "0.1.81",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useDropdown, useNuxtApp, useAppConfig, computed, ref } from "#imports";
+import { useDropdown, useNuxtApp, useAppConfig, computed, ref, watch } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
 const { $t } = useNuxtApp();
 const appConfig = useAppConfig();
@@ -8,13 +8,17 @@ const emit = defineEmits(["update:model-value"]);
 const dropdownTriggerRef = ref();
 const inputRef = ref();
 const optionRef = ref();
-const selectedOrg = computed(() => {
-  return props.orgs.find(({ id }) => id == props.modelValue);
-});
 const props = defineProps({
   orgs: { type: Array, required: true },
   modelValue: { type: Number, required: true }
 });
+const localSelectedOrgId = ref(props.modelValue);
+watch(() => props.modelValue, (newValue) => {
+  localSelectedOrgId.value = newValue;
+});
+const selectedOrg = computed(() => {
+  return props.orgs.find(({ id }) => id == localSelectedOrgId.value);
+});
 const {
   active,
   searchQuery,
@@ -48,11 +52,16 @@ const highlightedOrg = computed(() => {
 });
 function handleSelectedOrg($event, orgId) {
   if ($event.type == "click") {
+    localSelectedOrgId.value = orgId;
     emit("update:model-value", orgId);
     closeDropdown();
   } else if ($event.type == "keydown") {
-    emit("update:model-value", orgId);
-    handleKeydown($event, orgId);
+    const keyEvent = $event;
+    if (keyEvent.key === "Enter" || keyEvent.key === " ") {
+      localSelectedOrgId.value = orgId;
+      emit("update:model-value", orgId);
+    }
+    handleKeydown(keyEvent, orgId);
   }
 }
 </script>
@@ -106,10 +115,10 @@ function handleSelectedOrg($event, orgId) {
         role="option"
         class="org-option"
         :class="{
-  selected: option.id === modelValue,
+  selected: option.id === localSelectedOrgId,
   highlighted: highlightedOrg && option.id === highlightedOrg.id
 }"
-        :aria-selected="option.id === modelValue"
+        :aria-selected="option.id === localSelectedOrgId"
         tabindex="-1"
         @keydown="handleSelectedOrg($event, option.id)"
         @click="handleSelectedOrg($event, option.id)"

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

@@ -7,6 +7,8 @@
     :style="getBrandingStyles"
     @mouseenter="!lockedExpanded && onHover()"
     @mouseleave="!lockedExpanded && onHoverLeave()"
+    @focusin="!lockedExpanded && onFocusEnter()"
+    @focusout="!lockedExpanded && onFocusLeave()"
   >
     <a
       :href="`#${skipToContent}`"
@@ -42,7 +44,7 @@
                 <button v-if="!lockedExpanded && allowCollapse && expanded" class="hamburger-button" @click="lockSidebar" v-tooltip.bottom="'Pin menu open'">
                   <Unpinned />
                 </button>
-                <button v-if="!lockedExpanded && allowCollapse && !expanded" class="hamburger-button" @click="onHover">
+                <button v-if="!lockedExpanded && allowCollapse && !expanded" class="hamburger-button">
                   <a-icon icon="24:hamburger" />
                 </button>
               </div>
@@ -136,6 +138,7 @@ const breakpoints = useBreakpoints(breakpointsTailwind);
 const isMobile = breakpoints.smaller("md");
 const lockedExpanded = ref(true);
 const allowCollapse = ref(false);
+let focusOutTimeout = null;
 function updateBrandLogoWidth() {
   brandLogoWidthPx.value = brandLogoRef.value?.clientWidth ?? 0;
 }
@@ -151,6 +154,10 @@ onMounted(() => {
 onBeforeUnmount(() => {
   brandLogoResizeObserver?.disconnect();
   brandLogoResizeObserver = null;
+  if (focusOutTimeout) {
+    clearTimeout(focusOutTimeout);
+    focusOutTimeout = null;
+  }
 });
 watch(expanded, (value) => {
   emit("toggle-expand", value ? 264 : 64);
@@ -172,6 +179,23 @@ function onHoverLeave() {
     expanded.value = false;
   }
 }
+function onFocusEnter() {
+  if (focusOutTimeout) {
+    clearTimeout(focusOutTimeout);
+    focusOutTimeout = null;
+  }
+  if (!expanded.value) {
+    expanded.value = true;
+  }
+}
+function onFocusLeave() {
+  focusOutTimeout = setTimeout(() => {
+    if (expanded.value) {
+      expanded.value = false;
+    }
+    focusOutTimeout = null;
+  }, 100);
+}
 function closeSidebar() {
   expanded.value = false;
   lockedExpanded.value = false;

package/dist/runtime/composables/useDropdown.js

@@ -104,7 +104,7 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
       case "End":
         openDropdown();
         nextTick(() => {
-          dropdownOptionsRef.value[options.length - 1].focus();
+          dropdownOptionsRef.value[options.length - 1]?.focus();
         });
         break;
       default:
@@ -148,13 +148,13 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
       case "ArrowDown":
         if (index === options.length - 1) break;
         nextTick(() => {
-          dropdownOptionsRef.value[index + 1].focus();
+          dropdownOptionsRef.value[index + 1]?.focus();
         });
         return index;
       case "ArrowUp":
         if (index === 0) break;
         nextTick(() => {
-          dropdownOptionsRef.value[index - 1].focus();
+          dropdownOptionsRef.value[index - 1]?.focus();
         });
         return index;
       case "ArrowLeft":
@@ -162,22 +162,22 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
         break;
       case "Home":
         nextTick(() => {
-          dropdownOptionsRef.value[0].focus();
+          dropdownOptionsRef.value[0]?.focus();
         });
         return index;
       case "End":
         nextTick(() => {
-          dropdownOptionsRef.value[options.length - 1].focus();
+          dropdownOptionsRef.value[options.length - 1]?.focus();
         });
         return index;
       case "PageDown": {
         const pageDownIndexToJump = index + 10 > options.length ? index + 10 : options.length - 1;
-        dropdownOptionsRef.value[pageDownIndexToJump].focus();
+        dropdownOptionsRef.value[pageDownIndexToJump]?.focus();
         return index;
       }
       case "PageUp": {
         const pageUpIndexToJump = index - 10 < 0 ? index - 10 : 0;
-        dropdownOptionsRef.value[pageUpIndexToJump].focus();
+        dropdownOptionsRef.value[pageUpIndexToJump]?.focus();
         return index;
       }
       default:
@@ -186,7 +186,7 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
     }
   }
   const debouncedFocus = useDebounceFn((idx) => {
-    dropdownOptionsRef.value[idx].focus();
+    dropdownOptionsRef.value[idx]?.focus();
   }, 500);
   function handleDropdownSearch(inputValue) {
     if (!config.searchable) return;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apptegy/nuxt-navigation",
-    "version": "0.1.79",
+    "version": "0.1.81",
     "type": "module",
     "exports": {
         ".": {
@@ -46,5 +46,5 @@
         "vue": "^3.5.13",
         "vue-tsc": "^3.0.3"
     },
-    "gitHead": "edcb211c421e908188dc18cda3ce4be1adb7cf97"
+    "gitHead": "de3fb4f51bb236aaf3bfa98134b73e5ee4f0fbc0"
 }