@apptegy/nuxt-navigation 1.0.0-alpha.1 → 1.0.0

package/dist/runtime/composables/useDropdown.js

@@ -1,236 +0,0 @@
-import { useDebounceFn } from "@vueuse/core";
-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") {
-      await nextTick(() => {
-        dropdownOptionsRef.value[0].focus();
-      });
-    }
-  }
-  function openDropdown() {
-    active.value = true;
-  }
-  function closeDropdown() {
-    active.value = false;
-    searchQuery.value = "";
-    highlightedIndex.value = -1;
-  }
-  function onClickOutsideHandler() {
-    if (!active.value) return;
-    closeDropdown();
-  }
-  function keydownActionsOnTrigger(event) {
-    if (event.ctrlKey || event.metaKey || event.shiftKey) return;
-    if (config.searchable && active.value && (event.key.length === 1 || event.key === "Backspace")) {
-    } else 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") {
-          event.preventDefault();
-          nextTick(() => {
-            const targetIndex = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
-            dropdownOptionsRef.value[targetIndex]?.focus();
-            openDropdown();
-          });
-        }
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        openDropdown();
-        if (config.searchable) {
-          nextTick(() => {
-            const targetIndex = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
-            dropdownOptionsRef.value[targetIndex]?.focus();
-          });
-        }
-        break;
-      case "ArrowLeft":
-      case "ArrowRight":
-        break;
-      case " ":
-        if (config.searchable && active.value) {
-          return;
-        }
-        if (active.value) {
-          closeDropdown();
-          nextTick(() => {
-            dropdownTriggerRef.value.focus();
-          });
-        } else {
-          openDropdown();
-        }
-        break;
-      case "Enter":
-        if (active.value) {
-          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;
-      case "Escape":
-        closeDropdown();
-        dropdownTriggerRef.value.focus();
-        break;
-      case "Home":
-        event.preventDefault();
-        openDropdown();
-        nextTick(() => {
-          const targetIndex = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
-          dropdownOptionsRef.value[targetIndex]?.focus();
-        });
-        break;
-      case "End":
-        openDropdown();
-        nextTick(() => {
-          dropdownOptionsRef.value[options.length - 1]?.focus();
-        });
-        break;
-      default:
-        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 "ArrowLeft":
-      case "ArrowRight":
-        break;
-      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 = useDebounceFn((idx) => {
-    dropdownOptionsRef.value[idx]?.focus();
-  }, 500);
-  function handleDropdownSearch(inputValue) {
-    if (!config.searchable) return;
-    if (inputValue.target && "value" in inputValue.target) {
-      searchQuery.value = inputValue.target.value;
-      updateHighlightedIndex();
-    }
-  }
-  function updateHighlightedIndex() {
-    const searchIndex = options.findIndex((option) => {
-      if (!searchQuery.value) return false;
-      if (!config.trackBy) {
-        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).toLowerCase().includes(searchQuery.value.toLowerCase());
-        }
-      }
-      return false;
-    });
-    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,
-    onClickOutsideHandler,
-    keydownActionsOnTrigger,
-    handleKeydown,
-    handleDropdownSearch,
-    debouncedFocus
-  };
-}

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

@@ -1,5 +0,0 @@
-export declare function useSidebar(): {
-    state: import("vue").Ref<boolean, boolean>;
-    toggleSidebar: () => void;
-    sidebarWidth: import("vue").ComputedRef<"264px" | "0px">;
-};

package/dist/runtime/composables/useSidebar.js

@@ -1,13 +0,0 @@
-import { useState, ref, computed } from "#imports";
-export function useSidebar() {
-  const state = useState("navigation:sidebar", () => ref(true));
-  function toggleSidebar() {
-    state.value = !state.value;
-  }
-  const sidebarWidth = computed(() => state.value ? "264px" : "0px");
-  return {
-    state,
-    toggleSidebar,
-    sidebarWidth
-  };
-}

package/dist/runtime/types/index.d.ts

@@ -1,13 +0,0 @@
-export interface IApplication {
-    id: number;
-    text: string;
-    url: string;
-    img_src: string;
-}
-export interface IUser {
-    show: boolean;
-    email: string;
-    phone_number: string;
-    client: string;
-    admin_email: string;
-}

package/locale/en.json

@@ -1,20 +0,0 @@
-{
-  "navigation": {
-    "logout": "Logout",
-    "accountSettings": "Account settings",
-    "helpCenter": "Help center",
-    "helpArticles": "Help articles",
-    "impersonating": "Impersonating",
-    "clientName": "Client name",
-    "authenticatedAs": "Authenticated as",
-    "skipToContent": "Skip to content",
-    "orgDropdown": "Organization options",
-    "orgPlaceholder": "Start typing to search",
-    "orgBadge": "Intranet",
-    "sidebarToggle": "Menu",
-    "userDropdown": "User settings",
-    "logoAlt": "Thrillshare - Return Home",
-    "brandLogoAlt": "Logo",
-    "website": "School Website"
-  }
-}

package/locale/index.js

@@ -1,7 +0,0 @@
-import navigationLocale from './en.json';
-
-export default {
-	dscl: {
-		...navigationLocale
-	}
-}