@apptegy/nuxt-navigation 0.1.5 → 0.1.7

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "unknown"

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

@@ -4,18 +4,17 @@
     :class="{ sticky }"
     role="banner"
   >
-    <NavSidebarToggle @toggle-sidebar="$emit('toggle-sidebar')"/>
+    <NavSidebarToggle />
     <div class="header__breadcrumbs">
       <slot name="breadcrumbs" />
     </div>
     <slot name="org-select" />
     <slot name="user-controls" />
-    <NavUserDropdown :user="user" :user-dropdown-options="userDropdownOptions" :selected-option="selectedOptions" @select-option="$emit('selectedOption')"/>
+    <NavUserDropdown :user="user" :user-dropdown-options="userDropdownOptions" @select-option="(index) => $emit('selected-option', index)"/>
   </header>
 </template>
 
 <script setup lang="ts">
-
 interface IHeaderProps {
   sticky?: boolean;
 }
@@ -26,13 +25,10 @@ interface IUserDropdown {
     avatar?: string;
   };
   userDropdownOptions: Array<unknown>;
-  selectedOption?: unknown
 }
 
-
 defineProps<IHeaderProps & IUserDropdown>();
-defineEmits(['toggle-sidebar', 'selectedOption']);
-
+defineEmits(['selected-option']);
 </script>
 
 <style scoped>

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

@@ -1,69 +1,11 @@
-<template>
-  <div class="org-selection">
-    <label id="org-dropdown-label" class="sr-only">
-      {{ $t("navigation.orgDropdown") }}
-    </label>
-    <div
-      ref="dropdownTriggerRef"
-      aria-labelledby="org-dropdown-label"
-      aria-controls="organizations-options-list"
-      :aria-expanded="active"
-      aria-haspopup="listbox"
-      role="combobox"
-      class="dropdown-trigger"
-    >
-      <input
-        ref="inputRef"
-        type="text"
-        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>
-    </div>
-    <div
-      v-show="active"
-      id="organizations-options-list"
-      class="dropdown"
-      role="listbox"
-    >
-      <div
-        v-for="(option) in sortedOrgs"
-        :key="option.id"
-        ref="optionRef"
-        v-on-click-outside="onClickOutsideHandler"
-        role="option"
-        class="org-option"
-        :class="{ selected: option.id === modelValue }"
-        :aria-selected="option.id === modelValue"
-        tabindex="-1"
-        @keydown="handleSelectedOrg($event, option.id)"
-        @click="handleSelectedOrg($event, option.id)"
-      >
-        <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>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { useDropdown, useNuxtApp } from "#imports";
+import { useDropdown, useNuxtApp, useAppConfig } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
 import { ref, computed } from "vue";
 
 const { $t } = useNuxtApp();
