vue-tippy 6.0.0-alpha.58 → 6.0.0-alpha.60

package/dist/vue-tippy.prod.cjs

@@ -1,5 +1,5 @@
 /*!
-  * vue-tippy v6.0.0-alpha.58
+  * vue-tippy v6.0.0-alpha.60
   * (c) 2022 
   * @license MIT
   */
@@ -4154,7 +4154,7 @@ function useTippyComponent(opts = {}, children) {
         instance,
         TippyComponent: vue.h(TippyComponent, {
             ...opts,
-            onVnodeMounted: vnode => {
+            onVnodeMounted: (vnode) => {
                 //@ts-ignore
                 instance.value = vnode.component.ctx;
             },
@@ -4188,66 +4188,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 = {};
-props['hideOnClick'] = {
-    type: [String, Boolean],
-    default: tippy.defaultProps.hideOnClick,
-};
-props['to'] = {};
-props['tag'] = {
-    default: 'span'
-};
-props['contentTag'] = {
-    default: 'span'
-};
-props['contentClass'] = {
-    default: null
-};
-Object.keys(tippy.defaultProps).forEach((prop) => {
-    if (props[prop]) {
-        return;
-    }
-    if (booleanProps.includes(prop)) {
-        props[prop] = {
-            // TODO: add SVGElement and DocumentFragment for arrow prop
-            type: prop === 'arrow' ? [String, Boolean, Function] : Boolean,
-            default: function () {
-                return tippy.defaultProps[prop];
-            },
-        };
-    }
-    else {
-        props[prop] = {
-            default: function () {
-                return tippy.defaultProps[prop];
-            },
-        };
-    }
-});
 const TippyComponent = vue.defineComponent({
-    props,
+    props: {
+        to: {
+            type: [String, Function],
+        },
+        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();
@@ -4288,38 +4291,28 @@ const TippyComponent = vue.defineComponent({
             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',
@@ -4335,10 +4328,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];
@@ -4346,7 +4339,7 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
         };
     }
     else {
-        props$1[prop] = {
+        props[prop] = {
             default: function () {
                 return tippy.defaultProps[prop];
             },
@@ -4354,7 +4347,7 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
     }
 });
 const TippySingleton = vue.defineComponent({
-    props: props$1,
+    props,
     setup(props) {
         const instances = vue.ref([]);
         const { singleton } = useSingleton(instances, props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tippy",
-  "version": "6.0.0-alpha.58",
+  "version": "6.0.0-alpha.60",
   "main": "index.js",
   "module": "dist/vue-tippy.mjs",
   "unpkg": "dist/vue-tippy.iife.js",
@@ -49,7 +49,7 @@
     "prepublishOnly": "yarn build && yarn build:dts"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.2.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "7.8.1",
@@ -59,7 +59,7 @@
     "@rollup/plugin-replace": "^2.3.3",
     "@types/webpack": "^4.41.21",
     "@types/webpack-env": "^1.15.2",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/compiler-sfc": "^3.2.0",
     "css-loader": "^4.2.0",
     "html-webpack-plugin": "^4.3.0",
     "rollup": "^2.23.0",
@@ -71,7 +71,7 @@
     "ts-loader": "^8.0.2",
     "ts-node": "^8.10.2",
     "typescript": "^4.1.3",
-    "vue": "^3.0.0",
+    "vue": "^3.2.0",
     "vue-loader": "^16.0.0-beta.8",
     "vue-router": "4",
     "webpack": "^4.44.1",

package/src/components/Tippy.ts

@@ -1,87 +1,88 @@
-import { defineComponent, ref, h, ComponentObjectPropsOptions, onMounted, nextTick, watch, unref } from 'vue'
+import { defineComponent, ref, h, UnwrapNestedRefs, onMounted, nextTick, watch, unref, reactive, PropType } from 'vue'
 import { TippyOptions } from '../types'
 import { useTippy } from '../composables'
-import tippy, { DefaultProps } from 'tippy.js'
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProps extends TippyOptions { }
-}
-
-// const pluginProps = [
-//   'animateFill',
-//   'followCursor',
-//   'inlinePositioning',
-//   'sticky',
-// ]
-const booleanProps = [
-  'a11y',
-  'allowHTML',
-  'arrow',
-  'flip',
-  'flipOnUpdate',
-  'hideOnClick',
-  'ignoreAttributes',
-  'inertia',
-  'interactive',
-  'lazy',
-  'multiple',
-  'showOnInit',
-  'touch',
-  'touchHold',
-]
-
-let props: ComponentObjectPropsOptions = {}
-
-props['hideOnClick'] = {
-  type: [String, Boolean],
-  default: tippy.defaultProps.hideOnClick,
-}
-
-props['to'] = {}
-
-props['tag'] = {
-  default: 'span'
-}
+import tippy from 'tippy.js'
 
-props['contentTag'] = {
-  default: 'span'
-}
-
-props['contentClass'] = {
-  default: null
-}
-
-
-Object.keys(tippy.defaultProps).forEach((prop: string) => {
-  if (props[prop]) {
-    return
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProps extends TippyOptions {
+    to: string | Element
+    tag: string
+    contentTag: string
+    contentClass: string
   }
+  interface ComponentCustomProperties extends UnwrapNestedRefs<ReturnType<typeof useTippy>> { }
+}
 
-  if (booleanProps.includes(prop)) {
-    props[prop] = {
-      // TODO: add SVGElement and DocumentFragment for arrow prop
-      type: prop === 'arrow' ? [String, Boolean, Function] : Boolean,
-      default: function () {
-        return tippy.defaultProps[prop as keyof DefaultProps] as Boolean
-      },
-    }
-  } else {
-    props[prop] = {
-      default: function () {
-        return tippy.defaultProps[prop as keyof DefaultProps]
-      },
-    }
-  }
-})
 
 const TippyComponent = defineComponent({
-  props,
+  props: {
+    to: {
+      type: [String, Function] as PropType<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<Element>()
     const contentElem = ref<Element>()
     const mounted = ref(false)
 
-
     const getOptions = () => {
       let options = { ...props } as TippyOptions;
       for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
@@ -100,7 +101,7 @@ const TippyComponent = defineComponent({
       if (typeof Element !== 'undefined' && props.to instanceof Element) {
         target = () => props.to
       } else if (typeof props.to === 'string' || props.to instanceof String) {
-        target = () => document.querySelector(props.to)
+        target = () => document.querySelector(props.to as any)
       }
     }
 
@@ -126,41 +127,28 @@ const TippyComponent = defineComponent({
         tippy.setContent(() => contentElem.value)
     })
 
-    let exposed = {
+    let exposed = reactive({
       elem,
       contentElem,
       mounted,
       ...tippy
-    }
+    })
 
     expose(exposed)
 
     return () => {
+      const slot = slots.default ? slots.default(exposed) : []
 
-      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) : []
-
-      return h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
+      return h(props.tag as string, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
         slot,
         h(
-          props.contentTag,
+          props.contentTag as string,
           {
             ref: contentElem,
             style: { display: mounted.value ? 'inherit' : 'none' },
             class: props.contentClass
           },
-          slots.content(exposedUnref)
+          slots.content(exposed)
         ),
       ] : slot)
     }

package/src/composables/useTippyComponent.ts

@@ -1,20 +1,20 @@
 import { h, ref } from 'vue'
-import { TippyOptions } from '../types'
-import TippyComponent from './../components/Tippy'
+import { TippyComponent, TippyOptions } from '../types'
+import Tippy from './../components/Tippy'
 
 export function useTippyComponent(
   opts: TippyOptions = {},
   children?: any
 ) {
-  const instance = ref()
+  const instance = ref<TippyComponent>()
 
   return {
     instance,
     TippyComponent: h(
-      TippyComponent,
+      Tippy,
       {
-        ...opts,
-        onVnodeMounted: vnode => {
+        ...opts as any,
+        onVnodeMounted: (vnode:any) => {
           //@ts-ignore
           instance.value = vnode.component.ctx
         },

package/src/types/index.ts

@@ -11,9 +11,10 @@ export declare type TippyTarget =
   | null
 
 export declare type TippyOptions = Partial<
-  Omit<Props, 'content' | 'triggerTarget'> & {
+  Omit<Props, 'content' | 'triggerTarget' | 'getReferenceClientRect'> & {
     content: TippyContent
     triggerTarget: TippyTarget
+    getReferenceClientRect: null | (() => DOMRect & any)
   }
 >