sprintify-ui 0.0.20 → 0.0.22

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -33,20 +33,18 @@
         </div>
 
         <div class="ml-4 flex items-center md:ml-6">
-          <!-- Good spot for notification button... -->
+          <!-- Notification dropdown -->
+          <BaseLayoutNotificationDropdown
+            v-if="notifications"
+            :notifications-config="notifications"
+            class="mr-1 sm:mr-2"
+          ></BaseLayoutNotificationDropdown>
 
           <!-- Profile dropdown -->
           <div class="relative ml-3 mr-3">
             <BaseMenu :items="userMenu">
               <template #button="{ open }">
-                <div
-                  class="flex"
-                  :class="[
-                    open
-                      ? 'ring-2 ring-blue-500 ring-offset-2 ring-offset-white'
-                      : '',
-                  ]"
-                >
+                <div class="flex" :class="[open ? '' : '']">
                   <BaseAvatar :user="user" show-details />
                 </div>
               </template>
@@ -65,8 +63,9 @@
 <script setup lang="ts">
 import { User } from '@/types/User';
 import { PropType } from 'vue';
-import { ActionItem, ActionSection } from '../types/types';
+import { ActionItem, ActionSection, NotificationsConfig } from '../types/types';
 import BaseAvatar from './BaseAvatar.vue';
+import BaseLayoutNotificationDropdown from './BaseLayoutNotificationDropdown.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
@@ -92,6 +91,10 @@ const props = defineProps({
     required: true,
     type: Object as PropType<User>,
   },
+  notifications: {
+    default: undefined,
+    type: Object as PropType<NotificationsConfig>,
+  },
   dark: {
     default: false,
     type: Boolean,

package/src/components/BaseLayoutStackedConfigurable.stories.js

@@ -22,7 +22,6 @@ export default {
         label: 'Products',
         to: '/',
         count: 234,
-        type: 'RouterLink',
       },
       {
         label: 'Users',
@@ -51,6 +50,24 @@ export default {
         icon: 'heroicons:arrow-left-on-rectangle',
       },
     ],
+    notifications: {
+      footerTo: '/',
+      footerLabel: 'See all notifications',
+      items: [
+        {
+          id: '1',
+          text: 'You have a new message',
+          to: '/',
+          created_at: '2022-12-08T19:16:10Z',
+        },
+        {
+          id: '2',
+          text: 'Your inbox is now full. Please empty your inbox before it goes bang.',
+          to: '/',
+          created_at: '2022-01-01T00:00:00',
+        },
+      ],
+    },
   },
 };
 

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -22,19 +22,19 @@
         </div>
 
         <!-- Right -->
+        <div class="flex items-center md:ml-6">
+          <!-- Notification dropdown -->
+          <BaseLayoutNotificationDropdown
+            v-if="notifications"
+            class="mr-4 md:mr-5"
+            :dark="dark"
+            :notifications-config="notifications"
+          ></BaseLayoutNotificationDropdown>
 
-        <div class="hidden md:ml-6 md:flex md:items-center">
           <!-- Profile dropdown -->
-          <BaseMenu menu-class="w-52" :items="userMenu">
+          <BaseMenu menu-class="w-52" class="hidden md:block" :items="userMenu">
             <template #button="{ open }">
-              <div
-                class="flex rounded-full"
-                :class="[
-                  open
-                    ? 'bg-slate-700 ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-700'
-                    : '',
-                ]"
-              >
+              <div class="flex rounded-full" :class="[open ? '' : '']">
                 <BaseAvatar :class="dark ? 'text-white' : ''" :user="user" />
               </div>
             </template>
@@ -88,12 +88,13 @@
 <script lang="ts" setup>
 import { User } from '@/types/User';
 import { PropType } from 'vue';
-import { ActionItem } from '../types/types';
+import { ActionItem, NotificationsConfig } from '../types/types';
 import BaseAvatar from './BaseAvatar.vue';
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseNavbarItem from './BaseNavbarItem.vue';
 import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
