diff --git a/src/components/Tippy.ts b/src/components/Tippy.ts index 5ebcd5f..e185e57 100644 --- a/src/components/Tippy.ts +++ b/src/components/Tippy.ts @@ -53,7 +53,8 @@ const TippyComponent = defineComponent({ props, setup(props) { const elem = ref() - return { elem, ...useTippy(elem, props) } + const tippy = useTippy(elem, props) + return { elem, ...tippy } }, render() { let slot = this.$slots.default ? this.$slots.default() : [] diff --git a/src/composables/useTippy.ts b/src/composables/useTippy.ts index e75917b..1929577 100644 --- a/src/composables/useTippy.ts +++ b/src/composables/useTippy.ts @@ -24,7 +24,10 @@ tippy.setDefaultProps({ export function useTippy( el: Element | (() => Element) | Ref | Ref, - opts: TippyOptions = {} + opts: TippyOptions = {}, + settings: { + mount: boolean + } = { mount: true } ) { const instance = ref() @@ -86,38 +89,6 @@ export function useTippy( instance.value.setContent(getContent(opts.content)) } - const init = () => { - if (!el) return - - let target = isRef(el) ? el.value : el - - if (typeof target === 'function') target = target() - - target && (instance.value = tippy(target, getProps(opts))) - } - - const vm = getCurrentInstance() - - if (vm) { - if (vm.isMounted) { - init() - } else { - onMounted(init) - } - - onUnmounted(() => { - destroy() - }) - } else { - init() - } - - if (isRef(opts) || isReactive(opts)) { - watch(opts, refresh, { immediate: false }) - } else if (isRef(opts.content)) { - watch(opts.content, refreshContent, { immediate: false }) - } - const setContent = (value: TippyContent) => { instance.value?.setContent(getContent(value)) } @@ -128,17 +99,90 @@ export function useTippy( const destroy = () => { if (instance.value) { + try { + //@ts-ignore + // delete instance.value.reference.$tippy + } catch (error) {} + instance.value.destroy() + instance.value = undefined } container = null } - return { + const show = () => { + instance.value?.show() + } + + const hide = () => { + instance.value?.hide() + } + + const disable = () => { + instance.value?.disable() + } + + const enable = () => { + instance.value?.enable() + } + + const unmount = () => { + instance.value?.unmount() + } + + const mount = () => { + if (!el) return + + let target = isRef(el) ? el.value : el + + if (typeof target === 'function') target = target() + + if (target) { + instance.value = tippy(target, getProps(opts)) + + //@ts-ignore + target.$tippy = response + } + } + + const response = { tippy: instance, refresh, refreshContent, setContent, setProps, destroy, + hide, + show, + disable, + enable, + unmount, + mount, } + + if (settings.mount) { + const vm = getCurrentInstance() + + if (vm) { + if (vm.isMounted) { + mount() + } else { + onMounted(mount) + } + + onUnmounted(() => { + destroy() + }) + } else { + mount() + } + } + + if (isRef(opts) || isReactive(opts)) { + watch(opts, refresh, { immediate: false }) + } else if (isRef(opts.content)) { + watch(opts.content, refreshContent, { immediate: false }) + } + + return response } diff --git a/src/directive/index.ts b/src/directive/index.ts index e618004..ef259d9 100644 --- a/src/directive/index.ts +++ b/src/directive/index.ts @@ -44,7 +44,7 @@ const directive: Directive = { opts.content = el.getAttribute('content') } - el.$tippy = useTippy(el, opts) + useTippy(el, opts) }, unmounted(el) { if (el.$tippy) {