This repository has been archived on 2024-07-27. You can view files and clone it, but cannot push or open issues or pull requests.
keksAccountGUI/node_modulesOLD/vuetify/lib/components/VTooltip/VTooltip.js
2019-08-11 20:48:02 +02:00

205 lines
No EOL
5.3 KiB
JavaScript

import "../../../src/components/VTooltip/VTooltip.sass"; // Mixins
import Activatable from '../../mixins/activatable';
import Colorable from '../../mixins/colorable';
import Delayable from '../../mixins/delayable';
import Dependent from '../../mixins/dependent';
import Detachable from '../../mixins/detachable';
import Menuable from '../../mixins/menuable';
import Toggleable from '../../mixins/toggleable'; // Helpers
import { convertToUnit, keyCodes, getSlotType } from '../../util/helpers';
import { consoleError } from '../../util/console';
import mixins from '../../util/mixins';
/* @vue/component */
export default mixins(Colorable, Delayable, Dependent, Detachable, Menuable, Toggleable).extend({
name: 'v-tooltip',
props: {
closeDelay: {
type: [Number, String],
default: 0
},
debounce: {
type: [Number, String],
default: 0
},
disabled: Boolean,
fixed: {
type: Boolean,
default: true
},
openDelay: {
type: [Number, String],
default: 0
},
openOnHover: {
type: Boolean,
default: true
},
tag: {
type: String,
default: 'span'
},
transition: String,
zIndex: {
default: null
}
},
data: () => ({
calculatedMinWidth: 0,
closeDependents: false
}),
computed: {
calculatedLeft() {
const {
activator,
content
} = this.dimensions;
const unknown = !this.bottom && !this.left && !this.top && !this.right;
const activatorLeft = this.attach !== false ? activator.offsetLeft : activator.left;
let left = 0;
if (this.top || this.bottom || unknown) {
left = activatorLeft + activator.width / 2 - content.width / 2;
} else if (this.left || this.right) {
left = activatorLeft + (this.right ? activator.width : -content.width) + (this.right ? 10 : -10);
}
if (this.nudgeLeft) left -= parseInt(this.nudgeLeft);
if (this.nudgeRight) left += parseInt(this.nudgeRight);
return `${this.calcXOverflow(left, this.dimensions.content.width)}px`;
},
calculatedTop() {
const {
activator,
content
} = this.dimensions;
const activatorTop = this.attach !== false ? activator.offsetTop : activator.top;
let top = 0;
if (this.top || this.bottom) {
top = activatorTop + (this.bottom ? activator.height : -content.height) + (this.bottom ? 10 : -10);
} else if (this.left || this.right) {
top = activatorTop + activator.height / 2 - content.height / 2;
}
if (this.nudgeTop) top -= parseInt(this.nudgeTop);
if (this.nudgeBottom) top += parseInt(this.nudgeBottom);
return `${this.calcYOverflow(top + this.pageYOffset)}px`;
},
classes() {
return {
'v-tooltip--top': this.top,
'v-tooltip--right': this.right,
'v-tooltip--bottom': this.bottom,
'v-tooltip--left': this.left
};
},
computedTransition() {
if (this.transition) return this.transition;
return this.isActive ? 'scale-transition' : 'fade-transition';
},
offsetY() {
return this.top || this.bottom;
},
offsetX() {
return this.left || this.right;
},
styles() {
return {
left: this.calculatedLeft,
maxWidth: convertToUnit(this.maxWidth),
minWidth: convertToUnit(this.minWidth),
opacity: this.isActive ? 0.9 : 0,
top: this.calculatedTop,
zIndex: this.zIndex || this.activeZIndex
};
}
},
beforeMount() {
this.$nextTick(() => {
this.value && this.callActivate();
});
},
mounted() {
if (getSlotType(this, 'activator', true) === 'v-slot') {
consoleError(`v-tooltip's activator slot must be bound, try '<template #activator="data"><v-btn v-on="data.on>'`, this);
}
},
methods: {
activate() {
// Update coordinates and dimensions of menu
// and its activator
this.updateDimensions(); // Start the transition
requestAnimationFrame(this.startTransition);
},
deactivate() {
this.runDelay('close');
},
genActivatorListeners() {
const listeners = Activatable.options.methods.genActivatorListeners.call(this);
listeners.focus = e => {
this.getActivator(e);
this.runDelay('open');
};
listeners.blur = e => {
this.getActivator(e);
this.runDelay('close');
};
listeners.keydown = e => {
if (e.keyCode === keyCodes.esc) {
this.getActivator(e);
this.runDelay('close');
}
};
return listeners;
}
},
render(h) {
const tooltip = h('div', this.setBackgroundColor(this.color, {
staticClass: 'v-tooltip__content',
class: {
[this.contentClass]: true,
menuable__content__active: this.isActive,
'v-tooltip__content--fixed': this.activatorFixed
},
style: this.styles,
attrs: this.getScopeIdAttrs(),
directives: [{
name: 'show',
value: this.isContentActive
}],
ref: 'content'
}), this.showLazyContent(this.getContentSlot()));
return h(this.tag, {
staticClass: 'v-tooltip',
class: this.classes
}, [h('transition', {
props: {
name: this.computedTransition
}
}, [tooltip]), this.genActivator()]);
}
});
//# sourceMappingURL=VTooltip.js.map