+import BaseLayoutNotificationDropdown from './BaseLayoutNotificationDropdown.vue';
 
 defineProps({
   appName: {
@@ -116,6 +117,10 @@ defineProps({
     required: true,
     type: Object as PropType<User>,
   },
+  notifications: {
+    default: undefined,
+    type: Object as PropType<NotificationsConfig>,
+  },
   dark: {
     default: false,
     type: Boolean,

package/src/components/BaseMenu.vue

@@ -1,5 +1,10 @@
 <template>
-  <Menu v-slot="{ open }" as="div" class="relative text-left">
+  <Menu
+    v-slot="{ open }"
+    as="div"
+    class="text-left"
+    :class="[position == 'custom' ? 'static' : 'relative']"
+  >
     <div>
       <MenuButton class="flex">
         <slot name="button" :open="open" />
@@ -18,7 +23,7 @@
         :class="[menuClass, menuPositionClass]"
         class="absolute z-menu mt-2 rounded-md bg-white p-1 shadow-lg ring-1 ring-black ring-opacity-10 focus:outline-none"
       >
-        <slot name="items">
+        <slot name="items" :items="items">
           <template v-for="item in items" :key="item.label + 'link'">
             <div v-if="item.line" class="my-1 -mx-1 flex h-px bg-gray-200" />
 
@@ -95,15 +100,18 @@ const props = defineProps({
   },
   menuClass: {
     default: 'w-48',
-    type: String,
+    type: [String, Array, Object],
   },
   position: {
     default: 'bottom-left',
-    type: String as PropType<'bottom-left' | 'bottom-right'>,
+    type: String as PropType<'bottom-left' | 'bottom-right' | 'custom'>,
   },
 });
 
 const menuPositionClass = computed(() => {
+  if (props.position == 'custom') {
+    return '';
+  }
   if (props.position == 'bottom-left') {
     return 'origin-top-right right-0';
   }

package/src/components/BaseNavbar.stories.js

@@ -37,18 +37,15 @@ const Template = (args) => ({
       {
         label: 'Home',
         to: '/',
-        type: 'RouterLink',
       },
       {
         label: 'Products',
         to: '/setup',
         count: 234,
-        type: 'RouterLink',
       },
       {
         label: 'Settings',
         to: '/settings',
-        type: 'RouterLink',
       },
     ];
 

package/src/components/index.ts

@@ -1,3 +1,4 @@
+import BaseActionItem from './BaseActionItem.vue';
 import BaseAlert from './BaseAlert.vue';
 import BaseApp from './BaseApp.vue';
 import BaseAppDialogs from './BaseAppDialogs.vue';
@@ -66,6 +67,7 @@ import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
 
 export {
+  BaseActionItem,
   BaseAlert,
   BaseApp,
   BaseAppDialogs,

package/src/lang/en.json

@@ -25,6 +25,7 @@
     "next_month": "Next month",
     "none": "None",
     "nothing_found": "Nothing found",
+    "notifications_empty": "You have no new notifications",
     "or": "or",
     "pagination_detail": "{page} records of {total}",
     "previous": "Previous",
@@ -33,6 +34,7 @@
     "remove": "Remove",
     "remove_file": "Remove file?",
     "remove_file_description": "Are you sure you want to remove the file? This action is irreversible.",
+    "see_all_notifications": "See all notifications",
     "select_an_item": "Select an item",
     "select_an_option": "Select an option",
     "success": "Success",
@@ -49,6 +51,7 @@
     "up_to_x": "Up to {x}",
     "upload_failed": "Upload failed",
     "whoops": "Whoops",
+    "x_ago": "{duration} ago",
     "x_rows_selected": "1 item selected | {count} items selected",
     "year": "Year",
     "yes_delete": "Yes, delete",

package/src/lang/fr.json

@@ -25,6 +25,7 @@
     "next_month": "Mois prochain",
     "none": "Aucun",
     "nothing_found": "Rien n'a été trouvé",
+    "notifications_empty": "Vous n'avez aucune nouvelle notification",
     "or": "ou",
     "pagination_detail": "{page} items de {total}",
     "previous": "Précédent",
@@ -33,6 +34,7 @@
     "remove": "Retirer",
     "remove_file": "Retirer le fichier?",
     "remove_file_description": "Voulez-vous vraiment supprimer le fichier ? \nCette action est irréversible.",
+    "see_all_notifications": "Voir toutes les notifications",
     "select_an_item": "Sélectionner un élément",
     "select_an_option": "Sélectionner une option",
     "success": "Succès",
@@ -49,6 +51,7 @@
     "up_to_x": "Jusqu'à {x}",
     "upload_failed": "Le téléchargement a échoué",
     "whoops": "Oups",
+    "x_ago": "il y a {durée}",
     "x_rows_selected": "1 item sélectionné | \n{count} items sélectionnés",
     "year": "Année",
     "yes_delete": "Oui, supprimer",

package/src/types/Notification.ts

@@ -0,0 +1,10 @@
+import { RouteLocationRaw } from 'vue-router';
+
+interface Notification {
+  id: string;
+  text: string;
+  to: RouteLocationRaw;
+  created_at?: string;
+}
+
+export { Notification };

package/src/types/types.ts

@@ -2,6 +2,7 @@
 
 import { RouteLocationRaw } from 'vue-router';
 import { UploadedFile } from './UploadedFile';
+import { Notification as AppNotification } from './Notification';
 
 export interface Breadcrumb {
   icon?: string;
@@ -70,7 +71,6 @@ export interface MenuItemInterface {
 
 export interface ActionItem {
   label: string;
-  type: 'RouterLink' | 'a' | 'button';
   href?: string;
   to?: RouteLocationRaw;
   action?: () => Promise<void> | void;
@@ -177,3 +177,13 @@ export interface Notification {
   color: 'info' | 'success' | 'danger' | 'warning';
   duration: number;
 }
+
+/**
+ * App Notification
+ */
+
+export interface NotificationsConfig {
+  items: AppNotification[];
+  footerLabel?: string;
+  footerTo?: RouteLocationRaw;
+}