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

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

@@ -11,4 +11,3 @@ 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';

package/locale/en.json

@@ -15,27 +15,6 @@
     "userDropdown": "User settings",
     "logoAlt": "Thrillshare - Return Home",
     "brandLogoAlt": "Logo",
-    "website": "School Website",
-    "notifications": "Notifications",
-    "notificationsPanel": {
-      "retentionLabel": "Kept 30 days",
-      "tabs": {
-        "new": "New",
-        "all": "All"
-      },
-      "tabsLabel": "Notification views",
-      "scrollFilters": "Scroll filters",
-      "clearAll": "Clear all",
-      "dismiss": "Dismiss notification",
-      "close": "Close notifications",
-      "loading": "Loading notifications...",
-      "empty": "You're all caught up.",
-      "justNow": "just now",
-      "yesterday": "Yesterday",
-      "dateGroups": {
-        "today": "TODAY",
-        "yesterday": "YESTERDAY"
-      }
-    }
+    "website": "School Website"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.111",
+  "version": "1.0.0-alpha.1",
   "type": "module",
   "exports": {
     ".": {
@@ -14,8 +14,30 @@
     "dist",
     "locale"
   ],
+  "dependencies": {
+    "@apptegy/nuxt-intl": "^2.4.3",
+    "@nuxt/icon": "^1.0.0",
+    "@nuxt/kit": "^3.17.0",
+    "@vueuse/components": "^12.0.0",
+    "@vueuse/core": "^12.0.0"
+  },
+  "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",
+    "sass": "^1.89.2",
+    "typescript": "~5.8.0",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.13",
+    "vue-tsc": "^3.0.3"
+  },
   "scripts": {
-    "prepack": "nuxt-module-build build",
+    "build": "nuxt-module-build build --watch",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
@@ -24,31 +46,5 @@
     "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": {
-    "@nuxt/icon": "^1.0.0 || ^2.0.0",
-    "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:"
   }
-}
+}

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

