@apptegy/nuxt-navigation 0.1.114 → 0.1.115

package/dist/module.json

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

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
-const module$1 = defineNuxtModule({
+const module = defineNuxtModule({
   meta: {
     name: "@apptegy/nuxt-navigation",
     compatibility: {
@@ -22,4 +22,4 @@ const module$1 = defineNuxtModule({
   }
 });
 
-export { module$1 as default };
+export { module as default };

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

@@ -29,7 +29,27 @@ type __VLS_Slots = {} & {
 } & {
     notifications?: (props: typeof __VLS_15) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, 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;

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

@@ -38,10 +38,6 @@
 
       <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">
@@ -106,16 +102,6 @@ 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",
@@ -220,7 +206,7 @@ function handleDismiss(event) {
   text-align: left;
   color: inherit;
 }
-.notification-item__main:hover .notification-item__message strong {
+.notification-item__main:hover .notification-item__message {
   color: var(--purple-60, #662e80);
 }
 .notification-item__main:focus-visible {
@@ -297,9 +283,6 @@ function handleDismiss(event) {
   line-height: 20px;
   color: var(--grey-90, #111827);
 }
-.notification-item__message strong {
-  font-weight: 600;
-}
 .notification-item__meta {
   display: flex;
   flex-wrap: wrap;

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

@@ -3,10 +3,10 @@ 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;
+    dismiss: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: ((id: string) => any) | undefined;
     onSelect?: ((item: INotificationItem) => any) | undefined;
+    onDismiss?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -8,6 +8,11 @@ type __VLS_Props = {
     mobile?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (payload: {
+        item: INotificationsPanelData["groups"][number]["notifications"][number];
+        tabId: string;
+        filterId: string;
+    }) => any;
     "update:activeTabId": (id: string) => any;
     "update:activeFilterId": (id: string) => any;
     "clear-all": (payload: {
@@ -20,13 +25,13 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {},
         tabId: string;
         filterId: string;
     }) => any;
-    select: (payload: {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((payload: {
         item: INotificationsPanelData["groups"][number]["notifications"][number];
         tabId: string;
         filterId: string;
-    }) => any;
-    close: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    }) => any) | undefined;
     "onUpdate:activeTabId"?: ((id: string) => any) | undefined;
     "onUpdate:activeFilterId"?: ((id: string) => any) | undefined;
     "onClear-all"?: ((payload: {
@@ -39,11 +44,6 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {},
         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;

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

@@ -6,13 +6,13 @@ export declare const NOTIFICATION_BADGE_COLOR = "#C84B31";
 export declare const NOTIFICATION_FILTER_CATEGORIES: Array<{
     id: string;
     label: string;
-    types: NotificationType[];
+    kinds: string[];
 }>;
 /** @deprecated Use NOTIFICATION_FILTER_CATEGORIES */
 export declare const DEFAULT_NOTIFICATION_FILTERS: ({
     id: string;
     label: string;
-    types: NotificationType[];
+    kinds: string[];
 } | {
     id: string;
     label: string;

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

@@ -14,32 +14,32 @@ export const NOTIFICATION_FILTER_CATEGORIES = [
   {
     id: "announcements",
     label: "Announcements",
-    types: ["announcement"]
+    kinds: ["announcement"]
   },
   {
     id: "messages",
     label: "Messages",
-    types: ["message"]
+    kinds: ["message"]
   },
   {
-    id: "comments-mentions",
-    label: "Comments & Mentions",
-    types: ["comment", "mention", "reply", "reaction"]
+    id: "comments-reactions",
+    label: "Comments & Reactions",
+    kinds: ["comment", "reaction"]
   },
   {
     id: "school-posts",
     label: "School Posts",
-    types: ["school-post"]
+    kinds: ["school_post"]
   },
   {
     id: "system",
     label: "System",
-    types: ["system"]
+    kinds: ["system"]
   },
   {
     id: "other",
     label: "Other",
-    types: ["unknown"]
+    kinds: ["unknown"]
   }
 ];
 export const DEFAULT_NOTIFICATION_FILTERS = [

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

@@ -7,6 +7,11 @@ export interface INotificationApiActor {
 }
 export interface INotificationApiRecord {
     id: number | string;
+    /**
+     * Category used for filter pills / `filter[kind][]` (e.g. announcement, comment, reaction).
+     * Distinct from `source_record_type`, which describes the underlying record.
+     */
+    kind?: string | null;
     source_record_type: string;
     title: string;
     summary?: string;
@@ -33,7 +38,13 @@ export interface INotificationActor {
 }
 export interface INotificationItem {
     id: string;
+    /** Visual/icon type — derived from `source_record_type`. */
     type: NotificationType;
+    /**
+     * Filter category — derived from API `kind` (falls back to `type` when kind is absent).
+     * Used by filter pills and `filter[kind][]`.
+     */
+    kind: string;
     actors: INotificationActor[];
     actionText: string;
     timestampLabel: string;
@@ -67,7 +78,15 @@ export interface INotificationFilter {
     id: string;
     label: string;
     count?: number;
-    /** Notification types included in this filter. Omit or leave empty to include all types. */
+    /**
+     * Notification kinds included in this filter (`filter[kind][]`).
+     * Omit or leave empty to include all kinds.
+     */
+    kinds?: string[];
+    /**
+     * @deprecated Prefer `kinds`. Kept for callers that still filter by
+     * `source_record_type`-derived `type`.
+     */
     types?: NotificationType[];
 }
 export interface INotificationsPanelData {

package/dist/runtime/utils/notification-api.d.ts

@@ -1,7 +1,10 @@
 import type { INotificationApiActor, INotificationApiRecord, INotificationGroup, INotificationItem, INotificationsApiResponse, INotificationsPanelData, INotificationTab, NotificationType } from '../types/index.js';
 import { type INotificationDateLabels } from './notification-dates.js';
 export declare const DEFAULT_NOTIFICATION_TABS: INotificationTab[];
+/** Normalize kind values for filter matching and `filter[kind][]` query params. */
+export declare function normalizeNotificationKind(value: string): string;
 export declare function mapSourceRecordType(sourceRecordType: string): NotificationType;
+export declare function mapNotificationKind(kind: string | null | undefined, fallbackType: NotificationType): string;
 export declare function mapNotificationApiActor(actor: INotificationApiActor): {
     name: string;
     avatarUrl: string | undefined;

package/dist/runtime/utils/notification-api.js

@@ -19,10 +19,19 @@ export const DEFAULT_NOTIFICATION_TABS = [
   { id: "new", label: "New", unreadOnly: true },
   { id: "all", label: "All" }
 ];
+export function normalizeNotificationKind(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase().replace(/-/g, "_");
+}
 export function mapSourceRecordType(sourceRecordType) {
   const normalizedSourceRecordType = sourceRecordType.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase();
   return SOURCE_RECORD_TYPE_MAP[normalizedSourceRecordType] ?? "unknown";
 }
+export function mapNotificationKind(kind, fallbackType) {
+  if (!kind) {
+    return normalizeNotificationKind(fallbackType);
+  }
+  return normalizeNotificationKind(kind) || normalizeNotificationKind(fallbackType);
+}
 export function mapNotificationApiActor(actor) {
   const name = [actor.first_name, actor.last_name].filter(Boolean).join(" ").trim();
   return {
@@ -32,9 +41,11 @@ export function mapNotificationApiActor(actor) {
 }
 export function mapNotificationApiRecord(record, options) {
   const state = record.notification_state;
+  const type = mapSourceRecordType(record.source_record_type);
   return {
     id: String(record.id),
-    type: mapSourceRecordType(record.source_record_type),
+    type,
+    kind: mapNotificationKind(record.kind, type),
     actors: (record.actors ?? []).map(mapNotificationApiActor),
     actionText: record.title,
     timestampLabel: formatNotificationTimeAgo(record.created_at, {

package/dist/runtime/utils/notifications.js

@@ -1,4 +1,5 @@
 import { NOTIFICATION_FILTER_CATEGORIES } from "../constants/notification-types.js";
+import { normalizeNotificationKind } from "./notification-api.js";
 export function flattenNotifications(groups) {
   return groups.flatMap((group) => group.notifications);
 }
@@ -23,11 +24,19 @@ export function getInBadgeNotifications(notifications) {
 export function getInBadgeCount(notifications) {
   return getInBadgeNotifications(notifications).length;
 }
+function filterKinds(filter) {
+  if (filter.kinds?.length) {
+    return filter.kinds.map(normalizeNotificationKind);
+  }
+  return (filter.types ?? []).map((type) => normalizeNotificationKind(type));
+}
 export function notificationMatchesFilter(notification, filter) {
-  if (!filter.types?.length) {
+  const kinds = filterKinds(filter);
+  if (!kinds.length) {
     return true;
   }
-  return filter.types.includes(notification.type);
+  const notificationKind = normalizeNotificationKind(notification.kind || notification.type);
+  return kinds.includes(notificationKind);
 }
 export function getTabBadgeCount(notifications, tab) {
   if (tab.unreadOnly || tab.id === "new") {
@@ -36,7 +45,7 @@ export function getTabBadgeCount(notifications, tab) {
   return 0;
 }
 export function getFilterBadgeCount(notifications, filter) {
-  if (!filter.types?.length || filter.id === "all-types") {
+  if (filter.id === "all-types" || !filterKinds(filter).length) {
     return 0;
   }
   return getInBadgeNotifications(notifications).filter(
@@ -51,9 +60,13 @@ export function getScopedNotifications(notifications, tab) {
 }
 export function buildFiltersFromNotifications(notifications, tab) {
   const scoped = getScopedNotifications(notifications, tab);
-  const typesPresent = new Set(scoped.map((notification) => notification.type));
+  const kindsPresent = new Set(
+    scoped.map(
+      (notification) => normalizeNotificationKind(notification.kind || notification.type)
+    )
+  );
   const categories = NOTIFICATION_FILTER_CATEGORIES.filter(
-    (category) => category.types.some((type) => typesPresent.has(type))
+    (category) => category.kinds.some((kind) => kindsPresent.has(normalizeNotificationKind(kind)))
   );
   if (categories.length < 2) {
     return [];
@@ -76,7 +89,10 @@ export function filterHasContent(notifications, filter, tab) {
 export function getVisibleFilters(notifications, filters, tab) {
   return filters.filter((filter) => {
     if (filter.id === "other") {
-      return notifications.some((notification) => notification.type === "unknown");
+      return notifications.some((notification) => {
+        const kind = normalizeNotificationKind(notification.kind || notification.type);
+        return kind === "unknown" || notification.type === "unknown";
+      });
     }
     return true;
   }).filter((filter) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.114",
+  "version": "0.1.115",
   "type": "module",
   "exports": {
     ".": {
@@ -36,20 +36,19 @@
     "primevue": "^4.2.5"
   },
   "devDependencies": {
-    "@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.0",
-    "@types/node": "^22.0.0",
-    "eslint": "^9.31.0",
-    "nuxt": "^3.17.0",
+    "@nuxt/devtools": "catalog:",
+    "@nuxt/eslint-config": "catalog:",
+    "@nuxt/module-builder": "catalog:",
+    "@nuxt/schema": "catalog:",
+    "@nuxt/test-utils": "catalog:",
+    "@types/node": "catalog:",
+    "eslint": "catalog:",
+    "nuxt": "catalog:",
     "primevue": "^4.5.4",
-    "sass": "^1.89.2",
-    "typescript": "~5.8.0",
-    "vitest": "^3.2.4",
-    "vue": "^3.5.13",
-    "vue-tsc": "^3.0.3"
-  },
-  "gitHead": "d57420f3128d73ad4ee181b2c437040434c0023c"
+    "sass": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:",
+    "vue": "catalog:",
+    "vue-tsc": "catalog:"
+  }
 }