326 lines
11 KiB
JavaScript
326 lines
11 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
|
|
require("../../../src/components/VDialog/VDialog.sass");
|
|
|
|
var _VThemeProvider = require("../VThemeProvider");
|
|
|
|
var _activatable = _interopRequireDefault(require("../../mixins/activatable"));
|
|
|
|
var _dependent = _interopRequireDefault(require("../../mixins/dependent"));
|
|
|
|
var _detachable = _interopRequireDefault(require("../../mixins/detachable"));
|
|
|
|
var _overlayable = _interopRequireDefault(require("../../mixins/overlayable"));
|
|
|
|
var _returnable = _interopRequireDefault(require("../../mixins/returnable"));
|
|
|
|
var _stackable = _interopRequireDefault(require("../../mixins/stackable"));
|
|
|
|
var _toggleable = _interopRequireDefault(require("../../mixins/toggleable"));
|
|
|
|
var _clickOutside = _interopRequireDefault(require("../../directives/click-outside"));
|
|
|
|
var _mixins = _interopRequireDefault(require("../../util/mixins"));
|
|
|
|
var _console = require("../../util/console");
|
|
|
|
var _helpers = require("../../util/helpers");
|
|
|
|
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 _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; } }
|
|
|
|
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; }
|
|
|
|
var baseMixins = (0, _mixins.default)(_activatable.default, _dependent.default, _detachable.default, _overlayable.default, _returnable.default, _stackable.default, _toggleable.default);
|
|
/* @vue/component */
|
|
|
|
var _default = baseMixins.extend({
|
|
name: 'v-dialog',
|
|
directives: {
|
|
ClickOutside: _clickOutside.default
|
|
},
|
|
props: {
|
|
dark: Boolean,
|
|
disabled: Boolean,
|
|
fullscreen: Boolean,
|
|
light: Boolean,
|
|
maxWidth: {
|
|
type: [String, Number],
|
|
default: 'none'
|
|
},
|
|
noClickAnimation: Boolean,
|
|
origin: {
|
|
type: String,
|
|
default: 'center center'
|
|
},
|
|
persistent: Boolean,
|
|
retainFocus: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
scrollable: Boolean,
|
|
transition: {
|
|
type: [String, Boolean],
|
|
default: 'dialog-transition'
|
|
},
|
|
width: {
|
|
type: [String, Number],
|
|
default: 'auto'
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
activatedBy: null,
|
|
animate: false,
|
|
animateTimeout: -1,
|
|
isActive: !!this.value,
|
|
stackMinZIndex: 200
|
|
};
|
|
},
|
|
computed: {
|
|
classes: function classes() {
|
|
var _ref;
|
|
|
|
return _ref = {}, _defineProperty(_ref, "v-dialog ".concat(this.contentClass).trim(), true), _defineProperty(_ref, 'v-dialog--active', this.isActive), _defineProperty(_ref, 'v-dialog--persistent', this.persistent), _defineProperty(_ref, 'v-dialog--fullscreen', this.fullscreen), _defineProperty(_ref, 'v-dialog--scrollable', this.scrollable), _defineProperty(_ref, 'v-dialog--animated', this.animate), _ref;
|
|
},
|
|
contentClasses: function contentClasses() {
|
|
return {
|
|
'v-dialog__content': true,
|
|
'v-dialog__content--active': this.isActive
|
|
};
|
|
},
|
|
hasActivator: function hasActivator() {
|
|
return Boolean(!!this.$slots.activator || !!this.$scopedSlots.activator);
|
|
}
|
|
},
|
|
watch: {
|
|
isActive: function isActive(val) {
|
|
if (val) {
|
|
this.show();
|
|
this.hideScroll();
|
|
} else {
|
|
this.removeOverlay();
|
|
this.unbind();
|
|
}
|
|
},
|
|
fullscreen: function fullscreen(val) {
|
|
if (!this.isActive) return;
|
|
|
|
if (val) {
|
|
this.hideScroll();
|
|
this.removeOverlay(false);
|
|
} else {
|
|
this.showScroll();
|
|
this.genOverlay();
|
|
}
|
|
}
|
|
},
|
|
created: function created() {
|
|
/* istanbul ignore next */
|
|
if (this.$attrs.hasOwnProperty('full-width')) {
|
|
(0, _console.removed)('full-width', this);
|
|
}
|
|
},
|
|
beforeMount: function beforeMount() {
|
|
var _this = this;
|
|
|
|
this.$nextTick(function () {
|
|
_this.isBooted = _this.isActive;
|
|
_this.isActive && _this.show();
|
|
});
|
|
},
|
|
beforeDestroy: function beforeDestroy() {
|
|
if (typeof window !== 'undefined') this.unbind();
|
|
},
|
|
methods: {
|
|
animateClick: function animateClick() {
|
|
var _this2 = this;
|
|
|
|
this.animate = false; // Needed for when clicking very fast
|
|
// outside of the dialog
|
|
|
|
this.$nextTick(function () {
|
|
_this2.animate = true;
|
|
window.clearTimeout(_this2.animateTimeout);
|
|
_this2.animateTimeout = window.setTimeout(function () {
|
|
return _this2.animate = false;
|
|
}, 150);
|
|
});
|
|
},
|
|
closeConditional: function closeConditional(e) {
|
|
var target = e.target; // Ignore the click if the dialog is closed or destroyed,
|
|
// if it was on an element inside the content,
|
|
// if it was dragged onto the overlay (#6969),
|
|
// or if this isn't the topmost dialog (#9907)
|
|
|
|
return !(this._isDestroyed || !this.isActive || this.$refs.content.contains(target) || this.overlay && target && !this.overlay.$el.contains(target)) && this.activeZIndex >= this.getMaxZIndex();
|
|
},
|
|
hideScroll: function hideScroll() {
|
|
if (this.fullscreen) {
|
|
document.documentElement.classList.add('overflow-y-hidden');
|
|
} else {
|
|
_overlayable.default.options.methods.hideScroll.call(this);
|
|
}
|
|
},
|
|
show: function show() {
|
|
var _this3 = this;
|
|
|
|
!this.fullscreen && !this.hideOverlay && this.genOverlay();
|
|
this.$nextTick(function () {
|
|
_this3.$refs.content.focus();
|
|
|
|
_this3.bind();
|
|
});
|
|
},
|
|
bind: function bind() {
|
|
window.addEventListener('focusin', this.onFocusin);
|
|
},
|
|
unbind: function unbind() {
|
|
window.removeEventListener('focusin', this.onFocusin);
|
|
},
|
|
onClickOutside: function onClickOutside(e) {
|
|
this.$emit('click:outside', e);
|
|
|
|
if (this.persistent) {
|
|
this.noClickAnimation || this.animateClick();
|
|
} else {
|
|
this.isActive = false;
|
|
}
|
|
},
|
|
onKeydown: function onKeydown(e) {
|
|
if (e.keyCode === _helpers.keyCodes.esc && !this.getOpenDependents().length) {
|
|
if (!this.persistent) {
|
|
this.isActive = false;
|
|
var activator = this.getActivator();
|
|
this.$nextTick(function () {
|
|
return activator && activator.focus();
|
|
});
|
|
} else if (!this.noClickAnimation) {
|
|
this.animateClick();
|
|
}
|
|
}
|
|
|
|
this.$emit('keydown', e);
|
|
},
|
|
// On focus change, wrap focus to stay inside the dialog
|
|
// https://github.com/vuetifyjs/vuetify/issues/6892
|
|
onFocusin: function onFocusin(e) {
|
|
if (!e || !this.retainFocus) return;
|
|
var target = e.target;
|
|
|
|
if (!!target && // It isn't the document or the dialog body
|
|
![document, this.$refs.content].includes(target) && // It isn't inside the dialog body
|
|
!this.$refs.content.contains(target) && // We're the topmost dialog
|
|
this.activeZIndex >= this.getMaxZIndex() && // It isn't inside a dependent element (like a menu)
|
|
!this.getOpenDependentElements().some(function (el) {
|
|
return el.contains(target);
|
|
}) // So we must have focused something outside the dialog and its children
|
|
) {
|
|
// Find and focus the first available element inside the dialog
|
|
var focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
|
|
var el = _toConsumableArray(focusable).find(function (el) {
|
|
return !el.hasAttribute('disabled');
|
|
});
|
|
|
|
el && el.focus();
|
|
}
|
|
},
|
|
genContent: function genContent() {
|
|
var _this4 = this;
|
|
|
|
return this.showLazyContent(function () {
|
|
return [_this4.$createElement(_VThemeProvider.VThemeProvider, {
|
|
props: {
|
|
root: true,
|
|
light: _this4.light,
|
|
dark: _this4.dark
|
|
}
|
|
}, [_this4.$createElement('div', {
|
|
class: _this4.contentClasses,
|
|
attrs: _objectSpread({
|
|
role: 'document',
|
|
tabindex: _this4.isActive ? 0 : undefined
|
|
}, _this4.getScopeIdAttrs()),
|
|
on: {
|
|
keydown: _this4.onKeydown
|
|
},
|
|
style: {
|
|
zIndex: _this4.activeZIndex
|
|
},
|
|
ref: 'content'
|
|
}, [_this4.genTransition()])])];
|
|
});
|
|
},
|
|
genTransition: function genTransition() {
|
|
var content = this.genInnerContent();
|
|
if (!this.transition) return content;
|
|
return this.$createElement('transition', {
|
|
props: {
|
|
name: this.transition,
|
|
origin: this.origin,
|
|
appear: true
|
|
}
|
|
}, [content]);
|
|
},
|
|
genInnerContent: function genInnerContent() {
|
|
var data = {
|
|
class: this.classes,
|
|
ref: 'dialog',
|
|
directives: [{
|
|
name: 'click-outside',
|
|
value: {
|
|
handler: this.onClickOutside,
|
|
closeConditional: this.closeConditional,
|
|
include: this.getOpenDependentElements
|
|
}
|
|
}, {
|
|
name: 'show',
|
|
value: this.isActive
|
|
}],
|
|
style: {
|
|
transformOrigin: this.origin
|
|
}
|
|
};
|
|
|
|
if (!this.fullscreen) {
|
|
data.style = _objectSpread({}, data.style, {
|
|
maxWidth: this.maxWidth === 'none' ? undefined : (0, _helpers.convertToUnit)(this.maxWidth),
|
|
width: this.width === 'auto' ? undefined : (0, _helpers.convertToUnit)(this.width)
|
|
});
|
|
}
|
|
|
|
return this.$createElement('div', data, this.getContentSlot());
|
|
}
|
|
},
|
|
render: function render(h) {
|
|
return h('div', {
|
|
staticClass: 'v-dialog__container',
|
|
class: {
|
|
'v-dialog__container--attached': this.attach === '' || this.attach === true || this.attach === 'attach'
|
|
},
|
|
attrs: {
|
|
role: 'dialog'
|
|
}
|
|
}, [this.genActivator(), this.genContent()]);
|
|
}
|
|
});
|
|
|
|
exports.default = _default;
|
|
//# sourceMappingURL=VDialog.js.map
|