From b40fc65120c1f5d41b5e1dbdb9dd6160ba635603 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 28 Feb 2020 14:47:55 +0100
Subject: [PATCH] Add Notification vue component

---
 resources/js/components/FormWrapper.vue  |  4 +--
 resources/js/components/Notification.vue | 45 ++++++++++++++++++++++++
 resources/js/components/index.js         |  2 ++
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/components/Notification.vue

diff --git a/resources/js/components/FormWrapper.vue b/resources/js/components/FormWrapper.vue
index 2f9e71be..8edf0c8d 100644
--- a/resources/js/components/FormWrapper.vue
+++ b/resources/js/components/FormWrapper.vue
@@ -4,8 +4,8 @@
             <h1 class="title" v-html="title" v-if="title"></h1>
             <slot />
             <p v-if="showTag">
-                <div class="notification is-danger" v-if="fail" v-html="fail" />
-                <div class="notification is-success" v-if="success" v-html="success" />
+                <notification :message="fail" type="is-danger" v-if="fail" />
+                <notification :message="success" type="is-success" v-if="success" />
             </p>
         </div>
     </div>    
diff --git a/resources/js/components/Notification.vue b/resources/js/components/Notification.vue
new file mode 100644
index 00000000..66a3afb7
--- /dev/null
+++ b/resources/js/components/Notification.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="notification" :class="type" v-if="show">
+        <button class="delete" v-if="isDeletable" @click="close"></button>
+        {{ message }}
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'Notification',
+        
+        data() {
+            return {
+                show: true
+            }
+        },
+
+        props: {
+            type: {
+                type: String,
+                default: 'is-primary'
+            },
+
+            message: {
+                type: String,
+                default: '',
+            },
+
+            isDeletable: {
+                type: Boolean,
+                default: true,
+            },
+        },
+
+        methods: {
+
+            close (event) {
+                if (event) {
+                    this.show = false
+                }
+                
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/js/components/index.js b/resources/js/components/index.js
index 173d43de..e778ae85 100644
--- a/resources/js/components/index.js
+++ b/resources/js/components/index.js
@@ -6,6 +6,7 @@ import FormField from './FormField'
 import FormSelect from './FormSelect'
 import FormSwitch from './FormSwitch'
 import FormButtons from './FormButtons'
+import Notification from './Notification'
 import VueFooter from './Footer'
 
 // Components that are registered globaly.
@@ -17,6 +18,7 @@ import VueFooter from './Footer'
     FormSelect,
     FormSwitch,
     FormButtons,
+    Notification,
     VueFooter,
 ].forEach(Component => {
 	Vue.component(Component.name, Component)