@apptegy/nuxt-navigation 0.1.3 → 0.1.5

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') }}
+        class="org-title"
+        :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"
+        v-for="(option) in sortedOrgs"
+        :key="option.id"
         ref="optionRef"
-        :key="option.name"
+        v-on-click-outside="onClickOutsideHandler"
         role="option"
         class="org-option"
-        :class="{ selected: option === selectedOrg }"
-        :aria-selected="!!String(option === selectedOrg)"
+        :class="{ selected: option.id === modelValue }"
+        :aria-selected="option.id === modelValue"
         tabindex="-1"
-        @keydown="handleKeydownAction(orgs, idx, $event, optionRef, dropdownTriggerRef)"
-        @click="handleSelectedClick(idx)"
+        @keydown="handleSelectedOrg($event, option.id)"
+        @click="handleSelectedOrg($event, option.id)"
       >
-        <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,50 @@
 </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;
+  id: number;
+  intranet?: boolean;
+  pinned?: boolean;
+}
+
+interface IOrgSelectProps {
+  orgs: Array<IOrg>;
+  modelValue: number
+}
+
+const emit = defineEmits<{
+    'update:model-value': [index: number]
+  }>();
+
+const dropdownTriggerRef = ref();
+const optionRef = ref();
+const selectedOrg = computed(() => {
+  return props.orgs.find(({id}) => id == props.modelValue);
+});
+
+const props = defineProps<IOrgSelectProps>();
 
 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 +114,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);
-  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 handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
+  if($event.type == 'click') {
+    emit("update:model-value", orgId);
+    closeDropdown();
+  } else if ($event.type == 'keydown') {
+    emit("update:model-value", orgId);
+    handleKeydown($event as KeyboardEvent, orgId);
+  }
 }
 </script>
 
@@ -133,38 +132,44 @@ function handleKeydownAction(orgs: string | any[], idx: number, $event: { key: s
   width: 300px;
   max-height: 300px;
   overflow-y: auto;
-  background-color: white;
+  background-color: var(--primary-white);
   z-index: 50;
 }
 
 .org-selection {
-  width: 300px;
-  margin-right: 25px;
+  border-radius: 4px 4px 0 0;
+}
+.org-selection:focus-within {
+  outline: 2px var(--purple) solid;
 }
-.org-selection .dropdown-trigger:focus-visible {
-  outline: 2px #000FFF solid;
+.org-selection .dropdown-trigger {
+  width: 300px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: space-between;
+  border-radius: 4px 4px 0 0;
+  border: 0;
+  border-bottom: 1px solid var(--dscl-forms-underline, var(--grey-50));
+  background: var(--dscl-forms-bg, var(--grey-10));
 }
 .org-selection .dropdown-trigger .org-title {
   line-height: 16px;
-  width: 300px;
+  width: 100%;
   padding: 12px;
   letter-spacing: 0.4px;
   touch-action: manipulation;
-  color: #333;
+  color: var(--primary-dark);
   height: 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px;
-  border-radius: 4px 4px 0 0;
   border: 0;
-  border-bottom: 1px solid var(--dscl-forms-underline, #747474);
-  background: var(--dscl-forms-bg, #fbfbfb);
+  padding: 8px;
+  background: var(--dscl-forms-bg, var(--grey-10));
   white-space: nowrap;
   cursor: pointer;
 }
-.org-selection .intranet {
-  background-color: var(--purple-50);
+.org-selection .dropdown-trigger .org-title:focus {
+  outline: none;
 }
 .org-selection .dropdown .org-option {
   display: block;
@@ -177,30 +182,31 @@ 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;
 }
 .org-selection .item-flex {
   display: flex;
-  gap: 10px;
+  gap: 8px;
   align-items: center;
   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

@@ -14,6 +14,7 @@
       {{ $t('navigation.skipToContent') }}
     </a>
     <div class="navbar--content">
+      <slot name="switcher" />
       <ul class="navbar-applications">
         <li v-for="application of applications" :key="application.id">
           <NavSidebarSection
@@ -38,7 +39,6 @@
       <NavImpersonateInfoPanel
         v-if="impersonatedUser.show"
         :impersonated-user="impersonatedUser"
-        :navbar-expanded="expanded"
       />
     </div>
 
@@ -84,9 +84,9 @@ interface ISidebarProps {
   expanded?: boolean;
   homepageUrl?: string;
   showHelpArticles?: boolean;
-  helpArticleOptions?: Array<any>;
+  helpArticleOptions?: Array<unknown>;
   impersonatedUser?: IUser;
-  logo: ILogo;
+  logo?: ILogo;
 }
 
 withDefaults(defineProps<ISidebarProps>(), {
@@ -96,18 +96,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">
+    <NavIconsSidebarToggle />
+    <span> {{ $t('navigation.sidebarToggle') }}</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,147 @@
+<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 }>;
+}
+
+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': [index: 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"
+  >
+    <NavAvatar :name="user.name" :src="user.avatar" />
+    <NavIconsUserDropdownMenu />
+    <span class="sr-only">{{ $t('navigation.userDropdown') }}</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" font-size="24px" />
+      </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: var(--primary-white);
+  border-radius: 4px;
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
+  padding: 8px;
+  z-index: 10;
+}
+.options-dropdown .option-wrapper {
+  padding: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.options-dropdown .option-wrapper .option {
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--primary-dark);
+  text-decoration: none;
+}
+.options-dropdown .option-wrapper:focus-visible, .options-dropdown .option-wrapper:hover {
+  background-color: var(--purple-20);
+}
+.options-dropdown .option-wrapper:focus-visible .option, .options-dropdown .option-wrapper:hover .option {
+  color: var(--purple);
+}
+</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;
+};