From 3ab77ade1c2473387af52fb25d5393fc40662aa0 Mon Sep 17 00:00:00 2001
From: danielterletzkiy <danielterletzkiy@gmail.com>
Date: Thu, 7 Jul 2022 15:25:23 +0200
Subject: [PATCH] VEZ-7 fixed notification disappearance

---
 src/VuelizePlugin.js                          |  9 +--
 src/VuelizePlugin.js.map                      |  2 +-
 src/VuelizePlugin.ts                          | 16 ++---
 src/components/notification/DNotification.vue | 59 ++++++++-----------
 .../notification/DNotificationWrapper.vue     | 32 +++++-----
 src/components/notification/Notification.js   | 34 +++++++++++
 .../notification/Notification.js.map          |  1 +
 src/components/notification/Notification.ts   | 38 ++++++++++++
 src/components/notification/Notifications.js  |  5 ++
 .../notification/Notifications.js.map         |  1 +
 src/store/NotificationStore.d.ts              |  2 -
 src/store/NotificationStore.js                |  7 ---
 src/store/NotificationStore.js.map            |  1 -
 src/store/NotificationStore.ts                |  8 ---
 src/types/Vuelize.js.map                      |  2 +-
 src/types/Vuelize.ts                          | 19 ++----
 16 files changed, 139 insertions(+), 97 deletions(-)
 create mode 100644 src/components/notification/Notification.js
 create mode 100644 src/components/notification/Notification.js.map
 create mode 100644 src/components/notification/Notification.ts
 create mode 100644 src/components/notification/Notifications.js
 create mode 100644 src/components/notification/Notifications.js.map
 delete mode 100644 src/store/NotificationStore.d.ts
 delete mode 100644 src/store/NotificationStore.js
 delete mode 100644 src/store/NotificationStore.js.map
 delete mode 100644 src/store/NotificationStore.ts

diff --git a/src/VuelizePlugin.js b/src/VuelizePlugin.js
index 22f40ab..941e4a9 100644
--- a/src/VuelizePlugin.js
+++ b/src/VuelizePlugin.js
@@ -1,7 +1,8 @@
+import { ref } from 'vue';
 import { createPinia } from "pinia";
 import { ThemeStore } from './store/ThemeStore';
-import { NotificationStore } from './store/NotificationStore';
 import importAll from "./ComponentImport";
+import Notification from "./components/notification/Notification";
 // @ts-ignore no ripple types available
 import VWave from "v-wave";
 import Unicon from 'vue3-unicons';
