@apptegy/nuxt-navigation 0.1.59 → 0.1.61

package/dist/module.d.mts

@@ -4,4 +4,5 @@ interface ModuleOptions {
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,9 +1,12 @@
 {
   "name": "@apptegy/nuxt-navigation",
+  "compatibility": {
+    "nuxt": ">=3.0.0"
+  },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
+    "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -2,7 +2,10 @@ import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } fro
 
 const module = defineNuxtModule({
   meta: {
-    name: "@apptegy/nuxt-navigation"
+    name: "@apptegy/nuxt-navigation",
+    compatibility: {
+      nuxt: ">=3.0.0"
+    }
   },
   setup(_options, nuxt) {
     const resolver = createResolver(import.meta.url);

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

@@ -5,25 +5,15 @@
   </span>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface IAvatarProps {
-  /**
-   * Defines the src property of the image to be rendered.
-   */
-  src?: string;
-  /**
-   * Defines the name value that will be displayed as initials alongside the avatar.
-   */
-  name: string;
-}
-
-const props = defineProps<IAvatarProps>();
-
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  src: { type: String, required: false },
+  name: { type: String, required: true }
+});
 const initials = computed(() => {
-  const initials = props.name.match(/\b\w/g) || [];
-  return ((initials.shift() || "") + (initials.pop() || "")).toUpperCase();
+  const initials2 = props.name.match(/\b\w/g) || [];
+  return ((initials2.shift() || "") + (initials2.pop() || "")).toUpperCase();
 });
 </script>
 

package/dist/runtime/components/Nav/Avatar.vue.d.ts

@@ -0,0 +1,12 @@
+interface IAvatarProps {
+    /**
+     * Defines the src property of the image to be rendered.
+     */
+    src?: string;
+    /**
+     * Defines the name value that will be displayed as initials alongside the avatar.
+     */
+    name: string;
+}
+declare const _default: import("vue").DefineComponent<IAvatarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IAvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Nav/Breadcrumb.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -13,22 +13,13 @@
   </header>
 </template>
 
-<script setup lang="ts">
-interface IHeaderProps {
-  sticky?: boolean;
-}
-
-interface IUserDropdown {
-  user: {
-    name: string;
-    email: string;
-    avatar?: string;
-  };
-  userDropdownOptions: Array<unknown>;
-}
-
-defineProps<IHeaderProps & IUserDropdown>();
-defineEmits(['selected-option']);
+<script setup>
+defineProps({
+  sticky: { type: Boolean, required: false },
+  user: { type: Object, required: true },
+  userDropdownOptions: { type: Array, required: true }
+});
+defineEmits(["selected-option"]);
 </script>
 
 <style scoped>

package/dist/runtime/components/Nav/Header.vue.d.ts

@@ -0,0 +1,32 @@
+interface IHeaderProps {
+    sticky?: boolean;
+}
+interface IUserDropdown {
+    user: {
+        name: string;
+        email: string;
+        avatar?: string;
+    };
+    userDropdownOptions: Array<unknown>;
+}
+type __VLS_Props = IHeaderProps & IUserDropdown;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+type __VLS_Slots = {} & {
+    breadcrumbs?: (props: typeof __VLS_1) => any;
+} & {
+    'org-select'?: (props: typeof __VLS_3) => any;
+} & {
+    'user-controls'?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "selected-option": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onSelected-option"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -15,10 +15,10 @@
       v-if="showHelpArticles"
       :id="!isDropdown && 'help-btn'"
       :class="[
-        'help-articles-btn', 
-        !isDropdown && 'help-btn',
-        isRoomsUser && `help-btn-${userRoomsRole}`
-      ]"
+  'help-articles-btn',
+  !isDropdown && 'help-btn',
+  isRoomsUser && `help-btn-${userRoomsRole}`
+]"
       :aria-label="isDropdown ? $t('navigation.helpCenter') : $t('navigation.helpArticles')"
       @click="expandDropdown"
     >
@@ -41,60 +41,46 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { useSidebar, navigateTo, useAuth } from "#imports";
-import { ref, computed, onMounted } from 'vue'
-
-interface IHelpArticlesProps {
-  helpArticleOptions: Array<unknown>;
-  settingsRoute: string;
-  schoolWebsite: string;
-  showHelpArticles: boolean;
-};
-
+import { ref, computed, onMounted } from "vue";
+;
 const { userProfile } = useAuth();
-const props = withDefaults(defineProps<IHelpArticlesProps>(), {
-  helpArticleOptions: () => [],
-  settingsRoute: '',
-  schoolWebsite: '',
-  showHelpArticles: false,
-})
-
+const props = defineProps({
+  helpArticleOptions: { type: Array, required: true, default: () => [] },
+  settingsRoute: { type: String, required: true, default: "" },
+  schoolWebsite: { type: String, required: true, default: "" },
+  showHelpArticles: { type: Boolean, required: true, default: false }
+});
 const { state: expandedSidebar } = useSidebar();
-
 const expanded = ref(false);
 const helpBtnActions = ref();
 const dropdownScrollHeight = ref(0);
 const isDropdown = ref(false);
-
 const isRoomsUser = computed(() => {
-  return !!userProfile.value?.roles?.rooms
+  return !!userProfile.value?.roles?.rooms;
 });
-
 const userRoomsRole = computed(() => {
-  return userProfile.value?.roles?.rooms
+  return userProfile.value?.roles?.rooms;
 });
-
-const hasArticles = computed(() => !!props.helpArticleOptions?.values?.length)
-
+const hasArticles = computed(() => !!props.helpArticleOptions?.values?.length);
 onMounted(() => {
   isDropdown.value = !!props.helpArticleOptions?.values?.length;
   dropdownScrollHeight.value = helpBtnActions.value?.scrollHeight + 12;
 });
-
 function expandDropdown() {
   if (!isDropdown.value) return;
   expanded.value = !expanded.value;
-};
-
+}
+;
 async function goToSettings() {
-  await navigateTo(`${props.settingsRoute}`, {external: true});
-};
-
+  await navigateTo(`${props.settingsRoute}`, { external: true });
+}
+;
 async function goToWebsite() {
-  await navigateTo(`${props.schoolWebsite}`, {external: true});
-};
-
+  await navigateTo(`${props.schoolWebsite}`, { external: true });
+}
+;
 </script>
 
 <style scoped>

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

