@apptegy/nuxt-navigation 0.1.96 → 0.1.98

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.96",
+  "version": "0.1.98",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

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

@@ -10,6 +10,66 @@
     <slot name="org-select" />
     <slot name="user-controls" />
     <div class="user-control-actions">
+      <div
+        v-if="showNotifications"
+        ref="notificationsRef"
+        v-on-click-outside="onNotificationsClickOutside"
+        class="header__notifications"
+      >
+        <button
+          type="button"
+          class="notification-bell"
+          :class="{ 'notification-bell--active': panelOpen }"
+          :aria-label="$t('navigation.notifications')"
+          :aria-expanded="panelOpen"
+          aria-haspopup="dialog"
+          @click="toggleNotificationsPanel"
+        >
+          <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">
+          <Teleport to="body" :disabled="!isMobilePanel">
+            <NavNotificationsPanel
+              v-if="notificationsPanel && panelOpen"
+              :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="(payload) => $emit('notifications-select', payload)"
+              @close="closeNotificationsPanel"
+            />
+          </Teleport>
+        </slot>
+      </div>
       <NavUserDropdown
         :user="user"
         :user-dropdown-options="userDropdownOptions"
@@ -47,14 +107,136 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed, nextTick, ref, watch } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+import { useMediaQuery } from "@vueuse/core";
+import { useNuxtApp } from "#app";
+import {
+  getNotificationsTotalCount,
+  mapNotificationsApiResponse
+} from "../../utils/notification-api";
+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: "" },
   user: { type: Object, required: true },
   impersonatedUser: { type: Object, required: false },
   useLogoutEmit: { type: Boolean, required: false },
   userDropdownOptions: { type: Array, required: true }
 });
-defineEmits(["selected-option", "user-logout"]);
+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 notificationsRef = ref();
+const isMobilePanel = useMediaQuery("(max-width: 960px)");
+const panelOpen = ref(props.notificationPanelOpen);
+const isBellShaking = ref(false);
+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);
+});
+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;
+});
+function toggleNotificationsPanel() {
+  panelOpen.value = !panelOpen.value;
+  emit("notification-click", panelOpen.value);
+}
+function closeNotificationsPanel() {
+  panelOpen.value = false;
+}
+function onNotificationsClickOutside() {
+  if (isMobilePanel.value || !panelOpen.value) {
+    return;
+  }
+  panelOpen.value = false;
+}
+function handleTabChange(id) {
+  activeTabId.value = id;
+  emit("update:activeTabId", id);
+}
+function handleFilterChange(id) {
+  activeFilterId.value = id;
+  emit("update:activeFilterId", id);
+}
 </script>
 
 <style scoped>
@@ -73,8 +255,57 @@ header.header {
 }
 header.header .user-control-actions {
   display: flex;
+  align-items: center;
   gap: 8px;
 }
