@apptegy/nuxt-navigation 0.1.3 → 0.1.4

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "builder": {
     "@nuxt/module-builder": "0.8.1",
     "unbuild": "unknown"

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

@@ -3,117 +3,35 @@
     :class="{ sticky }"
     role="banner"
   >
-    <button
-      class="sidebar-toggle"
-      @click="toggleSidebar">
-        <a-icon
-          class="icon"
-          icon="16:apptegy"
-        />
-        <span>Menu</span>
-    </button >
+    <NavSidebarToggle @toggle-sidebar="$emit('toggle-sidebar')"/>
     <div class="header__breadcrumbs">
       <slot name="breadcrumbs" />
     </div>
     <slot name="org-select" />
     <slot name="user-controls" />
-    <div
-      ref="settingsTriggerRef"
-      aria-controls="settings-dropdown"
-      :aria-expanded="active"
-      aria-haspopup="listbox"
-      role="combobox"
-      tabindex="0"
-      class="header__dropdown"
-      @keydown="keydownActionsOnTrigger($event, userSettingsOptions, settingsOptionsRef, settingsTriggerRef, false, '')"
-      @click.prevent="toggleDropdown($event, settingsOptionsRef)">
-      <NavAvatar
-        :name="user.name"
-        :src="user.avatar"
-      />
-      <a-icon
-        class="icon"
-        icon="24:hamburger"
-      />
-      <span class="sr-only">Account Settings</span>
-    </div>
-    <div
-      v-show="active"
-      id="settings-dropdown"
-      class="options-dropdown"
-      role="listbox"
-    >
-      <div
-        v-for ="(option, idx) in userSettingsOptions"
-        v-on-click-outside="onClickOutsideHandler"
-        ref="settingsOptionsRef"
-        :key="option.label"
-        role="option"
-        class="option"
-        tabindex="-1"
-        @keydown="handleKeydownAction(userSettingsOptions, idx, $event, settingsOptionsRef, settingsTriggerRef)"
-        @click="handleSelectedClick(idx)"
-      >
-        <NuxtLink :to="option.url">
-          {{ option.label }}
-          <a-icon
-            :icon="option.icon"
-            color="black"
-            font-size="32px"
-          />
-        </NuxtLink>
-      </div>
-    </div>
+    <NavUserDropdown :user :user-dropdown-options :selected-option @select-option="$emit('selectedOption')"/>
   </header>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useDropdown } from '../../composables/accessibleActions.js';
-import { vOnClickOutside } from '@vueuse/components';
-
-const {
-  active,
-  toggleDropdown,
-  closeDropdown,
-  keydownActionsOnTrigger,
-  handleKeydown,
-  onClickOutsideHandler,
-} = useDropdown();
 
 interface IHeaderProps {
+  sticky?: boolean;
+}
+
+interface IUserDropdown {
   user: {
     name: string;
     avatar?: string;
   };
-  sticky?: boolean;
-  userSettingsOptions: Array<any>;
-  selectedSetting?: {}
+  userDropdownOptions: Array<unknown>;
+  selectedOption?: unknown
 }
 
-const props = defineProps<IHeaderProps>();
 
-const settingsTriggerRef = ref();
-const settingsOptionsRef = ref();
-
-const emit = defineEmits(['toggle-sidebar', 'select-setting']);
-
-function handleSelectedClick(index: number) {
-  emit('select-setting', index);
-  closeDropdown();
-}
-
-function handleKeydownAction(userSettingsOptions: any[], idx: number, $event: { key: string | boolean; }, optionRef: { focus: () => void; }[], dropdownTriggerRef: { focus: () => void; }) {
-  if ($event.key === 'Enter' || $event.key === ' ')  {
-    emit('select-setting', idx);
-  } else {
-    handleKeydown(userSettingsOptions, idx, $event, optionRef, dropdownTriggerRef);
-  }
-}
+defineProps<IHeaderProps & IUserDropdown>();
+defineEmits(['toggle-sidebar', 'selectedOption']);
 
-function toggleSidebar() {
-  emit('toggle-sidebar');
-}
 </script>
 
 <style scoped>
