Skip to content

Conversation

@zaalbarxx
Copy link

Fixes #274
Added for both component and directive. I could propably be possible to also add it to composable, but it would require some changes to types like

type UseTippyOptions = UseTippyOptions & { enabled?: MaybeRefOrGetter }

...
`watch(() => opts.enabled, (newValue) => {
// same logic as in PR
});

Let me know if that makes sense, personally I stumbled upon the issue with directive not being "controllable" today, so I've made a quick fix with this code and it works fine, but maybe it could make the way to the package itself.
Cheers

export const disableableTippy: Directive = {
    ...directive,
    mounted(el, binding, vnode) {
        (directive as any).mounted(el, binding, vnode);
        if (!el.$tippy) {
            return;
        }

        const isTippyEnabled = el.$tippy?.state.value.isEnabled;

        if (binding.value.enabled && !isTippyEnabled) {
            el.$tippy.enable();
        } else if (!binding.value.enabled && isTippyEnabled) {
            el.$tippy.disable();
        }
    },
    updated(el, binding) {
        (directive as any).updated(el, binding);

        if (!el.$tippy) {
            return;
        }

        const isTippyEnabled = el.$tippy?.state.value.isEnabled;

        if (binding.value.enabled && !isTippyEnabled) {
            el.$tippy.enable();
        } else if (!binding.value.enabled && isTippyEnabled) {
            el.$tippy.disable();
        }
    },
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Need enabled prop for dynamically enable/disable tippy

1 participant