accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-02-11 08:28:47 +00:00
Code Issues Releases Activity

fix(ui): add transition effects to Tooltip

Browse Source
This commit is contained in:
18alantom 2022-01-26 20:40:15 +05:30 committed by Alan
parent c55d691768
commit f957e13aea
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Tooltip.vue
View File

@ -1,5 +1,10 @@
<template> <template>
<div id="tooltip" ref="tooltip"> <div
id="tooltip"
ref="tooltip"
style="transition: opacity 100ms ease-in"
:style="{ opacity }"
>
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@ -27,10 +32,15 @@ export default {
placement: { type: String, default: 'auto' }, placement: { type: String, default: 'auto' },
}, },
data() { data() {
return { popper: null, virtualElement: null }; return { popper: null, virtualElement: null, opacity: 0 };
}, },
methods: { methods: {
create() { create() {
if (this.popper) {
this.opacity = 1;
return;
}
this.$refs.tooltip.setAttribute('data-show', ''); this.$refs.tooltip.setAttribute('data-show', '');
this.virtualElement = { this.virtualElement = {
getBoundingClientRect: generateGetBoundingClientRect(), getBoundingClientRect: generateGetBoundingClientRect(),
@ -43,6 +53,7 @@ export default {
Object.assign(offset, { options: { offset: [0, this.offset] } }), Object.assign(offset, { options: { offset: [0, this.offset] } }),
], ],
}); });
this.opacity = 1;
}, },
update({ clientX, clientY }) { update({ clientX, clientY }) {
if (!this.popper || !this.virtualElement) { if (!this.popper || !this.virtualElement) {
@ -55,8 +66,9 @@ export default {
this.popper.update(); this.popper.update();
}, },
destroy() { destroy() {
this.opacity = 0;
this.$refs.tooltip.removeAttribute('data-show'); this.$refs.tooltip.removeAttribute('data-show');
this.popper.destroy(); this.popper?.destroy();
this.virtualElement = null; this.virtualElement = null;
this.popper = null; this.popper = null;
}, },