@@ -1,337 +0,0 @@
-<template>
-  <div
-    class="notification-item"
-    :class="{ 'notification-item--in-badge': showBadgeActions }"
-  >
-    <div
-      class="notification-item__main"
-      role="button"
-      tabindex="0"
-      @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"
-          />
-        </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>
-        <Tag
-          v-if="item.stateLabel"
-          :value="item.stateLabel"
-          severity="secondary"
-          class="notification-item__state-chip"
-        />
-      </div>
-    </div>
-
-    <div class="notification-item__actions">
-      <span
-        v-if="showBadgeActions"
-        class="notification-item__unread-dot"
-        aria-hidden="true"
-      />
-      <Button
-        v-if="showBadgeActions"
-        type="button"
-        severity="secondary"
-        text
-        rounded
-        class="notification-item__dismiss"
-        :aria-label="$t('navigation.notificationsPanel.dismiss')"
-        @click="handleDismiss"
-      >
-        <Icon
-          name="lucide:x"
-          size="16"
-          aria-hidden="true"
-        />
-      </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 }
-});
-const emit = defineEmits(["dismiss", "select"]);
-const primaryActor = computed(() => props.item.actors[0] || { name: "" });
-const typeAccent = computed(() => getTypeAccent(props.item.type));
-const showBadgeActions = computed(() => isInBadge(props.item));
-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",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: 12,
-      height: 12,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      "stroke-width": 2,
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
-    },
-    paths
-  );
-}
-const typeIcon = computed(() => {
-  switch (props.item.type) {
-    case "announcement":
-      return svgIcon([h("path", { d: "m3 11 18-5v12L3 14v-3z" }), h("path", { d: "M11.6 16.8a3 3 0 1 1-5.8-1.6" })]);
-    case "message":
-      return svgIcon([h("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })]);
-    case "comment":
-      return svgIcon([h("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" })]);
-    case "mention":
-      return svgIcon([
-        h("circle", { cx: 12, cy: 12, r: 4 }),
-        h("path", { d: "M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8" })
-      ]);
-    case "reply":
-      return svgIcon([
-        h("path", { d: "M9 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5l-5 5z" }),
-        h("path", { d: "m10 9-3 3 3 3" })
-      ]);
-    case "reaction":
-      return svgIcon([
-        h("path", {
-          d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-        })
-      ]);
-    case "school-post":
-      return svgIcon([
-        h("path", {
-          d: "M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"
-        }),
-        h("path", { d: "M18 14h-8" }),
-        h("path", { d: "M15 18h-5" }),
-        h("path", { d: "M10 6h8v4h-8V6Z" })
-      ]);
-    case "system":
-      return svgIcon([
-        h("circle", { cx: 12, cy: 12, r: 10 }),
-        h("path", { d: "M12 16v-4" }),
-        h("path", { d: "M12 8h.01" })
-      ]);
-    default:
-      return svgIcon([
-        h("path", { d: "M10.268 21a2 2 0 0 0 3.464 0" }),
-        h("path", {
-          d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
-        })
-      ]);
-  }
-});
-function handleClick() {
-  emit("select", props.item);
-}
-function handleDismiss(event) {
-  event.preventDefault();
-  event.stopPropagation();
-  emit("dismiss", props.item.id);
-}
-</script>
-
-<style scoped>
-.notification-item {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 12px;
-  align-items: start;
-  width: 100%;
-  padding: 12px;
-  border: 1px solid rgb(232, 232, 236);
-  border-radius: 8px;
-  background: var(--primary-white, #fff);
-  text-align: left;
-  color: inherit;
-  box-shadow: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.notification-item__main {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 12px;
-  align-items: start;
-  min-width: 0;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  padding: 0;
-  text-align: left;
-  color: inherit;
-}
-.notification-item__main:hover .notification-item__message strong {
-  color: var(--purple-60, #662e80);
-}
-.notification-item__main:focus-visible {
-  outline: 2px solid var(--purple-60, #662e80);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-.notification-item:hover {
-  border-color: rgb(209, 209, 214);
-  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 10px;
-}
-.notification-item__avatar {
-  position: relative;
-  width: 44px;
-  height: 44px;
-  flex-shrink: 0;
-}
-.notification-item__avatar-ring {
-  width: 44px;
-  height: 44px;
-  padding: 2px;
-  border-radius: 50%;
-  background: var(--type-accent);
-  box-sizing: border-box;
-}
-.notification-item__avatar-image :deep(span) {
-  background-color: #f3e6d4;
-  color: var(--purple-40, #ab8cb9);
-  border: 1px solid var(--primary-white, #fff);
-}
-.notification-item__avatar-image :deep(.avatar-container), .notification-item__avatar-image :deep(img), .notification-item__avatar-image :deep(span) {
-  width: 40px;
-  height: 40px;
-}
-.notification-item__group-badge {
-  position: absolute;
-  right: -4px;
-  bottom: 0;
-  min-width: 22px;
-  height: 22px;
-  padding: 0 4px;
-  border: 2px solid var(--primary-white, #fff);
-  border-radius: 999px;
-  background: var(--grey-80, #374151);
-  color: var(--primary-white, #fff);
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 18px;
-  text-align: center;
-  z-index: 1;
-}
-.notification-item__type-badge {
-  position: absolute;
-  right: -2px;
-  bottom: -2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: 2px solid var(--primary-white, #fff);
-  border-radius: 999px;
-  background: var(--type-accent);
-  color: var(--primary-white, #fff);
-  z-index: 2;
-}
-.notification-item__content {
-  min-width: 0;
-}
-.notification-item__message {
-  margin: 0;
-  font-size: 14.5px;
-  font-weight: 600;
-  line-height: 20px;
-  color: var(--grey-90, #111827);
-}
-.notification-item__message strong {
-  font-weight: 600;
-}
-.notification-item__meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin: 4px 0 0;
-  font-size: 12.5px;
-  line-height: 16px;
-  color: var(--grey-50, #747474);
-}
-.notification-item__meta-separator {
-  padding: 0 2px;
-}
-.notification-item__state-chip {
-  margin-top: 8px;
-}
-.notification-item__actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-top: 2px;
-}
-.notification-item__unread-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #c84b31;
-  flex-shrink: 0;
-}
-.notification-item__dismiss {
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  color: var(--grey-50, #9ca3af);
-}
-</style>

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

@@ -1,12 +0,0 @@
-import type { INotificationItem } from '../../types/index.js';
-type __VLS_Props = {
-    item: INotificationItem;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (item: INotificationItem) => any;
-    dismiss: (id: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((item: INotificationItem) => any) | undefined;
-    onDismiss?: ((id: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;