@apptegy/nuxt-navigation 0.1.111 → 1.0.0-alpha.1

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

@@ -1,513 +0,0 @@
-<template>
-  <div
-    class="notifications-panel"
-    :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
-          v-if="!mobile"
-          class="notifications-panel__title"
-        >
-          {{ $t("navigation.notifications") }}
-        </h2>
-        <span
-          v-if="data.retentionLabel && !mobile"
-          class="notifications-panel__retention"
-        >
-          {{ data.retentionLabel }}
-        </span>
-        <Button
-          v-if="mobile"
-          type="button"
-          severity="secondary"
-          text
-          rounded
-          class="notifications-panel__close"
-          :aria-label="$t('navigation.notificationsPanel.close')"
-          @click="$emit('close')"
-        >
-          <Icon
-            name="lucide:x"
-            size="20"
-            aria-hidden="true"
-          />
-        </Button>
-      </div>
-
-      <Tabs
-        :value="activeTabId"
-        class="notifications-panel__tabs"
-        @update:value="selectTab"
-      >
-        <TabList>
-          <Tab
-            v-for="tab in data.tabs"
-            :key="tab.id"
-            :value="tab.id"
-            class="notifications-panel__tab-item"
-          >
-            <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
-      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"
-          size="small"
-          rounded
-          :severity="filter.id === activeFilterId ? 'primary' : 'secondary'"
-          :outlined="filter.id !== activeFilterId"
-          class="notifications-panel__filter"
-          @click="selectFilter(filter.id)"
-        >
-          <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
-        type="button"
-        severity="secondary"
-        outlined
-        rounded
-        class="notifications-panel__filters-next"
-        :aria-label="$t('navigation.notificationsPanel.scrollFilters')"
-        @click="scrollFilters"
-      >
-        <Icon
-          name="lucide:chevron-right"
-          size="16"
-          aria-hidden="true"
-        />
-      </Button>
-    </div>
-
-    <div class="notifications-panel__body">
-      <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>
-        <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"
-              link
-              size="small"
-              class="notifications-panel__clear-all"
-              :label="$t('navigation.notificationsPanel.clearAll')"
-              @click="$emit('clear-all', { groupId: group.id, tabId: activeTabId, filterId: activeFilterId })"
-            />
-          </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>
-
-        <Message
-          v-if="isEmpty"
-          severity="secondary"
-          variant="simple"
-          class="notifications-panel__empty"
-        >
-          {{ $t("navigation.notificationsPanel.empty") }}
-        </Message>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, watch } from "vue";
-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,
-  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 },
-  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 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 true;
-}
-function matchesFilter(notification) {
-  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) {
-  const tabId = String(id);
-  activeTabId.value = tabId;
-  emit("update:activeTabId", tabId);
-  if (tabId === "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 - 130px);
-  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--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;
-}
-.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 :deep(.p-tablist-tab-list) {
-  gap: 20px;
-  border-bottom: 1px solid var(--grey-20, #e5e7eb);
-  background: transparent;
-}
-.notifications-panel__tabs :deep(.p-tablist-active-bar) {
-  display: none;
-}
-.notifications-panel__tabs :deep(.p-tab) {
-  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;
-}
-.notifications-panel__tabs :deep(.p-tab.p-tab-active) {
-  border-bottom-color: #662e80;
-  color: #662e80;
-}
-.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;
-  font-size: 10px;
-  font-weight: 800;
-  line-height: 12px;
-}
-.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;
-  flex: 1;
-  min-width: 0;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-.notifications-panel__filters-scroll::-webkit-scrollbar {
-  display: none;
-}
-.notifications-panel__filter {
-  flex-shrink: 0;
-  font-size: 11.5px;
-  line-height: 16px;
-  white-space: nowrap;
-}
-.notifications-panel__filter-option {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.notifications-panel__filters-next {
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-}
-.notifications-panel__body {
-  overflow-y: auto;
-  padding: 16px;
-  background: #f7f7f8;
-  flex: 1;
-  min-height: 0;
-}
-.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;
-}
-.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;
-  color: #662e80;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 18px;
-}
-.notifications-panel__list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.notifications-panel__close {
-  margin-left: auto;
-}
-</style>

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

@@ -1,53 +0,0 @@
-import type { INotificationsPanelData } from '../../types/index.js';
-type __VLS_Props = {
-    data: INotificationsPanelData;
-    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: {
-        groupId: string;
-        tabId: string;
-        filterId: string;
-    }) => any;
-    dismiss: (payload: {
-        id: string;
-        tabId: string;
-        filterId: string;
-    }) => any;
-    close: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((payload: {
-        item: INotificationsPanelData["groups"][number]["notifications"][number];
-        tabId: string;
-        filterId: string;
-    }) => any) | undefined;
-    "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;
-    onClose?: (() => any) | undefined;
-}>, {
-    loading: boolean;
-    embedded: boolean;
-    mobile: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,19 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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/notifications.d.ts

@@ -1,79 +0,0 @@
-export type NotificationType = 'announcement' | 'message' | 'comment' | 'mention' | 'reply' | 'reaction' | 'school-post' | 'system' | 'unknown';
-export type NotificationApiState = 'unread' | 'read' | 'dismissed';
-export interface INotificationApiActor {
-    avatar_url?: string;
-    first_name: string;
-    last_name: string;
-}
-export interface INotificationApiRecord {
-    id: number | string;
-    source_record_type: string;
-    title: string;
-    summary?: string;
-    actors?: INotificationApiActor[] | null;
-    detail_link?: string | null;
-    notification_state: NotificationApiState | string;
-    created_at: string;
-}
-export interface INotificationsPagination {
-    page: number;
-    per_page: number;
-    total_count: number;
-    total_pages: number;
-}
-export interface INotificationsApiResponse {
-    data: INotificationApiRecord[];
-    errors: unknown[];
-    warnings: unknown[];
-    pagination: INotificationsPagination;
-}
-export interface INotificationActor {
-    name: string;
-    avatarUrl?: string;
-}
-export interface INotificationItem {
-    id: string;
-    type: NotificationType;
-    actors: INotificationActor[];
-    actionText: string;
-    timestampLabel: string;
-    /** ISO-8601 timestamp from the API — used to derive group labels and relative time. */
-    createdAt?: string;
-    contextLabel?: string;
-    /** When false, the notification counts toward the bell badge and appears in the New tab. */
-    dismissed?: boolean;
-    /** Read receipt — announcement and message types only. */
-    read?: boolean;
-    /** Optional edge-case state chip shown at the bottom of the card. */
-    stateLabel?: string;
-    href?: string;
-    groupCount?: number;
-    /** @deprecated Use dismissed instead. Kept for backward compatibility. */
-    unread?: boolean;
-}
-export interface INotificationGroup {
-    id: string;
-    label: string;
-    notifications: INotificationItem[];
-}
-export interface INotificationTab {
-    id: string;
-    label: string;
-    count?: number;
-    /** When true, only in-badge notifications are shown for this tab. */
-    unreadOnly?: boolean;
-}
-export interface INotificationFilter {
-    id: string;
-    label: string;
-    count?: number;
-    /** Notification types included in this filter. Omit or leave empty to include all types. */
-    types?: NotificationType[];
-}
-export interface INotificationsPanelData {
-    retentionLabel?: string;
-    tabs: INotificationTab[];
-    /** Optional — when omitted, filter pills are derived from notification results. */
-    filters?: INotificationFilter[];
-    groups: INotificationGroup[];
-}