@apptegy/nuxt-navigation 0.1.3 → 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.3",
+  "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/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,203 +1,60 @@
 <template>
   <header
+    class="header"
     :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" :user-dropdown-options="userDropdownOptions" :selected-option="selectedOptions" @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>
-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;
 }
-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/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

@@ -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>
@@ -29,15 +29,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);