@apptegy/nuxt-navigation 0.1.77 → 0.1.78

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.77",
+  "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/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.77",
+    "version": "0.1.78",
     "type": "module",
     "exports": {
         ".": {
@@ -46,5 +46,5 @@
         "vue": "^3.5.13",
         "vue-tsc": "^3.0.3"
     },
-    "gitHead": "112c6210e954838d100c8a5bf94c9f32d91152b1"
+    "gitHead": "0270d8823bc029e30d7e32ca8b331bba224250fb"
 }