@apptegy/nuxt-navigation 1.0.0-alpha.0 → 1.0.0

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

@@ -1,53 +1,47 @@
 <template>
-  <div id="impersonate-info" class="a-nav-section animated">
-    <button class="a-nav-section--title" @click="expanded = !expanded">
+  <div class="a-nav-section animated" id="impersonate-info">
+    <button v-if="navbarExpanded" class="a-nav-section--title"  @click="expanded = !expanded">
       <div class="a-nav-section-title-wrapper">
         <div class="user-grid">
-          <svg class="user-icon" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.51621 5.46934C10.1369 4.84868 10.9787 4.5 11.8564 4.5C12.291 4.5 12.7214 4.5856 13.1229 4.75192C13.5244 4.91824 13.8893 5.16202 14.1966 5.46934C14.5039 5.77665 14.7477 6.14149 14.914 6.54302C15.0803 6.94455 15.1659 7.37491 15.1659 7.80952V8.57143C15.1659 9.49888 14.7851 10.5353 14.1564 11.3376C13.5263 12.1419 12.7049 12.6429 11.8564 12.6429C11.0079 12.6429 10.1865 12.1419 9.55636 11.3376C8.92771 10.5353 8.54688 9.49888 8.54688 8.57143V7.80952C8.54688 6.93178 8.89556 6.08999 9.51621 5.46934ZM11.8564 3.5C10.7134 3.5 9.6173 3.95404 8.80911 4.76223C8.00091 5.57042 7.54688 6.66657 7.54688 7.80952V8.57143C7.54688 9.7476 8.01899 10.9969 8.7692 11.9544C9.01711 12.2708 9.3017 12.5628 9.61708 12.8118C8.52026 12.9611 7.43611 13.2184 6.38137 13.5787L6.38124 13.5787C6.3509 13.5891 6.31976 13.5995 6.28797 13.6102C5.881 13.7463 5.36524 13.9189 5.0108 14.4575C4.65147 15.0035 4.5 15.85 4.5 17.2149V18.2382C4.5 19.0666 5.17157 19.7382 6 19.7382H13.381C13.6571 19.7382 13.881 19.5143 13.881 19.2382C13.881 18.962 13.6571 18.7382 13.381 18.7382H6C5.72386 18.7382 5.5 18.5143 5.5 18.2382V17.2149C5.5 15.8649 5.66268 15.286 5.84614 15.0072C6.00676 14.7632 6.20845 14.6943 6.70434 14.5251L6.70448 14.5251C9.55741 13.5506 12.6282 13.3783 15.5451 14.1095C15.8129 14.1766 16.0845 14.0139 16.1517 13.746C16.2188 13.4782 16.0561 13.2066 15.7882 13.1395C15.2284 12.9991 14.6636 12.8901 14.0961 12.8115C14.4113 12.5625 14.6958 12.2707 14.9436 11.9544C15.6938 10.9969 16.1659 9.7476 16.1659 8.57143V7.80952C16.1659 7.24359 16.0545 6.6832 15.8379 6.16034C15.6213 5.63748 15.3039 5.16241 14.9037 4.76223C14.5035 4.36205 14.0284 4.04462 13.5056 3.82804C12.9827 3.61147 12.4223 3.5 11.8564 3.5ZM19.0684 15.0752C18.8731 14.8799 18.5566 14.8799 18.3613 15.0752C18.166 15.2704 18.166 15.587 18.3613 15.7823L19.7929 17.2139H14.8018C14.5256 17.2139 14.3018 17.4377 14.3018 17.7139C14.3018 17.99 14.5256 18.2139 14.8018 18.2139H19.794L18.3613 19.6466C18.166 19.8418 18.166 20.1584 18.3613 20.3537C18.5566 20.549 18.8731 20.549 19.0684 20.3537L20.647 18.7751C21.2328 18.1893 21.2328 17.2396 20.647 16.6538L19.0684 15.0752Z" fill="currentColor"/>
-          </svg>
-          <template v-if="sidebarExpanded">
-            <p class="info">{{ impersonatedUser.client }}</p>
-            <p class="info email">{{ impersonatedUser.email }}</p>
-            <svg class="panel-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path v-if="expanded" d="M12 5V12M12 12L12 19M12 12L19 12M12 12H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-              <path v-else d="M19 12L12 12H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </template>
+          <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="" />
         </div>
         <div
           ref="dropdownWrapper"
