chore: small changes, documentation for CTooltip and CPopover directives

Author: woothu

src/directives/CPopover.js

@@ -1,21 +1,14 @@
 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)
+  tooltip: null,
+  inserted (el, binding, vnode) {
+    const tooltip = new Tooltip(el, binding.def.getTooltipConfig(binding))
+    binding.def._tooltip = tooltip
+    if (binding.value.active)
+      tooltip.show()
   },
-  // 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) {
@@ -25,11 +18,14 @@ export default {
   },
   getTooltipConfig (binding) {
     const props = binding.value
+    const title = props.content || 'content'
+    const modifiersTriggers = String(Object.keys(binding.modifiers)).replace(',',' ')
+    const closeOnClickOutside = props.closeOnClickOutside === false ? false : true
+    const html = props.html === false ? false : true
     return {
-      title: props.content,
-      trigger: String(Object.keys(binding.modifiers)).replace(',',' '),
-      // trigger: 'hover,focus',
-      html: true,
+      title,
+      trigger: modifiersTriggers || props.trigger || 'hover',
+      html,
       placement: props.placement || 'right',
       delay: props.delay || 0,
       offset: props.offset || 0,
@@ -38,6 +34,7 @@ export default {
       template: binding.def.getTemplate(props.header),//passed by extension
       boundariesElement: document.getElementById(props.boundaries) || props.boundaries,
       container: props.appendToBody ? document.body : false,
+      closeOnClickOutside,
       popperOptions: props.popperOptions
     }
   },

src/directives/CTooltip.js

@@ -3,9 +3,8 @@ export default {
   name: 'c-tooltip',
   inserted (el, binding) {
     binding.def._tooltip = new Tooltip(el, binding.def.getTooltipConfig(binding))
-    if (binding.modifiers.active) {
+    if (binding.value.active)
       binding.def._tooltip.show()
-    }
   },
   unbind (el, binding) {
     let tooltip = binding.def._tooltip
@@ -16,20 +15,22 @@ export default {
   },
   getTooltipConfig (binding) {
     const props = binding.value
-    const title = typeof binding.value === 'string' ?
-                  binding.value : binding.value.content
+    const title = props.content || props
+    const modifiersTriggers = String(Object.keys(binding.modifiers)).replace(',',' ')
+    const closeOnClickOutside = props.closeOnClickOutside === false ? false : true
     return {
       title,
-      trigger: String(Object.keys(binding.modifiers)).replace(',',' '),
+      trigger: modifiersTriggers || props.trigger || 'hover',
       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
+      innerSelector: '.tooltip-inner',
+      template: binding.def.getTemplate(),
       boundariesElement: document.getElementById(props.boundaries) || props.boundaries,
       container: props.appendToBody ? document.body : false,
+      closeOnClickOutside,
       popperOptions: props.popperOptions
     }
   },

src/directives/docs/CPopover.md

@@ -0,0 +1,42 @@
+### CPopover directive
+
+CPopover is directive which display Popover on element built on top of tooltip.js (popper.js) library.
+
+All directive props are passed by object in directive value. (you can pass trigger prop as modifier also).
+
+prop | default | valid values
+--- | --- | ---
+header  | `'header'` | HtmlString
+content  | `'content'` | HtmlString
+trigger | `'hover'` | String / separated by space e.g. 'hover click'
+html | `true` | Boolean
+placement   | `'right'` | String
+delay    | `0` | Number
+offset  | `0` | Number
+boundariesElement  | `'scrollParent'` | 'scrollParent', 'window', 'viewport' / HTMLELement
+appendToBody  | `false`  | Boolean
+closeOnClickOutside  | `false`  | Boolean
+popperOptions | `null`  | Object
+
+Example usage
+```html
+<CButton
+  v-c-popover="{
+    header: 'Popover!',
+    trigger: 'click hover',
+    content: 'I start <strong>open</strong>'
+  }"
+  text="Hover me"
+/>
+```
+
+Example setting trigger prop by modifiers
+```html
+<CButton
+  v-c-popover.click.hover="{
+    header: 'Popover!',
+    content: 'I start <strong>open</strong>'
+  }"
+  text="Hover me"
+/>
+```

src/directives/docs/CTooltip.md

@@ -0,0 +1,37 @@
+### CTooltip directive
+
+CTooltip is directive, which display tooltip over element, built on top of tooltip.js (popper.js) library.
+
+All directive props are passed by object or string in directive value. (you can pass trigger prop as modifier also).
+
+prop | default | valid values
+--- | --- | ---
+content  | `'content'` | HtmlString
+trigger | `'hover'` | String / separated by space e.g. 'hover click'
+html | `true` | Boolean
+placement   | `'top'` | String
+delay    | `0` | Number
+offset  | `0` | Number
+boundariesElement  | `'scrollParent'` | 'scrollParent', 'window', 'viewport' / HTMLELement
+appendToBody  | `false`  | Boolean
+closeOnClickOutside  | `false`  | Boolean
+popperOptions | `null`  | Object
+
+Example usage
+```html
+<CButton
+  v-c-tooltip="I am a tooltip!"
+  text="Hover me"
+/>
+```
+
+Example setting trigger prop by modifiers
+```html
+<CButton
+  v-c-hover.click="{
+    content: 'I start <strong>open</strong>'
+    active: true
+  }"
+  text="Hover me"
+/>
+```