VEZ-7 fixed notification disappearance

src/VuelizePlugin.ts

@@ -1,29 +1,29 @@
-import {App, Plugin} from 'vue';
+import {App, Plugin, Ref, ref} from 'vue';
 import {createPinia} from "pinia";
 import {ThemeStore} from './store/ThemeStore'
-import {NotificationStore} from './store/NotificationStore'
 import importAll from "./ComponentImport";
+import {State} from "./types/Vuelize";
+import Notification from "./components/notification/Notification";
 
 // @ts-ignore no ripple types available
 import VWave from "v-wave";
 import Unicon from 'vue3-unicons'
 
 import 'v3-transitions/dist/style.css'
-import {State} from "./types/Vuelize";
 
 class VuelizePlugin implements Vuelize {
     app;
     theme;
-    notification;
+    notifications = ref<Array<Ref<Notification>>>([]);
 
     constructor(app: App) {
         this.app = app;
         this.theme = ThemeStore();
-        this.notification = NotificationStore();
+        this.notifications.value;
     }
 
-    notify(title: string, content: string, type: State, options?: object | undefined) {
-        this.notification.notifications.push(<Notifications.Notification>{title, content, type, options, active: true})
+    notify(title: string, content: string, type: State, options: Notifications.Options) {
+        this.notifications.value.push(ref<Notification>(new Notification(title, content, type, options)))
     }
 
     getColor(color: string, tint?: number | string | undefined): string {
@@ -65,7 +65,7 @@ class VuelizePlugin implements Vuelize {
         const g = parseInt(hexColor.substr(2, 2), 16);
         const b = parseInt(hexColor.substr(4, 2), 16);
         // Get YIQ ratio
-        let yiq = (r*0.299) + (g*0.587) + (b*0.114);
+        let yiq = (r * 0.299) + (g * 0.587) + (b * 0.114);
         // Check contrast
         return (yiq > 160) ? 'rgba(0,0,0,0.75)' : 'rgba(255,255,255,0.85)';
     }

src/components/notification/DNotification.vue

@@ -1,22 +1,22 @@
 <template>
   <DWrapper :classes="['d-notification']" v-bind="{...$props, ...$attrs}" @click="$emit('click')">
     <slot name="default" :notification="notification">
-      <DCardContent class="d-notification__content" :color="options.value.color" glow glowing
-                    :outlined="!options.value.color"
+      <DCardContent class="d-notification__content" :color="options.color" glow glowing
+                    :outlined="!options.color"
                     depressed min-width="100%" max-width="500px"
-                    @mouseover="hover.value = true" @mouseleave="hover.value = false">
+                    @mouseover="hover = true" @mouseleave="hover = false">
         <DRow class="pa-2">
           <DColumn class="pa-0">
-            <DIconButton :color="(options.value.color)" @click="hide">
-              <DIcon :size="hover.value?30:40" :name="hover.value?'multiply':options.value.icon||'multiply'"></DIcon>
+            <DIconButton :color="(options.color)" @click="onCloseClick">
+              <DIcon :size="hover?30:40" :name="hover?'multiply':options.icon||'multiply'"></DIcon>
             </DIconButton>
           </DColumn>
           <d-column class="pa-0" style="align-self: stretch; justify-content: center; gap: 16px">
-            <DCardTitle v-if="notification.title" class="py-0 font-size-medium" :color="(options.value.color)">
-              {{ notification.title }}
+            <DCardTitle v-if="notification.value.title" class="py-0 font-size-medium" :color="(options.color)">
+              {{ notification.value.title }}
             </DCardTitle>
-            <DCardSubtitle v-if="notification.content" class="py-0" :color="(options.value.color)">
-              {{ notification.content }}
+            <DCardSubtitle v-if="notification.value.content" class="py-0" :color="(options.color)">
+              {{ notification.value.content }}
             </DCardSubtitle>
           </d-column>
         </DRow>
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {inject, onBeforeUnmount, onMounted, PropType, ref, watch} from "vue";
+import {inject, onBeforeUnmount, onMounted, PropType, Ref, ref, watch} from "vue";
 import DWrapper from "../DWrapper.vue";
 import DCardContent from "../card/content/DCardContent.vue";
 import DRow from "../flex/DRow.vue";
@@ -42,43 +42,34 @@ import DIcon from "../icon/DIcon.vue";
 import DCardTitle from "../card/text/DCardTitle.vue";
 import DCardSubtitle from "../card/text/DCardSubtitle.vue";
 
+import Notification from "./Notification";
 const vuelize: any = inject("vuelize");
 
 const props = defineProps({
-  notification: {type: Object as PropType<Notifications.Notification>, required: true}
+  notification: {type: Object as PropType<Ref<Notification>>, required: true}
 })
 
-const timeout = ref<any>(undefined);
+console.log(props.notification.value)
+
 const hover = ref<boolean>(false);
-//const active = ref<boolean>(true); TODO
-const options = ref<Notifications.Options>({icon: '', color: '', timeout: undefined});
+const options = ref<Notifications.Options>({icon: '', color: '', timeout: 5000});
 
 watch(hover, (state) => {
   if (state) {
-    deleteTimeout()
+    props.notification.value.removeTimeout();
   } else {
-    addTimeout()
+    props.notification.value.startTimeout();
   }
 })
 
-function hide() {
-  props.notification.active = false
-}
-
-function addTimeout() {
-  timeout.value = setTimeout(() => {
-    hide()
-  }, options.value.timeout ? options.value.timeout : 5000)
-}
-
-function deleteTimeout() {
-  clearTimeout(timeout.value)
+function onCloseClick(){
+  props.notification.value.close();
 }
 
 onMounted(() => {
 
-  options.value.color = vuelize.getColor(props.notification.type)
-  switch (props.notification.type) {
+  options.value.color = vuelize.getColor(props.notification.value.type)
+  switch (props.notification.value.type) {
     case 'success': {
       options.value.icon = 'check'
       break;
@@ -101,15 +92,13 @@ onMounted(() => {
     }
   }
 
-  if (props.notification.options) {
-    Object.assign(options.value, props.notification.options);
+  if (props.notification.value.options) {
+    Object.assign(options.value, props.notification.value.options);
   }
-
-  addTimeout();
 })
 
 onBeforeUnmount(() => {
-  deleteTimeout()
+  props.notification.value.removeTimeout();
 })
 </script>
 

src/components/notification/DNotificationWrapper.vue

@@ -1,10 +1,10 @@
 <template>
-  <DWrapper :classes="['d-notification-wrapper', {permanent}]" v-bind="{...$props, ...$attrs}"
-                      @click="$emit('click')">
+  <DWrapper :classes="['d-notification-wrapper']" v-bind="{...$props, ...$attrs}"
+            @click="$emit('click')">
     <div class="d-notification-wrapper__content">
-      <FadeTransition group :delay="0">
-        <DNotification v-for="notification in notifications" :notification="notification" color="primary"
-                        :key="notification.created"/>
+      <FadeTransition group :duration="50">
+        <DNotification v-for="notification in notifications" :notification="notification"
+                       :key="notification.value.created"/>
       </FadeTransition>
     </div>
   </DWrapper>
@@ -17,22 +17,24 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {computed, inject} from "vue";
+import {computed, inject, Ref, watch} from "vue";
 import DWrapper from "../DWrapper.vue";
 import DNotification from "./DNotification.vue";
 import {FadeTransition} from "v3-transitions";
+import Notification from "./Notification";
 
-const vuelize: any = inject('vuelize');
+const vuelize: Vuelize = inject('vuelize') as Vuelize;
 
-const props = defineProps({
-  permanent: {type: Boolean},
-})
+console.log(vuelize.notifications)
+const notifications = computed<Array<Ref<Notification>>>(() => vuelize.notifications.value.filter((notification) => {
+  console.log(notification)
+  return notification.value.active
+}))
+
+watch(vuelize.notifications, (data) => {
+  console.log(data)
+}, {deep: true})
 
-const notifications = computed(() => {
-  return props.permanent ?
-      vuelize.notification.notifications
-      : vuelize.notification.notifications.filter((notification: { active: boolean; }) => notification.active)
-})
 </script>
 
 <style scoped lang="scss">

src/components/notification/Notification.ts

@@ -0,0 +1,38 @@
+import {State} from "../../types/Vuelize";
+import {ref, Ref} from "vue";
+
+export default class Notification {
+    title: string = "";
+    content: string = "";
+    type: State = State.Success;
+    options: Notifications.Options = {color: "", icon: "", timeout: 5000};
+    active: Ref<boolean> = ref(true);
+    timeout: any = null;
+    created: Date = new Date();
+
+    constructor(title: string, content: string, type: State, options: Notifications.Options) {
+        this.title = title;
+        this.content = content;
+        this.type = type;
+        this.options = options;
+        this.created = new Date();
+        this.startTimeout(this.options?.timeout);
+    }
+
+    startTimeout(timeoutTime: number = 3000) {
+        this.timeout = setTimeout(() => {
+            this.close();
+        }, timeoutTime)
+    }
+
+    removeTimeout() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+        }
+    }
+
+    close() {
+        console.log('close')
+        this.active.value = false;
+    }
+}