-          :style="{ 'max-height': `${expanded && sidebarExpanded ? dropdownScrollHeight : 0}px` }"
+          :style="{ 'max-height': `${expanded && navbarExpanded ? dropdownScrollHeight : 0}px` }"
           class="a-nav-section-title-dropdown-wrapper"
         >
           <div class="user-grid">
-          <svg class="user-icon" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M8 8C8 5.79086 9.79087 4 12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79087 12 8 10.2091 8 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M12 14C10.5245 14 9.0395 13.451 8.36915 13.1665C8.12951 13.0649 7.85796 13.0374 7.6242 13.152C5.4795 14.2028 4.10839 18.0542 6 19C8 20 12 20 12 20C12 20 16 20 18 19C19.8916 18.0542 18.5205 14.2028 16.3758 13.152C16.142 13.0374 15.8705 13.0649 15.6309 13.1665C14.9605 13.451 13.4755 14 12 14Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-            <template v-if="sidebarExpanded">
-                <p class="info">{{ impersonatedUser.client }}</p>
-                <p class="info email">{{ impersonatedUser.admin_email }}</p>
-            </template>
+            <img src="../../assets/img/user.svg" alt="" class="user-icon" />
+            <p class="info">{{ impersonatedUser.client }}</p>
+            <p class="info">{{ impersonatedUser.admin_email }}</p>
           </div>
         </div>
       </div>
+      <!-- add plus icon -->
     </button>
+    <!-- <img v-else src="../../assets/img/impersonate-user.svg" alt="" class="user-icon" /> -->
   </div>
 </template>
 
-<script setup>
-import { ref, onMounted, useSidebar } from "#imports";
-defineProps({
-  impersonatedUser: { type: Object, required: true }
-});
-const { state: sidebarExpanded } = useSidebar();
+<script setup lang="ts">
+const props = defineProps<{
+  navbarExpanded: boolean;
+  impersonatedUser: {};
+}>();
+
 const expanded = ref(false);
+
 const dropdownScrollHeight = ref(0);
 const dropdownWrapper = ref();
+
 onMounted(() => {
-  dropdownScrollHeight.value = dropdownWrapper.value?.scrollHeight;
-});
+  dropdownScrollHeight.value = dropdownWrapper.value?.scrollHeight
+})
+
 </script>
 
 <style scoped>
