@apptegy/nuxt-navigation 0.1.97 → 0.1.99

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

@@ -0,0 +1,517 @@
+<template>
+  <div
+    class="notifications-panel"
+    :class="{ 'notifications-panel--fullscreen': isMobilePanel }"
+    role="dialog"
+    :aria-label="$t('navigation.notifications')"
+  >
+    <div class="notifications-panel__header">
+      <div class="notifications-panel__title-row">
+        <h2 class="notifications-panel__title">
+          {{ $t("navigation.notifications") }}
+        </h2>
+        <span
+          v-if="data.retentionLabel && !isMobilePanel"
+          class="notifications-panel__retention"
+        >
+          {{ data.retentionLabel }}
+        </span>
+        <button
+          v-if="isMobilePanel"
+          type="button"
+          class="notifications-panel__close"
+          :aria-label="$t('navigation.notificationsPanel.close')"
+          @click="$emit('close')"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            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
+        class="notifications-panel__tabs"
+        role="tablist"
+        :aria-label="$t('navigation.notificationsPanel.tabsLabel')"
+      >
+        <button
+          v-for="tab in data.tabs"
+          :key="tab.id"
+          type="button"
+          role="tab"
+          class="notifications-panel__tab"
+          :class="{ 'notifications-panel__tab--active': tab.id === activeTabId }"
+          :aria-selected="tab.id === activeTabId"
+          @click="selectTab(tab.id)"
+        >
+          <span>{{ tab.label }}</span>
+          <span
+            v-if="getTabBadgeCount(tab) > 0"
+            class="notifications-panel__tab-badge"
+            aria-hidden="true"
+          >
+            {{ formatCount(getTabBadgeCount(tab)) }}
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="showFilterChips"
+      class="notifications-panel__filters"
+    >
+      <div
+        ref="filtersRef"
+        class="notifications-panel__filters-scroll"
+      >
+        <button
+          v-for="filter in visibleFilters"
+          :key="filter.id"
+          type="button"
+          class="notifications-panel__filter"
+          :class="{ 'notifications-panel__filter--active': filter.id === activeFilterId }"
+          @click="selectFilter(filter.id)"
+        >
+          <span>{{ filter.label }}</span>
+          <span v-if="getFilterBadgeCount(filter) > 0">{{ formatCount(getFilterBadgeCount(filter)) }}</span>
+        </button>
+      </div>
+      <button
+        type="button"
+        class="notifications-panel__filters-next"
+        :aria-label="$t('navigation.notificationsPanel.scrollFilters')"
+        @click="scrollFilters"
+      >
+        <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="m9 18 6-6-6-6" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="notifications-panel__body">
+      <div v-if="loading" class="notifications-panel__loading">
+        {{ $t("navigation.notificationsPanel.loading") }}
+      </div>
+
+      <template v-else>
+        <section
+          v-for="(group, groupIndex) in filteredGroups"
+          :key="group.id"
+          class="notifications-panel__group"
+        >
+          <div class="notifications-panel__group-header">
+            <h3 class="notifications-panel__group-label">
+              {{ group.label }}
+            </h3>
+            <button
+              v-if="showClearAll(groupIndex)"
+              type="button"
+              class="notifications-panel__clear-all"
+              @click="$emit('clear-all', { groupId: group.id, tabId: activeTabId, filterId: activeFilterId })"
+            >
+              {{ $t("navigation.notificationsPanel.clearAll") }}
+            </button>
+          </div>
+
+          <div class="notifications-panel__list">
+            <NavNotificationItem
+              v-for="notification in group.notifications"
+              :key="notification.id"
+              :item="notification"
+              @dismiss="(id) => $emit('dismiss', { id, tabId: activeTabId, filterId: activeFilterId })"
+              @select="(item) => $emit('select', { item, tabId: activeTabId, filterId: activeFilterId })"
+            />
+          </div>
+        </section>
+
+        <p
+          v-if="isEmpty"
+          class="notifications-panel__empty"
+        >
+          {{ $t("navigation.notificationsPanel.empty") }}
+        </p>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useMediaQuery } from "@vueuse/core";
+import {
+  flattenNotifications,
+  formatNotificationCount,
+  getFilterBadgeCount as resolveFilterBadgeCount,
+  getTabBadgeCount as resolveTabBadgeCount,
+  getVisibleFilters,
+  isInBadge,
+  notificationMatchesFilter,
+  resolveNotificationFilters,
+  shouldShowFilterChips
+} from "../../utils/notifications";
+const props = defineProps({
+  data: { type: Object, required: true },
+  loading: { type: Boolean, required: false, default: false },
+  activeTabId: { type: String, required: false },
+  activeFilterId: { type: String, required: false }
+});
+const emit = defineEmits(["update:activeTabId", "update:activeFilterId", "clear-all", "dismiss", "select", "close"]);
+const isMobilePanel = useMediaQuery("(max-width: 960px)");
+const filtersRef = ref();
+const activeTabId = ref(props.activeTabId || props.data.tabs[0]?.id || "");
+const activeFilterId = ref(props.activeFilterId || props.data.filters?.[0]?.id || "all-types");
+watch(
+  () => props.activeTabId,
+  (value) => {
+    if (value) {
+      activeTabId.value = value;
+    }
+  }
+);
+watch(
+  () => props.activeFilterId,
+  (value) => {
+    if (value) {
+      activeFilterId.value = value;
+    }
+  }
+);
+watch(
+  () => props.data.tabs,
+  (tabs) => {
+    if (!tabs.some((tab) => tab.id === activeTabId.value)) {
+      activeTabId.value = tabs[0]?.id || "";
+    }
+  },
+  { deep: true }
+);
+const allNotifications = computed(() => flattenNotifications(props.data.groups));
+const usesDynamicFilters = computed(() => !props.data.filters?.length);
+const activeTab = computed(
+  () => props.data.tabs.find((tab) => tab.id === activeTabId.value)
+);
+const resolvedFilters = computed(
+  () => resolveNotificationFilters(allNotifications.value, activeTab.value, props.data.filters)
+);
+const visibleFilters = computed(() => {
+  if (usesDynamicFilters.value) {
+    return resolvedFilters.value;
+  }
+  return getVisibleFilters(allNotifications.value, resolvedFilters.value, activeTab.value);
+});
+const showFilterChips = computed(
+  () => shouldShowFilterChips(
+    allNotifications.value,
+    resolvedFilters.value,
+    activeTab.value,
+    usesDynamicFilters.value
+  )
+);
+watch(
+  visibleFilters,
+  (filters) => {
+    if (filters.length && !filters.some((filter) => filter.id === activeFilterId.value)) {
+      activeFilterId.value = filters[0]?.id || "all-types";
+    }
+    if (!filters.length && activeFilterId.value !== "all-types") {
+      activeFilterId.value = "all-types";
+    }
+  },
+  { deep: true }
+);
+function getTabBadgeCount(tab) {
+  return resolveTabBadgeCount(allNotifications.value, tab);
+}
+function getFilterBadgeCount(filter) {
+  return resolveFilterBadgeCount(allNotifications.value, filter);
+}
+function formatCount(count) {
+  return formatNotificationCount(count);
+}
+const activeFilter = computed(
+  () => visibleFilters.value.find((filter) => filter.id === activeFilterId.value) || resolvedFilters.value.find((filter) => filter.id === activeFilterId.value)
+);
+function showClearAll(groupIndex) {
+  return groupIndex === 0 && (activeTabId.value === "new" || activeTab.value?.unreadOnly);
+}
+function matchesTab(notification) {
+  const tab = activeTab.value;
+  if (!tab) {
+    return true;
+  }
+  if (tab.unreadOnly || tab.id === "new") {
+    return isInBadge(notification);
+  }
+  return notification.dismissed !== true;
+}
+function matchesFilter(notification) {
+  if (activeTabId.value === "all") {
+    return true;
+  }
+  const filter = activeFilter.value;
+  if (!filter) {
+    return true;
+  }
+  return notificationMatchesFilter(notification, filter);
+}
+const filteredGroups = computed(
+  () => props.data.groups.map((group) => ({
+    ...group,
+    notifications: group.notifications.filter(
+      (notification) => matchesTab(notification) && matchesFilter(notification)
+    )
+  })).filter((group) => group.notifications.length > 0)
+);
+const isEmpty = computed(
+  () => !props.loading && filteredGroups.value.length === 0
+);
+function selectTab(id) {
+  activeTabId.value = id;
+  emit("update:activeTabId", id);
+  if (id === "all") {
+    activeFilterId.value = "all-types";
+    emit("update:activeFilterId", "all-types");
+  }
+}
+function selectFilter(id) {
+  activeFilterId.value = id;
+  emit("update:activeFilterId", id);
+}
+function scrollFilters() {
+  filtersRef.value?.scrollBy({ left: 160, behavior: "smooth" });
+}
+</script>
+
+<style scoped>
+.notifications-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  width: min(480px, 100vw - 32px);
+  max-height: calc(100vh - 80px);
+  border: 1px solid var(--grey-20, #e5e7eb);
+  border-radius: 12px;
+  background: var(--primary-white, #fff);
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
+  overflow: hidden;
+}
+.notifications-panel__header {
+  padding: 16px 16px 0;
+}
+.notifications-panel__title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.notifications-panel__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+  color: var(--grey-90, #111827);
+}
+.notifications-panel__retention {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--grey-60, #6b7280);
+  white-space: nowrap;
+}
+.notifications-panel__tabs {
+  display: flex;
+  gap: 20px;
+  border-bottom: 1px solid var(--grey-20, #e5e7eb);
+}
+.notifications-panel__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: -1px;
+  padding: 0 0 12px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--grey-60, #6b7280);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
+  cursor: pointer;
+}
+.notifications-panel__tab--active {
+  border-bottom-color: #662e80;
+  color: #662e80;
+}
+.notifications-panel__tab-badge {
+  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;
+}
+.notifications-panel__filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--grey-20, #e5e7eb);
+}
+.notifications-panel__filters-scroll {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.notifications-panel__filters-scroll::-webkit-scrollbar {
+  display: none;
+}
+.notifications-panel__filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: 1px solid var(--grey-20, #e5e7eb);
+  border-radius: 999px;
+  background: var(--primary-white, #fff);
+  color: var(--grey-80, #374151);
+  font-size: 11.5px;
+  line-height: 16px;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.notifications-panel__filter--active {
+  border-color: #662e80;
+  background: #f5f2fb;
+  color: #662e80;
+}
+.notifications-panel__filters-next {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--grey-20, #e5e7eb);
+  border-radius: 999px;
+  background: var(--primary-white, #fff);
+  color: var(--grey-70, #4b5563);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.notifications-panel__body {
+  overflow-y: auto;
+  padding: 16px;
+}
+.notifications-panel__loading, .notifications-panel__empty {
+  margin: 0;
+  padding: 24px 0;
+  text-align: center;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--grey-60, #6b7280);
+}
+.notifications-panel__group + .notifications-panel__group {
+  margin-top: 20px;
+}
+.notifications-panel__group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.notifications-panel__group-label {
+  margin: 0;
+  font-size: 10.5px;
+  font-weight: 800;
+  line-height: 16px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--grey-40, #adadad);
+}
+.notifications-panel__clear-all {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #662e80;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  cursor: pointer;
+}
+.notifications-panel__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.notifications-panel__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-left: auto;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--grey-70, #4b5563);
+  cursor: pointer;
+}
+.notifications-panel__close:hover {
+  background: var(--grey-10, #f3f4f6);
+}
+.notifications-panel--fullscreen {
+  position: fixed;
+  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10000;
+  width: 100%;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.notifications-panel--fullscreen .notifications-panel__body {
+  flex: 1;
+  min-height: 0;
+}
+</style>

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

@@ -0,0 +1,49 @@
+import type { INotificationsPanelData } from '../../types/index.js';
+type __VLS_Props = {
+    data: INotificationsPanelData;
+    loading?: boolean;
+    activeTabId?: string;
+    activeFilterId?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:activeTabId": (id: string) => any;
+    "update:activeFilterId": (id: string) => any;
+    "clear-all": (payload: {
+        groupId: string;
+        tabId: string;
+        filterId: string;
+    }) => any;
+    dismiss: (payload: {
+        id: string;
+        tabId: string;
+        filterId: string;
+    }) => any;
+    select: (payload: {
+        item: INotificationsPanelData["groups"][number]["notifications"][number];
+        tabId: string;
+        filterId: string;
+    }) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:activeTabId"?: ((id: string) => any) | undefined;
+    "onUpdate:activeFilterId"?: ((id: string) => any) | undefined;
+    "onClear-all"?: ((payload: {
+        groupId: string;
+        tabId: string;
+        filterId: string;
+    }) => any) | undefined;
+    onDismiss?: ((payload: {
+        id: string;
+        tabId: string;
+        filterId: string;
+    }) => any) | undefined;
+    onSelect?: ((payload: {
+        item: INotificationsPanelData["groups"][number]["notifications"][number];
+        tabId: string;
+        filterId: string;
+    }) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -37,11 +37,11 @@ declare const __VLS_component: import("vue").DefineComponent<ISidebarProps, void
     "onToggle-expand"?: ((width: number) => any) | undefined;
 }>, {
     impersonatedUser: IUser;
+    fixed: boolean;
     helpArticleOptions: Array<unknown>;
     settingsRoute: string;
     schoolWebsite: string;
     showHelpArticles: boolean;
-    fixed: boolean;
     clientId: number;
     applications: Array<IApplication>;
     currentApplication: IApplication["text"];

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

@@ -1,5 +1,5 @@
 export declare function useSidebar(): {
-    state: any;
+    state: import("vue").Ref<boolean, boolean>;
     toggleSidebar: () => void;
     sidebarWidth: import("vue").ComputedRef<"264px" | "0px">;
 };

package/dist/runtime/constants/notification-types.d.ts

@@ -0,0 +1,19 @@
+import type { NotificationType } from '../types/index.js';
+/** Type accent colors from NC v2 Visual Spec (section 3). */
+export declare const NOTIFICATION_TYPE_ACCENTS: Record<NotificationType, string>;
+export declare const NOTIFICATION_BADGE_COLOR = "#C84B31";
+/** Category definitions used to derive filter pills from notification data. */
+export declare const NOTIFICATION_FILTER_CATEGORIES: Array<{
+    id: string;
+    label: string;
+    types: NotificationType[];
+}>;
+/** @deprecated Use NOTIFICATION_FILTER_CATEGORIES */
+export declare const DEFAULT_NOTIFICATION_FILTERS: ({
+    id: string;
+    label: string;
+    types: NotificationType[];
+} | {
+    id: string;
+    label: string;
+})[];

package/dist/runtime/constants/notification-types.js

@@ -0,0 +1,48 @@
+export const NOTIFICATION_TYPE_ACCENTS = {
+  announcement: "#D67A11",
+  message: "#1372B3",
+  comment: "#139A4F",
+  mention: "#5A2496",
+  reply: "#1372B3",
+  reaction: "#62626E",
+  "school-post": "#1E3FBA",
+  system: "#62626E",
+  unknown: "#62626E"
+};
+export const NOTIFICATION_BADGE_COLOR = "#C84B31";
+export const NOTIFICATION_FILTER_CATEGORIES = [
+  {
+    id: "announcements",
+    label: "Announcements",
+    types: ["announcement"]
+  },
+  {
+    id: "messages",
+    label: "Messages",
+    types: ["message"]
+  },
+  {
+    id: "comments-mentions",
+    label: "Comments & Mentions",
+    types: ["comment", "mention", "reply", "reaction"]
+  },
+  {
+    id: "school-posts",
+    label: "School Posts",
+    types: ["school-post"]
+  },
+  {
+    id: "system",
+    label: "System",
+    types: ["system"]
+  },
+  {
+    id: "other",
+    label: "Other",
+    types: ["unknown"]
+  }
+];
+export const DEFAULT_NOTIFICATION_FILTERS = [
+  { id: "all-types", label: "All types" },
+  ...NOTIFICATION_FILTER_CATEGORIES
+];

package/dist/runtime/types/index.d.ts

@@ -11,3 +11,4 @@ export interface IUser {
     client: string;
     admin_email: string;
 }
+export type { NotificationType, NotificationApiState, INotificationApiActor, INotificationApiRecord, INotificationsPagination, INotificationsApiResponse, INotificationActor, INotificationItem, INotificationGroup, INotificationTab, INotificationFilter, INotificationsPanelData, } from './notifications.js';