@apptegy/nuxt-navigation 0.1.111 → 1.0.0-alpha.0

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.111",
+  "version": "1.0.0-alpha.0",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, installModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -7,7 +7,8 @@ const module = defineNuxtModule({
       nuxt: ">=3.0.0"
     }
   },
-  setup(_options, nuxt) {
+  async setup(_options, nuxt) {
+    await installModule("@nuxt/icon");
     const resolver = createResolver(import.meta.url);
     addComponentsDir({ path: resolver.resolve("runtime/components") });
     addImportsDir(resolver.resolve("runtime/composables"));

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

@@ -4,102 +4,47 @@
     :class="{ sticky }"
     role="banner"
   >
-    <div class="header__breadcrumbs">
-      <slot name="breadcrumbs" />
-    </div>
-    <slot name="org-select" />
-    <slot name="user-controls" />
-    <div class="user-control-actions">
-      <div
-        v-if="showNotifications"
-        class="header__notifications"
-      >
-        <Button
-          type="button"
-          severity="secondary"
-          text
-          rounded
-          class="notification-bell"
-          :class="{ 'notification-bell--active': panelOpen }"
-          :aria-label="$t('navigation.notifications')"
-          :aria-expanded="panelOpen"
-          aria-haspopup="dialog"
-          @click="onBellClick"
+    <div class="header__logo">
+      <slot name="logo">
+        <NuxtLink
+          class="no-link-style"
+          :to="homepageUrl"
         >
-          <svg
-            class="notification-bell__icon"
-            :class="{ 'notification-bell__icon--shaking': isBellShaking }"
-            xmlns="http://www.w3.org/2000/svg"
-            width="22"
-            height="22"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-            @animationend="onBellShakeEnd"
-          >
-            <path d="M10.268 21a2 2 0 0 0 3.464 0" />
-            <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
-          </svg>
-          <span
-            v-if="notificationCount > 0"
-            class="notification-bell__badge"
-            aria-hidden="true"
-          >
-            {{ formattedNotificationCount }}
-          </span>
-        </Button>
-
-        <slot name="notifications">
-          <Popover
-            v-if="!isMobilePanel"
-            ref="popoverRef"
-            append-to="body"
-            class="notifications-popover"
-            :pt="popoverPt"
-            @show="onPanelShow"
-            @hide="onPanelHide"
+          <div
+            class="header__logo-content"
+            :class="{ 'big-logo': _brandLogoWidth > 80 }"
           >
-            <NavNotificationsPanel
-              v-if="notificationsPanel"
-              embedded
-              :data="notificationsPanel"
-              :loading="notificationsLoading"
-              :active-tab-id="activeTabId"
-              :active-filter-id="activeFilterId"
-              @update:active-tab-id="handleTabChange"
-              @update:active-filter-id="handleFilterChange"
-              @clear-all="(payload) => $emit('notifications-clear-all', payload)"
-              @dismiss="(payload) => $emit('notifications-dismiss', payload)"
-              @select="handleNotificationSelect"
+            <img
+              v-if="brandLogo"
+              ref="brandLogoRef"
+              :src="brandLogo"
+              :alt="$t('navigation.brandLogoAlt')"
             />
-          </Popover>
-
-          <Teleport
-            v-else
-            to="body"
-          >
-            <NavNotificationsPanel
-              v-if="notificationsPanel && panelOpen"
-              embedded
-              mobile
-              :data="notificationsPanel"
-              :loading="notificationsLoading"
-              :active-tab-id="activeTabId"
-              :active-filter-id="activeFilterId"
-              @update:active-tab-id="handleTabChange"
-              @update:active-filter-id="handleFilterChange"
-              @clear-all="(payload) => $emit('notifications-clear-all', payload)"
-              @dismiss="(payload) => $emit('notifications-dismiss', payload)"
-              @select="handleNotificationSelect"
-              @close="closeNotificationsPanel"
+            <component
+              :is="ApptegyLogo"
+              v-else
+              :alt="$t('navigation.brandLogoAlt')"
+              :use-light-logo="isAdmin || Object.values(getBrandingStyles).length === 0"
             />
-          </Teleport>
-        </slot>
-      </div>
+            <div v-if="!brand?.hide_school_name">
+              <div class="school-name">{{ brand?.school_name }}</div>
+              <div
+                v-if="brand?.school_tag_line"
+                class="school-tag"
+              >
+                {{ brand.school_tag_line }}
+              </div>
+            </div>
+          </div>
+        </NuxtLink>
+      </slot>
+    </div>
+    <div class="header__breadcrumbs">
+      <slot name="breadcrumbs" />
+    </div>
+    <div class="user-control-actions">
+      <slot name="org-select" />
+      <slot name="user-controls" />
       <NavUserDropdown
         :user="user"
         :user-dropdown-options="userDropdownOptions"
@@ -111,11 +56,11 @@
           v-if="useLogoutEmit"
           class="logout-impersonate-user"
           :aria-label="$t('accountSettings.signOut')"
-          @click="$emit('user-logout')">
-          <a-icon
-            class="icon"
-            :icon="'16:logout'"
-            font-size="20px"
+          @click="$emit('user-logout')"
+        >
+          <Icon
+            name="lucide:log-out"
+            size="20"
             color="#662E80"
           />
         </button>
@@ -124,10 +69,9 @@
           class="logout-impersonate-user"
           :to="'/logout'"
         >
-          <a-icon
-            class="icon"
-            :icon="'16:logout'"
-            font-size="20px"
+          <Icon
+            name="lucide:log-out"
+            size="20"
             color="#662E80"
           />
         </NuxtLink>
@@ -137,154 +81,42 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, watch } from "vue";
-import { useMediaQuery } from "@vueuse/core";
-import { useNuxtApp } from "#app";
-import Button from "primevue/button";
-import Popover from "primevue/popover";
-import {
-  getNotificationsTotalCount,
-  mapNotificationsApiResponse
-} from "../../utils/notification-api";
+import { useBranding, useNuxtApp, ref, computed, onMounted, onBeforeUnmount } from "#imports";
+import ApptegyLogo from "./Icons/ApptegyLogo.vue";
+const { $t } = useNuxtApp();
 const props = defineProps({
   sticky: { type: Boolean, required: false },
-  showNotifications: { type: Boolean, required: false, default: false },
-  notificationsResponse: { type: [Object, null], required: false, default: null },
-  notificationsLoading: { type: Boolean, required: false, default: false },
-  notificationPanelOpen: { type: Boolean, required: false, default: false },
-  activeTabId: { type: String, required: false, default: "" },
-  activeFilterId: { type: String, required: false, default: "" },
+  clientId: { type: Number, required: false },
+  homepageUrl: { type: String, required: false, default: "/" },
+  isAdmin: { type: Boolean, required: false, default: false },
   user: { type: Object, required: true },
   impersonatedUser: { type: Object, required: false },
   useLogoutEmit: { type: Boolean, required: false },
   userDropdownOptions: { type: Array, required: true }
 });
-const nuxtApp = useNuxtApp();
-const emit = defineEmits([
-  "selected-option",
-  "user-logout",
-  "update:notificationPanelOpen",
-  "update:activeTabId",
-  "update:activeFilterId",
-  "notifications-clear-all",
-  "notifications-dismiss",
-  "notifications-select",
-  "notification-click"
-]);
-const popoverRef = ref(null);
-const isMobilePanel = useMediaQuery("(max-width: 960px)");
-const panelOpen = ref(props.notificationPanelOpen);
-const isBellShaking = ref(false);
-const popoverPt = {
-  content: {
-    class: "notifications-popover__content",
-    style: "padding: 0; border: none; box-shadow: none; background: transparent;"
-  }
-};
-const notificationDateLabels = computed(() => ({
-  today: nuxtApp.$t("navigation.notificationsPanel.dateGroups.today"),
-  yesterday: nuxtApp.$t("navigation.notificationsPanel.dateGroups.yesterday"),
-  yesterdayTimeAgo: nuxtApp.$t("navigation.notificationsPanel.yesterday"),
-  justNow: nuxtApp.$t("navigation.notificationsPanel.justNow")
-}));
-const notificationsPanel = computed(() => {
-  if (!props.notificationsResponse) {
-    return null;
-  }
-  return mapNotificationsApiResponse(props.notificationsResponse, {
-    locale: nuxtApp.$intl.locale,
-    dateLabels: notificationDateLabels.value,
-    retentionLabel: nuxtApp.$t("navigation.notificationsPanel.retentionLabel"),
-    tabs: [
-      { id: "new", label: nuxtApp.$t("navigation.notificationsPanel.tabs.new"), unreadOnly: true },
-      { id: "all", label: nuxtApp.$t("navigation.notificationsPanel.tabs.all") }
-    ]
-  });
-});
-const notificationCount = computed(
-  () => getNotificationsTotalCount(props.notificationsResponse)
-);
-const activeTabId = ref(props.activeTabId || notificationsPanel.value?.tabs[0]?.id || "");
-const activeFilterId = ref(props.activeFilterId || notificationsPanel.value?.filters?.[0]?.id || "all-types");
-watch(
-  notificationCount,
-  (newCount, oldCount) => {
-    if (oldCount !== void 0 && newCount > oldCount) {
-      playBellShake();
-    }
-  }
-);
-async function playBellShake() {
-  isBellShaking.value = false;
-  await nextTick();
-  isBellShaking.value = true;
-}
-function onBellShakeEnd() {
-  isBellShaking.value = false;
-}
-watch(
-  () => props.notificationPanelOpen,
-  (value) => {
-    panelOpen.value = value;
-  }
-);
-watch(panelOpen, (value) => {
-  emit("update:notificationPanelOpen", value);
-  if (!value && !isMobilePanel.value) {
-    popoverRef.value?.hide();
+defineEmits(["selected-option", "user-logout"]);
+const { brand, getBrandingStyles } = await useBranding(props.clientId);
+const brandLogo = ref(brand.value?.logo_light);
+const brandLogoRef = ref(null);
+const brandLogoWidthPx = ref(0);
+let brandLogoResizeObserver = null;
+const _brandLogoWidth = computed(() => brandLogoWidthPx.value);
+function updateBrandLogoWidth() {
+  brandLogoWidthPx.value = brandLogoRef.value?.clientWidth ?? 0;
+}
+onMounted(() => {
+  updateBrandLogoWidth();
+  if (brandLogoRef.value) {
+    brandLogoResizeObserver = new ResizeObserver(() => {
+      updateBrandLogoWidth();
+    });
+    brandLogoResizeObserver.observe(brandLogoRef.value);
   }
 });
-watch(
-  () => props.activeTabId,
-  (value) => {
-    if (value) {
-      activeTabId.value = value;
-    }
-  }
-);
-watch(
-  () => props.activeFilterId,
-  (value) => {
-    if (value) {
-      activeFilterId.value = value;
-    }
-  }
-);
-const formattedNotificationCount = computed(() => {
-  if (notificationCount.value > 99) {
-    return "99+";
-  }
-  return notificationCount.value;
+onBeforeUnmount(() => {
+  brandLogoResizeObserver?.disconnect();
+  brandLogoResizeObserver = null;
 });
-function onBellClick(event) {
-  if (isMobilePanel.value) {
-    panelOpen.value = !panelOpen.value;
-  } else {
-    popoverRef.value?.toggle(event);
-  }
-  emit("notification-click", panelOpen.value);
-}
-function onPanelShow() {
-  panelOpen.value = true;
-}
-function onPanelHide() {
-  panelOpen.value = false;
-}
-function closeNotificationsPanel() {
-  panelOpen.value = false;
-}
-function handleNotificationSelect(payload) {
-  closeNotificationsPanel();
-  emit("notifications-select", payload);
-}
-function handleTabChange(id) {
-  activeTabId.value = id;
-  emit("update:activeTabId", id);
-}
-function handleFilterChange(id) {
-  activeFilterId.value = id;
-  emit("update:activeFilterId", id);
-}
 </script>
 
 <style scoped>
@@ -292,61 +124,57 @@ header.header {
   position: relative;
   grid-area: navheader;
   display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: auto 1fr auto;
   gap: 16px;
   align-items: center;
-  padding: 24px 64px;
+  padding: 16px 32px;
   width: 100%;
   background-color: var(--primary-white);
   font: var(--font-regular);
 }
-header.header .user-control-actions {
+header.header .header__logo {
   display: flex;
   align-items: center;
-  gap: 8px;
 }
-header.header .header__notifications {
-  position: relative;
+header.header .header__logo .no-link-style {
+  text-decoration: none;
+  color: inherit;
+}
+header.header .header__logo .header__logo-content {
   display: flex;
   align-items: center;
+  gap: 8px;
 }
-header.header :deep(.notification-bell) {
-  position: relative;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  overflow: visible;
+header.header .header__logo .header__logo-content.big-logo {
+  flex-direction: column;
+  align-items: flex-start;
+}
+header.header .header__logo .header__logo-content img {
+  display: inline;
+  max-height: 36px;
+  max-width: 180px;
 }
-header.header :deep(.notification-bell).notification-bell--active {
-  background: var(--grey-10, #f3f4f6);
+header.header .header__logo .header__logo-content .school-name {
+  font-size: 16px;
+  font-weight: 700;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: nowrap;
 }
-header.header .notification-bell__badge {
-  position: absolute;
-  top: 2px;
-  right: -4px;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border: 2px solid var(--primary-white, #fff);
-  border-radius: 8px;
-  background: #c84b31;
-  color: var(--primary-white, #fff);
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 12px;
-  text-align: center;
-  box-sizing: border-box;
-  pointer-events: none;
+header.header .header__logo .header__logo-content .school-tag {
+  font-size: 14px;
+  font-weight: 400;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
-header.header .notification-bell__icon {
-  display: block;
-  flex-shrink: 0;
-  color: var(--grey-80, #374151);
-  transform-origin: 50% 20%;
+header.header .header__breadcrumbs {
+  grid-column: 2;
 }
-header.header .notification-bell__icon--shaking {
-  animation: bellShake 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
+header.header .user-control-actions {
+  grid-column: 3;
+  display: flex;
+  justify-content: end;
+  gap: 8px;
 }
 header.header .logout-impersonate-user {
   width: 32px;
@@ -364,52 +192,11 @@ header.header .logout-impersonate-user:hover {
 }
 @media only screen and (width <= 960px) {
   header.header {
-    padding-left: 32px;
-    padding-right: 32px;
+    padding-left: 24px;
+    padding-right: 24px;
   }
 }
 header.header.sticky {
   position: sticky;
 }
-
-@keyframes bellShake {
-  0% {
-    transform: rotate(0deg);
-  }
-  15% {
-    transform: rotate(14deg);
-  }
-  30% {
-    transform: rotate(-12deg);
-  }
-  45% {
-    transform: rotate(10deg);
-  }
-  60% {
-    transform: rotate(-7deg);
-  }
-  75% {
-    transform: rotate(4deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .notification-bell__icon--shaking {
-    animation: none !important;
-  }
-}
-</style>
-
-<style>
-.p-popover.notifications-popover::before, .p-popover.notifications-popover::after {
-  display: none;
-}
-
-.notifications-popover__content {
-  width: min(480px, 100vw - 32px);
-  max-height: calc(100vh - 130px);
-  overflow: hidden;
-}
 </style>

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

@@ -1,12 +1,9 @@
-import type { INotificationsApiResponse, IUser } from '../../types/index.js';
+import type { IUser } from '../../types/index.js';
 interface IHeaderProps {
     sticky?: boolean;
-    showNotifications?: boolean;
-    notificationsResponse?: INotificationsApiResponse | null;
-    notificationsLoading?: boolean;
-    notificationPanelOpen?: boolean;
-    activeTabId?: string;
-    activeFilterId?: string;
+    clientId?: number;
+    homepageUrl?: string;
+    isAdmin?: boolean;
 }
 interface IUserDropdown {
     user: {
@@ -19,43 +16,19 @@ interface IUserDropdown {
     userDropdownOptions: Array<unknown>;
 }
 type __VLS_Props = IHeaderProps & IUserDropdown;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_15: {};
+declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    breadcrumbs?: (props: typeof __VLS_1) => any;
+    logo?: (props: typeof __VLS_1) => any;
 } & {
-    'org-select'?: (props: typeof __VLS_3) => any;
+    breadcrumbs?: (props: typeof __VLS_13) => any;
 } & {
-    'user-controls'?: (props: typeof __VLS_5) => any;
+    'org-select'?: (props: typeof __VLS_15) => any;
 } & {
-    notifications?: (props: typeof __VLS_15) => any;
+    'user-controls'?: (props: typeof __VLS_17) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "selected-option": (...args: any[]) => void;
-    "user-logout": (...args: any[]) => void;
-    "update:notificationPanelOpen": (...args: any[]) => void;
-    "update:activeTabId": (...args: any[]) => void;
-    "update:activeFilterId": (...args: any[]) => void;
-    "notifications-clear-all": (...args: any[]) => void;
-    "notifications-dismiss": (...args: any[]) => void;
-    "notifications-select": (...args: any[]) => void;
-    "notification-click": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onSelected-option"?: ((...args: any[]) => any) | undefined;
-    "onUser-logout"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:notificationPanelOpen"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:activeTabId"?: ((...args: any[]) => any) | undefined;
-    "onUpdate:activeFilterId"?: ((...args: any[]) => any) | undefined;
-    "onNotifications-clear-all"?: ((...args: any[]) => any) | undefined;
-    "onNotifications-dismiss"?: ((...args: any[]) => any) | undefined;
-    "onNotifications-select"?: ((...args: any[]) => any) | undefined;
-    "onNotification-click"?: ((...args: any[]) => any) | undefined;
-}>, {
-    showNotifications: boolean;
-    notificationsResponse: INotificationsApiResponse | null;
-    notificationsLoading: boolean;
-    notificationPanelOpen: boolean;
-    activeTabId: string;
-    activeFilterId: string;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    homepageUrl: string;
+    isAdmin: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -101,15 +101,15 @@ function handleSelectedOrg($event, orgId) {
         @input="handleDropdownSearch"
       >
       <span v-if="selectedOrg?.intranet" class="badge selected">
-        <a-icon icon="16:lock-locked" />
+        <Icon name="lucide:lock" size="12" />
         {{ $t("navigation.orgBadge") }}
       </span>
-      <a-icon
-          :icon="active ? '16:carret-up' : '16:carret-down'"
-          @keydown="keydownActionsOnTrigger"
-          @click.prevent="toggleDropdown"
-          @input="handleDropdownSearch"
-        />
+      <Icon
+        :name="active ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+        size="16"
+        @keydown="keydownActionsOnTrigger"
+        @click.prevent="toggleDropdown"
+      />
     </div>
     <div
       v-show="active"
@@ -136,7 +136,7 @@ function handleSelectedOrg($event, orgId) {
         <span :class="{ pinned: option.pinned, 'item-flex': true }"
           >{{ option.name }}
           <span v-if="option.intranet" class="badge selected">
-            <a-icon icon="16:lock-locked" />
+            <Icon name="lucide:lock" size="12" />
             {{ $t("navigation.orgBadge") }}
           </span>
         </span>