sprintify-ui 0.5.9 → 0.5.11

package/dist/types/src/types/Notification.d.ts

@@ -3,6 +3,7 @@ interface Notification {
     id: string;
     text: string;
     to?: RouteLocationRaw;
+    read?: boolean;
     created_at?: string;
 }
 export { Notification };

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

@@ -148,6 +148,7 @@ export interface Notification {
  * App Notification
  */
 export interface NotificationsConfig {
+    count: number;
     items: AppNotification[];
     footerLabel?: string;
     footerTo?: RouteLocationRaw;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -19,17 +19,17 @@
           :class="[iconClasses]"
         />
         <BaseCounter
-          v-if="notificationsConfig.items.length"
+          v-if="unreadNotifications.length"
           class="absolute top-0 right-0"
           :size="counterSize"
-          :count="notificationsConfig.items.length"
+          :count="unreadNotifications.length"
         />
       </div>
     </template>
 
     <template #items>
       <template
-        v-for="notification in notificationsConfig.items"
+        v-for="notification in notificationsConfig.items.slice(0, 4)"
         :key="notification.id + 'link'"
       >
         <BaseLayoutNotificationItem
@@ -104,6 +104,10 @@ const props = defineProps({
   },
 });
 
+const unreadNotifications = computed(() => {
+  return props.notificationsConfig.items.filter(i => !i.read);
+});
+
 const breakpoints = useBreakpoints();
 
 const mobile = computed((): boolean => {

package/src/components/BaseLayoutNotificationItemContent.vue

@@ -4,7 +4,8 @@
     :class="[active ? 'bg-slate-100' : '']"
   >
     <div
-      class="text-sm leading-tight text-slate-800"
+      class="text-sm leading-tight"
+      :class="textClasses"
       v-html="notification.text"
     />
     <BaseDisplayRelativeTime
@@ -12,7 +13,10 @@
       v-slot="{ readableDate }"
       :value="notification.created_at"
     >
-      <p class="mt-1 text-xs text-slate-400">
+      <p 
+        class="mt-1 text-xs text-slate-400"
+        :class="[notification.read ? 'opacity-70' : 'opacity-100']"
+      >
         {{ readableDate }}
       </p>
     </BaseDisplayRelativeTime>
@@ -23,8 +27,15 @@
 import { Notification } from '@/types/Notification';
 import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
 
-defineProps<{
+const props = defineProps<{
   active: boolean;
   notification: Notification;
 }>();
+
+const textClasses = computed(() => {
+  return props.notification.read ?
+    'text-slate-500' :
+    "text-black font-medium before:bg-red-500 before:inline-block before:rounded-full before:mr-1 before:relative before:-top-px before:h-2 before:w-2 before:content-['']";
+});
+
 </script>

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -91,12 +91,21 @@ export default {
           id: '1',
           text: 'You have a new message',
           to: '/',
+          read: false,
           created_at: '2022-12-08T19:16:10Z',
         },
         {
           id: '2',
           text: 'Your inbox is now full. Please empty your inbox before it goes bang.',
           to: '/',
+          read: true,
+          created_at: '2022-01-01T00:00:00',
+        },
+        {
+          id: '3',
+          text: 'You are running out of credits. Please top up your account.',
+          to: '/',
+          read: true,
           created_at: '2022-01-01T00:00:00',
         },
       ],

package/src/types/Notification.ts

@@ -4,6 +4,7 @@ interface Notification {
   id: string;
   text: string;
   to?: RouteLocationRaw;
+  read?: boolean;
   created_at?: string;
 }
 

package/src/types/index.ts

@@ -188,6 +188,7 @@ export interface Notification {
  */
 
 export interface NotificationsConfig {
+  count: number;
   items: AppNotification[];
   footerLabel?: string;
   footerTo?: RouteLocationRaw;