vue-tippy 4.12.0 → 4.15.0

package/dist/vue-tippy.umd.js

@@ -4799,7 +4799,21 @@
 
   //
   var script = {
-    props: ["to", "toSelector", "toElement", "content", "enabled", "visible", "triggerTarget"],
+    props: {
+      to: undefined,
+      toSelector: undefined,
+      toElement: undefined,
+      content: undefined,
+      enabled: undefined,
+      visible: undefined,
+      triggerTarget: undefined,
+      tag: {
+        type: String,
+        default: "div"
+      },
+      triggerTag: String,
+      contentTag: String
+    },
     data: function data() {
       return {
         tip: null,
@@ -5079,11 +5093,24 @@
 
     var _c = _vm._self._c || _h;
 
-    return _c("div", [_c("div", {
-      ref: "trigger"
-    }, [_vm._t("trigger")], 2), _vm._v(" "), _c("div", {
-      ref: "content"
-    }, [_vm._t("default")], 2)]);
+    return _c(_vm.tag, {
+      tag: "component",
+      attrs: {
+        "data-tippy-component": ""
+      }
+    }, [_c(_vm.triggerTag || _vm.tag, {
+      ref: "trigger",
+      tag: "component",
+      attrs: {
+        "data-tippy-component-trigger": ""
+      }
+    }, [_vm._t("trigger")], 2), _vm._v(" "), _c(_vm.contentTag || _vm.tag, {
+      ref: "content",
+      tag: "component",
+      attrs: {
+        "data-tippy-component-content": ""
+      }
+    }, [_vm._t("default")], 2)], 1);
   };
 
   var __vue_staticRenderFns__ = [];
@@ -5118,9 +5145,8 @@
 
       function createTippy(el, binding, vnode) {
         var handlers = vnode.data && vnode.data.on || vnode.componentOptions && vnode.componentOptions.listeners;
-        var opts = typeof binding.value === 'string' ? {
-          content: binding.value
-        } : binding.value || {};
+        el.setAttribute('data-tippy-directive', '');
+        var opts = deriveOpts(binding);
         var modifiers = Object.keys(binding.modifiers || {});
         var placement = modifiers.find(function (modifier) {
           return modifier !== 'arrow';
@@ -5211,7 +5237,7 @@
         },
         componentUpdated: function componentUpdated(el, binding, vnode) {
           if (el._tippy) {
-            var opts = binding.value || {};
+            var opts = deriveOpts(binding);
 
             if (el.getAttribute('title') && !opts.content) {
               opts.content = el.getAttribute('title');
@@ -5226,6 +5252,12 @@
           }
         }
       });
+
+      function deriveOpts(binding) {
+        return typeof binding.value === 'string' ? {
+          content: binding.value
+        } : binding.value || {};
+      }
     }
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tippy",
-  "version": "4.12.0",
+  "version": "4.15.0",
   "description": "Directive and Component wrapper for Tippy.js",
   "author": "Georges KABBOUCHI <georges.kabbouchi@gmail.com>",
   "files": [

package/src/components/Tippy.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <div ref="trigger">
+  <component :is="tag" data-tippy-component>
+    <component :is="triggerTag || tag" ref="trigger" data-tippy-component-trigger>
       <slot name="trigger"></slot>
-    </div>
+    </component>
 
-    <div ref="content">
+    <component :is="contentTag || tag" ref="content" data-tippy-component-content>
       <slot></slot>
-    </div>
-  </div>
+    </component>
+  </component>
 </template>
 
 <script>
@@ -15,15 +15,21 @@ import tippy from 'tippy.js'
 import humps from "humps";
 import defaultProps, { booleanProps } from "../props";
 export default {
-  props: [
-    "to",
-    "toSelector",
-    "toElement",
-    "content",
-    "enabled",
-    "visible",
-    "triggerTarget"
-  ],
+  props: {
+    to: undefined,
+    toSelector: undefined,
+    toElement: undefined,
+    content: undefined,
+    enabled: undefined,
+    visible: undefined,
+    triggerTarget: undefined,
+    tag: {
+      type: String,
+      default: "div"
+    },
+    triggerTag: String,
+    contentTag: String
+  },
   data() {
     return {
       tip: null,

package/src/components/TippyNoStyles.vue

@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <div ref="trigger">
+  <component :is="tag" data-tippy-component>
+    <component :is="triggerTag || tag" ref="trigger">
       <slot name="trigger"></slot>
-    </div>
+    </component>
 
-    <div ref="content">
+    <component :is="contentTag || tag" ref="content">
       <slot></slot>
-    </div>
-  </div>
+    </component>
+  </component>
 </template>
 
 <script>
@@ -15,15 +15,21 @@ import tippy from 'tippy.js/esm/index'
 import humps from "humps";
 import defaultProps, { booleanProps } from "../props";
 export default {
-  props: [
-    "to",
-    "toSelector",
-    "toElement",
-    "content",
-    "enabled",
-    "visible",
-    "triggerTarget"
-  ],
+  props: {
+    to: undefined,
+    toSelector: undefined,
+    toElement: undefined,
+    content: undefined,
+    enabled: undefined,
+    visible: undefined,
+    triggerTarget: undefined,
+    tag: {
+      type: String,
+      default: "div"
+    },
+    triggerTag: String,
+    contentTag: String
+  },
   data() {
     return {
       tip: null,

package/src/index.js

@@ -14,7 +14,9 @@ const plugin = {
       const handlers = (vnode.data && vnode.data.on) ||
         (vnode.componentOptions && vnode.componentOptions.listeners)
 
-      let opts = typeof binding.value === 'string' ? { content: binding.value } : binding.value || {}
+      el.setAttribute('data-tippy-directive', '')
+
+      let opts = deriveOpts(binding)
 
       const modifiers = Object.keys(binding.modifiers || {})
       const placement = modifiers.find(modifier => modifier !== 'arrow')
@@ -92,7 +94,7 @@ const plugin = {
       },
       componentUpdated (el, binding, vnode) {
         if (el._tippy) {
-          const opts = binding.value || {}
+          const opts = deriveOpts(binding)
 
           if (el.getAttribute('title') && !opts.content) {
             opts.content = el.getAttribute('title')
@@ -107,6 +109,10 @@ const plugin = {
         }
       },
     })
+
+    function deriveOpts (binding) {
+      return typeof binding.value === 'string' ? { content: binding.value } : binding.value || {}
+    }
   },
 }