@apptegy/nuxt-navigation 0.1.1 → 0.1.2

package/dist/module.json

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

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

@@ -104,8 +104,11 @@ function handleSelectedClick(index: number) {
 }
 
 function handleKeydownAction(userSettingsOptions: any[], idx: number, $event: { key: string | boolean; }, optionRef: { focus: () => void; }[], dropdownTriggerRef: { focus: () => void; }) {
-  emit('select-setting', idx);
-  handleKeydown(userSettingsOptions, idx, $event, optionRef, dropdownTriggerRef);
+  if ($event.key === 'Enter' || $event.key === ' ')  {
+    emit('select-setting', idx);
+  } else {
+    handleKeydown(userSettingsOptions, idx, $event, optionRef, dropdownTriggerRef);
+  }
 }
 
 function toggleSidebar() {

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

@@ -23,7 +23,7 @@
       <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">
-        {{ isDropdown ? $t('dscl.navigation.helpCenter') : $t('dscl.navigation.helpArticles') }}
+        {{ isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles') }}
       </span>
       <img
         v-if="isDropdown && navbarExpanded && !hasArticles"

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

@@ -21,9 +21,7 @@
           </div>
         </div>
       </div>
-      <!-- add plus icon -->
     </button>
-    <!-- <img v-else src="../../assets/img/impersonate-user.svg" alt="" class="user-icon" /> -->
   </div>
 </template>
 

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

@@ -25,7 +25,7 @@
       />
       <span v-if="selectedOrg.intranet" class="intranet selected">
         <a-icon icon="16:lock-locked" ></a-icon>
-        {{ $t('dscl.navigation.intranet') }}
+        {{ $t('navigation.intranet') }}
       </span>
       <!-- <Icon
         style="margin-bottom: 2px"
@@ -52,10 +52,10 @@
         <div class="selected-space">
           <!-- <Icon v-if="option === selectedOrg" name-or-path="success" size="tiny" /> -->
         </div>
-        <span :class="{ pinned: option.pinned, 'item-flex': true }">{{ option?.name || option.label }}
+        <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('dscl.navigation.intranet') }}
+            {{ $t('navigation.intranet') }}
           </span>
         </span>
       </div>
@@ -80,7 +80,6 @@ const {
   keydownActionsOnTrigger,
   handleKeydown,
   handleDropdownSearch,
-  // focusDropdownItem,
 } = useDropdown();
 
 interface IOrgSelectProps {
@@ -88,11 +87,18 @@ interface IOrgSelectProps {
   selectedOrg: {};
 };
 
-const dropdownTriggerRef = ref();
-const optionRef = ref();
+withDefaults(defineProps<IOrgSelectProps>(), {
+  selectedOrg: {
+    name: '',
+    intranet: false
+  }
+});
 
 const props = defineProps<IOrgSelectProps>();
 
+const dropdownTriggerRef = ref();
+const optionRef = ref();
+
 const sortedOrgs = computed(() => {
   return [...props.orgs].sort((a, b) => {
     if (a.pinned && !b.pinned) {
@@ -105,9 +111,13 @@ const sortedOrgs = computed(() => {
   });
 });
 const orgDropdownLabel = computed(() => {
-  return useNuxtApp().$t('navigation.orgDropdown') || 'Select Organization'
+  return $t('navigation.orgDropdown') || 'Select Organization'
 })
 
+function optionLabel(option) {
+  return option?.name || option.label
+}
+
 function handleSelectedClick(index: number) {
   emit('selected', index);
   closeDropdown();

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

@@ -5,7 +5,7 @@
     aria-label="Main"
     :class="{ expanded }"
   >
-  <a
+    <a
       ref="skip-to-content"
       href="#main-content-section"
       class="skip-to-content"
@@ -94,6 +94,7 @@ withDefaults(defineProps<ISidebarProps>(), {
   currentApplication: 'media',
   homepageUrl: '/',
   showHelpArticles: true,
+  expanded: true,
   helpArticleOptions: () => [],
   impersonatedUser: {
     show: false,
@@ -111,9 +112,6 @@ withDefaults(defineProps<ISidebarProps>(), {
 </script>
 
 <style scoped>
-/* * {
-    outline: 2px solid red;
-} */
 .navbar {
   grid-area: navsidebar;
   display: grid;
@@ -140,6 +138,7 @@ withDefaults(defineProps<ISidebarProps>(), {
 .navbar--logo {
   padding: 16px;
   background-color: var(--dscl-nav-background-color, var(--purple-70));
+  overflow: hidden;
 }
 .navbar--content {
   display: flex;

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

@@ -1,6 +1,6 @@
 export declare function useDropdown(): {
-    active: any;
-    newQuery: any;
+    active: import("vue").Ref<boolean>;
+    newQuery: import("vue").Ref<string>;
     toggleDropdown: ($event: {
         key: string;
     }, optionRef: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "exports": {
     ".": {
@@ -29,6 +29,7 @@
     "@nuxt/kit": "^3.12.3"
   },
   "devDependencies": {
+    "@iconify/vue": "^4.1.2",
     "@nuxt/devtools": "^1.3.9",
     "@nuxt/eslint-config": "^0.3.13",
     "@apptegy/icons": "2.10.0",
@@ -36,9 +37,10 @@
     "@nuxt/schema": "^3.12.3",
     "@nuxt/test-utils": "^3.13.1",
     "@types/node": "^20.14.10",
+    "@vueuse/components": "10.11.0",
     "changelogen": "^0.5.5",
     "eslint": "^9.7.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "nuxt": "^3.12.3",
     "sass": "^1.77.8",
     "typescript": "^5.5.3",