@apptegy/nuxt-navigation 0.1.115 → 0.1.117

package/dist/module.json

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

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

@@ -148,12 +148,7 @@ import {
 } 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: "" },
+  notifications: { type: [Object, null], required: false, default: null },
   user: { type: Object, required: true },
   impersonatedUser: { type: Object, required: false },
   useLogoutEmit: { type: Boolean, required: false },
@@ -163,9 +158,7 @@ const nuxtApp = useNuxtApp();
 const emit = defineEmits([
   "selected-option",
   "user-logout",
-  "update:notificationPanelOpen",
-  "update:activeTabId",
-  "update:activeFilterId",
+  "update:notifications",
   "notifications-clear-all",
   "notifications-dismiss",
   "notifications-select",
@@ -173,8 +166,13 @@ const emit = defineEmits([
 ]);
 const popoverRef = ref(null);
 const isMobilePanel = useMediaQuery("(max-width: 960px)");
-const panelOpen = ref(props.notificationPanelOpen);
 const isBellShaking = ref(false);
+const showNotifications = computed(() => props.notifications != null);
+const notificationsResponse = computed(() => props.notifications?.response ?? null);
+const notificationsLoading = computed(() => props.notifications?.loading ?? false);
+const panelOpen = ref(props.notifications?.panelOpen ?? false);
+const activeTabId = ref(props.notifications?.activeTabId || "new");
+const activeFilterId = ref(props.notifications?.activeFilterId || "all-types");
 const popoverPt = {
   content: {
     class: "notifications-popover__content",
@@ -188,10 +186,10 @@ const notificationDateLabels = computed(() => ({
   justNow: nuxtApp.$t("navigation.notificationsPanel.justNow")
 }));
 const notificationsPanel = computed(() => {
-  if (!props.notificationsResponse) {
+  if (!notificationsResponse.value) {
     return null;
   }
-  return mapNotificationsApiResponse(props.notificationsResponse, {
+  return mapNotificationsApiResponse(notificationsResponse.value, {
     locale: nuxtApp.$intl.locale,
     dateLabels: notificationDateLabels.value,
     retentionLabel: nuxtApp.$t("navigation.notificationsPanel.retentionLabel"),
@@ -202,10 +200,17 @@ const notificationsPanel = computed(() => {
   });
 });
 const notificationCount = computed(
-  () => getNotificationsTotalCount(props.notificationsResponse)
+  () => getNotificationsTotalCount(notificationsResponse.value)
 );
-const activeTabId = ref(props.activeTabId || notificationsPanel.value?.tabs[0]?.id || "");
-const activeFilterId = ref(props.activeFilterId || notificationsPanel.value?.filters?.[0]?.id || "all-types");
+function patchNotifications(patch) {
+  if (!props.notifications) {
+    return;
+  }
+  emit("update:notifications", {
+    ...props.notifications,
+    ...patch
+  });
+}
 watch(
   notificationCount,
   (newCount, oldCount) => {
@@ -223,19 +228,21 @@ function onBellShakeEnd() {
   isBellShaking.value = false;
 }
 watch(
-  () => props.notificationPanelOpen,
+  () => props.notifications?.panelOpen,
   (value) => {
-    panelOpen.value = value;
+    if (value !== void 0) {
+      panelOpen.value = value;
+    }
   }
 );
 watch(panelOpen, (value) => {
-  emit("update:notificationPanelOpen", value);
+  patchNotifications({ panelOpen: value });
   if (!value && !isMobilePanel.value) {
     popoverRef.value?.hide();
   }
 });
 watch(
-  () => props.activeTabId,
+  () => props.notifications?.activeTabId,
   (value) => {
     if (value) {
       activeTabId.value = value;
@@ -243,7 +250,7 @@ watch(
   }
 );
 watch(
-  () => props.activeFilterId,
+  () => props.notifications?.activeFilterId,
   (value) => {
     if (value) {
       activeFilterId.value = value;
@@ -279,11 +286,11 @@ function handleNotificationSelect(payload) {
 }
 function handleTabChange(id) {
   activeTabId.value = id;
-  emit("update:activeTabId", id);
+  patchNotifications({ activeTabId: id });
 }
 function handleFilterChange(id) {
   activeFilterId.value = id;
-  emit("update:activeFilterId", id);
+  patchNotifications({ activeFilterId: id });
 }
 </script>
 

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

@@ -1,12 +1,10 @@
-import type { INotificationsApiResponse, IUser } from '../../types/index.js';
+import type { INotificationsHeaderModel, IUser } from '../../types/index.js';
 interface IHeaderProps {
     sticky?: boolean;
-    showNotifications?: boolean;
-    notificationsResponse?: INotificationsApiResponse | null;
-    notificationsLoading?: boolean;
-    notificationPanelOpen?: boolean;
-    activeTabId?: string;
-    activeFilterId?: string;
+    /**
+     * Host-owned notification center state. Pass `null`/`undefined` to hide the bell.
+     */
+    notifications?: INotificationsHeaderModel | null;
 }
 interface IUserDropdown {
     user: {
@@ -32,9 +30,7 @@ type __VLS_Slots = {} & {
 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;
+    "update:notifications": (...args: any[]) => void;
     "notifications-clear-all": (...args: any[]) => void;
     "notifications-dismiss": (...args: any[]) => void;
     "notifications-select": (...args: any[]) => void;
@@ -42,20 +38,13 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, 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;
+    "onUpdate:notifications"?: ((...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;
+    notifications: INotificationsHeaderModel | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -76,11 +76,21 @@
         :aria-label="$t('navigation.notificationsPanel.dismiss')"
         @click="handleDismiss"
       >
-        <Icon
-          name="lucide:x"
-          size="16"
+        <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>
@@ -317,4 +327,8 @@ function handleDismiss(event) {
   padding: 0;
   color: var(--grey-50, #9ca3af);
 }
+.notification-item__dismiss :deep(svg) {
+  display: block;
+  flex-shrink: 0;
+}
 </style>

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

@@ -185,7 +185,7 @@ import {
   getVisibleFilters,
   isInBadge,
   notificationMatchesFilter,
-  resolveNotificationFilters,
+  resolveStickyNotificationFilters,
   shouldShowFilterChips
 } from "../../utils/notifications";
 const props = defineProps({
@@ -200,6 +200,7 @@ const emit = defineEmits(["update:activeTabId", "update:activeFilterId", "clear-
 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");
+const stickyFilters = ref([]);
 watch(
   () => props.activeTabId,
   (value) => {
@@ -230,19 +231,44 @@ 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)
+function filterCatalogKey(filters) {
+  return filters.map((filter) => filter.id).join("|");
+}
+watch(
+  [allNotifications, activeTab, activeFilterId, () => props.data.filters],
+  () => {
+    const { nextStickyFilters } = resolveStickyNotificationFilters({
+      notifications: allNotifications.value,
+      tab: activeTab.value,
+      providedFilters: props.data.filters,
+      activeFilterId: activeFilterId.value,
+      stickyFilters: stickyFilters.value
+    });
+    if (filterCatalogKey(stickyFilters.value) !== filterCatalogKey(nextStickyFilters)) {
+      stickyFilters.value = nextStickyFilters;
+    }
+  },
+  { immediate: true, deep: true }
+);
+const displayFilters = computed(
+  () => resolveStickyNotificationFilters({
+    notifications: allNotifications.value,
+    tab: activeTab.value,
+    providedFilters: props.data.filters,
+    activeFilterId: activeFilterId.value,
+    stickyFilters: stickyFilters.value
+  }).filters
 );
 const visibleFilters = computed(() => {
   if (usesDynamicFilters.value) {
-    return resolvedFilters.value;
+    return displayFilters.value;
   }
-  return getVisibleFilters(allNotifications.value, resolvedFilters.value, activeTab.value);
+  return getVisibleFilters(allNotifications.value, displayFilters.value, activeTab.value);
 });
 const showFilterChips = computed(
   () => shouldShowFilterChips(
     allNotifications.value,
-    resolvedFilters.value,
+    displayFilters.value,
     activeTab.value,
     usesDynamicFilters.value
   )
@@ -269,7 +295,7 @@ 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)
+  () => visibleFilters.value.find((filter) => filter.id === activeFilterId.value) || displayFilters.value.find((filter) => filter.id === activeFilterId.value)
 );
 function showClearAll(groupIndex) {
   return groupIndex === 0 && (activeTabId.value === "new" || activeTab.value?.unreadOnly);

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

@@ -17,3 +17,5 @@ export declare const DEFAULT_NOTIFICATION_FILTERS: ({
     id: string;
     label: string;
 })[];
+/** Resolve `filter[kind][]` values for a notification center filter pill id. */
+export declare function getKindsForNotificationFilter(filterId: string | null | undefined): string[];

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

@@ -46,3 +46,10 @@ export const DEFAULT_NOTIFICATION_FILTERS = [
   { id: "all-types", label: "All types" },
   ...NOTIFICATION_FILTER_CATEGORIES
 ];
+export function getKindsForNotificationFilter(filterId) {
+  if (!filterId || filterId === "all-types") {
+    return [];
+  }
+  const category = NOTIFICATION_FILTER_CATEGORIES.find((filter) => filter.id === filterId);
+  return category?.kinds ? [...category.kinds] : [];
+}

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

@@ -11,4 +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';
+export type { NotificationType, NotificationApiState, INotificationApiActor, INotificationApiRecord, INotificationsPagination, INotificationsApiResponse, INotificationActor, INotificationItem, INotificationGroup, INotificationTab, INotificationFilter, INotificationsPanelData, INotificationsHeaderModel, } from './notifications.js';

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

@@ -96,3 +96,11 @@ export interface INotificationsPanelData {
     filters?: INotificationFilter[];
     groups: INotificationGroup[];
 }
+/** Host-owned notification center state bound to NavHeader via `v-model:notifications`. */
+export interface INotificationsHeaderModel {
+    response: INotificationsApiResponse | null;
+    loading?: boolean;
+    panelOpen?: boolean;
+    activeTabId?: string;
+    activeFilterId?: string;
+}

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

@@ -14,6 +14,20 @@ export declare function getScopedNotifications(notifications: INotificationItem[
  */
 export declare function buildFiltersFromNotifications(notifications: INotificationItem[], tab: INotificationTab | undefined): INotificationFilter[];
 export declare function resolveNotificationFilters(notifications: INotificationItem[], tab: INotificationTab | undefined, filters?: INotificationFilter[]): INotificationFilter[];
+/**
+ * Keeps the last "all types" pill catalog while a kind filter is active, so chips
+ * don't collapse when results are already filtered (e.g. via `filter[kind][]`).
+ */
+export declare function resolveStickyNotificationFilters({ notifications, tab, providedFilters, activeFilterId, stickyFilters, }: {
+    notifications: INotificationItem[];
+    tab: INotificationTab | undefined;
+    providedFilters?: INotificationFilter[];
+    activeFilterId: string;
+    stickyFilters: INotificationFilter[];
+}): {
+    filters: INotificationFilter[];
+    nextStickyFilters: INotificationFilter[];
+};
 export declare function filterHasContent(notifications: INotificationItem[], filter: INotificationFilter, tab: INotificationTab | undefined): boolean;
 export declare function getVisibleFilters(notifications: INotificationItem[], filters: INotificationFilter[], tab: INotificationTab | undefined): INotificationFilter[];
 export declare function shouldShowFilterChips(notifications: INotificationItem[], filters: INotificationFilter[], tab: INotificationTab | undefined, usesDynamicFilters?: boolean): boolean;

package/dist/runtime/utils/notifications.js

@@ -1,4 +1,7 @@
-import { NOTIFICATION_FILTER_CATEGORIES } from "../constants/notification-types.js";
+import {
+  DEFAULT_NOTIFICATION_FILTERS,
+  NOTIFICATION_FILTER_CATEGORIES
+} from "../constants/notification-types.js";
 import { normalizeNotificationKind } from "./notification-api.js";
 export function flattenNotifications(groups) {
   return groups.flatMap((group) => group.notifications);
@@ -82,6 +85,37 @@ export function resolveNotificationFilters(notifications, tab, filters) {
   }
   return buildFiltersFromNotifications(notifications, tab);
 }
+export function resolveStickyNotificationFilters({
+  notifications,
+  tab,
+  providedFilters,
+  activeFilterId,
+  stickyFilters
+}) {
+  if (providedFilters?.length) {
+    return {
+      filters: providedFilters,
+      nextStickyFilters: stickyFilters
+    };
+  }
+  const dynamicFilters = buildFiltersFromNotifications(notifications, tab);
+  let nextStickyFilters = stickyFilters;
+  if (activeFilterId === "all-types") {
+    nextStickyFilters = dynamicFilters;
+  } else if (!stickyFilters.length) {
+    nextStickyFilters = dynamicFilters.length ? dynamicFilters : [...DEFAULT_NOTIFICATION_FILTERS];
+  }
+  if (activeFilterId !== "all-types" && nextStickyFilters.length) {
+    return {
+      filters: nextStickyFilters,
+      nextStickyFilters
+    };
+  }
+  return {
+    filters: dynamicFilters.length ? dynamicFilters : nextStickyFilters,
+    nextStickyFilters
+  };
+}
 export function filterHasContent(notifications, filter, tab) {
   const scoped = getScopedNotifications(notifications, tab);
   return scoped.some((notification) => notificationMatchesFilter(notification, filter));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.115",
+  "version": "0.1.117",
   "type": "module",
   "exports": {
     ".": {