+const appConfig = useAppConfig();
+const zIndex = computed(() => appConfig?.navigation?.zIndex || 100)
 
 interface IOrg {
   name: string;
@@ -74,17 +16,17 @@ interface IOrg {
 
 interface IOrgSelectProps {
   orgs: Array<IOrg>;
-  modelValue: number
+  modelValue: number;
 }
 
 const emit = defineEmits<{
-    'update:model-value': [index: number]
-  }>();
+  "update:model-value": [index: number];
+}>();
 
 const dropdownTriggerRef = ref();
 const optionRef = ref();
 const selectedOrg = computed(() => {
-  return props.orgs.find(({id}) => id == props.modelValue);
+  return props.orgs.find(({ id }) => id == props.modelValue);
 });
 
 const props = defineProps<IOrgSelectProps>();
@@ -116,16 +58,76 @@ const sortedOrgs = computed(() => {
 });
 
 function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
-  if($event.type == 'click') {
+  if ($event.type == "click") {
     emit("update:model-value", orgId);
     closeDropdown();
-  } else if ($event.type == 'keydown') {
+  } else if ($event.type == "keydown") {
     emit("update:model-value", orgId);
     handleKeydown($event as KeyboardEvent, orgId);
   }
 }
 </script>
 
+<template>
+  <div class="org-selection">
+    <label id="org-dropdown-label" class="sr-only">
+      {{ $t("navigation.orgDropdown") }}
+    </label>
+    <div
+      ref="dropdownTriggerRef"
+      aria-labelledby="org-dropdown-label"
+      aria-controls="organizations-options-list"
+      :aria-expanded="active"
+      aria-haspopup="listbox"
+      role="combobox"
+      class="dropdown-trigger"
+    >
+      <input
+        ref="inputRef"
+        type="text"
+        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>
+    </div>
+    <div
+      v-show="active"
+      id="organizations-options-list"
+      class="dropdown"
+      role="listbox"
+    >
+      <div
+        v-for="option in sortedOrgs"
+        :key="option.id"
+        ref="optionRef"
+        v-on-click-outside="onClickOutsideHandler"
+        role="option"
+        class="org-option"
+        :class="{ selected: option.id === modelValue }"
+        :aria-selected="option.id === modelValue"
+        tabindex="-1"
+        @keydown="handleSelectedOrg($event, option.id)"
+        @click="handleSelectedOrg($event, option.id)"
+      >
+        <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>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 #organizations-options-list {
   position: absolute;
@@ -133,7 +135,7 @@ function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
   max-height: 300px;
   overflow-y: auto;
   background-color: var(--primary-white);
-  z-index: 50;
+  z-index: v-bind(zIndex);
 }
 
 .org-selection {
@@ -171,8 +173,11 @@ function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
 .org-selection .dropdown-trigger .org-title:focus {
   outline: none;
 }
+.org-selection .dropdown {
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
+}
 .org-selection .dropdown .org-option {
-  display: block;
   padding: 12px;
   min-height: 40px;
   line-height: 16px;
@@ -200,7 +205,7 @@ function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
   background-color: var(--purple-50);
   padding: 2px 4px;
   color: white;
-  border-radius: 4px;
+  border-radius: 2px;
   text-transform: uppercase;
 }
 .org-selection .badge svg {

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

@@ -20,7 +20,6 @@
           <NavSidebarSection
               :application="application"
               :active="currentApplication === application.text"
-              :navbar-expanded="expanded"
             >
               <slot v-if="currentApplication === application.text" />
             </NavSidebarSection>
@@ -28,7 +27,6 @@
         <li>
           <NavHelpArticles
             v-if="showHelpArticles"
-            :navbar-expanded="expanded"
             :help-article-options="helpArticleOptions"
           />
         </li>
@@ -45,8 +43,7 @@
       <slot name="logo">
         <NuxtLink :to="homepageUrl">
           <div class="navbar--logo">
-            <img v-if="expanded" :src="logo.src" :alt="logo.alt">
-            <img v-else :src="logo.iconSrc" :alt="logo.alt">
+            <img :src="logo.src" :alt="logo.alt">
           </div>
         </NuxtLink>
       </slot>
@@ -54,8 +51,9 @@
 </template>
 
 <script setup lang="ts">
-import { useNuxtApp } from '#imports';
+import { useNuxtApp, useSidebar } from '#imports';
 const { $t } = useNuxtApp();
+const { state: expanded } = useSidebar();
 
 interface IApplications {
   id: number;
@@ -81,7 +79,6 @@ interface ILogo {
 interface ISidebarProps {
   applications: Array<IApplications>;
   currentApplication?: IApplications['text'];
-  expanded?: boolean;
   homepageUrl?: string;
   showHelpArticles?: boolean;
   helpArticleOptions?: Array<unknown>;
@@ -94,7 +91,6 @@ withDefaults(defineProps<ISidebarProps>(), {
   currentApplication: 'media',
   homepageUrl: '/',
   showHelpArticles: true,
-  expanded: true,
   helpArticleOptions: () => [],
   impersonatedUser: () => ({
     show: false,
@@ -109,6 +105,8 @@ withDefaults(defineProps<ISidebarProps>(), {
     iconSrc: 'logo.svg',
   })
 })
+
+
 </script>
 
 <style scoped>
@@ -119,10 +117,10 @@ withDefaults(defineProps<ISidebarProps>(), {
   font: var(--font-regular);
   background-color: var(--dscl-nav-background-color, var(--purple-70));
   color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
-  transition: min-width 0.3s ease-in-out, translate 0.2s ease-in-out;
+  transition: width 0.3s ease-in-out, translate 0.2s ease-in-out;
   height: 100vh;
   overflow-y: auto;
-  min-width: 0px;
+  /* min-width: 0px; */
   translate: -256px;
 }
 .navbar a:focus-visible {
@@ -131,7 +129,7 @@ withDefaults(defineProps<ISidebarProps>(), {
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
 .navbar.expanded {
-  transition: min-width 0.3s ease-in-out, translate 0.2s ease-in-out;
+  transition: width 0.3s ease-in-out, translate 0.2s ease-in-out;
   min-width: 256px;
   translate: 0px;
 }

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

@@ -17,7 +17,6 @@ import { computed } from 'vue';
 const props = defineProps<{
   application: IApplication;
   active: boolean;
-  navbarExpanded: boolean;
 }>();
 
 const iconUrl = computed(() =>

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

@@ -5,12 +5,10 @@
   </button>
 </template>
 
-<script setup>
-const emit = defineEmits(["toggle-sidebar"]);
+<script setup lang="ts">
+import { useSidebar } from '#imports';
 
-function toggleSidebar() {
-  emit("toggle-sidebar");
-}
+const { toggleSidebar } = useSidebar();
 </script>
 
 <style scoped>

package/dist/runtime/components/Nav/{UserDropdown/index.vue → UserDropdown.vue}

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { useDropdown, useAppConfig } from "#imports";
 import { ref } from "vue";
-import { useDropdown } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
 
 interface IUserDropdown {
@@ -11,6 +11,10 @@ interface IUserDropdown {
   userDropdownOptions: Array<{ label: string; url: string; icon: string }>;
 }
 
+const appConfig = useAppConfig();
+const zIndex = computed(() => appConfig?.navigation?.zIndex || 100)
+
+
 const props = defineProps<IUserDropdown>();
 const dropdownTriggerRef = ref<HTMLDivElement>();
 const dropdownOptionsRef = ref<Array<HTMLDivElement>>();
@@ -29,7 +33,7 @@ const {
 );
 
 const emit = defineEmits<{
-  'select-option': [index: number]
+  "select-option": [index: number];
 }>();
 
 function handleSelectedClick(index: number) {
@@ -60,7 +64,7 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
   >
     <NavAvatar :name="user.name" :src="user.avatar" />
     <NavIconsUserDropdownMenu />
-    <span class="sr-only">{{ $t('navigation.userDropdown') }}</span>
+    <span class="sr-only">{{ $t("navigation.userDropdown") }}</span>
   </div>
   <div
     v-show="active"
@@ -79,6 +83,7 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
       @keydown="handleKeydownAction($event, idx)"
       @click="handleSelectedClick(idx)"
     >
+      <!-- because of the the above handler, this component is never treated as a link and can't redirect natively? -->
       <NuxtLink class="option" :to="option.url">
         {{ option.label }}
         <a-icon :icon="option.icon" font-size="24px" />
@@ -123,7 +128,7 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
   border-radius: 4px;
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
   padding: 8px;
-  z-index: 10;
+  z-index: v-bind(zIndex);
 }
 .options-dropdown .option-wrapper {
   padding: 8px;

package/dist/runtime/composables/useDropdown.js

@@ -50,6 +50,9 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
           });
         }
         break;
+      case "ArrowLeft":
+      case "ArrowRight":
+        break;
       case " ":
         if (active.value) {
           closeDropdown();
@@ -141,6 +144,9 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
           dropdownOptionsRef.value[index - 1].focus();
         });
         return index;
+      case "ArrowLeft":
+      case "ArrowRight":
+        break;
       case "Home":
         nextTick(() => {
           dropdownOptionsRef.value[0].focus();

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

@@ -0,0 +1,5 @@
+export declare function useSidebar(): {
+    state: any;
+    toggleSidebar: () => void;
+    sidebarWidth: any;
+};

package/dist/runtime/composables/useSidebar.js

@@ -0,0 +1,13 @@
+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 ? "256px" : "0px");
+  return {
+    state,
+    toggleSidebar,
+    sidebarWidth
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "exports": {
     ".": {