@apptegy/nuxt-navigation 0.1.76 → 0.1.78

package/dist/module.json

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

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

@@ -6,6 +6,7 @@ const appConfig = useAppConfig();
 const zIndex = computed(() => appConfig?.navigation?.zIndex || 100);
 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);
@@ -17,13 +18,14 @@ const props = defineProps({
 const {
   active,
   searchQuery,
+  highlightedIndex,
   toggleDropdown,
   closeDropdown,
   onClickOutsideHandler,
   keydownActionsOnTrigger,
   handleKeydown,
   handleDropdownSearch
-} = useDropdown(props.orgs, optionRef, dropdownTriggerRef, {
+} = useDropdown(props.orgs, optionRef, inputRef, {
   searchable: true,
   trackBy: "name"
 });
@@ -38,6 +40,12 @@ const sortedOrgs = computed(() => {
     }
   });
 });
+const highlightedOrg = computed(() => {
+  if (highlightedIndex.value >= 0 && highlightedIndex.value < props.orgs.length) {
+    return props.orgs[highlightedIndex.value];
+  }
+  return null;
+});
 function handleSelectedOrg($event, orgId) {
   if ($event.type == "click") {
     emit("update:model-value", orgId);
@@ -97,7 +105,10 @@ function handleSelectedOrg($event, orgId) {
         v-on-click-outside="onClickOutsideHandler"
         role="option"
         class="org-option"
-        :class="{ selected: option.id === modelValue }"
+        :class="{
+  selected: option.id === modelValue,
+  highlighted: highlightedOrg && option.id === highlightedOrg.id
+}"
         :aria-selected="option.id === modelValue"
         tabindex="-1"
         @keydown="handleSelectedOrg($event, option.id)"
@@ -179,6 +190,9 @@ function handleSelectedOrg($event, orgId) {
   background-position: center left 15px;
   color: var(--purple);
 }
+.org-selection .dropdown .org-option.highlighted {
+  background-color: #f8f6fc;
+}
 .org-selection .dropdown .org-option:focus-visible, .org-selection .dropdown .org-option:hover {
   background-color: #f8f6fc;
 }

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

@@ -20,21 +20,21 @@
         <div :class="['header-actions', { 'collapsed': !expanded && !isMobile }]">
             <NuxtLink v-if="expanded" class="no-link-style" :to="homepageUrl">
               <slot name="logo">
-                    <div class="navbar--logo">
-                      <img v-if="brandLogo" :src="brandLogo" :alt="$t('navigation.brandLogoAlt')">
-                      <component
-                      :is="ApptegyLogo"
-                      v-else
-                      :alt="$t('navigation.brandLogoAlt')"
-                      :use-light-logo="isAdmin || Object.values(getBrandingStyles).length === 0"
-                      />
-                      <div v-if="!brand?.hide_school_name">
-                        <div class="school-name"> {{ brand?.school_name }} </div>
-                        <div v-if="brand?.school_tag_line" class="school-tag">{{ brand.school_tag_line }}</div>
-                      </div>
+                  <div class="navbar--logo" :class="{ 'big-logo': _brandLogoWidth > 80 }">
+                    <img v-if="brandLogo" ref="brandLogoRef" :src="brandLogo" :alt="$t('navigation.brandLogoAlt')">
+                    <component
+                    :is="ApptegyLogo"
+                    v-else
+                    :alt="$t('navigation.brandLogoAlt')"
+                    :use-light-logo="isAdmin || Object.values(getBrandingStyles).length === 0"
+                    />
+                    <div v-if="!brand?.hide_school_name">
+                      <div class="school-name"> {{ brand?.school_name }} </div>
+                      <div v-if="brand?.school_tag_line" class="school-tag">{{ brand.school_tag_line }}</div>
                     </div>
-                </slot>
-              </NuxtLink>
+                  </div>
+              </slot>
+            </NuxtLink>
               <div v-if="!isMobile && showCollapseButton">
                 <button v-if="lockedExpanded && !allowCollapse && expanded" class="hamburger-button" @click="closeSidebar" v-tooltip.bottom="'Unpin menu'">
                   <Pinned />
@@ -91,7 +91,7 @@
 </template>
 
 <script setup>
-import { useSidebar, useBranding, useNuxtApp, ref, watch } from "#imports";
+import { useSidebar, useBranding, useNuxtApp, ref, watch, computed, onMounted, onBeforeUnmount } from "#imports";
 import ApptegyLogo from "./Icons/ApptegyLogo.vue";
 import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
 import Unpinned from "./Icons/Unpinned.vue";
@@ -128,10 +128,30 @@ const emit = defineEmits(["toggle-expand"]);
 const { state: expanded } = useSidebar();
 const { brand, getBrandingStyles } = await useBranding(props.clientId);
 const brandLogo = ref(brand.value?.logo_light);
+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 lockedExpanded = ref(true);
 const allowCollapse = ref(false);
+function updateBrandLogoWidth() {
+  brandLogoWidthPx.value = brandLogoRef.value?.clientWidth ?? 0;
+}
+onMounted(() => {
+  updateBrandLogoWidth();
+  if (brandLogoRef.value) {
+    brandLogoResizeObserver = new ResizeObserver(() => {
+      updateBrandLogoWidth();
+    });
+    brandLogoResizeObserver.observe(brandLogoRef.value);
+  }
+});
+onBeforeUnmount(() => {
+  brandLogoResizeObserver?.disconnect();
+  brandLogoResizeObserver = null;
+});
 watch(expanded, (value) => {
   emit("toggle-expand", value ? 264 : 64);
 });
@@ -223,6 +243,10 @@ function lockSidebar() {
   align-items: center;
   gap: 8px;
 }
+.navbar--logo.big-logo {
+  flex-direction: column;
+  align-items: flex-start;
+}
 .navbar--logo .school-name {
   font-size: 16px;
   font-style: normal;

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

@@ -6,13 +6,14 @@ export declare function useDropdown(options: Array<OptionItem>, dropdownOptionsR
 }): {
     active: Ref<boolean, boolean>;
     searchQuery: Ref<string, string>;
+    highlightedIndex: Ref<number, number>;
     toggleDropdown: ($event: KeyboardEvent | MouseEvent) => Promise<void>;
     openDropdown: () => void;
     closeDropdown: () => void;
     onClickOutsideHandler: () => void;
     keydownActionsOnTrigger: (event: KeyboardEvent) => void;
     handleKeydown: (event: KeyboardEvent, index: number) => number | undefined;
-    handleDropdownSearch: (inputValue: KeyboardEvent & InputEvent) => void;
+    handleDropdownSearch: (inputValue: Event) => void;
     debouncedFocus: import("@vueuse/core").PromisifyFn<(idx: number) => void>;
 };
 export {};

package/dist/runtime/composables/useDropdown.js

@@ -3,6 +3,7 @@ import { ref, nextTick } from "#imports";
 export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, config = { searchable: false, trackBy: "name" }) {
   const active = ref(false);
   const searchQuery = ref("");
+  const highlightedIndex = ref(-1);
   async function toggleDropdown($event) {
     active.value = !active.value;
     if ($event instanceof KeyboardEvent && active.value && $event.key === "ArrowDown") {
@@ -16,6 +17,8 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
   }
   function closeDropdown() {
     active.value = false;
+    searchQuery.value = "";
+    highlightedIndex.value = -1;
   }
   function onClickOutsideHandler() {
     if (!active.value) return;
@@ -23,7 +26,8 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
   }
   function keydownActionsOnTrigger(event) {
     if (event.ctrlKey || event.metaKey || event.shiftKey) return;
-    if (event.key !== "Tab") {
+    if (config.searchable && active.value && (event.key.length === 1 || event.key === "Backspace")) {
+    } else if (event.key !== "Tab") {
       event.preventDefault();
     }
     switch (event.key) {
@@ -33,17 +37,21 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
         break;
       case "ArrowDown":
         if (active.value && event.key === "ArrowDown") {
+          event.preventDefault();
           nextTick(() => {
-            dropdownOptionsRef.value[0].focus();
+            const targetIndex = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
+            dropdownOptionsRef.value[targetIndex]?.focus();
             openDropdown();
           });
         }
         break;
       case "ArrowUp":
+        event.preventDefault();
         openDropdown();
         if (config.searchable) {
           nextTick(() => {
-            dropdownOptionsRef.value[0].focus();
+            const targetIndex = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
+            dropdownOptionsRef.value[targetIndex]?.focus();
           });
         }
         break;
@@ -51,6 +59,9 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
       case "ArrowRight":
         break;
       case " ":
+        if (config.searchable && active.value) {
+          return;
+        }
         if (active.value) {
           closeDropdown();
           nextTick(() => {
@@ -62,12 +73,19 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
         break;
       case "Enter":
         if (active.value) {
-          closeDropdown();
-          nextTick(() => {
-            dropdownTriggerRef.value.focus();
-          });
+          if (highlightedIndex.value >= 0 && highlightedIndex.value < options.length) {
+            nextTick(() => {
+              dropdownOptionsRef.value[highlightedIndex.value]?.focus();
+            });
+          } else {
+            closeDropdown();
+            nextTick(() => {
+              dropdownTriggerRef.value.focus();
+            });
+          }
         } else {
           searchQuery.value = "";
+          highlightedIndex.value = -1;
           openDropdown();
         }
         break;
@@ -76,9 +94,11 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
         dropdownTriggerRef.value.focus();
         break;
       case "Home":
+        event.preventDefault();
         openDropdown();
         nextTick(() => {
-          dropdownOptionsRef.value[0].focus();
+          const targetIndex = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
+          dropdownOptionsRef.value[targetIndex]?.focus();
         });
         break;
       case "End":
@@ -88,7 +108,6 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
         });
         break;
       default:
-        handleDropdownSearch(event);
         break;
     }
   }
@@ -171,32 +190,40 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
   }, 500);
   function handleDropdownSearch(inputValue) {
     if (!config.searchable) return;
-    if (inputValue.key == "Backspace") {
-      searchQuery.value = searchQuery.value.slice(0, -1);
-      return;
+    if (inputValue.target && "value" in inputValue.target) {
+      searchQuery.value = inputValue.target.value;
+      updateHighlightedIndex();
     }
-    const pressedKey = inputValue.key || inputValue.data;
-    searchQuery.value = `${searchQuery.value}${pressedKey}`;
+  }
+  function updateHighlightedIndex() {
     const searchIndex = options.findIndex((option) => {
+      if (!searchQuery.value) return false;
       if (!config.trackBy) {
-        return typeof option === "string" && option.includes(searchQuery.value);
+        return typeof option === "string" && option.toLowerCase().includes(searchQuery.value.toLowerCase());
       } else if (typeof option === "object" && option !== null && config.trackBy in option) {
         const value = option[config.trackBy];
         if (typeof value === "string") {
           return value.toLowerCase().includes(searchQuery.value.toLowerCase());
         } else if (value !== null && value !== void 0) {
-          return String(value).includes(searchQuery.value);
+          return String(value).toLowerCase().includes(searchQuery.value.toLowerCase());
         }
       }
       return false;
     });
-    if (searchIndex !== -1) {
-      debouncedFocus(searchIndex);
+    highlightedIndex.value = searchIndex;
+    if (searchIndex >= 0 && dropdownOptionsRef.value[searchIndex]) {
+      nextTick(() => {
+        dropdownOptionsRef.value[searchIndex]?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth"
+        });
+      });
     }
   }
   return {
     active,
     searchQuery,
+    highlightedIndex,
     toggleDropdown,
     openDropdown,
     closeDropdown,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apptegy/nuxt-navigation",
-    "version": "0.1.76",
+    "version": "0.1.78",
     "type": "module",
     "exports": {
         ".": {
@@ -46,5 +46,5 @@
         "vue": "^3.5.13",
         "vue-tsc": "^3.0.3"
     },
-    "gitHead": "b115e75078e5a86f7ce2d2b358f68dbcdd43617a"
+    "gitHead": "0270d8823bc029e30d7e32ca8b331bba224250fb"
 }