vue-tippy 6.0.0-alpha.56 → 6.0.0-alpha.59

package/dist/vue-tippy.esm-browser.js

@@ -1,9 +1,9 @@
 /*!
-  * vue-tippy v6.0.0-alpha.56
+  * vue-tippy v6.0.0-alpha.59
   * (c) 2022 
   * @license MIT
   */
-import { getCurrentInstance, ref, onMounted, onUnmounted, isRef, isReactive, watch, isVNode, render as render$1, h, defineComponent, nextTick, unref } from 'vue';
+import { getCurrentInstance, ref, onMounted, onUnmounted, isRef, isReactive, watch, isVNode, render as render$1, h, defineComponent, nextTick, unref, reactive } from 'vue';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -4150,7 +4150,7 @@ function useTippyComponent(opts = {}, children) {
         instance,
         TippyComponent: h(TippyComponent, {
             ...opts,
-            onVnodeMounted: vnode => {
+            onVnodeMounted: (vnode) => {
                 //@ts-ignore
                 instance.value = vnode.component.ctx;
             },
@@ -4184,58 +4184,69 @@ function useSingleton(instances, optionalProps) {
     };
 }
 
-// const pluginProps = [
-//   'animateFill',
-//   'followCursor',
-//   'inlinePositioning',
-//   'sticky',
-// ]
-const booleanProps = [
-    'a11y',
-    'allowHTML',
-    'arrow',
-    'flip',
-    'flipOnUpdate',
-    'hideOnClick',
-    'ignoreAttributes',
-    'inertia',
-    'interactive',
-    'lazy',
-    'multiple',
-    'showOnInit',
-    'touch',
-    'touchHold',
-];
-let props = {};
-Object.keys(tippy.defaultProps).forEach((prop) => {
-    if (booleanProps.includes(prop)) {
-        props[prop] = {
-            type: prop === 'arrow' ? [String, Boolean, ...typeof Element !== 'undefined' ? [SVGElement, DocumentFragment] : [Function]] : Boolean,
-            default: function () {
-                return tippy.defaultProps[prop];
-            },
-        };
-    }
-    else {
-        props[prop] = {
-            default: function () {
-                return tippy.defaultProps[prop];
-            },
-        };
-    }
-});
-props['to'] = {};
-props['tag'] = {
-    default: 'span'
-};
-props['contentTag'] = {
-    default: 'span'
-};
-props['contentClass'] = {
-    default: null
-};
 const TippyComponent = defineComponent({
-    props,
+    props: {
+        to: {
+            type: [String, Element],
+        },
+        tag: {
+            type: String,
+            default: 'span'
+        },
+        contentTag: {
+            type: String,
+            default: 'span'
+        },
+        contentClass: {
+            type: String,
+            default: null
+        },
+        appendTo: { default: () => tippy.defaultProps['appendTo'] },
+        aria: { default: () => tippy.defaultProps['aria'] },
+        delay: { default: () => tippy.defaultProps['delay'] },
+        duration: { default: () => tippy.defaultProps['duration'] },
+        getReferenceClientRect: { default: () => tippy.defaultProps['getReferenceClientRect'] },
+        hideOnClick: { default: () => tippy.defaultProps['hideOnClick'] },
+        ignoreAttributes: { default: () => tippy.defaultProps['ignoreAttributes'] },
+        interactive: { default: () => tippy.defaultProps['interactive'] },
+        interactiveBorder: { default: () => tippy.defaultProps['interactiveBorder'] },
+        interactiveDebounce: { default: () => tippy.defaultProps['interactiveDebounce'] },
+        moveTransition: { default: () => tippy.defaultProps['moveTransition'] },
+        offset: { default: () => tippy.defaultProps['offset'] },
+        onAfterUpdate: { default: () => tippy.defaultProps['onAfterUpdate'] },
+        onBeforeUpdate: { default: () => tippy.defaultProps['onBeforeUpdate'] },
+        onCreate: { default: () => tippy.defaultProps['onCreate'] },
+        onDestroy: { default: () => tippy.defaultProps['onDestroy'] },
+        onHidden: { default: () => tippy.defaultProps['onHidden'] },
+        onHide: { default: () => tippy.defaultProps['onHide'] },
+        onMount: { default: () => tippy.defaultProps['onMount'] },
+        onShow: { default: () => tippy.defaultProps['onShow'] },
+        onShown: { default: () => tippy.defaultProps['onShown'] },
+        onTrigger: { default: () => tippy.defaultProps['onTrigger'] },
+        onUntrigger: { default: () => tippy.defaultProps['onUntrigger'] },
+        onClickOutside: { default: () => tippy.defaultProps['onClickOutside'] },
+        placement: { default: () => tippy.defaultProps['placement'] },
+        plugins: { default: () => tippy.defaultProps['plugins'] },
+        popperOptions: { default: () => tippy.defaultProps['popperOptions'] },
+        render: { default: () => tippy.defaultProps['render'] },
+        showOnCreate: { default: () => tippy.defaultProps['showOnCreate'] },
+        touch: { default: () => tippy.defaultProps['touch'] },
+        trigger: { default: () => tippy.defaultProps['trigger'] },
+        triggerTarget: { default: () => tippy.defaultProps['triggerTarget'] },
+        animateFill: { default: () => tippy.defaultProps['animateFill'] },
+        followCursor: { default: () => tippy.defaultProps['followCursor'] },
+        inlinePositioning: { default: () => tippy.defaultProps['inlinePositioning'] },
+        sticky: { default: () => tippy.defaultProps['sticky'] },
+        allowHTML: { default: () => tippy.defaultProps['allowHTML'] },
+        animation: { default: () => tippy.defaultProps['animation'] },
+        arrow: { default: () => tippy.defaultProps['arrow'] },
+        content: { default: () => tippy.defaultProps['content'] },
+        inertia: { default: () => tippy.defaultProps['inertia'] },
+        maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
+        role: { default: () => tippy.defaultProps['role'] },
+        theme: { default: () => tippy.defaultProps['theme'] },
+        zIndex: { default: () => tippy.defaultProps['zIndex'] }
+    },
     emits: ['state'],
     setup(props, { slots, emit, expose }) {
         const elem = ref();
@@ -4271,43 +4282,33 @@ const TippyComponent = defineComponent({
         watch(tippy.state, () => {
             emit('state', unref(tippy.state));
         }, { immediate: true, deep: true });
-        watch(props, () => {
+        watch(() => props, () => {
             tippy.setProps(getOptions());
             if (slots.content)
                 tippy.setContent(() => contentElem.value);
         });
-        let exposed = {
+        let exposed = reactive({
             elem,
             contentElem,
             mounted,
             ...tippy
-        };
+        });
         expose(exposed);
         return () => {
-            let exposedUnref = {
-                elem: elem.value,
-                contentElem: contentElem.value,
-                mounted: mounted.value,
-                ...Object.keys(tippy).reduce((acc, key) => {
-                    //@ts-ignore
-                    acc[key] = unref(tippy[key]);
-                    return acc;
-                }, {})
-            };
-            const slot = slots.default ? slots.default(exposedUnref) : [];
+            const slot = slots.default ? slots.default(exposed) : [];
             return h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
                 slot,
                 h(props.contentTag, {
                     ref: contentElem,
                     style: { display: mounted.value ? 'inherit' : 'none' },
                     class: props.contentClass
-                }, slots.content(exposedUnref)),
+                }, slots.content(exposed)),
             ] : slot);
         };
     },
 });
 
-const booleanProps$1 = [
+const booleanProps = [
     'a11y',
     'allowHTML',
     'arrow',
@@ -4323,10 +4324,10 @@ const booleanProps$1 = [
     'touch',
     'touchHold',
 ];
-let props$1 = {};
+let props = {};
 Object.keys(tippy.defaultProps).forEach((prop) => {
-    if (booleanProps$1.includes(prop)) {
-        props$1[prop] = {
+    if (booleanProps.includes(prop)) {
+        props[prop] = {
             type: Boolean,
             default: function () {
                 return tippy.defaultProps[prop];
@@ -4334,7 +4335,7 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
         };
     }
     else {
-        props$1[prop] = {
+        props[prop] = {
             default: function () {
                 return tippy.defaultProps[prop];
             },
@@ -4342,7 +4343,7 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
     }
 });
 const TippySingleton = defineComponent({
-    props: props$1,
+    props,
     setup(props) {
         const instances = ref([]);
         const { singleton } = useSingleton(instances, props);

package/dist/vue-tippy.iife.js

@@ -1,5 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.56
+  * vue-tippy v6.0.0-alpha.59
   * (c) 2022 
   * @license MIT
   */
@@ -4467,7 +4467,7 @@ var VueTippy = (function (exports, vue) {
           instance,
           TippyComponent: vue.h(TippyComponent, {
               ...opts,
-              onVnodeMounted: vnode => {
+              onVnodeMounted: (vnode) => {
                   //@ts-ignore
                   instance.value = vnode.component.ctx;
               },
@@ -4501,58 +4501,69 @@ var VueTippy = (function (exports, vue) {
       };
   }
 
-  // const pluginProps = [
-  //   'animateFill',
-  //   'followCursor',
-  //   'inlinePositioning',
-  //   'sticky',
-  // ]
-  const booleanProps = [
-      'a11y',
-      'allowHTML',
-      'arrow',
-      'flip',
-      'flipOnUpdate',
-      'hideOnClick',
-      'ignoreAttributes',
-      'inertia',
-      'interactive',
-      'lazy',
-      'multiple',
-      'showOnInit',
-      'touch',
-      'touchHold',
-  ];
-  let props = {};
-  Object.keys(tippy.defaultProps).forEach((prop) => {
-      if (booleanProps.includes(prop)) {
-          props[prop] = {
-              type: prop === 'arrow' ? [String, Boolean, ...typeof Element !== 'undefined' ? [SVGElement, DocumentFragment] : [Function]] : Boolean,
-              default: function () {
-                  return tippy.defaultProps[prop];
-              },
-          };
-      }
-      else {
-          props[prop] = {
-              default: function () {
-                  return tippy.defaultProps[prop];
-              },
-          };
-      }
-  });
-  props['to'] = {};
-  props['tag'] = {
-      default: 'span'
-  };
-  props['contentTag'] = {
-      default: 'span'
-  };
-  props['contentClass'] = {
-      default: null
-  };
   const TippyComponent = vue.defineComponent({
-      props,
+      props: {
+          to: {
+              type: [String, Element],
+          },
+          tag: {
+              type: String,
+              default: 'span'
+          },
+          contentTag: {
+              type: String,
+              default: 'span'
+          },
+          contentClass: {
+              type: String,
+              default: null
+          },
+          appendTo: { default: () => tippy.defaultProps['appendTo'] },
+          aria: { default: () => tippy.defaultProps['aria'] },
+          delay: { default: () => tippy.defaultProps['delay'] },
+          duration: { default: () => tippy.defaultProps['duration'] },
+          getReferenceClientRect: { default: () => tippy.defaultProps['getReferenceClientRect'] },
+          hideOnClick: { default: () => tippy.defaultProps['hideOnClick'] },
+          ignoreAttributes: { default: () => tippy.defaultProps['ignoreAttributes'] },
+          interactive: { default: () => tippy.defaultProps['interactive'] },
+          interactiveBorder: { default: () => tippy.defaultProps['interactiveBorder'] },
+          interactiveDebounce: { default: () => tippy.defaultProps['interactiveDebounce'] },
+          moveTransition: { default: () => tippy.defaultProps['moveTransition'] },
+          offset: { default: () => tippy.defaultProps['offset'] },
+          onAfterUpdate: { default: () => tippy.defaultProps['onAfterUpdate'] },
+          onBeforeUpdate: { default: () => tippy.defaultProps['onBeforeUpdate'] },
+          onCreate: { default: () => tippy.defaultProps['onCreate'] },
+          onDestroy: { default: () => tippy.defaultProps['onDestroy'] },
+          onHidden: { default: () => tippy.defaultProps['onHidden'] },
+          onHide: { default: () => tippy.defaultProps['onHide'] },
+          onMount: { default: () => tippy.defaultProps['onMount'] },
+          onShow: { default: () => tippy.defaultProps['onShow'] },
+          onShown: { default: () => tippy.defaultProps['onShown'] },
+          onTrigger: { default: () => tippy.defaultProps['onTrigger'] },
+          onUntrigger: { default: () => tippy.defaultProps['onUntrigger'] },
+          onClickOutside: { default: () => tippy.defaultProps['onClickOutside'] },
+          placement: { default: () => tippy.defaultProps['placement'] },
+          plugins: { default: () => tippy.defaultProps['plugins'] },
+          popperOptions: { default: () => tippy.defaultProps['popperOptions'] },
+          render: { default: () => tippy.defaultProps['render'] },
+          showOnCreate: { default: () => tippy.defaultProps['showOnCreate'] },
+          touch: { default: () => tippy.defaultProps['touch'] },
+          trigger: { default: () => tippy.defaultProps['trigger'] },
+          triggerTarget: { default: () => tippy.defaultProps['triggerTarget'] },
+          animateFill: { default: () => tippy.defaultProps['animateFill'] },
+          followCursor: { default: () => tippy.defaultProps['followCursor'] },
+          inlinePositioning: { default: () => tippy.defaultProps['inlinePositioning'] },
+          sticky: { default: () => tippy.defaultProps['sticky'] },
+          allowHTML: { default: () => tippy.defaultProps['allowHTML'] },
+          animation: { default: () => tippy.defaultProps['animation'] },
+          arrow: { default: () => tippy.defaultProps['arrow'] },
+          content: { default: () => tippy.defaultProps['content'] },
+          inertia: { default: () => tippy.defaultProps['inertia'] },
+          maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
+          role: { default: () => tippy.defaultProps['role'] },
+          theme: { default: () => tippy.defaultProps['theme'] },
+          zIndex: { default: () => tippy.defaultProps['zIndex'] }
+      },
       emits: ['state'],
       setup(props, { slots, emit, expose }) {
           const elem = vue.ref();
@@ -4588,43 +4599,33 @@ var VueTippy = (function (exports, vue) {
           vue.watch(tippy.state, () => {
               emit('state', vue.unref(tippy.state));
           }, { immediate: true, deep: true });
-          vue.watch(props, () => {
+          vue.watch(() => props, () => {
               tippy.setProps(getOptions());
               if (slots.content)
                   tippy.setContent(() => contentElem.value);
           });
-          let exposed = {
+          let exposed = vue.reactive({
               elem,
               contentElem,
               mounted,
               ...tippy
-          };
+          });
           expose(exposed);
           return () => {
-              let exposedUnref = {
-                  elem: elem.value,
-                  contentElem: contentElem.value,
-                  mounted: mounted.value,
-                  ...Object.keys(tippy).reduce((acc, key) => {
-                      //@ts-ignore
-                      acc[key] = vue.unref(tippy[key]);
-                      return acc;
-                  }, {})
-              };
-              const slot = slots.default ? slots.default(exposedUnref) : [];
+              const slot = slots.default ? slots.default(exposed) : [];
               return vue.h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
                   slot,
                   vue.h(props.contentTag, {
                       ref: contentElem,
                       style: { display: mounted.value ? 'inherit' : 'none' },
                       class: props.contentClass
-                  }, slots.content(exposedUnref)),
+                  }, slots.content(exposed)),
               ] : slot);
           };
       },
   });
 
-  const booleanProps$1 = [
+  const booleanProps = [
       'a11y',
       'allowHTML',
       'arrow',
@@ -4640,10 +4641,10 @@ var VueTippy = (function (exports, vue) {
       'touch',
       'touchHold',
   ];
-  let props$1 = {};
+  let props = {};
   Object.keys(tippy.defaultProps).forEach((prop) => {
-      if (booleanProps$1.includes(prop)) {
-          props$1[prop] = {
+      if (booleanProps.includes(prop)) {
+          props[prop] = {
               type: Boolean,
               default: function () {
                   return tippy.defaultProps[prop];
@@ -4651,7 +4652,7 @@ var VueTippy = (function (exports, vue) {
           };
       }
       else {
-          props$1[prop] = {
+          props[prop] = {
               default: function () {
                   return tippy.defaultProps[prop];
               },
@@ -4659,7 +4660,7 @@ var VueTippy = (function (exports, vue) {
       }
   });
   const TippySingleton = vue.defineComponent({
-      props: props$1,
+      props,
       setup(props) {
           const instances = vue.ref([]);
           const { singleton } = useSingleton(instances, props);