@apptegy/nuxt-navigation 0.1.103 → 0.1.105

package/dist/module.json

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

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

@@ -12,18 +12,19 @@
     <div class="user-control-actions">
       <div
         v-if="showNotifications"
-        ref="notificationsRef"
-        v-on-click-outside="onNotificationsClickOutside"
         class="header__notifications"
       >
-        <button
+        <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="toggleNotificationsPanel"
+          @click="onBellClick"
         >
           <svg
             class="notification-bell__icon"
@@ -50,12 +51,41 @@
           >
             {{ formattedNotificationCount }}
           </span>
-        </button>
+        </Button>
 
         <slot name="notifications">
-          <Teleport to="body" :disabled="!isMobilePanel">
+          <Popover
+            v-if="!isMobilePanel"
+            ref="popoverRef"
+            append-to="body"
+            class="notifications-popover"
+            :pt="popoverPt"
+            @show="onPanelShow"
+            @hide="onPanelHide"
+          >
+            <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="(payload) => $emit('notifications-select', payload)"
+            />
+          </Popover>
+
+          <Teleport
+            v-else
+            to="body"
+          >
             <NavNotificationsPanel
               v-if="notificationsPanel && panelOpen"
+              embedded
+              mobile
               :data="notificationsPanel"
               :loading="notificationsLoading"
               :active-tab-id="activeTabId"
@@ -108,9 +138,10 @@
 
 <script setup>
 import { computed, nextTick, ref, watch } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
 import { useMediaQuery } from "@vueuse/core";
 import { useNuxtApp } from "#app";
+import Button from "primevue/button";
+import Popover from "primevue/popover";
 import {
   getNotificationsTotalCount,
   mapNotificationsApiResponse
@@ -140,10 +171,16 @@ const emit = defineEmits([
   "notifications-select",
   "notification-click"
 ]);
-const notificationsRef = ref();
+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"),
@@ -216,17 +253,21 @@ const formattedNotificationCount = computed(() => {
   }
   return notificationCount.value;
 });
