Add Notification vue component

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>    

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>

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)