@apptegy/nuxt-navigation 0.1.3 → 0.1.5

package/dist/runtime/composables/useDropdown.js

@@ -0,0 +1,204 @@
+import debounce from "lodash/debounce";
+import { ref, nextTick } from "vue";
+export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, config = { searchable: false, trackBy: "name" }) {
+  const active = ref(false);
+  const searchQuery = ref("");
+  async function toggleDropdown($event) {
+    active.value = !active.value;
+    if ($event instanceof KeyboardEvent && active.value && $event.key === "ArrowDown") {
+      await nextTick(() => {
+        dropdownOptionsRef.value[0].focus();
+      });
+    }
+  }
+  function openDropdown() {
+    active.value = true;
+  }
+  function closeDropdown() {
+    active.value = false;
+  }
+  function onClickOutsideHandler() {
+    if (!active.value)
+      return;
+    closeDropdown();
+  }
+  function keydownActionsOnTrigger(event) {
+    if (event.ctrlKey || event.metaKey || event.shiftKey)
+      return;
+    if (event.key !== "Tab") {
+      event.preventDefault();
+    }
+    switch (event.key) {
+      case "Tab":
+        if (!active.value)
+          return;
+        closeDropdown();
+        break;
+      case "ArrowDown":
+        if (active.value && event.key === "ArrowDown") {
+          nextTick(() => {
+            dropdownOptionsRef.value[0].focus();
+            openDropdown();
+          });
+        }
+        break;
+      case "ArrowUp":
+        openDropdown();
+        if (config.searchable) {
+          nextTick(() => {
+            dropdownOptionsRef.value[0].focus();
+          });
+        }
+        break;
+      case " ":
+        if (active.value) {
+          closeDropdown();
+          nextTick(() => {
+            dropdownTriggerRef.value.focus();
+          });
+        } else {
+          openDropdown();
+        }
+        break;
+      case "Enter":
+        if (active.value) {
+          closeDropdown();
+          nextTick(() => {
+            dropdownTriggerRef.value.focus();
+          });
+        } else {
+          searchQuery.value = "";
+          openDropdown();
+        }
+        break;
+      case "Escape":
+        closeDropdown();
+        dropdownTriggerRef.value.focus();
+        break;
+      case "Home":
+        openDropdown();
+        nextTick(() => {
+          dropdownOptionsRef.value[0].focus();
+        });
+        break;
+      case "End":
+        openDropdown();
+        nextTick(() => {
+          dropdownOptionsRef.value[options.length - 1].focus();
+        });
+        break;
+      default:
+        handleDropdownSearch(event);
+        break;
+    }
+  }
+  function handleKeydown(event, index) {
+    if (event.ctrlKey || event.metaKey || event.shiftKey)
+      return;
+    if (event.altKey && event.key === "ArrowUp") {
+      closeDropdown();
+      dropdownTriggerRef.value.focus();
+      return index;
+    }
+    switch (event.key) {
+      case "Enter":
+        nextTick(() => {
+          closeDropdown();
+          dropdownTriggerRef.value.focus();
+          return index;
+        });
+        break;
+      case " ":
+        nextTick(() => {
+          closeDropdown();
+          dropdownTriggerRef.value.focus();
+          return index;
+        });
+        break;
+      case "Tab":
+        nextTick(() => {
+          closeDropdown();
+          return index;
+        });
+        break;
+      case "Escape":
+        nextTick(() => {
+          closeDropdown();
+          dropdownTriggerRef.value.focus();
+        });
+        break;
+      case "ArrowDown":
+        if (index === options.length - 1)
+          break;
+        nextTick(() => {
+          dropdownOptionsRef.value[index + 1].focus();
+        });
+        return index;
+      case "ArrowUp":
+        if (index === 0)
+          break;
+        nextTick(() => {
+          dropdownOptionsRef.value[index - 1].focus();
+        });
+        return index;
+      case "Home":
+        nextTick(() => {
+          dropdownOptionsRef.value[0].focus();
+        });
+        return index;
+      case "End":
+        nextTick(() => {
+          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();
+        return index;
+      }
+      case "PageUp": {
+        const pageUpIndexToJump = index - 10 < 0 ? index - 10 : 0;
+        dropdownOptionsRef.value[pageUpIndexToJump].focus();
+        return index;
+      }
+      default:
+        handleDropdownSearch(event);
+        break;
+    }
+  }
+  const debouncedFocus = debounce((idx) => {
+    dropdownOptionsRef.value[idx].focus();
+  }, 500);
+  function handleDropdownSearch(inputValue) {
+    if (!config.searchable)
+      return;
+    if (inputValue.key == "Backspace") {
+      searchQuery.value = searchQuery.value.slice(0, -1);
+      return;
+    }
+    const pressedKey = inputValue.key || inputValue.data;
+    searchQuery.value = `${searchQuery.value}${pressedKey}`;
+    const searchIndex = options.findIndex((option) => {
+      if (!config.trackBy) {
+        return option.includes(searchQuery.value);
+      } else {
+        return option[config.trackBy].toLowerCase().includes(searchQuery.value.toLowerCase());
+      }
+    });
+    if (searchIndex !== -1) {
+      debouncedFocus(searchIndex);
+    }
+  }
+  return {
+    active,
+    searchQuery,
+    toggleDropdown,
+    openDropdown,
+    closeDropdown,
+    onClickOutsideHandler,
+    keydownActionsOnTrigger,
+    handleKeydown,
+    handleDropdownSearch,
+    debouncedFocus
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "exports": {
     ".": {
@@ -26,26 +26,24 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.3"
+    "@nuxt/kit": "^3.12.4",
+    "@vueuse/components": "11.0.1",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@iconify/vue": "^4.1.2",
-    "@nuxt/devtools": "^1.3.9",
-    "@nuxt/eslint-config": "^0.3.13",
-    "@apptegy/icons": "2.10.0",
-    "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/schema": "^3.12.3",
-    "@nuxt/test-utils": "^3.13.1",
-    "@types/node": "^20.14.10",
-    "@vueuse/components": "10.11.0",
+    "@nuxt/devtools": "^1.3.14",
+    "@nuxt/eslint-config": "^0.5.1",
+    "@nuxt/module-builder": "^0.8.3",
+    "@nuxt/schema": "^3.12.4",
+    "@nuxt/test-utils": "^3.14.1",
+    "@types/node": "^20.16.1",
     "changelogen": "^0.5.5",
-    "eslint": "^9.7.0",
-    "lodash": "^4.17.21",
-    "nuxt": "^3.12.3",
+    "eslint": "^9.9.0",
+    "nuxt": "^3.12.4",
     "sass": "^1.77.8",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "vitest": "^1.6.0",
-    "vue": "^3.4.21",
-    "vue-tsc": "^2.0.26"
+    "vue": "^3.4.38",
+    "vue-tsc": "^2.0.29"
   }
 }

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

@@ -1,33 +0,0 @@
-export declare function useDropdown(): {
-    active: import("vue").Ref<boolean>;
-    newQuery: import("vue").Ref<string>;
-    toggleDropdown: ($event: {
-        key: string;
-    }, optionRef: {
-        focus: () => void;
-    }[]) => Promise<void>;
-    openDropdown: () => void;
-    closeDropdown: () => void;
-    onClickOutsideHandler: () => void;
-    keydownActionsOnTrigger: (event: {
-        key: string;
-        preventDefault: () => void;
-    }, options: any[], optionRef: {
-        focus: () => void;
-    }[], dropdownTriggerRef: {
-        focus: () => void;
-    }, searchable: false, inputRef: {
-        focus: () => void;
-    }) => void;
-    handleKeydown: (options: any[], optionIndex: number, event: {
-        key: string;
-    }, optionRef: {
-        focus: () => void;
-    }[], triggerRef: {
-        focus: () => void;
-    }) => number | undefined;
-    handleDropdownSearch: (val: string, orgs: any[], optionRef: {
-        focus: () => void;
-    }[]) => void;
-    debouncedFocus: any;
-};

package/dist/runtime/composables/accessibleActions.js

@@ -1,195 +0,0 @@
-import debounce from "lodash/debounce";
-import { ref, nextTick } from "vue";
-export function useDropdown() {
-  const active = ref(false);
-  let newQuery = ref("");
-  async function toggleDropdown($event, optionRef) {
-    active.value = !active.value;
-    if (active.value && $event.key === "ArrowDown") {
-      await nextTick(() => {
-        optionRef[0].focus();
-      });
-    }
-  }
-  function openDropdown() {
-    active.value = true;
-  }
-  function closeDropdown() {
-    active.value = false;
-  }
-  function onClickOutsideHandler() {
-    if (!active.value)
-      return;
-    closeDropdown();
-  }
-  function keydownActionsOnTrigger(event, options, optionRef, dropdownTriggerRef, searchable, inputRef) {
-    if (event.key !== "Tab") {
-      event.preventDefault();
-    }
-    switch (event.key) {
-      case "Tab":
-        if (!active.value)
-          return;
-        closeDropdown();
-        break;
-      case "ArrowDown":
-        nextTick(() => {
-          if (active.value && event.key === "ArrowDown") {
-            optionRef[0].focus();
-          }
-          openDropdown();
-        });
-        break;
-      case "ArrowUp":
-        openDropdown();
-        nextTick(() => {
-          if (searchable) {
-            return;
-          }
-          optionRef[0].focus();
-        });
-        break;
-      case " ":
-        if (active.value) {
-          closeDropdown();
-          nextTick(() => {
-            dropdownTriggerRef.focus();
-          });
-        } else {
-          openDropdown();
-        }
-        break;
-      case "Enter":
-        if (active.value) {
-          closeDropdown();
-          nextTick(() => {
-            dropdownTriggerRef.focus();
-          });
-        } else {
-          nextTick(() => {
-            openDropdown();
-          });
-        }
-        break;
-      case "Escape":
-        closeDropdown();
-        dropdownTriggerRef.focus();
-        break;
-      case "Home":
-        openDropdown();
-        nextTick(() => {
-          optionRef[0].focus();
-        });
-        break;
-      case "End":
-        openDropdown();
-        nextTick(() => {
-          optionRef[options.length - 1].focus();
-        });
-        break;
-      default:
-        debounce(handleDropdownSearch(event.key, options, optionRef), 500);
-        break;
-    }
-  }
-  function handleKeydown(options, optionIndex, event, optionRef, triggerRef) {
-    if (event.altKey && event.key === "ArrowUp") {
-      closeDropdown();
-      triggerRef.focus();
-      return optionIndex;
-    }
-    switch (event.key) {
-      case "Enter":
-        nextTick(() => {
-          closeDropdown();
-          triggerRef.focus();
-          return optionIndex;
-        });
-        break;
-      case " ":
-        nextTick(() => {
-          closeDropdown();
-          triggerRef.focus();
-          return optionIndex;
-        });
-        break;
-      case "Tab":
-        nextTick(() => {
-          closeDropdown();
-          return optionIndex;
-        });
-        break;
-      case "Escape":
-        nextTick(() => {
-          closeDropdown();
-          triggerRef.focus();
-        });
-        break;
-      case "ArrowDown":
-        if (optionIndex === options.length - 1)
-          break;
-        nextTick(() => {
-          optionRef[optionIndex + 1].focus();
-        });
-        return optionIndex;
-      case "ArrowUp":
-        if (optionIndex === 0)
-          break;
-        nextTick(() => {
-          optionRef[optionIndex - 1].focus();
-        });
-        return optionIndex;
-      case "Home":
-        nextTick(() => {
-          optionRef[0].focus();
-        });
-        return optionIndex;
-      case "End":
-        nextTick(() => {
-          optionRef[options.length - 1].focus();
-        });
-        return optionIndex;
-      case "PageDown": {
-        const pageDownIndexToJump = optionIndex + 10 > options.length ? optionIndex + 10 : options.length - 1;
-        optionRef[pageDownIndexToJump].focus();
-        return optionIndex;
-      }
-      case "PageUp": {
-        const pageUpIndexToJump = optionIndex - 10 < 0 ? optionIndex - 10 : 0;
-        optionRef[pageUpIndexToJump].focus();
-        return optionIndex;
-      }
-      default:
-        handleDropdownSearch(event.key, options, optionRef);
-        break;
-    }
-  }
-  const debouncedFocus = debounce((idx, optionRef) => {
-    optionRef[idx].focus();
-  }, 500);
-  function handleDropdownSearch(val, orgs, optionRef) {
-    if (val == "Backspace") {
-      newQuery.value = newQuery.value.slice(0, -1);
-      return;
-    }
-    newQuery.value = `${newQuery.value}${val}`;
-    const searchIndex = orgs.findIndex(
-      (option) => option.name.toLowerCase().includes(newQuery.value.toLowerCase())
-    );
-    if (searchIndex !== -1) {
-      debouncedFocus(searchIndex, optionRef);
-    }
-  }
-  return {
-    active,
-    newQuery,
-    toggleDropdown,
-    openDropdown,
-    closeDropdown,
-    onClickOutsideHandler,
-    keydownActionsOnTrigger,
-    handleKeydown,
-    handleDropdownSearch,
-    debouncedFocus
-  };
-}