Add more doc & make alerts unique with a uid. Add an event when the…

… alert is closed

readme.md

@@ -12,7 +12,7 @@ You can install the package via composer:
 composer require depsimon/laravel-alerts
 ```
 
-## Usage
+## Usage within Laravel
 
 Within your controllers, before you perform a redirect, make a call to the `alert()` function.
 
@@ -33,6 +33,22 @@ You may also do:
 - `alert_error('Error Message')`: Alert an 'error' message.
 - `alert('Alert Message', 'Alert Title')`: Alert a message with a title.
 
+## Usage within Vue
+
+Within your Vue.js components, you can `$emit` an `alert` event.
+
+```js
+Events.$emit('alert', {
+    title: "Success",
+    message: "Your profile has been updated with success.",
+    type: "success"
+})
+```
+
+Only the `message` field is required.
+
+## Configuration
+
 After you've setup the alerts, you may display them in your views. We provide you with a template out of the box that works with Vue.js & Tailwind CSS.
 
 You're free to use it and customize it the way you want.

src/Alert.php

@@ -10,8 +10,11 @@ class Alert implements \ArrayAccess
 
     public $type = 'info';
 
+    public $uid;
+
     public function __construct($attributes = [])
     {
+        $this->uid = '_' . str_random(9);
         $this->update($attributes);
     }
 

src/AlertsNotifier.php

@@ -25,7 +25,7 @@ public function alert($message, $title = null, $type = null)
             $message = new Alert(compact('message', 'title', 'type'));
         }
 
-        $this->alerts->push($message);
+        $this->alerts->push($message + ['uid' => '_' . str_random(9)]);
 
         return $this->flash();
     }

src/resources/assets/js/components/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-    <transition name="slide">
+    <transition name="slide" @after-leave="close">
         <div v-if="visible" class="flex items-center relative text-white px-6 py-3 shadow mb-px" :class="'bg-' + alertClass">
             <button class="absolute pin-r pin-t mr-4 mt-4" :class="'text-' + alertClass + '-lighter hover:text-' + alertClass + '-lightest'" @click="visible = false">
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
@@ -47,6 +47,18 @@
                         return '<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm0-338c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"/></svg>'
                 }
             }
+        },
+
+        created () {
+            setTimeout(() => {
+                this.visible = false
+            }, this.alert.timeout || 3000)
+        },
+
+        methods: {
+            close () {
+                this.$emit('closed')
+            }
         }
     }
 </script>

src/resources/assets/js/components/Alerts.vue

@@ -1,6 +1,10 @@
 <template>
     <div>
-        <alert v-for="(alert, index) in alerts" :key="index" :alert="alert"></alert>
+        <alert
+            v-for="(alert, index) in alerts"
+            :key="index"
+            :alert="alert"
+            @closed="remove(alert)"></alert>
     </div>
 </template>
 <script>
@@ -18,9 +22,16 @@
         },
 
         mounted () {
-            window.Events.$on('flash', (alert) => {
+            window.Events.$on('alert', (alert) => {
+                alert.uid = '_' + Math.random().toString(36).substr(2, 9)
                 this.alerts.push(alert)
             })
+        },
+
+        methods: {
+            remove (alert) {
+                this.alerts.splice(this.alerts.indexOf(alert), 1);
+            }
         }
     }
 </script>