Cleanup, wraup up notifications page, rename some components

Update packages

package.json

@@ -13,18 +13,18 @@
     "bootstrap": "^4.0.0",
     "chartist": "^0.11.0",
     "es6-promise": "^4.2.4",
-    "vue": "^2.5.13",
+    "vue": "^2.5.17",
-    "vue-clickaway": "^2.1.0",
+    "vue-router": "^3.0.1",
-    "vue-notifyjs": "^0.3.0",
+    "vue2-transitions": "^0.2.3"
-    "vue-router": "^3.0.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0-beta.9",
+    "@vue/cli-plugin-babel": "^3.0.0",
-    "@vue/cli-plugin-eslint": "^3.0.0-beta.9",
+    "@vue/cli-plugin-eslint": "^3.0.0",
-    "@vue/cli-service": "^3.0.0-beta.9",
+    "@vue/cli-service": "^3.0.0",
-    "@vue/eslint-config-prettier": "^3.0.0-beta.9",
+    "@vue/eslint-config-prettier": "^3.0.0",
     "node-sass": "^4.8.3",
-    "sass-loader": "^6.0.7"
+    "sass-loader": "^6.0.7",
+    "vue-template-compiler": "^2.5.17"
   },
   "description": "A sample admin dashboard based on paper dashboard UI template",
   "author": "cristian.jora <joracristi@gmail.com>",

src/App.vue

@@ -9,32 +9,4 @@
 export default {};
 </script>
 
-<style lang="scss">
+<style lang="scss"></style>
-.vue-notifyjs.notifications {
-  .alert {
-    z-index: 10000;
-  }
-  .list-move {
-    transition: transform 0.3s, opacity 0.4s;
-  }
-  .list-item {
-    display: inline-block;
-    margin-right: 10px;
-  }
-  .list-enter-active {
-    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
-  }
-  .list-leave-active {
-    transition: transform 1s ease-out, opacity 0.4s ease-out;
-  }
-
-  .list-enter {
-    opacity: 0;
-    transform: scale(1.1);
-  }
-  .list-leave-to {
-    opacity: 0;
-    transform: scale(1.2, 0.7);
-  }
-}
-</style>

src/components/BaseAlert.vue

@@ -0,0 +1,52 @@
+<template>
+  <fade-transition>
+    <div v-if="visible" class="alert" :class="[`alert-${type}`, { 'alert-with-icon': withIcon }]" role="alert">
+      <slot v-if="!dismissible"></slot>
+      <div v-else class="container">
+        <slot></slot>
+        <slot name="dismiss-icon">
+          <button type="button" class="close" aria-label="Close" @click="dismissAlert">
+                  <span aria-hidden="true">
+                    <i class="tim-icons icon-simple-remove"></i>
+                  </span>
+          </button>
+        </slot>
+      </div>
+    </div>
+  </fade-transition>
+</template>
+<script>
+  import { FadeTransition } from 'vue2-transitions';
+
+  export default {
+    name: 'alert',
+    components: {
+      FadeTransition
+    },
+    props: {
+      type: {
+        type: String,
+        default: 'default',
+        description: 'Alert type'
+      },
+      dismissible: {
+        type: Boolean,
+        default: false
+      },
+      withIcon: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        visible: true
+      }
+    },
+    methods: {
+      dismissAlert() {
+        this.visible = false;
+      }
+    }
+  }
+</script>

src/components/BaseButton.vue

