feat(vuestic-popover): implement vuestic popover element

src/components/ui/notifications/Notifications.vue

@@ -24,20 +24,14 @@
                     <label class="control-label" for="tooltip-icon">Tooltip Icon</label><i class="bar"></i>
                   </div>
                 </div>
-                <v-popover popover-class="vuestic-tooltip" placement="right">
-                  <button class="btn btn-sm btn-primary">
+                <vuestic-popover popover-class="vuestic-tooltip" placement="right">
+                  <button slot="trigger" class="btn btn-sm btn-primary">
                     Show tooltip
                   </button>
-                  <template slot="popover">
-                    <div class="popover-icon">
-                      <i class="fa fa-image"></i>
-                    </div>
-                    <div class="popover-content">
-                      <div class="popover-header">Hey!</div>
-                      <div class="popover-body">This popover is amazing</div>
-                    </div>
-                  </template>
-                </v-popover>
+                  <i slot="icon" class="fa fa-image"></i>
+                  <span slot="header">Hey!</span>
+                  <span slot="body">This popover is amazing</span>
+                </vuestic-popover>
               </fieldset>
             </div>
             <div class="col-md-6">

src/components/vuestic-components/vuestic-components-plugin.js

@@ -18,6 +18,7 @@ import Widget from 'src/components/vuestic-components/vuestic-widget/VuesticWidg
 import Wizard from 'src/components/vuestic-components/vuestic-wizard/VuesticWizard.vue'
 import MediumEditor from 'src/components/vuestic-components/vuestic-medium-editor/VuesticMediumEditor.vue'
 import Tooltip from 'src/components/vuestic-components/vuestic-tooltip/VuesticTooltip.vue'
+import Popover from 'src/components/vuestic-components/vuestic-popover/VuesticPopover.vue'
 
 const VuesticComponentsPlugin = {
   install (Vue, options) {
@@ -41,6 +42,7 @@ const VuesticComponentsPlugin = {
     Vue.component(Wizard.name, Wizard)
     Vue.component(MediumEditor.name, MediumEditor)
     Vue.component(Tooltip.name, Tooltip)
+    Vue.component(Popover.name, Popover)
   }
 }
 

src/components/vuestic-components/vuestic-popover/VuesticPopover.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-popover
+    :popover-class="popoverClass"
+    :open="open"
+    :disabled="disabled"
+    :placement="placement"
+    :auto-hide="autoHide"
+    >
+    <slot name="trigger"></slot>
+    <template slot="popover">
+      <div class="popover-icon" v-if="icon">
+        <slot name="icon"></slot>
+      </div>
+      <div class="popover-content">
+        <div class="popover-header">
+          <slot name="header"></slot>
+        </div>
+        <div class="popover-body">
+          <slot name="body"></slot>
+        </div>
+      </div>
+    </template>
+  </v-popover>
+</template>
+
+<script>
+  import { VPopover } from 'v-tooltip'
+
+  export default {
+    name: 'vuestic-popover',
+
+    components: { VPopover },
+
+    props: {
+      open: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      placement: {
+        type: String,
+        default: 'auto'
+      },
+      popoverClass: {
+        type: [String, Array],
+        default: 'vuestic-tooltip'
+      },
+      autoHide: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    computed: {
+      icon () {
+        return this.$slots.icon
+      }
+    }
+  }
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/main.js

@@ -2,7 +2,6 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import VeeValidate from 'vee-validate'
-import VTooltip from 'v-tooltip'
 import App from './App'
 import store from './store'
 import router from './router'
@@ -11,7 +10,6 @@ import VuesticPlugin from 'src/components/vuestic-components/vuestic-components-
 import './i18n'
 
 Vue.use(VuesticPlugin)
-Vue.use(VTooltip)
 
 // NOTE: workaround for VeeValidate + vuetable-2
 Vue.use(VeeValidate, {fieldsBagName: 'formFields'})