146 lines
4.1 KiB
JavaScript
146 lines
4.1 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
|
|
var _bootable = _interopRequireDefault(require("../../mixins/bootable"));
|
|
|
|
var _groupable = require("../../mixins/groupable");
|
|
|
|
var _touch = _interopRequireDefault(require("../../directives/touch"));
|
|
|
|
var _helpers = require("../../util/helpers");
|
|
|
|
var _mixins = _interopRequireDefault(require("../../util/mixins"));
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
// Mixins
|
|
// Directives
|
|
// Utilities
|
|
var baseMixins = (0, _mixins.default)(_bootable.default, (0, _groupable.factory)('windowGroup', 'v-window-item', 'v-window'));
|
|
|
|
var _default = baseMixins.extend().extend().extend({
|
|
name: 'v-window-item',
|
|
directives: {
|
|
Touch: _touch.default
|
|
},
|
|
props: {
|
|
disabled: Boolean,
|
|
reverseTransition: {
|
|
type: [Boolean, String],
|
|
default: undefined
|
|
},
|
|
transition: {
|
|
type: [Boolean, String],
|
|
default: undefined
|
|
},
|
|
value: {
|
|
required: false
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
done: null,
|
|
isActive: false,
|
|
wasCancelled: false
|
|
};
|
|
},
|
|
computed: {
|
|
classes: function classes() {
|
|
return this.groupClasses;
|
|
},
|
|
computedTransition: function computedTransition() {
|
|
if (!this.windowGroup.internalReverse) {
|
|
return typeof this.transition !== 'undefined' ? this.transition || '' : this.windowGroup.computedTransition;
|
|
}
|
|
|
|
return typeof this.reverseTransition !== 'undefined' ? this.reverseTransition || '' : this.windowGroup.computedTransition;
|
|
}
|
|
},
|
|
mounted: function mounted() {
|
|
this.$el.addEventListener('transitionend', this.onTransitionEnd, false);
|
|
},
|
|
beforeDestroy: function beforeDestroy() {
|
|
this.$el.removeEventListener('transitionend', this.onTransitionEnd, false);
|
|
},
|
|
methods: {
|
|
genDefaultSlot: function genDefaultSlot() {
|
|
return this.$slots.default;
|
|
},
|
|
genWindowItem: function genWindowItem() {
|
|
return this.$createElement('div', {
|
|
staticClass: 'v-window-item',
|
|
class: this.classes,
|
|
directives: [{
|
|
name: 'show',
|
|
value: this.isActive
|
|
}],
|
|
on: this.$listeners
|
|
}, this.showLazyContent(this.genDefaultSlot()));
|
|
},
|
|
onAfterEnter: function onAfterEnter() {
|
|
var _this = this;
|
|
|
|
if (this.wasCancelled) {
|
|
this.wasCancelled = false;
|
|
return;
|
|
}
|
|
|
|
requestAnimationFrame(function () {
|
|
_this.windowGroup.internalHeight = undefined;
|
|
_this.windowGroup.isActive = false;
|
|
});
|
|
},
|
|
onBeforeEnter: function onBeforeEnter() {
|
|
this.windowGroup.isActive = true;
|
|
},
|
|
onBeforeLeave: function onBeforeLeave(el) {
|
|
this.windowGroup.internalHeight = (0, _helpers.convertToUnit)(el.clientHeight);
|
|
},
|
|
onEnterCancelled: function onEnterCancelled() {
|
|
this.wasCancelled = true;
|
|
},
|
|
onEnter: function onEnter(el, done) {
|
|
var _this2 = this;
|
|
|
|
var isBooted = this.windowGroup.isBooted;
|
|
if (isBooted) this.done = done;
|
|
this.$nextTick(function () {
|
|
if (!_this2.computedTransition) return done();
|
|
_this2.windowGroup.internalHeight = (0, _helpers.convertToUnit)(el.clientHeight); // On initial render, there is no transition
|
|
// Vue leaves a `enter` transition class
|
|
// if done is called too fast
|
|
|
|
!isBooted && setTimeout(done, 100);
|
|
});
|
|
},
|
|
onTransitionEnd: function onTransitionEnd(e) {
|
|
// This ensures we only call done
|
|
// when the element transform
|
|
// completes
|
|
if (e.propertyName !== 'transform' || e.target !== this.$el || !this.done) return;
|
|
this.done();
|
|
this.done = null;
|
|
}
|
|
},
|
|
render: function render(h) {
|
|
return h('transition', {
|
|
props: {
|
|
name: this.computedTransition
|
|
},
|
|
on: {
|
|
afterEnter: this.onAfterEnter,
|
|
beforeEnter: this.onBeforeEnter,
|
|
beforeLeave: this.onBeforeLeave,
|
|
enter: this.onEnter,
|
|
enterCancelled: this.onEnterCancelled
|
|
}
|
|
}, [this.genWindowItem()]);
|
|
}
|
|
});
|
|
|
|
exports.default = _default;
|
|
//# sourceMappingURL=VWindowItem.js.map
|