-function toggleNotificationsPanel() {
-  panelOpen.value = !panelOpen.value;
+function onBellClick(event) {
+  if (isMobilePanel.value) {
+    panelOpen.value = !panelOpen.value;
+  } else {
+    popoverRef.value?.toggle(event);
+  }
   emit("notification-click", panelOpen.value);
 }
-function closeNotificationsPanel() {
+function onPanelShow() {
+  panelOpen.value = true;
+}
+function onPanelHide() {
   panelOpen.value = false;
 }
-function onNotificationsClickOutside() {
-  if (isMobilePanel.value || !panelOpen.value) {
-    return;
-  }
+function closeNotificationsPanel() {
   panelOpen.value = false;
 }
 function handleTabChange(id) {
@@ -263,32 +304,16 @@ header.header .header__notifications {
   display: flex;
   align-items: center;
 }
-header.header .notification-bell {
+header.header :deep(.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;
+  overflow: visible;
 }
-header.header .notification-bell:hover, header.header .notification-bell--active {
+header.header :deep(.notification-bell).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;
@@ -305,6 +330,16 @@ header.header .notification-bell__badge {
   line-height: 12px;
   text-align: center;
   box-sizing: border-box;
+  pointer-events: none;
+}
+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 .logout-impersonate-user {
   width: 32px;
@@ -359,3 +394,15 @@ header.header.sticky {
   }
 }
 </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

@@ -19,7 +19,7 @@ interface IUserDropdown {
     userDropdownOptions: Array<unknown>;
 }
 type __VLS_Props = IHeaderProps & IUserDropdown;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
     breadcrumbs?: (props: typeof __VLS_1) => any;
 } & {
@@ -27,9 +27,29 @@ type __VLS_Slots = {} & {
 } & {
     'user-controls'?: (props: typeof __VLS_5) => any;
 } & {
-    notifications?: (props: typeof __VLS_7) => any;
+    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

@@ -10,55 +10,55 @@
       @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"
+      <div
+        class="notification-item__avatar"
+        :style="{ '--type-accent': typeAccent }"
       >
-        {{ groupBadgeLabel }}
-      </span>
-      <span
-        class="notification-item__type-badge"
-        aria-hidden="true"
-      >
-        <component :is="typeIcon" />
-      </span>
-    </div>
+        <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 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>
+        <Tag
+          v-if="item.stateLabel"
+          :value="item.stateLabel"
+          severity="secondary"
+          class="notification-item__state-chip"
+        />
+      </div>
     </div>
 
     <div class="notification-item__actions">
@@ -67,9 +67,12 @@
         class="notification-item__unread-dot"
         aria-hidden="true"
       />
-      <button
+      <Button
         v-if="showBadgeActions"
         type="button"
+        severity="secondary"
+        text
+        rounded
         class="notification-item__dismiss"
         :aria-label="$t('navigation.notificationsPanel.dismiss')"
         @click="handleDismiss"
@@ -89,13 +92,15 @@
           <path d="M18 6 6 18" />
           <path d="m6 6 12 12" />
         </svg>
-      </button>
+      </Button>
     </div>
   </div>
 </template>
 
 <script setup>
 import { computed, h } from "vue";
+import Button from "primevue/button";
+import Tag from "primevue/tag";
 import { getTypeAccent, isInBadge } from "../../utils/notifications";
 const props = defineProps({
   item: { type: Object, required: true }
@@ -312,15 +317,7 @@ function handleDismiss(event) {
   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;
+  margin-top: 8px;
 }
 .notification-item__actions {
   display: flex;
@@ -336,20 +333,9 @@ function handleDismiss(event) {
   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

@@ -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

@@ -1,24 +1,33 @@
 <template>
   <div
     class="notifications-panel"
-    :class="{ 'notifications-panel--fullscreen': isMobilePanel }"
+    :class="{
+  'notifications-panel--embedded': embedded,
+  'notifications-panel--mobile': mobile
+}"
     role="dialog"
     :aria-label="$t('navigation.notifications')"
   >
     <div class="notifications-panel__header">
       <div class="notifications-panel__title-row">
-        <h2 class="notifications-panel__title">
+        <h2
+          v-if="!mobile"
+          class="notifications-panel__title"
+        >
           {{ $t("navigation.notifications") }}
         </h2>
         <span
-          v-if="data.retentionLabel && !isMobilePanel"
+          v-if="data.retentionLabel && !mobile"
           class="notifications-panel__retention"
         >
           {{ data.retentionLabel }}
         </span>
-        <button
-          v-if="isMobilePanel"
+        <Button
+          v-if="mobile"
           type="button"
+          severity="secondary"
+          text
+          rounded
           class="notifications-panel__close"
           :aria-label="$t('navigation.notificationsPanel.close')"
           @click="$emit('close')"
@@ -38,34 +47,31 @@
             <path d="M18 6 6 18" />
             <path d="m6 6 12 12" />
           </svg>
-        </button>
+        </Button>
       </div>
 
-      <div
+      <Tabs
+        :value="activeTabId"
         class="notifications-panel__tabs"
-        role="tablist"
-        :aria-label="$t('navigation.notificationsPanel.tabsLabel')"
+        @update:value="selectTab"
       >
-        <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"
+        <TabList>
+          <Tab
+            v-for="tab in data.tabs"
+            :key="tab.id"
+            :value="tab.id"
+            class="notifications-panel__tab-item"
           >
-            {{ formatCount(getTabBadgeCount(tab)) }}
-          </span>
-        </button>
-      </div>
+            <span>{{ tab.label }}</span>
+            <Badge
+              v-if="getTabBadgeCount(tab) > 0"
+              :value="formatCount(getTabBadgeCount(tab))"
+              severity="danger"
+              class="notifications-panel__tab-badge"
+            />
+          </Tab>
+        </TabList>
+      </Tabs>
     </div>
 
     <div
@@ -76,20 +82,32 @@
         ref="filtersRef"
         class="notifications-panel__filters-scroll"
       >
-        <button
+        <Button
           v-for="filter in visibleFilters"
           :key="filter.id"
           type="button"
+          size="small"
+          rounded
+          :severity="filter.id === activeFilterId ? 'primary' : 'secondary'"
+          :outlined="filter.id !== activeFilterId"
           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>
+          <span class="notifications-panel__filter-option">
+            <span>{{ filter.label }}</span>
+            <Badge
+              v-if="getFilterBadgeCount(filter) > 0"
+              :value="formatCount(getFilterBadgeCount(filter))"
+              severity="secondary"
+            />
+          </span>
+        </Button>
       </div>
-      <button
+      <Button
         type="button"
+        severity="secondary"
+        outlined
+        rounded
         class="notifications-panel__filters-next"
         :aria-label="$t('navigation.notificationsPanel.scrollFilters')"
         @click="scrollFilters"
@@ -108,12 +126,20 @@
         >
           <path d="m9 18 6-6-6-6" />
         </svg>
-      </button>
+      </Button>
     </div>
 
     <div class="notifications-panel__body">
-      <div v-if="loading" class="notifications-panel__loading">
-        {{ $t("navigation.notificationsPanel.loading") }}
+      <div
+        v-if="loading"
+        class="notifications-panel__loading"
+      >
+        <Skeleton
+          v-for="index in 3"
+          :key="index"
+          height="4.5rem"
+          class="notifications-panel__skeleton"
+        />
       </div>
 
       <template v-else>
@@ -126,14 +152,15 @@
             <h3 class="notifications-panel__group-label">
               {{ group.label }}
             </h3>
-            <button
+            <Button
               v-if="showClearAll(groupIndex)"
               type="button"
+              link
+              size="small"
               class="notifications-panel__clear-all"
+              :label="$t('navigation.notificationsPanel.clearAll')"
               @click="$emit('clear-all', { groupId: group.id, tabId: activeTabId, filterId: activeFilterId })"
-            >
-              {{ $t("navigation.notificationsPanel.clearAll") }}
-            </button>
+            />
           </div>
 
           <div class="notifications-panel__list">
@@ -147,12 +174,14 @@
           </div>
         </section>
 
-        <p
+        <Message
           v-if="isEmpty"
+          severity="secondary"
+          variant="simple"
           class="notifications-panel__empty"
         >
           {{ $t("navigation.notificationsPanel.empty") }}
-        </p>
+        </Message>
       </template>
     </div>
   </div>
@@ -160,7 +189,13 @@
 
 <script setup>
 import { computed, ref, watch } from "vue";
-import { useMediaQuery } from "@vueuse/core";
+import Badge from "primevue/badge";
+import Button from "primevue/button";
+import Message from "primevue/message";
+import Skeleton from "primevue/skeleton";
+import Tab from "primevue/tab";
+import TabList from "primevue/tablist";
+import Tabs from "primevue/tabs";
 import {
   flattenNotifications,
   formatNotificationCount,
@@ -176,10 +211,11 @@ 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 }
+  activeFilterId: { type: String, required: false },
+  embedded: { type: Boolean, required: false, default: false },
+  mobile: { type: Boolean, required: false, default: 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");
@@ -265,7 +301,7 @@ function matchesTab(notification) {
   if (tab.unreadOnly || tab.id === "new") {
     return isInBadge(notification);
   }
-  return notification.dismissed !== true;
+  return true;
 }
 function matchesFilter(notification) {
   const filter = activeFilter.value;
@@ -286,9 +322,10 @@ const isEmpty = computed(
   () => !props.loading && filteredGroups.value.length === 0
 );
 function selectTab(id) {
-  activeTabId.value = id;
-  emit("update:activeTabId", id);
-  if (id === "all") {
+  const tabId = String(id);
+  activeTabId.value = tabId;
+  emit("update:activeTabId", tabId);
+  if (tabId === "all") {
     activeFilterId.value = "all-types";
     emit("update:activeFilterId", "all-types");
   }
@@ -318,6 +355,33 @@ function scrollFilters() {
   box-shadow: 0 20px 48px rgba(0, 0, 0, 0.16);
   overflow: hidden;
 }
+.notifications-panel--embedded {
+  position: static;
+  top: auto;
+  right: auto;
+  z-index: auto;
+  width: 100%;
+  max-height: calc(100vh - 130px);
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.notifications-panel--mobile {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  width: 100%;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.notifications-panel--mobile .notifications-panel__body {
+  flex: 1;
+  min-height: 0;
+}
 .notifications-panel__header {
   padding: 16px 16px 0;
 }
@@ -341,16 +405,12 @@ function scrollFilters() {
   color: var(--grey-60, #6b7280);
   white-space: nowrap;
 }
-.notifications-panel__tabs {
-  display: flex;
+.notifications-panel__tabs :deep(.p-tablist-tab-list) {
   gap: 20px;
   border-bottom: 1px solid var(--grey-20, #e5e7eb);
+  background: transparent;
 }
-.notifications-panel__tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: -1px;
+.notifications-panel__tabs :deep(.p-tab) {
   padding: 0 0 12px;
   border: none;
   border-bottom: 2px solid transparent;
@@ -359,25 +419,23 @@ function scrollFilters() {
   font-size: 13px;
   font-weight: 700;
   line-height: 20px;
-  cursor: pointer;
 }
-.notifications-panel__tab--active {
+.notifications-panel__tabs :deep(.p-tab.p-tab-active) {
   border-bottom-color: #662e80;
   color: #662e80;
 }
-.notifications-panel__tab-badge {
+.notifications-panel__tab-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.notifications-panel__tab-badge :deep(.p-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;
@@ -389,6 +447,8 @@ function scrollFilters() {
 .notifications-panel__filters-scroll {
   display: flex;
   gap: 8px;
+  flex: 1;
+  min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
@@ -396,50 +456,41 @@ function scrollFilters() {
   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);
+  flex-shrink: 0;
   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__filter-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 .notifications-panel__filters-next {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-shrink: 0;
   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;
   background: #f7f7f8;
+  flex: 1;
+  min-height: 0;
 }
-.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__loading {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.notifications-panel__skeleton {
+  border-radius: 8px;
+}
+.notifications-panel__empty {
+  justify-content: center;
+  width: 100%;
+  background: transparent;
 }
 .notifications-panel__group + .notifications-panel__group {
   margin-top: 20px;
@@ -462,13 +513,10 @@ function scrollFilters() {
 }
 .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;
@@ -476,40 +524,6 @@ function scrollFilters() {
   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

@@ -4,8 +4,15 @@ type __VLS_Props = {
     loading?: boolean;
     activeTabId?: string;
     activeFilterId?: string;
+    embedded?: boolean;
+    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: {
@@ -18,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: {
@@ -37,13 +44,10 @@ 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;
 }>, {
+    embedded: boolean;
     loading: boolean;
+    mobile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/package.json

@@ -1,49 +1,53 @@
 {
-    "name": "@apptegy/nuxt-navigation",
-    "version": "0.1.103",
-    "type": "module",
-    "exports": {
-        ".": {
-            "import": "./dist/module.mjs",
-            "types": "./dist/types.d.mts"
-        },
-        "./locale/*": "./locale/*"
+  "name": "@apptegy/nuxt-navigation",
+  "version": "0.1.105",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/module.mjs",
+      "types": "./dist/types.d.mts"
     },
-    "main": "./dist/module.mjs",
-    "files": [
-        "dist",
-        "locale"
-    ],
-    "scripts": {
-        "prepack": "nuxt-module-build build",
-        "dev": "nuxi dev playground",
-        "dev:build": "nuxi build playground",
-        "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-        "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
-        "lint": "eslint .",
-        "test": "vitest run",
-        "test:watch": "vitest watch",
-        "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
-    },
-    "dependencies": {
-        "@apptegy/nuxt-intl": "^2.4.3",
-        "@nuxt/kit": "^3.17.0",
-        "@vueuse/components": "^12.0.0",
-        "@vueuse/core": "^12.0.0"
-    },
-    "devDependencies": {
-        "@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:",
-        "sass": "catalog:",
-        "typescript": "catalog:",
-        "vitest": "catalog:",
-        "vue": "catalog:",
-        "vue-tsc": "catalog:"
-    }
+    "./locale/*": "./locale/*"
+  },
+  "main": "./dist/module.mjs",
+  "files": [
+    "dist",
+    "locale"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@apptegy/nuxt-intl": "^2.4.3",
+    "@nuxt/kit": "^3.17.0",
+    "@vueuse/components": "^12.0.0",
+    "@vueuse/core": "^12.0.0"
+  },
+  "peerDependencies": {
+    "primevue": "^4.2.5"
+  },
+  "devDependencies": {
+    "@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": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:",
+    "vue": "catalog:",
+    "vue-tsc": "catalog:"
+  }
 }