@@ -138,66 +56,4 @@ header {
 header.sticky {
   position: sticky;
 }
-header .sidebar-toggle {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  background: var(--purple-20);
-  border: none;
-  border-radius: 4px;
-  padding: 8px 16px;
-  color: var(--purple);
-  cursor: pointer;
-}
-header .sidebar-toggle:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
-}
-header .header__dropdown {
-  font-size: 24px;
-  min-width: 64px;
-  width: 64px;
-  max-width: 64px;
-  border: none;
-  padding: 0;
-  outline: none;
-  color: var(--purple);
-  background: var(--purple-20);
-  border-radius: 16px;
-  overflow: hidden;
-  text-align: left;
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-header .header__dropdown:focus {
-  box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
-}
-header .header__dropdown .avatar-container:focus {
-  outline: none;
-}
-header .options-dropdown {
-  min-height: 100px;
-  position: absolute;
-  width: 198px;
-  right: 65px;
-  top: 80px;
-  background-color: #FFFFFF;
-  border-radius: 4px;
-  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
-  padding: 12px 0;
-  z-index: 10;
-}
-header .options-dropdown .option {
-  padding: 12px 16px;
-  cursor: pointer;
-}
-header .options-dropdown .option a {
-  color: #333;
-  text-decoration: none;
-}
-header .options-dropdown .option:focus-visible, header .options-dropdown .option:hover {
-  background-color: #F8F6FC;
-}
 </style>

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

@@ -1,15 +1,15 @@
 <template>
   <div class="help-btn-wrapper">
     <div
-      class="help-btn-actions"
       ref="helpBtnActions"
-      :class="{ expanded: expanded && navbarExpanded }"
-      :style="{ 'max-height': `${expanded && navbarExpanded ? dropdownScrollHeight : 0}px` }"
+      class="help-btn-actions"
+      :class="{ expanded: expanded }"
+      :style="{ 'max-height': `${expanded ? dropdownScrollHeight : 0}px` }"
     >
       <button
         v-for="(option, idx) in helpArticleOptions"
-        :key="idx"
         :id="`help-btn-${option.id}`"
+        :key="idx"
         class="help-btn-action"
       >
         {{ option.text }}
@@ -20,18 +20,18 @@
       :class="['help-articles-btn', !isDropdown && 'help-btn']"
       @click="expandDropdown"
     >
-      <img v-if="isDropdown" src="../../assets/img/help-toggle.svg" alt="" class="help-center-btn-icon" />
-      <img v-else src="../../assets/img/help.svg" alt="" class="help-center-btn-icon" />
-      <span v-if="navbarExpanded">
+      <img v-if="isDropdown" src="../../assets/img/help-toggle.svg" alt="" class="help-center-btn-icon">
+      <img v-else src="../../assets/img/help.svg" alt="" class="help-center-btn-icon">
+      <span>
         {{ isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles') }}
       </span>
       <img
-        v-if="isDropdown && navbarExpanded && !hasArticles"
+        v-if="isDropdown && !hasArticles"
         class="caret-icon"
         :class="{ collapse: !expanded }"
         src="../../assets/img/navbar-up.svg"
         alt=""
-      />
+      >
     </button>
   </div>
 </template>
@@ -40,8 +40,7 @@
 import { ref, computed, onMounted } from 'vue'
 
 interface IHelpArticlesProps {
-  navbarExpanded: boolean;
-  helpArticleOptions: Array<any>;
+  helpArticleOptions: Array<unknown>;
 };
 
 const props = withDefaults(defineProps<IHelpArticlesProps>(), {
@@ -53,9 +52,7 @@ const helpBtnActions = ref();
 const dropdownScrollHeight = ref(0);
 const isDropdown = ref(false);
 
-const hasArticles = computed(() => {
- return !!props.helpArticleOptions?.values?.length
-})
+const hasArticles = computed(() => !!props.helpArticleOptions?.values?.length)
 
 onMounted(() => {
   isDropdown.value = !!props.helpArticleOptions?.values?.length;
@@ -63,9 +60,7 @@ onMounted(() => {
 });
 
 function expandDropdown() {
-  if (!isDropdown) {
-    return;
-  }
+  if (!isDropdown.value) return;
   expanded.value = !expanded.value;
 };
 
@@ -78,6 +73,7 @@ function expandDropdown() {
   flex-direction: column;
   align-items: center;
   width: 100%;
+  text-transform: uppercase;
 }
 .help-btn-wrapper .help-articles-btn {
   cursor: pointer;
@@ -87,6 +83,7 @@ function expandDropdown() {
   background: none;
   padding: 8px 10px 8px 16px;
   border: none;
+  text-transform: inherit;
 }
 .help-btn-wrapper .help-articles-btn:focus-visible {
   outline: var(--orange) solid 2px;

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

@@ -1,21 +1,21 @@
 <template>
-  <div class="a-nav-section animated" id="impersonate-info">
-    <button v-if="navbarExpanded" class="a-nav-section--title" @click="expanded = !expanded">
+  <div id="impersonate-info" class="a-nav-section animated">
+    <button class="a-nav-section--title" @click="expanded = !expanded">
       <div class="a-nav-section-title-wrapper">
         <div class="user-grid">
-          <img src="../../assets/img/impersonate-user.svg" alt="" class="user-icon" />
+          <img src="../../assets/img/impersonate-user.svg" alt="" class="user-icon" >
           <p class="info">{{ impersonatedUser.client }}</p>
           <p class="info email">{{ impersonatedUser.email }}</p>
-          <img v-if="!expanded " class="panel-icon" src="../../assets/icons/24/Plus.svg" alt="" />
-          <img v-else class="panel-icon" src="../../assets/icons/24/Minus.svg" alt="" />
+          <img v-if="!expanded " class="panel-icon" src="../../assets/icons/24/Plus.svg" alt="" >
+          <img v-else class="panel-icon" src="../../assets/icons/24/Minus.svg" alt="" >
         </div>
         <div
           ref="dropdownWrapper"
-          :style="{ 'max-height': `${expanded && navbarExpanded ? dropdownScrollHeight : 0}px` }"
+          :style="{ 'max-height': `${expanded ? dropdownScrollHeight : 0}px` }"
           class="a-nav-section-title-dropdown-wrapper"
         >
           <div class="user-grid">
-            <img src="../../assets/img/user.svg" alt="" class="user-icon" />
+            <img src="../../assets/img/user.svg" alt="" class="user-icon" >
             <p class="info">{{ impersonatedUser.client }}</p>
             <p class="info email">{{ impersonatedUser.admin_email }}</p>
           </div>
@@ -30,14 +30,15 @@ import { ref, onMounted } from '#imports';
 
 interface IPanelProps {
   navbarExpanded: boolean;
-  impersonatedUser: () => {
-    show: false,
-    name: '',
-    email: '',
-    client: ''
+  impersonatedUser: {
+    name: string,
+    email: string,
+    admin_email: string,
+    client: string,
   }
 }
-const props = defineProps<IPanelProps>();
+
+defineProps<IPanelProps>();
 
 const expanded = ref(false);
 const dropdownScrollHeight = ref(0);

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

@@ -1,7 +1,7 @@
 <template>
   <div class="org-selection">
     <label id="org-dropdown-label" class="sr-only">
-      {{ orgDropdownLabel }}
+      {{ $t("navigation.orgDropdown") }}
     </label>
     <div
       ref="dropdownTriggerRef"
@@ -14,48 +14,43 @@
     >
       <input
         ref="inputRef"
-        is="input"
         class="org-title"
         type="text"
-        placeholder="Start typing to search"
-        :value="active? newQuery : selectedOrg.name"
-        @keydown="keydownActionsOnTrigger($event, orgs, optionRef, dropdownTriggerRef, true, inputRef)"
-        @click.prevent="toggleDropdown($event, optionRef)"
-        @input="handleDropdownSearch($event, sortedOrgs, optionRef)"
-      />
-      <span v-if="selectedOrg.intranet" class="intranet selected">
-        <a-icon icon="16:lock-locked" ></a-icon>
-        {{ $t('navigation.intranet') }}
+        :placeholder="$t('navigation.orgPlaceholder')"
+        :value="active ? searchQuery : selectedOrg.name"
+        @keydown="keydownActionsOnTrigger"
+        @click.prevent="toggleDropdown"
+        @input="handleDropdownSearch"
+      >
+      <span v-if="selectedOrg.intranet" class="badge selected">
+        <a-icon icon="16:lock-locked" />
+        {{ $t("navigation.orgBadge") }}
       </span>
-      <!-- <Icon
-        style="margin-bottom: 2px"
-        :name-or-path="`dropdown${active ? '-up' : ''}`"
-        size="tiny"
-        reduced
-        variant="info"
-      /> -->
     </div>
-    <div v-show="active" id="organizations-options-list" class="dropdown" role="listbox">
+    <div
+      v-show="active"
+      id="organizations-options-list"
+      class="dropdown"
+      role="listbox"
+    >
       <div
         v-for="(option, idx) in sortedOrgs"
-        v-on-click-outside="onClickOutsideHandler"
+        :key="idx"
         ref="optionRef"
-        :key="option.name"
+        v-on-click-outside="onClickOutsideHandler"
         role="option"
         class="org-option"
         :class="{ selected: option === selectedOrg }"
         :aria-selected="!!String(option === selectedOrg)"
         tabindex="-1"
-        @keydown="handleKeydownAction(orgs, idx, $event, optionRef, dropdownTriggerRef)"
+        @keydown="handleKeydownAction($event, idx)"
         @click="handleSelectedClick(idx)"
       >
-        <div class="selected-space">
-          <!-- <Icon v-if="option === selectedOrg" name-or-path="success" size="tiny" /> -->
-        </div>
-        <span :class="{ pinned: option.pinned, 'item-flex': true }">{{ optionLabel(option) }}
-          <span v-if="option.intranet" class="intranet selected">
-            <a-icon icon="16:lock-locked"></a-icon>
-            {{ $t('navigation.intranet') }}
+        <span :class="{ pinned: option.pinned, 'item-flex': true }"
+          >{{ option.name }}
+          <span v-if="option.intranet" class="badge selected">
+            <a-icon icon="16:lock-locked" />
+            {{ $t("navigation.orgBadge") }}
           </span>
         </span>
       </div>
@@ -64,39 +59,49 @@
 </template>
 
 <script setup lang="ts">
-import { useDropdown } from '../../composables/accessibleActions.js';
-import { vOnClickOutside } from '@vueuse/components';
-import { ref, computed, useNuxtApp } from '#imports';
+import { useDropdown, useNuxtApp } from "#imports";
+import { vOnClickOutside } from "@vueuse/components";
+import { ref, computed } from "vue";
+
 const { $t } = useNuxtApp();
 
-const emit = defineEmits(['selected']);
+interface IOrg {
+  name: string;
+  intranet: boolean;
+  pinned: boolean;
+}
+
+interface IOrgSelectProps {
+  orgs: Array<IOrg>;
+  selectedOrg?: IOrg;
+}
+
+const emit = defineEmits(["selected"]);
+
+const dropdownTriggerRef = ref();
+const optionRef = ref();
+const props = withDefaults(defineProps<IOrgSelectProps>(), {
+  selectedOrg: () => ({
+    name: "",
+    intranet: false,
+    pinned: false,
+  }),
+});
 
 const {
   active,
-  newQuery,
+  searchQuery,
   toggleDropdown,
   closeDropdown,
   onClickOutsideHandler,
   keydownActionsOnTrigger,
   handleKeydown,
   handleDropdownSearch,
-} = useDropdown();
-
-interface IOrgSelectProps {
-  orgs: Array<any>;
-  selectedOrg: {};
-};
-
-const props = withDefaults(defineProps<IOrgSelectProps>(), {
-  selectedOrg: {
-    name: '',
-    intranet: false
-  }
+} = useDropdown(props.orgs, optionRef, dropdownTriggerRef, {
+  searchable: true,
+  trackBy: "name",
 });
 
-const dropdownTriggerRef = ref();
-const optionRef = ref();
-
 const sortedOrgs = computed(() => {
   return [...props.orgs].sort((a, b) => {
     if (a.pinned && !b.pinned) {
@@ -108,22 +113,15 @@ const sortedOrgs = computed(() => {
     }
   });
 });
-const orgDropdownLabel = computed(() => {
-  return $t('navigation.orgDropdown') || 'Select Organization'
-})
-
-function optionLabel(option) {
-  return option?.name || option.label
-}
 
 function handleSelectedClick(index: number) {
-  emit('selected', index);
+  emit("selected", index);
   closeDropdown();
 }
 
-function handleKeydownAction(orgs: string | any[], idx: number, $event: { key: string | boolean; }, optionRef: { focus: () => void; }[], dropdownTriggerRef: { focus: () => void; }) {
-  emit('selected', idx);
-  handleKeydown(orgs, idx, $event, optionRef, dropdownTriggerRef);
+function handleKeydownAction($event: { key: string | boolean }, index: number) {
+  emit("selected", index);
+  handleKeydown($event, index);
 }
 </script>
 
@@ -142,7 +140,7 @@ function handleKeydownAction(orgs: string | any[], idx: number, $event: { key: s
   margin-right: 25px;
 }
 .org-selection .dropdown-trigger:focus-visible {
-  outline: 2px #000FFF solid;
+  outline: 2px #000fff solid;
 }
 .org-selection .dropdown-trigger .org-title {
   line-height: 16px;
@@ -163,8 +161,9 @@ function handleKeydownAction(orgs: string | any[], idx: number, $event: { key: s
   white-space: nowrap;
   cursor: pointer;
 }
-.org-selection .intranet {
+.org-selection .badge {
   background-color: var(--purple-50);
+  text-transform: uppercase;
 }
 .org-selection .dropdown .org-option {
   display: block;
@@ -177,7 +176,7 @@ function handleKeydownAction(orgs: string | any[], idx: number, $event: { key: s
   cursor: pointer;
 }
 .org-selection .dropdown .org-option:focus-visible, .org-selection .dropdown .org-option:hover {
-  background-color: #F8F6FC;
+  background-color: #f8f6fc;
 }
 .org-selection .custom-search {
   margin: 8px 16px;
@@ -189,18 +188,19 @@ function handleKeydownAction(orgs: string | any[], idx: number, $event: { key: s
   width: 100%;
   justify-content: space-between;
 }
-.org-selection .intranet {
+.org-selection .badge {
   display: inline-flex;
   align-items: center;
   background-color: var(--purple-50);
   padding: 2px 4px;
   color: white;
   border-radius: 4px;
+  text-transform: uppercase;
 }
-.org-selection .intranet svg {
+.org-selection .badge svg {
   margin-right: 4px;
 }
-.org-selection .intranet.selected {
+.org-selection .badge.selected {
   background-color: var(--grey-50);
 }
 </style>

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

@@ -38,7 +38,6 @@
       <NavImpersonateInfoPanel
         v-if="impersonatedUser.show"
         :impersonated-user="impersonatedUser"
-        :navbar-expanded="expanded"
       />
     </div>
 
@@ -84,7 +83,7 @@ interface ISidebarProps {
   expanded?: boolean;
   homepageUrl?: string;
   showHelpArticles?: boolean;
-  helpArticleOptions?: Array<any>;
+  helpArticleOptions?: Array<unknown>;
   impersonatedUser?: IUser;
   logo: ILogo;
 }
@@ -96,18 +95,18 @@ withDefaults(defineProps<ISidebarProps>(), {
   showHelpArticles: true,
   expanded: true,
   helpArticleOptions: () => [],
-  impersonatedUser: {
+  impersonatedUser: () => ({
     show: false,
     email: "staff3@lms.com",
-    phone_number :null,
+    phone_number : '',
     client: "Sales Demo",
-    admin_email: null
-  },
-  logo: {
+    admin_email: '',
+  }),
+  logo: () => ({
     alt: 'Thrillshare',
     src: 'logo.svg',
     iconSrc: 'logo.svg',
-  }
+  })
 })
 </script>
 

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

@@ -0,0 +1,32 @@
+<template>
+  <button class="sidebar-toggle" @click="toggleSidebar">
+    <a-icon class="icon" icon="16:apptegy" />
+    <span>Menu</span>
+  </button>
+</template>
+
+<script setup>
+const emit = defineEmits(["toggle-sidebar"]);
+
+function toggleSidebar() {
+  emit("toggle-sidebar");
+}
+</script>
+
+<style scoped>
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--purple-20);
+  border: none;
+  border-radius: 4px;
+  padding: 8px 16px;
+  color: var(--purple);
+  cursor: pointer;
+}
+.sidebar-toggle:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
+}
+</style>

package/dist/runtime/components/Nav/UserDropdown/index.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useDropdown } from "#imports";
+import { vOnClickOutside } from "@vueuse/components";
+
+interface IUserDropdown {
+  user: {
+    name: string;
+    avatar: string;
+  };
+  userDropdownOptions: Array<{ label: string; url: string; icon: string }>;
+  selectedOption: number;
+}
+
+const props = defineProps<IUserDropdown>();
+const dropdownTriggerRef = ref<HTMLDivElement>();
+const dropdownOptionsRef = ref<Array<HTMLDivElement>>();
+
+const {
+  active,
+  toggleDropdown,
+  closeDropdown,
+  keydownActionsOnTrigger,
+  handleKeydown,
+  onClickOutsideHandler,
+} = useDropdown(
+  props.userDropdownOptions,
+  dropdownOptionsRef,
+  dropdownTriggerRef,
+);
+
+const emit = defineEmits<{
+  'select-option': [id: number]
+}>();
+
+function handleSelectedClick(index: number) {
+  emit("select-option", index);
+  closeDropdown();
+}
+
+function handleKeydownAction($event: KeyboardEvent, index: number) {
+  if ($event.key === "Enter" || $event.key === " ") {
+    emit("select-option", index);
+  } else {
+    handleKeydown($event, index);
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="dropdownTriggerRef"
+    aria-controls="user-dropdown"
+    :aria-expanded="active"
+    aria-haspopup="listbox"
+    role="combobox"
+    tabindex="0"
+    class="header__dropdown"
+    @keydown="keydownActionsOnTrigger"
+    @click.prevent="toggleDropdown"
+  >
+    <NavUserDropdownAvatar :name="user.name" :src="user.avatar" />
+    <a-icon class="icon" icon="24:hamburger" />
+    <span class="sr-only">Account Settings</span>
+  </div>
+  <div
+    v-show="active"
+    id="user-dropdown"
+    class="options-dropdown"
+    role="listbox"
+  >
+    <div
+      v-for="(option, idx) in userDropdownOptions"
+      :key="option.label"
+      ref="dropdownOptionsRef"
+      v-on-click-outside="onClickOutsideHandler"
+      role="option"
+      class="option-wrapper"
+      tabindex="-1"
+      @keydown="handleKeydownAction($event, idx)"
+      @click="handleSelectedClick(idx)"
+    >
+      <NuxtLink class="option" :to="option.url">
+        {{ option.label }}
+        <a-icon :icon="option.icon" color="black" font-size="32px" />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.header__dropdown {
+  font-size: 24px;
+  min-width: 64px;
+  width: 64px;
+  max-width: 64px;
+  border: none;
+  padding: 0;
+  outline: none;
+  color: var(--purple);
+  background: var(--purple-20);
+  border-radius: 16px;
+  overflow: hidden;
+  text-align: left;
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.header__dropdown:focus {
+  box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
+}
+.header__dropdown .avatar-container:focus {
+  outline: none;
+}
+
+.options-dropdown {
+  min-height: 100px;
+  position: absolute;
+  max-width: 512px;
+  right: 65px;
+  top: 80px;
+  background-color: #ffffff;
+  border-radius: 4px;
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
+  padding: 12px 0;
+  z-index: 10;
+}
+.options-dropdown .option-wrapper {
+  padding: 12px 16px;
+  cursor: pointer;
+}
+.options-dropdown .option-wrapper .option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #333;
+  text-decoration: none;
+}
+.options-dropdown .option-wrapper:focus-visible, .options-dropdown .option-wrapper:hover {
+  background-color: #f8f6fc;
+}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Ref } from "vue";
+export declare function useDropdown(options: Array<unknown>, dropdownOptionsRef: Ref<Array<HTMLElement>>, dropdownTriggerRef: Ref<HTMLElement>, config?: {
+    searchable: boolean;
+    trackBy?: string;
+}): {
+    active: Ref<boolean>;
+    searchQuery: Ref<string>;
+    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;
+    debouncedFocus: any;
+};

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 (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.4",
   "type": "module",
   "exports": {
     ".": {

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
-  };
-}