Feat: Added basic CTooltip and CPopover directives (removed components)

Author: woothu

src/components/Tooltip/CTooltip.js

@@ -25,5 +25,5 @@ export * from './Sidebar'
 export * from './Spinner'
 export * from './Switch'
 export * from './Table'
-export * from './Tooltip'
+export * from './Tabs'
 export * from './Widgets'

src/components/Tooltip/index.js

@@ -0,0 +1,51 @@
+import Tooltip from 'tooltip.js'
+export default {
+  name: 'c-popover',
+  inserted (el, binding) {
+    binding.def._tooltip = new Tooltip(el, binding.def.getTooltipConfig(binding))
+
+    if (binding.modifiers.active) {
+      binding.def._tooltip.show()
+    }
+    // console.log(binding)
+  },
+  // update (el, binding) {
+  //   console.log(binding.value.counter)
+  //   console.log(binding.def)
+  // },
+  // componentUpdated () {
+  //   console.log('componentUpdated')
+  // },
+  unbind (el, binding) {
+    let tooltip = binding.def._tooltip
+    if (tooltip) {
+      tooltip.dispose()
+      tooltip = null
+    }
+  },
+  getTooltipConfig (binding) {
+    const props = binding.value
+    return {
+      title: props.content,
+      trigger: String(Object.keys(binding.modifiers)).replace(',',' '),
+      // trigger: 'hover,focus',
+      html: true,
+      placement: props.placement || 'right',
+      delay: props.delay || 0,
+      offset: props.offset || 0,
+      arrowSelector: '.arrow',
+      innerSelector: '.popover-body',//passed by extension
+      template: binding.def.getTemplate(props.header),//passed by extension
+      boundariesElement: document.getElementById(props.boundaries) || props.boundaries,
+      container: props.appendToBody ? document.body : false,
+      popperOptions: props.popperOptions
+    }
+  },
+  getTemplate (header) {
+    return `<div class="popover bs-popover-auto fade show" role="tooltip">
+              <div class="arrow"></div>
+              <h3 class="popover-header">${header || 'header'}</h3>
+              <div class="popover-body"></div>
+            </div>`
+  }
+}

src/components/index.js

@@ -0,0 +1,42 @@
+import Tooltip from 'tooltip.js'
+export default {
+  name: 'c-tooltip',
+  inserted (el, binding) {
+    binding.def._tooltip = new Tooltip(el, binding.def.getTooltipConfig(binding))
+    if (binding.modifiers.active) {
+      binding.def._tooltip.show()
+    }
+  },
+  unbind (el, binding) {
+    let tooltip = binding.def._tooltip
+    if (tooltip) {
+      tooltip.dispose()
+      tooltip = null
+    }
+  },
+  getTooltipConfig (binding) {
+    const props = binding.value
+    const title = typeof binding.value === 'string' ?
+                  binding.value : binding.value.content
+    return {
+      title,
+      trigger: String(Object.keys(binding.modifiers)).replace(',',' '),
+      html: true,
+      placement: props.placement || 'top',
+      delay: props.delay || 0,
+      offset: props.offset || 0,
+      arrowSelector: '.arrow',
+      innerSelector: '.tooltip-inner',//passed by extension
+      template: binding.def.getTemplate(),//passed by extension
+      boundariesElement: document.getElementById(props.boundaries) || props.boundaries,
+      container: props.appendToBody ? document.body : false,
+      popperOptions: props.popperOptions
+    }
+  },
+  getTemplate (title) {
+    return `<div class="tooltip bs-tooltip-auto fade show" role="tooltip">
+              <div class="arrow"></div>
+              <div class="tooltip-inner"></div>
+            </div>`
+  }
+}

src/directives/CPopover.js

@@ -0,0 +1,7 @@
+import CPopover from './CPopover'
+import CTooltip from './CTooltip'
+
+export{
+  CPopover,
+  CTooltip
+}

src/directives/CTooltip.js

@@ -1,9 +1,14 @@
 import * as Components from './components'
+import * as Directives from './directives'
 
 const CoreuiVue = {
   install(Vue) {
-    for (let plugin in Components)
+    for (let plugin in Components) {
       Vue.component(plugin, Components[plugin])
+    }
+    for (let directive in Directives) {
+      Vue.directive(directive, Directives[directive])
+    }
   }
 }