sprintify-ui 0.0.24 → 0.0.25

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

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
         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<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "open")[], "click" | "open", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     notificationsConfig: {
         required: true;
         type: PropType<NotificationsConfig>;
@@ -18,7 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}>>, {
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    onOpen?: ((...args: any[]) => any) | undefined;
+}, {
     dark: boolean;
 }>;
 export default _default;

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

@@ -5,10 +5,12 @@ declare const _default: import("vue").DefineComponent<{
         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<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     notification: {
         required: true;
         type: PropType<Notification>;
     };
-}>>, {}>;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {}>;
 export default _default;

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

@@ -39,7 +39,10 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "dark" | "notifications" | "appName" | "logoUrl">;
+        }>> & {
+            "onNotification:click"?: ((...args: any[]) => any) | undefined;
+            "onNotification:open"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "dark" | "notifications" | "appName" | "logoUrl">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -51,7 +54,7 @@ declare const _default: {
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $emit: (event: string, ...args: any[]) => void;
+        $emit: (event: "notification:click" | "notification:open", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             appName: {
@@ -82,7 +85,10 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        }>> & {
+            "onNotification:click"?: ((...args: any[]) => any) | undefined;
+            "onNotification:open"?: ((...args: any[]) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("notification:click" | "notification:open")[], string, {
             dark: boolean;
             notifications: NotificationsConfig;
             appName: string;
@@ -136,7 +142,10 @@ declare const _default: {
             default: boolean;
             type: BooleanConstructor;
         };
-    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    }>> & {
+        "onNotification:click"?: ((...args: any[]) => any) | undefined;
+        "onNotification:open"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
@@ -169,7 +178,10 @@ declare const _default: {
         default: boolean;
         type: BooleanConstructor;
     };
-}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+}>> & {
+    "onNotification:click"?: ((...args: any[]) => any) | undefined;
+    "onNotification:open"?: ((...args: any[]) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("notification:click" | "notification:open")[], "notification:click" | "notification:open", {
     dark: boolean;
     notifications: NotificationsConfig;
     appName: string;

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

@@ -39,7 +39,10 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "dark" | "notifications" | "appName" | "logoUrl">;
+        }>> & {
+            "onNotification:click"?: ((...args: any[]) => any) | undefined;
+            "onNotification:open"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "dark" | "notifications" | "appName" | "logoUrl">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -51,7 +54,7 @@ declare const _default: {
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $emit: (event: string, ...args: any[]) => void;
+        $emit: (event: "notification:click" | "notification:open", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             appName: {
@@ -82,7 +85,10 @@ declare const _default: {
                 default: boolean;
                 type: BooleanConstructor;
             };
-        }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+        }>> & {
+            "onNotification:click"?: ((...args: any[]) => any) | undefined;
+            "onNotification:open"?: ((...args: any[]) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("notification:click" | "notification:open")[], string, {
             dark: boolean;
             notifications: NotificationsConfig;
             appName: string;
@@ -136,7 +142,10 @@ declare const _default: {
             default: boolean;
             type: BooleanConstructor;
         };
-    }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    }>> & {
+        "onNotification:click"?: ((...args: any[]) => any) | undefined;
+        "onNotification:open"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
@@ -169,7 +178,10 @@ declare const _default: {
         default: boolean;
         type: BooleanConstructor;
     };
-}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+}>> & {
+    "onNotification:click"?: ((...args: any[]) => any) | undefined;
+    "onNotification:open"?: ((...args: any[]) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("notification:click" | "notification:open")[], "notification:click" | "notification:open", {
     dark: boolean;
     notifications: NotificationsConfig;
     appName: string;

package/package.json

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

package/src/components/BaseLayoutNotificationDropdown.vue

@@ -3,6 +3,7 @@
     class="inline-block"
     :position="mobile ? 'custom' : 'bottom-left'"
     :menu-class="['sm:w-[320px] w-[280px]', mobile ? 'right-4' : '']"
+    @click="onOpen"
   >
     <template #button="{ open }">
       <div
@@ -29,6 +30,7 @@
       >
         <BaseLayoutNotificationItem
           :notification="notification"
+          @click="onClick"
         ></BaseLayoutNotificationItem>
       </template>
       <div
@@ -81,6 +83,9 @@ import BaseMenu from './BaseMenu.vue';
 import { useBreakpoints } from '@/composables/breakpoints';
 import { NotificationsConfig } from '../types/types';
 import { MenuItem } from '@headlessui/vue';
+import { Notification } from '@/types/Notification';
+
+const emit = defineEmits(['click', 'open']);
 
 defineProps({
   notificationsConfig: {
@@ -98,4 +103,12 @@ const breakpoints = useBreakpoints();
 const mobile = computed((): boolean => {
   return breakpoints.smaller('sm').value;
 });
+
+function onClick(notification: Notification) {
+  emit('click', notification);
+}
+
+function onOpen() {
+  emit('open');
+}
 </script>

package/src/components/BaseLayoutNotificationItem.vue

@@ -1,6 +1,11 @@
 <template>
   <router-link v-slot="{ href, navigate }" custom :to="notification.to">
-    <MenuItem v-slot="{ active }" as="a" :href="href" @click="navigate">
+    <MenuItem
+      v-slot="{ active }"
+      as="a"
+      :href="href"
+      @click.prevent="onClick(navigate)"
+    >
       <div class="px-3 py-2" :class="[active ? 'bg-slate-100' : '']">
         <div
           class="text-sm leading-tight text-slate-800"
@@ -22,6 +27,7 @@ import { PropType } from 'vue';
 import humanizeDuration from 'humanize-duration';
 
 const i18n = useI18n();
+const emit = defineEmits(['click']);
 
 const props = defineProps({
   notification: {
@@ -55,4 +61,9 @@ const createdAt = computed(() => {
 onBeforeUnmount(() => {
   clearInterval(intervalId);
 });
+
+function onClick(navigate: () => void) {
+  emit('click', props.notification);
+  navigate();
+}
 </script>

package/src/components/BaseLayoutSidebarConfigurable.vue

@@ -38,6 +38,8 @@
             v-if="notifications"
             :notifications-config="notifications"
             class="mr-1 sm:mr-2"
+            @click="onNotificationClick"
+            @open="onNotificationOpen"
           ></BaseLayoutNotificationDropdown>
 
           <!-- Profile dropdown -->
@@ -70,6 +72,8 @@ import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseMenu from './BaseMenu.vue';
 import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
 
+const emit = defineEmits(['notification:click', 'notification:open']);
+
 const props = defineProps({
   appName: {
     default: '',
@@ -115,4 +119,12 @@ const actionSections = computed((): ActionSection[] => {
     },
   ];
 });
+
+function onNotificationClick(notification: Notification) {
+  emit('notification:click', notification);
+}
+
+function onNotificationOpen() {
+  emit('notification:open');
+}
 </script>

package/src/components/BaseLayoutStackedConfigurable.vue

@@ -29,6 +29,8 @@
             class="mr-4 md:mr-5"
             :dark="dark"
             :notifications-config="notifications"
+            @click="onNotificationClick"
+            @open="onNotificationOpen"
           ></BaseLayoutNotificationDropdown>
 
           <!-- Profile dropdown -->
@@ -96,6 +98,8 @@ import BaseNavbarItem from './BaseNavbarItem.vue';
 import BaseNavbarSideItem from './BaseNavbarSideItem.vue';
 import BaseLayoutNotificationDropdown from './BaseLayoutNotificationDropdown.vue';
 
+const emit = defineEmits(['notification:click', 'notification:open']);
+
 defineProps({
   appName: {
     default: '',
@@ -126,4 +130,12 @@ defineProps({
     type: Boolean,
   },
 });
+
+function onNotificationClick(notification: Notification) {
+  emit('notification:click', notification);
+}
+
+function onNotificationOpen() {
+  emit('notification:open');
+}
 </script>