@apptegy/nuxt-navigation 0.1.4 → 0.1.5

package/README.md

@@ -2,83 +2,18 @@
 Get your module up and running quickly.
 
 Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: my-module
-- Description: My new Nuxt module
+- Name: Navigation
+- Package name: @apptegy/nuxt-navigation
+- Description:Apptegy navigation components and patterns module.
 -->
 
-# My Module
+# Navigation
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-My new Nuxt module for doing amazing things.
 
-- [✨  Release Notes](/CHANGELOG.md)
-<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/@apptegy/nuxt-navigation?file=playground%2Fapp.vue) -->
 <!-- - [📖 &nbsp;Documentation](https://example.com) -->
-
-## Features
-
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
-
-## Quick Setup
-
-Install the module to your Nuxt application with one command:
-
-```bash
-npx nuxi module add my-module
-```
-
-That's it! You can now use My Module in your Nuxt app ✨
-
-
-## Contribution
-
-<details>
-  <summary>Local development</summary>
-  
-  ```bash
-  # Install dependencies
-  npm install
-  
-  # Generate type stubs
-  npm run dev:prepare
-  
-  # Develop with the playground
-  npm run dev
-  
-  # Build the playground
-  npm run dev:build
-  
-  # Run ESLint
-  npm run lint
-  
-  # Run Vitest
-  npm run test
-  npm run test:watch
-  
-  # Release new version
-  npm run release
-  ```
-
-</details>
-
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-version-href]: https://npmjs.com/package/my-module
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[npm-downloads-href]: https://npmjs.com/package/my-module
-
-[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
-[license-href]: https://npmjs.com/package/my-module
-
-[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
-[nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "builder": {
-    "@nuxt/module-builder": "0.8.1",
+    "@nuxt/module-builder": "0.8.3",
     "unbuild": "unknown"
   }
 }

package/dist/runtime/assets/icons/24/Metadata.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.3335" y="5.5" width="15.3333" height="13" rx="0.666667" stroke="#662E80"/>
+<path d="M10 6L10 18" stroke="#662E80" stroke-linecap="round"/>
+</svg>

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

@@ -44,7 +44,7 @@ span {
   border-radius: 50%;
   background-color: var(--brand-1, var(--purple));
   color: var(--text-2, var(--primary-white));
-  outline: 1px solid var(--primary-white);
+  border: 1px solid var(--primary-white);
 }
 
 img {

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

@@ -1,5 +1,6 @@
 <template>
   <header
+    class="header"
     :class="{ sticky }"
     role="banner"
   >
@@ -9,7 +10,7 @@
     </div>
     <slot name="org-select" />
     <slot name="user-controls" />
-    <NavUserDropdown :user :user-dropdown-options :selected-option @select-option="$emit('selectedOption')"/>
+    <NavUserDropdown :user="user" :user-dropdown-options="userDropdownOptions" :selected-option="selectedOptions" @select-option="$emit('selectedOption')"/>
   </header>
 </template>
 
@@ -35,25 +36,25 @@ defineEmits(['toggle-sidebar', 'selectedOption']);
 </script>
 
 <style scoped>
-header {
+header.header {
   grid-area: navheader;
   display: grid;
   grid-auto-flow: column;
   grid-template-columns: auto 1fr auto;
   gap: 16px;
   align-items: center;
-  padding: 24px 64px 24px 36px;
+  padding: 24px 64px;
   width: 100%;
   background-color: var(--primary-white);
   font: var(--font-regular);
 }
 @media only screen and (max-width: 960px) {
-  header {
+  header.header {
     padding-left: 32px;
     padding-right: 32px;
   }
 }
-header.sticky {
+header.header.sticky {
   position: sticky;
 }
 </style>

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

@@ -0,0 +1,6 @@
+<template>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
+<rect x="4.3335" y="5.5" width="15.3333" height="13" rx="0.666667" stroke="currentColor"/>
+<path d="M10 6L10 18" stroke="currentColor" stroke-linecap="round"/>
+</svg>
+</template>

package/dist/runtime/components/Nav/Icons/UserDropdownMenu.vue

@@ -0,0 +1,5 @@
+<template>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 8H19M5 12H19M19 16H5" stroke="currentColor" stroke-linecap="round"/>
+</svg>
+</template>

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

@@ -29,7 +29,6 @@
 import { ref, onMounted } from '#imports';
 
 interface IPanelProps {
-  navbarExpanded: boolean;
   impersonatedUser: {
     name: string,
     email: string,

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

@@ -14,15 +14,15 @@
     >
       <input
         ref="inputRef"
-        class="org-title"
         type="text"
+        class="org-title"
         :placeholder="$t('navigation.orgPlaceholder')"
-        :value="active ? searchQuery : selectedOrg.name"
+        :value="active ? searchQuery : selectedOrg?.name"
         @keydown="keydownActionsOnTrigger"
         @click.prevent="toggleDropdown"
         @input="handleDropdownSearch"
       >
-      <span v-if="selectedOrg.intranet" class="badge selected">
+      <span v-if="selectedOrg?.intranet" class="badge selected">
         <a-icon icon="16:lock-locked" />
         {{ $t("navigation.orgBadge") }}
       </span>
@@ -34,21 +34,21 @@
       role="listbox"
     >
       <div
-        v-for="(option, idx) in sortedOrgs"
-        :key="idx"
+        v-for="(option) in sortedOrgs"
+        :key="option.id"
         ref="optionRef"
         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($event, idx)"
-        @click="handleSelectedClick(idx)"
+        @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">
+        >{{ option.name }}
+        <span v-if="option.intranet" class="badge selected">
             <a-icon icon="16:lock-locked" />
             {{ $t("navigation.orgBadge") }}
           </span>
@@ -67,27 +67,28 @@ const { $t } = useNuxtApp();
 
 interface IOrg {
   name: string;
-  intranet: boolean;
-  pinned: boolean;
+  id: number;
+  intranet?: boolean;
+  pinned?: boolean;
 }
 
 interface IOrgSelectProps {
   orgs: Array<IOrg>;
-  selectedOrg?: IOrg;
+  modelValue: number
 }
 
-const emit = defineEmits(["selected"]);
+const emit = defineEmits<{
+    'update:model-value': [index: number]
+  }>();
 
 const dropdownTriggerRef = ref();
 const optionRef = ref();
-const props = withDefaults(defineProps<IOrgSelectProps>(), {
-  selectedOrg: () => ({
-    name: "",
-    intranet: false,
-    pinned: false,
-  }),
+const selectedOrg = computed(() => {
+  return props.orgs.find(({id}) => id == props.modelValue);
 });
 
+const props = defineProps<IOrgSelectProps>();
+
 const {
   active,
   searchQuery,
@@ -114,14 +115,14 @@ const sortedOrgs = computed(() => {
   });
 });
 
-function handleSelectedClick(index: number) {
-  emit("selected", index);
-  closeDropdown();
-}
-
-function handleKeydownAction($event: { key: string | boolean }, index: number) {
-  emit("selected", index);
-  handleKeydown($event, index);
+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>
 
@@ -131,39 +132,44 @@ function handleKeydownAction($event: { key: string | boolean }, index: number) {
   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 .dropdown-trigger:focus-visible {
-  outline: 2px #000fff solid;
+.org-selection:focus-within {
+  outline: 2px var(--purple) 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 .badge {
-  background-color: var(--purple-50);
-  text-transform: uppercase;
+.org-selection .dropdown-trigger .org-title:focus {
+  outline: none;
 }
 .org-selection .dropdown .org-option {
   display: block;
@@ -183,7 +189,7 @@ function handleKeydownAction($event: { key: string | boolean }, index: number) {
 }
 .org-selection .item-flex {
   display: flex;
-  gap: 10px;
+  gap: 8px;
   align-items: center;
   width: 100%;
   justify-content: space-between;

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
@@ -85,7 +86,7 @@ interface ISidebarProps {
   showHelpArticles?: boolean;
   helpArticleOptions?: Array<unknown>;
   impersonatedUser?: IUser;
-  logo: ILogo;
+  logo?: ILogo;
 }
 
 withDefaults(defineProps<ISidebarProps>(), {

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

@@ -1,7 +1,7 @@
 <template>
   <button class="sidebar-toggle" @click="toggleSidebar">
-    <a-icon class="icon" icon="16:apptegy" />
-    <span>Menu</span>
+    <NavIconsSidebarToggle />
+    <span> {{ $t('navigation.sidebarToggle') }}</span>
   </button>
 </template>
 

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

@@ -6,10 +6,9 @@ import { vOnClickOutside } from "@vueuse/components";
 interface IUserDropdown {
   user: {
     name: string;
-    avatar: string;
+    avatar?: string;
   };
   userDropdownOptions: Array<{ label: string; url: string; icon: string }>;
-  selectedOption: number;
 }
 
 const props = defineProps<IUserDropdown>();
@@ -30,7 +29,7 @@ const {
 );
 
 const emit = defineEmits<{
-  'select-option': [id: number]
+  'select-option': [index: number]
 }>();
 
 function handleSelectedClick(index: number) {
@@ -59,9 +58,9 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
     @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>
+    <NavAvatar :name="user.name" :src="user.avatar" />
+    <NavIconsUserDropdownMenu />
+    <span class="sr-only">{{ $t('navigation.userDropdown') }}</span>
   </div>
   <div
     v-show="active"
@@ -82,7 +81,7 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
     >
       <NuxtLink class="option" :to="option.url">
         {{ option.label }}
-        <a-icon :icon="option.icon" color="black" font-size="32px" />
+        <a-icon :icon="option.icon" font-size="24px" />
       </NuxtLink>
     </div>
   </div>
@@ -120,24 +119,29 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
   max-width: 512px;
   right: 65px;
   top: 80px;
-  background-color: #ffffff;
+  background-color: var(--primary-white);
   border-radius: 4px;
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
-  padding: 12px 0;
+  padding: 8px;
   z-index: 10;
 }
 .options-dropdown .option-wrapper {
-  padding: 12px 16px;
+  padding: 8px;
+  border-radius: 4px;
   cursor: pointer;
 }
 .options-dropdown .option-wrapper .option {
   display: flex;
+  gap: 8px;
   justify-content: space-between;
   align-items: center;
-  color: #333;
+  color: var(--primary-dark);
   text-decoration: none;
 }
 .options-dropdown .option-wrapper:focus-visible, .options-dropdown .option-wrapper:hover {
-  background-color: #f8f6fc;
+  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

@@ -5,7 +5,7 @@ export declare function useDropdown(options: Array<unknown>, dropdownOptionsRef:
 }): {
     active: Ref<boolean>;
     searchQuery: Ref<string>;
-    toggleDropdown: ($event: KeyboardEvent & MouseEvent) => Promise<void>;
+    toggleDropdown: ($event: KeyboardEvent | MouseEvent) => Promise<void>;
     openDropdown: () => void;
     closeDropdown: () => void;
     onClickOutsideHandler: () => void;

package/dist/runtime/composables/useDropdown.js

@@ -5,7 +5,7 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
   const searchQuery = ref("");
   async function toggleDropdown($event) {
     active.value = !active.value;
-    if (active.value && $event.key === "ArrowDown") {
+    if ($event instanceof KeyboardEvent && active.value && $event.key === "ArrowDown") {
       await nextTick(() => {
         dropdownOptionsRef.value[0].focus();
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "exports": {
     ".": {
@@ -26,26 +26,24 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.3"
+    "@nuxt/kit": "^3.12.4",
+    "@vueuse/components": "11.0.1",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@iconify/vue": "^4.1.2",
-    "@nuxt/devtools": "^1.3.9",
-    "@nuxt/eslint-config": "^0.3.13",
-    "@apptegy/icons": "2.10.0",
-    "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/schema": "^3.12.3",
-    "@nuxt/test-utils": "^3.13.1",
-    "@types/node": "^20.14.10",
-    "@vueuse/components": "10.11.0",
+    "@nuxt/devtools": "^1.3.14",
+    "@nuxt/eslint-config": "^0.5.1",
+    "@nuxt/module-builder": "^0.8.3",
+    "@nuxt/schema": "^3.12.4",
+    "@nuxt/test-utils": "^3.14.1",
+    "@types/node": "^20.16.1",
     "changelogen": "^0.5.5",
-    "eslint": "^9.7.0",
-    "lodash": "^4.17.21",
-    "nuxt": "^3.12.3",
+    "eslint": "^9.9.0",
+    "nuxt": "^3.12.4",
     "sass": "^1.77.8",
-    "typescript": "^5.5.3",
+    "typescript": "^5.5.4",
     "vitest": "^1.6.0",
-    "vue": "^3.4.21",
-    "vue-tsc": "^2.0.26"
+    "vue": "^3.4.38",
+    "vue-tsc": "^2.0.29"
   }
 }