@@ -0,0 +1,13 @@
+interface IHelpArticlesProps {
+    helpArticleOptions: Array<unknown>;
+    settingsRoute: string;
+    schoolWebsite: string;
+    showHelpArticles: boolean;
+}
+declare const _default: import("vue").DefineComponent<IHelpArticlesProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IHelpArticlesProps> & Readonly<{}>, {
+    helpArticleOptions: Array<unknown>;
+    settingsRoute: string;
+    schoolWebsite: string;
+    showHelpArticles: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -15,17 +15,16 @@
 </g>
 </svg>
 </template>
-<script setup lang="ts">
-import { computed } from 'vue';
 
+<script setup>
+import { computed } from "vue";
 const props = defineProps({
   useLightLogo: {
     type: Boolean,
-    default: false,
-  },
-})
-
+    default: false
+  }
+});
 const fillColor = computed(() => {
-  return props.useLightLogo ? '#FFFFFF' : '#503462';
+  return props.useLightLogo ? "#FFFFFF" : "#503462";
 });
-</script>
+</script>

package/dist/runtime/components/Nav/Icons/ApptegyLogo.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    useLightLogo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    useLightLogo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    useLightLogo: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -1,13 +1,12 @@
 <template>
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 <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"/>
+<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">
+<script setup>
 import { useSidebar } from "#imports";