+header.header .header__notifications {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+header.header .notification-bell {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+header.header .notification-bell:hover, header.header .notification-bell--active {
+  background: var(--grey-10, #f3f4f6);
+}
+header.header .notification-bell__icon {
+  display: block;
+  flex-shrink: 0;
+  color: var(--grey-80, #374151);
+  transform-origin: 50% 20%;
+}
+header.header .notification-bell__icon--shaking {
+  animation: bellShake 600ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
+}
+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;
+}
 header.header .logout-impersonate-user {
   width: 32px;
   height: 32px;
@@ -98,4 +329,33 @@ header.header .logout-impersonate-user:hover {
 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>

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

@@ -1,6 +1,12 @@
-import type { IUser } from '../../types/index.js';
+import type { INotificationsApiResponse, IUser } from '../../types/index.js';
 interface IHeaderProps {
     sticky?: boolean;
+    showNotifications?: boolean;
+    notificationsResponse?: INotificationsApiResponse | null;
+    notificationsLoading?: boolean;
+    notificationPanelOpen?: boolean;
+    activeTabId?: string;
+    activeFilterId?: string;
 }
 interface IUserDropdown {
     user: {
@@ -13,15 +19,24 @@ interface IUserDropdown {
     userDropdownOptions: Array<unknown>;
 }
 type __VLS_Props = IHeaderProps & IUserDropdown;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
 type __VLS_Slots = {} & {
     breadcrumbs?: (props: typeof __VLS_1) => any;
 } & {
     'org-select'?: (props: typeof __VLS_3) => any;
 } & {
     'user-controls'?: (props: typeof __VLS_5) => any;
+} & {
+    notifications?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    showNotifications: boolean;
+    notificationsResponse: INotificationsApiResponse | null;
+    notificationsLoading: boolean;
+    notificationPanelOpen: boolean;
+    activeTabId: string;
+    activeFilterId: string;
+}, {}, {}, {}, 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 & {

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

@@ -0,0 +1,353 @@
+<template>
+  <div
+    class="notification-item"
+    :class="{ 'notification-item--in-badge': showBadgeActions }"
+  >
+    <div
+      class="notification-item__main"
+      role="button"
+      tabindex="0"
+      @click="handleClick"
+      @keydown.enter.prevent="handleClick"
+    >
+    <div
+      class="notification-item__avatar"
+      :style="{ '--type-accent': typeAccent }"
+    >
+      <div class="notification-item__avatar-ring">
+        <NavAvatar
+          :name="primaryActor.name"
+          :src="primaryActor.avatarUrl"
+          class="notification-item__avatar-image"
+          style="--size: 40px"
+        />
+      </div>
+      <span
+        v-if="groupBadgeLabel"
+        class="notification-item__group-badge"
+        aria-hidden="true"
+      >
+        {{ groupBadgeLabel }}
+      </span>
+      <span
+        class="notification-item__type-badge"
+        aria-hidden="true"
+      >
+        <component :is="typeIcon" />
+      </span>
+    </div>
+
+    <div class="notification-item__content">
+      <p class="notification-item__message">
+        <strong>{{ primaryActor.name }}</strong>
+        <template v-if="additionalActorsLabel">
+          {{ additionalActorsLabel }}
+        </template>
+        {{ item.actionText }}
+      </p>
+      <p class="notification-item__meta">
+        <span>{{ item.timestampLabel }}</span>
+        <template v-if="item.contextLabel">
+          <span class="notification-item__meta-separator" aria-hidden="true">·</span>
+          <span>{{ item.contextLabel }}</span>
+        </template>
+      </p>
+      <p
+        v-if="item.stateLabel"
+        class="notification-item__state-chip"
+      >
+        {{ item.stateLabel }}
+      </p>
+    </div>
+    </div>
+
+    <div class="notification-item__actions">
+      <span
+        v-if="showBadgeActions"
+        class="notification-item__unread-dot"
+        aria-hidden="true"
+      />
+      <button
+        v-if="showBadgeActions"
+        type="button"
+        class="notification-item__dismiss"
+        :aria-label="$t('navigation.notificationsPanel.dismiss')"
+        @click="handleDismiss"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, h } from "vue";
+import { getTypeAccent, isInBadge } from "../../utils/notifications";
+const props = defineProps({
+  item: { type: Object, required: true }
+});
+const emit = defineEmits(["dismiss", "select"]);
+const primaryActor = computed(() => props.item.actors[0] || { name: "" });
+const typeAccent = computed(() => getTypeAccent(props.item.type));
+const showBadgeActions = computed(() => isInBadge(props.item));
+const groupBadgeLabel = computed(() => {
+  const count = props.item.groupCount ?? Math.max(props.item.actors.length - 1, 0);
+  return count > 0 ? `+${count}` : "";
+});
+const additionalActorsLabel = computed(() => {
+  if (props.item.groupCount && props.item.groupCount > 0) {
+    return ` and ${props.item.groupCount} others`;
+  }
+  if (props.item.actors.length <= 1) {
+    return "";
+  }
+  const names = props.item.actors.slice(1).map((actor) => actor.name);
+  return `, ${names.join(", ")}`;
+});
+function svgIcon(paths) {
+  return h("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": 2,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }, paths);
+}
+const typeIcon = computed(() => {
+  switch (props.item.type) {
+    case "announcement":
+      return svgIcon([
+        h("path", { d: "m3 11 18-5v12L3 14v-3z" }),
+        h("path", { d: "M11.6 16.8a3 3 0 1 1-5.8-1.6" })
+      ]);
+    case "message":
+      return svgIcon([
+        h("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+      ]);
+    case "comment":
+      return svgIcon([
+        h("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" })
+      ]);
+    case "mention":
+      return svgIcon([
+        h("circle", { cx: 12, cy: 12, r: 4 }),
+        h("path", { d: "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" })
+      ]);
+    case "reply":
+      return svgIcon([
+        h("path", { d: "M9 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5l-5 5z" }),
+        h("path", { d: "m10 9-3 3 3 3" })
+      ]);
+    case "reaction":
+      return svgIcon([
+        h("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
+      ]);
+    case "school-post":
+      return svgIcon([
+        h("path", { d: "M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2" }),
+        h("path", { d: "M18 14h-8" }),
+        h("path", { d: "M15 18h-5" }),
+        h("path", { d: "M10 6h8v4h-8V6Z" })
+      ]);
+    case "system":
+      return svgIcon([
+        h("circle", { cx: 12, cy: 12, r: 10 }),
+        h("path", { d: "M12 16v-4" }),
+        h("path", { d: "M12 8h.01" })
+      ]);
+    default:
+      return svgIcon([
+        h("path", { d: "M10.268 21a2 2 0 0 0 3.464 0" }),
+        h("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" })
+      ]);
+  }
+});
+function handleClick() {
+  emit("select", props.item);
+}
+function handleDismiss(event) {
+  event.preventDefault();
+  event.stopPropagation();
+  emit("dismiss", props.item.id);
+}
+</script>
+
+<style scoped>
+.notification-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  align-items: start;
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--grey-20, #e5e7eb);
+  border-radius: 8px;
+  background: var(--primary-white, #fff);
+  text-align: left;
+  color: inherit;
+  transition: background-color 0.15s ease;
+}
+.notification-item__main {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 12px;
+  align-items: start;
+  min-width: 0;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+  text-align: left;
+  color: inherit;
+}
+.notification-item__main:hover .notification-item__message strong {
+  color: var(--purple-60, #662e80);
+}
+.notification-item__main:focus-visible {
+  outline: 2px solid var(--purple-60, #662e80);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.notification-item:hover {
+  background: var(--grey-10, #f9fafb);
+}
+.notification-item__avatar {
+  position: relative;
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+}
+.notification-item__avatar-ring {
+  width: 44px;
+  height: 44px;
+  padding: 2px;
+  border-radius: 50%;
+  background: var(--type-accent);
+  box-sizing: border-box;
+}
+.notification-item__avatar-image :deep(span) {
+  background-color: #f3e6d4;
+  color: var(--purple-40, #ab8cb9);
+  border: 1px solid var(--primary-white, #fff);
+}
+.notification-item__avatar-image :deep(img), .notification-item__avatar-image :deep(span) {
+  width: 40px;
+  height: 40px;
+}
+.notification-item__group-badge {
+  position: absolute;
+  right: -4px;
+  bottom: 0;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 4px;
+  border: 2px solid var(--primary-white, #fff);
+  border-radius: 999px;
+  background: var(--grey-80, #374151);
+  color: var(--primary-white, #fff);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 18px;
+  text-align: center;
+  z-index: 1;
+}
+.notification-item__type-badge {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 2px solid var(--primary-white, #fff);
+  border-radius: 999px;
+  background: var(--type-accent);
+  color: var(--primary-white, #fff);
+  z-index: 2;
+}
+.notification-item__content {
+  min-width: 0;
+}
+.notification-item__message {
+  margin: 0;
+  font-size: 14.5px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--grey-90, #111827);
+}
+.notification-item__message strong {
+  font-weight: 600;
+}
+.notification-item__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 4px 0 0;
+  font-size: 12.5px;
+  line-height: 16px;
+  color: var(--grey-50, #747474);
+}
+.notification-item__meta-separator {
+  padding: 0 2px;
+}
+.notification-item__state-chip {
+  display: inline-flex;
+  margin: 8px 0 0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: var(--grey-10, #f3f3f3);
+  color: var(--grey-60, #515151);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+}
+.notification-item__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 2px;
+}
+.notification-item__unread-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #c84b31;
+  flex-shrink: 0;
+}
+.notification-item__dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--grey-50, #9ca3af);
+  cursor: pointer;
+}
+.notification-item__dismiss:hover {
+  background: var(--grey-10, #f3f4f6);
+  color: var(--grey-80, #374151);
+}
+</style>

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

@@ -0,0 +1,12 @@
+import type { INotificationItem } from '../../types/index.js';
+type __VLS_Props = {
+    item: INotificationItem;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    dismiss: (id: string) => any;
+    select: (item: INotificationItem) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDismiss?: ((id: string) => any) | undefined;
+    onSelect?: ((item: INotificationItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;