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.

VMenu.js 8.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. require('../../../src/stylus/components/_menus.styl');
  6. var _vue = require('vue');
  7. var _vue2 = _interopRequireDefault(_vue);
  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.js');
  15. var _menuable2 = _interopRequireDefault(_menuable);
  16. var _returnable = require('../../mixins/returnable');
  17. var _returnable2 = _interopRequireDefault(_returnable);
  18. var _toggleable = require('../../mixins/toggleable');
  19. var _toggleable2 = _interopRequireDefault(_toggleable);
  20. var _themeable = require('../../mixins/themeable');
  21. var _themeable2 = _interopRequireDefault(_themeable);
  22. var _menuActivator = require('./mixins/menu-activator');
  23. var _menuActivator2 = _interopRequireDefault(_menuActivator);
  24. var _menuGenerators = require('./mixins/menu-generators');
  25. var _menuGenerators2 = _interopRequireDefault(_menuGenerators);
  26. var _menuKeyable = require('./mixins/menu-keyable');
  27. var _menuKeyable2 = _interopRequireDefault(_menuKeyable);
  28. var _menuPosition = require('./mixins/menu-position');
  29. var _menuPosition2 = _interopRequireDefault(_menuPosition);
  30. var _clickOutside = require('../../directives/click-outside');
  31. var _clickOutside2 = _interopRequireDefault(_clickOutside);
  32. var _resize = require('../../directives/resize');
  33. var _resize2 = _interopRequireDefault(_resize);
  34. var _helpers = require('../../util/helpers');
  35. var _ThemeProvider = require('../../util/ThemeProvider');
  36. var _ThemeProvider2 = _interopRequireDefault(_ThemeProvider);
  37. var _console = require('../../util/console');
  38. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  39. /* @vue/component */
  40. // Mixins
  41. exports.default = _vue2.default.extend({
  42. name: 'v-menu',
  43. provide: function provide() {
  44. return {
  45. // Pass theme through to default slot
  46. theme: this.theme
  47. };
  48. },
  49. directives: {
  50. ClickOutside: _clickOutside2.default,
  51. Resize: _resize2.default
  52. },
  53. mixins: [_menuActivator2.default, _dependent2.default, _delayable2.default, _detachable2.default, _menuGenerators2.default, _menuKeyable2.default, _menuable2.default, _menuPosition2.default, _returnable2.default, _toggleable2.default, _themeable2.default],
  54. props: {
  55. auto: Boolean,
  56. closeOnClick: {
  57. type: Boolean,
  58. default: true
  59. },
  60. closeOnContentClick: {
  61. type: Boolean,
  62. default: true
  63. },
  64. disabled: Boolean,
  65. fullWidth: Boolean,
  66. maxHeight: { default: 'auto' },
  67. openOnClick: {
  68. type: Boolean,
  69. default: true
  70. },
  71. offsetX: Boolean,
  72. offsetY: Boolean,
  73. openOnHover: Boolean,
  74. origin: {
  75. type: String,
  76. default: 'top left'
  77. },
  78. transition: {
  79. type: [Boolean, String],
  80. default: 'v-menu-transition'
  81. }
  82. },
  83. data: function data() {
  84. return {
  85. defaultOffset: 8,
  86. hasJustFocused: false,
  87. resizeTimeout: null
  88. };
  89. },
  90. computed: {
  91. calculatedLeft: function calculatedLeft() {
  92. var menuWidth = Math.max(this.dimensions.content.width, parseFloat(this.calculatedMinWidth));
  93. if (!this.auto) return this.calcLeft(menuWidth);
  94. return this.calcXOverflow(this.calcLeftAuto(), menuWidth) + 'px';
  95. },
  96. calculatedMaxHeight: function calculatedMaxHeight() {
  97. return this.auto ? '200px' : (0, _helpers.convertToUnit)(this.maxHeight);
  98. },
  99. calculatedMaxWidth: function calculatedMaxWidth() {
  100. return isNaN(this.maxWidth) ? this.maxWidth : this.maxWidth + 'px';
  101. },
  102. calculatedMinWidth: function calculatedMinWidth() {
  103. if (this.minWidth) {
  104. return isNaN(this.minWidth) ? this.minWidth : this.minWidth + 'px';
  105. }
  106. var minWidth = Math.min(this.dimensions.activator.width + this.nudgeWidth + (this.auto ? 16 : 0), Math.max(this.pageWidth - 24, 0));
  107. var calculatedMaxWidth = isNaN(parseInt(this.calculatedMaxWidth)) ? minWidth : parseInt(this.calculatedMaxWidth);
  108. return Math.min(calculatedMaxWidth, minWidth) + 'px';
  109. },
  110. calculatedTop: function calculatedTop() {
  111. if (!this.auto || this.isAttached) return this.calcTop();
  112. return this.calcYOverflow(this.calculatedTopAuto) + 'px';
  113. },
  114. styles: function styles() {
  115. return {
  116. maxHeight: this.calculatedMaxHeight,
  117. minWidth: this.calculatedMinWidth,
  118. maxWidth: this.calculatedMaxWidth,
  119. top: this.calculatedTop,
  120. left: this.calculatedLeft,
  121. transformOrigin: this.origin,
  122. zIndex: this.zIndex || this.activeZIndex
  123. };
  124. }
  125. },
  126. watch: {
  127. activator: function activator(newActivator, oldActivator) {
  128. this.removeActivatorEvents(oldActivator);
  129. this.addActivatorEvents(newActivator);
  130. },
  131. disabled: function disabled(_disabled) {
  132. if (!this.activator) return;
  133. if (_disabled) {
  134. this.removeActivatorEvents(this.activator);
  135. } else {
  136. this.addActivatorEvents(this.activator);
  137. }
  138. },
  139. isContentActive: function isContentActive(val) {
  140. this.hasJustFocused = val;
  141. }
  142. },
  143. mounted: function mounted() {
  144. this.isActive && this.activate();
  145. if ((0, _helpers.getSlotType)(this, 'activator', true) === 'v-slot') {
  146. (0, _console.consoleError)('v-tooltip\'s activator slot must be bound, try \'<template #activator="data"><v-btn v-on="data.on>\'', this);
  147. }
  148. },
  149. methods: {
  150. activate: function activate() {
  151. var _this = this;
  152. // This exists primarily for v-select
  153. // helps determine which tiles to activate
  154. this.getTiles();
  155. // Update coordinates and dimensions of menu
  156. // and its activator
  157. this.updateDimensions();
  158. // Start the transition
  159. requestAnimationFrame(function () {
  160. // Once transitioning, calculate scroll and top position
  161. _this.startTransition().then(function () {
  162. if (_this.$refs.content) {
  163. _this.calculatedTopAuto = _this.calcTopAuto();
  164. _this.auto && (_this.$refs.content.scrollTop = _this.calcScrollPosition());
  165. }
  166. });
  167. });
  168. },
  169. closeConditional: function closeConditional(e) {
  170. return this.isActive && this.closeOnClick && !this.$refs.content.contains(e.target);
  171. },
  172. onResize: function onResize() {
  173. if (!this.isActive) return;
  174. // Account for screen resize
  175. // and orientation change
  176. // eslint-disable-next-line no-unused-expressions
  177. this.$refs.content.offsetWidth;
  178. this.updateDimensions();
  179. // When resizing to a smaller width
  180. // content width is evaluated before
  181. // the new activator width has been
  182. // set, causing it to not size properly
  183. // hacky but will revisit in the future
  184. clearTimeout(this.resizeTimeout);
  185. this.resizeTimeout = setTimeout(this.updateDimensions, 100);
  186. }
  187. },
  188. render: function render(h) {
  189. var data = {
  190. staticClass: 'v-menu',
  191. class: { 'v-menu--inline': !this.fullWidth && this.$slots.activator },
  192. directives: [{
  193. arg: 500,
  194. name: 'resize',
  195. value: this.onResize
  196. }],
  197. on: this.disableKeys ? undefined : {
  198. keydown: this.onKeyDown
  199. }
  200. };
  201. return h('div', data, [this.genActivator(), this.$createElement(_ThemeProvider2.default, {
  202. props: {
  203. root: true,
  204. light: this.light,
  205. dark: this.dark
  206. }
  207. }, [this.genTransition()])]);
  208. }
  209. });
  210. // Helpers
  211. // Directives
  212. // Component level mixins
  213. //# sourceMappingURL=VMenu.js.map