-
 const { state: expanded } = useSidebar();
 </script>
 

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Nav/Icons/ThrillshareLogo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Nav/Icons/UserDropdownMenu.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -36,33 +36,18 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, onMounted, useSidebar } from '#imports';
-
-interface ImpersonatedUser {
-  admin_email: string;
-  client: string;
-  email: string;
-  phone_number: string;
-  show: boolean;
-}
-
-interface IPanelProps {
-  impersonatedUser: ImpersonatedUser;
-}
-
-defineProps<IPanelProps>();
-
+<script setup>
+import { ref, onMounted, useSidebar } from "#imports";
+defineProps({
+  impersonatedUser: { type: Object, required: true }
+});
 const { state: sidebarExpanded } = useSidebar();
-
 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>

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

@@ -0,0 +1,12 @@
+interface ImpersonatedUser {
+    admin_email: string;
+    client: string;
+    email: string;
+    phone_number: string;
+    show: boolean;
+}
+interface IPanelProps {
+    impersonatedUser: ImpersonatedUser;
+}
+declare const _default: import("vue").DefineComponent<IPanelProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IPanelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,35 +1,19 @@
-<script setup lang="ts">
+<script setup>
 import { useDropdown, useNuxtApp, useAppConfig, computed, ref } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
-
 const { $t } = useNuxtApp();
 const appConfig = useAppConfig();
-const zIndex = computed(() => appConfig?.navigation?.zIndex || 100)
-
-interface IOrg {
-  name: string;
-  id: number;
-  intranet?: boolean;
-  pinned?: boolean;
-}
-
-interface IOrgSelectProps {
-  orgs: Array<IOrg>;
-  modelValue: number;
-}
-
-const emit = defineEmits<{
-  "update:model-value": [index: number];
-}>();
-
+const zIndex = computed(() => appConfig?.navigation?.zIndex || 100);
+const emit = defineEmits(["update:model-value"]);
 const dropdownTriggerRef = ref();
 const optionRef = ref();
 const selectedOrg = computed(() => {
   return props.orgs.find(({ id }) => id == props.modelValue);
 });
