v2 first commit

resources/assets/js/components/BaseAlert.vue

@@ -0,0 +1,74 @@
+<template>
+  <fade-transition>
+    <div
+      v-if="visible"
+      class="alert"
+      :class="[
+           `alert-${type}`,
+          { 'alert-dismissible': dismissible }
+       ]"
+      role="alert"
+    >
+      <slot v-if="!dismissible"></slot>
+      <template v-else>
+
+        <template v-if="icon || $slots.icon">
+          <slot name="icon">
+            <span class="alert-icon" data-notify="icon">
+              <i :class="icon"></i>
+            </span>
+          </slot>
+        </template>
+
+        <span class="alert-text"> <slot></slot> </span>
+
+        <slot name="dismiss-icon">
+          <button type="button"
+                  class="close"
+                  data-dismiss="alert"
+                  aria-label="Close"
+                  @click="dismissAlert">
+            <span aria-hidden="true">×</span>
+          </button>
+        </slot>
+      </template>
+    </div>
+  </fade-transition>
+</template>
+<script>
+  import { FadeTransition } from 'vue2-transitions';
+
+  export default {
+    name: 'base-alert',
+    components: {
+      FadeTransition
+    },
+    props: {
+      type: {
+        type: String,
+        default: 'default',
+        description: 'Alert type'
+      },
+      dismissible: {
+        type: Boolean,
+        default: false,
+        description: 'Whether alert is dismissible (closeable)'
+      },
+      icon: {
+        type: String,
+        default: '',
+        description: 'Alert icon to display'
+      }
+    },
+    data() {
+      return {
+        visible: true
+      };
+    },
+    methods: {
+      dismissAlert() {
+        this.visible = false;
+      }
+    }
+  };
+</script>