@apptegy/nuxt-navigation 0.1.6 → 0.1.8

package/dist/module.d.mts

@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -2,6 +2,6 @@ import * as _nuxt_schema from '@nuxt/schema';
 
 interface ModuleOptions {
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@apptegy/nuxt-navigation",
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "unknown"

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

@@ -22,7 +22,7 @@
     >
       <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>
+      <span v-if="expandedSidebar">
         {{ isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles') }}
       </span>
       <img
@@ -47,6 +47,8 @@ const props = withDefaults(defineProps<IHelpArticlesProps>(), {
   helpArticleOptions: () => [],
 })
 
+const { state: expandedSidebar } = useSidebar();
+
 const expanded = ref(false);
 const helpBtnActions = ref();
 const dropdownScrollHeight = ref(0);

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

@@ -1,6 +1,14 @@
 <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"/>
+<rect x="4.3335" y="5.5" width="15.3333"  height="13" rx="0.666667" stroke="currentColor"/>
+<rect x="4.3335" y="5.5" :width="expanded ? 6: 2" height="13" rx="0.666667" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
 </svg>
 </template>
+
+<script setup lang="ts">
+const { state: expanded } = useSidebar();
+</script>
+
+<style scoped>
+rect{transition:width .2s}
+</style>

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

@@ -1,69 +1,11 @@
-<template>
-  <div class="org-selection">
-    <label id="org-dropdown-label" class="sr-only">
-      {{ $t("navigation.orgDropdown") }}
-    </label>
-    <div
-      ref="dropdownTriggerRef"
-      aria-labelledby="org-dropdown-label"
-      aria-controls="organizations-options-list"
-      :aria-expanded="active"
-      aria-haspopup="listbox"
-      role="combobox"
-      class="dropdown-trigger"
-    >
-      <input
-        ref="inputRef"
-        type="text"
-        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">
-        <a-icon icon="16:lock-locked" />
-        {{ $t("navigation.orgBadge") }}
-      </span>
-    </div>
-    <div
-      v-show="active"
-      id="organizations-options-list"
-      class="dropdown"
-      role="listbox"
-    >
-      <div
-        v-for="(option) in sortedOrgs"
-        :key="option.id"
-        ref="optionRef"
-        v-on-click-outside="onClickOutsideHandler"
-        role="option"
-        class="org-option"
-        :class="{ selected: option.id === modelValue }"
-        :aria-selected="option.id === modelValue"
-        tabindex="-1"
-        @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">
-            <a-icon icon="16:lock-locked" />
-            {{ $t("navigation.orgBadge") }}
-          </span>
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { useDropdown, useNuxtApp } from "#imports";
+import { useDropdown, useNuxtApp, useAppConfig } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
 import { ref, computed } from "vue";
 
 const { $t } = useNuxtApp();
+const appConfig = useAppConfig();
+const zIndex = computed(() => appConfig?.navigation?.zIndex || 100)
 
 interface IOrg {
   name: string;
@@ -74,17 +16,17 @@ interface IOrg {
 
 interface IOrgSelectProps {
   orgs: Array<IOrg>;
-  modelValue: number
+  modelValue: number;
 }
 
 const emit = defineEmits<{
-    'update:model-value': [index: number]
-  }>();
+  "update:model-value": [index: number];
+}>();
 
 const dropdownTriggerRef = ref();
 const optionRef = ref();
 const selectedOrg = computed(() => {
-  return props.orgs.find(({id}) => id == props.modelValue);
+  return props.orgs.find(({ id }) => id == props.modelValue);
 });
 
 const props = defineProps<IOrgSelectProps>();
@@ -116,16 +58,76 @@ const sortedOrgs = computed(() => {
 });
 
 function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
-  if($event.type == 'click') {
+  if ($event.type == "click") {
     emit("update:model-value", orgId);
     closeDropdown();
-  } else if ($event.type == 'keydown') {
+  } else if ($event.type == "keydown") {
     emit("update:model-value", orgId);
     handleKeydown($event as KeyboardEvent, orgId);
   }
 }
 </script>
 
+<template>
+  <div class="org-selection">
+    <label id="org-dropdown-label" class="sr-only">
+      {{ $t("navigation.orgDropdown") }}
+    </label>
+    <div
+      ref="dropdownTriggerRef"
+      aria-labelledby="org-dropdown-label"
+      aria-controls="organizations-options-list"
+      :aria-expanded="active"
+      aria-haspopup="listbox"
+      role="combobox"
+      class="dropdown-trigger"
+    >
+      <input
+        ref="inputRef"
+        type="text"
+        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">
+        <a-icon icon="16:lock-locked" />
+        {{ $t("navigation.orgBadge") }}
+      </span>
+    </div>
+    <div
+      v-show="active"
+      id="organizations-options-list"
+      class="dropdown"
+      role="listbox"
+    >
+      <div
+        v-for="option in sortedOrgs"
+        :key="option.id"
+        ref="optionRef"
+        v-on-click-outside="onClickOutsideHandler"
+        role="option"
+        class="org-option"
+        :class="{ selected: option.id === modelValue }"
+        :aria-selected="option.id === modelValue"
+        tabindex="-1"
+        @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">
+            <a-icon icon="16:lock-locked" />
+            {{ $t("navigation.orgBadge") }}
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 #organizations-options-list {
   position: absolute;
@@ -133,7 +135,7 @@ function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
   max-height: 300px;
   overflow-y: auto;
   background-color: var(--primary-white);
-  z-index: 50;
+  z-index: v-bind(zIndex);
 }
 
 .org-selection {
@@ -168,11 +170,14 @@ function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
   white-space: nowrap;
   cursor: pointer;
 }
-.org-selection .dropdown-trigger .org-title:focus {
+.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 .dropdown .org-option {
-  display: block;
   padding: 12px;
   min-height: 40px;
   line-height: 16px;
@@ -200,7 +205,7 @@ function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
   background-color: var(--purple-50);
   padding: 2px 4px;
   color: white;
-  border-radius: 4px;
+  border-radius: 2px;
   text-transform: uppercase;
 }
 .org-selection .badge svg {

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

@@ -4,6 +4,8 @@
     role="navigation"
     aria-label="Main"
     :class="{ expanded }"
+    @mouseenter="onHover"
+    @mouseleave="onHoverLeave"
   >
     <a
       ref="skip-to-content"
@@ -13,14 +15,15 @@
     >
       {{ $t('navigation.skipToContent') }}
     </a>
+    <div class="navbar--header">
+        <slot name="switcher" />
+    </div>
     <div class="navbar--content">
-      <slot name="switcher" />
       <ul class="navbar-applications">
         <li v-for="application of applications" :key="application.id">
           <NavSidebarSection
               :application="application"
               :active="currentApplication === application.text"
-              :navbar-expanded="expanded"
             >
               <slot v-if="currentApplication === application.text" />
             </NavSidebarSection>
@@ -28,37 +31,32 @@
         <li>
           <NavHelpArticles
             v-if="showHelpArticles"
-            :navbar-expanded="expanded"
             :help-article-options="helpArticleOptions"
           />
         </li>
       </ul>
-
     </div>
     <div class="navbar--footer">
       <NavImpersonateInfoPanel
         v-if="impersonatedUser.show"
         :impersonated-user="impersonatedUser"
       />
-    </div>
 
       <slot name="logo">
         <NuxtLink :to="homepageUrl">
           <div class="navbar--logo">
-            <img v-if="expanded" :src="logo.src" :alt="logo.alt">
-            <img v-else :src="logo.iconSrc" :alt="logo.alt">
+            <img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt">
           </div>
         </NuxtLink>
       </slot>
+    </div>
   </nav>
 </template>
 
 <script setup lang="ts">
-import { useNuxtApp, useSidebar, ref } from '#imports';
+import { useNuxtApp, useSidebar } from '#imports';
 const { $t } = useNuxtApp();
-const { state } = useSidebar();
-
-const expanded = ref(state);
+const { state: expanded } = useSidebar();
 
 interface IApplications {
   id: number;
@@ -107,10 +105,24 @@ withDefaults(defineProps<ISidebarProps>(), {
   logo: () => ({
     alt: 'Thrillshare',
     src: 'logo.svg',
-    iconSrc: 'logo.svg',
+    iconSrc: 'icon.svg',
   })
 })
 
+// Debounced Expand on Hover
+let expandedTimer;
+function onHover() {
+  if(!expanded.value) {
+    expandedTimer = setTimeout(() => {
+      expanded.value = true;
+    }, 280);
+  }
+}
+function onHoverLeave() {
+  if(!expanded.value) {
+    clearTimeout(expandedTimer);
+  }
+}
 
 </script>
 
@@ -118,15 +130,14 @@ withDefaults(defineProps<ISidebarProps>(), {
 .navbar {
   grid-area: navsidebar;
   display: grid;
-  grid-template-rows: 1fr auto auto;
+  grid-template-rows: 0fr auto 0fr;
   font: var(--font-regular);
   background-color: var(--dscl-nav-background-color, var(--purple-70));
   color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
-  transition: min-width 0.3s ease-in-out, translate 0.2s ease-in-out;
+  transition: width 0.3s ease-in-out, translate 0.2s ease-in-out;
   height: 100vh;
   overflow-y: auto;
-  min-width: 0px;
-  translate: -256px;
+  width: 64px;
 }
 .navbar a:focus-visible {
   outline: var(--orange) auto 2px;
@@ -134,10 +145,13 @@ withDefaults(defineProps<ISidebarProps>(), {
   box-shadow: inset 0 0 0px 4px var(--primary-white);
 }
 .navbar.expanded {
-  transition: min-width 0.3s ease-in-out, translate 0.2s ease-in-out;
-  min-width: 256px;
+  transition: width 0.3s ease-in-out, translate 0.2s ease-in-out;
+  width: 256px;
   translate: 0px;
 }
+.navbar.expanded .navbar--content ul {
+  width: 256px;
+}
 .navbar--logo {
   padding: 16px;
   background-color: var(--dscl-nav-background-color, var(--purple-70));
@@ -146,7 +160,6 @@ withDefaults(defineProps<ISidebarProps>(), {
 .navbar--content {
   display: flex;
   flex-direction: column;
-  flex-basis: auto;
   margin-top: 24px;
   background-color: var(--dscl-nav-background-color, var(--purple-70));
 }
@@ -154,15 +167,16 @@ withDefaults(defineProps<ISidebarProps>(), {
   list-style: none;
   padding: 0;
   margin: 0;
-  max-width: 256px;
+  width: 64px;
 }
 .navbar--footer {
   display: flex;
   flex-direction: column;
+  height: fit-content;
 }
 .navbar .skip-to-content {
   overflow: hidden;
-  padding: 15px 23px 14px;
+  padding: 16px 24px 14px;
   position: absolute;
   left: 5px;
   top: 5px;

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

@@ -1,15 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string;
+}>();
+const { state: expanded } = useSidebar();
+</script>
+
 <template>
-  <NuxtLink class="a-navbar-item">
-    <slot />
+  <NuxtLink class="a-navbar-item" :class="{expanded}">
+    <a-icon :icon="icon" font-size="32px"/>
+    <slot v-if="expanded" />
   </NuxtLink>
 </template>
 
 <style scoped>
 .a-navbar-item {
   color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
-  margin: 4px 16px;
+  margin: 4px 12px;
   display: flex;
   align-items: center;
+  gap: 4px;
   text-decoration: none;
   text-transform: capitalize;
   padding: 4px;

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

@@ -1,9 +1,9 @@
 <template>
   <div class="a-nav-section" :class="{ active }">
-    <NuxtLink class="a-nav-section--link" :to="application.url">
-      <img v-if="application.img_src" :src="iconUrl" alt="icon">
-      <span>{{ application.text.replace("_", " ") }}</span>
-      <a-icon v-if="active" class="caret-icon" icon="16:carret-up" />
+    <NuxtLink class="a-nav-section--link" :to="active ? '' : application.url">
+      <img v-if="application.img_src" :src="active ? getActiveIcon(application.img_src) : application.img_src" alt="icon">
+      <span v-if="expanded">{{ application.text.replace("_", " ") }}</span>
+      <a-icon v-if="expanded && active" class="caret-icon" icon="16:carret-up" />
     </NuxtLink>
     <div class="a-nav-section--content">
       <slot />
@@ -12,18 +12,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{
+defineProps<{
   application: IApplication;
   active: boolean;
 }>();
 
-const iconUrl = computed(() =>
-  props.active
-    ? props.application.img_src?.replace(".svg", "_active.svg")
-    : props.application.img_src,
-);
+const { state: expanded } = useSidebar();
+
+function getActiveIcon(src){
+  return src.replace(".svg", "_active.svg");
+};
 </script>
 
 <style scoped>
@@ -31,9 +29,6 @@ const iconUrl = computed(() =>
   box-shadow: inset 0px -1px 0px 0px var(--dscl-nav-section-border-bottom-color, var(--purple-65));
   cursor: pointer;
   min-height: 48px;
-  /* &--content {
-    margin-bottom: 8px;
-  } */
 }
 .a-nav-section.active {
   box-shadow: inset 0px -1px 0px 0px var(--dscl-nav-section-border-bottom-color, var(--purple-65));

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

@@ -19,11 +19,11 @@ const { toggleSidebar } = useSidebar();
   background: var(--purple-20);
   border: none;
   border-radius: 4px;
-  padding: 8px 16px;
+  padding: 4px 8px;
   color: var(--purple);
   cursor: pointer;
 }
-.sidebar-toggle:focus {
+.sidebar-toggle:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
 }

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

@@ -48,13 +48,13 @@ defineProps({
   border-top: 2px solid transparent;
   border-radius: 4px;
 }
-.menu-item:hover, .menu-item:focus, .menu-item.nuxt-link-exact-active, .menu-item.router-link-exact-active {
+.menu-item:hover, .menu-item:focus-visible, .menu-item.nuxt-link-exact-active, .menu-item.router-link-exact-active {
   background-color: var(--purple-10);
   border-radius: 4px 4px 0px 0px;
   color: var(--purple);
   outline: none;
 }
-.menu-item:hover:after, .menu-item:focus:after, .menu-item.nuxt-link-exact-active:after, .menu-item.router-link-exact-active:after {
+.menu-item:hover:after, .menu-item:focus-visible:after, .menu-item.nuxt-link-exact-active:after, .menu-item.router-link-exact-active:after {
   border-top: 2px solid var(--purple);
 }
 .menu-item.nuxt-link-exact-active, .menu-item.router-link-exact-active {

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

@@ -1,16 +1,21 @@
 <script setup lang="ts">
+import { useDropdown, useAppConfig } from "#imports";
 import { ref } from "vue";
-import { useDropdown } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
 
 interface IUserDropdown {
   user: {
     name: string;
     avatar?: string;
+    email: string;
   };
-  userDropdownOptions: Array<{ label: string; url: string; icon: string }>;
+  userDropdownOptions: Array<{ label: string; url: string; }>;
 }
 
+const appConfig = useAppConfig();
+const zIndex = computed(() => appConfig?.navigation?.zIndex || 100)
+
+
 const props = defineProps<IUserDropdown>();
 const dropdownTriggerRef = ref<HTMLDivElement>();
 const dropdownOptionsRef = ref<Array<HTMLDivElement>>();
@@ -29,7 +34,7 @@ const {
 );
 
 const emit = defineEmits<{
-  'select-option': [index: number]
+  "select-option": [index: number];
 }>();
 
 function handleSelectedClick(index: number) {
@@ -60,7 +65,7 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
   >
     <NavAvatar :name="user.name" :src="user.avatar" />
     <NavIconsUserDropdownMenu />
-    <span class="sr-only">{{ $t('navigation.userDropdown') }}</span>
+    <span class="sr-only">{{ $t("navigation.userDropdown") }}</span>
   </div>
   <div
     v-show="active"
@@ -68,6 +73,17 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
     class="options-dropdown"
     role="listbox"
   >
+    <div class="user-info">
+        <span class="user-info-title">{{ $t("navigation.userDropdown") }}</span>
+        <div class="user-info-details">
+            <NavAvatar :name="user.name" :src="user.avatar" style="--size: 40px"/>
+            <div class="user-info-details-container">
+            <span class="user-info-name"> {{ user.name }} </span>
+            <span class="user-info-email"> {{ user.email }} </span>
+            </div>
+        </div>
+    </div>
+    <hr>
     <div
       v-for="(option, idx) in userDropdownOptions"
       :key="option.label"
@@ -79,9 +95,9 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
       @keydown="handleKeydownAction($event, idx)"
       @click="handleSelectedClick(idx)"
     >
+      <!-- because of the the above handler, this component is never treated as a link and can't redirect natively? -->
       <NuxtLink class="option" :to="option.url">
         {{ option.label }}
-        <a-icon :icon="option.icon" font-size="24px" />
       </NuxtLink>
     </div>
   </div>
@@ -106,13 +122,44 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
   align-items: center;
   cursor: pointer;
 }
-.header__dropdown:focus {
+.header__dropdown:focus-visible {
   box-shadow: 0 0 0 2px var(--primary-white), 0 0 0 3px var(--purple);
 }
-.header__dropdown .avatar-container:focus {
+.header__dropdown .avatar-container:focus-visible {
   outline: none;
 }
 
+hr {
+  border: 0;
+  border-top: 1px solid var(--grey-20);
+  margin: 8px 0;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 8px;
+}
+.user-info .user-info-title {
+  font-weight: bold;
+  font-size: 12px;
+  color: var(--grey-60);
+  text-transform: uppercase;
+}
+.user-info .user-info-details {
+  display: flex;
+  gap: 4px;
+}
+.user-info .user-info-details .user-info-details-container {
+  display: flex;
+  flex-direction: column;
+}
+.user-info .user-info-details .user-info-details-container .user-info-email {
+  font-size: 12px;
+  color: var(--grey-50);
+}
+
 .options-dropdown {
   min-height: 100px;
   position: absolute;
@@ -123,7 +170,7 @@ function handleKeydownAction($event: KeyboardEvent, index: number) {
   border-radius: 4px;
   box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.06);
   padding: 8px;
-  z-index: 10;
+  z-index: v-bind(zIndex);
 }
 .options-dropdown .option-wrapper {
   padding: 8px;

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

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

package/dist/runtime/composables/useDropdown.js

@@ -50,6 +50,9 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
           });
         }
         break;
+      case "ArrowLeft":
+      case "ArrowRight":
+        break;
       case " ":
         if (active.value) {
           closeDropdown();
@@ -141,6 +144,9 @@ export function useDropdown(options, dropdownOptionsRef, dropdownTriggerRef, con
           dropdownOptionsRef.value[index - 1].focus();
         });
         return index;
+      case "ArrowLeft":
+      case "ArrowRight":
+        break;
       case "Home":
         nextTick(() => {
           dropdownOptionsRef.value[0].focus();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "exports": {
     ".": {
@@ -26,24 +26,24 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.4",
-    "@vueuse/components": "11.0.1",
+    "@nuxt/kit": "^3.13.1",
+    "@vueuse/components": "11.0.3",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.14",
-    "@nuxt/eslint-config": "^0.5.1",
+    "@nuxt/devtools": "^1.4.1",
+    "@nuxt/eslint-config": "^0.5.6",
     "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/schema": "^3.12.4",
+    "@nuxt/schema": "^3.13.1",
     "@nuxt/test-utils": "^3.14.1",
-    "@types/node": "^20.16.1",
+    "@types/node": "^20.16.5",
     "changelogen": "^0.5.5",
-    "eslint": "^9.9.0",
-    "nuxt": "^3.12.4",
-    "sass": "^1.77.8",
+    "eslint": "^9.9.1",
+    "nuxt": "^3.13.1",
+    "sass": "^1.78.0",
     "typescript": "^5.5.4",
     "vitest": "^1.6.0",
-    "vue": "^3.4.38",
-    "vue-tsc": "^2.0.29"
+    "vue": "^3.5.2",
+    "vue-tsc": "^2.1.6"
   }
 }