Add interface for Tippy component ref

[Thomasan1999]

Hi, if I want to use the Tippy component exported from the library via template ref, I can't tell TS compiler which type the ref uses. Looking into source code of the library, I've created an interface which would solve this issue:

import { Instance } from 'tippy.js';
import { TippyContent, TippyOptions } from 'vue-tippy';

interface TippyRef {
    contentElem: Element;
    destroy(): void;
    disable(): void;
    elem: Element;
    enable(): void;
    hide(): void;
    mount(): void;
    mounted: boolean;
    refresh(): void;
    refreshContent(): void;
    setContent(value: TippyContent): void;
    setProps(value: TippyOptions): void;
    show(): void;
    tippy: Instance;
    unmount(): void;
}

[KABBOUCHI]

hi @Thomasan1999 , u can use useTippy to extract types

import { useTippy } from 'vue-tippy';

const myRef = ref<ReturnType<typeof useTippy>>()

[Thomasan1999]

Thank you @KABBOUCHI. Though, I have noticed some differences in the useTippy returned type and template component ref:

1. missing contentElem and elem, does this mean these properties should not be used in the external code?
2. tippy property has a Ref<Instance> type while the exported tippy from component has an Instance type

[KABBOUCHI]

missing contentElem and elem, does this mean these properties should not be used in the external code?

yes, its for internal use

tippy property has a Ref type while the exported tippy from component has an Instance type

import { useTippy } from 'vue-tippy';
import { ref, UnwrapNestedRefs } from 'vue';

const myRef = ref<UnwrapNestedRefs<ReturnType<typeof useTippy>>>()

will do a refactor this weekend, needs to update the component type

I belive this should work after the refactor:

import { TippyComponent } from 'vue-tippy';
import { ref } from 'vue';

const myRef = ref<TippyComponent>()

[Thomasan1999]

I've tried using the new TippyComponent type but there are missing hide, show functions, etc. Shouldn't they be used externally as well or is there another way how to access them via the new type?

[KABBOUCHI]

plz, can u try v6.0.0-alpha.62?

[Thomasan1999]

It's working now, thank you. 🙂

[Anoesj]

Any chance these updates broke the interactive prop? Seems like that no longer works properly.

[KABBOUCHI]

Any chance these updates broke the interactive prop? Seems like that no longer works properly.

plz can u try v6.0.0-alpha.63?

[Anoesj]

Fixed :smile:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.