-
-const props = defineProps<IOrgSelectProps>();
-
+const props = defineProps({
+  orgs: { type: Array, required: true },
+  modelValue: { type: Number, required: true }
+});
 const {
   active,
   searchQuery,
@@ -38,12 +22,11 @@ const {
   onClickOutsideHandler,
   keydownActionsOnTrigger,
   handleKeydown,
-  handleDropdownSearch,
+  handleDropdownSearch
 } = useDropdown(props.orgs, optionRef, dropdownTriggerRef, {
   searchable: true,
-  trackBy: "name",
+  trackBy: "name"
 });
-
 const sortedOrgs = computed(() => {
   return [...props.orgs].sort((a, b) => {
     if (a.pinned && !b.pinned) {
@@ -55,14 +38,13 @@ const sortedOrgs = computed(() => {
     }
   });
 });
-
-function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
+function handleSelectedOrg($event, orgId) {
   if ($event.type == "click") {
     emit("update:model-value", orgId);
     closeDropdown();
   } else if ($event.type == "keydown") {
     emit("update:model-value", orgId);
-    handleKeydown($event as KeyboardEvent, orgId);
+    handleKeydown($event, orgId);
   }
 }
 </script>
@@ -96,7 +78,7 @@ function handleSelectedOrg($event: KeyboardEvent | MouseEvent, orgId: number) {
         {{ $t("navigation.orgBadge") }}
       </span>
       <a-icon
-          :icon="active ? '16:carret-up': '16:carret-down'"
+          :icon="active ? '16:carret-up' : '16:carret-down'"
           @keydown="keydownActionsOnTrigger"
           @click.prevent="toggleDropdown"
           @input="handleDropdownSearch"

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

@@ -0,0 +1,16 @@
+interface IOrg {
+    name: string;
+    id: number;
+    intranet?: boolean;
+    pinned?: boolean;
+}
+interface IOrgSelectProps {
+    orgs: Array<IOrg>;
+    modelValue: number;
+}
+declare const _default: import("vue").DefineComponent<IOrgSelectProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:model-value": (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<IOrgSelectProps> & Readonly<{
+    "onUpdate:model-value"?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -13,7 +13,7 @@
       class="skip-to-content"
       data-testid="skip-to-content"
     >
-      {{ $t('navigation.skipToContent') }}
+      {{ $t("navigation.skipToContent") }}
     </a>
     <div :class="['navbar--wrapper', fixed && 'fixed']" >
         <div class="navbar--header">
@@ -64,7 +64,7 @@
 
           <slot name="logo">
             <template v-if="brand">
-              <NuxtLink v-if="expanded ?  logo.src : logo.iconSrc" :to="homepageUrl">
+              <NuxtLink v-if="expanded ? logo.src : logo.iconSrc" :to="homepageUrl">
                 <div class="navbar--footer-logo">
                   <img :src="expanded ? logo.src : logo.iconSrc" :alt="logo.alt || $t('navigation.logoAlt')">
                 </div>
@@ -76,93 +76,56 @@
   </nav>
 </template>
 
-<script setup lang="ts">
-import { useSidebar, useBranding, useNuxtApp, ref, watch } from '#imports';
-import type { IApplication, IUser } from "../../types";
-import ApptegyLogo from './Icons/ApptegyLogo.vue';
-
+<script setup>
+import { useSidebar, useBranding, useNuxtApp, ref, watch } from "#imports";
+import ApptegyLogo from "./Icons/ApptegyLogo.vue";
 const { $t } = useNuxtApp();
-
-interface ILogo {
-  alt: string;
-  src: string;
-  iconSrc: string;
-}
-
-interface ISidebarProps {
-  clientId: number;
-  applications: Array<IApplication>;
-  currentApplication?: IApplication['text'];
-  homepageUrl?: string;
-  showHelpArticles?: boolean;
-  helpArticleOptions?: Array<unknown>;
-  impersonatedUser?: IUser;
-  logo?: ILogo;
-  skipToContent: string;
-  useApptegyLogo?: boolean;
-  fixed?: boolean;
-  isAdmin?: boolean;
-  settingsRoute: string;
-  schoolWebsite: string;
-}
-
-const props = withDefaults(defineProps<ISidebarProps>(), {
-  applications: () => [],
-  currentApplication: 'media',
-  homepageUrl: '/',
-  showHelpArticles: true,
-  helpArticleOptions: () => [],
-  impersonatedUser: () => ({
+const props = defineProps({
+  clientId: { type: Number, required: true, default: void 0 },
+  applications: { type: Array, required: true, default: () => [] },
+  currentApplication: { type: String, required: false, default: "media" },
+  homepageUrl: { type: String, required: false, default: "/" },
+  showHelpArticles: { type: Boolean, required: false, default: true },
+  helpArticleOptions: { type: Array, required: false, default: () => [] },
+  impersonatedUser: { type: Object, required: false, default: () => ({
     show: false,
     email: "staff3@lms.com",
-    phone_number: '',
+    phone_number: "",
     client: "Sales Demo",
-    admin_email: '',
-  }),
-  logo: () => ({
-    alt: '',
-    src: 'poweredby.svg',
-    iconSrc: 'poweredby-icon.svg',
-  }),
-  skipToContent: '#main-content-section',
-  clientId: undefined,
-  useApptegyLogo: false,
-  fixed: false,
-  isAdmin: false,
-  settingsRoute: '',
-  schoolWebsite: '',
+    admin_email: ""
+  }) },
+  logo: { type: Object, required: false, default: () => ({
+    alt: "",
+    src: "poweredby.svg",
+    iconSrc: "poweredby-icon.svg"
+  }) },
+  skipToContent: { type: String, required: true, default: "#main-content-section" },
+  useApptegyLogo: { type: Boolean, required: false, default: false },
+  fixed: { type: Boolean, required: false, default: false },
+  isAdmin: { type: Boolean, required: false, default: false },
+  settingsRoute: { type: String, required: true, default: "" },
+  schoolWebsite: { type: String, required: true, default: "" }
 });
-
-const emit = defineEmits<{
-  (e: 'toggle-expand', width: number): void
-}>();
-
+const emit = defineEmits(["toggle-expand"]);
 const { state: expanded } = useSidebar();
 const { brand, getBrandingStyles } = await useBranding(props.clientId);
-
 const brandLogo = ref(brand.value?.logo_light);
-
-// Emit event when expanded changes with the
-// width of the component.
 watch(expanded, (value) => {
-  emit('toggle-expand', value ? 264 : 64);
-})
-
-// Debounced Expand on Hover
+  emit("toggle-expand", value ? 264 : 64);
+});
 let expandedTimer = null;
 function onHover() {
-  if(!expanded.value) {
+  if (!expanded.value) {
     expandedTimer = setTimeout(() => {
       expanded.value = true;
     }, 280);
   }
 }
 function onHoverLeave() {
-  if(!expanded.value) {
+  if (!expanded.value) {
     clearTimeout(expandedTimer);
   }
 }
-
 </script>
 
 <style scoped>

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

@@ -0,0 +1,59 @@
+import type { IApplication, IUser } from "../../types/index.js";
+interface ILogo {
+    alt: string;
+    src: string;
+    iconSrc: string;
+}
+interface ISidebarProps {
+    clientId: number;
+    applications: Array<IApplication>;
+    currentApplication?: IApplication['text'];
+    homepageUrl?: string;
+    showHelpArticles?: boolean;
+    helpArticleOptions?: Array<unknown>;
+    impersonatedUser?: IUser;
+    logo?: ILogo;
+    skipToContent: string;
+    useApptegyLogo?: boolean;
+    fixed?: boolean;
+    isAdmin?: boolean;
+    settingsRoute: string;
+    schoolWebsite: string;
+}
+declare var __VLS_6: {}, __VLS_13: {}, __VLS_20: {}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    logo?: (props: typeof __VLS_6) => any;
+} & {
+    switcher?: (props: typeof __VLS_13) => any;
+} & {
+    default?: (props: typeof __VLS_20) => any;
+} & {
+    logo?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ISidebarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "toggle-expand": (width: number) => any;
+}, string, import("vue").PublicProps, Readonly<ISidebarProps> & Readonly<{
+    "onToggle-expand"?: ((width: number) => any) | undefined;
+}>, {
+    helpArticleOptions: Array<unknown>;
+    settingsRoute: string;
+    schoolWebsite: string;
+    showHelpArticles: boolean;
+    fixed: boolean;
+    impersonatedUser: IUser;
+    clientId: number;
+    applications: Array<IApplication>;
+    currentApplication: IApplication["text"];
+    homepageUrl: string;
+    logo: ILogo;
+    skipToContent: string;
+    useApptegyLogo: boolean;
+    isAdmin: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,17 +1,16 @@
-<script setup lang="ts">
+<script setup>
 import { useSidebar, computed, resolveComponent } from "#imports";
-
-const props = defineProps<{
-  icon?: string;
-  active?: boolean;
-  as?: string;
-}>()
+const props = defineProps({
+  icon: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  as: { type: String, required: false }
+});
 const { state: expanded } = useSidebar();
-const component = computed(()=> props.as || resolveComponent("NuxtLink"));
+const component = computed(() => props.as || resolveComponent("NuxtLink"));
 </script>
 
 <template>
-  <component :is="component" class="a-navbar-item" :class="{expanded, active}">
+  <component :is="component" class="a-navbar-item" :class="{ expanded, active }">
     <slot name="icon">
         <a-icon class="icon" :icon="icon" font-size="24px"/>
     </slot>

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

@@ -0,0 +1,19 @@
+type __VLS_Props = {
+    icon?: string;
+    active?: boolean;
+    as?: string;
+};
+declare var __VLS_7: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="a-nav-section" :class="{ active }">
     <NuxtLink class="a-nav-section--link" :to="active ? '' : application.url" :aria-label="appText">
@@ -12,23 +11,16 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { useSidebar, computed, ref } from "#imports";
-import type { IApplication } from "../../types";
 import icons from "../../assets/iconPaths.json";
-
-const props = defineProps<{
-  application: IApplication;
-  active: boolean;
-}>();
-
-const appText = computed(() => props.application.text.replace("_", " "))
-
+const props = defineProps({
+  application: { type: Object, required: true },
+  active: { type: Boolean, required: true }
+});
+const appText = computed(() => props.application.text.replace("_", " "));
 const { state: expanded } = useSidebar();
-
 const isOpen = ref(true);
-
-
 </script>
 
 <style scoped>
@@ -43,7 +35,7 @@ const isOpen = ref(true);
   display: flex;
   flex-direction: column;
   max-height: 100vh;
-  overflow: hidden;
+  overflow: auto;
   transition: max-height 0.3s ease;
 }
 .a-nav-section--content.collapse {

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

@@ -0,0 +1,17 @@
+import type { IApplication } from "../../types/index.js";
+type __VLS_Props = {
+    application: IApplication;
+    active: boolean;
+};
+declare var __VLS_22: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_22) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,14 +1,13 @@
 <template>
   <button class="sidebar-toggle" :aria-expanded="state" @click="toggleSidebar">
     <NavIconsSidebarToggle />
-    <span class="sr-only"> {{ $t('navigation.sidebarToggle') }}</span>
+    <span class="sr-only"> {{ $t("navigation.sidebarToggle") }}</span>
   </button>
 </template>
 
-<script setup lang="ts">
-import { useSidebar } from '#imports';
-
-const { state, toggleSidebar } = useSidebar()
+<script setup>
+import { useSidebar } from "#imports";
+const { state, toggleSidebar } = useSidebar();
 </script>
 
 <style scoped>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -6,10 +6,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-
-</script>
-
 <style scoped>
 .secondary-nav {
   display: flex;

package/dist/runtime/components/Nav/SubMenu.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,13 +1,12 @@
-<script setup lang="ts">
+<script setup>
 defineProps({
   icon: {
     type: String,
     required: true
-  },
-})
+  }
+});
 </script>
 
-
 <template>
   <NuxtLink class="menu-item">
     <div class="menu-item__icon">

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

@@ -0,0 +1,22 @@
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,47 +1,32 @@
-<script setup lang="ts">
-import { useDropdown, useAppConfig , computed, ref} from "#imports";
+<script setup>
+import { useDropdown, useAppConfig, computed, ref } from "#imports";
 import { vOnClickOutside } from "@vueuse/components";
-
-interface IUserDropdown {
-  user: {
-    name: string;
-    avatar?: string;
-    email: 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>>();
-
+const zIndex = computed(() => appConfig?.navigation?.zIndex || 100);
+const props = defineProps({
+  user: { type: Object, required: true },
+  userDropdownOptions: { type: Array, required: true }
+});
+const dropdownTriggerRef = ref();
+const dropdownOptionsRef = ref();
 const {
   active,
   toggleDropdown,
   closeDropdown,
   keydownActionsOnTrigger,
   handleKeydown,
-  onClickOutsideHandler,
+  onClickOutsideHandler
 } = useDropdown(
   props.userDropdownOptions,
   dropdownOptionsRef,
-  dropdownTriggerRef,
+  dropdownTriggerRef
 );
-
-const emit = defineEmits<{
-  "select-option": [index: number];
-}>();
-
-function handleSelectedClick(index: number) {
+const emit = defineEmits(["select-option"]);
+function handleSelectedClick(index) {
   emit("select-option", index);
   closeDropdown();
 }
-
-function handleKeydownAction($event: KeyboardEvent, index: number) {
+function handleKeydownAction($event, index) {
   if ($event.key === "Enter" || $event.key === " ") {
     emit("select-option", index);
     $event?.target?.children[0]?.click();

package/dist/runtime/components/Nav/UserDropdown.vue.d.ts

@@ -0,0 +1,17 @@
+interface IUserDropdown {
+    user: {
+        name: string;
+        avatar?: string;
+        email: string;
+    };
+    userDropdownOptions: Array<{
+        label: string;
+        url: string;
+    }>;
+}
+declare const _default: import("vue").DefineComponent<IUserDropdown, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-option": (index: number) => any;
+}, string, import("vue").PublicProps, Readonly<IUserDropdown> & Readonly<{
+    "onSelect-option"?: ((index: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -4,8 +4,8 @@ export declare function useDropdown(options: Array<OptionItem>, dropdownOptionsR
     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;
     toggleSidebar: () => void;
-    sidebarWidth: any;
+    sidebarWidth: import("vue").ComputedRef<"264px" | "0px">;
 };

package/dist/types.d.mts

@@ -1 +1,3 @@
-export { type ModuleOptions, default } from './module.js'
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -1,17 +1,15 @@
 {
     "name": "@apptegy/nuxt-navigation",
-    "version": "0.1.59",
+    "version": "0.1.61",
     "type": "module",
     "exports": {
         ".": {
-            "types": "./dist/types.d.ts",
             "import": "./dist/module.mjs",
-            "require": "./dist/module.cjs"
+            "types": "./dist/types.d.mts"
         },
         "./locale/*": "./locale/*"
     },
-    "main": "./dist/module.cjs",
-    "types": "./dist/types.d.ts",
+    "main": "./dist/module.mjs",
     "files": [
         "dist",
         "locale"
@@ -28,25 +26,25 @@
         "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
     },
     "dependencies": {
-        "@apptegy/nuxt-intl": "2.1.2",
+        "@apptegy/nuxt-intl": "^2.2.0",
         "@nuxt/kit": "^3.17.0",
-        "@vueuse/components": "12.8.2",
-        "@vueuse/core": "^12.8.2"
+        "@vueuse/components": "^12.0.0",
+        "@vueuse/core": "^12.0.0"
     },
     "devDependencies": {
-        "@nuxt/devtools": "^2.4.0",
-        "@nuxt/eslint-config": "^1.3.0",
-        "@nuxt/module-builder": "^0.8.4",
+        "@nuxt/devtools": "^2.6.2",
+        "@nuxt/eslint-config": "^1.6.0",
+        "@nuxt/module-builder": "^1.0.1",
         "@nuxt/schema": "^3.17.0",
-        "@nuxt/test-utils": "^3.17.2",
-        "@types/node": "^20.17.32",
-        "changelogen": "^0.5.7",
-        "eslint": "^9.25.1",
+        "@nuxt/test-utils": "^3.17.0",
+        "@types/node": "^22.0.0",
+        "eslint": "^9.31.0",
         "nuxt": "^3.17.0",
-        "sass": "^1.87.0",
-        "typescript": "~5.6",
-        "vitest": "^3.1.2",
+        "sass": "^1.89.2",
+        "typescript": "~5.8.0",
+        "vitest": "^3.2.4",
         "vue": "^3.5.13",
-        "vue-tsc": "^2.2.10"
-    }
+        "vue-tsc": "^3.0.3"
+    },
+    "gitHead": "abf879ffbcaab70578099916ab9a3ef1c432b7b3"
 }

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

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

package/dist/types.d.ts

@@ -1 +0,0 @@
-export { type ModuleOptions, default } from './module'