@apptegy/nuxt-navigation 0.1.81 → 0.1.84

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.81",
+  "version": "0.1.84",
   "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, watch } from "#imports";
+import { useDropdown, useNuxtApp, useAppConfig, computed, ref, watch, onBeforeUpdate } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
 const { $t } = useNuxtApp();
 const appConfig = useAppConfig();
@@ -7,7 +7,7 @@ const zIndex = computed(() => appConfig?.navigation?.zIndex || 100);
 const emit = defineEmits(["update:model-value"]);
 const dropdownTriggerRef = ref();
 const inputRef = ref();
-const optionRef = ref();
+const optionRefs = ref([]);
 const props = defineProps({
   orgs: { type: Array, required: true },
   modelValue: { type: Number, required: true }
@@ -29,7 +29,7 @@ const {
   keydownActionsOnTrigger,
   handleKeydown,
   handleDropdownSearch
-} = useDropdown(props.orgs, optionRef, inputRef, {
+} = useDropdown(props.orgs, optionRefs, inputRef, {
   searchable: true,
   trackBy: "name"
 });
@@ -50,7 +50,17 @@ const highlightedOrg = computed(() => {
   }
   return null;
 });
+onBeforeUpdate(() => {
+  optionRefs.value = [];
+});
+function setOptionRef(el, option) {
+  if (el) {
+    const index = props.orgs.findIndex((org) => org.id === option.id);
+    optionRefs.value[index] = el;
+  }
+}
 function handleSelectedOrg($event, orgId) {
+  const orgIndex = props.orgs.findIndex((org) => org.id === orgId);
   if ($event.type == "click") {
     localSelectedOrgId.value = orgId;
     emit("update:model-value", orgId);
@@ -61,7 +71,7 @@ function handleSelectedOrg($event, orgId) {
       localSelectedOrgId.value = orgId;
       emit("update:model-value", orgId);
     }
-    handleKeydown(keyEvent, orgId);
+    handleKeydown(keyEvent, orgIndex);
   }
 }
 </script>
@@ -110,7 +120,7 @@ function handleSelectedOrg($event, orgId) {
       <div
         v-for="option in sortedOrgs"
         :key="option.id"
-        ref="optionRef"
+        :ref="(el) => setOptionRef(el, option)"
         v-on-click-outside="onClickOutsideHandler"
         role="option"
         class="org-option"
@@ -119,7 +129,7 @@ function handleSelectedOrg($event, orgId) {
   highlighted: highlightedOrg && option.id === highlightedOrg.id
 }"
         :aria-selected="option.id === localSelectedOrgId"
-        tabindex="-1"
+        tabindex="0"
         @keydown="handleSelectedOrg($event, option.id)"
         @click="handleSelectedOrg($event, option.id)"
       >

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

@@ -44,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">
+                <button v-if="!lockedExpanded && allowCollapse && !expanded" ref="hamburgerButtonRef" class="hamburger-button">
                   <a-icon icon="24:hamburger" />
                 </button>
               </div>
@@ -93,9 +93,9 @@
 </template>
 
 <script setup>
-import { useSidebar, useBranding, useNuxtApp, ref, watch, computed, onMounted, onBeforeUnmount } from "#imports";
+import { useSidebar, useBranding, useNuxtApp, ref, watch, computed, onMounted, onBeforeUnmount, nextTick } from "#imports";
 import ApptegyLogo from "./Icons/ApptegyLogo.vue";
-import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
+import { useWindowSize } from "@vueuse/core";
 import Unpinned from "./Icons/Unpinned.vue";
 import Pinned from "./Icons/Pinned.vue";
 const { $t } = useNuxtApp();
@@ -134,11 +134,13 @@ const brandLogoRef = ref(null);
 const brandLogoWidthPx = ref(0);
 let brandLogoResizeObserver = null;
 const _brandLogoWidth = computed(() => brandLogoWidthPx.value);
-const breakpoints = useBreakpoints(breakpointsTailwind);
-const isMobile = breakpoints.smaller("md");
+const { width: windowWidth } = useWindowSize();
+const isMobile = computed(() => windowWidth.value < 600);
 const lockedExpanded = ref(true);
 const allowCollapse = ref(false);
 let focusOutTimeout = null;
+const hamburgerButtonRef = ref(null);
+let ignoreNextFocusIn = false;
 function updateBrandLogoWidth() {
   brandLogoWidthPx.value = brandLogoRef.value?.clientWidth ?? 0;
 }
@@ -180,6 +182,10 @@ function onHoverLeave() {
   }
 }
 function onFocusEnter() {
+  if (ignoreNextFocusIn) {
+    ignoreNextFocusIn = false;
+    return;
+  }
   if (focusOutTimeout) {
     clearTimeout(focusOutTimeout);
     focusOutTimeout = null;
@@ -196,10 +202,15 @@ function onFocusLeave() {
     focusOutTimeout = null;
   }, 100);
 }
-function closeSidebar() {
+async function closeSidebar() {
   expanded.value = false;
   lockedExpanded.value = false;
   allowCollapse.value = true;
+  ignoreNextFocusIn = true;
+  await nextTick();
+  if (hamburgerButtonRef.value) {
+    hamburgerButtonRef.value.focus();
+  }
 }
 function lockSidebar() {
   lockedExpanded.value = true;

package/package.json

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