line_push/node_modules/vuetify/es5/components/VDialog/VDialog.js
2022-07-21 03:28:35 +00:00

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