sprintify-ui 0.0.20 → 0.0.22

package/dist/types/src/components/BaseLayoutNotificationDropdown.vue.d.ts

@@ -0,0 +1,24 @@
+import { PropType } from 'vue';
+import { NotificationsConfig } from '../types/types';
+declare const _default: import("vue").DefineComponent<{
+    notificationsConfig: {
+        required: true;
+        type: PropType<NotificationsConfig>;
+    };
+    dark: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    notificationsConfig: {
+        required: true;
+        type: PropType<NotificationsConfig>;
+    };
+    dark: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}>>, {
+    dark: boolean;
+}>;
+export default _default;

package/dist/types/src/components/BaseLayoutNotificationItem.vue.d.ts

@@ -0,0 +1,14 @@
+import { Notification } from '@/types/Notification';
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    notification: {
+        required: true;
+        type: PropType<Notification>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    notification: {
+        required: true;
+        type: PropType<Notification>;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/src/components/BaseLayoutSidebarConfigurable.vue.d.ts

@@ -1,12 +1,13 @@
 import { User } from '@/types/User';
 import { PropType } from 'vue';
-import { ActionItem, ActionSection } from '../types/types';
+import { ActionItem, ActionSection, NotificationsConfig } from '../types/types';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
             dark: boolean;
+            notifications: NotificationsConfig;
             appName: string;
             logoUrl: string;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
@@ -30,11 +31,15 @@ declare const _default: {
                 required: true;
                 type: PropType<User>;
             };
+            notifications: {
+                default: undefined;
+                type: PropType<NotificationsConfig>;
+            };
             dark: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "dark" | "appName" | "logoUrl">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "dark" | "notifications" | "appName" | "logoUrl">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -69,12 +74,17 @@ declare const _default: {
                 required: true;
                 type: PropType<User>;
             };
+            notifications: {
+                default: undefined;
+                type: PropType<NotificationsConfig>;
+            };
             dark: {
                 default: boolean;
                 type: BooleanConstructor;
             };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             dark: boolean;
+            notifications: NotificationsConfig;
             appName: string;
             logoUrl: string;
         }, {}, string> & {
@@ -118,6 +128,10 @@ declare const _default: {
             required: true;
             type: PropType<User>;
         };
+        notifications: {
+            default: undefined;
+            type: PropType<NotificationsConfig>;
+        };
         dark: {
             default: boolean;
             type: BooleanConstructor;
@@ -147,12 +161,17 @@ declare const _default: {
         required: true;
         type: PropType<User>;
     };
+    notifications: {
+        default: undefined;
+        type: PropType<NotificationsConfig>;
+    };
     dark: {
         default: boolean;
         type: BooleanConstructor;
     };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     dark: boolean;
+    notifications: NotificationsConfig;
     appName: string;
     logoUrl: string;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/dist/types/src/components/BaseLayoutStackedConfigurable.vue.d.ts

@@ -1,12 +1,13 @@
 import { User } from '@/types/User';
 import { PropType } from 'vue';
-import { ActionItem } from '../types/types';
+import { ActionItem, NotificationsConfig } from '../types/types';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
             dark: boolean;
+            notifications: NotificationsConfig;
             appName: string;
             logoUrl: string;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
@@ -30,11 +31,15 @@ declare const _default: {
                 required: true;
                 type: PropType<User>;
             };
+            notifications: {
+                default: undefined;
+                type: PropType<NotificationsConfig>;
+            };
             dark: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "dark" | "appName" | "logoUrl">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "dark" | "notifications" | "appName" | "logoUrl">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -69,12 +74,17 @@ declare const _default: {
                 required: true;
                 type: PropType<User>;
             };
+            notifications: {
+                default: undefined;
+                type: PropType<NotificationsConfig>;
+            };
             dark: {
                 default: boolean;
                 type: BooleanConstructor;
             };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             dark: boolean;
+            notifications: NotificationsConfig;
             appName: string;
             logoUrl: string;
         }, {}, string> & {
@@ -118,6 +128,10 @@ declare const _default: {
             required: true;
             type: PropType<User>;
         };
+        notifications: {
+            default: undefined;
+            type: PropType<NotificationsConfig>;
+        };
         dark: {
             default: boolean;
             type: BooleanConstructor;
@@ -147,12 +161,17 @@ declare const _default: {
         required: true;
         type: PropType<User>;
     };
+    notifications: {
+        default: undefined;
+        type: PropType<NotificationsConfig>;
+    };
     dark: {
         default: boolean;
         type: BooleanConstructor;
     };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     dark: boolean;
+    notifications: NotificationsConfig;
     appName: string;
     logoUrl: string;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/dist/types/src/components/BaseMenu.vue.d.ts

@@ -6,8 +6,8 @@ declare const _default: {
         $data: {};
         $props: Partial<{
             items: MenuItemInterface[];
-            menuClass: string;
-            position: "bottom-left" | "bottom-right";
+            menuClass: string | Record<string, any> | unknown[];
+            position: "custom" | "bottom-left" | "bottom-right";
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             items: {
                 default: undefined;
@@ -15,11 +15,11 @@ declare const _default: {
             };
             menuClass: {
                 default: string;
-                type: StringConstructor;
+                type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
             };
             position: {
                 default: string;
-                type: PropType<"bottom-left" | "bottom-right">;
+                type: PropType<"custom" | "bottom-left" | "bottom-right">;
             };
         }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "items" | "menuClass" | "position">;
         $attrs: {
@@ -42,16 +42,16 @@ declare const _default: {
             };
             menuClass: {
                 default: string;
-                type: StringConstructor;
+                type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
             };
             position: {
                 default: string;
-                type: PropType<"bottom-left" | "bottom-right">;
+                type: PropType<"custom" | "bottom-left" | "bottom-right">;
             };
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             items: MenuItemInterface[];
-            menuClass: string;
-            position: "bottom-left" | "bottom-right";
+            menuClass: string | Record<string, any> | unknown[];
+            position: "custom" | "bottom-left" | "bottom-right";
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -79,11 +79,11 @@ declare const _default: {
         };
         menuClass: {
             default: string;
-            type: StringConstructor;
+            type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
         };
         position: {
             default: string;
-            type: PropType<"bottom-left" | "bottom-right">;
+            type: PropType<"custom" | "bottom-left" | "bottom-right">;
         };
     }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: undefined;
@@ -96,22 +96,24 @@ declare const _default: {
     };
     menuClass: {
         default: string;
-        type: StringConstructor;
+        type: (ObjectConstructor | StringConstructor | ArrayConstructor)[];
     };
     position: {
         default: string;
-        type: PropType<"bottom-left" | "bottom-right">;
+        type: PropType<"custom" | "bottom-left" | "bottom-right">;
     };
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     items: MenuItemInterface[];
-    menuClass: string;
-    position: "bottom-left" | "bottom-right";
+    menuClass: string | Record<string, any> | unknown[];
+    position: "custom" | "bottom-left" | "bottom-right";
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         button: (_: {
             open: any;
         }) => any;
-        items: (_: {}) => any;
+        items: (_: {
+            items: MenuItemInterface[] | undefined;
+        }) => any;
     };
 });
 export default _default;

package/dist/types/src/components/index.d.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';
@@ -63,4 +64,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProcessRing, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

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

@@ -32,6 +32,7 @@ declare const messages: {
             next_month: string;
             none: string;
             nothing_found: string;
+            notifications_empty: string;
             or: string;
             pagination_detail: string;
             previous: string;
@@ -40,6 +41,7 @@ declare const messages: {
             remove: string;
             remove_file: string;
             remove_file_description: string;
+            see_all_notifications: string;
             select_an_item: string;
             select_an_option: string;
             success: string;
@@ -56,6 +58,7 @@ declare const messages: {
             up_to_x: string;
             upload_failed: string;
             whoops: string;
+            x_ago: string;
             x_rows_selected: string;
             year: string;
             yes_delete: string;
@@ -90,6 +93,7 @@ declare const messages: {
             next_month: string;
             none: string;
             nothing_found: string;
+            notifications_empty: string;
             or: string;
             pagination_detail: string;
             previous: string;
@@ -98,6 +102,7 @@ declare const messages: {
             remove: string;
             remove_file: string;
             remove_file_description: string;
+            see_all_notifications: string;
             select_an_item: string;
             select_an_option: string;
             success: string;
@@ -114,6 +119,7 @@ declare const messages: {
             up_to_x: string;
             upload_failed: string;
             whoops: string;
+            x_ago: string;
             x_rows_selected: string;
             year: string;
             yes_delete: string;
@@ -159,6 +165,7 @@ declare const config: {
                 next_month: string;
                 none: string;
                 nothing_found: string;
+                notifications_empty: string;
                 or: string;
                 pagination_detail: string;
                 previous: string;
@@ -167,6 +174,7 @@ declare const config: {
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
+                see_all_notifications: string;
                 select_an_item: string;
                 select_an_option: string;
                 success: string;
@@ -183,6 +191,7 @@ declare const config: {
                 up_to_x: string;
                 upload_failed: string;
                 whoops: string;
+                x_ago: string;
                 x_rows_selected: string;
                 year: string;
                 yes_delete: string;
@@ -217,6 +226,7 @@ declare const config: {
                 next_month: string;
                 none: string;
                 nothing_found: string;
+                notifications_empty: string;
                 or: string;
                 pagination_detail: string;
                 previous: string;
@@ -225,6 +235,7 @@ declare const config: {
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
+                see_all_notifications: string;
                 select_an_item: string;
                 select_an_option: string;
                 success: string;
@@ -241,6 +252,7 @@ declare const config: {
                 up_to_x: string;
                 upload_failed: string;
                 whoops: string;
+                x_ago: string;
                 x_rows_selected: string;
                 year: string;
                 yes_delete: string;

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -17,15 +17,16 @@
     "@tailwindcss/typography": "^0.5.8",
     "@vueuse/core": "^9.0.0",
     "axios": "^0.26.1",
+    "humanize-duration": "^3.0.0",
     "lodash": "^4.17.21",
     "luxon": "^3.0.0",
+    "pikaday": "^1.8.2",
     "pinia": "^2.0.0",
     "qs": "^6.0.0",
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0",
     "vue-i18n": "^9.0.0",
-    "vue-router": "^4.0.0",
-    "pikaday": "^1.8.2"
+    "vue-router": "^4.0.0"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.4"
@@ -44,6 +45,7 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
+    "@types/humanize-duration": "^3.27.1",
     "@types/luxon": "^3.1.0",
     "@types/object-hash": "^2.2.1",
     "@types/pikaday": "^1.7.6",
@@ -63,6 +65,7 @@
     "eslint-plugin-storybook": "^0.6.7",
     "eslint-plugin-vue": "^9.7.0",
     "eslint-plugin-vue-scoped-css": "^2.2.0",
+    "humanize-duration": "^3.27.3",
     "lodash": "^4.17.21",
     "luxon": "^3.1.0",
     "object-hash": "^3.0.0",

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -0,0 +1,101 @@
+<template>
+  <BaseMenu
+    class="inline-block"
+    :position="mobile ? 'custom' : 'bottom-left'"
+    :menu-class="['sm:w-[320px] w-[280px]', mobile ? 'right-4' : '']"
+  >
+    <template #button="{ open }">
+      <div
+        class="relative flex items-center rounded-full p-1.5"
+        :class="[open ? '' : '']"
+      >
+        <BaseIcon
+          icon="heroicons:bell"
+          class="h-6 w-6"
+          :class="[dark ? 'text-slate-300' : 'text-slate-600']"
+        ></BaseIcon>
+        <BaseCounter
+          v-if="notificationsConfig.items.length"
+          class="absolute top-0 right-0"
+          :count="notificationsConfig.items.length"
+        ></BaseCounter>
+      </div>
+    </template>
+
+    <template #items>
+      <template
+        v-for="notification in notificationsConfig.items"
+        :key="notification.id + 'link'"
+      >
+        <BaseLayoutNotificationItem
+          :notification="notification"
+        ></BaseLayoutNotificationItem>
+      </template>
+      <div
+        v-if="notificationsConfig.items.length == 0"
+        class="flex items-center justify-center p-6"
+      >
+        <div class="">
+          <BaseIcon
+            icon="heroicons:inbox-stack"
+            class="mx-auto mb-2 h-8 w-8 text-slate-400"
+          ></BaseIcon>
+          <p class="text-center text-sm text-slate-700">
+            {{ $t('sui.notifications_empty') }}
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-if="notificationsConfig.footerTo"
+        class="mt-1 border-t border-slate-200 pt-1"
+      >
+        <RouterLink
+          v-slot="{ href, navigate }"
+          custom
+          :to="notificationsConfig.footerTo"
+        >
+          <MenuItem as="a" :href="href" @click="navigate">
+            <div
+              class="hover block px-3 py-2 text-center text-sm font-medium text-primary-600 hover:bg-slate-100"
+            >
+              {{
+                notificationsConfig.footerLabel
+                  ? notificationsConfig.footerLabel
+                  : $t('sui.see_all_notifications')
+              }}
+            </div>
+          </MenuItem>
+        </RouterLink>
+      </div>
+    </template>
+  </BaseMenu>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { BaseIcon } from '.';
+import BaseCounter from './BaseCounter.vue';
+import BaseLayoutNotificationItem from './BaseLayoutNotificationItem.vue';
+import BaseMenu from './BaseMenu.vue';
+import { useBreakpoints } from '@/composables/breakpoints';
+import { NotificationsConfig } from '../types/types';
+import { MenuItem } from '@headlessui/vue';
+
+defineProps({
+  notificationsConfig: {
+    required: true,
+    type: Object as PropType<NotificationsConfig>,
+  },
+  dark: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const breakpoints = useBreakpoints();
+
+const mobile = computed((): boolean => {
+  return breakpoints.smaller('sm').value;
+});
+</script>

package/src/components/BaseLayoutNotificationItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <router-link v-slot="{ href, navigate }" custom :to="notification.to">
+    <MenuItem v-slot="{ active }" as="a" :href="href" @click="navigate">
+      <div class="px-3 py-2" :class="[active ? 'bg-slate-100' : '']">
+        <div
+          class="text-sm leading-tight text-slate-800"
+          v-html="notification.text"
+        ></div>
+        <p v-if="createdAt" class="mt-1 text-xs text-slate-400">
+          {{ createdAt }}
+        </p>
+      </div>
+    </MenuItem>
+  </router-link>
+</template>
+
+<script lang="ts" setup>
+import { Notification } from '@/types/Notification';
+import { MenuItem } from '@headlessui/vue';
+import { DateTime } from 'luxon';
+import { PropType } from 'vue';
+import humanizeDuration from 'humanize-duration';
+
+const i18n = useI18n();
+
+const props = defineProps({
+  notification: {
+    required: true,
+    type: Object as PropType<Notification>,
+  },
+});
+
+const now = ref(DateTime.now());
+
+const intervalId = setInterval(() => {
+  now.value.plus({ second: 1 });
+}, 1000);
+
+const createdAt = computed(() => {
+  if (props.notification.created_at) {
+    const duration = DateTime.fromISO(props.notification.created_at).diff(
+      now.value
+    ).milliseconds;
+
+    const durationHuman = humanizeDuration(duration, {
+      language: i18n.locale.value,
+      round: true,
+      largest: 1,
+    });
+
+    return i18n.t('sui.x_ago', { duration: durationHuman });
+  }
+});
+
+onBeforeUnmount(() => {
+  clearInterval(intervalId);
+});
+</script>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -70,6 +70,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-01-01T00:00:00',
+        },
+        {
+          id: '2',
+          text: 'Your inbox is now full. Please empty your inbox before it goes bang.',
+          to: '/',
+          created_at: '2022-01-01T00:00:00',
+        },
+      ],
+    },
   },
 };