@apptegy/nuxt-navigation 0.1.1

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

@@ -0,0 +1,73 @@
+<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>
+    <div class="a-nav-section--content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  application: IApplication;
+  active: boolean;
+  navbarExpanded: boolean;
+}>();
+
+const iconUrl = computed(() =>
+  props.active
+    ? props.application.img_src?.replace(".svg", "_active.svg")
+    : props.application.img_src,
+);
+</script>
+
+<style scoped>
+.a-nav-section {
+  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));
+  padding-bottom: 4px;
+}
+.a-nav-section--link {
+  display: flex;
+  color: var(--dscl-nav-font-color, var(--dscl-light-font, var(--primary-white)));
+  text-decoration: none;
+  min-height: 48px;
+  align-items: center;
+  font-size: 12px;
+  letter-spacing: 1.4px;
+  overflow: hidden;
+  padding: 0px 16px;
+  width: 100%;
+}
+.a-nav-section--link:focus-visible {
+  outline: var(--orange) auto 2px;
+  outline-offset: 0px;
+  box-shadow: inset 0 0 0px 4px var(--primary-white);
+}
+.a-nav-section--link span {
+  margin: 0 8px;
+  white-space: nowrap;
+  text-transform: uppercase;
+  width: inherit;
+}
+.a-nav-section--link .caret-icon {
+  font-size: 24px;
+  transition: transform 0.2s ease-in-out;
+}
+.a-nav-section--link .caret-icon.collapse {
+  transform: rotate(0.5turn);
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <div class="secondary-nav">
+    <div class="item-wrapper">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+.secondary-nav {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 20px;
+  background-color: var(--secondary-nav-background, var(--surface-0, var(--primary-white)));
+  color: var(--secondary-nav-text, var(--brand-text, var(--primary-dark)));
+  border-radius: 4px;
+  box-shadow: var(--secondary-nav-shadow, var(--shadow-6));
+  transition: box-shadow 0.3s ease-in-out;
+}
+.secondary-nav:before {
+  content: "";
+  margin: 4px;
+  height: 2px;
+  border-radius: 2px;
+  background-color: var(--seconadry-nav-accent, var(--brand-0, var(--purple)));
+}
+.secondary-nav .item-wrapper {
+  display: flex;
+  gap: 4px;
+  padding: 12px 24px 0;
+}
+</style>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+})
+</script>
+
+
+<template>
+  <NuxtLink class="menu-item">
+    <div class="menu-item__icon">
+      <a-icon :icon />
+    </div>
+    <span class="menu-item__text">
+      <slot />
+    </span>
+  </NuxtLink>
+</template>
+
+<style scoped>
+.menu-item {
+  cursor: pointer;
+  color: var(--primary-dark);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 12px 16px;
+  padding-bottom: 4px;
+  text-decoration: none;
+}
+.menu-item__text {
+  font: var(--font-regular);
+  margin-bottom: 4px;
+}
+.menu-item__icon {
+  font-size: 32px;
+  margin-bottom: 4px;
+}
+.menu-item:after {
+  content: "";
+  bottom: 0;
+  right: 0;
+  height: 0;
+  width: 16px;
+  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 {
+  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 {
+  border-top: 2px solid var(--purple);
+}
+.menu-item.nuxt-link-exact-active, .menu-item.router-link-exact-active {
+  cursor: default;
+}
+.menu-item.nuxt-link-exact-active .menu-item__text, .menu-item.router-link-exact-active .menu-item__text {
+  font: var(--font-medium);
+}
+</style>

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

@@ -0,0 +1,33 @@
+export declare function useDropdown(): {
+    active: any;
+    newQuery: any;
+    toggleDropdown: ($event: {
+        key: string;
+    }, optionRef: {
+        focus: () => void;
+    }[]) => Promise<void>;
+    openDropdown: () => void;
+    closeDropdown: () => void;
+    onClickOutsideHandler: () => void;
+    keydownActionsOnTrigger: (event: {
+        key: string;
+        preventDefault: () => void;
+    }, options: any[], optionRef: {
+        focus: () => void;
+    }[], dropdownTriggerRef: {
+        focus: () => void;
+    }, searchable: false, inputRef: {
+        focus: () => void;
+    }) => void;
+    handleKeydown: (options: any[], optionIndex: number, event: {
+        key: string;
+    }, optionRef: {
+        focus: () => void;
+    }[], triggerRef: {
+        focus: () => void;
+    }) => number | undefined;
+    handleDropdownSearch: (val: string, orgs: any[], optionRef: {
+        focus: () => void;
+    }[]) => void;
+    debouncedFocus: any;
+};

package/dist/runtime/composables/accessibleActions.js

@@ -0,0 +1,195 @@
+import debounce from "lodash/debounce";
+import { ref, nextTick } from "vue";
+export function useDropdown() {
+  const active = ref(false);
+  let newQuery = ref("");
+  async function toggleDropdown($event, optionRef) {
+    active.value = !active.value;
+    if (active.value && $event.key === "ArrowDown") {
+      await nextTick(() => {
+        optionRef[0].focus();
+      });
+    }
+  }
+  function openDropdown() {
+    active.value = true;
+  }
+  function closeDropdown() {
+    active.value = false;
+  }
+  function onClickOutsideHandler() {
+    if (!active.value)
+      return;
+    closeDropdown();
+  }
+  function keydownActionsOnTrigger(event, options, optionRef, dropdownTriggerRef, searchable, inputRef) {
+    if (event.key !== "Tab") {
+      event.preventDefault();
+    }
+    switch (event.key) {
+      case "Tab":
+        if (!active.value)
+          return;
+        closeDropdown();
+        break;
+      case "ArrowDown":
+        nextTick(() => {
+          if (active.value && event.key === "ArrowDown") {
+            optionRef[0].focus();
+          }
+          openDropdown();
+        });
+        break;
+      case "ArrowUp":
+        openDropdown();
+        nextTick(() => {
+          if (searchable) {
+            return;
+          }
+          optionRef[0].focus();
+        });
+        break;
+      case " ":
+        if (active.value) {
+          closeDropdown();
+          nextTick(() => {
+            dropdownTriggerRef.focus();
+          });
+        } else {
+          openDropdown();
+        }
+        break;
+      case "Enter":
+        if (active.value) {
+          closeDropdown();
+          nextTick(() => {
+            dropdownTriggerRef.focus();
+          });
+        } else {
+          nextTick(() => {
+            openDropdown();
+          });
+        }
+        break;
+      case "Escape":
+        closeDropdown();
+        dropdownTriggerRef.focus();
+        break;
+      case "Home":
+        openDropdown();
+        nextTick(() => {
+          optionRef[0].focus();
+        });
+        break;
+      case "End":
+        openDropdown();
+        nextTick(() => {
+          optionRef[options.length - 1].focus();
+        });
+        break;
+      default:
+        debounce(handleDropdownSearch(event.key, options, optionRef), 500);
+        break;
+    }
+  }
+  function handleKeydown(options, optionIndex, event, optionRef, triggerRef) {
+    if (event.altKey && event.key === "ArrowUp") {
+      closeDropdown();
+      triggerRef.focus();
+      return optionIndex;
+    }
+    switch (event.key) {
+      case "Enter":
+        nextTick(() => {
+          closeDropdown();
+          triggerRef.focus();
+          return optionIndex;
+        });
+        break;
+      case " ":
+        nextTick(() => {
+          closeDropdown();
+          triggerRef.focus();
+          return optionIndex;
+        });
+        break;
+      case "Tab":
+        nextTick(() => {
+          closeDropdown();
+          return optionIndex;
+        });
+        break;
+      case "Escape":
+        nextTick(() => {
+          closeDropdown();
+          triggerRef.focus();
+        });
+        break;
+      case "ArrowDown":
+        if (optionIndex === options.length - 1)
+          break;
+        nextTick(() => {
+          optionRef[optionIndex + 1].focus();
+        });
+        return optionIndex;
+      case "ArrowUp":
+        if (optionIndex === 0)
+          break;
+        nextTick(() => {
+          optionRef[optionIndex - 1].focus();
+        });
+        return optionIndex;
+      case "Home":
+        nextTick(() => {
+          optionRef[0].focus();
+        });
+        return optionIndex;
+      case "End":
+        nextTick(() => {
+          optionRef[options.length - 1].focus();
+        });
+        return optionIndex;
+      case "PageDown": {
+        const pageDownIndexToJump = optionIndex + 10 > options.length ? optionIndex + 10 : options.length - 1;
+        optionRef[pageDownIndexToJump].focus();
+        return optionIndex;
+      }
+      case "PageUp": {
+        const pageUpIndexToJump = optionIndex - 10 < 0 ? optionIndex - 10 : 0;
+        optionRef[pageUpIndexToJump].focus();
+        return optionIndex;
+      }
+      default:
+        handleDropdownSearch(event.key, options, optionRef);
+        break;
+    }
+  }
+  const debouncedFocus = debounce((idx, optionRef) => {
+    optionRef[idx].focus();
+  }, 500);
+  function handleDropdownSearch(val, orgs, optionRef) {
+    if (val == "Backspace") {
+      newQuery.value = newQuery.value.slice(0, -1);
+      return;
+    }
+    newQuery.value = `${newQuery.value}${val}`;
+    const searchIndex = orgs.findIndex(
+      (option) => option.name.toLowerCase().includes(newQuery.value.toLowerCase())
+    );
+    if (searchIndex !== -1) {
+      debouncedFocus(searchIndex, optionRef);
+    }
+  }
+  return {
+    active,
+    newQuery,
+    toggleDropdown,
+    openDropdown,
+    closeDropdown,
+    onClickOutsideHandler,
+    keydownActionsOnTrigger,
+    handleKeydown,
+    handleDropdownSearch,
+    debouncedFocus
+  };
+}

package/dist/types.d.mts

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

package/dist/types.d.ts

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

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@apptegy/nuxt-navigation",
+  "version": "0.1.1",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.12.3"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^1.3.9",
+    "@nuxt/eslint-config": "^0.3.13",
+    "@apptegy/icons": "2.10.0",
+    "@nuxt/module-builder": "^0.8.1",
+    "@nuxt/schema": "^3.12.3",
+    "@nuxt/test-utils": "^3.13.1",
+    "@types/node": "^20.14.10",
+    "changelogen": "^0.5.5",
+    "eslint": "^9.7.0",
+    "lodash": "^4.17.15",
+    "nuxt": "^3.12.3",
+    "sass": "^1.77.8",
+    "typescript": "^5.5.3",
+    "vitest": "^1.6.0",
+    "vue": "^3.4.21",
+    "vue-tsc": "^2.0.26"
+  }
+}