diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-01 12:10:25 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-12-01 12:10:25 +0300 |
commit | 7bc1ee0bcb9cefaf788aa0b93383b7347e9010b0 (patch) | |
tree | 4cd125d7c55603ae87b2ca93b8ef89d71c2c5ef8 /app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue | |
parent | 9b646e9297a1d9bcc7397c76010011f56df1579d (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue | 46 |
1 files changed, 31 insertions, 15 deletions
diff --git a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue index c5fdb5fc242..09414e679bb 100644 --- a/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue +++ b/app/assets/javascripts/vue_shared/components/tooltip_on_truncate.vue @@ -1,11 +1,14 @@ <script> -import { GlTooltipDirective as GlTooltip } from '@gitlab/ui'; -import { isFunction } from 'lodash'; +import { GlTooltipDirective, GlResizeObserverDirective } from '@gitlab/ui'; +import { isFunction, debounce } from 'lodash'; import { hasHorizontalOverflow } from '~/lib/utils/dom_utils'; +const UPDATE_TOOLTIP_DEBOUNCED_WAIT_MS = 300; + export default { directives: { - GlTooltip, + GlTooltip: GlTooltipDirective, + GlResizeObserver: GlResizeObserverDirective, }, props: { title: { @@ -26,15 +29,33 @@ export default { }, data() { return { - showTooltip: false, + tooltipDisabled: true, }; }, + computed: { + classes() { + if (this.tooltipDisabled) { + return ''; + } + return 'js-show-tooltip'; + }, + tooltip() { + return { + title: this.title, + placement: this.placement, + disabled: this.tooltipDisabled, + }; + }, + }, watch: { title() { - // Wait on $nextTick in case of slot width changes + // Wait on $nextTick in case the slot width changes this.$nextTick(this.updateTooltip); }, }, + created() { + this.updateTooltipDebounced = debounce(this.updateTooltip, UPDATE_TOOLTIP_DEBOUNCED_WAIT_MS); + }, mounted() { this.updateTooltip(); }, @@ -45,25 +66,20 @@ export default { } else if (this.truncateTarget === 'child') { return this.$el.childNodes[0]; } - return this.$el; }, updateTooltip() { - const target = this.selectTarget(); - this.showTooltip = hasHorizontalOverflow(target); + this.tooltipDisabled = !hasHorizontalOverflow(this.selectTarget()); + }, + onResize() { + this.updateTooltipDebounced(); }, }, }; </script> <template> - <span - v-if="showTooltip" - v-gl-tooltip="{ placement }" - :title="title" - class="js-show-tooltip gl-min-w-0" - > + <span v-gl-tooltip="tooltip" v-gl-resize-observer="onResize" :class="classes" class="gl-min-w-0"> <slot></slot> </span> - <span v-else class="gl-min-w-0"> <slot></slot> </span> </template> |