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.6KB

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