@@ -22,7 +22,7 @@
 </template>
 <script>
 export default {
-  name: 'p-button',
+  name: 'base-button',
   props: {
     tag: {
       type: String,

src/components/BaseDropdown.vue

@@ -21,6 +21,7 @@
 </template>
 <script>
 export default {
+  name: 'base-dropdown',
   props: {
     tag: {
       type: String,

src/components/NotificationPlugin/Notification.vue

@@ -30,7 +30,9 @@ export default {
   components: {
     contentRender: {
       props: ['component'],
-      render: h => h(this.component)
+      render(h) {
+        return h(this.component)
+      }
     }
   },
   props: {
@@ -153,7 +155,8 @@ export default {
   z-index: 10000;
 
   &[data-notify='container'] {
-    width: 400px;
+    width: 480px;
+    cursor: pointer;
   }
 
   &.center {

src/components/index.js

@@ -1,8 +1,9 @@
 import FormGroupInput from "./Inputs/formGroupInput.vue";
 
-import DropDown from "./Dropdown.vue";
+import BaseDropdown from "./BaseDropdown.vue";
 import PaperTable from "./PaperTable.vue";
-import Button from "./Button";
+import BaseButton from "./BaseButton";
+import BaseAlert from "./BaseAlert";
 
 import Card from "./Cards/Card.vue";
 import ChartCard from "./Cards/ChartCard.vue";
@@ -10,25 +11,14 @@ import StatsCard from "./Cards/StatsCard.vue";
 
 import SidebarPlugin from "./SidebarPlugin/index";
 
-let components = {
-  FormGroupInput,
-  Card,
-  ChartCard,
-  StatsCard,
-  PaperTable,
-  DropDown,
-  SidebarPlugin
-};
-
-export default components;
-
 export {
   FormGroupInput,
   Card,
   ChartCard,
   StatsCard,
   PaperTable,
-  DropDown,
+  BaseDropdown,
-  Button,
+  BaseButton,
+  BaseAlert,
   SidebarPlugin
 };

src/directives/click-ouside.js

@@ -0,0 +1,15 @@
+export default {
+  bind: function (el, binding, vnode) {
+    el.clickOutsideEvent = function (event) {
+      // here I check that click was outside the el and his childrens
+      if (!(el == event.target || el.contains(event.target))) {
+        // and if it did, call method provided in attribute value
+        vnode.context[binding.expression](event);
+      }
+    };
+    document.body.addEventListener('click', el.clickOutsideEvent)
+  },
+  unbind: function (el) {
+    document.body.removeEventListener('click', el.clickOutsideEvent)
+  },
+}

src/layout/dashboard/ContentFooter.vue

@@ -8,17 +8,22 @@
           </li>
         </ul>
       </nav>
-      <div class="copyright d-flex flex-wrap">
+      <div class="copyright float-right">
-        &copy; Coded with
+        © {{year}} made with <i class="tim-icons icon-heart-2"></i> by
-        <i class="fa fa-heart heart"></i> by
+        <a href="https://github.com/cristijora" target="_blank"> Cristi Jora</a>&nbsp;&
-        <a href="https://github.com/cristijora" target="_blank"> &nbsp; Cristi Jora.</a>&nbsp;
+        <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
-        Designed by <a href="https://www.creative-tim.com/?ref=pdf-vuejs" target="_blank">&nbsp; Creative Tim.</a>
       </div>
     </div>
   </footer>
 </template>
 <script>
-export default {};
+export default {
+  data(){
+    return {
+      year: new Date().getFullYear()
+    }
+  }
+};
 </script>
 <style>
 </style>

src/main.js

@@ -3,8 +3,6 @@ import App from "./App";
 import router from "./router/index";
 
 import BlackDashboard from "./plugins/blackDashboard";
-import "vue-notifyjs/themes/default.css";
-
 Vue.use(BlackDashboard);
 
 /* eslint-disable no-new */

src/pages/Notifications.vue

@@ -1,94 +1,98 @@
 <template>
-  <card title="Notifications" sub-title="Custom Vue notifications plugin">
-    <div>
   <div class="row">
     <div class="col-md-6">
-          <h5>Notifications Style</h5>
+      <card>
-          <div class="alert alert-info">
+        <h4 slot="header">Notifications Style</h4>
+        <base-alert type="info">
           <span>This is a plain notification</span>
-          </div>
+        </base-alert>
-          <div class="alert alert-info">
+        <base-alert type="info" dismissible>
-            <button type="button" aria-hidden="true" class="close">×</button>
+          <span>This is a plain notification</span>
-            <span>This is a notification with close button.</span>
+        </base-alert>
-          </div>
+        <base-alert type="info" dismissible with-icon>
-          <div class="alert alert-info alert-with-icon" data-notify="container">
+          <span data-notify="icon" class="tim-icons icon-bell-55"></span>
-            <button type="button" aria-hidden="true" class="close">×</button>
-            <span data-notify="icon" class="ti-bell"></span>
           <span data-notify="message">This is a notification with close button and icon.</span>
-          </div>
+        </base-alert>
-          <div class="alert alert-info alert-with-icon" data-notify="container">
+        <base-alert type="info" dismissible with-icon>
-            <button type="button" aria-hidden="true" class="close">×</button>
+          <span data-notify="icon" class="tim-icons icon-bell-55"></span>
-            <span data-notify="icon" class="ti-pie-chart"></span>
           <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
-          </div>
+        </base-alert>
+      </card>
     </div>
     <div class="col-md-6">
-          <h5>Notification states</h5>
+      <card>
-          <div class="alert alert-info">
+        <h4 slot="header">Notifications states</h4>
-            <button type="button" aria-hidden="true" class="close">×</button>
+        <base-alert type="primary" dismissible>
-            <span>
+          <span><b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
-              <b> Info - </b> This is a regular notification made with ".alert-info"</span>
+        </base-alert>
+        <base-alert type="info" dismissible>
+          <span><b> Info - </b> This is a regular notification made with ".alert-info"</span>
+        </base-alert>
+        <base-alert type="success" dismissible>
+          <span><b> Success - </b> This is a regular notification made with ".alert-success"</span>
+        </base-alert>
+        <base-alert type="warning" dismissible>
+          <span><b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
+        </base-alert>
+        <base-alert type="danger" dismissible>
+          <span><b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
+        </base-alert>
+      </card>
     </div>
-          <div class="alert alert-success">
+    <div class="col-md-12">
-            <button type="button" aria-hidden="true" class="close">×</button>
+      <card>
-            <span>
-              <b> Success - </b> This is a regular notification made with ".alert-success"</span>
-          </div>
-          <div class="alert alert-warning">
-            <button type="button" aria-hidden="true" class="close">×</button>
-            <span>
-              <b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
-          </div>
-          <div class="alert alert-danger">
-            <button type="button" aria-hidden="true" class="close">×</button>
-            <span>
-              <b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
-          </div>
-        </div>
-      </div>
-
-      <br>
-      <br>
-
         <div class="places-buttons">
-        <div class="row d-flex justify-content-center">
+          <div class="row">
-          <div>
+            <div class="col-md-6 ml-auto mr-auto text-center">
-            <h5>Notifications Places
+              <h4 class="card-title">
+                Notifications Places
                 <p class="category">Click to view notifications</p>
-            </h5>
+              </h4>
             </div>
           </div>
-        <div class="row d-flex justify-content-center">
+          <div class="row">
-          <div class="col-md-3">
+            <div class="col-lg-8 ml-auto mr-auto">
-            <p-button type="primary" block @click="notifyVue('top', 'left')">Top Left</p-button>
+              <div class="row">
+                <div class="col-md-4">
+                  <base-button type="primary" block @click="notifyVue('top', 'left')">Top Left</base-button>
                 </div>
-          <div class="col-md-3">
+                <div class="col-md-4">
-            <p-button type="primary" block @click="notifyVue('top', 'center')">Top Center</p-button>
+                  <base-button type="primary" block @click="notifyVue('top', 'center')">Top Center</base-button>
                 </div>
-          <div class="col-md-3">
+                <div class="col-md-4">
-            <p-button type="primary" block @click="notifyVue('top', 'right')">Top Right</p-button>
+                  <base-button type="primary" block @click="notifyVue('top', 'right')">Top Right</base-button>
                 </div>
               </div>
-        <div class="row d-flex justify-content-center">
-          <div class="col-md-3">
-            <p-button type="primary" block @click="notifyVue('bottom', 'left')">Bottom Left</p-button>
             </div>
-          <div class="col-md-3">
-            <p-button type="primary" block @click="notifyVue('bottom', 'center')">Bottom Center</p-button>
           </div>
-          <div class="col-md-3">
+          <div class="row">
-            <p-button type="primary" block @click="notifyVue('bottom', 'right')">Bottom Right</p-button>
+            <div class="col-lg-8 ml-auto mr-auto">
+              <div class="row">
+                <div class="col-md-4">
+                  <base-button type="primary" block @click="notifyVue('bottom', 'left')">Bottom Left</base-button>
+                </div>
+                <div class="col-md-4">
+                  <base-button type="primary" block @click="notifyVue('bottom', 'center')">Bottom Center</base-button>
+                </div>
+                <div class="col-md-4">
+                  <base-button type="primary" block @click="notifyVue('bottom', 'right')">Bottom Right</base-button>
+                </div>
               </div>
-
             </div>
           </div>
         </div>
       </card>
+    </div>
+  </div>
 </template>
 <script>
   import NotificationTemplate from './Notifications/NotificationTemplate';
+  import { BaseAlert } from '@/components';
 
   export default {
+    components: {
+      BaseAlert
+    },
     data() {
       return {
         type: ["", "info", "success", "warning", "danger"],

src/pages/UserProfile/EditProfileForm.vue

@@ -92,11 +92,11 @@
           </div>
         </div>
         <div class="text-center">
-          <p-button type="info"
+          <base-button type="info"
                     round
                     @click.native.prevent="updateProfile">
             Update Profile
-          </p-button>
+          </base-button>
         </div>
         <div class="clearfix"></div>
       </form>

src/pages/UserProfile/MembersCard.vue

@@ -18,9 +18,9 @@
             </div>
 
             <div class="col-3">
-              <p-button type="success" outline icon>
+              <base-button type="success" outline icon>
                 <i class="fa fa-envelope"></i>
-              </p-button>
+              </base-button>
             </div>
           </div>
         </li>

src/plugins/blackDashboard.js

@@ -1,7 +1,5 @@
-import Notify from "vue-notifyjs";
-import "@/assets/css/nucleo-icons.css";
-import "@/assets/demo/demo.css";
 import SideBar from "@/components/SidebarPlugin";
+import Notify from "@/components/NotificationPlugin";
 import GlobalComponents from "./globalComponents";
 import GlobalDirectives from "./globalDirectives";
 import "es6-promise/auto";
@@ -9,6 +7,8 @@ import "es6-promise/auto";
 //css assets
 import "bootstrap/dist/css/bootstrap.css";
 import "@/assets/sass/black-dashboard.scss";
+import "@/assets/css/nucleo-icons.css";
+import "@/assets/demo/demo.css";
 
 export default {
   install(Vue) {

src/plugins/globalComponents.js

@@ -1,4 +1,4 @@
-import { FormGroupInput, Card, DropDown, Button } from "../components/index";
+import { FormGroupInput, Card, BaseDropdown, BaseButton } from "../components/index";
 /**
  * You can register global components here and use them as a plugin in your main Vue instance
  */
@@ -6,9 +6,9 @@ import { FormGroupInput, Card, DropDown, Button } from "../components/index";
 const GlobalComponents = {
   install(Vue) {
     Vue.component("fg-input", FormGroupInput);
-    Vue.component("drop-down", DropDown);
+    Vue.component(Card.name, Card);
-    Vue.component("card", Card);
+    Vue.component(BaseDropdown.name, BaseDropdown);
-    Vue.component("p-button", Button);
+    Vue.component(BaseButton.name, BaseButton);
   }
 };
 

src/plugins/globalDirectives.js

@@ -1,4 +1,5 @@
-import { directive as vClickOutside } from "vue-clickaway";
+import clickOutside from '../directives/click-ouside.js';
+
 
 /**
  * You can register global directives here and use them as a plugin in your main Vue instance
@@ -6,8 +7,8 @@ import { directive as vClickOutside } from "vue-clickaway";
 
 const GlobalDirectives = {
   install (Vue) {
-    Vue.directive("click-outside", vClickOutside);
+    Vue.directive('click-outside', clickOutside);
+  }
 }
-};
 
-export default GlobalDirectives;
+export default GlobalDirectives