@@ -9,14 +10,14 @@ import 'v3-transitions/dist/style.css';
 class VuelizePlugin {
     app;
     theme;
-    notification;
+    notifications = ref([]);
     constructor(app) {
         this.app = app;
         this.theme = ThemeStore();
-        this.notification = NotificationStore();
+        this.notifications.value;
     }
     notify(title, content, type, options) {
-        this.notification.notifications.push({ title, content, type, options, active: true });
+        this.notifications.value.push(ref(new Notification(title, content, type, options)));
     }
     getColor(color, tint) {
         let colorOut;
diff --git a/src/VuelizePlugin.js.map b/src/VuelizePlugin.js.map
index e499134..d660d86 100644
--- a/src/VuelizePlugin.js.map
+++ b/src/VuelizePlugin.js.map
@@ -1 +1 @@
-{"version":3,"file":"VuelizePlugin.js","sourceRoot":"","sources":["VuelizePlugin.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"VuelizePlugin.js","sourceRoot":"","sources":["VuelizePlugin.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/src/VuelizePlugin.ts b/src/VuelizePlugin.ts
index 2da6c09..7d998c2 100644
--- a/src/VuelizePlugin.ts
+++ b/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)';
     }
diff --git a/src/components/notification/DNotification.vue b/src/components/notification/DNotification.vue
index 498582f..e353f3c 100644
--- a/src/components/notification/DNotification.vue
+++ b/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>
 
diff --git a/src/components/notification/DNotificationWrapper.vue b/src/components/notification/DNotificationWrapper.vue
index cb6b598..87e58c9 100644
--- a/src/components/notification/DNotificationWrapper.vue
+++ b/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">
diff --git a/src/components/notification/Notification.js b/src/components/notification/Notification.js
new file mode 100644
index 0000000..686c733
--- /dev/null
+++ b/src/components/notification/Notification.js
@@ -0,0 +1,34 @@
+import { State } from "../../types/Vuelize";
+import { ref } from "vue";
+export default class Notification {
+    title = "";
+    content = "";
+    type = State.Success;
+    options = { color: "", icon: "", timeout: 5000 };
+    active = ref(true);
+    timeout = null;
+    created = new Date();
+    constructor(title, content, type, options) {
+        this.title = title;
+        this.content = content;
+        this.type = type;
+        this.options = options;
+        this.created = new Date();
+        this.startTimeout(this.options?.timeout);
+    }
+    startTimeout(timeoutTime = 3000) {
+        this.timeout = setTimeout(() => {
+            this.close();
+        }, timeoutTime);
+    }
+    removeTimeout() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+        }
+    }
+    close() {
+        console.log('close');
+        this.active.value = false;
+    }
+}
+//# sourceMappingURL=Notification.js.map
\ No newline at end of file
diff --git a/src/components/notification/Notification.js.map b/src/components/notification/Notification.js.map
new file mode 100644
index 0000000..1b5cea4
--- /dev/null
+++ b/src/components/notification/Notification.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sourceRoot":"","sources":["Notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAM,MAAM,KAAK,CAAC;AAE7B,MAAM,CAAC,OAAO,OAAO,YAAY;IAC7B,KAAK,GAAW,EAAE,CAAC;IACnB,OAAO,GAAW,EAAE,CAAC;IACrB,IAAI,GAAU,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,GAA0B,EAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;IACtE,MAAM,GAAiB,GAAG,CAAC,IAAI,CAAC,CAAC;IACjC,OAAO,GAAQ,IAAI,CAAC;IACpB,OAAO,GAAS,IAAI,IAAI,EAAE,CAAC;IAE3B,YAAY,KAAa,EAAE,OAAe,EAAE,IAAW,EAAE,OAA8B;QACnF,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,IAAI,IAAI,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC7C,CAAC;IAED,YAAY,CAAC,cAAsB,IAAI;QACnC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC,EAAE,WAAW,CAAC,CAAA;IACnB,CAAC;IAED,aAAa;QACT,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9B;IACL,CAAC;IAED,KAAK;QACD,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QACpB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;IAC9B,CAAC;CACJ"}
\ No newline at end of file
diff --git a/src/components/notification/Notification.ts b/src/components/notification/Notification.ts
new file mode 100644
index 0000000..a64f423
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/components/notification/Notifications.js b/src/components/notification/Notifications.js
new file mode 100644
index 0000000..dcd18ff
--- /dev/null
+++ b/src/components/notification/Notifications.js
@@ -0,0 +1,5 @@
+import { ref } from "vue";
+export default class Notifications {
+    static notifications = ref([]);
+}
+//# sourceMappingURL=Notifications.js.map
\ No newline at end of file
diff --git a/src/components/notification/Notifications.js.map b/src/components/notification/Notifications.js.map
new file mode 100644
index 0000000..ba5139f
--- /dev/null
+++ b/src/components/notification/Notifications.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.js","sourceRoot":"","sources":["Notifications.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAM,MAAM,KAAK,CAAC;AAE7B,MAAM,CAAC,OAAO,OAAO,aAAa;IAC9B,MAAM,CAAC,aAAa,GAA6B,GAAG,CAAsB,EAAE,CAAC,CAAC"}
\ No newline at end of file
diff --git a/src/store/NotificationStore.d.ts b/src/store/NotificationStore.d.ts
deleted file mode 100644
index 1386361..0000000
--- a/src/store/NotificationStore.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import { NotificationTypes } from "../types/NotificationTypes";
-export declare const NotificationStore: import("pinia").StoreDefinition<"notification", NotificationTypes, {}, {}>;
diff --git a/src/store/NotificationStore.js b/src/store/NotificationStore.js
deleted file mode 100644
index 092252e..0000000
--- a/src/store/NotificationStore.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { defineStore } from 'pinia';
-export const NotificationStore = defineStore('notification', {
-    state: () => ({
-        notifications: []
-    })
-});
-//# sourceMappingURL=NotificationStore.js.map
\ No newline at end of file
diff --git a/src/store/NotificationStore.js.map b/src/store/NotificationStore.js.map
deleted file mode 100644
index 820b8e8..0000000
--- a/src/store/NotificationStore.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"NotificationStore.js","sourceRoot":"","sources":["NotificationStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAA;AAEjC,MAAM,CAAC,MAAM,iBAAiB,GAAG,WAAW,CAAC,cAAc,EAAE;IACzD,KAAK,EAAE,GAAG,EAAE,CACR,CAAC;QACG,aAAa,EAAE,EAAE;KACgB,CAAA;CAC5C,CAAC,CAAA"}
\ No newline at end of file
diff --git a/src/store/NotificationStore.ts b/src/store/NotificationStore.ts
deleted file mode 100644
index a05b064..0000000
--- a/src/store/NotificationStore.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import {defineStore} from 'pinia'
-
-export const NotificationStore = defineStore('notification', {
-    state: () =>
-        ({
-            notifications: []
-        } as Notifications.NotificationStore)
-})
diff --git a/src/types/Vuelize.js.map b/src/types/Vuelize.js.map
index 8428cf9..1ba53f8 100644
--- a/src/types/Vuelize.js.map
+++ b/src/types/Vuelize.js.map
@@ -1 +1 @@
-{"version":3,"file":"Vuelize.js","sourceRoot":"","sources":["Vuelize.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAkB,KAKjB;AALD,WAAkB,KAAK;IACnB,4BAAmB,CAAA;IACnB,wBAAe,CAAA;IACf,4BAAmB,CAAA;IACnB,sBAAa,CAAA;AACjB,CAAC,EALiB,KAAK,KAAL,KAAK,QAKtB;AAED,MAAM,CAAN,IAAkB,KAOjB;AAPD,WAAkB,KAAK;IACnB,0BAAiB,CAAA;IACjB,sBAAa,CAAA;IACb,kBAAS,CAAA;IACT,kBAAS,CAAA;IACT,kBAAS,CAAA;IACT,sBAAa,CAAA;AACjB,CAAC,EAPiB,KAAK,KAAL,KAAK,QAOtB"}
\ No newline at end of file
+{"version":3,"file":"Vuelize.js","sourceRoot":"","sources":["Vuelize.ts"],"names":[],"mappings":"AAGA,MAAM,CAAN,IAAkB,KAKjB;AALD,WAAkB,KAAK;IACnB,4BAAmB,CAAA;IACnB,wBAAe,CAAA;IACf,4BAAmB,CAAA;IACnB,sBAAa,CAAA;AACjB,CAAC,EALiB,KAAK,KAAL,KAAK,QAKtB;AAED,MAAM,CAAN,IAAkB,KAOjB;AAPD,WAAkB,KAAK;IACnB,0BAAiB,CAAA;IACjB,sBAAa,CAAA;IACb,kBAAS,CAAA;IACT,kBAAS,CAAA;IACT,kBAAS,CAAA;IACT,sBAAa,CAAA;AACjB,CAAC,EAPiB,KAAK,KAAL,KAAK,QAOtB"}
\ No newline at end of file
diff --git a/src/types/Vuelize.ts b/src/types/Vuelize.ts
index 68f6c75..06d25c4 100644
--- a/src/types/Vuelize.ts
+++ b/src/types/Vuelize.ts
@@ -1,4 +1,5 @@
-import {App} from "vue";
+import {App, ref, Ref} from "vue";
+import Notification from "../components/notification/Notification";
 
 export const enum State {
     Success = "success",
@@ -20,7 +21,7 @@ declare global {
     interface Vuelize {
         app: App;
         theme: Theme.ThemeStore;
-        notification: Notifications.NotificationStore;
+        notifications: Ref<Array<Ref<Notification>>>;
 
         notify(title: string, content: string, type: State, options?: object | undefined): void;
 
@@ -30,23 +31,11 @@ declare global {
     }
 
     namespace Notifications {
-        interface NotificationStore {
-            notifications: Notification[],
-        }
-
-        interface Notification {
-            title: string,
-            content: string,
-            type: string,
-            options?: Options,
-            active: boolean,
-            created: Date
-        }
 
         interface Options {
             color: string,
             icon: string,
-            timeout: any
+            timeout: number
         }
     }