@apptegy/nuxt-navigation 0.1.43 → 0.1.44

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

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

@@ -121,7 +121,7 @@ onMounted(() => {
   grid-column: 2;
   font-size: 12px;
   font-style: normal;
-  font-weight: 450;
+  font-weight: 400;
   line-height: 16px;
   letter-spacing: 0.4px;
   max-width: 165px;
@@ -135,9 +135,12 @@ onMounted(() => {
   color: var(--nav-text-color, var(--primary-white));
   font-size: 11px;
   font-style: normal;
-  font-weight: 450;
+  font-weight: 400;
   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/Sidebar.vue

@@ -169,9 +169,14 @@ function onHoverLeave() {
   transition: width 0.3s ease;
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
   width: 64px;
   position: relative;
 }
+.navbar::-webkit-scrollbar {
+  display: none;
+}
 .navbar a:focus-visible {
   outline: var(--orange) auto 2px;
   outline-offset: 0px;

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

@@ -32,6 +32,7 @@ const component = computed(()=> props.as || resolveComponent("NuxtLink"));
   padding: 4px;
   border: none;
   border-radius: 8px;
+  user-select: none;
 }
 .a-navbar-item:focus-visible {
   outline: var(--orange) auto 2px;
@@ -53,4 +54,7 @@ const component = computed(()=> props.as || resolveComponent("NuxtLink"));
   outline-offset: 0px;
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
+.a-navbar-item:last-child {
+  margin-bottom: 8px;
+}
 </style>

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

@@ -4,16 +4,16 @@
     <NuxtLink class="a-nav-section--link" :to="active ? '' : application.url" :aria-label="appText">
       <svg :class="{ active }" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true" v-html="icons[application.text as keyof typeof icons]"/>
       <span v-if="expanded">{{ appText }}</span>
-      <a-icon v-if="expanded && active" class="caret-icon" icon="16:carret-up" />
+      <a-icon v-if="expanded && active" :class="['caret-icon', { 'collapse': !isOpen }]" icon="16:carret-up" @click="isOpen = !isOpen" />
     </NuxtLink>
-    <div class="a-nav-section--content">
+    <div :class="['a-nav-section--content', { 'collapse': !isOpen }]">
       <slot />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useSidebar, computed } from "#imports";
+import { useSidebar, computed, ref } from "#imports";
 import type { IApplication } from "../../types";
 import icons from "../../assets/iconPaths.json";
 
@@ -26,6 +26,9 @@ const appText = computed(() => props.application.text.replace("_", " "))
 
 const { state: expanded } = useSidebar();
 
+const isOpen = ref(true);
+
+
 </script>
 
 <style scoped>
@@ -35,11 +38,16 @@ const { state: expanded } = useSidebar();
 }
 .a-nav-section.active {
   box-shadow: inset 0px -1px 0px 0px var(--nav-icon-background, rgb(80, 71, 100));
-  padding-bottom: 4px;
 }
 .a-nav-section--content {
   display: flex;
   flex-direction: column;
+  max-height: 100vh;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+.a-nav-section--content.collapse {
+  max-height: 0;
 }
 .a-nav-section--link {
   display: flex;
@@ -52,6 +60,7 @@ const { state: expanded } = useSidebar();
   overflow: hidden;
   padding: 0px 16px;
   width: 100%;
+  user-select: none;
 }
 .a-nav-section--link svg:first-child {
   background: var(--nav-icon-background, rgb(80, 71, 100));

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

@@ -1,4 +1,22 @@
 export declare function useBranding(clientId?: number): Promise<{
-    brand: any;
-    getBrandingStyles: any;
+    brand: import("vue").Ref<null, null>;
+    getBrandingStyles: import("vue").ComputedRef<{
+        '--brand-color'?: undefined;
+        '--nav-background-color'?: undefined;
+        '--nav-text-color'?: undefined;
+        '--nav-border-colors'?: undefined;
+        '--nav-icon-background'?: undefined;
+        '--nav-icon-color'?: undefined;
+        '--nav-active-icon-background'?: undefined;
+        '--nav-active-icon-color'?: undefined;
+    } | {
+        '--brand-color': any;
+        '--nav-background-color': string;
+        '--nav-text-color': string;
+        '--nav-border-colors': string;
+        '--nav-icon-background': string;
+        '--nav-icon-color': string;
+        '--nav-active-icon-background': string;
+        '--nav-active-icon-color': string;
+    }>;
 }>;

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

@@ -3,8 +3,8 @@ export declare function useDropdown(options: Array<unknown>, dropdownOptionsRef:
     searchable: boolean;
     trackBy?: string;
 }): {
-    active: any;
-    searchQuery: any;
+    active: Ref<boolean, boolean>;
+    searchQuery: Ref<string, string>;
     toggleDropdown: ($event: KeyboardEvent | MouseEvent) => Promise<void>;
     openDropdown: () => void;
     closeDropdown: () => void;

package/dist/runtime/composables/useDropdown.js

@@ -18,20 +18,17 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
     active.value = false;
   }
   function onClickOutsideHandler() {
-    if (!active.value)
-      return;
+    if (!active.value) return;
     closeDropdown();
   }
   function keydownActionsOnTrigger(event) {
-    if (event.ctrlKey || event.metaKey || event.shiftKey)
-      return;
+    if (event.ctrlKey || event.metaKey || event.shiftKey) return;
     if (event.key !== "Tab") {
       event.preventDefault();
     }
     switch (event.key) {
       case "Tab":
-        if (!active.value)
-          return;
+        if (!active.value) return;
         closeDropdown();
         break;
       case "ArrowDown":
@@ -96,8 +93,7 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
     }
   }
   function handleKeydown(event, index) {
-    if (event.ctrlKey || event.metaKey || event.shiftKey)
-      return;
+    if (event.ctrlKey || event.metaKey || event.shiftKey) return;
     if (event.altKey && event.key === "ArrowUp") {
       closeDropdown();
       dropdownTriggerRef.value.focus();
@@ -131,15 +127,13 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
         });
         break;
       case "ArrowDown":
-        if (index === options.length - 1)
-          break;
+        if (index === options.length - 1) break;
         nextTick(() => {
           dropdownOptionsRef.value[index + 1].focus();
         });
         return index;
       case "ArrowUp":
-        if (index === 0)
-          break;
+        if (index === 0) break;
         nextTick(() => {
           dropdownOptionsRef.value[index - 1].focus();
         });
@@ -176,8 +170,7 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
     dropdownOptionsRef.value[idx].focus();
   }, 500);
   function handleDropdownSearch(inputValue) {
-    if (!config.searchable)
-      return;
+    if (!config.searchable) return;
     if (inputValue.key == "Backspace") {
       searchQuery.value = searchQuery.value.slice(0, -1);
       return;

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

@@ -1,5 +1,5 @@
 export declare function useSidebar(): {
-    state: any;
+    state: import("vue").Ref<boolean, boolean>;
     toggleSidebar: () => void;
-    sidebarWidth: any;
+    sidebarWidth: import("vue").ComputedRef<"264px" | "0px">;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apptegy/nuxt-navigation",
-    "version": "0.1.43",
+    "version": "0.1.44",
     "type": "module",
     "exports": {
         ".": {
@@ -47,5 +47,5 @@
         "vue": "^3.5.13",
         "vue-tsc": "^2.2.8"
     },
-    "gitHead": "7638a218c13631df2b5511ef55e5ab7c437244d3"
+    "gitHead": "875f0f01ddc64d6eaad53d38b9313f3a69ec3227"
 }