@apptegy/nuxt-navigation 0.1.43 → 0.1.45

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "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/useDropdown.d.ts

@@ -1,5 +1,6 @@
 import type { Ref } from "#imports";
-export declare function useDropdown(options: Array<unknown>, dropdownOptionsRef: Ref<Array<HTMLElement>>, dropdownTriggerRef: Ref<HTMLElement>, config?: {
+type OptionItem = string | Record<string, string | number | boolean>;
+export declare function useDropdown(options: Array<OptionItem>, dropdownOptionsRef: Ref<Array<HTMLElement>>, dropdownTriggerRef: Ref<HTMLElement>, config?: {
     searchable: boolean;
     trackBy?: string;
 }): {
@@ -12,5 +13,6 @@ export declare function useDropdown(options: Array<unknown>, dropdownOptionsRef:
     keydownActionsOnTrigger: (event: KeyboardEvent) => void;
     handleKeydown: (event: KeyboardEvent, index: number) => number | undefined;
     handleDropdownSearch: (inputValue: KeyboardEvent & InputEvent) => void;
-    debouncedFocus: any;
+    debouncedFocus: import("@vueuse/core").PromisifyFn<(idx: number) => void>;
 };
+export {};

package/dist/runtime/composables/useDropdown.js

@@ -1,4 +1,4 @@
-import debounce from "lodash/debounce";
+import { useDebounceFn } from "@vueuse/core";
 import { ref, nextTick } from "#imports";
 export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, config = { searchable: false, trackBy: "name" }) {
   const active = ref(false);
@@ -172,7 +172,7 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
         break;
     }
   }
-  const debouncedFocus = debounce((idx) => {
+  const debouncedFocus = useDebounceFn((idx) => {
     dropdownOptionsRef.value[idx].focus();
   }, 500);
   function handleDropdownSearch(inputValue) {
@@ -186,10 +186,16 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
     searchQuery.value = `${searchQuery.value}${pressedKey}`;
     const searchIndex = options.findIndex((option) => {
       if (!config.trackBy) {
-        return option.includes(searchQuery.value);
-      } else {
-        return option[config.trackBy].toLowerCase().includes(searchQuery.value.toLowerCase());
+        return typeof option === "string" && option.includes(searchQuery.value);
+      } else if (typeof option === "object" && option !== null && config.trackBy in option) {
+        const value = option[config.trackBy];
+        if (typeof value === "string") {
+          return value.toLowerCase().includes(searchQuery.value.toLowerCase());
+        } else if (value !== null && value !== void 0) {
+          return String(value).includes(searchQuery.value);
+        }
       }
+      return false;
     });
     if (searchIndex !== -1) {
       debouncedFocus(searchIndex);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apptegy/nuxt-navigation",
-    "version": "0.1.43",
+    "version": "0.1.45",
     "type": "module",
     "exports": {
         ".": {
@@ -27,25 +27,25 @@
     },
     "dependencies": {
         "@apptegy/nuxt-intl": "2.1.2",
-        "@nuxt/kit": "^3.16.1",
+        "@nuxt/kit": "^3.17.0",
         "@vueuse/components": "12.8.2",
-        "lodash": "^4.17.21"
+        "@vueuse/core": "^12.8.2"
     },
     "devDependencies": {
-        "@nuxt/devtools": "^2.3.1",
-        "@nuxt/eslint-config": "^1.2.0",
+        "@nuxt/devtools": "^2.4.0",
+        "@nuxt/eslint-config": "^1.3.0",
         "@nuxt/module-builder": "^0.8.4",
-        "@nuxt/schema": "^3.16.1",
+        "@nuxt/schema": "^3.17.0",
         "@nuxt/test-utils": "^3.17.2",
-        "@types/node": "^20.17.24",
+        "@types/node": "^20.17.32",
         "changelogen": "^0.5.7",
-        "eslint": "^9.22.0",
-        "nuxt": "^3.16.1",
-        "sass": "^1.86.0",
-        "typescript": "^5.8.2",
-        "vitest": "^3.0.9",
+        "eslint": "^9.25.1",
+        "nuxt": "^3.17.0",
+        "sass": "^1.87.0",
+        "typescript": "^5.8.3",
+        "vitest": "^3.1.2",
         "vue": "^3.5.13",
-        "vue-tsc": "^2.2.8"
+        "vue-tsc": "^2.2.10"
     },
-    "gitHead": "7638a218c13631df2b5511ef55e5ab7c437244d3"
+    "gitHead": "98fbfe464f87cbffa62256a493274fbdb7237ef2"
 }