@@ -55,18 +49,18 @@ onMounted(() => {
   cursor: pointer;
   height: fit-content;
   overflow: hidden;
-  background-color: var(--nav-background-color, #FFF);
+  background-color: var(--dscl-nav-background-color, var(--purple-70));
 }
 .a-nav-section.animated {
   transition: overflow 0.5s ease-in-out;
 }
 .a-nav-section--title {
-  color: var(--nav-text-color, #222222);
+  color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
   display: flex;
   justify-content: space-between;
   background: none;
   border: none;
-  border-top: 1px var(--nav-border-colors, #DFDFDF) solid;
+  border-top: 1px var(--dscl-nav-section-border-bottom-color, var(--purple-65)) solid;
   padding: 0;
   width: 100%;
   cursor: pointer;
@@ -91,41 +85,34 @@ onMounted(() => {
   padding: 12px 0;
 }
 .a-nav-section--title .a-nav-section-title-wrapper .user-grid .user-icon {
-  color: var(--nav-icon-color, #222222);
   grid-row: 1/span 2;
-  background: var(--nav-icon-background, #FFF);
+  background: #504764;
   border-radius: 4px;
   padding: 4px;
   margin-right: auto;
   margin-left: 16px;
 }
 .a-nav-section--title .a-nav-section-title-wrapper .user-grid .info {
-  color: var(--nav-text-color, #222222);
+  color: var(--primary-white);
   margin: 0;
   grid-row: 1;
   grid-column: 2;
   font-size: 12px;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 450;
   line-height: 16px;
   letter-spacing: 0.4px;
-  max-width: 165px;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 .a-nav-section--title .a-nav-section-title-wrapper .user-grid .email {
   grid-column: 2;
   grid-row: 2;
   margin-top: 4px;
-  color: var(--nav-text-color, #222222);
+  color: #CAC2D0;
   font-size: 11px;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 450;
   line-height: 12px;
   letter-spacing: 0.4px;
-  max-width: 165px;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 .a-nav-section--title .a-nav-section-title-wrapper .user-grid .panel-icon {
   transition: transform 0.2s ease-in-out;

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

@@ -1,85 +1,7 @@
-<script setup>
-import { useDropdown, useNuxtApp, useAppConfig, computed, ref, watch, onBeforeUpdate } from "#imports";
-import { vOnClickOutside } from "@vueuse/components";
-const { $t } = useNuxtApp();
-const appConfig = useAppConfig();
-const zIndex = computed(() => appConfig?.navigation?.zIndex || 100);
-const emit = defineEmits(["update:model-value"]);
-const dropdownTriggerRef = ref();
-const inputRef = ref();
-const optionRefs = ref([]);
-const props = defineProps({
-  orgs: { type: Array, required: true },
-  modelValue: { type: Number, required: true }
-});
-const localSelectedOrgId = ref(props.modelValue);
-watch(() => props.modelValue, (newValue) => {
-  localSelectedOrgId.value = newValue;
-});
-const selectedOrg = computed(() => {
-  return props.orgs.find(({ id }) => id == localSelectedOrgId.value);
-});
-const {
-  active,
-  searchQuery,
-  highlightedIndex,
-  toggleDropdown,
-  closeDropdown,
-  onClickOutsideHandler,
-  keydownActionsOnTrigger,
-  handleKeydown,
-  handleDropdownSearch
-} = useDropdown(props.orgs, optionRefs, inputRef, {
-  searchable: true,
-  trackBy: "name"
-});
-const sortedOrgs = computed(() => {
-  return [...props.orgs].sort((a, b) => {
-    if (a.pinned && !b.pinned) {
-      return -1;
-    } else if (!a.pinned && b.pinned) {
-      return 1;
-    } else {
-      return 0;
-    }
-  });
-});
-const highlightedOrg = computed(() => {
-  if (highlightedIndex.value >= 0 && highlightedIndex.value < props.orgs.length) {
-    return props.orgs[highlightedIndex.value];
-  }
-  return null;
-});
-onBeforeUpdate(() => {
-  optionRefs.value = [];
-});
-function setOptionRef(el, option) {
-  if (el) {
-    const index = props.orgs.findIndex((org) => org.id === option.id);
-    optionRefs.value[index] = el;
-  }
-}
-function handleSelectedOrg($event, orgId) {
-  const orgIndex = props.orgs.findIndex((org) => org.id === orgId);
-  if ($event.type == "click") {
-    localSelectedOrgId.value = orgId;
-    emit("update:model-value", orgId);
-    closeDropdown();
-  } else if ($event.type == "keydown") {
-    const keyEvent = $event;
-    if (keyEvent.key === "Enter" || keyEvent.key === " ") {
-      localSelectedOrgId.value = orgId;
-      emit("update:model-value", orgId);
-    }
-    handleKeydown(keyEvent, orgIndex);
-  }
-}
-</script>
-
 <template>
   <div class="org-selection">
     <label id="org-dropdown-label" class="sr-only">
-      {{ $t("navigation.orgDropdown") }}
+      {{ orgDropdownLabel }}
     </label>
     <div
       ref="dropdownTriggerRef"
@@ -89,55 +11,51 @@ function handleSelectedOrg($event, orgId) {
       aria-haspopup="listbox"
       role="combobox"
       class="dropdown-trigger"
-    > 
+    >
       <input
         ref="inputRef"
-        type="text"
+        is="input"
         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">
-        <Icon name="lucide:lock" size="12" />
-        {{ $t("navigation.orgBadge") }}
-      </span>
-      <Icon
-        :name="active ? 'lucide:chevron-up' : 'lucide:chevron-down'"
-        size="16"
-        @keydown="keydownActionsOnTrigger"
-        @click.prevent="toggleDropdown"
+        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('dscl.navigation.intranet') }}
+      </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 in sortedOrgs"
-        :key="option.id"
-        :ref="(el) => setOptionRef(el, option)"
+        v-for="(option, idx) in sortedOrgs"
         v-on-click-outside="onClickOutsideHandler"
+        ref="optionRef"
+        :key="option.name"
         role="option"
         class="org-option"
-        :class="{
-  selected: option.id === localSelectedOrgId,
-  highlighted: highlightedOrg && option.id === highlightedOrg.id
-}"
-        :aria-selected="option.id === localSelectedOrgId"
-        tabindex="0"
-        @keydown="handleSelectedOrg($event, option.id)"
-        @click="handleSelectedOrg($event, option.id)"
+        :class="{ selected: option === selectedOrg }"
+        :aria-selected="!!String(option === selectedOrg)"
+        tabindex="-1"
+        @keydown="handleKeydownAction(orgs, idx, $event, optionRef, dropdownTriggerRef)"
+        @click="handleSelectedClick(idx)"
       >
-        <span :class="{ pinned: option.pinned, 'item-flex': true }"
-          >{{ option.name }}
-          <span v-if="option.intranet" class="badge selected">
-            <Icon name="lucide:lock" size="12" />
-            {{ $t("navigation.orgBadge") }}
+        <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 v-if="option.intranet" class="intranet selected">
+            <a-icon icon="16:lock-locked"></a-icon>
+            {{ $t('dscl.navigation.intranet') }}
           </span>
         </span>
       </div>
@@ -145,57 +63,104 @@ function handleSelectedOrg($event, orgId) {
   </div>
 </template>
 
+<script setup lang="ts">
+import { useDropdown } from '../../composables/accessibleActions.js';
+import { vOnClickOutside } from '@vueuse/components';
+import { ref, computed } from 'vue'
+const { $t } = useNuxtApp();
+
+const emit = defineEmits(['selected']);
+
+const {
+  active,
+  newQuery,
+  toggleDropdown,
+  closeDropdown,
+  onClickOutsideHandler,
+  keydownActionsOnTrigger,
+  handleKeydown,
+  handleDropdownSearch,
+  // focusDropdownItem,
+} = useDropdown();
+
+interface IOrgSelectProps {
+  orgs: Array<any>;
+  selectedOrg: {};
+};
+
+const dropdownTriggerRef = ref();
+const optionRef = ref();
+
+const props = defineProps<IOrgSelectProps>();
+
+const sortedOrgs = computed(() => {
+  return [...props.orgs].sort((a, b) => {
+    if (a.pinned && !b.pinned) {
+      return -1;
+    } else if (!a.pinned && b.pinned) {
+      return 1;
+    } else {
+      return 0;
+    }
+  });
+});
+const orgDropdownLabel = computed(() => {
+  return useNuxtApp().$t('navigation.orgDropdown') || 'Select Organization'
+})
+
+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);
+}
+</script>
+
 <style scoped>
 #organizations-options-list {
   position: absolute;
   width: 300px;
   max-height: 300px;
   overflow-y: auto;
-  background-color: var(--primary-white);
-  z-index: v-bind(zIndex);
+  background-color: white;
+  z-index: 50;
 }
 
 .org-selection {
-  border-radius: 4px 4px 0 0;
-}
-.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));
+  margin-right: 25px;
+}
+.org-selection .dropdown-trigger:focus-visible {
+  outline: 2px #000FFF solid;
 }
 .org-selection .dropdown-trigger .org-title {
   line-height: 16px;
-  width: 100%;
+  width: 300px;
   padding: 12px;
   letter-spacing: 0.4px;
   touch-action: manipulation;
-  color: var(--primary-dark);
+  color: #333;
   height: 40px;
-  border: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: 8px;
-  background: var(--dscl-forms-bg, var(--grey-10));
+  border-radius: 4px 4px 0 0;
+  border: 0;
+  border-bottom: 1px solid var(--dscl-forms-underline, #747474);
+  background: var(--dscl-forms-bg, #fbfbfb);
   white-space: nowrap;
   cursor: pointer;
 }
-.org-selection .dropdown-trigger .org-title:focus-visible {
-  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 .intranet {
+  background-color: var(--purple-50);
 }
 .org-selection .dropdown .org-option {
-  padding: 12px 12px 12px 36px;
+  display: block;
+  padding: 12px;
   min-height: 40px;
   line-height: 16px;
   text-decoration: none;
@@ -203,41 +168,31 @@ function handleSelectedOrg($event, orgId) {
   position: relative;
   cursor: pointer;
 }
-.org-selection .dropdown .org-option.selected {
-  background-image: url("../../assets/checkmark.svg");
-  background-repeat: no-repeat;
-  background-position: center left 15px;
-  color: var(--purple);
-}
-.org-selection .dropdown .org-option.highlighted {
-  background-color: #f8f6fc;
-}
 .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: 8px;
+  gap: 10px;
   align-items: center;
   width: 100%;
   justify-content: space-between;
 }
-.org-selection .badge {
+.org-selection .intranet {
   display: inline-flex;
   align-items: center;
   background-color: var(--purple-50);
   padding: 2px 4px;
   color: white;
-  border-radius: 2px;
-  text-transform: uppercase;
+  border-radius: 4px;
 }
-.org-selection .badge svg {
+.org-selection .intranet svg {
   margin-right: 4px;
 }
-.org-selection .badge.selected {
+.org-selection .intranet.selected {
   background-color: var(--grey-50);
 }
 </style>