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/es5/components/VMenu/VMenu.js
2019-08-11 20:48:02 +02:00

438 lines
No EOL
15 KiB
JavaScript

"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("../../../src/components/VMenu/VMenu.sass");
var _delayable = _interopRequireDefault(require("../../mixins/delayable"));
var _dependent = _interopRequireDefault(require("../../mixins/dependent"));
var _detachable = _interopRequireDefault(require("../../mixins/detachable"));
var _menuable = _interopRequireDefault(require("../../mixins/menuable"));
var _returnable = _interopRequireDefault(require("../../mixins/returnable"));
var _toggleable = _interopRequireDefault(require("../../mixins/toggleable"));
var _themeable = _interopRequireDefault(require("../../mixins/themeable"));
var _clickOutside = _interopRequireDefault(require("../../directives/click-outside"));
var _resize = _interopRequireDefault(require("../../directives/resize"));
var _mixins = _interopRequireDefault(require("../../util/mixins"));
var _helpers = require("../../util/helpers");
var _ThemeProvider = _interopRequireDefault(require("../../util/ThemeProvider"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
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; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
var baseMixins = (0, _mixins.default)(_dependent.default, _delayable.default, _detachable.default, _menuable.default, _returnable.default, _toggleable.default, _themeable.default);
/* @vue/component */
var _default = baseMixins.extend({
name: 'v-menu',
provide: function provide() {
return {
isInMenu: true,
// Pass theme through to default slot
theme: this.theme
};
},
directives: {
ClickOutside: _clickOutside.default,
Resize: _resize.default
},
props: {
auto: Boolean,
closeOnClick: {
type: Boolean,
default: true
},
closeOnContentClick: {
type: Boolean,
default: true
},
disabled: Boolean,
disableKeys: Boolean,
fullWidth: Boolean,
maxHeight: {
type: [Number, String],
default: 'auto'
},
offsetX: Boolean,
offsetY: Boolean,
openOnClick: {
type: Boolean,
default: true
},
openOnHover: Boolean,
origin: {
type: String,
default: 'top left'
},
transition: {
type: [Boolean, String],
default: 'v-menu-transition'
}
},
data: function data() {
return {
calculatedTopAuto: 0,
defaultOffset: 8,
hasJustFocused: false,
listIndex: -1,
resizeTimeout: 0,
selectedIndex: null,
tiles: []
};
},
computed: {
activeTile: function activeTile() {
return this.tiles[this.listIndex];
},
calculatedLeft: function calculatedLeft() {
var menuWidth = Math.max(this.dimensions.content.width, parseFloat(this.calculatedMinWidth));
if (!this.auto) return this.calcLeft(menuWidth) || '0';
return (0, _helpers.convertToUnit)(this.calcXOverflow(this.calcLeftAuto(), menuWidth)) || '0';
},
calculatedMaxHeight: function calculatedMaxHeight() {
var height = this.auto ? '200px' : (0, _helpers.convertToUnit)(this.maxHeight);
return height || '0';
},
calculatedMaxWidth: function calculatedMaxWidth() {
return (0, _helpers.convertToUnit)(this.maxWidth) || '0';
},
calculatedMinWidth: function calculatedMinWidth() {
if (this.minWidth) {
return (0, _helpers.convertToUnit)(this.minWidth) || '0';
}
var minWidth = Math.min(this.dimensions.activator.width + Number(this.nudgeWidth) + (this.auto ? 16 : 0), Math.max(this.pageWidth - 24, 0));
var calculatedMaxWidth = isNaN(parseInt(this.calculatedMaxWidth)) ? minWidth : parseInt(this.calculatedMaxWidth);
return (0, _helpers.convertToUnit)(Math.min(calculatedMaxWidth, minWidth)) || '0';
},
calculatedTop: function calculatedTop() {
var top = !this.auto ? this.calcTop() : (0, _helpers.convertToUnit)(this.calcYOverflow(this.calculatedTopAuto));
return top || '0';
},
hasClickableTiles: function hasClickableTiles() {
return Boolean(this.tiles.find(function (tile) {
return tile.tabIndex > -1;
}));
},
styles: function styles() {
return {
maxHeight: this.calculatedMaxHeight,
minWidth: this.calculatedMinWidth,
maxWidth: this.calculatedMaxWidth,
top: this.calculatedTop,
left: this.calculatedLeft,
transformOrigin: this.origin,
zIndex: this.zIndex || this.activeZIndex
};
}
},
watch: {
isActive: function isActive(val) {
if (!val) this.listIndex = -1;
},
isContentActive: function isContentActive(val) {
this.hasJustFocused = val;
},
listIndex: function listIndex(next, prev) {
if (next in this.tiles) {
var tile = this.tiles[next];
tile.classList.add('v-list-item--highlighted');
this.$refs.content.scrollTop = tile.offsetTop - tile.clientHeight;
}
prev in this.tiles && this.tiles[prev].classList.remove('v-list-item--highlighted');
}
},
mounted: function mounted() {
this.isActive && this.callActivate();
},
methods: {
activate: function activate() {
var _this = this;
// Update coordinates and dimensions of menu
// and its activator
this.updateDimensions(); // Start the transition
requestAnimationFrame(function () {
// Once transitioning, calculate scroll and top position
_this.startTransition().then(function () {
if (_this.$refs.content) {
_this.calculatedTopAuto = _this.calcTopAuto();
_this.auto && (_this.$refs.content.scrollTop = _this.calcScrollPosition());
}
});
});
},
calcScrollPosition: function calcScrollPosition() {
var $el = this.$refs.content;
var activeTile = $el.querySelector('.v-list-item--active');
var maxScrollTop = $el.scrollHeight - $el.offsetHeight;
return activeTile ? Math.min(maxScrollTop, Math.max(0, activeTile.offsetTop - $el.offsetHeight / 2 + activeTile.offsetHeight / 2)) : $el.scrollTop;
},
calcLeftAuto: function calcLeftAuto() {
return parseInt(this.dimensions.activator.left - this.defaultOffset * 2);
},
calcTopAuto: function calcTopAuto() {
var $el = this.$refs.content;
var activeTile = $el.querySelector('.v-list-item--active');
if (!activeTile) {
this.selectedIndex = null;
}
if (this.offsetY || !activeTile) {
return this.computedTop;
}
this.selectedIndex = Array.from(this.tiles).indexOf(activeTile);
var tileDistanceFromMenuTop = activeTile.offsetTop - this.calcScrollPosition();
var firstTileOffsetTop = $el.querySelector('.v-list-item').offsetTop;
return this.computedTop - tileDistanceFromMenuTop - firstTileOffsetTop - 1;
},
changeListIndex: function changeListIndex(e) {
// For infinite scroll and autocomplete, re-evaluate children
this.getTiles();
if (!this.isActive || !this.hasClickableTiles) {
return;
} else if (e.keyCode === _helpers.keyCodes.tab) {
this.isActive = false;
return;
} else if (e.keyCode === _helpers.keyCodes.down) {
this.nextTile();
} else if (e.keyCode === _helpers.keyCodes.up) {
this.prevTile();
} else if (e.keyCode === _helpers.keyCodes.enter && this.listIndex !== -1) {
this.tiles[this.listIndex].click();
} else {
return;
} // One of the conditions was met, prevent default action (#2988)
e.preventDefault();
},
closeConditional: function closeConditional(e) {
var target = e.target;
return this.isActive && this.closeOnClick && !this.$refs.content.contains(target);
},
genActivatorListeners: function genActivatorListeners() {
var listeners = _menuable.default.options.methods.genActivatorListeners.call(this);
if (!this.disableKeys) {
listeners.keydown = this.onKeyDown;
}
return listeners;
},
genTransition: function genTransition() {
if (!this.transition) return this.genContent();
return this.$createElement('transition', {
props: {
name: this.transition
}
}, [this.genContent()]);
},
genDirectives: function genDirectives() {
var _this2 = this;
var directives = [{
name: 'show',
value: this.isContentActive
}]; // Do not add click outside for hover menu
if (!this.openOnHover && this.closeOnClick) {
directives.push({
name: 'click-outside',
value: function value() {
_this2.isActive = false;
},
args: {
closeConditional: this.closeConditional,
include: function include() {
return [_this2.$el].concat(_toConsumableArray(_this2.getOpenDependentElements()));
}
}
});
}
return directives;
},
genContent: function genContent() {
var _this3 = this;
var options = {
attrs: _objectSpread({}, this.getScopeIdAttrs(), {
role: 'role' in this.$attrs ? this.$attrs.role : 'menu'
}),
staticClass: 'v-menu__content',
class: _objectSpread({}, this.rootThemeClasses, _defineProperty({
'v-menu__content--auto': this.auto,
'v-menu__content--fixed': this.activatorFixed,
menuable__content__active: this.isActive
}, this.contentClass.trim(), true)),
style: this.styles,
directives: this.genDirectives(),
ref: 'content',
on: {
click: function click(e) {
e.stopPropagation();
var target = e.target;
if (target.getAttribute('disabled')) return;
if (_this3.closeOnContentClick) _this3.isActive = false;
},
keydown: this.onKeyDown
}
};
if (!this.disabled && this.openOnHover) {
options.on = options.on || {};
options.on.mouseenter = this.mouseEnterHandler;
}
if (this.openOnHover) {
options.on = options.on || {};
options.on.mouseleave = this.mouseLeaveHandler;
}
return this.$createElement('div', options, this.showLazyContent(this.getContentSlot()));
},
getTiles: function getTiles() {
this.tiles = Array.from(this.$refs.content.querySelectorAll('.v-list-item'));
},
mouseEnterHandler: function mouseEnterHandler() {
var _this4 = this;
this.runDelay('open', function () {
if (_this4.hasJustFocused) return;
_this4.hasJustFocused = true;
_this4.isActive = true;
});
},
mouseLeaveHandler: function mouseLeaveHandler(e) {
var _this5 = this;
// Prevent accidental re-activation
this.runDelay('close', function () {
if (_this5.$refs.content.contains(e.relatedTarget)) return;
requestAnimationFrame(function () {
_this5.isActive = false;
_this5.callDeactivate();
});
});
},
nextTile: function nextTile() {
var tile = this.tiles[this.listIndex + 1];
if (!tile) {
if (!this.tiles.length) return;
this.listIndex = -1;
this.nextTile();
return;
}
this.listIndex++;
if (tile.tabIndex === -1) this.nextTile();
},
prevTile: function prevTile() {
var tile = this.tiles[this.listIndex - 1];
if (!tile) {
if (!this.tiles.length) return;
this.listIndex = this.tiles.length;
this.prevTile();
return;
}
this.listIndex--;
if (tile.tabIndex === -1) this.prevTile();
},
onKeyDown: function onKeyDown(e) {
var _this6 = this;
if (e.keyCode === _helpers.keyCodes.esc) {
// Wait for dependent elements to close first
setTimeout(function () {
_this6.isActive = false;
});
var activator = this.getActivator();
this.$nextTick(function () {
return activator && activator.focus();
});
} else if (!this.isActive && [_helpers.keyCodes.up, _helpers.keyCodes.down].includes(e.keyCode)) {
this.isActive = true;
} // Allow for isActive watcher to generate tile list
this.$nextTick(function () {
return _this6.changeListIndex(e);
});
},
onResize: function onResize() {
if (!this.isActive) return; // Account for screen resize
// and orientation change
// eslint-disable-next-line no-unused-expressions
this.$refs.content.offsetWidth;
this.updateDimensions(); // When resizing to a smaller width
// content width is evaluated before
// the new activator width has been
// set, causing it to not size properly
// hacky but will revisit in the future
clearTimeout(this.resizeTimeout);
this.resizeTimeout = window.setTimeout(this.updateDimensions, 100);
}
},
render: function render(h) {
var data = {
staticClass: 'v-menu',
class: {
'v-menu--inline': !this.fullWidth && (this.$slots.activator || this.$scopedSlots.activator)
},
directives: [{
arg: '500',
name: 'resize',
value: this.onResize
}]
};
return h('div', data, [this.genActivator(), this.$createElement(_ThemeProvider.default, {
props: {
root: true,
light: this.light,
dark: this.dark
}
}, [this.genTransition()])]);
}
});
exports.default = _default;
//# sourceMappingURL=VMenu.js.map