Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VTooltip.js 7.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  2. import '../../../src/stylus/components/_tooltips.styl';
  3. // Mixins
  4. import Colorable from '../../mixins/colorable';
  5. import Delayable from '../../mixins/delayable';
  6. import Dependent from '../../mixins/dependent';
  7. import Detachable from '../../mixins/detachable';
  8. import Menuable from '../../mixins/menuable';
  9. import Toggleable from '../../mixins/toggleable';
  10. // Helpers
  11. import { convertToUnit, getSlotType } from '../../util/helpers';
  12. import { consoleError } from '../../util/console';
  13. /* @vue/component */
  14. export default {
  15. name: 'v-tooltip',
  16. mixins: [Colorable, Delayable, Dependent, Detachable, Menuable, Toggleable],
  17. props: {
  18. closeDelay: {
  19. type: [Number, String],
  20. default: 200
  21. },
  22. debounce: {
  23. type: [Number, String],
  24. default: 0
  25. },
  26. disabled: Boolean,
  27. fixed: {
  28. type: Boolean,
  29. default: true
  30. },
  31. openDelay: {
  32. type: [Number, String],
  33. default: 200
  34. },
  35. tag: {
  36. type: String,
  37. default: 'span'
  38. },
  39. transition: String,
  40. zIndex: {
  41. default: null
  42. }
  43. },
  44. data: function data() {
  45. return {
  46. calculatedMinWidth: 0,
  47. closeDependents: false
  48. };
  49. },
  50. computed: {
  51. calculatedLeft: function calculatedLeft() {
  52. var _dimensions = this.dimensions,
  53. activator = _dimensions.activator,
  54. content = _dimensions.content;
  55. var unknown = !this.bottom && !this.left && !this.top && !this.right;
  56. var activatorLeft = this.isAttached ? activator.offsetLeft : activator.left;
  57. var left = 0;
  58. if (this.top || this.bottom || unknown) {
  59. left = activatorLeft + activator.width / 2 - content.width / 2;
  60. } else if (this.left || this.right) {
  61. left = activatorLeft + (this.right ? activator.width : -content.width) + (this.right ? 10 : -10);
  62. }
  63. if (this.nudgeLeft) left -= parseInt(this.nudgeLeft);
  64. if (this.nudgeRight) left += parseInt(this.nudgeRight);
  65. return this.calcXOverflow(left, this.dimensions.content.width) + 'px';
  66. },
  67. calculatedTop: function calculatedTop() {
  68. var _dimensions2 = this.dimensions,
  69. activator = _dimensions2.activator,
  70. content = _dimensions2.content;
  71. var activatorTop = this.isAttached ? activator.offsetTop : activator.top;
  72. var top = 0;
  73. if (this.top || this.bottom) {
  74. top = activatorTop + (this.bottom ? activator.height : -content.height) + (this.bottom ? 10 : -10);
  75. } else if (this.left || this.right) {
  76. top = activatorTop + activator.height / 2 - content.height / 2;
  77. }
  78. if (this.nudgeTop) top -= parseInt(this.nudgeTop);
  79. if (this.nudgeBottom) top += parseInt(this.nudgeBottom);
  80. return this.calcYOverflow(top + this.pageYOffset) + 'px';
  81. },
  82. classes: function classes() {
  83. return {
  84. 'v-tooltip--top': this.top,
  85. 'v-tooltip--right': this.right,
  86. 'v-tooltip--bottom': this.bottom,
  87. 'v-tooltip--left': this.left
  88. };
  89. },
  90. computedTransition: function computedTransition() {
  91. if (this.transition) return this.transition;
  92. if (this.top) return 'slide-y-reverse-transition';
  93. if (this.right) return 'slide-x-transition';
  94. if (this.bottom) return 'slide-y-transition';
  95. if (this.left) return 'slide-x-reverse-transition';
  96. return '';
  97. },
  98. offsetY: function offsetY() {
  99. return this.top || this.bottom;
  100. },
  101. offsetX: function offsetX() {
  102. return this.left || this.right;
  103. },
  104. styles: function styles() {
  105. return {
  106. left: this.calculatedLeft,
  107. maxWidth: convertToUnit(this.maxWidth),
  108. minWidth: convertToUnit(this.minWidth),
  109. opacity: this.isActive ? 0.9 : 0,
  110. top: this.calculatedTop,
  111. zIndex: this.zIndex || this.activeZIndex
  112. };
  113. }
  114. },
  115. beforeMount: function beforeMount() {
  116. var _this = this;
  117. this.$nextTick(function () {
  118. _this.value && _this.callActivate();
  119. });
  120. },
  121. mounted: function mounted() {
  122. if (getSlotType(this, 'activator', true) === 'v-slot') {
  123. consoleError('v-tooltip\'s activator slot must be bound, try \'<template #activator="data"><v-btn v-on="data.on>\'', this);
  124. }
  125. },
  126. methods: {
  127. activate: function activate() {
  128. // Update coordinates and dimensions of menu
  129. // and its activator
  130. this.updateDimensions();
  131. // Start the transition
  132. requestAnimationFrame(this.startTransition);
  133. },
  134. genActivator: function genActivator() {
  135. var _this2 = this;
  136. var listeners = this.disabled ? {} : {
  137. mouseenter: function mouseenter(e) {
  138. _this2.getActivator(e);
  139. _this2.runDelay('open');
  140. },
  141. mouseleave: function mouseleave(e) {
  142. _this2.getActivator(e);
  143. _this2.runDelay('close');
  144. }
  145. };
  146. if (getSlotType(this, 'activator') === 'scoped') {
  147. var activator = this.$scopedSlots.activator({ on: listeners });
  148. this.activatorNode = activator;
  149. return activator;
  150. }
  151. return this.$createElement('span', {
  152. on: listeners,
  153. ref: 'activator'
  154. }, this.$slots.activator);
  155. }
  156. },
  157. render: function render(h) {
  158. var _class;
  159. var tooltip = h('div', this.setBackgroundColor(this.color, {
  160. staticClass: 'v-tooltip__content',
  161. 'class': (_class = {}, _defineProperty(_class, this.contentClass, true), _defineProperty(_class, 'menuable__content__active', this.isActive), _defineProperty(_class, 'v-tooltip__content--fixed', this.activatorFixed), _class),
  162. style: this.styles,
  163. attrs: this.getScopeIdAttrs(),
  164. directives: [{
  165. name: 'show',
  166. value: this.isContentActive
  167. }],
  168. ref: 'content'
  169. }), this.showLazyContent(this.$slots.default));
  170. return h(this.tag, {
  171. staticClass: 'v-tooltip',
  172. 'class': this.classes
  173. }, [h('transition', {
  174. props: {
  175. name: this.computedTransition
  176. }
  177. }, [tooltip]), this.genActivator()]);
  178. }
  179. };
  180. //# sourceMappingURL=VTooltip.js.map